Skip to content

Commit ae8b43f

Browse files
mrholekmrholek
committed
release: v2.0.0-alpha.0
1 parent 6f1dee3 commit ae8b43f

File tree

9 files changed

+580
-8173
lines changed

9 files changed

+580
-8173
lines changed

‎.eslintrc.js‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,16 +13,13 @@ module.exports = {
1313
},
1414
},
1515
extends: [
16-
'plugin:jsdoc/recommended',
1716
'plugin:react/recommended', // Uses the recommended rules from @eslint-plugin-react
1817
'plugin:@typescript-eslint/recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin
19-
'prettier/@typescript-eslint', // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
2018
'plugin:prettier/recommended', // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
2119
],
2220
plugins: ['jsdoc', '@typescript-eslint', 'react', 'react-hooks'],
23-
// rules: {
24-
// // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
25-
// // e.g. "@typescript-eslint/explicit-function-return-type": "off",
26-
// 'react/prop-types': 'off',
27-
// },
21+
rules: {
22+
// Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
23+
// e.g. "@typescript-eslint/explicit-function-return-type": "off",
24+
},
2825
}

‎.vscode/settings.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"editor.defaultFormatter": "esbenp.prettier-vscode"
3+
}

‎package.json‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,10 +31,11 @@
3131
"README.md"
3232
],
3333
"scripts": {
34-
"build": "rollup -c"
34+
"build": "rollup -c",
35+
"lint": "eslint 'src/**/*.{js,ts,tsx}'"
3536
},
3637
"dependencies": {
37-
"@coreui/chartjs": "^3.0.0-alpha.0",
38+
"@coreui/chartjs": "^3.0.0-rc.0",
3839
"chart.js": "^3.2.1"
3940
},
4041
"peerDependencies": {
@@ -45,13 +46,19 @@
4546
"@rollup/plugin-node-resolve": "^13.0.0",
4647
"@types/lodash": "^4.14.169",
4748
"@types/react": "^17.0.5",
49+
"@typescript-eslint/eslint-plugin": "^4.24.0",
50+
"@typescript-eslint/parser": "^4.24.0",
4851
"babel-eslint": "^10.1.0",
4952
"classnames": "^2.3.1",
5053
"eslint": "^7.26.0",
54+
"eslint-config-prettier": "^8.3.0",
5155
"eslint-plugin-import": "^2.23.2",
56+
"eslint-plugin-jsdoc": "^34.8.2",
57+
"eslint-plugin-prettier": "^3.4.0",
5258
"eslint-plugin-react": "^7.23.2",
5359
"eslint-plugin-react-hooks": "^4.2.0",
5460
"lodash": "^4.17.21",
61+
"prettier": "^2.3.0",
5562
"prop-types": "^15.7.2",
5663
"rollup": "^2.48.0",
5764
"rollup-plugin-peer-deps-external": "^2.2.4",

‎rollup.config.js‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,10 +29,6 @@ export default {
2929
}),
3030
commonjs({
3131
include: ['node_modules/**'],
32-
namedExports: {
33-
'node_modules/react/react.js': ['Children', 'Component', 'PropTypes', 'createElement'],
34-
'node_modules/react-dom/index.js': ['render'],
35-
},
3632
}),
3733
],
3834
}

‎src/CChart.tsx‎

Lines changed: 156 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,147 @@
1+
import PropTypes from 'prop-types'
12
import React, {
3+
forwardRef,
24
HTMLAttributes,
35
useEffect,
4-
useState,
5-
useRef,
66
useImperativeHandle,
77
useMemo,
8-
forwardRef,
8+
useState,
9+
useRef,
910
} from 'react'
1011

1112
import Chart from 'chart.js/auto'
12-
import * as chartjs from 'chart.js';
13+
import * as chartjs from 'chart.js'
1314
import { customTooltips as cuiCustomTooltips } from '@coreui/chartjs'
1415

1516
import merge from 'lodash/merge'
1617
import assign from 'lodash/assign'
1718
import find from 'lodash/find'
1819

