Skip to content

Commit ff3d10a

Browse files
GusevPMGusevPM
committed
Merge branch 'main-network-stats' into CLS-210-network-stats
2 parents 2607028 + b4e5c05 commit ff3d10a

9 files changed

Lines changed: 78 additions & 56 deletions

File tree

‎assets/styles/base.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -382,6 +382,10 @@ body {
382382
transition: all 0.3s ease;
383383
}
384384

385+
.transition_all {
386+
transition: all 0.3s ease;
387+
}
388+
385389
.dimmed {
386390
filter: brightness(40%);
387391
transition: all 0.3s ease;

‎components/modules/stats/BarChart.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ const buildChart = (chart, cData, pData, onEnter, onLeave) => {
4040
const marginBottom = 24
4141
const marginLeft = 36
4242
const marginAxisX = 20
43-
const barWidth = Math.round((width - marginLeft - marginRight) / (cData.data.length) - (pData.data.length ? 2 : 5))
43+
const barWidth = Math.round(Math.max((width - marginLeft - marginRight) / (cData.data.length) - (pData.data.length ? 2 : 5)), 4)
4444
4545
const MIN_VALUE = d3.min([...cData.data.map(s => s.value), ...pData.data?.map(s => s.value)])
4646
const MAX_VALUE = d3.max([...cData.data.map(s => s.value), ...pData.data?.map(s => s.value)])
@@ -126,7 +126,7 @@ const buildChart = (chart, cData, pData, onEnter, onLeave) => {
126126
svg.append("g")
127127
.attr("transform", `translate( ${barWidth / 2 - 3}, ${height - marginAxisX} )`)
128128
.attr("color", "var(--op-20)")
129-
.call(d3.axisBottom(x0).ticks(6).tickFormat(d3.timeFormat(props.series.timeframe === 'hour' ? "%H:%M" : "%B %d")))
129+
.call(d3.axisBottom(x0).ticks(6).tickFormat(d3.timeFormat(props.series.timeframe === 'hour' ? "%H:%M" : "%b %d")))
130130
.selectAll(".tick line")
131131
.filter(function(d) { return d === 0; })
132132
.remove();
@@ -208,7 +208,7 @@ const buildChart = (chart, cData, pData, onEnter, onLeave) => {
208208
.attr('data-index', d => d.index)
209209
.attr('x', d => x1(d.group))
210210
.attr('y', d => y(d.value) - marginAxisX)
211-
.attr('width', barWidth / 2 - 7)
211+
.attr('width', barWidth / 4)
212212
.attr('height', 0)
213213
.attr('fill', d => d.color)
214214
.transition()

‎components/modules/stats/BlocksFeed.vue‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,9 +58,20 @@ const chartWidth = ref()
5858
const barWidth = computed(() => Math.max(Math.round((chartWidth.value / 80 - 4)), 4))
5959
const marginBar = computed(() => (chartWidth.value - barWidth.value * 80) / 79)
6060
61+
const debouncedRedraw = () => {
62+
chartWidth.value = chartBlocksEl.value?.wrapper?.offsetWidth
63+
}
64+
6165
onMounted(() => {
6266
chartWidth.value = chartBlocksEl.value?.wrapper?.offsetWidth
67+
68+
window.addEventListener("resize", debouncedRedraw)
6369
})
70+
71+
onBeforeUnmount(() => {
72+
window.removeEventListener("resize", debouncedRedraw)
73+
})
74+
6475
</script>
6576
6677
<template>

‎components/modules/stats/DiffChip.vue‎

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<script setup>
2+
import Tooltip from "@/components/ui/Tooltip.vue"
23
34
const props = defineProps({
45
value: {
@@ -56,14 +57,22 @@ const styles = computed(() => {
5657

5758
<template>
5859
<Flex v-if="!isNaN(value)" align="center" gap="4" :class="$style.chip" :style="styles.chip">
59-
<Flex align="center" gap="4" :class="$style.content">
60-
<Icon v-if="value > 0" name="arrow-narrow-up-right" size="14" :style="styles.icon" />
61-
<Icon v-else-if="value < 0" name="arrow-narrow-up-right" rotate="90" size="14" :style="styles.icon" />
60+
<Tooltip position="start" side="top" delay="500">
61+
<Flex align="center" gap="4" :class="$style.content">
62+
<Icon v-if="value > 0" name="arrow-narrow-up-right" size="14" :style="styles.icon" />
63+
<Icon v-else-if="value < 0" name="arrow-narrow-up-right" rotate="90" size="14" :style="styles.icon" />
6264

63-
<Text size="12" weight="600" noWrap :style="styles.text">
64-
{{ Math.abs(value) }}%
65-
</Text>
66-
</Flex>
65+
<Text size="12" weight="600" noWrap :style="styles.text">
66+
{{ Math.abs(value) }}%
67+
</Text>
68+
</Flex>
69+
70+
<template #content>
71+
<Text color="secondary" size="12">
72+
Difference between current and previous equal period
73+
</Text>
74+
</template>
75+
</Tooltip>
6776
</Flex>
6877
<Skeleton v-else w="60" h="14" />
6978
</template>

‎components/modules/stats/InsightCard.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,7 @@ const getSeries = async () => {
120120
resData.value.push({
121121
name: "Other",
122122
value: totalOther,
123-
share: 100 - sumShares,
123+
share: 100 - Math.ceil(sumShares),
124124
})
125125
}
126126

‎components/modules/stats/LineChart.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ const buildChart = (chart, cData, pData, onEnter, onLeave) => {
113113
svg.append("g")
114114
.attr("transform", "translate(0," + (height - marginAxisX) + ")")
115115
.attr("color", "var(--op-20)")
116-
.call(d3.axisBottom(x).ticks(6).tickFormat(d3.timeFormat(props.series.timeframe === 'hour' ? "%H:%M" : "%B %d")))
116+
.call(d3.axisBottom(x).ticks(6).tickFormat(d3.timeFormat(props.series.timeframe === 'hour' ? "%H:%M" : "%b %d")))
117117
118118
svg.append("g")
119119
.attr("transform", `translate(0,0)`)

‎components/modules/stats/RollupsBubbleChart.vue‎

Lines changed: 37 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -72,24 +72,33 @@ const buildChart = (chart, data) => {
7272
7373
const z = d3.scaleLinear()
7474
.domain([minSize, maxSize])
75-
.range([ 20, 80 ]);
75+
.range([ 15, 70 ]);
7676
77-
const maxRadius = z(maxSize)
78-
const minRadius = z(minSize)
79-
80-
const x = d3.scaleLinear()
81-
.domain([0, maxBlobsCount + maxBlobsCount * 0.1])
82-
.range([ marginLeft, width ]);
77+
// const x = d3.scaleLinear()
78+
// .domain([0, maxBlobsCount + maxBlobsCount * 0.1])
79+
// .range([ marginLeft, width ]);
8380
84-
const y = d3.scaleLinear()
85-
.domain([0, maxFee + maxFee * 0.3])
86-
.range([ height - 30, 0]);
87-
81+
const x = d3.scaleLog()
82+
.domain([1_000, maxBlobsCount + maxBlobsCount * 0.1])
83+
.range([ marginLeft, width ])
84+
.base(10)
85+
.nice()
86+
87+
// const y = d3.scaleLinear()
88+
// .domain([0, maxFee + maxFee * 0.3])
89+
// .range([ height - 30, 0]);
90+
91+
const y = d3.scaleLog()
92+
.domain([1, maxFee + maxFee * 0.3])
93+
.range([ height - 30, 0])
94+
.base(10)
95+
.nice()
96+
8897
// Add axes:
8998
svg.append("g")
9099
.attr("transform", "translate(0," + (height - 20) + ")")
91100
.attr("color", "var(--op-20)")
92-
.call(d3.axisBottom(x).ticks(4).tickFormat(d3.format(".2s")))
101+
.call(d3.axisBottom(x).ticks(2).tickFormat(d3.format(".2s")))
93102
94103
svg.append("g")
95104
.attr("transform", `translate(${marginLeft},0)`)
@@ -129,10 +138,10 @@ const buildChart = (chart, data) => {
129138
130139
// Size legend
131140
let size = d3.scaleSqrt()
132-
.domain([ 0, maxSize ])
133-
.range([ 1, 45 ])
134-
135-
let legendValues = [minSize * 1.5, midSize * 0.9, maxSize * 1]
141+
.domain([minSize, maxSize / 2]) //[ minSize, maxSize ])
142+
.range([ 10, 35 ])
143+
144+
let legendValues = [500 * 1_024 * 1_024, midSize * 0.5, maxSize / 2]
136145
let xCircle = width - 50
137146
let xLabel = width - 150
138147
let yCircle = 100
@@ -154,8 +163,8 @@ const buildChart = (chart, data) => {
154163
.append("line")
155164
.attr("x1", function(d){ return xCircle - size(d) } )
156165
.attr("x2", xLabel)
157-
.attr("y1", function(d){ return yCircle - size(d) } )
158-
.attr("y2", function(d){ return yCircle - size(d) } )
166+
.attr("y1", function(d, i){ return yCircle - size(d) + (i === 0 ? 5 : i === 2 ? -7 : 0) } )
167+
.attr("y2", function(d, i){ return yCircle - size(d) + (i === 0 ? 5 : i === 2 ? -7 : 0) } )
159168
.attr("stroke", "var(--op-20)")
160169
.style("stroke-dasharray", ("2, 2"))
161170
@@ -164,14 +173,17 @@ const buildChart = (chart, data) => {
164173
.enter()
165174
.append("text")
166175
.attr('x', xLabel)
167-
.attr('y', function(d){ return yCircle - size(d) - 5 } )
168-
.text( function(d){ return formatBytes(d, 0) } )
176+
.attr('y', function(d, i){ return yCircle - size(d) - 5 + (i === 0 ? 5 : i === 2 ? -7 : 0) } )
177+
.text( function(d, i){ return i === 0 ? '<' + formatBytes(d, 0) : formatBytes(d, 0) } )
169178
.style("font-size", 10)
170179
.style("fill", "var(--op-20)")
171180
.attr('alignment-baseline', 'middle')
172181
173182
// Tooltip
174183
function onPointerEnter(event, rollup) {
184+
const element = document.getElementById(event.target.id)
185+
element.style.filter = "brightness(100%)"
186+
175187
if (!tooltip.value.data.length) {
176188
tooltip.value.x = x(rollup.blobs_count)
177189
tooltip.value.y = y(rollup.fee)
@@ -182,6 +194,9 @@ const buildChart = (chart, data) => {
182194
}
183195
184196
function onPointerLeave() {
197+
const element = document.getElementById(event.target.id)
198+
element.style.filter = "brightness(60%)"
199+
185200
tooltip.value.data = []
186201
tooltip.value.show = false
187202
}
@@ -227,25 +242,11 @@ const buildChart = (chart, data) => {
227242
.attr("x", d => x(d.blobs_count) - z(d.size))
228243
.attr("y", d => y(d.fee) - z(d.size))
229244
.attr("clip-path", (d, i) => `url(#clip-${i})`)
230-
.attr("style", "stroke: red; stroke-width: 5px;")
245+
.style("filter", "brightness(60%)")
246+
.attr("class", "transition_all")
231247
.on("pointerenter", (d, rollup) => onPointerEnter(d, rollup))
232248
.on("pointerleave", onPointerLeave)
233249
234-
// const circles = svg.append('g')
235-
// .selectAll("circle")
236-
// .data(data)
237-
// .enter()
238-
// .append("circle")
239-
// .attr("cx", d => x(d.blobs_count))
240-
// .attr("cy", d => y(d.fee))
241-
// .attr("r", 0)
242-
// .attr("stroke", "var(--op-20)")
243-
// .attr("stroke-width", 1)
244-
// .attr("fill", "none")
245-
// .transition()
246-
// .duration(1_500)
247-
// .attr("r", d => z(d.size))
248-
249250
if (chart.children[0]) chart.children[0].remove()
250251
chart.append(svg.node())
251252
}

‎components/modules/stats/tabs/RollupsTab.vue‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,9 @@ const series = computed(() => getSeriesByGroupAndType('Rollups'))
1818
const getRollups = async () => {
1919
isLoading.value = true
2020
21-
const data = await fetchRollups({})
21+
const data = await fetchRollups({
22+
limit: 100,
23+
})
2224
2325
series.value.data = data
2426
@@ -36,7 +38,7 @@ onBeforeMount(async () => {
3638
<Flex align="center" justify="between" wide :class="$style.section">
3739
<Flex align="center" gap="4">
3840
<Text size="16" weight="600" color="primary" justify="start">Overview</Text>
39-
<Text size="14" weight="600" color="tertiary">(top 10 rollups)</Text>
41+
<!-- <Text size="14" weight="600" color="tertiary">(top 10 rollups)</Text> -->
4042
</Flex>
4143

4244
<Button link="/rollups" type="secondary" size="mini">

‎pages/stats/[metric].vue‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import LineChart from "@/components/modules/stats/LineChart.vue"
99
import SquareSizeChart from "@/components/modules/stats/SquareSizeChart.vue"
1010
1111
/** Services */
12-
import { abbreviate, capitilize, capitalizeAndReplaceUnderscore, comma, formatBytes } from "@/services/utils"
12+
import { capitalizeAndReplaceUnderscore } from "@/services/utils"
1313
1414
/** API */
1515
import { fetchSeries, fetchSeriesCumulative } from "@/services/api/stats"
@@ -19,11 +19,6 @@ import Button from "@/components/ui/Button.vue"
1919
import { Dropdown, DropdownItem } from "@/components/ui/Dropdown"
2020
import Popover from "@/components/ui/Popover.vue"
2121
import Toggle from "@/components/ui/Toggle.vue"
22-
import Tooltip from "@/components/ui/Tooltip.vue"
23-
24-
/** Store */
25-
import { useCacheStore } from "@/store/cache"
26-
const cacheStore = useCacheStore()
2722
2823
const route = useRoute()
2924
const router = useRouter()

0 commit comments

Comments
 (0)