Chart experiments

README.md

@@ -19,7 +19,7 @@ Some of it's standout features:
 * Media support, both locally and in S3 compatible services
 * Dark mode support
 * CSV exports
-* Easily create custom forms
+* Easily create custom forms, and display data in charts
 * Works on mobile and desktop
 * Use standalone, or integrate it easily with ASGI apps like FastAPI, and Starlette
 * Multilingual out of box

admin_ui/package.json

@@ -18,13 +18,15 @@
         "@fortawesome/vue-fontawesome": "^0.1.10",
         "@types/js-cookie": "^2.2.6",
         "axios": "^0.21.2",
+        "chart.js": "^2.9.4",
         "core-js": "^3.6.5",
         "flatpickr": "^4.6.9",
         "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/Chart.vue

@@ -0,0 +1,114 @@
+<template>
+    <div v-if="chartConfig">
+        <h3>{{ chartConfig.title }}</h3>
+        <pie-chart
+            width="650px"
+            height="450px"
+            :download="{ background: '#ffffff' }"
+            v-if="chartConfig.chart_type == 'Pie'"
+            :data="chartData"
+        ></pie-chart>
+        <line-chart
+            width="650px"
+            height="450px"
+            :download="{ background: '#ffffff' }"
+            v-else-if="chartConfig.chart_type == 'Line'"
+            :data="chartData"
+        ></line-chart>
+        <column-chart
+            width="650px"
+            height="450px"
+            :download="{ background: '#ffffff' }"
+            v-else-if="chartConfig.chart_type == 'Column'"
+            :data="chartData"
+        ></column-chart>
+        <bar-chart
+            width="650px"
+            height="450px"
+            :download="{ background: '#ffffff' }"
+            v-else-if="chartConfig.chart_type == 'Bar'"
+            :data="chartData"
+        ></bar-chart>
+        <area-chart
+            width="650px"
+            height="450px"
+            :download="{ background: '#ffffff' }"
+            v-else-if="chartConfig.chart_type == 'Area'"
+            :data="chartData"
+        ></area-chart>
+
+        <form @submit.prevent="handleSubmit($event)" v-if="chartSchema">
+            <NewForm :schema="chartSchema"></NewForm>
+            <button>Apply</button>
+        </form>
+    </div>
+</template>
+
+<script lang="ts">
+import Vue from "vue"
+import NewForm from "./NewForm.vue"
+import { convertFormValue } from "@/utils"
+
+export default Vue.extend({
+    data() {
+        return {
+            chartData: [],
+            chartConfig: null,
+            chartSchema: null,
+            chartSlug: null
+        }
+    },
+    components: { NewForm },
+    methods: {
+        async handleSubmit(event) {
+            const form = new FormData(event.target)
+
+            const json = {}
+            for (const i of form.entries()) {
+                const key = i[0]
+                let value = i[1]
+
+                json[key] = convertFormValue({
+                    key,
+                    value,
+                    schema: this.chartSchema
+                })
+            }
+
+            this.chartData = (
+                await this.$store.dispatch("fetchChartData", {
+                    chartSlug: this.chartSlug,
+                    data: json
+                })
+            ).data
+        }
+    },
+    async mounted() {
+        this.chartSlug = this.$router.currentRoute.params.chartSlug
+
+        this.chartData = (
+            await this.$store.dispatch("fetchChartData", {
+                chartSlug: this.chartSlug,
+                data: {}
+            })
+        ).data
+
+        this.chartConfig = (
+            await this.$store.dispatch("fetchChartConfig", this.chartSlug)
+        ).data
+
+        if (this.chartConfig.has_form) {
+            this.chartSchema = (
+                await this.$store.dispatch("fetchChartSchema", this.chartSlug)
+            ).data
+        }
+    }
+})
+</script>
+
+<style scoped lang="less">
+h3 {
+    text-transform: capitalize;
+    text-align: center;
+}
+</style>

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: 'chart',
+                    params: { chartSlug: chartConfig.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/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,
@@ -55,6 +56,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
+    slug: string
+    chart_type: string
+    data: any
+}

admin_ui/src/main.ts

@@ -4,6 +4,8 @@ import router from "./router"
 import store from "./store"
 import i18n from "./i18n"
 import "./fontawesome"
+import Chartkick from 'vue-chartkick'
+import Chart from 'chart.js'
 
 /*****************************************************************************/
 
@@ -30,7 +32,7 @@ axios.defaults.transformResponse = [
         if (typeof data === "string") {
             try {
                 data = JSONBig.parse(data)
-            } catch (e) {}
+            } catch (e) { }
         }
         return data
     }
@@ -45,6 +47,7 @@ Vue.filter("readable", function (value) {
 /*****************************************************************************/
 
 Vue.config.productionTip = false
+Vue.use(Chartkick.use(Chart))
 
 new Vue({
     i18n,

admin_ui/src/router.ts

@@ -1,57 +1,64 @@
-import Vue from 'vue'
-import Router from 'vue-router'
+import Vue from "vue"
+import Router from "vue-router"
 
-import AddRow from './views/AddRow.vue'
-import EditRow from './views/EditRow.vue'
-import Home from './views/Home.vue'
-import Login from './views/Login.vue'
-import ChangePassword from './views/ChangePassword.vue'
-import RowListing from './views/RowListing.vue'
-import AddForm from './views/AddForm.vue'
+import AddRow from "./views/AddRow.vue"
+import EditRow from "./views/EditRow.vue"
+import Home from "./views/Home.vue"
+import Login from "./views/Login.vue"
+import ChangePassword from "./views/ChangePassword.vue"
+import RowListing from "./views/RowListing.vue"
+import AddForm from "./views/AddForm.vue"
+import ChartView from "./views/ChartView.vue"
 
 Vue.use(Router)
 
 export default new Router({
-    mode: 'hash',
+    mode: "hash",
     base: process.env.BASE_URL,
     routes: [
         {
-            path: '/',
-            name: 'home',
+            path: "/",
+            name: "home",
             component: Home
         },
         {
-            path: '/login/',
-            name: 'login',
+            path: "/login/",
+            name: "login",
             component: Login
         },
         {
-            path: '/change-password/',
-            name: 'changePassword',
+            path: "/change-password/",
+            name: "changePassword",
             component: ChangePassword,
             props: true
         },
         {
-            path: '/forms/:formSlug/',
-            name: 'addForm',
+            path: "/forms/:formSlug/",
+            name: "addForm",
             component: AddForm,
             props: true
         },
         {
-            path: '/:tableName/',
-            name: 'rowListing',
+            path: "/charts/:chartSlug",
+            name: "chart",
+            component: ChartView,
+            props: true
+        },
+        {
+            path: "/:tableName/",
+            name: "rowListing",
             component: RowListing,
             props: true
         },
         {
-            path: '/:tableName/add/',
-            name: 'addRow',
+            path: "/:tableName/add/",
+            name: "addRow",
             component: AddRow,
             props: true
         },
         {
-            path: '/:tableName/:rowID/',
-            name: 'editRow',
+            path: "/:tableName/:rowID/",
+            name: "editRow",
             component: EditRow,
             props: true
         }