1920
export interface CChartProps extends HTMLAttributes<HTMLCanvasElement | HTMLDivElement> {
20-
id?: string
21+
/**
22+
* A string of all className you want applied to the base component.
23+
*/
2124
className?: string
22-
defaults?: any
23-
height?: number
24-
width?: number
25-
redraw?: boolean
26-
type: Chart.ChartType
25+
/**
26+
* Enables custom html based tooltips instead of standard tooltips.
27+
*
28+
* @default true
29+
*/
30+
customTooltips?: boolean
31+
/**
32+
* The data object that is passed into the Chart.js chart (more info).
33+
*/
2734
data: Chart.ChartData | ((canvas: HTMLCanvasElement) => Chart.ChartData)
28-
options?: Chart.ChartOptions
35+
/**
36+
* A fallback for when the canvas cannot be rendered. Can be used for accessible chart descriptions.
37+
*
38+
* {@link https://www.chartjs.org/docs/latest/general/accessibility.html More Info}
39+
*/
2940
fallbackContent?: React.ReactNode
30-
plugins?: Chart.PluginServiceRegistrationOptions[]
41+
/**
42+
* Proxy for Chart.js getDatasetAtEvent. Calls with dataset and triggering event.
43+
*/
3144
getDatasetAtEvent?: (dataset: Array<{}>, event: React.MouseEvent<HTMLCanvasElement>) => void
45+
/**
46+
* Proxy for Chart.js getElementAtEvent. Calls with single element array and triggering event.
47+
*/
3248
getElementAtEvent?: (element: [{}], event: React.MouseEvent<HTMLCanvasElement>) => void
49+
/**
50+
* Proxy for Chart.js getElementsAtEvent. Calls with element array and triggering event.
51+
*/
3352
getElementsAtEvent?: (elements: Array<{}>, event: React.MouseEvent<HTMLCanvasElement>) => void
53+
/**
54+
* Height attribute applied to the rendered canvas.
55+
*
56+
* @default 150
57+
*/
58+
height?: number
59+
/**
60+
* ID attribute applied to the rendered canvas.
61+
*/
62+
id?: string
63+
/**
64+
* The options object that is passed into the Chart.js chart.
65+
*
66+
* {@link https://www.chartjs.org/docs/latest/general/options.html More Info}
67+
*/
68+
options?: Chart.ChartOptions
69+
/**
70+
* The plugins array that is passed into the Chart.js chart (more info)
71+
*
72+
* {@link https://www.chartjs.org/docs/latest/developers/plugins.html More Info}
73+
*/
74+
plugins?: Chart.PluginServiceRegistrationOptions[]
75+
/**
76+
* If true, will tear down and redraw chart on all updates.
77+
*
78+
* @default false
79+
*/
80+
redraw?: boolean
81+
/**
82+
* Chart.js chart type.
83+
*
84+
* @type {'line' | 'bar' | 'horizontalBar' | 'radar' | 'doughnut' | 'polarArea' | 'bubble' | 'pie' | 'scatter'}
85+
*/
86+
type: Chart.ChartType
87+
/**
88+
* Width attribute applied to the rendered canvas.
89+
*
90+
* @default 300
91+
*/
92+
width?: number
93+
/**
94+
* Put the chart into the wrapper div element.
95+
*
96+
* @default true
97+
*/
98+
wrapper?: boolean
3499
}
35100

36101
export const CChart = forwardRef<Chart | undefined, CChartProps>((props, ref) => {
37102
const {
38-
id,
39103
className,
40-
height = 150,
41-
width = 300,
42-
redraw = false,
43-
type,
104+
customTooltips = true,
44105
data,
45-
options,
46-
plugins = [],
106+
id,
107+
fallbackContent,
47108
getDatasetAtEvent,
48109
getElementAtEvent,
49110
getElementsAtEvent,
50-
fallbackContent,
111+
height = 150,
112+
options,
113+
plugins = [],
114+
redraw = false,
115+
type,
116+
width = 300,
117+
wrapper = true,
51118
...rest
52119
} = props
53120

54-
const canvas = useRef<HTMLCanvasElement>(null)
121+
const canvasRef = useRef<HTMLCanvasElement>(null)
55122

56123
const computedData = useMemo<Chart.ChartData>(() => {
57124
if (typeof data === 'function') {
58-
return canvas.current ? data(canvas.current) : {}
125+
return canvasRef.current ? data(canvasRef.current) : {}
59126
} else return merge({}, data)
60-
}, [data, canvas.current])
127+
}, [data, canvasRef.current])
61128

