feat: new dashboard implementation (#168)

* wip: charts.js experimental work * update lock file * wip: frontend redesign * wip: more UI fixes for consistency across themes * cleanup * improve UI log * style updates * fix lint errors
2022-12-29 17:19:15 -08:00 · 2022-12-29 17:19:15 -08:00 · 6a8a25e3f8
commit 6a8a25e3f8
parent a3954dab0f
42 changed files with 1690 additions and 296 deletions
--- a/frontend/components/Chart/Donut.vue
+++ b/frontend/components/Chart/Donut.vue
@ -0,0 +1,94 @@
+<template>
+  <DoughnutChart
+    :chart-options="chartOptions"
+    :chart-data="chartData"
+    :chart-id="chartId"
+    :dataset-id-key="datasetIdKey"
+    :css-classes="cssClasses"
+    :styles="styles"
+    :width="width"
+    :height="height"
+  />
+</template>
+
+<script lang="ts">
+  import { Doughnut as DoughnutChart } from "vue-chartjs";
+  import { Chart as ChartJS, Title, Tooltip, Legend, CategoryScale, LinearScale, ArcElement } from "chart.js";
+  import { TChartData } from "vue-chartjs/dist/types";
+
+  ChartJS.register(Title, Tooltip, Legend, CategoryScale, LinearScale, ArcElement);
+
+  export default defineComponent({
+    name: "BarChart",
+    components: {
+      DoughnutChart,
+    },
+    props: {
+      chartId: {
+        type: String,
+        default: "bar-chart",
+      },
+      datasetIdKey: {
+        type: String,
+        default: "label",
+      },
+      width: {
+        type: Number,
+        default: 400,
+      },
+      height: {
+        type: Number,
+        default: 400,
+      },
+      cssClasses: {
+        default: "",
+        type: String,
+      },
+      styles: {
+        type: Object,
+        default: () => {
+          return {};
+        },
+      },
+      chartData: {
+        type: Object as () => TChartData<"doughnut", number[], unknown>,
+        default: () => {
+          return {
+            labels: ["Red", "Blue", "Yellow"],
+            datasets: [
+              {
+                label: "My First Dataset",
+                data: [300, 50, 100],
+                backgroundColor: ["rgb(255, 99, 132)", "rgb(54, 162, 235)", "rgb(255, 205, 86)"],
+                hoverOffset: 4,
+              },
+            ],
+          };
+        },
+      },
+    },
+    data() {
+      return {
+        chartOptions: {
+          responsive: false,
+          // Legend on the left
+          plugins: {
+            legend: {
+              position: "bottom",
+            },
+            // Display percentage
+            // tooltip: {
+            //   callbacks: {
+            //     label: context => {
+            //       const label = context.dataset?.label || "";
+            //       const value = context.parsed.y;
+            //       return `${label}: ${value}%`;
+            //     },
+            //   },
+            // },
+          },
+        },
+      };
+    },
+  });
+</script>