refactor: refactor library

woothu · woothu · commit de1b51e04fcf · 2020-05-28T14:23:38.000+02:00
- add specific chart type exports
- optimize code
- change exports
- update typings
diff --git a/src/CChart.js b/src/CChart.js
@@ -0,0 +1,153 @@
+import React, { useState, useEffect, useRef, useMemo } from 'react'
+import PropTypes from 'prop-types'
+import Chart from 'chart.js'
+import { customTooltips as cuiCustomTooltips } from '@coreui/chartjs'
+import '@coreui/chartjs/dist/css/coreui-chartjs.css'
+
+const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
+const key = () => Math.random().toString(36).replace('0.', '')
+
+//component - CoreUI / CChart
+const CChart = props => {
+  const {
+    innerRef,
+    datasets,
+    labels,
+    options,
+    plugins,
+    type,
+    ...attributes
+  } = props
+
+  const compData = useRef({ firstRun: true }).current
+  const [chart, setChart] = useState()
+  const ref = useRef()
+  const safeId = useState('safe_id_' + key())[0]
+
+  // methods
+  const renderChart = () => {
+    destroyChart()
+    setChart(new Chart(
+      ref.current.getContext('2d'),
+      chartConfig
+    ))
+  }
+
+  const updateChart = () => {
+    Object.assign(chart, chartConfig)
+    chart.update()
+  }
+
+  const destroyChart = () => chart && chart.destroy()
+
+  const dataset = (datasets && datasets[0] && datasets[0].data) || []
+
+  const computedLabels = useMemo(() => {
+    if (labels && typeof labels !== 'string') {
+      return labels
+    }
+    const emptyLabels = Array(dataset.length).fill('')
+    console.log(emptyLabels, dataset)
+    if (labels === 'indexes') {
+      return emptyLabels.map((u, i) => i + 1)
+    } else if (labels === 'months') {
+      return emptyLabels.map((u, i) => months[i % 12])
+    }
+    return emptyLabels
+  }, [JSON.stringify(labels), dataset.length])
+
+
+  const customTooltips = (() => {
+    if (options && options.tooltips) {
+      return
+    }
+    return {
+      tooltips: {
+        enabled: false,
+        custom: cuiCustomTooltips,
+        intersect: true,
+        mode: 'index',
+        position: 'nearest',
+        callbacks: {
+          labelColor(tooltipItem, chart) {
+            function getValue(prop) {
+              return typeof prop === 'object' ? prop[tooltipItem.index] : prop
+            }
+
+            const dataset = chart.data.datasets[tooltipItem.datasetIndex]
+            //tooltipLabelColor is coreUI custom prop used only here
+            const backgroundColor = getValue(
+              dataset.tooltipLabelColor ||
+              dataset.pointHoverBackgroundColor ||
+              dataset.borderColor ||
+              dataset.backgroundColor
+            )
+            return {
+              backgroundColor
+            }
+          }
+        }
+      }
+    }
+  })()
+
+  const computedOptions = (() => {
+    return Object.assign({}, options, customTooltips || {})
+  })()
+
+  const chartConfig = {
+    type,
+    data: {
+      datasets,
+      labels: computedLabels
+    },
+    options: computedOptions,
+    plugins
+  }
+
+  useEffect(() => {
+    if (compData.firstRun) return
+    updateChart()
+  }, [chartConfig])
+
+  useEffect(() => {
+    renderChart()
+    compData.firstRun = false
+    return () => destroyChart()
+  }, [])
+
+  return (
+    <div {...attributes} ref={innerRef}>
+      <canvas id={safeId} ref={ref} />
+    </div>
+  )
+}
+
+CChart.propTypes = {
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]),
+  datasets: PropTypes.array,
+  labels: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
+  options: PropTypes.object,
+  plugins: PropTypes.array,
+  type: PropTypes.string
+}
+
+const CChartBar = props => <CChart {...props} type="bar"/>
+const CChartHorizontalBar = props => <CChart {...props} type="horizontalBar"/>
+const CChartLine = props => <CChart {...props} type="line"/>
+const CChartDoughnut = props => <CChart {...props} type="doughnut"/>
+const CChartRadar = props => <CChart {...props} type="radar"/>
+const CChartPie = props => <CChart {...props} type="pie"/>
+const CChartPolarArea = props => <CChart {...props} type="polarArea"/>
+
+export {
+  CChart,
+  CChartBar,
+  CChartHorizontalBar,
+  CChartLine,
+  CChartDoughnut,
+  CChartRadar,
+  CChartPie,
+  CChartPolarArea
+}
+
diff --git a/src/CCharts.js b/src/CCharts.js
diff --git a/src/index.d.ts b/src/index.d.ts
@@ -1,12 +1,28 @@
-import React from 'react'
-
-interface CCharts {
+interface Charts {
   innerRef?: any;
   datasets?: Array<any>;
   labels?: string | Array<any>;
   options?: any;
   plugins?: Array<any>;
+}
+
+interface CChart extends Charts {
   type?: string;
 }
 
-export declare const CCharts: (props: CCharts) => React.SFC<CCharts>;
+interface CChartBar extends Charts {}
+interface CChartHorizontalBar extends Charts {}
+interface CChartLine extends Charts {}
+interface CChartDoughnut extends Charts {}
+interface CChartRadar extends Charts {}
+interface CChartPie extends Charts {}
+interface CChartPolarArea extends Charts {}
+
+export declare const CChart: (props: CChart) => any
+export declare const CChartBar: (props: CChartBar) => any
+export declare const CChartHorizontalBar: (props: CChartHorizontalBar) => any
+export declare const CChartLine: (props: CChartLine) => any
+export declare const CChartDoughnut: (props: CChartDoughnut) => any
+export declare const CChartRadar: (props: CChartRadar) => any
+export declare const CChartPie: (props: CChartPie) => any
+export declare const CChartPolarArea: (props: CChartPolarArea) => any
diff --git a/src/index.js b/src/index.js
@@ -1,3 +1,21 @@
-// CoreUI 3 index
+import {
+  CChart,
+  CChartBar,
+  CChartHorizontalBar,
+  CChartLine,
+  CChartDoughnut,
+  CChartRadar,
+  CChartPie,
+  CChartPolarArea,
+} from './CChart'
 
-export {default as CCharts} from './CCharts';
+export {
+  CChart,
+  CChartBar,
+  CChartHorizontalBar,
+  CChartLine,
+  CChartDoughnut,
+  CChartRadar,
+  CChartPie,
+  CChartPolarArea
+}
