Chart experiments

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/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.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,59 @@
+<template>
+    <div>
+        <h3>{{ chartConfigs.title }}</h3>
+        <pie-chart
+            width="650px"
+            height="450px"
+            :download="{ background: '#ffffff' }"
+            v-if="chartConfigs.chart_type == 'Pie'"
+            :data="chartConfigs.data"
+        ></pie-chart>
+        <line-chart
+            width="650px"
+            height="450px"
+            :download="{ background: '#ffffff' }"
+            v-else-if="chartConfigs.chart_type == 'Line'"
+            :data="chartConfigs.data"
+        ></line-chart>
+        <column-chart
+            width="650px"
+            height="450px"
+            :download="{ background: '#ffffff' }"
+            v-else-if="chartConfigs.chart_type == 'Column'"
+            :data="chartConfigs.data"
+        ></column-chart>
+        <bar-chart
+            width="650px"
+            height="450px"
+            :download="{ background: '#ffffff' }"
+            v-else-if="chartConfigs.chart_type == 'Bar'"
+            :data="chartConfigs.data"
+        ></bar-chart>
+        <area-chart
+            width="650px"
+            height="450px"
+            :download="{ background: '#ffffff' }"
+            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,
@@ -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
+    chart_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

@@ -8,6 +8,7 @@ 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 Chart from './views/Chart.vue'
 
 Vue.use(Router)
 
@@ -37,6 +38,12 @@ export default new Router({
             component: AddForm,
             props: true
         },
+        {
+            path: '/charts/:chartSlug',
+            name: 'chart',
+            component: Chart,
+            props: true
+        },
         {
             path: '/:tableName/',
             name: 'rowListing',

admin_ui/src/store.ts

@@ -34,6 +34,7 @@ export default new Vuex.Store({
         tableNames: [],
         tableGroups: {},
         formConfigs: [] as i.FormConfig[],
+        chartConfigs: [] as i.ChartConfig[],
         user: undefined,
         loadingStatus: false,
         customLinks: {}
@@ -63,6 +64,9 @@ export default new Vuex.Store({
         updateFormSchema(state, formSchema) {
             state.formSchema = formSchema
         },
+        updateChartConfigs(state, value) {
+            state.chartConfigs = value
+        },
         updateApiResponseMessage(state, message: i.APIResponseMessage) {
             state.apiResponseMessage = message
         },
@@ -117,6 +121,17 @@ export default new Vuex.Store({
             context.commit("updateFormSchema", response.data)
             return response
         },
+        async fetchChartConfigs(context) {
+            const response = await axios.get(`${BASE_URL}charts/`)
+            context.commit("updateChartConfigs", response.data)
+        },
+        async fetchChartConfig(context, chartSlug: string) {
+            const response = await axios.get(
+                `${BASE_URL}charts/${chartSlug}/`
+            )
+            context.commit("updateChartConfigs", response.data)
+            return response
+        },
 
         /*********************************************************************/
 

admin_ui/src/views/Chart.vue

@@ -0,0 +1,29 @@
+<template>
+    <DetailViewBase>
+        <ChartsPage :chartSlug="chartSlug" />
+    </DetailViewBase>
+</template>
+
+
+<script lang="ts">
+import Vue from "vue"
+import ChartsPage from "../components/ChartsPage.vue"
+import DetailViewBase from "../components/DetailViewBase.vue"
+
+export default Vue.extend({
+    props: {
+        chartSlug: String
+    },
+    components: {
+        ChartsPage,
+        DetailViewBase
+    },
+    async mounted() {
+        await this.$store.dispatch("fetchChartConfig", this.chartSlug)
+    }
+})
+</script>
+
+
+<style scoped lang="less">
+</style>

docs/source/charts/examples/app.py

@@ -0,0 +1,43 @@
+import asyncio
+
+from fastapi import FastAPI
+from fastapi.routing import Mount
+from home.tables import Director, Movie
+
+from piccolo_admin.endpoints import ChartConfig, create_admin
+
+
+# count directors movies
+async def director_movie_count():
+    movies = await Movie.select(
+        Movie.director.name.as_alias("director"),
+        Count(Movie.id),
+    ).group_by(Movie.director)
+    # Flatten the response so it's a list of lists
+    # like [['George Lucas', 3], ...]
+    return [[i["director"], i["count"]] for i in movies]
+
+
+chart_data = asyncio.run(director_movie_count())
+
+
+director_chart = ChartConfig(
+    title="Movie count",
+    chart_type="Pie",
+    data=chart_data,
+)
+
+
+app = FastAPI(
+    routes=[
+        Mount(
+            "/admin/",
+            create_admin(
+                tables=[Director, Movie],
+                charts=[director_chart],
+            ),
+        ),
+    ],
+)
+
+# For Starlette it is identical, just `app = Starlette(...)`

docs/source/charts/examples/home/tables.py

@@ -0,0 +1,9 @@
+from piccolo.columns.column_types import Varchar, ForeignKey
+from piccolo.table import Table
+
+class Director(Table):
+    name = Varchar()
+
+class Movie(Table):
+    title = Varchar()
+    director = ForeignKey(references=Director)

docs/source/charts/index.rst

@@ -0,0 +1,32 @@
+.. _Charts:
+
+Charts
+======
+
+Piccolo Admin can display different types of charts based on your
+data. Five chart types are supported: ``Pie``, ``Line``, ``Column``, 
+``Bar`` and ``Area``.
+
+Here's an example of charts usage, using FastAPI:
+
+.. literalinclude:: ./examples/app.py
+
+Piccolo Admin will then show a chart in the UI.
+
+.. image:: ./images/charts_sidebar.png
+
+.. image:: ./images/chart.png
+
+.. hint::
+
+  The data format must be a list of lists
+  (e.g. ``[["Male", 7], ["Female", 3]]``).
+
+-------------------------------------------------------------------------------
+
+Source
+------
+
+.. currentmodule:: piccolo_admin.endpoints
+
+.. autoclass:: ChartConfig