Charts support

admin_ui/package.json

@@ -18,13 +18,16 @@
         "@fortawesome/vue-fontawesome": "^0.1.10",
         "@types/js-cookie": "^2.2.6",
         "axios": "^0.21.2",
+        "chart.js": "^4.3.0",
         "core-js": "^3.6.5",
         "flatpickr": "^4.6.9",
+        "highcharts": "^11.0.1",
         "is-svg": "^4.3.1",
         "js-cookie": "^2.2.1",
         "json-bigint": "^1.0.0",
         "ssri": "^8.0.1",
         "vue": "^2.7.14",
+        "vue-chartkick": "^0.6.1",
         "vue-class-component": "^7.2.6",
         "vue-flatpickr-component": "^8.1.7",
         "vue-i18n": "^8.27.2",

admin_ui/src/components/ChartsNav.vue

@@ -0,0 +1,31 @@
+<template>
+    <ul>
+        <li v-bind:key="chartConfig.title" v-for="chartConfig in chartConfigs">
+            <router-link
+                :to="{
+                    name: 'getCharts',
+                    params: { chartSlug: chartConfig.chart_slug }
+                }"
+                class="subtle"
+            >
+                <font-awesome-icon icon="level-up-alt" class="rotated90" />
+                <span>{{ chartConfig.title }}</span>
+            </router-link>
+        </li>
+    </ul>
+</template>
+
+<script lang="ts">
+import Vue from "vue"
+
+export default Vue.extend({
+    computed: {
+        chartConfigs() {
+            return this.$store.state.chartConfigs
+        }
+    },
+    async mounted() {
+        await this.$store.dispatch("fetchChartConfigs")
+    }
+})
+</script>

admin_ui/src/components/ChartsPage.vue

@@ -0,0 +1,44 @@
+<template>
+    <div>
+        <h3>{{ chartConfigs.title }}</h3>
+        <pie-chart
+            v-if="chartConfigs.chart_type == 'Pie'"
+            :data="chartConfigs.data"
+        ></pie-chart>
+        <line-chart
+            v-else-if="chartConfigs.chart_type == 'Line'"
+            :data="chartConfigs.data"
+        ></line-chart>
+        <column-chart
+            v-else-if="chartConfigs.chart_type == 'Column'"
+            :data="chartConfigs.data"
+        ></column-chart>
+        <bar-chart
+            v-else-if="chartConfigs.chart_type == 'Bar'"
+            :data="chartConfigs.data"
+        ></bar-chart>
+        <area-chart
+            v-else-if="chartConfigs.chart_type == 'Area'"
+            :data="chartConfigs.data"
+        ></area-chart>
+    </div>
+</template>
+
+<script lang="ts">
+import Vue from "vue"
+
+export default Vue.extend({
+    computed: {
+        chartConfigs() {
+            return this.$store.state.chartConfigs
+        }
+    }
+})
+</script>
+
+<style scoped lang="less">
+h3 {
+    text-transform: capitalize;
+    text-align: center;
+}
+</style>

admin_ui/src/components/SidebarNav.vue

@@ -33,6 +33,22 @@
             </span>
         </p>
         <FormNav v-show="!isHiddenForms" />
+        <p
+            class="opaque"
+            v-if="chartConfigs.length > 0"
+            v-on:click="isHiddenCharts = !isHiddenCharts"
+        >
+            <font-awesome-icon icon="chart-bar" />{{ $t("Charts") }}
+            <span style="float: right">
+                <font-awesome-icon
+                    icon="angle-down"
+                    title="Show charts"
+                    v-if="isHiddenCharts"
+                />
+                <font-awesome-icon icon="angle-up" title="Hide charts" v-else />
+            </span>
+        </p>
+        <ChartsNav v-show="!isHiddenCharts" />
         <p
             class="opaque"
             v-if="Object.keys(customLinks).length > 0"
@@ -56,25 +72,31 @@
 import Vue from "vue"
 import TableNav from "./TableNav.vue"
 import FormNav from "./FormNav.vue"
+import ChartsNav from "./ChartsNav.vue"
 import LinksNav from "./LinksNav.vue"
 
 export default Vue.extend({
     data() {
         return {
             isHiddenTables: false,
             isHiddenForms: false,
+            isHiddenCharts: false,
             isHiddenLinks: false
         }
     },
     components: {
         TableNav,
         FormNav,
+        ChartsNav,
         LinksNav
     },
     computed: {
         formConfigs() {
             return this.$store.state.formConfigs
         },
+        chartConfigs() {
+            return this.$store.state.chartConfigs
+        },
         customLinks() {
             return this.$store.state.customLinks
         }

admin_ui/src/components/TableNav.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="sidebar_wrapper">
         <ul class="table_list">
             <TableNavItem
                 v-bind:key="tableName"

admin_ui/src/fontawesome.ts

@@ -11,6 +11,7 @@ import {
     faBars,
     faCaretUp,
     faCaretDown,
+    faChartBar,
     faCheck,
     faCircleNotch,
     faCogs,
@@ -54,6 +55,7 @@ library.add(
     faBars,
     faCaretUp,
     faCaretDown,
+    faChartBar,
     faCheck,
     faCircleNotch,
     faCogs,

admin_ui/src/interfaces.ts

@@ -145,3 +145,10 @@ export interface FormConfig {
     slug: string
     description: string
 }
+
+export interface ChartConfig {
+    title: string
+    chart_slug: string
+    chart_type: string
+    data: any
+}

admin_ui/src/main.less

@@ -183,6 +183,29 @@ button {
     .ql-picker-label {
         color: white
     }
+
+    .highcharts-background {
+        fill: @dark_grey;
+
+    }
+
+    .highcharts-axis-labels.highcharts-xaxis-labels {
+        text[style] {
+            fill: white !important;
+        }
+    }
+
+    .highcharts-axis-labels.highcharts-yaxis-labels {
+        text[style] {
+            fill: white !important;
+        }
+    }
+
+    .highcharts-axis.highcharts-xaxis {
+        .highcharts-axis-line {
+            stroke: white !important;
+        }
+    }
 }
 
 #app {