From 402cb6deeba7956070e7e07eb0b7db17a1993348 Mon Sep 17 00:00:00 2001 From: D13ce Date: Tue, 27 Feb 2024 08:35:16 +0100 Subject: [PATCH 01/39] Setup ECharts --- frontend/nuxt.config.ts | 3 ++ frontend/package-lock.json | 80 +++++++++++++++++++++++++++++++++++++- frontend/package.json | 4 +- 3 files changed, 85 insertions(+), 2 deletions(-) diff --git a/frontend/nuxt.config.ts b/frontend/nuxt.config.ts index 6bf70b4b3..665e72bbd 100644 --- a/frontend/nuxt.config.ts +++ b/frontend/nuxt.config.ts @@ -59,5 +59,8 @@ export default defineNuxtConfig({ plugins: { autoprefixer: {} } + }, + build: { + transpile: ['echarts', 'zrender', 'tslib'] } }) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 6a074e104..c02d974fe 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -17,11 +17,13 @@ "@fortawesome/vue-fontawesome": "^3.0.6", "@nuxtjs/eslint-config-typescript": "^12.1.0", "@pinia/nuxt": "^0.5.1", + "echarts": "^5.5.0", "git-describe": "^4.1.1", "lodash-es": "^4.17.21", "pinia": "^2.1.7", "primevue": "^3.46.0", - "vee-validate": "^4.12.4" + "vee-validate": "^4.12.4", + "vue-echarts": "^6.6.9" }, "devDependencies": { "@babel/eslint-parser": "^7.23.3", @@ -6115,6 +6117,15 @@ "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==", "dev": true }, + "node_modules/echarts": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.5.0.tgz", + "integrity": "sha512-rNYnNCzqDAPCr4m/fqyUFv7fD9qIsd50S6GDFgO1DxZhncCsNsG7IfUlAlvZe5oSEQxtsjnHiUuppzccry93Xw==", + "dependencies": { + "tslib": "2.3.0", + "zrender": "5.5.0" + } + }, "node_modules/ee-first": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", @@ -11937,6 +11948,11 @@ "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==", "dev": true }, + "node_modules/resize-detector": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/resize-detector/-/resize-detector-0.3.0.tgz", + "integrity": "sha512-R/tCuvuOHQ8o2boRP6vgx8hXCCy87H1eY9V5imBYeVNyNVpuL9ciReSccLj2gDcax9+2weXy3bc8Vv+NRXeEvQ==" + }, "node_modules/resolve": { "version": "1.22.8", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz", @@ -13565,6 +13581,11 @@ "json5": "lib/cli.js" } }, + "node_modules/tslib": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz", + "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==" + }, "node_modules/tuf-js": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/tuf-js/-/tuf-js-2.2.0.tgz", @@ -14642,6 +14663,55 @@ "integrity": "sha512-RutnB7X8c5hjq39NceArgXg28WZtZpGc3+J16ljMiYnFhKvd8hITxSWQSQ5bvldxMDU6gG5mkxl1MTQLXckVSQ==", "dev": true }, + "node_modules/vue-echarts": { + "version": "6.6.9", + "resolved": "https://registry.npmjs.org/vue-echarts/-/vue-echarts-6.6.9.tgz", + "integrity": "sha512-mojIq3ZvsjabeVmDthhAUDV8Kgf2Rr/X4lV4da7gEFd1fP05gcSJ0j7wa7HQkW5LlFmF2gdCJ8p4Chas6NNIQQ==", + "hasInstallScript": true, + "dependencies": { + "resize-detector": "^0.3.0", + "vue-demi": "^0.13.11" + }, + "peerDependencies": { + "@vue/composition-api": "^1.0.5", + "@vue/runtime-core": "^3.0.0", + "echarts": "^5.4.1", + "vue": "^2.6.12 || ^3.1.1" + }, + "peerDependenciesMeta": { + "@vue/composition-api": { + "optional": true + }, + "@vue/runtime-core": { + "optional": true + } + } + }, + "node_modules/vue-echarts/node_modules/vue-demi": { + "version": "0.13.11", + "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz", + "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==", + "hasInstallScript": true, + "bin": { + "vue-demi-fix": "bin/vue-demi-fix.js", + "vue-demi-switch": "bin/vue-demi-switch.js" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/antfu" + }, + "peerDependencies": { + "@vue/composition-api": "^1.0.0-rc.1", + "vue": "^3.0.0-0 || ^2.6.0" + }, + "peerDependenciesMeta": { + "@vue/composition-api": { + "optional": true + } + } + }, "node_modules/vue-eslint-parser": { "version": "9.4.0", "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.4.0.tgz", @@ -15166,6 +15236,14 @@ "engines": { "node": ">= 12.0.0" } + }, + "node_modules/zrender": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.5.0.tgz", + "integrity": "sha512-O3MilSi/9mwoovx77m6ROZM7sXShR/O/JIanvzTwjN3FORfLSr81PsUGd7jlaYOeds9d8tw82oP44+3YucVo+w==", + "dependencies": { + "tslib": "2.3.0" + } } } } diff --git a/frontend/package.json b/frontend/package.json index c8526210a..749831647 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -46,11 +46,13 @@ "@fortawesome/vue-fontawesome": "^3.0.6", "@nuxtjs/eslint-config-typescript": "^12.1.0", "@pinia/nuxt": "^0.5.1", + "echarts": "^5.5.0", "git-describe": "^4.1.1", "lodash-es": "^4.17.21", "pinia": "^2.1.7", "primevue": "^3.46.0", - "vee-validate": "^4.12.4" + "vee-validate": "^4.12.4", + "vue-echarts": "^6.6.9" }, "overrides": { "vue": "^3.4.14" From 5d16635284519eb9a9d3a690cdf13e92f66a6791 Mon Sep 17 00:00:00 2001 From: D13ce Date: Tue, 27 Feb 2024 08:35:40 +0100 Subject: [PATCH 02/39] Implement first chart draft on playground --- .../playground/PlaygroundCharts.vue | 61 +++++++++++++++++++ frontend/pages/playground.vue | 3 + 2 files changed, 64 insertions(+) create mode 100644 frontend/components/playground/PlaygroundCharts.vue diff --git a/frontend/components/playground/PlaygroundCharts.vue b/frontend/components/playground/PlaygroundCharts.vue new file mode 100644 index 000000000..1fac24739 --- /dev/null +++ b/frontend/components/playground/PlaygroundCharts.vue @@ -0,0 +1,61 @@ + + + + + diff --git a/frontend/pages/playground.vue b/frontend/pages/playground.vue index 53229adf9..42ffb55df 100644 --- a/frontend/pages/playground.vue +++ b/frontend/pages/playground.vue @@ -34,6 +34,9 @@ onMounted(async () => { + + + From 791ce3ee18356757f1522c599e76f385e6364e6f Mon Sep 17 00:00:00 2001 From: D13ce Date: Tue, 27 Feb 2024 10:26:26 +0100 Subject: [PATCH 03/39] Add a bunch of options and todos --- .../playground/PlaygroundCharts.vue | 99 +++++++++++++++++-- 1 file changed, 92 insertions(+), 7 deletions(-) diff --git a/frontend/components/playground/PlaygroundCharts.vue b/frontend/components/playground/PlaygroundCharts.vue index 1fac24739..ae63d548e 100644 --- a/frontend/components/playground/PlaygroundCharts.vue +++ b/frontend/components/playground/PlaygroundCharts.vue @@ -7,42 +7,125 @@ import { TitleComponent, TooltipComponent, LegendComponent, - GridComponent + GridComponent, + DataZoomComponent } from 'echarts/components' import VChart from 'vue-echarts' +// TODO: Remove unneeded components use([ CanvasRenderer, LineChart, TitleComponent, TooltipComponent, LegendComponent, + DataZoomComponent, GridComponent ]) +// TODO: Extend data to way more data points const dataSetAll = [85, 85, 90, 67.5, 80, 45, 95] const dataSetHetzner = [80, 75, 85, 85, 80, 0, 90] const dataSetOVH = [90, 95, 95, 50, 80, 90, 100] +// TODO: Replace with numeric values and provide a simple formatter const labels = ['22.Aug\nEpoch 141393', '22.Aug\nEpoch 141393', '22.Aug\nEpoch 141393', '22.Aug\nEpoch 141393', '22.Aug\nEpoch 141393', '22.Aug\nEpoch 141393', '22.Aug\nEpoch 141393'] const option = ref({ + textStyle: { + fontFamily: 'Roboto', + fontSize: 14, + fontWeight: 300, + color: '#f0f0f0' + }, + + color: ['#f0f0f0', '#e6194b', '#46f0f0', '#bcf60c', '#4363d8', '#ffe119', '#f032e6', '#3cb44b', '#911eb4', '#f58231', '#87ceeb', '#e6beff', '#40e0d0', '#fabebe', '#aaffc3', '#ffd8b1', '#fffac8', '#daa520', '#dda0dd', '#fa8072', '#d2b48c', '#6b8e23', '#a0522d', '#008080', '#9a6324', '#800000', '#808000', '#000075', '#808080', '#708090', '#ffdb58'], + + title: { + text: 'Efficiency', // TODO: Translation + left: 'center', + textAlign: 'center', + textStyle: { + fontSize: 24, + fontWeight: 500, + color: '#f0f0f0' + } + }, + xAxis: { - data: labels + type: 'category', + data: labels, + + axisLabel: { + formatter: '{value} %', + fontSize: 14, // TODO: Why is this needed? It should use the global textStyle + lineHeight: 20 + }, + + axisLine: { + lineStyle: { + color: '#f0f0f0' + } + } }, - yAxis: {}, + + yAxis: { + name: 'Efficiency', // TODO: Translation + nameLocation: 'center', + nameTextStyle: { // TODO: retrieve from css? + padding: [0, 0, 35, 0] + }, + + type: 'value', + minInterval: 50, + silent: true, + + axisLabel: { + formatter: '{value} %', + fontSize: 14 + } + }, + + // TODO: Styling and position + legend: { + orient: 'horizontal', + bottom: 20 + }, + + // TODO: Styling + tooltip: { + order: 'valueDesc', + trigger: 'axis' + }, + + // TODO: Styling and position + dataZoom: [ + { + type: 'inside', + start: 0, + end: 20 + }, + { + start: 0, + end: 20 + } + ], + series: [ { data: dataSetAll, - type: 'line' + type: 'line', + name: 'All Groups' // TODO: Translation }, { data: dataSetHetzner, - type: 'line' + type: 'line', + name: 'Hetzner' // TODO: Use cached group names on dashboard }, { data: dataSetOVH, - type: 'line' + type: 'line', + name: 'OVH' // TODO: Use cached group names on dashboard } ] }) @@ -56,6 +139,8 @@ const option = ref({ From 06bddebb4172b908cf9b8d5d1ca0a2b18ddb3af7 Mon Sep 17 00:00:00 2001 From: D13ce Date: Tue, 27 Feb 2024 13:30:26 +0100 Subject: [PATCH 04/39] Add translations and improve styling --- .../playground/PlaygroundCharts.vue | 25 +++++++++++++------ frontend/i18n/en.json | 7 ++++++ 2 files changed, 24 insertions(+), 8 deletions(-) diff --git a/frontend/components/playground/PlaygroundCharts.vue b/frontend/components/playground/PlaygroundCharts.vue index ae63d548e..6903215fd 100644 --- a/frontend/components/playground/PlaygroundCharts.vue +++ b/frontend/components/playground/PlaygroundCharts.vue @@ -12,7 +12,6 @@ import { } from 'echarts/components' import VChart from 'vue-echarts' -// TODO: Remove unneeded components use([ CanvasRenderer, LineChart, @@ -23,6 +22,8 @@ use([ GridComponent ]) +const { t: $t } = useI18n() + // TODO: Extend data to way more data points const dataSetAll = [85, 85, 90, 67.5, 80, 45, 95] const dataSetHetzner = [80, 75, 85, 85, 80, 0, 90] @@ -32,6 +33,8 @@ const dataSetOVH = [90, 95, 95, 50, 80, 90, 100] const labels = ['22.Aug\nEpoch 141393', '22.Aug\nEpoch 141393', '22.Aug\nEpoch 141393', '22.Aug\nEpoch 141393', '22.Aug\nEpoch 141393', '22.Aug\nEpoch 141393', '22.Aug\nEpoch 141393'] const option = ref({ + height: 400, + textStyle: { fontFamily: 'Roboto', fontSize: 14, @@ -42,7 +45,7 @@ const option = ref({ color: ['#f0f0f0', '#e6194b', '#46f0f0', '#bcf60c', '#4363d8', '#ffe119', '#f032e6', '#3cb44b', '#911eb4', '#f58231', '#87ceeb', '#e6beff', '#40e0d0', '#fabebe', '#aaffc3', '#ffd8b1', '#fffac8', '#daa520', '#dda0dd', '#fa8072', '#d2b48c', '#6b8e23', '#a0522d', '#008080', '#9a6324', '#800000', '#808000', '#000075', '#808080', '#708090', '#ffdb58'], title: { - text: 'Efficiency', // TODO: Translation + text: $t('dashboard.validator.summary.chart.title'), left: 'center', textAlign: 'center', textStyle: { @@ -55,9 +58,9 @@ const option = ref({ xAxis: { type: 'category', data: labels, + boundaryGap: false, axisLabel: { - formatter: '{value} %', fontSize: 14, // TODO: Why is this needed? It should use the global textStyle lineHeight: 20 }, @@ -70,7 +73,7 @@ const option = ref({ }, yAxis: { - name: 'Efficiency', // TODO: Translation + name: $t('dashboard.validator.summary.chart.yAxis'), nameLocation: 'center', nameTextStyle: { // TODO: retrieve from css? padding: [0, 0, 35, 0] @@ -86,10 +89,15 @@ const option = ref({ } }, - // TODO: Styling and position + // TODO: Styling legend: { orient: 'horizontal', - bottom: 20 + bottom: 50, + textStyle: { + color: '#f0f0f0', + fontSize: 14, + fontWeight: 'bold' + } }, // TODO: Styling @@ -98,7 +106,7 @@ const option = ref({ trigger: 'axis' }, - // TODO: Styling and position + // TODO: Styling dataZoom: [ { type: 'inside', @@ -133,6 +141,7 @@ const option = ref({ @@ -141,6 +150,6 @@ const option = ref({ .chart-container { padding-top: var(--padding-large); width: 100%; - height: 840px; // TODO: Should be 640px + height: 625px; } diff --git a/frontend/i18n/en.json b/frontend/i18n/en.json index 98ddc2ca6..71c655492 100644 --- a/frontend/i18n/en.json +++ b/frontend/i18n/en.json @@ -1,5 +1,6 @@ { "common": { + "epoch": "Epoch", "slot": "Slot", "validator": "Validator" }, @@ -34,6 +35,12 @@ "proposal_luck": "Proposal Luck", "sync_committee_luck": "Sync C. Luck", "total_apr": "Total APR" + }, + "summary": { + "chart":{ + "title": "Summary", + "yAxis": "Efficiency" + } } } }, From 87844ebfc1350e1432134a12a10ddc39c2189672 Mon Sep 17 00:00:00 2001 From: D13ce Date: Tue, 27 Feb 2024 13:38:46 +0100 Subject: [PATCH 05/39] Use autoresize --- frontend/components/playground/PlaygroundCharts.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/components/playground/PlaygroundCharts.vue b/frontend/components/playground/PlaygroundCharts.vue index 6903215fd..06d40517c 100644 --- a/frontend/components/playground/PlaygroundCharts.vue +++ b/frontend/components/playground/PlaygroundCharts.vue @@ -142,7 +142,7 @@ const option = ref({ From 1a1bab40e93c8fbbd9b1a505297302e215e07d14 Mon Sep 17 00:00:00 2001 From: D13ce Date: Tue, 27 Feb 2024 13:39:06 +0100 Subject: [PATCH 06/39] ... and remove according TODO :) --- frontend/components/playground/PlaygroundCharts.vue | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/components/playground/PlaygroundCharts.vue b/frontend/components/playground/PlaygroundCharts.vue index 06d40517c..16095bc25 100644 --- a/frontend/components/playground/PlaygroundCharts.vue +++ b/frontend/components/playground/PlaygroundCharts.vue @@ -141,7 +141,6 @@ const option = ref({ From a4c668b8dfbf6514aec296f3972595a8f57fe82c Mon Sep 17 00:00:00 2001 From: D13ce Date: Tue, 27 Feb 2024 15:13:15 +0100 Subject: [PATCH 07/39] And and use mock data for chart --- .../playground/PlaygroundCharts.vue | 210 ++++++++++-------- .../public/mock/dashboard/summaryChart.json | 33 +++ 2 files changed, 145 insertions(+), 98 deletions(-) create mode 100644 frontend/public/mock/dashboard/summaryChart.json diff --git a/frontend/components/playground/PlaygroundCharts.vue b/frontend/components/playground/PlaygroundCharts.vue index 16095bc25..4f419bc55 100644 --- a/frontend/components/playground/PlaygroundCharts.vue +++ b/frontend/components/playground/PlaygroundCharts.vue @@ -12,6 +12,8 @@ import { } from 'echarts/components' import VChart from 'vue-echarts' +import { type ChartData } from '~/types/api/common' + use([ CanvasRenderer, LineChart, @@ -24,118 +26,130 @@ use([ const { t: $t } = useI18n() -// TODO: Extend data to way more data points -const dataSetAll = [85, 85, 90, 67.5, 80, 45, 95] -const dataSetHetzner = [80, 75, 85, 85, 80, 0, 90] -const dataSetOVH = [90, 95, 95, 50, 80, 90, 100] - -// TODO: Replace with numeric values and provide a simple formatter -const labels = ['22.Aug\nEpoch 141393', '22.Aug\nEpoch 141393', '22.Aug\nEpoch 141393', '22.Aug\nEpoch 141393', '22.Aug\nEpoch 141393', '22.Aug\nEpoch 141393', '22.Aug\nEpoch 141393'] +const chartData = ref | null>(null) -const option = ref({ - height: 400, +onMounted(async () => { + const res = await $fetch>('./mock/dashboard/summaryChart.json') + chartData.value = res +}) +const title = { + text: $t('dashboard.validator.summary.chart.title'), + left: 'center', + textAlign: 'center', textStyle: { - fontFamily: 'Roboto', - fontSize: 14, - fontWeight: 300, + fontSize: 24, + fontWeight: 500, color: '#f0f0f0' - }, - - color: ['#f0f0f0', '#e6194b', '#46f0f0', '#bcf60c', '#4363d8', '#ffe119', '#f032e6', '#3cb44b', '#911eb4', '#f58231', '#87ceeb', '#e6beff', '#40e0d0', '#fabebe', '#aaffc3', '#ffd8b1', '#fffac8', '#daa520', '#dda0dd', '#fa8072', '#d2b48c', '#6b8e23', '#a0522d', '#008080', '#9a6324', '#800000', '#808000', '#000075', '#808080', '#708090', '#ffdb58'], - - title: { - text: $t('dashboard.validator.summary.chart.title'), - left: 'center', - textAlign: 'center', - textStyle: { - fontSize: 24, - fontWeight: 500, - color: '#f0f0f0' - } - }, - - xAxis: { - type: 'category', - data: labels, - boundaryGap: false, + } +} - axisLabel: { - fontSize: 14, // TODO: Why is this needed? It should use the global textStyle - lineHeight: 20 - }, +// TODO: retrieve from css? +const textStyle = { + fontFamily: 'Roboto', + fontSize: 14, + fontWeight: 300, + color: '#f0f0f0' +} - axisLine: { - lineStyle: { - color: '#f0f0f0' - } - } - }, +const color = ['#f0f0f0', '#e6194b', '#46f0f0', '#bcf60c', '#4363d8', '#ffe119', '#f032e6', '#3cb44b', '#911eb4', '#f58231', '#87ceeb', '#e6beff', '#40e0d0', '#fabebe', '#aaffc3', '#ffd8b1', '#fffac8', '#daa520', '#dda0dd', '#fa8072', '#d2b48c', '#6b8e23', '#a0522d', '#008080', '#9a6324', '#800000', '#808000', '#000075', '#808080', '#708090', '#ffdb58'] - yAxis: { - name: $t('dashboard.validator.summary.chart.yAxis'), - nameLocation: 'center', - nameTextStyle: { // TODO: retrieve from css? - padding: [0, 0, 35, 0] - }, +// TODO: Styling +const legend = { + orient: 'horizontal', + bottom: 50, + textStyle: { + color: '#f0f0f0', + fontSize: 14, + fontWeight: 'bold' + } +} - type: 'value', - minInterval: 50, - silent: true, +// TODO: Styling +const tooltip = { + order: 'valueDesc', + trigger: 'axis' +} - axisLabel: { - formatter: '{value} %', - fontSize: 14 - } +// TODO: Styling and default values +const dataZoom = [ + { + type: 'inside', + start: 0, + end: 20 }, - - // TODO: Styling - legend: { - orient: 'horizontal', - bottom: 50, - textStyle: { - color: '#f0f0f0', - fontSize: 14, - fontWeight: 'bold' - } + { + start: 0, + end: 20 + } +] + +const yAxis = { + name: $t('dashboard.validator.summary.chart.yAxis'), + nameLocation: 'center', + nameTextStyle: { + padding: [0, 0, 35, 0] }, - // TODO: Styling - tooltip: { - order: 'valueDesc', - trigger: 'axis' - }, + type: 'value', + minInterval: 50, + silent: true, - // TODO: Styling - dataZoom: [ - { - type: 'inside', - start: 0, - end: 20 - }, - { - start: 0, - end: 20 - } - ], - - series: [ - { - data: dataSetAll, - type: 'line', - name: 'All Groups' // TODO: Translation - }, - { - data: dataSetHetzner, - type: 'line', - name: 'Hetzner' // TODO: Use cached group names on dashboard + axisLabel: { + formatter: '{value} %', + fontSize: 14 + } +} + +interface SeriesObject { + data: number[]; + type: string; + name: string; +} + +const option = computed(() => { + const series: SeriesObject[] = [] + if (chartData.value?.series) { + chartData.value.series.forEach((element) => { + const newObj: SeriesObject = { + data: element.data, + type: 'line', + name: 'Group ' + element.id // TODO: Use cached group names + } + series.push(newObj) + }) + } + + return { + height: 400, + + title, + textStyle, + color, + legend, + tooltip, + dataZoom, + + xAxis: { + type: 'category', + data: chartData.value?.categories, + boundaryGap: false, + + axisLabel: { + fontSize: 14, // TODO: Why is this needed? It should use the global textStyle + lineHeight: 20 + }, + + axisLine: { + lineStyle: { + color: '#f0f0f0' + } + } }, - { - data: dataSetOVH, - type: 'line', - name: 'OVH' // TODO: Use cached group names on dashboard - } - ] + + yAxis, + series + } }) diff --git a/frontend/public/mock/dashboard/summaryChart.json b/frontend/public/mock/dashboard/summaryChart.json new file mode 100644 index 000000000..df8b1121e --- /dev/null +++ b/frontend/public/mock/dashboard/summaryChart.json @@ -0,0 +1,33 @@ +{ + "categories": [10000, 10001, 10002, 10003, 10004, 10005, 10006, 10007, 10008, 10009, 10010, 10011, 10012, 10013, 10014, 10015, 10016, 10017, 10018, 10019, 10020, 10021, 10022, 10023, 10024, 10025, 10026, 10027, 10028, 10029, 10030, 10031, 10032, 10033, 10034, 10035, 10036, 10037, 10038, 10039, 10040, 10041, 10042, 10043, 10044, 10045, 10046, 10047, 10048, 10049], + "series": [ + { + "id": 0, + "data": [68, 41, 47, 44, 54, 32, 54, 56, 69, 40, 28, 51, 18, 30, 26, 47, 52, 49, 47, 70, 48, 35, 61, 34, 29, 44, 56, 50, 55, 61, 43, 35, 31, 23, 32, 32, 25, 41, 46, 31, 50, 38, 37, 41, 60, 57, 42, 42, 63, 43] + }, + { + "id": 1, + "data": [87, 3, 72, 24, 37, 12, 51, 63, 95, 45, 9, 33, 32, 80, 96, 41, 2, 71, 4, 90, 36, 53, 16, 17, 5, 17, 21, 74, 49, 52, 81, 67, 28, 7, 41, 5, 13, 74, 34, 47, 7, 97, 54, 62, 42, 42, 95, 22, 38, 53] + }, + { + "id": 2, + "data": [84, 60, 16, 94, 7, 8, 88, 89, 24, 34, 38, 59, 59, 64, 0, 48, 91, 38, 5, 93, 16, 71, 67, 7, 4, 68, 66, 54, 73, 91, 35, 28, 6, 42, 51, 5, 38, 7, 85, 99, 17, 38, 13, 46, 29, 69, 94, 10, 62, 82] + }, + { + "id": 3, + "data": [84, 60, 16, 94, 7, 8, 88, 89, 24, 34, 38, 59, 59, 64, 0, 48, 91, 38, 5, 93, 16, 71, 67, 7, 4, 68, 66, 54, 73, 91, 35, 28, 6, 42, 51, 5, 38, 7, 85, 99, 17, 38, 13, 46, 29, 69, 94, 10, 62, 42] + }, + { + "id": 4, + "data": [77, 30, 96, 34, 90, 77, 53, 40, 80, 67, 0, 36, 17, 16, 16, 57, 90, 71, 77, 88, 70, 83, 10, 58, 34, 22, 60, 22, 44, 33, 28, 47, 41, 36, 71, 61, 21, 2, 19, 16, 11, 49, 52, 68, 89, 92, 89, 92, 100, 100] + }, + { + "id": 5, + "data": [90, 44, 35, 12, 92, 45, 11, 46, 91, 17, 49, 77, 4, 22, 27, 27, 17, 1, 47, 50, 49, 11, 69, 42, 28, 63, 23, 29, 99, 82, 80, 32, 25, 25, 17, 0, 51, 25, 9, 82, 52, 84, 42, 49, 79, 26, 12, 4, 71, 80] + }, + { + "id": 6, + "data": [72, 41, 47, 35, 53, 27, 48, 46, 59, 38, 47, 51, 15, 22, 21, 52, 67, 56, 47, 72, 51, 28, 67, 47, 36, 46, 42, 64, 67, 68, 51, 38, 39, 35, 18, 21, 29, 18, 25, 40, 47, 57, 44, 46, 50, 32, 44, 37, 25, 20] + } + ] +} \ No newline at end of file From 0b7d89d4523d29fcdd5326bee03e6a13d32d5f5a Mon Sep 17 00:00:00 2001 From: D13ce Date: Tue, 27 Feb 2024 15:28:05 +0100 Subject: [PATCH 08/39] Improve slider and minor refactor --- .../playground/PlaygroundCharts.vue | 47 +++++++++---------- 1 file changed, 21 insertions(+), 26 deletions(-) diff --git a/frontend/components/playground/PlaygroundCharts.vue b/frontend/components/playground/PlaygroundCharts.vue index 4f419bc55..3bb64574c 100644 --- a/frontend/components/playground/PlaygroundCharts.vue +++ b/frontend/components/playground/PlaygroundCharts.vue @@ -72,17 +72,28 @@ const tooltip = { } // TODO: Styling and default values -const dataZoom = [ - { - type: 'inside', - start: 0, - end: 20 +const dataZoom = { + type: 'slider', + start: 80, + end: 100 +} + +const xAxis = { + type: 'category', + data: chartData.value?.categories, + boundaryGap: false, + + axisLabel: { + fontSize: 14, // TODO: Why is this needed? It should use the global textStyle + lineHeight: 20 }, - { - start: 0, - end: 20 + + axisLine: { + lineStyle: { + color: '#f0f0f0' + } } -] +} const yAxis = { name: $t('dashboard.validator.summary.chart.yAxis'), @@ -130,23 +141,7 @@ const option = computed(() => { tooltip, dataZoom, - xAxis: { - type: 'category', - data: chartData.value?.categories, - boundaryGap: false, - - axisLabel: { - fontSize: 14, // TODO: Why is this needed? It should use the global textStyle - lineHeight: 20 - }, - - axisLine: { - lineStyle: { - color: '#f0f0f0' - } - } - }, - + xAxis, yAxis, series } From 8a974c66d6433183a21e38fa3eed77d0d2ff0ae9 Mon Sep 17 00:00:00 2001 From: D13ce Date: Tue, 27 Feb 2024 15:42:36 +0100 Subject: [PATCH 09/39] Use correct container background color --- frontend/components/playground/PlaygroundCharts.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/components/playground/PlaygroundCharts.vue b/frontend/components/playground/PlaygroundCharts.vue index 3bb64574c..3e784b962 100644 --- a/frontend/components/playground/PlaygroundCharts.vue +++ b/frontend/components/playground/PlaygroundCharts.vue @@ -156,6 +156,7 @@ const option = computed(() => { diff --git a/frontend/utils/network.ts b/frontend/utils/network.ts new file mode 100644 index 000000000..79bcb6fb0 --- /dev/null +++ b/frontend/utils/network.ts @@ -0,0 +1,13 @@ +// TODO: Replace hardcoded Ethereum Mainnet values with real network information once network endpoint is available +// This should als most likely become a composable later +const tsForSlot0 = 1606820423 +const secondsPerSlot = 12 +const slotsPerEpoch = 32 + +export function epochToTs (epoch: number): number | undefined { + if (epoch < 0) { + return undefined + } + + return tsForSlot0 + ((epoch * slotsPerEpoch) * secondsPerSlot) +} From c905809e9a89d3bd128b2d1f35c70954dba4f0a6 Mon Sep 17 00:00:00 2001 From: D13ce Date: Thu, 29 Feb 2024 10:17:49 +0100 Subject: [PATCH 12/39] Add SummaryChartTooltip component --- frontend/assets/css/colors.scss | 7 ++ frontend/assets/css/fonts.scss | 26 ++++++ .../dashboard/chart/SummaryChartTooltip.vue | 85 +++++++++++++++++++ .../playground/PlaygroundCharts.vue | 18 +++- frontend/utils/network.ts | 4 + 5 files changed, 139 insertions(+), 1 deletion(-) create mode 100644 frontend/components/dashboard/chart/SummaryChartTooltip.vue diff --git a/frontend/assets/css/colors.scss b/frontend/assets/css/colors.scss index 2f291994d..036edc706 100644 --- a/frontend/assets/css/colors.scss +++ b/frontend/assets/css/colors.scss @@ -51,6 +51,10 @@ --input-active-text-color: var(--light-black); --input-placeholder-text-color: var(--grey); + // TODO: Use for SlotViz too + --tooltip-background: var(--light-grey-2); + --tooltip-text-color: var(--light-black); + --link-color: var(--blue); --negative-color: var(--light-red); @@ -83,6 +87,9 @@ --input-active-text-color: var(--light-grey); --input-placeholder-text-color: var(--grey); + --tooltip-background: var(--light-grey); + --tooltip-text-color: var(--light-black); + --link-color: var(--light-blue); --negative-color: var(--flashy-red); diff --git a/frontend/assets/css/fonts.scss b/frontend/assets/css/fonts.scss index 32b003a47..2468925d7 100644 --- a/frontend/assets/css/fonts.scss +++ b/frontend/assets/css/fonts.scss @@ -112,6 +112,11 @@ --small_text_font_weight: var(--roboto-light); --small_text_bold_font_weight: var(--roboto-medium); + --tooltip_text_font_family: var(--inter-family); + --tooltip_text_font_size: 10px; + --tooltip_text_font_weight: var(--inter-light); + --tooltip_text_bold_font_weight: var(--inter-medium); + --button_font_family: var(--roboto-family); --button_font_size: 14px; --button_font_weight: var(--roboto-medium); @@ -182,6 +187,27 @@ h1 { @include small_text_bold } +// TODO: Use this and tooltip_text_bold for SlotViz tooltips +@mixin tooltip_text(){ + font-family: var(--tooltip_text_font_family); + font-size: var(--tooltip_text_font_size); + font-weight: var(--tooltip_text_font_weight); +} + +.tooltip_text{ + @include tooltip_text +} + +@mixin tooltip_text_bold(){ + font-family: var(--tooltip_text_font_family); + font-size: var(--tooltip_text_font_size); + font-weight: var(--tooltip_text_bold_font_weight); +} + +.tooltip_text_bold{ + @include tooltip_text_bold +} + @mixin button_text(){ font-family: var(--button_font_family); font-size: var(--button_font_size); diff --git a/frontend/components/dashboard/chart/SummaryChartTooltip.vue b/frontend/components/dashboard/chart/SummaryChartTooltip.vue new file mode 100644 index 000000000..17b650401 --- /dev/null +++ b/frontend/components/dashboard/chart/SummaryChartTooltip.vue @@ -0,0 +1,85 @@ + + + + + diff --git a/frontend/components/playground/PlaygroundCharts.vue b/frontend/components/playground/PlaygroundCharts.vue index d60821d9f..257f7813a 100644 --- a/frontend/components/playground/PlaygroundCharts.vue +++ b/frontend/components/playground/PlaygroundCharts.vue @@ -1,5 +1,6 @@ + + + + diff --git a/frontend/components/dashboard/table/DashboardTableSummary.vue b/frontend/components/dashboard/table/DashboardTableSummary.vue index 7ca90150c..2d2b4a798 100644 --- a/frontend/components/dashboard/table/DashboardTableSummary.vue +++ b/frontend/components/dashboard/table/DashboardTableSummary.vue @@ -1,5 +1,6 @@ diff --git a/frontend/i18n/en.json b/frontend/i18n/en.json index 3794eb9c0..3869783dc 100644 --- a/frontend/i18n/en.json +++ b/frontend/i18n/en.json @@ -114,7 +114,7 @@ "luck": "Luck" }, "chart":{ - "title": "Summary", + "all_groups": "All Groups", "yAxis": "Efficiency" } }, From bc0b5f235907122658ff1dacb41cf8e86648419d Mon Sep 17 00:00:00 2001 From: D13ce Date: Thu, 29 Feb 2024 11:38:01 +0100 Subject: [PATCH 15/39] Improve mocked data --- frontend/public/mock/dashboard/summaryChart.json | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/frontend/public/mock/dashboard/summaryChart.json b/frontend/public/mock/dashboard/summaryChart.json index df8b1121e..674cf1114 100644 --- a/frontend/public/mock/dashboard/summaryChart.json +++ b/frontend/public/mock/dashboard/summaryChart.json @@ -2,9 +2,13 @@ "categories": [10000, 10001, 10002, 10003, 10004, 10005, 10006, 10007, 10008, 10009, 10010, 10011, 10012, 10013, 10014, 10015, 10016, 10017, 10018, 10019, 10020, 10021, 10022, 10023, 10024, 10025, 10026, 10027, 10028, 10029, 10030, 10031, 10032, 10033, 10034, 10035, 10036, 10037, 10038, 10039, 10040, 10041, 10042, 10043, 10044, 10045, 10046, 10047, 10048, 10049], "series": [ { - "id": 0, + "id": -1, "data": [68, 41, 47, 44, 54, 32, 54, 56, 69, 40, 28, 51, 18, 30, 26, 47, 52, 49, 47, 70, 48, 35, 61, 34, 29, 44, 56, 50, 55, 61, 43, 35, 31, 23, 32, 32, 25, 41, 46, 31, 50, 38, 37, 41, 60, 57, 42, 42, 63, 43] }, + { + "id": 0, + "data": [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 90, 80, 70, 60, 50, 40, 30, 20, 10, 0, 5, 0, 5, 0, 10, 20, 30, 40, 50, 60, 70, 80, 85, 90, 95, 97.5, 98, 98.25, 98.5, 98.75, 99, 99.1, 99.15, 99.175, 99.2, 99.201, 99.2015, 100, 100] + }, { "id": 1, "data": [87, 3, 72, 24, 37, 12, 51, 63, 95, 45, 9, 33, 32, 80, 96, 41, 2, 71, 4, 90, 36, 53, 16, 17, 5, 17, 21, 74, 49, 52, 81, 67, 28, 7, 41, 5, 13, 74, 34, 47, 7, 97, 54, 62, 42, 42, 95, 22, 38, 53] From e2d1c403f3c49d3f026e0aca10df0d65f63703b9 Mon Sep 17 00:00:00 2001 From: D13ce Date: Thu, 29 Feb 2024 13:03:07 +0100 Subject: [PATCH 16/39] Minor refactor and color changes --- .../dashboard/chart/SummaryChart.vue | 23 ++++++++----------- 1 file changed, 10 insertions(+), 13 deletions(-) diff --git a/frontend/components/dashboard/chart/SummaryChart.vue b/frontend/components/dashboard/chart/SummaryChart.vue index 46dee6440..b38bc120a 100644 --- a/frontend/components/dashboard/chart/SummaryChart.vue +++ b/frontend/components/dashboard/chart/SummaryChart.vue @@ -37,16 +37,6 @@ onMounted(async () => { chartData.value = res }) -function xToLabel (x: number): string | undefined { - const ts = epochToTs(x) - if (ts === undefined) { - return undefined - } - - const date = formatTs(ts) - return `${date}\nEpoch ${x}` -} - // TODO: retrieve from css? const textStyle = { fontFamily: 'Roboto', @@ -56,7 +46,8 @@ const textStyle = { } // TODO: Replace with colors coming from designer -const color = ['#f0f0f0', '#e6194b', '#46f0f0', '#bcf60c', '#4363d8', '#ffe119', '#f032e6', '#3cb44b', '#911eb4', '#f58231', '#87ceeb', '#e6beff', '#40e0d0', '#fabebe', '#aaffc3', '#ffd8b1', '#fffac8', '#daa520', '#dda0dd', '#fa8072', '#d2b48c', '#6b8e23', '#a0522d', '#008080', '#9a6324', '#800000', '#808000', '#000075', '#808080', '#708090', '#ffdb58'] +// const colorsLight = ['#E7416A', '#6CF0F0', '#B2DF27', '#5D78DC', '#FFDB58', '#F067E9', '#57BD64', '#A448C0', '#DC2A7F', '#F58E45', '#87CEEB', '#438D61', '#E6BEFF', '#6BE4D8', '#FABEBE', '#90D9A5', '#FF6A00', '#FFBE7C', '#BCB997', '#DEB244', '#DDA0DD', '#FA8072', '#D2B48C', '#6B8E23', '#0E8686', '#9A6324', '#932929', '#808000', '#30308E', '#708090'] +const colorsDark = ['#E7416A', '#6CF0F0', '#C3F529', '#5D78DC', '#FFDB58', '#F067E9', '#57BD64', '#A448C0', '#DC2A7F', '#F58E45', '#87CEEB', '#438D61', '#E6BEFF', '#6BE4D8', '#FABEBE', '#AAFFC3', '#FF6A00', '#FFD8B1', '#FFFAC8', '#DEB244', '#DDA0DD', '#FA8072', '#D2B48C', '#6B8E23', '#0E8686', '#9A6324', '#932929', '#808000', '#30308E', '#708090'] const legend = { orient: 'horizontal', @@ -130,7 +121,13 @@ const option = computed(() => { fontSize: 14, // TODO: Why is this needed? It should use the global textStyle lineHeight: 20, formatter: (value: number) => { - return xToLabel(value) || '' + const ts = epochToTs(value) + if (ts === undefined) { + return '' + } + + const date = formatTs(ts) + return `${date}\nEpoch ${value}` } }, @@ -164,7 +161,7 @@ const option = computed(() => { height: 400, textStyle, - color, + color: colorsDark, legend, tooltip, dataZoom, From 7b152f31a1a1522eb6abae491ae3de7a90b19b6f Mon Sep 17 00:00:00 2001 From: D13ce Date: Thu, 29 Feb 2024 13:59:35 +0100 Subject: [PATCH 17/39] Remove TODOs --- frontend/assets/css/colors.scss | 1 - frontend/assets/css/fonts.scss | 1 - 2 files changed, 2 deletions(-) diff --git a/frontend/assets/css/colors.scss b/frontend/assets/css/colors.scss index c0a31afcb..6850b9ffe 100644 --- a/frontend/assets/css/colors.scss +++ b/frontend/assets/css/colors.scss @@ -51,7 +51,6 @@ --input-active-text-color: var(--light-black); --input-placeholder-text-color: var(--grey); - // TODO: Use for SlotViz too --tooltip-background: var(--light-grey-2); --tooltip-text-color: var(--light-black); diff --git a/frontend/assets/css/fonts.scss b/frontend/assets/css/fonts.scss index 2468925d7..637bc4c74 100644 --- a/frontend/assets/css/fonts.scss +++ b/frontend/assets/css/fonts.scss @@ -187,7 +187,6 @@ h1 { @include small_text_bold } -// TODO: Use this and tooltip_text_bold for SlotViz tooltips @mixin tooltip_text(){ font-family: var(--tooltip_text_font_family); font-size: var(--tooltip_text_font_size); From 2ad0c4cdab360927b8827862fdb48d2b5c96b71f Mon Sep 17 00:00:00 2001 From: D13ce Date: Thu, 29 Feb 2024 14:24:06 +0100 Subject: [PATCH 18/39] Fix padding for tooltips --- frontend/components/dashboard/chart/SummaryChart.vue | 1 + frontend/components/dashboard/chart/SummaryChartTooltip.vue | 1 + 2 files changed, 2 insertions(+) diff --git a/frontend/components/dashboard/chart/SummaryChart.vue b/frontend/components/dashboard/chart/SummaryChart.vue index b38bc120a..fc890f6cc 100644 --- a/frontend/components/dashboard/chart/SummaryChart.vue +++ b/frontend/components/dashboard/chart/SummaryChart.vue @@ -62,6 +62,7 @@ const legend = { const tooltip = { order: 'seriesAsc', trigger: 'axis', + padding: 0, valueFormatter: (value: number) => { return `${value}% ${$t('dashboard.validator.summary.chart.yAxis')}` }, diff --git a/frontend/components/dashboard/chart/SummaryChartTooltip.vue b/frontend/components/dashboard/chart/SummaryChartTooltip.vue index 05f366299..cf682b3ac 100644 --- a/frontend/components/dashboard/chart/SummaryChartTooltip.vue +++ b/frontend/components/dashboard/chart/SummaryChartTooltip.vue @@ -57,6 +57,7 @@ const epochText = computed(() => { background-color: var(--tooltip-background); color: var(--tooltip-text-color); line-height: 1.5; + padding: var(--padding); .line-container{ display: flex; From 9c3f4a7c1f25d110becfdd0ac478ba136295c5da Mon Sep 17 00:00:00 2001 From: D13ce Date: Thu, 29 Feb 2024 15:54:21 +0100 Subject: [PATCH 19/39] Add color.ts --- frontend/utils/colors.ts | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 frontend/utils/colors.ts diff --git a/frontend/utils/colors.ts b/frontend/utils/colors.ts new file mode 100644 index 000000000..af80e83a8 --- /dev/null +++ b/frontend/utils/colors.ts @@ -0,0 +1,16 @@ +export function getSummaryChartGroupColors (theme: string) { + const colorsLight = ['#E7416A', '#6CF0F0', '#B2DF27', '#5D78DC', '#FFDB58', '#F067E9', '#57BD64', '#A448C0', '#DC2A7F', '#F58E45', '#87CEEB', '#438D61', '#E6BEFF', '#6BE4D8', '#FABEBE', '#90D9A5', '#FF6A00', '#FFBE7C', '#BCB997', '#DEB244', '#DDA0DD', '#FA8072', '#D2B48C', '#6B8E23', '#0E8686', '#9A6324', '#932929', '#808000', '#30308E', '#708090'] + const colorsDark = ['#E7416A', '#6CF0F0', '#C3F529', '#5D78DC', '#FFDB58', '#F067E9', '#57BD64', '#A448C0', '#DC2A7F', '#F58E45', '#87CEEB', '#438D61', '#E6BEFF', '#6BE4D8', '#FABEBE', '#AAFFC3', '#FF6A00', '#FFD8B1', '#FFFAC8', '#DEB244', '#DDA0DD', '#FA8072', '#D2B48C', '#6B8E23', '#0E8686', '#9A6324', '#932929', '#808000', '#30308E', '#708090'] + + return theme === 'light' ? colorsLight : colorsDark +} + +export function getSummaryChartTextColor (theme: string) { + const styles = window.getComputedStyle(document.documentElement) + + if (theme === 'light') { + return styles.getPropertyValue('--light-black') + } else { + return styles.getPropertyValue('--light-grey') + } +} From 7e83db6022e0554770e268e2ef106aa4221b900e Mon Sep 17 00:00:00 2001 From: D13ce Date: Thu, 29 Feb 2024 15:54:36 +0100 Subject: [PATCH 20/39] Style chart for lightmode --- .../dashboard/chart/SummaryChart.vue | 210 +++++++++--------- 1 file changed, 104 insertions(+), 106 deletions(-) diff --git a/frontend/components/dashboard/chart/SummaryChart.vue b/frontend/components/dashboard/chart/SummaryChart.vue index fc890f6cc..f19208cd5 100644 --- a/frontend/components/dashboard/chart/SummaryChart.vue +++ b/frontend/components/dashboard/chart/SummaryChart.vue @@ -14,6 +14,7 @@ import VChart from 'vue-echarts' import SummaryChartTooltip from './SummaryChartTooltip.vue' import { formatTs } from '~/utils/format' import { useValidatorDashboardOverview } from '~/stores/dashboard/useValidatorDashboardOverviewStore' +import { getSummaryChartGroupColors, getSummaryChartTextColor } from '~/utils/colors' import { type ChartData } from '~/types/api/common' @@ -29,6 +30,7 @@ use([ const { overview } = storeToRefs(useValidatorDashboardOverview()) const { t: $t } = useI18n() +const colorMode = useColorMode() const chartData = ref | null>(null) @@ -37,106 +39,22 @@ onMounted(async () => { chartData.value = res }) -// TODO: retrieve from css? -const textStyle = { - fontFamily: 'Roboto', - fontSize: 14, - fontWeight: 300, - color: '#f0f0f0' -} - -// TODO: Replace with colors coming from designer -// const colorsLight = ['#E7416A', '#6CF0F0', '#B2DF27', '#5D78DC', '#FFDB58', '#F067E9', '#57BD64', '#A448C0', '#DC2A7F', '#F58E45', '#87CEEB', '#438D61', '#E6BEFF', '#6BE4D8', '#FABEBE', '#90D9A5', '#FF6A00', '#FFBE7C', '#BCB997', '#DEB244', '#DDA0DD', '#FA8072', '#D2B48C', '#6B8E23', '#0E8686', '#9A6324', '#932929', '#808000', '#30308E', '#708090'] -const colorsDark = ['#E7416A', '#6CF0F0', '#C3F529', '#5D78DC', '#FFDB58', '#F067E9', '#57BD64', '#A448C0', '#DC2A7F', '#F58E45', '#87CEEB', '#438D61', '#E6BEFF', '#6BE4D8', '#FABEBE', '#AAFFC3', '#FF6A00', '#FFD8B1', '#FFFAC8', '#DEB244', '#DDA0DD', '#FA8072', '#D2B48C', '#6B8E23', '#0E8686', '#9A6324', '#932929', '#808000', '#30308E', '#708090'] - -const legend = { - orient: 'horizontal', - bottom: 50, - textStyle: { - color: '#f0f0f0', - fontSize: 14, - fontWeight: 500 - } -} - -const tooltip = { - order: 'seriesAsc', - trigger: 'axis', - padding: 0, - valueFormatter: (value: number) => { - return `${value}% ${$t('dashboard.validator.summary.chart.yAxis')}` - }, - formatter (params : any) : HTMLElement { - const startEpoch = parseInt(params[0].axisValue) - const groupInfos = params.map((param: any) => { - return { - name: param.seriesName, - efficiency: param.value, - color: param.color - } - }) +const groupColors = ref() +const elementColor = ref() - const d = document.createElement('div') - render(h(SummaryChartTooltip, { startEpoch, groupInfos }), d) - return d - } -} - -const dataZoom = { - type: 'slider', - start: 80, - end: 100 -} - -// yAxis does not need to be computed as it will always be the same -const yAxis = { - name: $t('dashboard.validator.summary.chart.yAxis'), - nameLocation: 'center', - nameTextStyle: { - padding: [0, 0, 35, 0] - }, - - type: 'value', - minInterval: 50, - silent: true, - - axisLabel: { - formatter: '{value} %', - fontSize: 14 - } -} +watch(colorMode, (newColorMode) => { + groupColors.value = getSummaryChartGroupColors(newColorMode.value) + elementColor.value = getSummaryChartTextColor(newColorMode.value) +}, { immediate: true }) -interface SeriesObject { - data: number[]; - type: string; - name: string; -} +const styles = window.getComputedStyle(document.documentElement) +const fontFamily = styles.getPropertyValue('--roboto-family') const option = computed(() => { - const xAxis = { - type: 'category', - data: chartData.value?.categories, - boundaryGap: false, - - axisLabel: { - fontSize: 14, // TODO: Why is this needed? It should use the global textStyle - lineHeight: 20, - formatter: (value: number) => { - const ts = epochToTs(value) - if (ts === undefined) { - return '' - } - - const date = formatTs(ts) - return `${date}\nEpoch ${value}` - } - }, - - axisLine: { - lineStyle: { - color: '#f0f0f0' - } - } + interface SeriesObject { + data: number[]; + type: string; + name: string; } const series: SeriesObject[] = [] @@ -160,16 +78,96 @@ const option = computed(() => { return { height: 400, - - textStyle, - color: colorsDark, - legend, - tooltip, - dataZoom, - - xAxis, - yAxis, - series + xAxis: { + type: 'category', + data: chartData.value?.categories, + boundaryGap: false, + axisLabel: { + fontSize: 14, // TODO: Why is this needed? It should use the global textStyle + lineHeight: 20, + formatter: (value: number) => { + const ts = epochToTs(value) + if (ts === undefined) { + return '' + } + + const date = formatTs(ts) + return `${date}\nEpoch ${value}` + } + } + }, + yAxis: { + name: $t('dashboard.validator.summary.chart.yAxis'), + nameLocation: 'center', + nameTextStyle: { + padding: [0, 0, 35, 0] + }, + type: 'value', + minInterval: 50, + silent: true, + axisLabel: { + formatter: '{value} %', + fontSize: 14 + }, + splitLine: { + lineStyle: { + color: elementColor.value + } + } + }, + series, + textStyle: { + fontFamily, + fontSize: 14, + fontWeight: 300, + color: elementColor.value + }, + color: groupColors.value, + legend: { + orient: 'horizontal', + bottom: 50, + textStyle: { + color: elementColor.value, + fontSize: 14, + fontWeight: 500 + } + }, + tooltip: { + order: 'seriesAsc', + trigger: 'axis', + padding: 0, + valueFormatter: (value: number) => { + return `${value}% ${$t('dashboard.validator.summary.chart.yAxis')}` + }, + formatter (params : any) : HTMLElement { + const startEpoch = parseInt(params[0].axisValue) + const groupInfos = params.map((param: any) => { + return { + name: param.seriesName, + efficiency: param.value, + color: param.color + } + }) + + const d = document.createElement('div') + render(h(SummaryChartTooltip, { startEpoch, groupInfos }), d) + return d + } + }, + dataZoom: { + type: 'slider', + start: 80, + end: 100, + dataBackground: { + lineStyle: { + color: elementColor.value + }, + areaStyle: { + color: elementColor.value + } + }, + borderColor: elementColor.value + } } }) From d4bf90bf2d15548962430f3ccfb9941414b4a685 Mon Sep 17 00:00:00 2001 From: D13ce Date: Thu, 29 Feb 2024 16:05:08 +0100 Subject: [PATCH 21/39] Get font info from css --- .../components/dashboard/chart/SummaryChart.vue | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/frontend/components/dashboard/chart/SummaryChart.vue b/frontend/components/dashboard/chart/SummaryChart.vue index f19208cd5..6997c6a08 100644 --- a/frontend/components/dashboard/chart/SummaryChart.vue +++ b/frontend/components/dashboard/chart/SummaryChart.vue @@ -49,6 +49,9 @@ watch(colorMode, (newColorMode) => { const styles = window.getComputedStyle(document.documentElement) const fontFamily = styles.getPropertyValue('--roboto-family') +const textSize = parseInt(styles.getPropertyValue('--standard_text_font_size')) +const fontWeightLight = parseInt(styles.getPropertyValue('--roboto-light')) +const fontWeightMedium = parseInt(styles.getPropertyValue('--roboto-medium')) const option = computed(() => { interface SeriesObject { @@ -83,7 +86,7 @@ const option = computed(() => { data: chartData.value?.categories, boundaryGap: false, axisLabel: { - fontSize: 14, // TODO: Why is this needed? It should use the global textStyle + fontSize: textSize, lineHeight: 20, formatter: (value: number) => { const ts = epochToTs(value) @@ -107,7 +110,7 @@ const option = computed(() => { silent: true, axisLabel: { formatter: '{value} %', - fontSize: 14 + fontSize: textSize }, splitLine: { lineStyle: { @@ -118,8 +121,8 @@ const option = computed(() => { series, textStyle: { fontFamily, - fontSize: 14, - fontWeight: 300, + fontSize: textSize, + fontWeight: fontWeightLight, color: elementColor.value }, color: groupColors.value, @@ -128,8 +131,8 @@ const option = computed(() => { bottom: 50, textStyle: { color: elementColor.value, - fontSize: 14, - fontWeight: 500 + fontSize: textSize, + fontWeight: fontWeightMedium } }, tooltip: { From 1fd293016140ec05996a369fe28c85156a17010a Mon Sep 17 00:00:00 2001 From: D13ce Date: Thu, 29 Feb 2024 16:08:12 +0100 Subject: [PATCH 22/39] Add comment in colors.scss --- frontend/assets/css/colors.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/frontend/assets/css/colors.scss b/frontend/assets/css/colors.scss index 6850b9ffe..e01c36cd7 100644 --- a/frontend/assets/css/colors.scss +++ b/frontend/assets/css/colors.scss @@ -1,3 +1,5 @@ +// When updating values here, please keep in mind that you might have to updated utils/colors.ts too + :root { --grey: #a5a5a5; --grey-1: #e9e9e9; From 6e4773ae036eebc228a92dac1925eb9d112fe19a Mon Sep 17 00:00:00 2001 From: D13ce Date: Thu, 29 Feb 2024 16:08:26 +0100 Subject: [PATCH 23/39] Use lowercase for colors --- frontend/utils/colors.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/utils/colors.ts b/frontend/utils/colors.ts index af80e83a8..94c9abba2 100644 --- a/frontend/utils/colors.ts +++ b/frontend/utils/colors.ts @@ -1,6 +1,6 @@ export function getSummaryChartGroupColors (theme: string) { - const colorsLight = ['#E7416A', '#6CF0F0', '#B2DF27', '#5D78DC', '#FFDB58', '#F067E9', '#57BD64', '#A448C0', '#DC2A7F', '#F58E45', '#87CEEB', '#438D61', '#E6BEFF', '#6BE4D8', '#FABEBE', '#90D9A5', '#FF6A00', '#FFBE7C', '#BCB997', '#DEB244', '#DDA0DD', '#FA8072', '#D2B48C', '#6B8E23', '#0E8686', '#9A6324', '#932929', '#808000', '#30308E', '#708090'] - const colorsDark = ['#E7416A', '#6CF0F0', '#C3F529', '#5D78DC', '#FFDB58', '#F067E9', '#57BD64', '#A448C0', '#DC2A7F', '#F58E45', '#87CEEB', '#438D61', '#E6BEFF', '#6BE4D8', '#FABEBE', '#AAFFC3', '#FF6A00', '#FFD8B1', '#FFFAC8', '#DEB244', '#DDA0DD', '#FA8072', '#D2B48C', '#6B8E23', '#0E8686', '#9A6324', '#932929', '#808000', '#30308E', '#708090'] + const colorsLight = ['#e7416a', '#6cf0f0', '#b2df27', '#5d78dc', '#ffdb58', '#f067e9', '#57bd64', '#a448c0', '#dc2a7f', '#f58e45', '#87ceeb', '#438d61', '#e6beff', '#6be4d8', '#fabebe', '#90d9a5', '#ff6a00', '#ffbe7c', '#bcb997', '#deb244', '#dda0dd', '#fa8072', '#d2b48c', '#6b8e23', '#0e8686', '#9a6324', '#932929', '#808000', '#30308e', '#708090'] + const colorsDark = ['#e7416a', '#6cf0f0', '#c3f529', '#5d78dc', '#ffdb58', '#f067e9', '#57bd64', '#a448c0', '#dc2a7f', '#f58e45', '#87ceeb', '#438d61', '#e6beff', '#6be4d8', '#fabebe', '#aaffc3', '#ff6a00', '#ffd8b1', '#fffac8', '#deb244', '#dda0dd', '#fa8072', '#d2b48c', '#6b8e23', '#0e8686', '#9a6324', '#932929', '#808000', '#30308e', '#708090'] return theme === 'light' ? colorsLight : colorsDark } From c483ce257c596df4b732a2b99d349f608cc3cc72 Mon Sep 17 00:00:00 2001 From: D13ce Date: Thu, 29 Feb 2024 16:13:18 +0100 Subject: [PATCH 24/39] Minor refactor --- .../dashboard/chart/SummaryChart.vue | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/frontend/components/dashboard/chart/SummaryChart.vue b/frontend/components/dashboard/chart/SummaryChart.vue index 6997c6a08..4f952ecdc 100644 --- a/frontend/components/dashboard/chart/SummaryChart.vue +++ b/frontend/components/dashboard/chart/SummaryChart.vue @@ -40,11 +40,11 @@ onMounted(async () => { }) const groupColors = ref() -const elementColor = ref() +const labelColor = ref() watch(colorMode, (newColorMode) => { groupColors.value = getSummaryChartGroupColors(newColorMode.value) - elementColor.value = getSummaryChartTextColor(newColorMode.value) + labelColor.value = getSummaryChartTextColor(newColorMode.value) }, { immediate: true }) const styles = window.getComputedStyle(document.documentElement) @@ -67,7 +67,7 @@ const option = computed(() => { if (element.id !== -1) { const group = overview.value?.groups.find(group => group.id === element.id) - name = group !== undefined ? group.name : 'Group Id ' + element.id + name = group !== undefined ? group.name : element.id.toString() } const newObj: SeriesObject = { @@ -114,7 +114,7 @@ const option = computed(() => { }, splitLine: { lineStyle: { - color: elementColor.value + color: labelColor.value } } }, @@ -123,14 +123,14 @@ const option = computed(() => { fontFamily, fontSize: textSize, fontWeight: fontWeightLight, - color: elementColor.value + color: labelColor.value }, color: groupColors.value, legend: { orient: 'horizontal', - bottom: 50, + bottom: 65, textStyle: { - color: elementColor.value, + color: labelColor.value, fontSize: textSize, fontWeight: fontWeightMedium } @@ -163,13 +163,13 @@ const option = computed(() => { end: 100, dataBackground: { lineStyle: { - color: elementColor.value + color: labelColor.value }, areaStyle: { - color: elementColor.value + color: labelColor.value } }, - borderColor: elementColor.value + borderColor: labelColor.value } } }) From ecbb457b165cc1fb65cd62faa7db91c283088351 Mon Sep 17 00:00:00 2001 From: D13ce Date: Thu, 29 Feb 2024 16:25:55 +0100 Subject: [PATCH 25/39] Fix legend for mobile --- frontend/components/dashboard/chart/SummaryChart.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/components/dashboard/chart/SummaryChart.vue b/frontend/components/dashboard/chart/SummaryChart.vue index 4f952ecdc..575836bcf 100644 --- a/frontend/components/dashboard/chart/SummaryChart.vue +++ b/frontend/components/dashboard/chart/SummaryChart.vue @@ -127,6 +127,7 @@ const option = computed(() => { }, color: groupColors.value, legend: { + type: 'scroll', orient: 'horizontal', bottom: 65, textStyle: { From 2e950f76aefcaeaed38bd51110354b8715d7ed8a Mon Sep 17 00:00:00 2001 From: Alexander Maushammer Date: Fri, 1 Mar 2024 08:43:53 +0100 Subject: [PATCH 26/39] some more mock groups --- .../public/mock/dashboard/summaryChart.json | 160 ++++++++++++++++++ 1 file changed, 160 insertions(+) diff --git a/frontend/public/mock/dashboard/summaryChart.json b/frontend/public/mock/dashboard/summaryChart.json index 674cf1114..99bb8db4a 100644 --- a/frontend/public/mock/dashboard/summaryChart.json +++ b/frontend/public/mock/dashboard/summaryChart.json @@ -32,6 +32,166 @@ { "id": 6, "data": [72, 41, 47, 35, 53, 27, 48, 46, 59, 38, 47, 51, 15, 22, 21, 52, 67, 56, 47, 72, 51, 28, 67, 47, 36, 46, 42, 64, 67, 68, 51, 38, 39, 35, 18, 21, 29, 18, 25, 40, 47, 57, 44, 46, 50, 32, 44, 37, 25, 20] + }, + { + "id": 9, + "data": [58, 41, 47, 44, 54, 32, 54, 56, 69, 40, 28, 51, 18, 30, 26, 47, 52, 49, 47, 70, 48, 35, 61, 34, 29, 44, 56, 50, 55, 61, 43, 35, 31, 23, 32, 32, 25, 41, 46, 31, 50, 38, 37, 41, 60, 57, 42, 42, 63, 43] + }, + { + "id": 10, + "data": [0, 11, 20, 30, 40, 50, 60, 70, 80, 90, 100, 90, 80, 70, 60, 50, 40, 30, 20, 10, 0, 5, 0, 5, 0, 10, 20, 30, 40, 50, 60, 70, 80, 85, 90, 95, 97.5, 98, 98.25, 98.5, 98.75, 99, 99.1, 99.15, 99.175, 99.2, 99.201, 99.2015, 100, 100] + }, + { + "id": 11, + "data": [84, 13, 72, 24, 37, 12, 51, 63, 95, 45, 9, 33, 32, 80, 96, 41, 2, 71, 4, 90, 36, 53, 16, 17, 5, 17, 21, 74, 49, 52, 81, 67, 28, 7, 41, 5, 13, 74, 34, 47, 7, 97, 54, 62, 42, 42, 95, 22, 38, 53] + }, + { + "id": 12, + "data": [84, 6, 16, 94, 7, 8, 88, 89, 24, 34, 38, 59, 59, 64, 0, 48, 91, 38, 5, 93, 16, 71, 67, 7, 4, 68, 66, 54, 73, 91, 35, 28, 6, 42, 51, 5, 38, 7, 85, 99, 17, 38, 13, 46, 29, 69, 94, 10, 62, 82] + }, + { + "id": 13, + "data": [84, 60, 16, 94, 7, 8, 88, 89, 24, 34, 38, 59, 59, 64, 0, 48, 91, 38, 5, 93, 16, 71, 67, 7, 4, 68, 66, 54, 73, 91, 35, 28, 6, 42, 51, 5, 38, 7, 85, 99, 17, 38, 13, 46, 29, 69, 94, 10, 62, 42] + }, + { + "id": 14, + "data": [77, 30, 96, 34, 90, 77, 53, 40, 80, 67, 0, 36, 17, 16, 16, 57, 90, 71, 77, 88, 70, 83, 10, 58, 34, 22, 60, 22, 44, 33, 28, 47, 41, 36, 71, 61, 21, 2, 19, 16, 11, 49, 52, 68, 89, 92, 89, 92, 100, 100] + }, + { + "id": 15, + "data": [90, 44, 35, 12, 92, 45, 11, 46, 91, 17, 49, 77, 4, 22, 27, 27, 17, 1, 47, 50, 49, 11, 69, 42, 28, 63, 23, 29, 99, 82, 80, 32, 25, 25, 17, 0, 51, 25, 9, 82, 52, 84, 42, 49, 79, 26, 12, 4, 71, 80] + }, + { + "id": 16, + "data": [72, 41, 47, 35, 53, 27, 48, 46, 59, 38, 47, 51, 15, 22, 21, 52, 67, 56, 47, 72, 51, 28, 67, 47, 36, 46, 42, 64, 67, 68, 51, 38, 39, 35, 18, 21, 29, 18, 25, 40, 47, 57, 44, 46, 50, 32, 44, 37, 25, 20] + }, + { + "id": 19, + "data": [68, 40, 47, 44, 54, 32, 54, 56, 69, 40, 28, 51, 18, 30, 26, 47, 52, 49, 47, 70, 48, 35, 61, 34, 29, 44, 56, 50, 55, 61, 43, 35, 31, 23, 32, 32, 25, 41, 46, 31, 50, 38, 37, 41, 60, 57, 42, 42, 63, 43] + }, + { + "id": 20, + "data": [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 90, 80, 70, 60, 50, 40, 30, 20, 10, 0, 5, 0, 5, 0, 10, 20, 30, 40, 50, 60, 70, 80, 85, 90, 95, 97.5, 98, 98.25, 98.5, 98.75, 99, 99.1, 99.15, 99.175, 99.2, 99.201, 99.2015, 100, 100] + }, + { + "id": 21, + "data": [87, 3, 72, 24, 37, 12, 51, 63, 95, 45, 9, 33, 32, 80, 96, 41, 2, 71, 4, 90, 36, 53, 16, 17, 5, 17, 21, 74, 49, 52, 81, 67, 28, 7, 41, 5, 13, 74, 34, 47, 7, 97, 54, 62, 42, 42, 95, 22, 38, 53] + }, + { + "id": 22, + "data": [84, 60, 16, 94, 7, 8, 88, 89, 24, 34, 38, 59, 59, 64, 0, 48, 91, 38, 5, 93, 16, 71, 67, 7, 4, 68, 66, 54, 73, 91, 35, 28, 6, 42, 51, 5, 38, 7, 85, 99, 17, 38, 13, 46, 29, 69, 94, 10, 62, 82] + }, + { + "id": 23, + "data": [84, 60, 16, 94, 7, 8, 88, 89, 24, 34, 38, 59, 59, 64, 0, 48, 91, 38, 5, 93, 16, 71, 67, 7, 4, 68, 66, 54, 73, 91, 35, 28, 6, 42, 51, 5, 38, 7, 85, 99, 17, 38, 13, 46, 29, 69, 94, 10, 62, 42] + }, + { + "id": 24, + "data": [77, 30, 96, 34, 90, 77, 53, 40, 80, 67, 0, 36, 17, 16, 16, 57, 90, 71, 77, 88, 70, 83, 10, 58, 34, 22, 60, 22, 44, 33, 28, 47, 41, 36, 71, 61, 21, 2, 19, 16, 11, 49, 52, 68, 89, 92, 89, 92, 100, 100] + }, + { + "id": 25, + "data": [90, 44, 35, 12, 92, 45, 11, 46, 91, 17, 49, 77, 4, 22, 27, 27, 17, 1, 47, 50, 49, 11, 69, 42, 28, 63, 23, 29, 99, 82, 80, 32, 25, 25, 17, 0, 51, 25, 9, 82, 52, 84, 42, 49, 79, 26, 12, 4, 71, 80] + }, + { + "id": 26, + "data": [72, 41, 47, 35, 53, 27, 48, 46, 59, 38, 47, 51, 15, 22, 21, 52, 67, 56, 47, 72, 51, 28, 67, 47, 36, 46, 42, 64, 67, 68, 51, 38, 39, 35, 18, 21, 29, 18, 25, 40, 47, 57, 44, 46, 50, 32, 44, 37, 25, 20] + }, + { + "id": 29, + "data": [68, 40, 47, 44, 54, 32, 54, 56, 69, 40, 28, 51, 18, 30, 26, 47, 52, 49, 47, 70, 48, 35, 61, 34, 29, 44, 56, 50, 55, 61, 43, 35, 31, 23, 32, 32, 25, 41, 46, 31, 50, 38, 37, 41, 60, 57, 42, 42, 63, 43] + }, + { + "id": 30, + "data": [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 90, 80, 70, 60, 50, 40, 30, 20, 10, 0, 5, 0, 5, 0, 10, 20, 30, 40, 50, 60, 70, 80, 85, 90, 95, 97.5, 98, 98.25, 98.5, 98.75, 99, 99.1, 99.15, 99.175, 99.2, 99.201, 99.2015, 100, 100] + }, + { + "id": 31, + "data": [87, 3, 72, 24, 37, 12, 51, 63, 95, 45, 9, 33, 32, 80, 96, 41, 2, 71, 4, 90, 36, 53, 16, 17, 5, 17, 21, 74, 49, 52, 81, 67, 28, 7, 41, 5, 13, 74, 34, 47, 7, 97, 54, 62, 42, 42, 95, 22, 38, 53] + }, + { + "id": 32, + "data": [84, 60, 16, 94, 7, 8, 88, 89, 24, 34, 38, 59, 59, 64, 0, 48, 91, 38, 5, 93, 16, 71, 67, 7, 4, 68, 66, 54, 73, 91, 35, 28, 6, 42, 51, 5, 38, 7, 85, 99, 17, 38, 13, 46, 29, 69, 94, 10, 62, 82] + }, + { + "id": 33, + "data": [84, 60, 16, 94, 7, 8, 88, 89, 24, 34, 38, 59, 59, 64, 0, 48, 91, 38, 5, 93, 16, 71, 67, 7, 4, 68, 66, 54, 73, 91, 35, 28, 6, 42, 51, 5, 38, 7, 85, 99, 17, 38, 13, 46, 29, 69, 94, 10, 62, 42] + }, + { + "id": 34, + "data": [77, 30, 96, 34, 90, 77, 53, 40, 80, 67, 0, 36, 17, 16, 16, 57, 90, 71, 77, 88, 70, 83, 10, 58, 34, 22, 60, 22, 44, 33, 28, 47, 41, 36, 71, 61, 21, 2, 19, 16, 11, 49, 52, 68, 89, 92, 89, 92, 100, 100] + }, + { + "id": 35, + "data": [90, 44, 35, 12, 92, 45, 11, 46, 91, 17, 49, 77, 4, 22, 27, 27, 17, 1, 47, 50, 49, 11, 69, 42, 28, 63, 23, 29, 99, 82, 80, 32, 25, 25, 17, 0, 51, 25, 9, 82, 52, 84, 42, 49, 79, 26, 12, 4, 71, 80] + }, + { + "id": 36, + "data": [72, 41, 47, 35, 53, 27, 48, 46, 59, 38, 47, 51, 15, 22, 21, 52, 67, 56, 47, 72, 51, 28, 67, 47, 36, 46, 42, 64, 67, 68, 51, 38, 39, 35, 18, 21, 29, 18, 25, 40, 47, 57, 44, 46, 50, 32, 44, 37, 25, 20] + }, + { + "id": 39, + "data": [68, 40, 47, 44, 54, 32, 54, 56, 69, 40, 28, 51, 18, 30, 26, 47, 52, 49, 47, 70, 48, 35, 61, 34, 29, 44, 56, 50, 55, 61, 43, 35, 31, 23, 32, 32, 25, 41, 46, 31, 50, 38, 37, 41, 60, 57, 42, 42, 63, 43] + }, + { + "id": 40, + "data": [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 90, 80, 70, 60, 50, 40, 30, 20, 10, 0, 5, 0, 5, 0, 10, 20, 30, 40, 50, 60, 70, 80, 85, 90, 95, 97.5, 98, 98.25, 98.5, 98.75, 99, 99.1, 99.15, 99.175, 99.2, 99.201, 99.2015, 100, 100] + }, + { + "id": 41, + "data": [87, 3, 72, 24, 37, 12, 51, 63, 95, 45, 9, 33, 32, 80, 96, 41, 2, 71, 4, 90, 36, 53, 16, 17, 5, 17, 21, 74, 49, 52, 81, 67, 28, 7, 41, 5, 13, 74, 34, 47, 7, 97, 54, 62, 42, 42, 95, 22, 38, 53] + }, + { + "id": 42, + "data": [84, 60, 16, 94, 7, 8, 88, 89, 24, 34, 38, 59, 59, 64, 0, 48, 91, 38, 5, 93, 16, 71, 67, 7, 4, 68, 66, 54, 73, 91, 35, 28, 6, 42, 51, 5, 38, 7, 85, 99, 17, 38, 13, 46, 29, 69, 94, 10, 62, 82] + }, + { + "id": 43, + "data": [84, 60, 16, 94, 7, 8, 88, 89, 24, 34, 38, 59, 59, 64, 0, 48, 91, 38, 5, 93, 16, 71, 67, 7, 4, 68, 66, 54, 73, 91, 35, 28, 6, 42, 51, 5, 38, 7, 85, 99, 17, 38, 13, 46, 29, 69, 94, 10, 62, 42] + }, + { + "id": 44, + "data": [77, 30, 96, 34, 90, 77, 53, 40, 80, 67, 0, 36, 17, 16, 16, 57, 90, 71, 77, 88, 70, 83, 10, 58, 34, 22, 60, 22, 44, 33, 28, 47, 41, 36, 71, 61, 21, 2, 19, 16, 11, 49, 52, 68, 89, 92, 89, 92, 100, 100] + }, + { + "id": 45, + "data": [90, 44, 35, 12, 92, 45, 11, 46, 91, 17, 49, 77, 4, 22, 27, 27, 17, 1, 47, 50, 49, 11, 69, 42, 28, 63, 23, 29, 99, 82, 80, 32, 25, 25, 17, 0, 51, 25, 9, 82, 52, 84, 42, 49, 79, 26, 12, 4, 71, 80] + }, + { + "id": 46, + "data": [72, 41, 47, 35, 53, 27, 48, 46, 59, 38, 47, 51, 15, 22, 21, 52, 67, 56, 47, 72, 51, 28, 67, 47, 36, 46, 42, 64, 67, 68, 51, 38, 39, 35, 18, 21, 29, 18, 25, 40, 47, 57, 44, 46, 50, 32, 44, 37, 25, 20] + }, + { + "id": 49, + "data": [68, 40, 47, 44, 54, 32, 54, 56, 69, 40, 28, 51, 18, 30, 26, 47, 52, 49, 47, 70, 48, 35, 61, 34, 29, 44, 56, 50, 55, 61, 43, 35, 31, 23, 32, 32, 25, 41, 46, 31, 50, 38, 37, 41, 60, 57, 42, 42, 63, 43] + }, + { + "id": 50, + "data": [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 90, 80, 70, 60, 50, 40, 30, 20, 10, 0, 5, 0, 5, 0, 10, 20, 30, 40, 50, 60, 70, 80, 85, 90, 95, 97.5, 98, 98.25, 98.5, 98.75, 99, 99.1, 99.15, 99.175, 99.2, 99.201, 99.2015, 100, 100] + }, + { + "id": 51, + "data": [87, 3, 72, 24, 37, 12, 51, 63, 95, 45, 9, 33, 32, 80, 96, 41, 2, 71, 4, 90, 36, 53, 16, 17, 5, 17, 21, 74, 49, 52, 81, 67, 28, 7, 41, 5, 13, 74, 34, 47, 7, 97, 54, 62, 42, 42, 95, 22, 38, 53] + }, + { + "id": 52, + "data": [84, 60, 16, 94, 7, 8, 88, 89, 24, 34, 38, 59, 59, 64, 0, 48, 91, 38, 5, 93, 16, 71, 67, 7, 4, 68, 66, 54, 73, 91, 35, 28, 6, 42, 51, 5, 38, 7, 85, 99, 17, 38, 13, 46, 29, 69, 94, 10, 62, 82] + }, + { + "id": 53, + "data": [84, 60, 16, 94, 7, 8, 88, 89, 24, 34, 38, 59, 59, 64, 0, 48, 91, 38, 5, 93, 16, 71, 67, 7, 4, 68, 66, 54, 73, 91, 35, 28, 6, 42, 51, 5, 38, 7, 85, 99, 17, 38, 13, 46, 29, 69, 94, 10, 62, 42] + }, + { + "id": 54, + "data": [77, 30, 96, 34, 90, 77, 53, 40, 80, 67, 0, 36, 17, 16, 16, 57, 90, 71, 77, 88, 70, 83, 10, 58, 34, 22, 60, 22, 44, 33, 28, 47, 41, 36, 71, 61, 21, 2, 19, 16, 11, 49, 52, 68, 89, 92, 89, 92, 100, 100] + }, + { + "id": 55, + "data": [90, 44, 35, 12, 92, 45, 11, 46, 91, 17, 49, 77, 4, 22, 27, 27, 17, 1, 47, 50, 49, 11, 69, 42, 28, 63, 23, 29, 99, 82, 80, 32, 25, 25, 17, 0, 51, 25, 9, 82, 52, 84, 42, 49, 79, 26, 12, 4, 71, 80] + }, + { + "id": 56, + "data": [72, 41, 47, 35, 53, 27, 48, 46, 59, 38, 47, 51, 15, 22, 21, 52, 67, 56, 47, 72, 51, 28, 67, 47, 36, 46, 42, 64, 67, 68, 51, 38, 39, 35, 18, 21, 29, 18, 25, 40, 47, 57, 44, 46, 50, 32, 44, 37, 25, 20] } ] } \ No newline at end of file From 9990d702cd3593be9a20140a475c87e49e6b8889 Mon Sep 17 00:00:00 2001 From: D13ce Date: Mon, 4 Mar 2024 10:24:21 +0100 Subject: [PATCH 27/39] Use tooltip colors for BcTooltip as well --- frontend/components/bc/BcTooltip.vue | 18 ++++++------------ 1 file changed, 6 insertions(+), 12 deletions(-) diff --git a/frontend/components/bc/BcTooltip.vue b/frontend/components/bc/BcTooltip.vue index 7222946f3..57f249881 100644 --- a/frontend/components/bc/BcTooltip.vue +++ b/frontend/components/bc/BcTooltip.vue @@ -186,10 +186,6 @@ onUnmounted(() => { } .bc-tooltip { - - --tt-bg-color: var(--light-grey-2); - --tt-color: var(--light-black); - position: relative; display: inline-flex; flex-wrap: wrap; @@ -199,16 +195,14 @@ onUnmounted(() => { padding: 9px 12px; min-width: 120px; border-radius: var(--border-radius); - color: var(--tt-color); - background: var(--tt-bg-color); + color: var(--tooltip-text-color); + background: var(--tooltip-background); font-family: var(--inter-family); font-weight: var(--inter-light); font-size: 10px; pointer-events: none; &.dark { - --tt-bg-color: var(--light-black); - --tt-color: var(--light-grey); border: solid 1px var(--container-border-color); } @@ -225,7 +219,7 @@ onUnmounted(() => { top: -10px; left: 50%; - border-color: transparent transparent var(--tt-bg-color) transparent; + border-color: transparent transparent var(--tooltip-background) transparent; } &.hover, @@ -242,7 +236,7 @@ onUnmounted(() => { &::after { top: 100%; left: 50%; - border-color: var(--tt-bg-color) transparent transparent transparent; + border-color: var(--tooltip-background) transparent transparent transparent; } } @@ -251,7 +245,7 @@ onUnmounted(() => { &::after { top: calc(50% - 5px); left: -10px; - border-color: transparent var(--tt-bg-color) transparent transparent; + border-color: transparent var(--tooltip-background) transparent transparent; } } @@ -259,7 +253,7 @@ onUnmounted(() => { &::after { top: calc(50% - 5px); left: 100%; - border-color: transparent transparent transparent var(--tt-bg-color); + border-color: transparent transparent transparent var(--tooltip-background); } } From f357933acf99e8f65090fd6d5cacf6a8ade39bad Mon Sep 17 00:00:00 2001 From: D13ce Date: Mon, 4 Mar 2024 10:27:44 +0100 Subject: [PATCH 28/39] Shorten group name check --- frontend/components/dashboard/chart/SummaryChart.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/components/dashboard/chart/SummaryChart.vue b/frontend/components/dashboard/chart/SummaryChart.vue index 575836bcf..5c08bdb3c 100644 --- a/frontend/components/dashboard/chart/SummaryChart.vue +++ b/frontend/components/dashboard/chart/SummaryChart.vue @@ -67,7 +67,7 @@ const option = computed(() => { if (element.id !== -1) { const group = overview.value?.groups.find(group => group.id === element.id) - name = group !== undefined ? group.name : element.id.toString() + name = group?.name || element.id.toString() } const newObj: SeriesObject = { From 173765c10fe1489bdfcd6afbfc33aee64100c534 Mon Sep 17 00:00:00 2001 From: D13ce Date: Mon, 4 Mar 2024 10:30:26 +0100 Subject: [PATCH 29/39] Speed up group name handling --- frontend/components/dashboard/chart/SummaryChart.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/components/dashboard/chart/SummaryChart.vue b/frontend/components/dashboard/chart/SummaryChart.vue index 5c08bdb3c..eda392280 100644 --- a/frontend/components/dashboard/chart/SummaryChart.vue +++ b/frontend/components/dashboard/chart/SummaryChart.vue @@ -62,9 +62,9 @@ const option = computed(() => { const series: SeriesObject[] = [] if (chartData.value?.series) { + const allGroups = $t('dashboard.validator.summary.chart.all_groups') chartData.value.series.forEach((element) => { - let name = $t('dashboard.validator.summary.chart.all_groups') - + let name = allGroups if (element.id !== -1) { const group = overview.value?.groups.find(group => group.id === element.id) name = group?.name || element.id.toString() From 9580ac13242cb48b3b758e9041220927eb17bdf8 Mon Sep 17 00:00:00 2001 From: D13ce Date: Mon, 4 Mar 2024 11:17:52 +0100 Subject: [PATCH 30/39] Use translation in SummaryChartTooltip --- frontend/components/dashboard/chart/SummaryChart.vue | 3 ++- frontend/components/dashboard/chart/SummaryChartTooltip.vue | 4 +++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/frontend/components/dashboard/chart/SummaryChart.vue b/frontend/components/dashboard/chart/SummaryChart.vue index eda392280..70910f926 100644 --- a/frontend/components/dashboard/chart/SummaryChart.vue +++ b/frontend/components/dashboard/chart/SummaryChart.vue @@ -11,6 +11,7 @@ import { DataZoomComponent } from 'echarts/components' import VChart from 'vue-echarts' +import { useI18n } from 'vue-i18n' import SummaryChartTooltip from './SummaryChartTooltip.vue' import { formatTs } from '~/utils/format' import { useValidatorDashboardOverview } from '~/stores/dashboard/useValidatorDashboardOverviewStore' @@ -154,7 +155,7 @@ const option = computed(() => { }) const d = document.createElement('div') - render(h(SummaryChartTooltip, { startEpoch, groupInfos }), d) + render(h(SummaryChartTooltip, { t: $t, startEpoch, groupInfos }), d) return d } }, diff --git a/frontend/components/dashboard/chart/SummaryChartTooltip.vue b/frontend/components/dashboard/chart/SummaryChartTooltip.vue index cf682b3ac..8c76a2409 100644 --- a/frontend/components/dashboard/chart/SummaryChartTooltip.vue +++ b/frontend/components/dashboard/chart/SummaryChartTooltip.vue @@ -1,7 +1,9 @@ From 4501a2376d789fa8df69cc3fd4a96a938fce2ba4 Mon Sep 17 00:00:00 2001 From: D13ce Date: Mon, 4 Mar 2024 12:30:20 +0100 Subject: [PATCH 31/39] Use customFetch for chart --- .../dashboard/chart/SummaryChart.vue | 22 +++++++++++-------- .../dashboard/table/DashboardTableSummary.vue | 2 +- .../playground/PlaygroundCharts.vue | 2 +- frontend/composables/useCustomFetch.ts | 6 +++++ .../useValidatorDashboardSummaryChart.ts | 14 ++++++++++++ 5 files changed, 35 insertions(+), 11 deletions(-) create mode 100644 frontend/stores/dashboard/useValidatorDashboardSummaryChart.ts diff --git a/frontend/components/dashboard/chart/SummaryChart.vue b/frontend/components/dashboard/chart/SummaryChart.vue index 70910f926..bc7501a8e 100644 --- a/frontend/components/dashboard/chart/SummaryChart.vue +++ b/frontend/components/dashboard/chart/SummaryChart.vue @@ -17,8 +17,6 @@ import { formatTs } from '~/utils/format' import { useValidatorDashboardOverview } from '~/stores/dashboard/useValidatorDashboardOverviewStore' import { getSummaryChartGroupColors, getSummaryChartTextColor } from '~/utils/colors' -import { type ChartData } from '~/types/api/common' - use([ CanvasRenderer, LineChart, @@ -28,18 +26,24 @@ use([ GridComponent ]) +interface Props { + dashboardId : number +} +const props = defineProps() + +const store = useValidatorDashboardSummaryChartStore() +const { getDashboardSummaryChart } = store +const { chartData } = storeToRefs(store) + +watch(props, () => { + getDashboardSummaryChart(props.dashboardId) +}, { immediate: true }) + const { overview } = storeToRefs(useValidatorDashboardOverview()) const { t: $t } = useI18n() const colorMode = useColorMode() -const chartData = ref | null>(null) - -onMounted(async () => { - const res = await $fetch>('./mock/dashboard/summaryChart.json') - chartData.value = res -}) - const groupColors = ref() const labelColor = ref() diff --git a/frontend/components/dashboard/table/DashboardTableSummary.vue b/frontend/components/dashboard/table/DashboardTableSummary.vue index 2d2b4a798..36afdc6f0 100644 --- a/frontend/components/dashboard/table/DashboardTableSummary.vue +++ b/frontend/components/dashboard/table/DashboardTableSummary.vue @@ -182,7 +182,7 @@ const getRowClass = (row: VDBSummaryTableRow) => { diff --git a/frontend/components/playground/PlaygroundCharts.vue b/frontend/components/playground/PlaygroundCharts.vue index b172d8377..9feca9537 100644 --- a/frontend/components/playground/PlaygroundCharts.vue +++ b/frontend/components/playground/PlaygroundCharts.vue @@ -4,7 +4,7 @@ import SummaryChart from '../dashboard/chart/SummaryChart.vue' diff --git a/frontend/composables/useCustomFetch.ts b/frontend/composables/useCustomFetch.ts index 6a3bded16..ad6e50420 100644 --- a/frontend/composables/useCustomFetch.ts +++ b/frontend/composables/useCustomFetch.ts @@ -6,6 +6,7 @@ export enum API_PATH { AD_CONFIGURATIONs = '/adConfigurations', DASHBOARD_SUMMARY = '/dashboard/validatorSummary', DASHBOARD_SUMMARY_DETAILS = '/dashboard/validatorSummaryDetails', + DASHBOARD_SUMMARY_CHART = '/dashboard/summaryChart', DASHBOARD_OVERVIEW = '/dashboard/overview', DASHBOARD_SLOTVIZ = '/dashboard/slotViz', LATEST_STATE = '/latestState', @@ -50,6 +51,11 @@ const mapping: Record = { getPath: values => `/validator-dashboards/${values?.dashboardId}/summary`, mock: true }, + [API_PATH.DASHBOARD_SUMMARY_CHART]: { + path: '/validator-dashboards/{dashboard_id}/summary-chart?', + getPath: values => `/validator-dashboards/${values?.dashboardId}/summary-chart`, + mock: true + }, [API_PATH.DASHBOARD_OVERVIEW]: { path: '/validator-dashboards/{dashboard_id}', getPath: values => `/validator-dashboards/${values?.validatorId}`, diff --git a/frontend/stores/dashboard/useValidatorDashboardSummaryChart.ts b/frontend/stores/dashboard/useValidatorDashboardSummaryChart.ts new file mode 100644 index 000000000..0ee48b122 --- /dev/null +++ b/frontend/stores/dashboard/useValidatorDashboardSummaryChart.ts @@ -0,0 +1,14 @@ +import { defineStore } from 'pinia' +import { useCustomFetch } from '~/composables/useCustomFetch' +import { type ChartData } from '~/types/api/common' + +export const useValidatorDashboardSummaryChartStore = defineStore('useValidatorDashboardSummaryChartStore', () => { + const chartData = ref | undefined >() + + async function getDashboardSummaryChart (dashboardId: number) { + chartData.value = await useCustomFetch>(API_PATH.DASHBOARD_SUMMARY_CHART, undefined, { dashboardId }) + return chartData.value + } + + return { chartData, getDashboardSummaryChart } +}) From d98d3cf316d206dbdb8b01654e2540e914d429c5 Mon Sep 17 00:00:00 2001 From: D13ce Date: Mon, 4 Mar 2024 12:35:37 +0100 Subject: [PATCH 32/39] Improve color handling --- .../dashboard/chart/SummaryChart.vue | 27 +++++++++---------- 1 file changed, 13 insertions(+), 14 deletions(-) diff --git a/frontend/components/dashboard/chart/SummaryChart.vue b/frontend/components/dashboard/chart/SummaryChart.vue index bc7501a8e..296deb3f8 100644 --- a/frontend/components/dashboard/chart/SummaryChart.vue +++ b/frontend/components/dashboard/chart/SummaryChart.vue @@ -44,13 +44,12 @@ const { overview } = storeToRefs(useValidatorDashboardOverview()) const { t: $t } = useI18n() const colorMode = useColorMode() -const groupColors = ref() -const labelColor = ref() - -watch(colorMode, (newColorMode) => { - groupColors.value = getSummaryChartGroupColors(newColorMode.value) - labelColor.value = getSummaryChartTextColor(newColorMode.value) -}, { immediate: true }) +const colors = computed(() => { + return { + groups: getSummaryChartGroupColors(colorMode.value), + label: getSummaryChartTextColor(colorMode.value) + } +}) const styles = window.getComputedStyle(document.documentElement) const fontFamily = styles.getPropertyValue('--roboto-family') @@ -119,7 +118,7 @@ const option = computed(() => { }, splitLine: { lineStyle: { - color: labelColor.value + color: colors.value.label } } }, @@ -128,15 +127,15 @@ const option = computed(() => { fontFamily, fontSize: textSize, fontWeight: fontWeightLight, - color: labelColor.value + color: colors.value.label }, - color: groupColors.value, + color: colors.value.groups, legend: { type: 'scroll', orient: 'horizontal', bottom: 65, textStyle: { - color: labelColor.value, + color: colors.value.label, fontSize: textSize, fontWeight: fontWeightMedium } @@ -169,13 +168,13 @@ const option = computed(() => { end: 100, dataBackground: { lineStyle: { - color: labelColor.value + color: colors.value.label }, areaStyle: { - color: labelColor.value + color: colors.value.label } }, - borderColor: labelColor.value + borderColor: colors.value.label } } }) From 90441eb20824630c31fb3c083247e276ecae6f40 Mon Sep 17 00:00:00 2001 From: D13ce Date: Mon, 4 Mar 2024 12:51:08 +0100 Subject: [PATCH 33/39] Use locales to format date strings --- frontend/components/dashboard/chart/SummaryChart.vue | 3 +-- frontend/components/dashboard/chart/SummaryChartTooltip.vue | 2 +- frontend/i18n/en.json | 3 +++ frontend/utils/format.ts | 4 ++-- 4 files changed, 7 insertions(+), 5 deletions(-) diff --git a/frontend/components/dashboard/chart/SummaryChart.vue b/frontend/components/dashboard/chart/SummaryChart.vue index 296deb3f8..3c978d502 100644 --- a/frontend/components/dashboard/chart/SummaryChart.vue +++ b/frontend/components/dashboard/chart/SummaryChart.vue @@ -11,7 +11,6 @@ import { DataZoomComponent } from 'echarts/components' import VChart from 'vue-echarts' -import { useI18n } from 'vue-i18n' import SummaryChartTooltip from './SummaryChartTooltip.vue' import { formatTs } from '~/utils/format' import { useValidatorDashboardOverview } from '~/stores/dashboard/useValidatorDashboardOverviewStore' @@ -98,7 +97,7 @@ const option = computed(() => { return '' } - const date = formatTs(ts) + const date = formatTs(ts, $t('locales.date')) return `${date}\nEpoch ${value}` } } diff --git a/frontend/components/dashboard/chart/SummaryChartTooltip.vue b/frontend/components/dashboard/chart/SummaryChartTooltip.vue index 8c76a2409..da961016a 100644 --- a/frontend/components/dashboard/chart/SummaryChartTooltip.vue +++ b/frontend/components/dashboard/chart/SummaryChartTooltip.vue @@ -20,7 +20,7 @@ const dateText = computed(() => { return undefined } - const date = formatTs(ts) + const date = formatTs(ts, props.t('locales.date')) return `${date}` }) diff --git a/frontend/i18n/en.json b/frontend/i18n/en.json index 3869783dc..db57f0500 100644 --- a/frontend/i18n/en.json +++ b/frontend/i18n/en.json @@ -1,4 +1,7 @@ { + "locales" : { + "date": "en-US" + }, "common": { "epoch": "Epoch", "slot": "Slot", diff --git a/frontend/utils/format.ts b/frontend/utils/format.ts index 35d6a17a0..87fabbbae 100644 --- a/frontend/utils/format.ts +++ b/frontend/utils/format.ts @@ -85,11 +85,11 @@ export function trim (value:string, maxDecimalCount: number, minDecimalCount?: n return `${left}.${dec}` } -export function formatTs (ts: number): string { +export function formatTs (ts: number, locales: string): string { const options: Intl.DateTimeFormatOptions = { month: 'short', day: 'numeric', year: 'numeric' } - return new Date(ts * 1000).toLocaleDateString(undefined, options) + return new Date(ts * 1000).toLocaleDateString(locales, options) } From be4e7b26dea2d9faff5ecd4946246a607a48d1d8 Mon Sep 17 00:00:00 2001 From: D13ce Date: Mon, 4 Mar 2024 13:40:14 +0100 Subject: [PATCH 34/39] Use InternalGetValidatorDashboardSummaryChartResponse --- frontend/composables/useCustomFetch.ts | 2 +- .../public/mock/dashboard/summaryChart.json | 197 ----------------- .../mock/dashboard/validatorSummaryChart.json | 199 ++++++++++++++++++ .../useValidatorDashboardSummaryChart.ts | 4 +- 4 files changed, 203 insertions(+), 199 deletions(-) delete mode 100644 frontend/public/mock/dashboard/summaryChart.json create mode 100644 frontend/public/mock/dashboard/validatorSummaryChart.json diff --git a/frontend/composables/useCustomFetch.ts b/frontend/composables/useCustomFetch.ts index ad6e50420..d7f2e9fbd 100644 --- a/frontend/composables/useCustomFetch.ts +++ b/frontend/composables/useCustomFetch.ts @@ -6,7 +6,7 @@ export enum API_PATH { AD_CONFIGURATIONs = '/adConfigurations', DASHBOARD_SUMMARY = '/dashboard/validatorSummary', DASHBOARD_SUMMARY_DETAILS = '/dashboard/validatorSummaryDetails', - DASHBOARD_SUMMARY_CHART = '/dashboard/summaryChart', + DASHBOARD_SUMMARY_CHART = '/dashboard/validatorSummaryChart', DASHBOARD_OVERVIEW = '/dashboard/overview', DASHBOARD_SLOTVIZ = '/dashboard/slotViz', LATEST_STATE = '/latestState', diff --git a/frontend/public/mock/dashboard/summaryChart.json b/frontend/public/mock/dashboard/summaryChart.json deleted file mode 100644 index 99bb8db4a..000000000 --- a/frontend/public/mock/dashboard/summaryChart.json +++ /dev/null @@ -1,197 +0,0 @@ -{ - "categories": [10000, 10001, 10002, 10003, 10004, 10005, 10006, 10007, 10008, 10009, 10010, 10011, 10012, 10013, 10014, 10015, 10016, 10017, 10018, 10019, 10020, 10021, 10022, 10023, 10024, 10025, 10026, 10027, 10028, 10029, 10030, 10031, 10032, 10033, 10034, 10035, 10036, 10037, 10038, 10039, 10040, 10041, 10042, 10043, 10044, 10045, 10046, 10047, 10048, 10049], - "series": [ - { - "id": -1, - "data": [68, 41, 47, 44, 54, 32, 54, 56, 69, 40, 28, 51, 18, 30, 26, 47, 52, 49, 47, 70, 48, 35, 61, 34, 29, 44, 56, 50, 55, 61, 43, 35, 31, 23, 32, 32, 25, 41, 46, 31, 50, 38, 37, 41, 60, 57, 42, 42, 63, 43] - }, - { - "id": 0, - "data": [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 90, 80, 70, 60, 50, 40, 30, 20, 10, 0, 5, 0, 5, 0, 10, 20, 30, 40, 50, 60, 70, 80, 85, 90, 95, 97.5, 98, 98.25, 98.5, 98.75, 99, 99.1, 99.15, 99.175, 99.2, 99.201, 99.2015, 100, 100] - }, - { - "id": 1, - "data": [87, 3, 72, 24, 37, 12, 51, 63, 95, 45, 9, 33, 32, 80, 96, 41, 2, 71, 4, 90, 36, 53, 16, 17, 5, 17, 21, 74, 49, 52, 81, 67, 28, 7, 41, 5, 13, 74, 34, 47, 7, 97, 54, 62, 42, 42, 95, 22, 38, 53] - }, - { - "id": 2, - "data": [84, 60, 16, 94, 7, 8, 88, 89, 24, 34, 38, 59, 59, 64, 0, 48, 91, 38, 5, 93, 16, 71, 67, 7, 4, 68, 66, 54, 73, 91, 35, 28, 6, 42, 51, 5, 38, 7, 85, 99, 17, 38, 13, 46, 29, 69, 94, 10, 62, 82] - }, - { - "id": 3, - "data": [84, 60, 16, 94, 7, 8, 88, 89, 24, 34, 38, 59, 59, 64, 0, 48, 91, 38, 5, 93, 16, 71, 67, 7, 4, 68, 66, 54, 73, 91, 35, 28, 6, 42, 51, 5, 38, 7, 85, 99, 17, 38, 13, 46, 29, 69, 94, 10, 62, 42] - }, - { - "id": 4, - "data": [77, 30, 96, 34, 90, 77, 53, 40, 80, 67, 0, 36, 17, 16, 16, 57, 90, 71, 77, 88, 70, 83, 10, 58, 34, 22, 60, 22, 44, 33, 28, 47, 41, 36, 71, 61, 21, 2, 19, 16, 11, 49, 52, 68, 89, 92, 89, 92, 100, 100] - }, - { - "id": 5, - "data": [90, 44, 35, 12, 92, 45, 11, 46, 91, 17, 49, 77, 4, 22, 27, 27, 17, 1, 47, 50, 49, 11, 69, 42, 28, 63, 23, 29, 99, 82, 80, 32, 25, 25, 17, 0, 51, 25, 9, 82, 52, 84, 42, 49, 79, 26, 12, 4, 71, 80] - }, - { - "id": 6, - "data": [72, 41, 47, 35, 53, 27, 48, 46, 59, 38, 47, 51, 15, 22, 21, 52, 67, 56, 47, 72, 51, 28, 67, 47, 36, 46, 42, 64, 67, 68, 51, 38, 39, 35, 18, 21, 29, 18, 25, 40, 47, 57, 44, 46, 50, 32, 44, 37, 25, 20] - }, - { - "id": 9, - "data": [58, 41, 47, 44, 54, 32, 54, 56, 69, 40, 28, 51, 18, 30, 26, 47, 52, 49, 47, 70, 48, 35, 61, 34, 29, 44, 56, 50, 55, 61, 43, 35, 31, 23, 32, 32, 25, 41, 46, 31, 50, 38, 37, 41, 60, 57, 42, 42, 63, 43] - }, - { - "id": 10, - "data": [0, 11, 20, 30, 40, 50, 60, 70, 80, 90, 100, 90, 80, 70, 60, 50, 40, 30, 20, 10, 0, 5, 0, 5, 0, 10, 20, 30, 40, 50, 60, 70, 80, 85, 90, 95, 97.5, 98, 98.25, 98.5, 98.75, 99, 99.1, 99.15, 99.175, 99.2, 99.201, 99.2015, 100, 100] - }, - { - "id": 11, - "data": [84, 13, 72, 24, 37, 12, 51, 63, 95, 45, 9, 33, 32, 80, 96, 41, 2, 71, 4, 90, 36, 53, 16, 17, 5, 17, 21, 74, 49, 52, 81, 67, 28, 7, 41, 5, 13, 74, 34, 47, 7, 97, 54, 62, 42, 42, 95, 22, 38, 53] - }, - { - "id": 12, - "data": [84, 6, 16, 94, 7, 8, 88, 89, 24, 34, 38, 59, 59, 64, 0, 48, 91, 38, 5, 93, 16, 71, 67, 7, 4, 68, 66, 54, 73, 91, 35, 28, 6, 42, 51, 5, 38, 7, 85, 99, 17, 38, 13, 46, 29, 69, 94, 10, 62, 82] - }, - { - "id": 13, - "data": [84, 60, 16, 94, 7, 8, 88, 89, 24, 34, 38, 59, 59, 64, 0, 48, 91, 38, 5, 93, 16, 71, 67, 7, 4, 68, 66, 54, 73, 91, 35, 28, 6, 42, 51, 5, 38, 7, 85, 99, 17, 38, 13, 46, 29, 69, 94, 10, 62, 42] - }, - { - "id": 14, - "data": [77, 30, 96, 34, 90, 77, 53, 40, 80, 67, 0, 36, 17, 16, 16, 57, 90, 71, 77, 88, 70, 83, 10, 58, 34, 22, 60, 22, 44, 33, 28, 47, 41, 36, 71, 61, 21, 2, 19, 16, 11, 49, 52, 68, 89, 92, 89, 92, 100, 100] - }, - { - "id": 15, - "data": [90, 44, 35, 12, 92, 45, 11, 46, 91, 17, 49, 77, 4, 22, 27, 27, 17, 1, 47, 50, 49, 11, 69, 42, 28, 63, 23, 29, 99, 82, 80, 32, 25, 25, 17, 0, 51, 25, 9, 82, 52, 84, 42, 49, 79, 26, 12, 4, 71, 80] - }, - { - "id": 16, - "data": [72, 41, 47, 35, 53, 27, 48, 46, 59, 38, 47, 51, 15, 22, 21, 52, 67, 56, 47, 72, 51, 28, 67, 47, 36, 46, 42, 64, 67, 68, 51, 38, 39, 35, 18, 21, 29, 18, 25, 40, 47, 57, 44, 46, 50, 32, 44, 37, 25, 20] - }, - { - "id": 19, - "data": [68, 40, 47, 44, 54, 32, 54, 56, 69, 40, 28, 51, 18, 30, 26, 47, 52, 49, 47, 70, 48, 35, 61, 34, 29, 44, 56, 50, 55, 61, 43, 35, 31, 23, 32, 32, 25, 41, 46, 31, 50, 38, 37, 41, 60, 57, 42, 42, 63, 43] - }, - { - "id": 20, - "data": [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 90, 80, 70, 60, 50, 40, 30, 20, 10, 0, 5, 0, 5, 0, 10, 20, 30, 40, 50, 60, 70, 80, 85, 90, 95, 97.5, 98, 98.25, 98.5, 98.75, 99, 99.1, 99.15, 99.175, 99.2, 99.201, 99.2015, 100, 100] - }, - { - "id": 21, - "data": [87, 3, 72, 24, 37, 12, 51, 63, 95, 45, 9, 33, 32, 80, 96, 41, 2, 71, 4, 90, 36, 53, 16, 17, 5, 17, 21, 74, 49, 52, 81, 67, 28, 7, 41, 5, 13, 74, 34, 47, 7, 97, 54, 62, 42, 42, 95, 22, 38, 53] - }, - { - "id": 22, - "data": [84, 60, 16, 94, 7, 8, 88, 89, 24, 34, 38, 59, 59, 64, 0, 48, 91, 38, 5, 93, 16, 71, 67, 7, 4, 68, 66, 54, 73, 91, 35, 28, 6, 42, 51, 5, 38, 7, 85, 99, 17, 38, 13, 46, 29, 69, 94, 10, 62, 82] - }, - { - "id": 23, - "data": [84, 60, 16, 94, 7, 8, 88, 89, 24, 34, 38, 59, 59, 64, 0, 48, 91, 38, 5, 93, 16, 71, 67, 7, 4, 68, 66, 54, 73, 91, 35, 28, 6, 42, 51, 5, 38, 7, 85, 99, 17, 38, 13, 46, 29, 69, 94, 10, 62, 42] - }, - { - "id": 24, - "data": [77, 30, 96, 34, 90, 77, 53, 40, 80, 67, 0, 36, 17, 16, 16, 57, 90, 71, 77, 88, 70, 83, 10, 58, 34, 22, 60, 22, 44, 33, 28, 47, 41, 36, 71, 61, 21, 2, 19, 16, 11, 49, 52, 68, 89, 92, 89, 92, 100, 100] - }, - { - "id": 25, - "data": [90, 44, 35, 12, 92, 45, 11, 46, 91, 17, 49, 77, 4, 22, 27, 27, 17, 1, 47, 50, 49, 11, 69, 42, 28, 63, 23, 29, 99, 82, 80, 32, 25, 25, 17, 0, 51, 25, 9, 82, 52, 84, 42, 49, 79, 26, 12, 4, 71, 80] - }, - { - "id": 26, - "data": [72, 41, 47, 35, 53, 27, 48, 46, 59, 38, 47, 51, 15, 22, 21, 52, 67, 56, 47, 72, 51, 28, 67, 47, 36, 46, 42, 64, 67, 68, 51, 38, 39, 35, 18, 21, 29, 18, 25, 40, 47, 57, 44, 46, 50, 32, 44, 37, 25, 20] - }, - { - "id": 29, - "data": [68, 40, 47, 44, 54, 32, 54, 56, 69, 40, 28, 51, 18, 30, 26, 47, 52, 49, 47, 70, 48, 35, 61, 34, 29, 44, 56, 50, 55, 61, 43, 35, 31, 23, 32, 32, 25, 41, 46, 31, 50, 38, 37, 41, 60, 57, 42, 42, 63, 43] - }, - { - "id": 30, - "data": [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 90, 80, 70, 60, 50, 40, 30, 20, 10, 0, 5, 0, 5, 0, 10, 20, 30, 40, 50, 60, 70, 80, 85, 90, 95, 97.5, 98, 98.25, 98.5, 98.75, 99, 99.1, 99.15, 99.175, 99.2, 99.201, 99.2015, 100, 100] - }, - { - "id": 31, - "data": [87, 3, 72, 24, 37, 12, 51, 63, 95, 45, 9, 33, 32, 80, 96, 41, 2, 71, 4, 90, 36, 53, 16, 17, 5, 17, 21, 74, 49, 52, 81, 67, 28, 7, 41, 5, 13, 74, 34, 47, 7, 97, 54, 62, 42, 42, 95, 22, 38, 53] - }, - { - "id": 32, - "data": [84, 60, 16, 94, 7, 8, 88, 89, 24, 34, 38, 59, 59, 64, 0, 48, 91, 38, 5, 93, 16, 71, 67, 7, 4, 68, 66, 54, 73, 91, 35, 28, 6, 42, 51, 5, 38, 7, 85, 99, 17, 38, 13, 46, 29, 69, 94, 10, 62, 82] - }, - { - "id": 33, - "data": [84, 60, 16, 94, 7, 8, 88, 89, 24, 34, 38, 59, 59, 64, 0, 48, 91, 38, 5, 93, 16, 71, 67, 7, 4, 68, 66, 54, 73, 91, 35, 28, 6, 42, 51, 5, 38, 7, 85, 99, 17, 38, 13, 46, 29, 69, 94, 10, 62, 42] - }, - { - "id": 34, - "data": [77, 30, 96, 34, 90, 77, 53, 40, 80, 67, 0, 36, 17, 16, 16, 57, 90, 71, 77, 88, 70, 83, 10, 58, 34, 22, 60, 22, 44, 33, 28, 47, 41, 36, 71, 61, 21, 2, 19, 16, 11, 49, 52, 68, 89, 92, 89, 92, 100, 100] - }, - { - "id": 35, - "data": [90, 44, 35, 12, 92, 45, 11, 46, 91, 17, 49, 77, 4, 22, 27, 27, 17, 1, 47, 50, 49, 11, 69, 42, 28, 63, 23, 29, 99, 82, 80, 32, 25, 25, 17, 0, 51, 25, 9, 82, 52, 84, 42, 49, 79, 26, 12, 4, 71, 80] - }, - { - "id": 36, - "data": [72, 41, 47, 35, 53, 27, 48, 46, 59, 38, 47, 51, 15, 22, 21, 52, 67, 56, 47, 72, 51, 28, 67, 47, 36, 46, 42, 64, 67, 68, 51, 38, 39, 35, 18, 21, 29, 18, 25, 40, 47, 57, 44, 46, 50, 32, 44, 37, 25, 20] - }, - { - "id": 39, - "data": [68, 40, 47, 44, 54, 32, 54, 56, 69, 40, 28, 51, 18, 30, 26, 47, 52, 49, 47, 70, 48, 35, 61, 34, 29, 44, 56, 50, 55, 61, 43, 35, 31, 23, 32, 32, 25, 41, 46, 31, 50, 38, 37, 41, 60, 57, 42, 42, 63, 43] - }, - { - "id": 40, - "data": [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 90, 80, 70, 60, 50, 40, 30, 20, 10, 0, 5, 0, 5, 0, 10, 20, 30, 40, 50, 60, 70, 80, 85, 90, 95, 97.5, 98, 98.25, 98.5, 98.75, 99, 99.1, 99.15, 99.175, 99.2, 99.201, 99.2015, 100, 100] - }, - { - "id": 41, - "data": [87, 3, 72, 24, 37, 12, 51, 63, 95, 45, 9, 33, 32, 80, 96, 41, 2, 71, 4, 90, 36, 53, 16, 17, 5, 17, 21, 74, 49, 52, 81, 67, 28, 7, 41, 5, 13, 74, 34, 47, 7, 97, 54, 62, 42, 42, 95, 22, 38, 53] - }, - { - "id": 42, - "data": [84, 60, 16, 94, 7, 8, 88, 89, 24, 34, 38, 59, 59, 64, 0, 48, 91, 38, 5, 93, 16, 71, 67, 7, 4, 68, 66, 54, 73, 91, 35, 28, 6, 42, 51, 5, 38, 7, 85, 99, 17, 38, 13, 46, 29, 69, 94, 10, 62, 82] - }, - { - "id": 43, - "data": [84, 60, 16, 94, 7, 8, 88, 89, 24, 34, 38, 59, 59, 64, 0, 48, 91, 38, 5, 93, 16, 71, 67, 7, 4, 68, 66, 54, 73, 91, 35, 28, 6, 42, 51, 5, 38, 7, 85, 99, 17, 38, 13, 46, 29, 69, 94, 10, 62, 42] - }, - { - "id": 44, - "data": [77, 30, 96, 34, 90, 77, 53, 40, 80, 67, 0, 36, 17, 16, 16, 57, 90, 71, 77, 88, 70, 83, 10, 58, 34, 22, 60, 22, 44, 33, 28, 47, 41, 36, 71, 61, 21, 2, 19, 16, 11, 49, 52, 68, 89, 92, 89, 92, 100, 100] - }, - { - "id": 45, - "data": [90, 44, 35, 12, 92, 45, 11, 46, 91, 17, 49, 77, 4, 22, 27, 27, 17, 1, 47, 50, 49, 11, 69, 42, 28, 63, 23, 29, 99, 82, 80, 32, 25, 25, 17, 0, 51, 25, 9, 82, 52, 84, 42, 49, 79, 26, 12, 4, 71, 80] - }, - { - "id": 46, - "data": [72, 41, 47, 35, 53, 27, 48, 46, 59, 38, 47, 51, 15, 22, 21, 52, 67, 56, 47, 72, 51, 28, 67, 47, 36, 46, 42, 64, 67, 68, 51, 38, 39, 35, 18, 21, 29, 18, 25, 40, 47, 57, 44, 46, 50, 32, 44, 37, 25, 20] - }, - { - "id": 49, - "data": [68, 40, 47, 44, 54, 32, 54, 56, 69, 40, 28, 51, 18, 30, 26, 47, 52, 49, 47, 70, 48, 35, 61, 34, 29, 44, 56, 50, 55, 61, 43, 35, 31, 23, 32, 32, 25, 41, 46, 31, 50, 38, 37, 41, 60, 57, 42, 42, 63, 43] - }, - { - "id": 50, - "data": [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 90, 80, 70, 60, 50, 40, 30, 20, 10, 0, 5, 0, 5, 0, 10, 20, 30, 40, 50, 60, 70, 80, 85, 90, 95, 97.5, 98, 98.25, 98.5, 98.75, 99, 99.1, 99.15, 99.175, 99.2, 99.201, 99.2015, 100, 100] - }, - { - "id": 51, - "data": [87, 3, 72, 24, 37, 12, 51, 63, 95, 45, 9, 33, 32, 80, 96, 41, 2, 71, 4, 90, 36, 53, 16, 17, 5, 17, 21, 74, 49, 52, 81, 67, 28, 7, 41, 5, 13, 74, 34, 47, 7, 97, 54, 62, 42, 42, 95, 22, 38, 53] - }, - { - "id": 52, - "data": [84, 60, 16, 94, 7, 8, 88, 89, 24, 34, 38, 59, 59, 64, 0, 48, 91, 38, 5, 93, 16, 71, 67, 7, 4, 68, 66, 54, 73, 91, 35, 28, 6, 42, 51, 5, 38, 7, 85, 99, 17, 38, 13, 46, 29, 69, 94, 10, 62, 82] - }, - { - "id": 53, - "data": [84, 60, 16, 94, 7, 8, 88, 89, 24, 34, 38, 59, 59, 64, 0, 48, 91, 38, 5, 93, 16, 71, 67, 7, 4, 68, 66, 54, 73, 91, 35, 28, 6, 42, 51, 5, 38, 7, 85, 99, 17, 38, 13, 46, 29, 69, 94, 10, 62, 42] - }, - { - "id": 54, - "data": [77, 30, 96, 34, 90, 77, 53, 40, 80, 67, 0, 36, 17, 16, 16, 57, 90, 71, 77, 88, 70, 83, 10, 58, 34, 22, 60, 22, 44, 33, 28, 47, 41, 36, 71, 61, 21, 2, 19, 16, 11, 49, 52, 68, 89, 92, 89, 92, 100, 100] - }, - { - "id": 55, - "data": [90, 44, 35, 12, 92, 45, 11, 46, 91, 17, 49, 77, 4, 22, 27, 27, 17, 1, 47, 50, 49, 11, 69, 42, 28, 63, 23, 29, 99, 82, 80, 32, 25, 25, 17, 0, 51, 25, 9, 82, 52, 84, 42, 49, 79, 26, 12, 4, 71, 80] - }, - { - "id": 56, - "data": [72, 41, 47, 35, 53, 27, 48, 46, 59, 38, 47, 51, 15, 22, 21, 52, 67, 56, 47, 72, 51, 28, 67, 47, 36, 46, 42, 64, 67, 68, 51, 38, 39, 35, 18, 21, 29, 18, 25, 40, 47, 57, 44, 46, 50, 32, 44, 37, 25, 20] - } - ] -} \ No newline at end of file diff --git a/frontend/public/mock/dashboard/validatorSummaryChart.json b/frontend/public/mock/dashboard/validatorSummaryChart.json new file mode 100644 index 000000000..a2ba9efa6 --- /dev/null +++ b/frontend/public/mock/dashboard/validatorSummaryChart.json @@ -0,0 +1,199 @@ +{ + "data": { + "categories": [10000, 10001, 10002, 10003, 10004, 10005, 10006, 10007, 10008, 10009, 10010, 10011, 10012, 10013, 10014, 10015, 10016, 10017, 10018, 10019, 10020, 10021, 10022, 10023, 10024, 10025, 10026, 10027, 10028, 10029, 10030, 10031, 10032, 10033, 10034, 10035, 10036, 10037, 10038, 10039, 10040, 10041, 10042, 10043, 10044, 10045, 10046, 10047, 10048, 10049], + "series": [ + { + "id": -1, + "data": [68, 41, 47, 44, 54, 32, 54, 56, 69, 40, 28, 51, 18, 30, 26, 47, 52, 49, 47, 70, 48, 35, 61, 34, 29, 44, 56, 50, 55, 61, 43, 35, 31, 23, 32, 32, 25, 41, 46, 31, 50, 38, 37, 41, 60, 57, 42, 42, 63, 43] + }, + { + "id": 0, + "data": [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 90, 80, 70, 60, 50, 40, 30, 20, 10, 0, 5, 0, 5, 0, 10, 20, 30, 40, 50, 60, 70, 80, 85, 90, 95, 97.5, 98, 98.25, 98.5, 98.75, 99, 99.1, 99.15, 99.175, 99.2, 99.201, 99.2015, 100, 100] + }, + { + "id": 1, + "data": [87, 3, 72, 24, 37, 12, 51, 63, 95, 45, 9, 33, 32, 80, 96, 41, 2, 71, 4, 90, 36, 53, 16, 17, 5, 17, 21, 74, 49, 52, 81, 67, 28, 7, 41, 5, 13, 74, 34, 47, 7, 97, 54, 62, 42, 42, 95, 22, 38, 53] + }, + { + "id": 2, + "data": [84, 60, 16, 94, 7, 8, 88, 89, 24, 34, 38, 59, 59, 64, 0, 48, 91, 38, 5, 93, 16, 71, 67, 7, 4, 68, 66, 54, 73, 91, 35, 28, 6, 42, 51, 5, 38, 7, 85, 99, 17, 38, 13, 46, 29, 69, 94, 10, 62, 82] + }, + { + "id": 3, + "data": [84, 60, 16, 94, 7, 8, 88, 89, 24, 34, 38, 59, 59, 64, 0, 48, 91, 38, 5, 93, 16, 71, 67, 7, 4, 68, 66, 54, 73, 91, 35, 28, 6, 42, 51, 5, 38, 7, 85, 99, 17, 38, 13, 46, 29, 69, 94, 10, 62, 42] + }, + { + "id": 4, + "data": [77, 30, 96, 34, 90, 77, 53, 40, 80, 67, 0, 36, 17, 16, 16, 57, 90, 71, 77, 88, 70, 83, 10, 58, 34, 22, 60, 22, 44, 33, 28, 47, 41, 36, 71, 61, 21, 2, 19, 16, 11, 49, 52, 68, 89, 92, 89, 92, 100, 100] + }, + { + "id": 5, + "data": [90, 44, 35, 12, 92, 45, 11, 46, 91, 17, 49, 77, 4, 22, 27, 27, 17, 1, 47, 50, 49, 11, 69, 42, 28, 63, 23, 29, 99, 82, 80, 32, 25, 25, 17, 0, 51, 25, 9, 82, 52, 84, 42, 49, 79, 26, 12, 4, 71, 80] + }, + { + "id": 6, + "data": [72, 41, 47, 35, 53, 27, 48, 46, 59, 38, 47, 51, 15, 22, 21, 52, 67, 56, 47, 72, 51, 28, 67, 47, 36, 46, 42, 64, 67, 68, 51, 38, 39, 35, 18, 21, 29, 18, 25, 40, 47, 57, 44, 46, 50, 32, 44, 37, 25, 20] + }, + { + "id": 9, + "data": [58, 41, 47, 44, 54, 32, 54, 56, 69, 40, 28, 51, 18, 30, 26, 47, 52, 49, 47, 70, 48, 35, 61, 34, 29, 44, 56, 50, 55, 61, 43, 35, 31, 23, 32, 32, 25, 41, 46, 31, 50, 38, 37, 41, 60, 57, 42, 42, 63, 43] + }, + { + "id": 10, + "data": [0, 11, 20, 30, 40, 50, 60, 70, 80, 90, 100, 90, 80, 70, 60, 50, 40, 30, 20, 10, 0, 5, 0, 5, 0, 10, 20, 30, 40, 50, 60, 70, 80, 85, 90, 95, 97.5, 98, 98.25, 98.5, 98.75, 99, 99.1, 99.15, 99.175, 99.2, 99.201, 99.2015, 100, 100] + }, + { + "id": 11, + "data": [84, 13, 72, 24, 37, 12, 51, 63, 95, 45, 9, 33, 32, 80, 96, 41, 2, 71, 4, 90, 36, 53, 16, 17, 5, 17, 21, 74, 49, 52, 81, 67, 28, 7, 41, 5, 13, 74, 34, 47, 7, 97, 54, 62, 42, 42, 95, 22, 38, 53] + }, + { + "id": 12, + "data": [84, 6, 16, 94, 7, 8, 88, 89, 24, 34, 38, 59, 59, 64, 0, 48, 91, 38, 5, 93, 16, 71, 67, 7, 4, 68, 66, 54, 73, 91, 35, 28, 6, 42, 51, 5, 38, 7, 85, 99, 17, 38, 13, 46, 29, 69, 94, 10, 62, 82] + }, + { + "id": 13, + "data": [84, 60, 16, 94, 7, 8, 88, 89, 24, 34, 38, 59, 59, 64, 0, 48, 91, 38, 5, 93, 16, 71, 67, 7, 4, 68, 66, 54, 73, 91, 35, 28, 6, 42, 51, 5, 38, 7, 85, 99, 17, 38, 13, 46, 29, 69, 94, 10, 62, 42] + }, + { + "id": 14, + "data": [77, 30, 96, 34, 90, 77, 53, 40, 80, 67, 0, 36, 17, 16, 16, 57, 90, 71, 77, 88, 70, 83, 10, 58, 34, 22, 60, 22, 44, 33, 28, 47, 41, 36, 71, 61, 21, 2, 19, 16, 11, 49, 52, 68, 89, 92, 89, 92, 100, 100] + }, + { + "id": 15, + "data": [90, 44, 35, 12, 92, 45, 11, 46, 91, 17, 49, 77, 4, 22, 27, 27, 17, 1, 47, 50, 49, 11, 69, 42, 28, 63, 23, 29, 99, 82, 80, 32, 25, 25, 17, 0, 51, 25, 9, 82, 52, 84, 42, 49, 79, 26, 12, 4, 71, 80] + }, + { + "id": 16, + "data": [72, 41, 47, 35, 53, 27, 48, 46, 59, 38, 47, 51, 15, 22, 21, 52, 67, 56, 47, 72, 51, 28, 67, 47, 36, 46, 42, 64, 67, 68, 51, 38, 39, 35, 18, 21, 29, 18, 25, 40, 47, 57, 44, 46, 50, 32, 44, 37, 25, 20] + }, + { + "id": 19, + "data": [68, 40, 47, 44, 54, 32, 54, 56, 69, 40, 28, 51, 18, 30, 26, 47, 52, 49, 47, 70, 48, 35, 61, 34, 29, 44, 56, 50, 55, 61, 43, 35, 31, 23, 32, 32, 25, 41, 46, 31, 50, 38, 37, 41, 60, 57, 42, 42, 63, 43] + }, + { + "id": 20, + "data": [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 90, 80, 70, 60, 50, 40, 30, 20, 10, 0, 5, 0, 5, 0, 10, 20, 30, 40, 50, 60, 70, 80, 85, 90, 95, 97.5, 98, 98.25, 98.5, 98.75, 99, 99.1, 99.15, 99.175, 99.2, 99.201, 99.2015, 100, 100] + }, + { + "id": 21, + "data": [87, 3, 72, 24, 37, 12, 51, 63, 95, 45, 9, 33, 32, 80, 96, 41, 2, 71, 4, 90, 36, 53, 16, 17, 5, 17, 21, 74, 49, 52, 81, 67, 28, 7, 41, 5, 13, 74, 34, 47, 7, 97, 54, 62, 42, 42, 95, 22, 38, 53] + }, + { + "id": 22, + "data": [84, 60, 16, 94, 7, 8, 88, 89, 24, 34, 38, 59, 59, 64, 0, 48, 91, 38, 5, 93, 16, 71, 67, 7, 4, 68, 66, 54, 73, 91, 35, 28, 6, 42, 51, 5, 38, 7, 85, 99, 17, 38, 13, 46, 29, 69, 94, 10, 62, 82] + }, + { + "id": 23, + "data": [84, 60, 16, 94, 7, 8, 88, 89, 24, 34, 38, 59, 59, 64, 0, 48, 91, 38, 5, 93, 16, 71, 67, 7, 4, 68, 66, 54, 73, 91, 35, 28, 6, 42, 51, 5, 38, 7, 85, 99, 17, 38, 13, 46, 29, 69, 94, 10, 62, 42] + }, + { + "id": 24, + "data": [77, 30, 96, 34, 90, 77, 53, 40, 80, 67, 0, 36, 17, 16, 16, 57, 90, 71, 77, 88, 70, 83, 10, 58, 34, 22, 60, 22, 44, 33, 28, 47, 41, 36, 71, 61, 21, 2, 19, 16, 11, 49, 52, 68, 89, 92, 89, 92, 100, 100] + }, + { + "id": 25, + "data": [90, 44, 35, 12, 92, 45, 11, 46, 91, 17, 49, 77, 4, 22, 27, 27, 17, 1, 47, 50, 49, 11, 69, 42, 28, 63, 23, 29, 99, 82, 80, 32, 25, 25, 17, 0, 51, 25, 9, 82, 52, 84, 42, 49, 79, 26, 12, 4, 71, 80] + }, + { + "id": 26, + "data": [72, 41, 47, 35, 53, 27, 48, 46, 59, 38, 47, 51, 15, 22, 21, 52, 67, 56, 47, 72, 51, 28, 67, 47, 36, 46, 42, 64, 67, 68, 51, 38, 39, 35, 18, 21, 29, 18, 25, 40, 47, 57, 44, 46, 50, 32, 44, 37, 25, 20] + }, + { + "id": 29, + "data": [68, 40, 47, 44, 54, 32, 54, 56, 69, 40, 28, 51, 18, 30, 26, 47, 52, 49, 47, 70, 48, 35, 61, 34, 29, 44, 56, 50, 55, 61, 43, 35, 31, 23, 32, 32, 25, 41, 46, 31, 50, 38, 37, 41, 60, 57, 42, 42, 63, 43] + }, + { + "id": 30, + "data": [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 90, 80, 70, 60, 50, 40, 30, 20, 10, 0, 5, 0, 5, 0, 10, 20, 30, 40, 50, 60, 70, 80, 85, 90, 95, 97.5, 98, 98.25, 98.5, 98.75, 99, 99.1, 99.15, 99.175, 99.2, 99.201, 99.2015, 100, 100] + }, + { + "id": 31, + "data": [87, 3, 72, 24, 37, 12, 51, 63, 95, 45, 9, 33, 32, 80, 96, 41, 2, 71, 4, 90, 36, 53, 16, 17, 5, 17, 21, 74, 49, 52, 81, 67, 28, 7, 41, 5, 13, 74, 34, 47, 7, 97, 54, 62, 42, 42, 95, 22, 38, 53] + }, + { + "id": 32, + "data": [84, 60, 16, 94, 7, 8, 88, 89, 24, 34, 38, 59, 59, 64, 0, 48, 91, 38, 5, 93, 16, 71, 67, 7, 4, 68, 66, 54, 73, 91, 35, 28, 6, 42, 51, 5, 38, 7, 85, 99, 17, 38, 13, 46, 29, 69, 94, 10, 62, 82] + }, + { + "id": 33, + "data": [84, 60, 16, 94, 7, 8, 88, 89, 24, 34, 38, 59, 59, 64, 0, 48, 91, 38, 5, 93, 16, 71, 67, 7, 4, 68, 66, 54, 73, 91, 35, 28, 6, 42, 51, 5, 38, 7, 85, 99, 17, 38, 13, 46, 29, 69, 94, 10, 62, 42] + }, + { + "id": 34, + "data": [77, 30, 96, 34, 90, 77, 53, 40, 80, 67, 0, 36, 17, 16, 16, 57, 90, 71, 77, 88, 70, 83, 10, 58, 34, 22, 60, 22, 44, 33, 28, 47, 41, 36, 71, 61, 21, 2, 19, 16, 11, 49, 52, 68, 89, 92, 89, 92, 100, 100] + }, + { + "id": 35, + "data": [90, 44, 35, 12, 92, 45, 11, 46, 91, 17, 49, 77, 4, 22, 27, 27, 17, 1, 47, 50, 49, 11, 69, 42, 28, 63, 23, 29, 99, 82, 80, 32, 25, 25, 17, 0, 51, 25, 9, 82, 52, 84, 42, 49, 79, 26, 12, 4, 71, 80] + }, + { + "id": 36, + "data": [72, 41, 47, 35, 53, 27, 48, 46, 59, 38, 47, 51, 15, 22, 21, 52, 67, 56, 47, 72, 51, 28, 67, 47, 36, 46, 42, 64, 67, 68, 51, 38, 39, 35, 18, 21, 29, 18, 25, 40, 47, 57, 44, 46, 50, 32, 44, 37, 25, 20] + }, + { + "id": 39, + "data": [68, 40, 47, 44, 54, 32, 54, 56, 69, 40, 28, 51, 18, 30, 26, 47, 52, 49, 47, 70, 48, 35, 61, 34, 29, 44, 56, 50, 55, 61, 43, 35, 31, 23, 32, 32, 25, 41, 46, 31, 50, 38, 37, 41, 60, 57, 42, 42, 63, 43] + }, + { + "id": 40, + "data": [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 90, 80, 70, 60, 50, 40, 30, 20, 10, 0, 5, 0, 5, 0, 10, 20, 30, 40, 50, 60, 70, 80, 85, 90, 95, 97.5, 98, 98.25, 98.5, 98.75, 99, 99.1, 99.15, 99.175, 99.2, 99.201, 99.2015, 100, 100] + }, + { + "id": 41, + "data": [87, 3, 72, 24, 37, 12, 51, 63, 95, 45, 9, 33, 32, 80, 96, 41, 2, 71, 4, 90, 36, 53, 16, 17, 5, 17, 21, 74, 49, 52, 81, 67, 28, 7, 41, 5, 13, 74, 34, 47, 7, 97, 54, 62, 42, 42, 95, 22, 38, 53] + }, + { + "id": 42, + "data": [84, 60, 16, 94, 7, 8, 88, 89, 24, 34, 38, 59, 59, 64, 0, 48, 91, 38, 5, 93, 16, 71, 67, 7, 4, 68, 66, 54, 73, 91, 35, 28, 6, 42, 51, 5, 38, 7, 85, 99, 17, 38, 13, 46, 29, 69, 94, 10, 62, 82] + }, + { + "id": 43, + "data": [84, 60, 16, 94, 7, 8, 88, 89, 24, 34, 38, 59, 59, 64, 0, 48, 91, 38, 5, 93, 16, 71, 67, 7, 4, 68, 66, 54, 73, 91, 35, 28, 6, 42, 51, 5, 38, 7, 85, 99, 17, 38, 13, 46, 29, 69, 94, 10, 62, 42] + }, + { + "id": 44, + "data": [77, 30, 96, 34, 90, 77, 53, 40, 80, 67, 0, 36, 17, 16, 16, 57, 90, 71, 77, 88, 70, 83, 10, 58, 34, 22, 60, 22, 44, 33, 28, 47, 41, 36, 71, 61, 21, 2, 19, 16, 11, 49, 52, 68, 89, 92, 89, 92, 100, 100] + }, + { + "id": 45, + "data": [90, 44, 35, 12, 92, 45, 11, 46, 91, 17, 49, 77, 4, 22, 27, 27, 17, 1, 47, 50, 49, 11, 69, 42, 28, 63, 23, 29, 99, 82, 80, 32, 25, 25, 17, 0, 51, 25, 9, 82, 52, 84, 42, 49, 79, 26, 12, 4, 71, 80] + }, + { + "id": 46, + "data": [72, 41, 47, 35, 53, 27, 48, 46, 59, 38, 47, 51, 15, 22, 21, 52, 67, 56, 47, 72, 51, 28, 67, 47, 36, 46, 42, 64, 67, 68, 51, 38, 39, 35, 18, 21, 29, 18, 25, 40, 47, 57, 44, 46, 50, 32, 44, 37, 25, 20] + }, + { + "id": 49, + "data": [68, 40, 47, 44, 54, 32, 54, 56, 69, 40, 28, 51, 18, 30, 26, 47, 52, 49, 47, 70, 48, 35, 61, 34, 29, 44, 56, 50, 55, 61, 43, 35, 31, 23, 32, 32, 25, 41, 46, 31, 50, 38, 37, 41, 60, 57, 42, 42, 63, 43] + }, + { + "id": 50, + "data": [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 90, 80, 70, 60, 50, 40, 30, 20, 10, 0, 5, 0, 5, 0, 10, 20, 30, 40, 50, 60, 70, 80, 85, 90, 95, 97.5, 98, 98.25, 98.5, 98.75, 99, 99.1, 99.15, 99.175, 99.2, 99.201, 99.2015, 100, 100] + }, + { + "id": 51, + "data": [87, 3, 72, 24, 37, 12, 51, 63, 95, 45, 9, 33, 32, 80, 96, 41, 2, 71, 4, 90, 36, 53, 16, 17, 5, 17, 21, 74, 49, 52, 81, 67, 28, 7, 41, 5, 13, 74, 34, 47, 7, 97, 54, 62, 42, 42, 95, 22, 38, 53] + }, + { + "id": 52, + "data": [84, 60, 16, 94, 7, 8, 88, 89, 24, 34, 38, 59, 59, 64, 0, 48, 91, 38, 5, 93, 16, 71, 67, 7, 4, 68, 66, 54, 73, 91, 35, 28, 6, 42, 51, 5, 38, 7, 85, 99, 17, 38, 13, 46, 29, 69, 94, 10, 62, 82] + }, + { + "id": 53, + "data": [84, 60, 16, 94, 7, 8, 88, 89, 24, 34, 38, 59, 59, 64, 0, 48, 91, 38, 5, 93, 16, 71, 67, 7, 4, 68, 66, 54, 73, 91, 35, 28, 6, 42, 51, 5, 38, 7, 85, 99, 17, 38, 13, 46, 29, 69, 94, 10, 62, 42] + }, + { + "id": 54, + "data": [77, 30, 96, 34, 90, 77, 53, 40, 80, 67, 0, 36, 17, 16, 16, 57, 90, 71, 77, 88, 70, 83, 10, 58, 34, 22, 60, 22, 44, 33, 28, 47, 41, 36, 71, 61, 21, 2, 19, 16, 11, 49, 52, 68, 89, 92, 89, 92, 100, 100] + }, + { + "id": 55, + "data": [90, 44, 35, 12, 92, 45, 11, 46, 91, 17, 49, 77, 4, 22, 27, 27, 17, 1, 47, 50, 49, 11, 69, 42, 28, 63, 23, 29, 99, 82, 80, 32, 25, 25, 17, 0, 51, 25, 9, 82, 52, 84, 42, 49, 79, 26, 12, 4, 71, 80] + }, + { + "id": 56, + "data": [72, 41, 47, 35, 53, 27, 48, 46, 59, 38, 47, 51, 15, 22, 21, 52, 67, 56, 47, 72, 51, 28, 67, 47, 36, 46, 42, 64, 67, 68, 51, 38, 39, 35, 18, 21, 29, 18, 25, 40, 47, 57, 44, 46, 50, 32, 44, 37, 25, 20] + } + ] + } +} \ No newline at end of file diff --git a/frontend/stores/dashboard/useValidatorDashboardSummaryChart.ts b/frontend/stores/dashboard/useValidatorDashboardSummaryChart.ts index 0ee48b122..04fab2335 100644 --- a/frontend/stores/dashboard/useValidatorDashboardSummaryChart.ts +++ b/frontend/stores/dashboard/useValidatorDashboardSummaryChart.ts @@ -1,12 +1,14 @@ import { defineStore } from 'pinia' import { useCustomFetch } from '~/composables/useCustomFetch' import { type ChartData } from '~/types/api/common' +import { type InternalGetValidatorDashboardSummaryChartResponse } from '~/types/api/validator_dashboard' export const useValidatorDashboardSummaryChartStore = defineStore('useValidatorDashboardSummaryChartStore', () => { const chartData = ref | undefined >() async function getDashboardSummaryChart (dashboardId: number) { - chartData.value = await useCustomFetch>(API_PATH.DASHBOARD_SUMMARY_CHART, undefined, { dashboardId }) + const response = await useCustomFetch(API_PATH.DASHBOARD_SUMMARY_CHART, undefined, { dashboardId }) + chartData.value = response.data return chartData.value } From 02bde8e5bde826c460e72abc8f2068417da8316f Mon Sep 17 00:00:00 2001 From: D13ce Date: Mon, 4 Mar 2024 13:41:34 +0100 Subject: [PATCH 35/39] Improve variable name --- frontend/components/dashboard/chart/SummaryChart.vue | 4 ++-- frontend/i18n/en.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/components/dashboard/chart/SummaryChart.vue b/frontend/components/dashboard/chart/SummaryChart.vue index 3c978d502..75af04020 100644 --- a/frontend/components/dashboard/chart/SummaryChart.vue +++ b/frontend/components/dashboard/chart/SummaryChart.vue @@ -103,7 +103,7 @@ const option = computed(() => { } }, yAxis: { - name: $t('dashboard.validator.summary.chart.yAxis'), + name: $t('dashboard.validator.summary.chart.efficiency'), nameLocation: 'center', nameTextStyle: { padding: [0, 0, 35, 0] @@ -144,7 +144,7 @@ const option = computed(() => { trigger: 'axis', padding: 0, valueFormatter: (value: number) => { - return `${value}% ${$t('dashboard.validator.summary.chart.yAxis')}` + return `${value}% ${$t('dashboard.validator.summary.chart.efficiency')}` }, formatter (params : any) : HTMLElement { const startEpoch = parseInt(params[0].axisValue) diff --git a/frontend/i18n/en.json b/frontend/i18n/en.json index db57f0500..45b4035fa 100644 --- a/frontend/i18n/en.json +++ b/frontend/i18n/en.json @@ -118,7 +118,7 @@ }, "chart":{ "all_groups": "All Groups", - "yAxis": "Efficiency" + "efficiency": "Efficiency" } }, "tabs": { From 5d28531d183c028c5183d832f9b7c565f1a39def Mon Sep 17 00:00:00 2001 From: D13ce Date: Mon, 4 Mar 2024 14:10:13 +0100 Subject: [PATCH 36/39] Implement and use useNetwork --- .../dashboard/chart/SummaryChart.vue | 9 ++++----- .../dashboard/chart/SummaryChartTooltip.vue | 10 +++++----- frontend/composables/useNetwork.ts | 20 +++++++++++++++++++ frontend/utils/format.ts | 13 ++++++++++++ frontend/utils/network.ts | 17 ---------------- 5 files changed, 42 insertions(+), 27 deletions(-) create mode 100644 frontend/composables/useNetwork.ts delete mode 100644 frontend/utils/network.ts diff --git a/frontend/components/dashboard/chart/SummaryChart.vue b/frontend/components/dashboard/chart/SummaryChart.vue index 75af04020..5689fea4e 100644 --- a/frontend/components/dashboard/chart/SummaryChart.vue +++ b/frontend/components/dashboard/chart/SummaryChart.vue @@ -12,7 +12,7 @@ import { } from 'echarts/components' import VChart from 'vue-echarts' import SummaryChartTooltip from './SummaryChartTooltip.vue' -import { formatTs } from '~/utils/format' +import { formatEpochToDate } from '~/utils/format' import { useValidatorDashboardOverview } from '~/stores/dashboard/useValidatorDashboardOverviewStore' import { getSummaryChartGroupColors, getSummaryChartTextColor } from '~/utils/colors' @@ -92,13 +92,12 @@ const option = computed(() => { fontSize: textSize, lineHeight: 20, formatter: (value: number) => { - const ts = epochToTs(value) - if (ts === undefined) { + const date = formatEpochToDate(value, $t('locales.date')) + if (date === undefined) { return '' } - const date = formatTs(ts, $t('locales.date')) - return `${date}\nEpoch ${value}` + return `${date}\n${$t('common.epoch')} ${value}` } } }, diff --git a/frontend/components/dashboard/chart/SummaryChartTooltip.vue b/frontend/components/dashboard/chart/SummaryChartTooltip.vue index da961016a..8808673af 100644 --- a/frontend/components/dashboard/chart/SummaryChartTooltip.vue +++ b/frontend/components/dashboard/chart/SummaryChartTooltip.vue @@ -1,6 +1,6 @@