62129
const [chart, setChart] = useState<Chart>()
63130

64131
useImperativeHandle<Chart | undefined, Chart | undefined>(ref, () => chart, [chart])
65132

66133
const renderChart = () => {
67-
if (!canvas.current) return
134+
if (!canvasRef.current) return
135+
136+
if (customTooltips) {
137+
chartjs.defaults.plugins.tooltip.enabled = false
138+
chartjs.defaults.plugins.tooltip.mode = 'index'
139+
chartjs.defaults.plugins.tooltip.position = 'nearest'
140+
chartjs.defaults.plugins.tooltip.external = cuiCustomTooltips
141+
}
68142

69-
chartjs.defaults.plugins.tooltip.enabled = false
70-
chartjs.defaults.plugins.tooltip.mode = 'index'
71-
chartjs.defaults.plugins.tooltip.position = 'nearest'
72-
chartjs.defaults.plugins.tooltip.external = cuiCustomTooltips
73-
74143
setChart(
75-
new Chart(canvas.current, {
144+
new Chart(canvasRef.current, {
76145
type,
77146
data: computedData,
78147
options,
@@ -167,19 +236,73 @@ export const CChart = forwardRef<Chart | undefined, CChartProps>((props, ref) =>
167236
}
168237
}, [props, computedData])
169238

170-
return (
171-
<div className={`chart-wrapper ${className}`} {...rest}>
239+
const canvas = (ref: React.Ref<HTMLCanvasElement>) => {
240+
return (
172241
<canvas
173242
height={height}
174243
width={width}
175-
ref={canvas}
244+
ref={ref}
176245
id={id}
177246
onClick={onClick}
178247
data-testid="canvas"
179248
role="img"
180249
>
181250
{fallbackContent}
182251
</canvas>
252+
)
253+
}
254+
255+
return wrapper ? (
256+
<div className={`chart-wrapper ${className}`} {...rest}>
257+
{canvas(canvasRef)}
183258
</div>
259+
) : (
260+
canvas(canvasRef)
184261
)
262+
263+
// return (
264+
// <div className={`chart-wrapper ${className}`} {...rest}>
265+
// <canvas
266+
// height={height}
267+
// width={width}
268+
// ref={canvasRef}
269+
// id={id}
270+
// onClick={onClick}
271+
// data-testid="canvas"
272+
// role="img"
273+
// >
274+
// {fallbackContent}
275+
// </canvas>
276+
// </div>
277+
// )
185278
})
279+
280+
CChart.propTypes = {
281+
className: PropTypes.string,
282+
customTooltips: PropTypes.bool,
283+
data: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), // TODO: check
284+
fallbackContent: PropTypes.node,
285+
getDatasetAtEvent: PropTypes.func, // TODO: check
286+
getElementAtEvent: PropTypes.func, // TODO: check
287+
getElementsAtEvent: PropTypes.func, // TODO: check
288+
height: PropTypes.number,
289+
id: PropTypes.string,
290+
options: PropTypes.object, // TODO: check
291+
plugins: PropTypes.array, // TODO: check
292+
redraw: PropTypes.bool,
293+
type: PropTypes.oneOf([
294+
'line',
295+
'bar',
296+
'horizontalBar',
297+
'radar',
298+
'doughnut',
299+
'polarArea',
300+
'bubble',
301+
'pie',
302+
'scatter',
303+
]),
304+
width: PropTypes.number,
305+
wrapper: PropTypes.bool
306+
}
307+
308+
CChart.displayName = 'CChart'

‎src/index.ts‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
11
import { CChart } from './CChart'
22

3-
export {
4-
CChart
5-
}
3+
export { CChart }

‎src/useForkedRef.ts‎

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

‎tsconfig.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,4 +21,4 @@
2121
},
2222
"include": ["src"],
2323
"exclude": ["node_modules", "dist"]
24-
}
24+
}

0 commit comments

Comments
 (0)