Skip to content

Commit 0c1c5b5

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

File tree

5 files changed

+213
-75
lines changed

5 files changed

+213
-75
lines changed

‎README.md‎

Lines changed: 129 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,23 @@
99
[npm-download]: https://img.shields.io/npm/dm/@coreui/react-chartjs.svg?style=flat-square
1010

1111
##### install:
12+
1213
```bash
13-
npm install @coreui/react-chartjs
14+
npm install @coreui/react-chartjs@next
15+
16+
# or
17+
18+
yarn add @coreui/react-chartjs@next
1419
```
1520

16-
##### import:
21+
##### import:
22+
1723
```jsx
18-
import { CChart } from '@coreui/react-chartjs';
24+
import { CChart } from '@coreui/react-chartjs'
1925
```
20-
or
26+
27+
or
28+
2129
```js
2230
import {
2331
CChart,
@@ -31,79 +39,145 @@ import {
3139
} from '@coreui/react-chartjs'
3240
```
3341

34-
##### props:
35-
- `innerRef` object | func | string
36-
- `datasets` array
37-
- `labels` array | string
38-
- `options` object
39-
- `plugins` array
40-
- `type` string: `bar` | `horizontalBar` | `line` | `doughnut` | `radar` | `pie` | `polarArea`
42+
##### props:
43+
44+
```js
45+
46+
/**
47+
* A string of all className you want applied to the base component.
48+
*/
49+
className?: string
50+
/**
51+
* Enables custom html based tooltips instead of standard tooltips.
52+
*
53+
* @default true
54+
*/
55+
customTooltips?: boolean
56+
/**
57+
* The data object that is passed into the Chart.js chart (more info).
58+
*/
59+
data: Chart.ChartData | ((canvas: HTMLCanvasElement) => Chart.ChartData)
60+
/**
61+
* A fallback for when the canvas cannot be rendered. Can be used for accessible chart descriptions.
62+
*
63+
* {@link https://www.chartjs.org/docs/latest/general/accessibility.html More Info}
64+
*/
65+
fallbackContent?: React.ReactNode
66+
/**
67+
* Proxy for Chart.js getDatasetAtEvent. Calls with dataset and triggering event.
68+
*/
69+
getDatasetAtEvent?: (dataset: Array<{}>, event: React.MouseEvent<HTMLCanvasElement>) => void
70+
/**
71+
* Proxy for Chart.js getElementAtEvent. Calls with single element array and triggering event.
72+
*/
73+
getElementAtEvent?: (element: [{}], event: React.MouseEvent<HTMLCanvasElement>) => void
74+
/**
75+
* Proxy for Chart.js getElementsAtEvent. Calls with element array and triggering event.
76+
*/
77+
getElementsAtEvent?: (elements: Array<{}>, event: React.MouseEvent<HTMLCanvasElement>) => void
78+
/**
79+
* Height attribute applied to the rendered canvas.
80+
*
81+
* @default 150
82+
*/
83+
height?: number
84+
/**
85+
* ID attribute applied to the rendered canvas.
86+
*/
87+
id?: string
88+
/**
89+
* The options object that is passed into the Chart.js chart.
90+
*
91+
* {@link https://www.chartjs.org/docs/latest/general/options.html More Info}
92+
*/
93+
options?: Chart.ChartOptions
94+
/**
95+
* The plugins array that is passed into the Chart.js chart (more info)
96+
*
97+
* {@link https://www.chartjs.org/docs/latest/developers/plugins.html More Info}
98+
*/
99+
plugins?: Chart.PluginServiceRegistrationOptions[]
100+
/**
101+
* If true, will tear down and redraw chart on all updates.
102+
*
103+
* @default false
104+
*/
105+
redraw?: boolean
106+
/**
107+
* Chart.js chart type.
108+
*
109+
* @type {'line' | 'bar' | 'horizontalBar' | 'radar' | 'doughnut' | 'polarArea' | 'bubble' | 'pie' | 'scatter'}
110+
*/
111+
type: Chart.ChartType
112+
/**
113+
* Width attribute applied to the rendered canvas.
114+
*
115+
* @default 300
116+
*/
117+
width?: number
118+
/**
119+
* Put the chart into the wrapper div element.
120+
*
121+
* @default true
122+
*/
123+
wrapper?: boolean
124+
```
41125

