feat(chart): add documentation

components/chart/Chart.vue

@@ -16,20 +16,18 @@ import {
   watch,
   PropType,
   shallowRef,
-  onBeforeUpdate,
   onBeforeUnmount,
   toRef,
+  computed,
 } from 'vue-demi'
-import loadData from './adapter/index'
-
-export type TypeVariant = 'bar' | 'line' | 'pie'
+import getAdapter, { ChartType } from './adapter/index'
 
 export type LegendPosition = 'none' | LayoutPosition
 
 export default defineComponent({
   props: {
     variant: {
-      type   : String as PropType<TypeVariant>,
+      type   : String as PropType<ChartType>,
       default: 'line',
     },
     legend: {
@@ -43,24 +41,44 @@ export default defineComponent({
     const variant  = toRef(props, 'variant')
     const legend   = toRef(props, 'legend')
 
+    const data = computed(() => {
+      return getAdapter(variant.value).getDatasets(slots.default())
+    })
+
     function createChart () {
       if (instance.value)
         instance.value.destroy()
 
       instance.value = new Chart(canvas.value, {
         type   : variant.value,
-        data   : loadData(variant.value, slots.default()),
+        data   : data.value,
         options: {
           plugins: {
             legend: {
               display : legend.value !== 'none',
               position: legend.value !== 'none' ? legend.value : undefined,
+              labels  : {
+                color: '#9CA3AF',
+                font : {
+                  family: 'DM Sans',
+                  size  : 12,
+                  weight: '600',
+                },
+              },
             },
           },
+          ...getAdapter(variant.value).getStyle(),
         },
       })
     }
 
+    watch(data, (newData) => {
+      if (instance.value) {
+        instance.value.data = newData
+        instance.value.update()
+      }
+    })
+
     watch([variant, legend], () => {
       createChart()
     })
@@ -69,13 +87,6 @@ export default defineComponent({
       createChart()
     })
 
-    onBeforeUpdate(() => {
-      if (instance.value) {
-        instance.value.data = loadData(variant.value, slots.default())
-        instance.value.update()
-      }
-    })
-
     onBeforeUnmount(() => {
       if (instance.value)
         instance.value.destroy()

components/chart/ChartSet.vue

@@ -9,7 +9,7 @@ export default defineComponent({
   name : 'ChartSet',
   props: {
     name: {
-      type    : String,
+      type    : [String, Number],
       required: true,
     },
   },

components/chart/ChartVal.vue

@@ -9,7 +9,7 @@ export default defineComponent({
   name : 'ChartVal',
   props: {
     name: {
-      type    : String,
+      type    : [String, Number],
       required: true,
     },
     value: {

components/chart/adapter/index.ts

@@ -1,16 +1,25 @@
-import { ChartData } from 'chart.js/auto'
+import { ChartData, ChartOptions } from 'chart.js/auto'
 import { VNode } from 'vue-demi'
 import Line from './line'
 import Pie from './pie'
 
 export type ChartType = 'line' | 'bar' | 'pie'
 
-const CHART_ADAPTER_MAP: Record<ChartType, (vnode: VNode[]) => ChartData> = {
+export interface ChartAdapter {
+  getStyle: () => ChartOptions,
+  getDatasets: (vnodes: VNode[]) => ChartData,
+}
+
+const CHART_ADAPTER_MAP: Record<ChartType, ChartAdapter> = {
   line: Line,
   bar : Line,
   pie : Pie,
 }
 
-export default function getDatasets (type: ChartType, vnodes: VNode[]): ChartData {
-  return CHART_ADAPTER_MAP[type](vnodes)
+export function defineAdapter (adapter: ChartAdapter): ChartAdapter {
+  return adapter
+}
+
+export default function getAdapter (type: ChartType): ChartAdapter {
+  return CHART_ADAPTER_MAP[type]
 }

components/chart/adapter/line.ts

@@ -1,37 +1,72 @@
 import { ChartDataset, ChartData } from 'chart.js'
 import { startCase } from 'lodash'
 import { Slots, VNode } from 'vue-demi'
+import { defineAdapter } from '.'
 import { colorHash } from '../../avatar/utils/color-hash'
 import { findAllChildren } from '../../utils/vnode'
 
-export default function getDatasets (vnodes: VNode[]): ChartData {
-  const sets     = findAllChildren(vnodes, 'ChartSet')
-  const datasets = new Map<string, ChartDataset>()
-  const labels   = [] as string[]
+export default defineAdapter({
+  getDatasets (vnodes: VNode[]): ChartData {
+    const sets     = findAllChildren(vnodes, 'ChartSet')
+    const datasets = new Map<string, ChartDataset>()
+    const labels   = [] as string[]
 
-  for (const set of sets) {
-    const values = findAllChildren((set.children as Slots).default(), 'ChartVal')
+    for (const set of sets) {
+      const values = findAllChildren((set.children as Slots).default(), 'ChartVal')
 
-    for (const value of values) {
-      const item  = datasets.get(value.props.name)
-      const color = value.props.color ?? colorHash(value.props.name).at(1)
+      for (const value of values) {
+        const item  = datasets.get(value.props.name)
+        const color = value.props.color ?? colorHash(value.props.name).at(1)
 
-      if (item) {
-        item.data.push(value.props.value);
-        (item.borderColor as string[]).push(color);
-        (item.backgroundColor as string[]).push(color)
-      } else {
-        datasets.set(value.props.name, {
-          label          : startCase(value.props.name),
-          data           : [value.props.value],
-          borderColor    : [color],
-          backgroundColor: [color],
-        })
+        if (item) {
+          item.data.push(value.props.value);
+          (item.borderColor as string[]).push(color);
+          (item.backgroundColor as string[]).push(color)
+        } else {
+          datasets.set(value.props.name, {
+            label          : startCase(value.props.name),
+            data           : [value.props.value],
+            borderColor    : [color],
+            backgroundColor: [color],
+          })
+        }
       }
+
+      labels.push(startCase(set.props.name))
     }
 
-    labels.push(startCase(set.props.name))
-  }
+    return { labels, datasets: [...datasets.values()] }
+  },
 
-  return { labels, datasets: [...datasets.values()] }
-}
+  getStyle () {
+    return {
+      scales: {
+        x: {
+          ticks: {
+            color: '#9CA3AF',
+            font : {
+              family: 'DM Sans',
+              size  : 12,
+              weight: '600',
+            },
+          },
+          grid: { borderColor: '#BFBFBF' },
+        },
+        y: {
+          ticks: {
+            color: '#9CA3AF',
+            font : {
+              family: 'DM Sans',
+              size  : 12,
+              weight: '600',
+            },
+          },
+          grid: {
+            borderColor: '#BFBFBF',
+            borderDash : [4],
+          },
+        },
+      },
+    }
+  },
+})

components/chart/adapter/pie.ts

@@ -1,35 +1,42 @@
 import { ChartData, ChartDataset } from 'chart.js'
 import { startCase } from 'lodash'
 import { Slots, VNode } from 'vue-demi'
+import { defineAdapter } from '.'
 import { colorHash } from '../../avatar/utils/color-hash'
 import { findAllChildren } from '../../utils/vnode'
 
-export default function getDatasets (vnodes: VNode[]): ChartData {
-  const sets     = findAllChildren(vnodes, 'ChartSet')
-  const datasets = new Map<string, ChartDataset>()
-  const labels   = [] as string[]
+export default defineAdapter({
+  getDatasets (vnodes: VNode[]): ChartData {
+    const sets     = findAllChildren(vnodes, 'ChartSet')
+    const datasets = new Map<string, ChartDataset>()
+    const labels   = [] as string[]
 
-  for (const set of sets) {
-    const values = findAllChildren((set.children as Slots).default(), 'ChartVal')
+    for (const set of sets) {
+      const values = findAllChildren((set.children as Slots).default(), 'ChartVal')
 
-    for (const value of values) {
-      const item  = datasets.get(set.props.name)
-      const color = value.props.color ?? colorHash(value.props.name).at(1)
+      for (const value of values) {
+        const item  = datasets.get(set.props.name)
+        const color = value.props.color ?? colorHash(value.props.name).at(1)
 
-      if (item) {
-        item.data.push(value.props.value);
-        (item.backgroundColor as string[]).push(color)
-      } else {
-        datasets.set(set.props.name, {
-          label          : startCase(set.props.name),
-          data           : [value.props.value],
-          backgroundColor: [color],
-        })
-      }
+        if (item) {
+          item.data.push(value.props.value);
+          (item.backgroundColor as string[]).push(color)
+        } else {
+          datasets.set(set.props.name, {
+            label          : startCase(set.props.name),
+            data           : [value.props.value],
+            backgroundColor: [color],
+          })
+        }
 
-      labels.push(startCase(value.props.name))
+        labels.push(startCase(value.props.name))
+      }
     }
-  }
 
-  return { labels, datasets: [...datasets.values()] }
-}
+    return { labels, datasets: [...datasets.values()] }
+  },
+
+  getStyle () {
+    return {}
+  },
+})