1- import 'react-app-polyfill/ie11' ; // For IE 11 support
2- import 'react-app-polyfill/stable' ;
3- import React , { useState , useEffect , useRef , useMemo } from 'react' ;
1+ import React , { useState , useEffect , useRef , useMemo } from 'react' ;
42import PropTypes from 'prop-types' ;
5- import Chart from 'chart.js'
6- import { customTooltips as cuiCustomTooltips } from '@coreui/chartjs'
7- import " @coreui/chartjs/dist/css/coreui-chartjs.css" ;
3+ import Chart from 'chart.js' ;
4+ import { customTooltips as cuiCustomTooltips } from '@coreui/chartjs' ;
5+ import ' @coreui/chartjs/dist/css/coreui-chartjs.css' ;
86
97//component - CoreUI / CCharts
108
11- const CCharts = props => {
9+ const CCharts = props => {
1210
1311const {
1412//
@@ -23,7 +21,7 @@ const CCharts = props=>{
2321
2422//console.log(Chart);
2523
26- const compData = useRef ( { firstRun :true } ) . current ;
24+ const compData = useRef ( { firstRun :true } ) . current ;
2725const [ chart , setChart ] = useState ( ) ;
2826const ref = useRef ( ) ;
2927
@@ -32,58 +30,58 @@ const CCharts = props=>{
3230
3331// methods
3432
35- const renderChart = ( ) => {
36- destroyChart ( )
33+ const renderChart = ( ) => {
34+ destroyChart ( ) ;
3735setChart ( new Chart (
3836ref . current . getContext ( '2d' ) ,
3937chartConfig
40- ) )
41- }
42- const updateChart = ( ) => {
43- Object . assign ( chart , chartConfig )
44- chart . update ( )
45- }
46- const destroyChart = ( ) => {
38+ ) ) ;
39+ } ;
40+ const updateChart = ( ) => {
41+ Object . assign ( chart , chartConfig ) ;
42+ chart . update ( ) ;
43+ } ;
44+ const destroyChart = ( ) => {
4745if ( chart ) {
48- chart . destroy ( )
46+ chart . destroy ( ) ;
4947}
50- }
48+ } ;
5149
5250// vars
5351
5452const _uid = '' ;
55- const safeId = ( ( ) => {
53+ const safeId = ( ( ) => {
5654// as long as this._uid() works there is no need to generate the key
57- const key = ( ) => Math . random ( ) . toString ( 36 ) . replace ( '0.' , '' )
58- return '__safe_id__' + ( _uid || key ( ) )
55+ const key = ( ) => Math . random ( ) . toString ( 36 ) . replace ( '0.' , '' ) ;
56+ return '__safe_id__' + ( _uid || key ( ) ) ;
5957} ) ( ) ;
60- const computedDatasets = ( ( ) => {
61- return datasets
58+ const computedDatasets = ( ( ) => {
59+ return datasets ;
6260} ) ( ) ;
6361//
64- const computedLabels = ( ( ) => {
62+ const computedLabels = ( ( ) => {
6563if ( labels && typeof labels !== 'string' ) {
66- return labels
64+ return labels ;
6765} else if ( ! datasets || ! datasets [ 0 ] || ! datasets [ 0 ] . data ) {
68- return [ ]
66+ return [ ] ;
6967}
70- const emptyLabels = Array ( datasets [ 0 ] . data . length ) . fill ( '' )
68+ const emptyLabels = Array ( datasets [ 0 ] . data . length ) . fill ( '' ) ;
7169if ( labels === 'indexes' ) {
72- return emptyLabels . map ( ( u , i ) => i + 1 )
70+ return emptyLabels . map ( ( u , i ) => i + 1 ) ;
7371} else if ( labels === 'months' ) {
74- return emptyLabels . map ( ( u , i ) => months [ i % 12 ] )
72+ return emptyLabels . map ( ( u , i ) => months [ i % 12 ] ) ;
7573}
76- return emptyLabels
74+ return emptyLabels ;
7775} ) ( ) ;
78- const computedData = ( ( ) => {
76+ const computedData = ( ( ) => {
7977return {
8078datasets :computedDatasets ,
8179labels :computedLabels
82- }
80+ } ;
8381} ) ( ) ;
84- const customTooltips = ( ( ) => {
82+ const customTooltips = ( ( ) => {
8583if ( options && options . tooltips ) {
86- return
84+ return ;
8785}
8886return {
8987tooltips :{
@@ -95,52 +93,52 @@ const CCharts = props=>{
9593callbacks :{
9694labelColor ( tooltipItem , chart ) {
9795function getValue ( prop ) {
98- return typeof prop === 'object' ?prop [ tooltipItem . index ] :prop
96+ return typeof prop === 'object' ?prop [ tooltipItem . index ] :prop ;
9997}
100- const dataset = chart . data . datasets [ tooltipItem . datasetIndex ]
98+
99+ const dataset = chart . data . datasets [ tooltipItem . datasetIndex ] ;
101100//tooltipLabelColor is coreUI custom prop used only here
102101const backgroundColor = getValue (
103102dataset . tooltipLabelColor ||
104103dataset . pointHoverBackgroundColor ||
105104dataset . borderColor ||
106105dataset . backgroundColor
107- )
106+ ) ;
108107return {
109108 backgroundColor
110- }
109+ } ;
111110}
112111}
113112}
114- }
113+ } ;
115114} ) ( ) ;
116- const computedOptions = ( ( ) => {
117- return Object . assign ( { } , options , customTooltips || { } )
115+ const computedOptions = ( ( ) => {
116+ return Object . assign ( { } , options , customTooltips || { } ) ;
118117} ) ( ) ;
119- const chartConfig = ( ( ) => {
118+ const chartConfig = ( ( ) => {
120119return {
121120type :type ,
122121data :computedData ,
123122options :computedOptions || options ,
124123plugins :plugins
125- }
124+ } ;
126125} ) ( ) ;
127126
128127//watch
129128
130129//chartConfig
131- useMemo ( ( ) => {
130+ useMemo ( ( ) => {
132131if ( compData . firstRun ) return ;
133132updateChart ( ) ;
134133} , [ chartConfig ] ) ;
135134
136-
137135// effect
138136
139137useEffect ( ( ) => {
140138renderChart ( ) ;
141139compData . firstRun = false ;
142140return ( ) => {
143- destroyChart ( )
141+ destroyChart ( ) ;
144142} ;
145143} , [ ] ) ;
146144
@@ -152,7 +150,7 @@ const CCharts = props=>{
152150</ div >
153151) ;
154152
155- }
153+ } ;
156154
157155CCharts . propTypes = {
158156//
@@ -164,7 +162,6 @@ CCharts.propTypes = {
164162type :PropTypes . string
165163} ;
166164
167- CCharts . defaultProps = {
168- } ;
165+ CCharts . defaultProps = { } ;
169166
170167export default CCharts ;