Skip to content

Commit 5e4e5ca

Browse files
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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy