add suggested changes

admin_ui/package.json

@@ -18,10 +18,9 @@
         "@fortawesome/vue-fontawesome": "^0.1.10",
         "@types/js-cookie": "^2.2.6",
         "axios": "^0.21.2",
-        "chart.js": "^4.3.0",
+        "chart.js": "^2.9.4",
         "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",

admin_ui/src/components/ChartsNav.vue

@@ -3,7 +3,7 @@
         <li v-bind:key="chartConfig.title" v-for="chartConfig in chartConfigs">
             <router-link
                 :to="{
-                    name: 'getCharts',
+                    name: 'chart',
                     params: { chartSlug: chartConfig.chart_slug }
                 }"
                 class="subtle"

admin_ui/src/components/ChartsPage.vue

@@ -2,22 +2,37 @@
     <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>

admin_ui/src/main.less

@@ -183,29 +183,6 @@ 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 {

admin_ui/src/main.ts

@@ -5,7 +5,7 @@ import store from "./store"
 import i18n from "./i18n"
 import "./fontawesome"
 import Chartkick from 'vue-chartkick'
-import Highcharts from 'highcharts'
+import Chart from 'chart.js'
 
 /*****************************************************************************/
 
@@ -47,7 +47,7 @@ Vue.filter("readable", function (value) {
 /*****************************************************************************/
 
 Vue.config.productionTip = false
-Vue.use(Chartkick.use(Highcharts))
+Vue.use(Chartkick.use(Chart))
 
 new Vue({
     i18n,

admin_ui/src/router.ts

@@ -8,7 +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 GetCharts from './views/GetCharts.vue'
+import Chart from './views/Chart.vue'
 
 Vue.use(Router)
 
@@ -39,9 +39,9 @@ export default new Router({
             props: true
         },
         {
-            path: '/charts/:chartSlug/',
-            name: 'getCharts',
-            component: GetCharts,
+            path: '/charts/:chartSlug',
+            name: 'chart',
+            component: Chart,
             props: true
         },
         {

admin_ui/src/views/GetCharts.vue → admin_ui/src/views/Chart.vue

@@ -11,7 +11,9 @@ import ChartsPage from "../components/ChartsPage.vue"
 import DetailViewBase from "../components/DetailViewBase.vue"
 
 export default Vue.extend({
-    props: ["chartSlug"],
+    props: {
+        chartSlug: String
+    },
     components: {
         ChartsPage,
         DetailViewBase

docs/source/charts/examples/app.py

@@ -1,3 +1,5 @@
+import asyncio
+
 from fastapi import FastAPI
 from fastapi.routing import Mount
 from home.tables import Director, Movie
@@ -16,10 +18,13 @@ async def director_movie_count():
     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=director_movie_count,
+    data=chart_data,
 )
 
 

docs/source/charts/index.rst

@@ -3,24 +3,24 @@
 Charts
 ======
 
-Piccolo Admin can display different types of charts based on yours
+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 charts in the UI.
+Piccolo Admin will then show a chart in the UI.
 
 .. image:: ./images/charts_sidebar.png
 
 .. image:: ./images/chart.png
 
-.. warning::
+.. hint::
 
-  The data format must be a ``list of lists`` 
-  (eg. ``[["Male", 7], ["Female", 3]]``).
+  The data format must be a list of lists
+  (e.g. ``[["Male", 7], ["Female", 3]]``).
 
 -------------------------------------------------------------------------------
 

piccolo_admin/endpoints.py

@@ -349,7 +349,6 @@ class FormConfigResponseModel(BaseModel):
     description: t.Optional[str] = None
 
 
-@dataclass
 class ChartConfig:
     """
     Used to specify charts, which are passed into ``create_admin``.
@@ -363,13 +362,24 @@ class ChartConfig:
         ``Column``, ``Bar`` and ``Area``.
     :param data:
         The data to be passed to the admin ui. The data format must be
-        a ``list of lists`` (eg. ``[["Male", 7], ["Female", 3]]``).
+        a list of lists (e.g. ``[["Male", 7], ["Female", 3]]``).
 
     Here's a full example:
 
     .. code-block:: python
 
-        async def director_movie_count():
+        import asyncio
+
+        import typing as t
+        from piccolo.query.methods.select import Count
+        from piccolo_admin.endpoints import (
+            create_admin,
+            ChartConfig,
+            ChartConfigResponseModel,
+        )
+        from movies.tables import Director, Movie
+
+        async def director_movie_count() -> t.List[ChartConfigResponseModel]:
             movies = await Movie.select(
                 Movie.director.name.as_alias("director"),
                 Count(Movie.id)
@@ -380,16 +390,24 @@ async def director_movie_count():
             # 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", # or Bar or Line etc.
-            data=director_movie_count,
+            data=chart_data,
+        )
 
         create_admin(charts=[director_chart])
 
     """
 
-    def __init__(self, title: str, chart_type: str, data: t.List[t.Any]):
+    def __init__(
+        self,
+        title: str,
+        chart_type: str,
+        data: t.List[t.List[t.Any]],
+    ):
         self.title = title
         self.chart_slug = self.title.replace(" ", "-").lower()
         self.chart_type = chart_type
@@ -400,7 +418,7 @@ class ChartConfigResponseModel(BaseModel):
     title: str
     chart_slug: str
     chart_type: str
-    data: t.List[t.Any]
+    data: t.List[t.List[t.Any]]
 
 
 def handle_auth_exception(request: Request, exc: Exception):
@@ -925,7 +943,7 @@ def get_user(self, request: Request) -> UserResponseModel:
 
     def get_charts(self) -> t.List[ChartConfigResponseModel]:
         """
-        Returns  all charts registered with the admin.
+        Returns all charts registered with the admin.
         """
         return [
             ChartConfigResponseModel(
@@ -939,7 +957,7 @@ def get_charts(self) -> t.List[ChartConfigResponseModel]:
 
     def get_single_chart(self, chart_slug: str) -> ChartConfigResponseModel:
         """
-        Returns single chart.
+        Returns a single chart.
         """
         chart = self.chart_config_map.get(chart_slug, None)
         if chart is None:

piccolo_admin/example.py

@@ -420,6 +420,17 @@ def booking_endpoint(request: Request, data: BookingModel) -> str:
     menu_group="Testing",
 )
 
+
+async def fetch_chart_data() -> t.List[t.List[t.Any]]:
+    return [
+        ["George Lucas", 4],
+        ["Peter Jackson", 6],
+        ["Ron Howard", 1],
+    ]
+
+
+chart_data = asyncio.run(fetch_chart_data())
+
 APP = create_admin(
     [
         movie_config,
@@ -447,18 +458,29 @@ def booking_endpoint(request: Request, data: BookingModel) -> str:
     session_table=Sessions,
     charts=[
         ChartConfig(
-            title="Movie count",
+            title="Movie count Pie",
             chart_type="Pie",
-            data=[
-                ["George Lucas", 4],
-                ["Peter Jackson", 6],
-                ["Ron Howard", 1],
-            ],
+            data=chart_data,
+        ),
+        ChartConfig(
+            title="Movie count Line",
+            chart_type="Line",
+            data=chart_data,
         ),
         ChartConfig(
-            title="Director gender",
+            title="Movie count Column",
             chart_type="Column",
-            data=[["Male", 7], ["Female", 3]],
+            data=chart_data,
+        ),
+        ChartConfig(
+            title="Movie count Bar",
+            chart_type="Bar",
+            data=chart_data,
+        ),
+        ChartConfig(
+            title="Movie count Area",
+            chart_type="Area",
+            data=chart_data,
         ),
     ],
     sidebar_links={