42126
##### usage:
127+
43128
```jsx
44129
...
45130
class CoreUICharts extends Component {
46131
...
47132
render() {
48133
return (
49134
<CChart
50-
type="radar"
51-
datasets={[
52-
{
53-
label: '2019',
54-
backgroundColor: 'rgba(179,181,198,0.2)',
55-
borderColor: 'rgba(179,181,198,1)',
56-
pointBackgroundColor: 'rgba(179,181,198,1)',
57-
pointBorderColor: '#fff',
58-
pointHoverBackgroundColor: '#fff',
59-
pointHoverBorderColor: 'rgba(179,181,198,1)',
60-
tooltipLabelColor: 'rgba(179,181,198,1)',
61-
data: [65, 59, 90, 81, 56, 55, 40]
62-
},
63-
{
64-
label: '2020',
65-
backgroundColor: 'rgba(255,99,132,0.2)',
66-
borderColor: 'rgba(255,99,132,1)',
67-
pointBackgroundColor: 'rgba(255,99,132,1)',
68-
pointBorderColor: '#fff',
69-
pointHoverBackgroundColor: '#fff',
70-
pointHoverBorderColor: 'rgba(255,99,132,1)',
71-
tooltipLabelColor: 'rgba(255,99,132,1)',
72-
data: [28, 48, 40, 19, 96, 27, 100]
73-
}
74-
]}
135+
type='line'
136+
data={{
137+
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
138+
datasets: [
139+
{
140+
label: '2019',
141+
backgroundColor: 'rgba(179,181,198,0.2)',
142+
borderColor: 'rgba(179,181,198,1)',
143+
pointBackgroundColor: 'rgba(179,181,198,1)',
144+
pointBorderColor: '#fff',
145+
pointHoverBackgroundColor: '#fff',
146+
pointHoverBorderColor: 'rgba(179,181,198,1)',
147+
tooltipLabelColor: 'rgba(179,181,198,1)',
148+
data: [65, 59, 90, 81, 56, 55, 40]
149+
},
150+
{
151+
label: '2020',
152+
backgroundColor: 'rgba(255,99,132,0.2)',
153+
borderColor: 'rgba(255,99,132,1)',
154+
pointBackgroundColor: 'rgba(255,99,132,1)',
155+
pointBorderColor: '#fff',
156+
pointHoverBackgroundColor: '#fff',
157+
pointHoverBorderColor: 'rgba(255,99,132,1)',
158+
tooltipLabelColor: 'rgba(255,99,132,1)',
159+
data: [28, 48, 40, 19, 96, 27, 100]
160+
}
161+
],
162+
}}
75163
options={{
76164
aspectRatio: 1.5,
77165
tooltips: {
78166
enabled: true
79167
}
80168
}}
81-
labels={[
82-
'Eating', 'Drinking', 'Sleeping', 'Designing',
83-
'Coding', 'Cycling', 'Running'
84-
]}
85169
/>
86170
)
87171
}
88172
...
89173
```
90174
91-
---
92-
93-
- bootstrapped with [nwb](https://github.com/insin/nwb) toolkit
94-
95175
##### `npm run` scripts
96176
97-
`package.json` is configured with `"scripts"` we can use with `npm run` while developing the project.
177+
`package.json` is configured with `"scripts"` we can use with `npm run` or `yarn` while developing the project.
98178
99-
Command | Description |
100-
--- | ---
101-
`npm start` | start a development server for the demo app
102-
`npm test` | run tests
103-
`npm run test:coverage` | run tests and produce a code coverage report in `coverage/`
104-
`npm run test:watch` | start a test server and re-run tests on every change
105-
`npm run build` | prepare for publishing to npm
106-
`npm run clean` | delete built resources
179+
| Command | Description |
180+
| ------------------------------- | ------------------------------ |
181+
| `npm run build` or `yarn build` | build production ready version |
182+
| `npm run lint` or `yarn lint` | run eslint |
107183
108-
#### see also:
109-
- [Developing React Components and Libraries with nwb](https://github.com/insin/nwb/blob/master/docs/guides/ReactComponents.md#developing-react-components-and-libraries-with-nwb)

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@coreui/react-chartjs",
3-
"version": "2.0.0-alpha.0",
3+
"version": "2.0.0-alpha.1",
44
"description": "CoreUI React component wrapper for chart.js",
55
"license": "MIT",
66
"homepage": "https://coreui.io",

‎src/CChart.tsx‎

Lines changed: 2 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,9 @@ import Chart from 'chart.js/auto'
1313
import * as chartjs from 'chart.js'
1414
import { customTooltips as cuiCustomTooltips } from '@coreui/chartjs'
1515

16-
import merge from 'lodash/merge'
1716
import assign from 'lodash/assign'
1817
import find from 'lodash/find'
18+
import merge from 'lodash/merge'
1919

2020
export interface CChartProps extends HTMLAttributes<HTMLCanvasElement | HTMLDivElement> {
2121
/**
@@ -259,22 +259,6 @@ export const CChart = forwardRef<Chart | undefined, CChartProps>((props, ref) =>
259259
) : (
260260
canvas(canvasRef)
261261
)
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-
// )
278262
})
279263

280264
CChart.propTypes = {
@@ -302,7 +286,7 @@ CChart.propTypes = {
302286
'scatter',
303287
]),
304288
width: PropTypes.number,
305-
wrapper: PropTypes.bool
289+
wrapper: PropTypes.bool,
306290
}
307291

308292
CChart.displayName = 'CChart'

‎src/CCharts.tsx‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import React, { forwardRef } from 'react'
2+
import { CChart, CChartProps } from './CChart'
3+
import Chart from 'chart.js/auto'
4+
// import * as chartjs from 'chart.js';
5+
6+
export const CChartBar = forwardRef<Chart | undefined, CChartProps>((props, ref) => (
7+
<CChart {...props} type="bar" ref={ref} />
8+
))
9+
10+
CChartBar.displayName = 'CChartBar'
11+
12+
export const CChartBubble = forwardRef<Chart | undefined, CChartProps>((props, ref) => (
13+
<CChart {...props} type="bubble" ref={ref} />
14+
))
15+
16+
CChartBubble.displayName = 'CChartBubble'
17+
18+
export const CChartDoughnut = forwardRef<Chart | undefined, CChartProps>((props, ref) => (
19+
<CChart {...props} type="doughnut" ref={ref} />
20+
))
21+
22+
CChartDoughnut.displayName = 'CChartDoughnut'
23+
24+
export const CChartHorizontalBar = forwardRef<Chart | undefined, CChartProps>((props, ref) => (
25+
<CChart {...props} type="horizontalBar" ref={ref} />
26+
))
27+
28+
CChartHorizontalBar.displayName = 'CChartHorizontalBar'
29+
30+
export const CChartLine = forwardRef<Chart | undefined, CChartProps>((props, ref) => (
31+
<CChart {...props} type="line" ref={ref} />
32+
))
33+
34+
CChartLine.displayName = 'CChartLine'
35+
36+
export const CChartPie = forwardRef<Chart | undefined, CChartProps>((props, ref) => (
37+
<CChart {...props} type="pie" ref={ref} />
38+
))
39+
40+
CChartPie.displayName = 'CChartPie'
41+
42+
export const CChartPolarArea = forwardRef<Chart | undefined, CChartProps>((props, ref) => (
43+
<CChart {...props} type="polarArea" ref={ref} />
44+
))
45+
46+
CChartPolarArea.displayName = 'CChartPolarArea'
47+
48+
export const CChartRadar = forwardRef<Chart | undefined, CChartProps>((props, ref) => (
49+
<CChart {...props} type="radar" ref={ref} />
50+
))
51+
52+
CChartRadar.displayName = 'CChartRadar'
53+
54+
export const CChartScatter = forwardRef<Chart | undefined, CChartProps>((props, ref) => (
55+
<CChart {...props} type="scatter" ref={ref} />
56+
))
57+
58+
CChartScatter.displayName = 'CChartScatter'

‎src/index.ts‎

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,25 @@
11
import { CChart } from './CChart'
2+
import {
3+
CChartBar,
4+
CChartBubble,
5+
CChartDoughnut,
6+
CChartHorizontalBar,
7+
CChartLine,
8+
CChartPie,
9+
CChartPolarArea,
10+
CChartRadar,
11+
CChartScatter,
12+
} from './CCharts'
213

3-
export { CChart }
14+
export {
15+
CChart,
16+
CChartBar,
17+
CChartBubble,
18+
CChartDoughnut,
19+
CChartHorizontalBar,
20+
CChartLine,
21+
CChartPie,
22+
CChartPolarArea,
23+
CChartRadar,
24+
CChartScatter,
25+
}

0 commit comments

Comments
 (0)