From 262cabb09dc87c535f5a0932740882f1c7157d5f Mon Sep 17 00:00:00 2001 From: Thijn Date: Mon, 12 Aug 2024 16:55:48 +0200 Subject: [PATCH 1/5] WIP adding charts --- src/views/dashboard/DashboardIndex.vue | 146 ++++++++++++++++++++++--- 1 file changed, 131 insertions(+), 15 deletions(-) diff --git a/src/views/dashboard/DashboardIndex.vue b/src/views/dashboard/DashboardIndex.vue index b817711a..736f8c63 100644 --- a/src/views/dashboard/DashboardIndex.vue +++ b/src/views/dashboard/DashboardIndex.vue @@ -7,12 +7,52 @@ import { searchStore } from '../../store/store.js'

Dashboard

- Aantal zoekopdrachten afgelopen maand - + +
+
+
+
Term
+
+ 23 +
+
+
+
Queries
+
+ 543 +
+
+
+
Clicks
+
+ 65433 +
+
+
+ +
+
+
Queries per dag
+
+ +
+
+
+
Queries per uur
+
+ +
+
+
+
@@ -35,18 +75,35 @@ export default { }, data() { return { - options: { - chart: { - id: 'Aantal bekeken publicaties', + // mock data + queriesMonth: { + graph: { + options: { + chart: { + id: 'Aantal bekeken publicaties', + }, + xaxis: { + categories: ['7-11', '7-12', '7-13', '7-15', '7-16', '7-17', '7-18'], + }, + }, + series: [{ + name: 'Weergaven', + data: [30, 40, 45, 50, 49, 60, 55], + }], }, - xaxis: { - categories: ['7-11', '7-12', '7-13', '7-15', '7-16', '7-17', '7-18'], + pie: { + options: { + labels: ['Apple', 'Mango', 'Orange', 'Watermelon'], + dataLabels: { + enabled: true, + formatter(val) { + return val + ' queries' + }, + }, + }, + series: [44, 55, 13, 33], }, }, - series: [{ - name: 'Weergaven', - data: [30, 40, 45, 50, 49, 60, 55], - }], } }, watch: { @@ -61,3 +118,62 @@ export default { }, } + + From c59bb76a9dce9825cf350b6d2954f30c71cf0032 Mon Sep 17 00:00:00 2001 From: Thijn Date: Tue, 13 Aug 2024 15:00:42 +0200 Subject: [PATCH 2/5] finished mock statistics page --- src/views/dashboard/DashboardIndex.vue | 202 +++++++++++++++++++++---- 1 file changed, 175 insertions(+), 27 deletions(-) diff --git a/src/views/dashboard/DashboardIndex.vue b/src/views/dashboard/DashboardIndex.vue index 736f8c63..48cfab50 100644 --- a/src/views/dashboard/DashboardIndex.vue +++ b/src/views/dashboard/DashboardIndex.vue @@ -32,25 +32,40 @@ import { searchStore } from '../../store/store.js'
-
Queries per dag
+
Zoek aanvragen per dag
+ :options="queries.month.options" + :series="queries.month.series" />
-
Queries per uur
+
Zoek aanvragen per uur
+ :options="queries.hour.options" + :series="queries.hour.series" />
+
+
Detail bevragingen per dag
+
+ +
+
+
+
Meest opgevraagde publicaties
+
    +
  • + {{ value }} +
    • +
+
@@ -76,34 +91,118 @@ export default { data() { return { // mock data - queriesMonth: { - graph: { + queries: { + month: { options: { + theme: { + mode: 'dark', + monochrome: { + enabled: true, + color: '#079cff', + shadeTo: 'light', + shadeIntensity: 0, + }, + }, chart: { - id: 'Aantal bekeken publicaties', + id: 'Queries-per-dag', + type: 'area', + }, + dataLabels: { + enabled: false, + }, + stroke: { + curve: 'smooth', }, xaxis: { - categories: ['7-11', '7-12', '7-13', '7-15', '7-16', '7-17', '7-18'], + categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', + '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30'], }, }, series: [{ - name: 'Weergaven', - data: [30, 40, 45, 50, 49, 60, 55], + name: 'Zoek aanvragen per dag', + data: [ + 432, 2954, 3287, 3278, 5893, 6839, 7751, 5223, 4332, 4343, + 4324, 2234, 4902, 4321, 5325, 5324, 3211, 3223, 4432, 2243, + 4123, 5344, 3754, 4243, 5233, 6435, 4234, 6454, 4344, 3372, // 30 total data points + ], }], }, - pie: { + hour: { options: { - labels: ['Apple', 'Mango', 'Orange', 'Watermelon'], + theme: { + mode: 'dark', + monochrome: { + enabled: true, + color: '#079cff', + shadeTo: 'light', + shadeIntensity: 0, + }, + }, + chart: { + id: 'Queries-per-uur', + type: 'area', + }, dataLabels: { - enabled: true, - formatter(val) { - return val + ' queries' + enabled: false, + }, + stroke: { + curve: 'smooth', + }, + xaxis: { + categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', + '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24'], + }, + }, + series: [{ + name: 'Zoek aanvragen per uur', + data: [ + 32, 43, 12, 23, 32, 45, 32, 12, 31, 42, + 43, 64, 34, 32, 32, 23, 25, 13, 35, 24, + 35, 43, 23, 42, // 24 total data points + ], + }], + }, + }, + + clicks: { + month: { + options: { + theme: { + mode: 'dark', + monochrome: { + enabled: true, + color: '#079cff', + shadeTo: 'light', + shadeIntensity: 0, }, }, + chart: { + id: 'Clicks-per-dag', + type: 'area', + }, + dataLabels: { + enabled: false, + }, + stroke: { + curve: 'smooth', + }, + xaxis: { + categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', + '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30'], + }, }, - series: [44, 55, 13, 33], + series: [{ + name: 'Detail bevragingen per dag', + data: [ + 51434, 32559, 32264, 39290, 32854, 54697, 37360, 56957, 34450, 55016, + 34219, 30221, 23969, 59032, 53820, 39792, 52498, 22735, 42846, 50663, + 22112, 20460, 51664, 33078, 41214, 42888, 26108, 58835, 40915, 25714, + ], + }], }, }, + + topFivePublications: ['1', '3', '5', '7', '23'], } }, watch: { @@ -120,6 +219,10 @@ export default { From f44adb35ea3bb60e4775cb06f704681cd1c5f770 Mon Sep 17 00:00:00 2001 From: Thijn Date: Tue, 13 Aug 2024 16:21:09 +0200 Subject: [PATCH 3/5] added support for default theme --- src/views/dashboard/DashboardIndex.vue | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/src/views/dashboard/DashboardIndex.vue b/src/views/dashboard/DashboardIndex.vue index 48cfab50..4ffd6686 100644 --- a/src/views/dashboard/DashboardIndex.vue +++ b/src/views/dashboard/DashboardIndex.vue @@ -270,8 +270,17 @@ export default { height: 150px; width: 250px; border-radius: 8px; - /* assume default is dark mode */ - background-color: rgba(255, 255, 255, 0.1); +} +/* default theme */ +@media (prefers-color-scheme: light) { + .dashboard-content > .most-searched-terms > div { + background-color: rgba(0, 0, 0, 0.07); + } +} +@media (prefers-color-scheme: dark) { + .dashboard-content > .most-searched-terms > div { + background-color: rgba(255, 255, 255, 0.1); + } } /* do theme checks, light mode | dark mode */ body[data-theme-light] .dashboard-content > .most-searched-terms > div { From 91af2c68d8b38f10d43324df4ff61fcff5e8da73 Mon Sep 17 00:00:00 2001 From: Thijn Date: Tue, 13 Aug 2024 17:15:47 +0200 Subject: [PATCH 4/5] Auto detect light or dark mode for the graphs --- src/views/dashboard/DashboardIndex.vue | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/src/views/dashboard/DashboardIndex.vue b/src/views/dashboard/DashboardIndex.vue index 4ffd6686..c3697866 100644 --- a/src/views/dashboard/DashboardIndex.vue +++ b/src/views/dashboard/DashboardIndex.vue @@ -95,7 +95,7 @@ export default { month: { options: { theme: { - mode: 'dark', + mode: this.getTheme(), monochrome: { enabled: true, color: '#079cff', @@ -130,7 +130,7 @@ export default { hour: { options: { theme: { - mode: 'dark', + mode: this.getTheme(), monochrome: { enabled: true, color: '#079cff', @@ -168,7 +168,7 @@ export default { month: { options: { theme: { - mode: 'dark', + mode: this.getTheme(), monochrome: { enabled: true, color: '#079cff', @@ -215,6 +215,17 @@ export default { mounted() { searchStore.getSearchResults() }, + methods: { + getTheme() { + if (document.body.hasAttribute('data-theme-light')) { + return 'light' + } + if (document.body.hasAttribute('data-theme-default')) { + return window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark' + } + return 'dark' + }, + }, } From 7b4aa9102c87a6851257a0a273c4556d4edb8d9e Mon Sep 17 00:00:00 2001 From: Thijn Date: Wed, 14 Aug 2024 10:11:03 +0200 Subject: [PATCH 5/5] removed margin on header --- src/views/dashboard/DashboardIndex.vue | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/views/dashboard/DashboardIndex.vue b/src/views/dashboard/DashboardIndex.vue index 29f8c06d..1adb7485 100644 --- a/src/views/dashboard/DashboardIndex.vue +++ b/src/views/dashboard/DashboardIndex.vue @@ -214,10 +214,6 @@ export default { background-color: transparent !important; } -.pageHeader { - margin-block-end: 4rem; -} - .dashboard-content { margin-inline: auto; max-width: 1000px;