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)
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