-
+
-
+
{{ badgeText }}
-
+ direction="column" gap="8" :class="$style.tooltip">
Efficiency
- {{ parseInt(tooltipEfficiencyText * 100) }}%
+ {{ Number.parseInt(tooltipEfficiencyText *
+ 100) }}%
Usage
- {{ abbreviate(tooltipUsedText) }} / {{ abbreviate(tooltipLimitText) }}
+ {{ abbreviate(tooltipUsedText) }} / {{ abbreviate(tooltipLimitText) }}
diff --git a/components/modules/gas/GasFeeCalculator.vue b/components/modules/gas/GasFeeCalculator.vue
index 0f68dd0e..43bb23ad 100644
--- a/components/modules/gas/GasFeeCalculator.vue
+++ b/components/modules/gas/GasFeeCalculator.vue
@@ -14,7 +14,7 @@ const isInputActive = ref(false)
const gasLimit = ref(null)
const handleGasLimitInput = () => {
- if (parseFloat(gasLimit.value.replace(/[^0-9.]/g, "")) > 5_665_140_000) {
+ if (Number.parseFloat(gasLimit.value.replace(/[^0-9.]/g, "")) > 5_665_140_000) {
gasLimit.value = "5 665 140 000"
return
}
@@ -22,9 +22,9 @@ const handleGasLimitInput = () => {
}
const gasFee = computed(() => {
- const fast = Math.ceil(appStore.gas.fast * parseFloat(gasLimit.value.replaceAll(" ", "")))
- const median = Math.ceil(appStore.gas.median * parseFloat(gasLimit.value.replaceAll(" ", "")))
- const slow = Math.ceil(appStore.gas.slow * parseFloat(gasLimit.value.replaceAll(" ", "")))
+ const fast = Math.ceil(appStore.gas.fast * Number.parseFloat(gasLimit.value.replaceAll(" ", "")))
+ const median = Math.ceil(appStore.gas.median * Number.parseFloat(gasLimit.value.replaceAll(" ", "")))
+ const slow = Math.ceil(appStore.gas.slow * Number.parseFloat(gasLimit.value.replaceAll(" ", "")))
return { fast, median, slow }
})
diff --git a/components/modules/gas/GasPriceChart.vue b/components/modules/gas/GasPriceChart.vue
index 09b88abc..4721338b 100644
--- a/components/modules/gas/GasPriceChart.vue
+++ b/components/modules/gas/GasPriceChart.vue
@@ -158,8 +158,8 @@ const getGasPriceSeries = async () => {
const sizeSeriesRawData = await fetchGasPriceSeries({
timeframe: props.selectedPeriod.timeframe,
- to: parseInt(DateTime.now().plus({ minutes: 1 }).ts / 1_000),
- from: parseInt(
+ to: Number.parseInt(DateTime.now().plus({ minutes: 1 }).ts / 1_000),
+ from: Number.parseInt(
DateTime.now()
.set({ minutes: 0, seconds: 0 })
.minus({
@@ -170,10 +170,10 @@ const getGasPriceSeries = async () => {
})
const gasPriceSeriesMap = {}
- sizeSeriesRawData.forEach((item) => {
+ for (const item of sizeSeriesRawData) {
gasPriceSeriesMap[DateTime.fromISO(item.time).toFormat(props.selectedPeriod.timeframe === "day" ? "y-LL-dd" : "y-LL-dd-HH")] =
item.value
- })
+ }
for (let i = 1; i < props.selectedPeriod.value + 1; i++) {
const dt = DateTime.now()
@@ -184,7 +184,8 @@ const getGasPriceSeries = async () => {
})
gasPriceSeries.value.push({
date: dt.toJSDate(),
- value: parseFloat(gasPriceSeriesMap[dt.toFormat(props.selectedPeriod.timeframe === "day" ? "y-LL-dd" : "y-LL-dd-HH")]) || 0,
+ value:
+ Number.parseFloat(gasPriceSeriesMap[dt.toFormat(props.selectedPeriod.timeframe === "day" ? "y-LL-dd" : "y-LL-dd-HH")]) || 0,
})
}
}
@@ -194,8 +195,12 @@ const buildGasTrackingCharts = async () => {
buildChart(
gasPriceChartEl.value.wrapper,
gasPriceSeries.value,
- () => (showTooltip.value = true),
- () => (showTooltip.value = false),
+ () => {
+ showTooltip.value = true
+ },
+ () => {
+ showTooltip.value = false
+ },
)
}
diff --git a/components/modules/gas/GasPriceHeatmap.vue b/components/modules/gas/GasPriceHeatmap.vue
index b8c58459..dcc5ad2a 100644
--- a/components/modules/gas/GasPriceHeatmap.vue
+++ b/components/modules/gas/GasPriceHeatmap.vue
@@ -29,13 +29,13 @@ onMounted(async () => {
const data = await fetchGasPriceSeries({
timeframe: props.selectedPeriod.timeframe,
- to: parseInt(DateTime.now().plus({ minutes: 1 }).ts / 1_000),
- from: parseInt(DateTime.now().set({ minutes: 0, seconds: 0 }).minus({ days: 4 }).ts / 1_000),
+ to: Number.parseInt(DateTime.now().plus({ minutes: 1 }).ts / 1_000),
+ from: Number.parseInt(DateTime.now().set({ minutes: 0, seconds: 0 }).minus({ days: 4 }).ts / 1_000),
})
const data1 = await fetchGasPriceSeries({
timeframe: props.selectedPeriod.timeframe,
- to: parseInt(DateTime.now().minus({ days: 4 }).ts / 1_000),
- from: parseInt(DateTime.now().set({ minutes: 0, seconds: 0 }).minus({ days: 7 }).ts / 1_000),
+ to: Number.parseInt(DateTime.now().minus({ days: 4 }).ts / 1_000),
+ from: Number.parseInt(DateTime.now().set({ minutes: 0, seconds: 0 }).minus({ days: 7 }).ts / 1_000),
})
rawSeries = [...data, ...data1.slice(1, data1.length)]
@@ -47,11 +47,11 @@ onMounted(async () => {
seriesByDay.value[DateTime.now().minus({ days: idx }).toFormat("d")] = []
}
- rawSeries.forEach((d) => {
+ for (const d of rawSeries) {
seriesByDay.value[DateTime.fromISO(d.time).toFormat("d")]?.push(d)
- })
+ }
- Object.keys(seriesByDay.value).forEach((d) => {
+ for (const d of Object.keys(seriesByDay.value)) {
seriesByDay.value[d].reverse()
if (seriesByDay.value[d].length !== 24) {
while (seriesByDay.value[d].length !== 24) {
@@ -61,7 +61,7 @@ onMounted(async () => {
})
}
}
- })
+ }
})
@@ -99,7 +99,7 @@ onMounted(async () => {
Gas Price
- {{ parseFloat(hour.value).toFixed(4) }} UTIA
+ {{ Number.parseFloat(hour.value).toFixed(4) }} UTIA
Time
diff --git a/components/modules/namespace/NamespaceCharts.vue b/components/modules/namespace/NamespaceCharts.vue
index eee8e584..cc8df6e5 100644
--- a/components/modules/namespace/NamespaceCharts.vue
+++ b/components/modules/namespace/NamespaceCharts.vue
@@ -98,7 +98,7 @@ const buildChart = (chartEl, data, onEnter, onLeave) => {
tooltipText.value = data[idx].value
if (tooltipEl.value) {
- if (idx > parseInt(selectedPeriod.value.value / 2)) {
+ if (idx > Number.parseInt(selectedPeriod.value.value / 2)) {
tooltipDynamicXPosition.value = tooltipXOffset.value - tooltipEl.value.wrapper.getBoundingClientRect().width - 16
} else {
tooltipDynamicXPosition.value = tooltipXOffset.value + 16
@@ -190,7 +190,7 @@ const getSizeSeries = async () => {
id: props.id,
name: "size",
timeframe: selectedPeriod.value.timeframe,
- from: parseInt(
+ from: Number.parseInt(
DateTime.now().minus({
days: selectedPeriod.value.timeframe === "day" ? selectedPeriod.value.value : 0,
hours: selectedPeriod.value.timeframe === "hour" ? selectedPeriod.value.value : 0,
@@ -199,10 +199,10 @@ const getSizeSeries = async () => {
})
const sizeSeriesMap = {}
- sizeSeriesRawData.forEach((item) => {
+ for (const item of sizeSeriesRawData) {
sizeSeriesMap[DateTime.fromISO(item.time).toFormat(selectedPeriod.value.timeframe === "day" ? "y-LL-dd" : "y-LL-dd-HH")] =
item.value
- })
+ }
for (let i = 1; i < selectedPeriod.value.value + 1; i++) {
const dt = DateTime.now().minus({
@@ -211,7 +211,7 @@ const getSizeSeries = async () => {
})
sizeSeries.value.push({
date: dt.toJSDate(),
- value: parseInt(sizeSeriesMap[dt.toFormat(selectedPeriod.value.timeframe === "day" ? "y-LL-dd" : "y-LL-dd-HH")]) || 0,
+ value: Number.parseInt(sizeSeriesMap[dt.toFormat(selectedPeriod.value.timeframe === "day" ? "y-LL-dd" : "y-LL-dd-HH")]) || 0,
})
}
}
@@ -223,7 +223,7 @@ const getPfbSeries = async () => {
id: props.id,
name: "pfb_count",
timeframe: selectedPeriod.value.timeframe,
- from: parseInt(
+ from: Number.parseInt(
DateTime.now().minus({
days: selectedPeriod.value.timeframe === "day" ? selectedPeriod.value.value : 0,
hours: selectedPeriod.value.timeframe === "hour" ? selectedPeriod.value.value : 0,
@@ -232,9 +232,9 @@ const getPfbSeries = async () => {
})
const pfbSeriesMap = {}
- pfbSeriesRawData.forEach((item) => {
+ for (const item of pfbSeriesRawData) {
pfbSeriesMap[DateTime.fromISO(item.time).toFormat(selectedPeriod.value.timeframe === "day" ? "y-LL-dd" : "y-LL-dd-HH")] = item.value
- })
+ }
for (let i = 1; i < selectedPeriod.value.value + 1; i++) {
const dt = DateTime.now().minus({
@@ -243,7 +243,7 @@ const getPfbSeries = async () => {
})
pfbSeries.value.push({
date: dt.toJSDate(),
- value: parseInt(pfbSeriesMap[dt.toFormat(selectedPeriod.value.timeframe === "day" ? "y-LL-dd" : "y-LL-dd-HH")]) || 0,
+ value: Number.parseInt(pfbSeriesMap[dt.toFormat(selectedPeriod.value.timeframe === "day" ? "y-LL-dd" : "y-LL-dd-HH")]) || 0,
})
}
}
@@ -253,16 +253,24 @@ const buildNamespaceCharts = async () => {
buildChart(
sizeSeriesChartEl.value.wrapper,
sizeSeries.value,
- () => (showSeriesTooltip.value = true),
- () => (showSeriesTooltip.value = false),
+ () => {
+ showSeriesTooltip.value = true
+ },
+ () => {
+ showSeriesTooltip.value = false
+ },
)
await getPfbSeries()
buildChart(
pfbSeriesChartEl.value.wrapper,
pfbSeries.value,
- () => (showPfbTooltip.value = true),
- () => (showPfbTooltip.value = false),
+ () => {
+ showPfbTooltip.value = true
+ },
+ () => {
+ showPfbTooltip.value = false
+ },
)
}
diff --git a/components/modules/navigation/NavLink.vue b/components/modules/navigation/NavLink.vue
index 7f9985c5..0ff59264 100644
--- a/components/modules/navigation/NavLink.vue
+++ b/components/modules/navigation/NavLink.vue
@@ -8,7 +8,7 @@ const props = defineProps({
link: Object,
})
-const isExpanded = ref(props.link.children?.some((l) => l.path === route.path) ? true : (props.link.name === 'Rollups' ? true : false))
+const isExpanded = ref(props.link.children?.some((l) => l.path === route.path) ? true : props.link.name === "Rollups")
const handleClick = () => {
emit("onClose")
diff --git a/components/modules/navigation/Search.vue b/components/modules/navigation/Search.vue
index 3f586624..a4af6467 100644
--- a/components/modules/navigation/Search.vue
+++ b/components/modules/navigation/Search.vue
@@ -68,7 +68,7 @@ const handleInput = () => {
}
const getResultMetadata = (target) => {
- let metadata = { type: null, title: null, routerLink: null }
+ const metadata = { type: null, title: null, routerLink: null }
switch (target.type.toLowerCase()) {
case "tx":
diff --git a/components/modules/rollup/RollupCharts.vue b/components/modules/rollup/RollupCharts.vue
index 1eb2cc38..4685f645 100644
--- a/components/modules/rollup/RollupCharts.vue
+++ b/components/modules/rollup/RollupCharts.vue
@@ -101,7 +101,7 @@ const buildChart = (chartEl, data, onEnter, onLeave) => {
tooltipText.value = data[idx].value
if (tooltipEl.value) {
- if (idx > parseInt(selectedPeriod.value.value / 2)) {
+ if (idx > Number.parseInt(selectedPeriod.value.value / 2)) {
tooltipDynamicXPosition.value = tooltipXOffset.value - tooltipEl.value.wrapper.getBoundingClientRect().width - 16
} else {
tooltipDynamicXPosition.value = tooltipXOffset.value + 16
@@ -193,7 +193,7 @@ const getSizeSeries = async () => {
id: props.rollup.id,
name: "size",
timeframe: selectedPeriod.value.timeframe,
- from: parseInt(
+ from: Number.parseInt(
DateTime.now().minus({
days: selectedPeriod.value.timeframe === "day" ? selectedPeriod.value.value : 0,
hours: selectedPeriod.value.timeframe === "hour" ? selectedPeriod.value.value : 0,
@@ -202,10 +202,10 @@ const getSizeSeries = async () => {
})
const sizeSeriesMap = {}
- sizeSeriesRawData.forEach((item) => {
+ for (const item of sizeSeriesRawData) {
sizeSeriesMap[DateTime.fromISO(item.time).toFormat(selectedPeriod.value.timeframe === "day" ? "y-LL-dd" : "y-LL-dd-HH")] =
item.value
- })
+ }
for (let i = 1; i < selectedPeriod.value.value + 1; i++) {
const dt = DateTime.now().minus({
@@ -214,7 +214,7 @@ const getSizeSeries = async () => {
})
sizeSeries.value.push({
date: dt.toJSDate(),
- value: parseInt(sizeSeriesMap[dt.toFormat(selectedPeriod.value.timeframe === "day" ? "y-LL-dd" : "y-LL-dd-HH")]) || 0,
+ value: Number.parseInt(sizeSeriesMap[dt.toFormat(selectedPeriod.value.timeframe === "day" ? "y-LL-dd" : "y-LL-dd-HH")]) || 0,
})
}
}
@@ -226,7 +226,7 @@ const getPfbSeries = async () => {
id: props.rollup.id,
name: "blobs_count",
timeframe: selectedPeriod.value.timeframe,
- from: parseInt(
+ from: Number.parseInt(
DateTime.now().minus({
days: selectedPeriod.value.timeframe === "day" ? selectedPeriod.value.value : 0,
hours: selectedPeriod.value.timeframe === "hour" ? selectedPeriod.value.value : 0,
@@ -235,9 +235,10 @@ const getPfbSeries = async () => {
})
const blobsSeriesMap = {}
- blobsSeriesRawData.forEach((item) => {
- blobsSeriesMap[DateTime.fromISO(item.time).toFormat(selectedPeriod.value.timeframe === "day" ? "y-LL-dd" : "y-LL-dd-HH")] = item.value
- })
+ for (const item of blobsSeriesRawData) {
+ blobsSeriesMap[DateTime.fromISO(item.time).toFormat(selectedPeriod.value.timeframe === "day" ? "y-LL-dd" : "y-LL-dd-HH")] =
+ item.value
+ }
for (let i = 1; i < selectedPeriod.value.value + 1; i++) {
const dt = DateTime.now().minus({
@@ -246,7 +247,7 @@ const getPfbSeries = async () => {
})
pfbSeries.value.push({
date: dt.toJSDate(),
- value: parseInt(blobsSeriesMap[dt.toFormat(selectedPeriod.value.timeframe === "day" ? "y-LL-dd" : "y-LL-dd-HH")]) || 0,
+ value: Number.parseInt(blobsSeriesMap[dt.toFormat(selectedPeriod.value.timeframe === "day" ? "y-LL-dd" : "y-LL-dd-HH")]) || 0,
})
}
}
@@ -258,7 +259,7 @@ const getFeeSeries = async () => {
id: props.rollup.id,
name: "fee",
timeframe: selectedPeriod.value.timeframe,
- from: parseInt(
+ from: Number.parseInt(
DateTime.now().minus({
days: selectedPeriod.value.timeframe === "day" ? selectedPeriod.value.value : 0,
hours: selectedPeriod.value.timeframe === "hour" ? selectedPeriod.value.value : 0,
@@ -267,9 +268,9 @@ const getFeeSeries = async () => {
})
const feeSeriesMap = {}
- feeSeriesRawData.forEach((item) => {
+ for (const item of feeSeriesRawData) {
feeSeriesMap[DateTime.fromISO(item.time).toFormat(selectedPeriod.value.timeframe === "day" ? "y-LL-dd" : "y-LL-dd-HH")] = item.value
- })
+ }
for (let i = 1; i < selectedPeriod.value.value + 1; i++) {
const dt = DateTime.now().minus({
@@ -278,7 +279,7 @@ const getFeeSeries = async () => {
})
feeSeries.value.push({
date: dt.toJSDate(),
- value: parseInt(feeSeriesMap[dt.toFormat(selectedPeriod.value.timeframe === "day" ? "y-LL-dd" : "y-LL-dd-HH")]) || 0,
+ value: Number.parseInt(feeSeriesMap[dt.toFormat(selectedPeriod.value.timeframe === "day" ? "y-LL-dd" : "y-LL-dd-HH")]) || 0,
})
}
}
@@ -288,24 +289,36 @@ const buildRollupCharts = async () => {
buildChart(
sizeSeriesChartEl.value.wrapper,
sizeSeries.value,
- () => (showSeriesTooltip.value = true),
- () => (showSeriesTooltip.value = false),
+ () => {
+ showSeriesTooltip.value = true
+ },
+ () => {
+ showSeriesTooltip.value = false
+ },
)
await getPfbSeries()
buildChart(
pfbSeriesChartEl.value.wrapper,
pfbSeries.value,
- () => (showPfbTooltip.value = true),
- () => (showPfbTooltip.value = false),
+ () => {
+ showPfbTooltip.value = true
+ },
+ () => {
+ showPfbTooltip.value = false
+ },
)
await getFeeSeries()
buildChart(
feeSeriesChartEl.value.wrapper,
feeSeries.value,
- () => (showFeeTooltip.value = true),
- () => (showFeeTooltip.value = false),
+ () => {
+ showFeeTooltip.value = true
+ },
+ () => {
+ showFeeTooltip.value = false
+ },
)
}
diff --git a/components/modules/rollup/RollupOverview.vue b/components/modules/rollup/RollupOverview.vue
index 85636179..ec638818 100644
--- a/components/modules/rollup/RollupOverview.vue
+++ b/components/modules/rollup/RollupOverview.vue
@@ -54,10 +54,9 @@ const namespaces = ref([])
const blobs = ref([])
const relatedLinks = computed(() => {
if (props.rollup.links?.length) {
- return props.rollup.links[0].split(',')
- } else {
- return []
+ return props.rollup.links[0].split(",")
}
+ return []
})
const page = ref(1)
@@ -77,7 +76,7 @@ const getBlobs = async () => {
id: props.rollup.id,
offset: (page.value - 1) * 10,
limit: 10,
- sort_by: 'time',
+ sort_by: "time",
})
if (data.value?.length) {
@@ -175,18 +174,18 @@ const handleCSVDownload = async (period) => {
let from
switch (period) {
case "day":
- from = parseInt(DateTime.now().minus({ days: 1 }).toMillis() / 1_000)
+ from = Number.parseInt(DateTime.now().minus({ days: 1 }).toMillis() / 1_000)
break
case "week":
- from = parseInt(DateTime.now().minus({ weeks: 1 }).toMillis() / 1_000)
+ from = Number.parseInt(DateTime.now().minus({ weeks: 1 }).toMillis() / 1_000)
break
case "month":
- from = parseInt(DateTime.now().minus({ months: 1 }).toMillis() / 1_000)
+ from = Number.parseInt(DateTime.now().minus({ months: 1 }).toMillis() / 1_000)
break
default:
break
}
- let to = parseInt(DateTime.now().toMillis() / 1_000)
+ const to = Number.parseInt(DateTime.now().toMillis() / 1_000)
const { data } = await fetchRollupExportData({
id: props.rollup.id,
diff --git a/components/modules/rollup/tables/BlobsTable.vue b/components/modules/rollup/tables/BlobsTable.vue
index f4602399..5cd91c36 100644
--- a/components/modules/rollup/tables/BlobsTable.vue
+++ b/components/modules/rollup/tables/BlobsTable.vue
@@ -22,7 +22,7 @@ const props = defineProps({
rollup: {
type: Object,
required: false,
- }
+ },
})
const handleViewBlob = (blob) => {
diff --git a/components/modules/stats/BarChart.vue b/components/modules/stats/BarChart.vue
index 5e76d3e5..81722096 100644
--- a/components/modules/stats/BarChart.vue
+++ b/components/modules/stats/BarChart.vue
@@ -13,9 +13,11 @@ const props = defineProps({
},
})
-const currentData = computed(() => { return {data: props.series.currentData}})
-const prevData = computed(() => {
- let data = []
+const currentData = computed(() => {
+ return { data: props.series.currentData }
+})
+const prevData = computed(() => {
+ const data = []
props.series.prevData?.forEach((d, index) => {
data.push({
date: currentData.value.data[index].date,
@@ -40,10 +42,10 @@ const buildChart = (chart, cData, pData, onEnter, onLeave) => {
const marginBottom = 24
const marginLeft = 36
const marginAxisX = 20
- const barWidth = Math.round(Math.max((width - marginLeft - marginRight) / (cData.data.length) - (pData.data.length ? 2 : 5)), 4)
+ const barWidth = Math.round(Math.max((width - marginLeft - marginRight) / cData.data.length - (pData.data.length ? 2 : 5)), 4)
- const MIN_VALUE = d3.min([...cData.data.map(s => s.value), ...pData.data?.map(s => s.value)])
- const MAX_VALUE = d3.max([...cData.data.map(s => s.value), ...pData.data?.map(s => s.value)])
+ const MIN_VALUE = d3.min([...cData.data.map((s) => s.value), ...pData.data.map((s) => s.value)])
+ const MAX_VALUE = d3.max([...cData.data.map((s) => s.value), ...pData.data.map((s) => s.value)])
/** Scales */
const x0 = d3.scaleUtc(
@@ -51,33 +53,32 @@ const buildChart = (chart, cData, pData, onEnter, onLeave) => {
[marginLeft, width - marginRight - barWidth],
)
- const x1 = d3.scaleBand(
- ['prev', 'current'],
- [0, barWidth],
- )
+ const x1 = d3.scaleBand(["prev", "current"], [0, barWidth])
let data = cData.data.map((d, i) => ({
date: new Date(d.date),
value: d.value,
color: cData.color,
- group: 'current',
+ group: "current",
index: i,
}))
if (pData.data.length) {
- data = data.concat(pData.data.map((d, i) => ({
- date: new Date(d.date),
- realDate: new Date(d.realDate),
- value: d.value,
- color: pData.color,
- group: 'prev',
- index: i,
- })))
+ data = data.concat(
+ pData.data.map((d, i) => ({
+ date: new Date(d.date),
+ realDate: new Date(d.realDate),
+ value: d.value,
+ color: pData.color,
+ group: "prev",
+ index: i,
+ })),
+ )
}
const y = d3.scaleLinear([MIN_VALUE, MAX_VALUE], [height - marginBottom, marginTop])
-
+
function formatDate(date) {
- if (props.series.timeframe === 'hour') {
+ if (props.series.timeframe === "hour") {
return DateTime.fromJSDate(date).toFormat("LLL dd, HH:mm")
}
@@ -86,15 +87,15 @@ const buildChart = (chart, cData, pData, onEnter, onLeave) => {
function formatValue(value) {
switch (props.series.units) {
- case 'bytes':
+ case "bytes":
return formatBytes(value)
- case 'utia':
- if (props.series.name === 'gas_price') {
+ case "utia":
+ if (props.series.name === "gas_price") {
return `${truncateDecimalPart(value, 4)} UTIA`
}
return `${tia(value, 2)} TIA`
- case 'seconds':
+ case "seconds":
return `${truncateDecimalPart(value / 1_000, 1)}s`
default:
return comma(value)
@@ -124,48 +125,48 @@ const buildChart = (chart, cData, pData, onEnter, onLeave) => {
/** Add axes */
svg.append("g")
- .attr("transform", `translate( ${barWidth / 2 - 3}, ${height - marginAxisX} )`)
- .attr("color", "var(--op-20)")
- .call(d3.axisBottom(x0).ticks(6).tickFormat(d3.timeFormat(props.series.timeframe === 'hour' ? "%H:%M" : "%b %d")))
- .selectAll(".tick line")
- .filter(function(d) { return d === 0; })
- .remove();
-
+ .attr("transform", `translate( ${barWidth / 2 - 3}, ${height - marginAxisX} )`)
+ .attr("color", "var(--op-20)")
+ .call(
+ d3
+ .axisBottom(x0)
+ .ticks(6)
+ .tickFormat(d3.timeFormat(props.series.timeframe === "hour" ? "%H:%M" : "%b %d")),
+ )
+ .selectAll(".tick line")
+ .filter((d) => {
+ return d === 0
+ })
+ .remove()
+
svg.append("g")
- .attr("transform", `translate(0,0)`)
+ .attr("transform", "translate(0,0)")
.attr("color", "var(--op-20)")
- .call(d3.axisRight(y)
- .ticks(4)
- .tickSize(width)
- .tickFormat(formatScaleValue))
- .call(g => g.select(".domain")
- .remove())
- .call(g => g.selectAll(".tick line")
- .attr("stroke-opacity", 0.7)
- .attr("stroke-dasharray", "10, 10"))
- .call(g => g.selectAll(".tick text")
- .attr("x", 4)
- .attr("dy", -4))
+ .call(d3.axisRight(y).ticks(4).tickSize(width).tickFormat(formatScaleValue))
+ .call((g) => g.select(".domain").remove())
+ .call((g) => g.selectAll(".tick line").attr("stroke-opacity", 0.7).attr("stroke-dasharray", "10, 10"))
+ .call((g) => g.selectAll(".tick text").attr("x", 4).attr("dy", -4))
// This allows to find the closest X index of the mouse:
- const bisect = d3.bisector(function(d) { return d.date }).center
+ const bisect = d3.bisector((d) => {
+ return d.date
+ }).center
function onPointerMoved(event) {
onEnter()
// Recover coordinate we need
- let idx = bisect(cData.data, x0.invert(d3.pointer(event)[0] - barWidth / 2))
- const elements = document.querySelectorAll('[data-index]')
- elements.forEach(el => {
- if (+el.getAttribute('data-index') === idx) {
+ const idx = bisect(cData.data, x0.invert(d3.pointer(event)[0] - barWidth / 2))
+ const elements = document.querySelectorAll("[data-index]")
+ for (const el of elements) {
+ if (+el.getAttribute("data-index") === idx) {
el.style.filter = "brightness(1.2)"
} else {
el.style.filter = "brightness(0.6)"
}
-
- })
+ }
+
+ const selectedCData = cData.data[idx]
- let selectedCData = cData.data[idx]
-
tooltip.value.x = x0(selectedCData.date)
tooltip.value.y = y(selectedCData.value)
tooltip.value.data[0] = {
@@ -175,7 +176,7 @@ const buildChart = (chart, cData, pData, onEnter, onLeave) => {
}
tooltip.value.data.splice(1, 1)
if (pData.data.length) {
- let selectedPData = pData.data[idx]
+ const selectedPData = pData.data[idx]
tooltip.value.data[1] = {
date: formatDate(selectedPData.realDate),
@@ -188,47 +189,50 @@ const buildChart = (chart, cData, pData, onEnter, onLeave) => {
function onPointerLeft() {
onLeave()
- const elements = document.querySelectorAll('[data-index]')
- elements.forEach(el => {
+ const elements = document.querySelectorAll("[data-index]")
+ for (const el of elements) {
el.style.filter = ""
- })
+ }
}
/** Draw bars */
if (pData.data.length) {
- svg.append('g')
- .selectAll('g')
+ svg.append("g")
+ .selectAll("g")
.data(data)
- .enter().append('g')
- .attr('transform', d => `translate(${x0(new Date(d.date))}, 0)`)
- .selectAll('rect')
- .data(d => [d])
- .enter().append('rect')
+ .enter()
+ .append("g")
+ .attr("transform", (d) => `translate(${x0(new Date(d.date))}, 0)`)
+ .selectAll("rect")
+ .data((d) => [d])
+ .enter()
+ .append("rect")
.attr("class", "bar")
- .attr('data-index', d => d.index)
- .attr('x', d => x1(d.group))
- .attr('y', d => y(d.value) - marginAxisX)
- .attr('width', barWidth / 4)
- .attr('height', 0)
- .attr('fill', d => d.color)
+ .attr("data-index", (d) => d.index)
+ .attr("x", (d) => x1(d.group))
+ .attr("y", (d) => y(d.value) - marginAxisX)
+ .attr("width", barWidth / 4)
+ .attr("height", 0)
+ .attr("fill", (d) => d.color)
.transition()
.duration(1_000)
- .attr('height', d => height - y(d.value))
+ .attr("height", (d) => height - y(d.value))
} else {
- svg.append('g')
+ svg.append("g")
.selectAll("g")
.data(data)
- .enter().append("rect")
+ .enter()
+ .append("rect")
.attr("class", "bar")
- .attr('data-index', d => d.index)
- .attr("x", d => x0(new Date(d.date)))
- .attr('y', d => y(d.value) - marginAxisX)
+ .attr("data-index", (d) => d.index)
+ .attr("x", (d) => x0(new Date(d.date)))
+ .attr("y", (d) => y(d.value) - marginAxisX)
.attr("width", barWidth)
- .attr('height', 0)
- .attr('fill', d => d.color)
+ .attr("height", 0)
+ .attr("fill", (d) => d.color)
.transition()
.duration(1_000)
- .attr('height', d => height - y(d.value))
+ .attr("height", (d) => height - y(d.value))
}
if (chart.children[0]) chart.children[0].remove()
@@ -243,8 +247,12 @@ const drawChart = () => {
chartEl.value.wrapper,
currentData.value,
prevData.value,
- () => (tooltip.value.show = true),
- () => (tooltip.value.show = false),
+ () => {
+ tooltip.value.show = true
+ },
+ () => {
+ tooltip.value.show = false
+ },
)
}
diff --git a/components/modules/stats/BlocksFeed.vue b/components/modules/stats/BlocksFeed.vue
index cc95b3eb..a10b2893 100644
--- a/components/modules/stats/BlocksFeed.vue
+++ b/components/modules/stats/BlocksFeed.vue
@@ -10,7 +10,7 @@ import Tooltip from "@/components/ui/Tooltip.vue"
import { capitilize, comma, formatBytes, shortHex } from "@/services/utils"
/** API */
-import { fetchNetworks, fetchCommitments, fetchCommitmentsByNetwork } from "@/services/api/blobstream";
+import { fetchNetworks, fetchCommitments, fetchCommitmentsByNetwork } from "@/services/api/blobstream"
/** Store */
import { useAppStore } from "@/store/app"
@@ -37,20 +37,20 @@ const blocks = computed(() => appStore.latestBlocks.slice(0, 80).sort((a, b) =>
const timeline = computed(() => {
let time = []
- blocks.value.forEach(b => {
- time.push(DateTime.fromISO(b.time).toFormat('h:mm'))
- })
+ for (const b of blocks.value) {
+ time.push(DateTime.fromISO(b.time).toFormat("h:mm"))
+ }
time = new Set(time)
while (chartWidth.value / time.size < 35) {
- let arr = Array.from(time)
+ const arr = Array.from(time)
arr.splice(Math.round(arr.length / 2), 1)
time = new Set(arr)
}
return time
})
-const maxSize = computed(() => Math.max(...blocks.value?.map((b) => b.stats.bytes_in_block)))
+const maxSize = computed(() => Math.max(...blocks.value.map((b) => b.stats.bytes_in_block)))
const avgBlockTime = ref(12)
const calculateHeight = (size) => {
@@ -60,7 +60,7 @@ const calculateHeight = (size) => {
const chartBlocksEl = ref(null)
const chartWidth = ref()
-const barWidth = computed(() => Math.max(Math.round((chartWidth.value / 80 - 4)), 4))
+const barWidth = computed(() => Math.max(Math.round(chartWidth.value / 80 - 4), 4))
const marginBar = computed(() => (chartWidth.value - barWidth.value * 80) / 79)
const debouncedRedraw = () => {
@@ -76,7 +76,6 @@ onMounted(() => {
onBeforeUnmount(() => {
window.removeEventListener("resize", debouncedRedraw)
})
-
diff --git a/components/modules/stats/ChartCardPreview.vue b/components/modules/stats/ChartCardPreview.vue
index 1208677c..783f2458 100644
--- a/components/modules/stats/ChartCardPreview.vue
+++ b/components/modules/stats/ChartCardPreview.vue
@@ -38,70 +38,76 @@ const chartElPrev = ref()
const getSeries = async () => {
let data = []
- if (props.series.aggregate === 'cumulative') {
+ if (props.series.aggregate === "cumulative") {
data = await fetchSeriesCumulative({
name: props.series.name,
- period: 'day',
- from: parseInt(
+ period: "day",
+ from: Number.parseInt(
DateTime.now().minus({
days: 48,
- }).ts / 1_000)
+ }).ts / 1_000,
+ ),
})
// data = (await fetchSeriesCumulative({
// name: props.series.name,
// period: props.period.timeframe,
- // from: parseInt(
+ // from: Number.parseInt(
// DateTime.now().minus({
// days: props.period.timeframe === "day" ? props.period.value * 2 : 0,
// hours: props.period.timeframe === "hour" ? props.period.value * 2 : 0,
// }).ts / 1_000)
// })).reverse()
} else {
- data = (await fetchSeries({
- table: props.series.name,
- period: props.period.timeframe,
- from: parseInt(
- DateTime.now().minus({
- days: props.period.timeframe === "day" ? props.period.value * 2 : 0,
- hours: props.period.timeframe === "hour" ? props.period.value * 2 : 0,
- }).ts / 1_000)
- })).reverse()
- }
-
- prevData.value = data.slice(0, props.period.value).map((s) => ({ date: DateTime.fromISO(s.time).toJSDate(), value: parseFloat(s.value) }))
- currentData.value = data.slice(props.period.value, data.length).map((s) => ({ date: DateTime.fromISO(s.time).toJSDate(), value: parseFloat(s.value) }))
-
- if (props.series.name === 'block_time') {
- prevData.value = prevData.value
- .map(el => {
- return {
- ...el,
- value: (el.value / 1_000).toFixed(2)
- }
- })
- currentData.value = currentData.value
- .map(el => {
- return {
- ...el,
- value: (el.value / 1_000).toFixed(2)
- }
+ data = (
+ await fetchSeries({
+ table: props.series.name,
+ period: props.period.timeframe,
+ from: Number.parseInt(
+ DateTime.now().minus({
+ days: props.period.timeframe === "day" ? props.period.value * 2 : 0,
+ hours: props.period.timeframe === "hour" ? props.period.value * 2 : 0,
+ }).ts / 1_000,
+ ),
})
+ ).reverse()
+ }
+
+ prevData.value = data
+ .slice(0, props.period.value)
+ .map((s) => ({ date: DateTime.fromISO(s.time).toJSDate(), value: Number.parseFloat(s.value) }))
+ currentData.value = data
+ .slice(props.period.value, data.length)
+ .map((s) => ({ date: DateTime.fromISO(s.time).toJSDate(), value: Number.parseFloat(s.value) }))
+
+ if (props.series.name === "block_time") {
+ prevData.value = prevData.value.map((el) => {
+ return {
+ ...el,
+ value: (el.value / 1_000).toFixed(2),
+ }
+ })
+ currentData.value = currentData.value.map((el) => {
+ return {
+ ...el,
+ value: (el.value / 1_000).toFixed(2),
+ }
+ })
}
- if (props.series.aggregate !== 'cumulative') {
+ if (props.series.aggregate !== "cumulative") {
currentTotal.value = currentData.value.reduce((sum, el) => {
- return sum + +el.value;
- }, 0);
+ return sum + +el.value
+ }, 0)
prevTotal.value = prevData.value.reduce((sum, el) => {
- return sum + +el.value;
- }, 0);
+ return sum + +el.value
+ }, 0)
} else {
currentTotal.value = currentData.value.slice(-1)[0].value
prevTotal.value = prevData.value.slice(-1)[0].value
}
- if (props.series.aggregate === 'avg') {
+ if (props.series.aggregate === "avg") {
prevTotal.value = prevTotal.value / prevData.value.length
currentTotal.value = currentTotal.value / currentData.value.length
}
@@ -139,15 +145,11 @@ const buildChart = (chart, data, color) => {
.attr("preserveAspectRatio", "none")
.attr("style", "max-width: 100%;")
.style("-webkit-tap-highlight-color", "transparent")
- // .on("touchstart", (event) => event.preventDefault())
+ // .on("touchstart", (event) => event.preventDefault())
/** Default Horizontal Lines */
- svg.append("path")
- .attr("fill", "none")
- .attr("stroke", "var(--op-5)")
- .attr("stroke-width", 1)
- .attr("d", `M${0},${0} L${width},${0}`)
-
+ svg.append("path").attr("fill", "none").attr("stroke", "var(--op-5)").attr("stroke-width", 1).attr("d", `M${0},${0} L${width},${0}`)
+
svg.append("path")
.attr("fill", "none")
.attr("stroke", "var(--op-5)")
@@ -159,9 +161,10 @@ const buildChart = (chart, data, color) => {
.attr("stroke", "var(--op-5)")
.attr("stroke-width", 1)
.attr("d", `M${0},${height - marginBottom - 6} L${width},${height - marginBottom - 6}`)
-
+
/** Chart Lines */
- const path = svg.append("path")
+ const path = svg
+ .append("path")
.attr("fill", "none")
.attr("stroke", color)
.attr("stroke-width", 2)
@@ -180,14 +183,14 @@ const buildChart = (chart, data, color) => {
if (chart.children[0]) chart.children[0].remove()
chart.append(svg.node())
- const totalLength = path.node().getTotalLength();
+ const totalLength = path.node().getTotalLength()
path.attr("stroke-dasharray", `${totalLength} ${totalLength}`)
.attr("stroke-dashoffset", totalLength)
.transition()
.duration(1_000)
.ease(d3.easeLinear)
- .attr("stroke-dashoffset", 0);
+ .attr("stroke-dashoffset", 0)
}
const drawChart = async () => {
@@ -207,7 +210,6 @@ watch(
await drawChart()
},
)
-
diff --git a/components/modules/stats/DiffChip.vue b/components/modules/stats/DiffChip.vue
index 0ddbd5c0..7c855a42 100644
--- a/components/modules/stats/DiffChip.vue
+++ b/components/modules/stats/DiffChip.vue
@@ -2,57 +2,57 @@
import Tooltip from "@/components/ui/Tooltip.vue"
const props = defineProps({
- value: {
- type: Number,
- required: true,
- },
- invert: {
- type: Boolean,
- default: false,
- },
+ value: {
+ type: Number,
+ required: true,
+ },
+ invert: {
+ type: Boolean,
+ default: false,
+ },
})
const styles = computed(() => {
- let conditionValue = props.invert ? props.value * (-1) : props.value
- if (conditionValue > 0) {
- return {
- chip: {
- backgroundColor: 'var(--dark-mint)'
- },
- icon: {
- fill: 'var(--mint)'
- },
- text: {
- color: 'var(--mint)'
- }
- }
- } else if (conditionValue < 0) {
- return {
- chip: {
- backgroundColor: 'var(--dark-red)'
- },
- icon: {
- fill: 'var(--red)'
- },
- text: {
- color: 'var(--red)'
- }
- }
- } else {
- return {
- chip: {
- backgroundColor: 'var(--outline-background)'
- },
- icon: {
- fill: 'var(--txt-secondary)'
- },
- text: {
- color: 'var(--txt-secondary)'
- }
- }
- }
-})
+ const conditionValue = props.invert ? props.value * -1 : props.value
+ if (conditionValue > 0) {
+ return {
+ chip: {
+ backgroundColor: "var(--dark-mint)",
+ },
+ icon: {
+ fill: "var(--mint)",
+ },
+ text: {
+ color: "var(--mint)",
+ },
+ }
+ }
+ if (conditionValue < 0) {
+ return {
+ chip: {
+ backgroundColor: "var(--dark-red)",
+ },
+ icon: {
+ fill: "var(--red)",
+ },
+ text: {
+ color: "var(--red)",
+ },
+ }
+ }
+ return {
+ chip: {
+ backgroundColor: "var(--outline-background)",
+ },
+ icon: {
+ fill: "var(--txt-secondary)",
+ },
+ text: {
+ color: "var(--txt-secondary)",
+ },
+ }
+})
diff --git a/components/modules/stats/HighlightCard.vue b/components/modules/stats/HighlightCard.vue
index ed904d71..ba590c0f 100644
--- a/components/modules/stats/HighlightCard.vue
+++ b/components/modules/stats/HighlightCard.vue
@@ -15,18 +15,17 @@ const props = defineProps({
const isLoading = ref(false)
const value = computed(() => {
- if (props.highlight.name === 'blocks') return comma(props.highlight.value)
-
+ if (props.highlight.name === "blocks") return comma(props.highlight.value)
+
switch (props.highlight.units) {
- case 'bytes':
+ case "bytes":
return formatBytes(props.highlight.value)
- case 'utia':
+ case "utia":
return `${abbreviate(tia(props.highlight.value))} TIA`
default:
return abbreviate(props.highlight.value)
}
})
-
diff --git a/components/modules/stats/InsightCard.vue b/components/modules/stats/InsightCard.vue
index 7a06a076..29380303 100644
--- a/components/modules/stats/InsightCard.vue
+++ b/components/modules/stats/InsightCard.vue
@@ -29,92 +29,91 @@ const isLoading = ref(false)
const getSeries = async () => {
isLoading.value = true
-
+
let data = []
- if (props.series.name === 'gas') {
+ if (props.series.name === "gas") {
const gasUsed = await fetchSummary({
- table: 'tx',
- func: 'sum',
- column: 'gas_used',
- from: parseInt(DateTime.now().minus({ hours: 24 }).ts / 1_000),
+ table: "tx",
+ func: "sum",
+ column: "gas_used",
+ from: Number.parseInt(DateTime.now().minus({ hours: 24 }).ts / 1_000),
})
const gasWanted = await fetchSummary({
- table: 'tx',
- func: 'sum',
- column: 'gas_wanted',
- from: parseInt(DateTime.now().minus({ hours: 24 }).ts / 1_000),
+ table: "tx",
+ func: "sum",
+ column: "gas_wanted",
+ from: Number.parseInt(DateTime.now().minus({ hours: 24 }).ts / 1_000),
})
- let efficiency = (gasUsed / gasWanted * 100).toFixed(0)
+ const efficiency = ((gasUsed / gasWanted) * 100).toFixed(0)
data = [
{
- name: 'efficiency',
+ name: "efficiency",
value: `${efficiency}%`,
share: efficiency,
- color: colors[props.series.color ? props.series.color : 'mint'][0]
+ color: colors[props.series.color ? props.series.color : "mint"][0],
},
{
- name: 'limit',
+ name: "limit",
value: abbreviate(gasWanted),
share: 100 - efficiency,
- color: colors[props.series.color ? props.series.color : 'mint'][4]
+ color: colors[props.series.color ? props.series.color : "mint"][4],
},
{
- name: 'used',
+ name: "used",
value: abbreviate(gasUsed),
- color: colors[props.series.color ? props.series.color : 'mint'][4]
+ color: colors[props.series.color ? props.series.color : "mint"][4],
},
]
} else {
- data = await fetch24hDiffs({ name: props.series.name })
+ data = await fetch24hDiffs({ name: props.series.name })
}
-
+
switch (props.series.name) {
- case 'rollup_stats_24h':
+ case "rollup_stats_24h":
resData.value = data
- .filter(item => item.id !== undefined && item.id !== null)
- .map(item => {
+ .filter((item) => item.id !== undefined && item.id !== null)
+ .map((item) => {
const { blobs_count, ...rest } = item
return {
...rest,
- value: blobs_count
+ value: blobs_count,
}
})
break
- case 'messages_count_24h':
- resData.value = data
- .map(item => {
- return {
- ...item,
- name: item.name.replace('Msg', '')
- }
- })
+ case "messages_count_24h":
+ resData.value = data.map((item) => {
+ return {
+ ...item,
+ name: item.name.replace("Msg", ""),
+ }
+ })
break
default:
resData.value = data
break
}
- if (props.series.name === 'gas') {
+ if (props.series.name === "gas") {
total.value = resData.value[0].value
} else {
total.value = resData.value.reduce((sum, el) => {
return sum + el.value
}, 0)
- let startlength = resData.value.length
+ const startlength = resData.value.length
resData.value = resData.value.slice(0, Math.min(startlength, 4))
let totalOther = total.value
let sumShares = 0
- resData.value.forEach(item => {
- let share = shareOfTotal(item.value, total.value, 2)
+ for (const item of resData.value) {
+ const share = shareOfTotal(item.value, total.value, 2)
totalOther -= item.value
sumShares += share ? share : 0
item.share = share ? share : 0
- })
+ }
if (startlength > 4) {
resData.value.push({
@@ -125,8 +124,8 @@ const getSeries = async () => {
}
resData.value.forEach((item, index) => {
- item.color = colors[props.series.color ? props.series.color : 'mint'][index]
- })
+ item.color = colors[props.series.color ? props.series.color : "mint"][index]
+ })
}
isLoading.value = false
@@ -142,20 +141,20 @@ const colors = {
const handleHoverEnter = (index) => {
const elements = document.querySelectorAll(`[class*='insight-item-${props.series.name}']`)
- elements.forEach(el => {
+ for (const el of elements) {
if (+el.id === index) {
el.style.filter = "brightness(100%)"
} else {
el.style.filter = "brightness(40%)"
}
- })
+ }
}
const handleHoverLeave = () => {
const elements = document.querySelectorAll(`[class*='insight-item-${props.series.name}']`)
- elements.forEach(el => {
+ for (const el of elements) {
el.style.filter = "brightness(100%)"
- })
+ }
}
onMounted(async () => {
@@ -170,7 +169,6 @@ onMounted(async () => {
// await drawChart()
// },
// )
-
diff --git a/components/modules/stats/LineChart.vue b/components/modules/stats/LineChart.vue
index 56982d41..90234e4c 100644
--- a/components/modules/stats/LineChart.vue
+++ b/components/modules/stats/LineChart.vue
@@ -20,9 +20,11 @@ const props = defineProps({
})
// TO DO: Fetch data if series.currentData is null
-const currentData = computed(() => { return {data: props.series.currentData}})
-const prevData = computed(() => {
- let data = []
+const currentData = computed(() => {
+ return { data: props.series.currentData }
+})
+const prevData = computed(() => {
+ const data = []
props.series.prevData?.forEach((d, index) => {
data.push({
date: currentData.value.data[index].date,
@@ -48,8 +50,8 @@ const buildChart = (chart, cData, pData, onEnter, onLeave) => {
const marginLeft = 12
const marginAxisX = 20
- const MIN_VALUE = d3.min([...cData.data.map(s => s.value), ...pData.data?.map(s => s.value)])
- const MAX_VALUE = d3.max([...cData.data.map(s => s.value), ...pData.data?.map(s => s.value)])
+ const MIN_VALUE = d3.min([...cData.data.map((s) => s.value), ...pData.data.map((s) => s.value)])
+ const MAX_VALUE = d3.max([...cData.data.map((s) => s.value), ...pData.data.map((s) => s.value)])
/** Scales */
const x = d3.scaleUtc(
@@ -64,7 +66,7 @@ const buildChart = (chart, cData, pData, onEnter, onLeave) => {
.curve(d3.curveCatmullRom)
function formatDate(date) {
- if (props.series.timeframe === 'hour') {
+ if (props.series.timeframe === "hour") {
return DateTime.fromJSDate(date).toFormat("LLL dd, HH:mm")
}
@@ -73,15 +75,15 @@ const buildChart = (chart, cData, pData, onEnter, onLeave) => {
function formatValue(value) {
switch (props.series.units) {
- case 'bytes':
+ case "bytes":
return formatBytes(value)
- case 'utia':
- if (props.series.name === 'gas_price') {
+ case "utia":
+ if (props.series.name === "gas_price") {
return `${truncateDecimalPart(value, 4)} UTIA`
}
return `${tia(value, 2)} TIA`
- case 'seconds':
+ case "seconds":
return `${truncateDecimalPart(value / 1_000, 1)}s`
default:
return comma(value)
@@ -109,54 +111,53 @@ const buildChart = (chart, cData, pData, onEnter, onLeave) => {
.on("pointerleave", onPointerleft)
.on("touchstart", (event) => event.preventDefault())
- /** Add axes */
+ /** Add axes */
svg.append("g")
- .attr("transform", "translate(0," + (height - marginAxisX) + ")")
+ .attr("transform", `translate(0, ${height - marginAxisX})`)
.attr("color", "var(--op-20)")
- .call(d3.axisBottom(x).ticks(6).tickFormat(d3.timeFormat(props.series.timeframe === 'hour' ? "%H:%M" : "%b %d")))
-
+ .call(
+ d3
+ .axisBottom(x)
+ .ticks(6)
+ .tickFormat(d3.timeFormat(props.series.timeframe === "hour" ? "%H:%M" : "%b %d")),
+ )
+
svg.append("g")
- .attr("transform", `translate(0,0)`)
+ .attr("transform", "translate(0,0)")
.attr("color", "var(--op-20)")
- .call(d3.axisRight(y)
- .ticks(4)
- .tickSize(width)
- .tickFormat(formatScaleValue))
- .call(g => g.select(".domain")
- .remove())
- .call(g => g.selectAll(".tick line")
- .attr("stroke-opacity", 0.7)
- .attr("stroke-dasharray", "10, 10"))
- .call(g => g.selectAll(".tick text")
- .attr("x", 4)
- .attr("dy", -4))
+ .call(d3.axisRight(y).ticks(4).tickSize(width).tickFormat(formatScaleValue))
+ .call((g) => g.select(".domain").remove())
+ .call((g) => g.selectAll(".tick line").attr("stroke-opacity", 0.7).attr("stroke-dasharray", "10, 10"))
+ .call((g) => g.selectAll(".tick text").attr("x", 4).attr("dy", -4))
// This allows to find the closest X index of the mouse:
- const bisect = d3.bisector(function(d) { return d.date; }).center
+ const bisect = d3.bisector((d) => {
+ return d.date
+ }).center
const cFocus = svg
- .append('g')
- .append('circle')
- .style("fill", cData.color)
- .attr('r', 4)
- .style("opacity", 0)
- .style("transition", "all 0.2s ease" )
+ .append("g")
+ .append("circle")
+ .style("fill", cData.color)
+ .attr("r", 4)
+ .style("opacity", 0)
+ .style("transition", "all 0.2s ease")
const pFocus = svg
- .append('g')
- .append('circle')
- .style("fill", pData.color)
- .attr('r', 4)
- .style("opacity", 0)
- .style("transition", "all 0.2s ease" )
+ .append("g")
+ .append("circle")
+ .style("fill", pData.color)
+ .attr("r", 4)
+ .style("opacity", 0)
+ .style("transition", "all 0.2s ease")
const focusLine = svg
- .append('g')
- .append('line')
- .style("stroke-width", 2)
- .style("stroke", "var(--op-15)")
- .style("fill", "none")
- .style("opacity", 0)
+ .append("g")
+ .append("line")
+ .style("stroke-width", 2)
+ .style("stroke", "var(--op-15)")
+ .style("fill", "none")
+ .style("opacity", 0)
function onPointerMoved(event) {
onEnter()
@@ -164,17 +165,15 @@ const buildChart = (chart, cData, pData, onEnter, onLeave) => {
focusLine.style("opacity", 1)
// Recover coordinate we need
- let idx = bisect(cData.data, x.invert(d3.pointer(event)[0]))
- let selectedCData = cData.data[idx]
- cFocus
- .attr("cx", x(selectedCData.date))
- .attr("cy", y(selectedCData.value))
+ const idx = bisect(cData.data, x.invert(d3.pointer(event)[0]))
+ const selectedCData = cData.data[idx]
+ cFocus.attr("cx", x(selectedCData.date)).attr("cy", y(selectedCData.value))
focusLine
.attr("x1", x(selectedCData.date))
.attr("y1", 0)
.attr("x2", x(selectedCData.date))
.attr("y2", height - marginAxisX)
-
+
tooltip.value.x = x(selectedCData.date)
tooltip.value.y = y(selectedCData.value)
tooltip.value.data[0] = {
@@ -184,20 +183,16 @@ const buildChart = (chart, cData, pData, onEnter, onLeave) => {
}
tooltip.value.data.splice(1, 1)
if (pData.data.length) {
- let selectedPData = pData.data[idx]
+ const selectedPData = pData.data[idx]
+
+ pFocus.attr("cx", x(selectedPData.date)).attr("cy", y(selectedPData.value)).style("opacity", 1)
- pFocus
- .attr("cx", x(selectedPData.date))
- .attr("cy", y(selectedPData.value))
- .style("opacity", 1)
-
tooltip.value.data[1] = {
date: formatDate(selectedPData.realDate),
value: formatValue(selectedPData.value),
color: pData.color,
}
}
-
}
function onPointerleft() {
@@ -208,7 +203,8 @@ const buildChart = (chart, cData, pData, onEnter, onLeave) => {
}
/** Chart Lines */
- const cPath = svg.append("path")
+ const cPath = svg
+ .append("path")
.attr("fill", "none")
.attr("stroke", cData.color)
.attr("stroke-width", 2)
@@ -216,7 +212,8 @@ const buildChart = (chart, cData, pData, onEnter, onLeave) => {
.attr("stroke-linejoin", "round")
.attr("d", line(cData.data.filter((item) => item.value !== null)))
- const pPath = svg.append("path")
+ const pPath = svg
+ .append("path")
.attr("fill", "none")
.attr("stroke", pData.color)
.attr("stroke-width", 2)
@@ -227,23 +224,24 @@ const buildChart = (chart, cData, pData, onEnter, onLeave) => {
if (chart.children[0]) chart.children[0].remove()
chart.append(svg.node())
- const cTotalLength = cPath.node().getTotalLength();
- const pTotalLength = pPath.node().getTotalLength();
+ const cTotalLength = cPath.node().getTotalLength()
+ const pTotalLength = pPath.node().getTotalLength()
- cPath.attr("stroke-dasharray", `${cTotalLength} ${cTotalLength}`)
+ cPath
+ .attr("stroke-dasharray", `${cTotalLength} ${cTotalLength}`)
.attr("stroke-dashoffset", cTotalLength)
.transition()
.duration(1_000)
.ease(d3.easeLinear)
- .attr("stroke-dashoffset", 0);
+ .attr("stroke-dashoffset", 0)
- pPath.attr("stroke-dasharray", `${pTotalLength} ${pTotalLength}`)
+ pPath
+ .attr("stroke-dasharray", `${pTotalLength} ${pTotalLength}`)
.attr("stroke-dashoffset", pTotalLength)
.transition()
.duration(1_000)
.ease(d3.easeLinear)
.attr("stroke-dashoffset", 0)
-
}
const drawChart = () => {
@@ -254,8 +252,12 @@ const drawChart = () => {
chartEl.value.wrapper,
currentData.value,
prevData.value,
- () => (tooltip.value.show = true),
- () => (tooltip.value.show = false),
+ () => {
+ tooltip.value.show = true
+ },
+ () => {
+ tooltip.value.show = false
+ },
)
}
@@ -269,7 +271,6 @@ watch(
onMounted(async () => {
drawChart()
})
-
diff --git a/components/modules/stats/PieChartCard.vue b/components/modules/stats/PieChartCard.vue
index 341e778b..5259468c 100644
--- a/components/modules/stats/PieChartCard.vue
+++ b/components/modules/stats/PieChartCard.vue
@@ -1,77 +1,65 @@
-
- {{ `By ${series.title}` }}
-
+
+ {{ `By ${series.title}` }}
+
-
-
-
-
-
-
- {{ capitilize(el.name) }}
-
-
-
-
- {{ series.units === 'bytes' ? formatBytes(el.value) : series.units === 'utia' ? abbreviate(el.value) + ' TIA' : abbreviate(el.value) }}
-
-
- {{ `${el.share > 99 && resData.length > 1 ? 99 : el.share < 1 ? '<1' : el.share.toFixed(0)}%` }}
-
-
-
-
-
-
-
+
+
+
+
+
+
+ {{ capitilize(el.name) }}
+
+
+
+
+ {{ series.units === 'bytes' ? formatBytes(el.value) : series.units === 'utia' ?
+ abbreviate(el.value) + ' TIA' : abbreviate(el.value) }}
+
+
+ {{ `${el.share > 99 && resData.length > 1 ? 99 :
+ el.share < 1 ? '<1' : el.share.toFixed(0)}%` }}
+
+
+
+
+
+
+