Skip to content

Commit 5e4e5ca

Browse files
xidedixxidedix
committed
refactor(CCharts): cleanup
1 parent 35a26d7 commit 5e4e5ca

File tree

2 files changed

+47
-114
lines changed

2 files changed

+47
-114
lines changed

‎src/CCharts.js

Lines changed: 47 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
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';
42
import 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

1311
const {
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;
2725
const [chart, setChart] = useState();
2826
const ref = useRef();
2927

@@ -32,58 +30,58 @@ const CCharts = props=>{
3230

3331
// methods
3432

35-
const renderChart = ()=>{
36-
destroyChart()
33+
const renderChart = () => {
34+
destroyChart();
3735
setChart(new Chart(
3836
ref.current.getContext('2d'),
3937
chartConfig
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 = () => {
4745
if (chart) {
48-
chart.destroy()
46+
chart.destroy();
4947
}
50-
}
48+
};
5149

5250
// vars
5351

5452
const _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 = (() => {
6563
if (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('');
7169
if (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 = (() => {
7977
return {
8078
datasets: computedDatasets,
8179
labels: computedLabels
82-
}
80+
};
8381
})();
84-
const customTooltips = (()=>{
82+
const customTooltips = (() => {
8583
if (options && options.tooltips) {
86-
return
84+
return;
8785
}
8886
return {
8987
tooltips: {
@@ -95,52 +93,52 @@ const CCharts = props=>{
9593
callbacks: {
9694
labelColor(tooltipItem, chart) {
9795
function 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
102101
const backgroundColor = getValue(
103102
dataset.tooltipLabelColor ||
104103
dataset.pointHoverBackgroundColor ||
105104
dataset.borderColor ||
106105
dataset.backgroundColor
107-
)
106+
);
108107
return {
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 = (() => {
120119
return {
121120
type: type,
122121
data: computedData,
123122
options: computedOptions || options,
124123
plugins: plugins
125-
}
124+
};
126125
})();
127126

128127
//watch
129128

130129
//chartConfig
131-
useMemo(()=>{
130+
useMemo(() => {
132131
if (compData.firstRun) return;
133132
updateChart();
134133
}, [chartConfig]);
135134

136-
137135
// effect
138136

139137
useEffect(() => {
140138
renderChart();
141139
compData.firstRun = false;
142140
return () => {
143-
destroyChart()
141+
destroyChart();
144142
};
145143
}, []);
146144

@@ -152,7 +150,7 @@ const CCharts = props=>{
152150
</div>
153151
);
154152

155-
}
153+
};
156154

157155
CCharts.propTypes = {
158156
//
@@ -164,7 +162,6 @@ CCharts.propTypes = {
164162
type: PropTypes.string
165163
};
166164

167-
CCharts.defaultProps = {
168-
};
165+
CCharts.defaultProps = {};
169166

170167
export default CCharts;

‎src/CCharts2.js

Lines changed: 0 additions & 64 deletions
This file was deleted.

0 commit comments

Comments
 (0)