Skip to content

Commit 8a52a51

Browse files
mrholekmrholek
committed
release: @coreui/react-chartjs v2.0.0-rc.0
1 parent a58e725 commit 8a52a51

File tree

15 files changed

+1169
-1
lines changed

15 files changed

+1169
-1
lines changed

‎packages/coreui-react-chartjs/.eslintignore

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
test/coverage/
2+
es/
3+
lib/
4+
umd/

‎packages/coreui-react-chartjs/.eslintrc.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
module.exports = {
2+
extends: './../coreui-react/.eslintrc.js',
3+
}

‎packages/coreui-react-chartjs/.prettierignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
dist/

‎packages/coreui-react-chartjs/.prettierrc.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
module.exports = {
2+
semi: false,
3+
trailingComma: "all",
4+
singleQuote: true,
5+
printWidth: 100,
6+
tabWidth: 2
7+
};

‎packages/coreui-react-chartjs/CHANGELOG.md

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
### [@coreui/react-chartjs](https://coreui.io/) changelog
2+
3+
##### `1.1.0`
4+
- chore: update to React 17
5+
- fix(typings): add ChartDataSets, ChartOptions - closes #1
6+
7+
##### `1.0.1`
8+
- chore: fix typings, add typings to "files" in package.json
9+
10+
##### `1.0.0-alpha.4`
11+
BREAKING CHANGE:
12+
- `<CCharts>` component has been deprecated and will be removed in v1.0.0
13+
- use `<CChart type="...">` instead
14+
or one of following types:
15+
`<CChartBar>`
16+
`<CChartHorizontalBar>`
17+
`<CChartLine>`
18+
`<CChartDoughnut>`
19+
`<CChartRadar>`
20+
`<CChartPie>`
21+
`<CChartPolarArea>`
22+
23+
sample import:
24+
```jsx
25+
import {
26+
CChart,
27+
CChartBar,
28+
CChartHorizontalBar,
29+
CChartLine,
30+
CChartDoughnut,
31+
CChartRadar,
32+
CChartPie,
33+
CChartPolarArea
34+
} from '@coreui/react-chartjs';
35+
```
36+
37+
38+
##### `1.0.0-alpha.0`
39+
- initial version
40+
41+
install:
42+
```bash
43+
npm install @coreui/react
44+
npm install @coreui/react-chartjs
45+
```
46+

‎packages/coreui-react-chartjs/LICENSE

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2021 creativeLabs Łukasz Holeczek
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎packages/coreui-react-chartjs/README.md

Lines changed: 182 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
### [@coreui/react-chartjs](https://coreui.io/) for [CoreUI for React](https://coreui.io/react/)
2+
3+
[![npm package][npm-badge]][npm]
4+
[![NPM downloads][npm-download]][npm]
5+
![react](https://img.shields.io/badge/react-^17.0.1-lightgrey.svg?style=flat-square&logo=react)
6+
7+
[npm-badge]: https://img.shields.io/npm/v/@coreui/react-chartjs/latest?style=flat-square
8+
[npm]: https://www.npmjs.com/package/@coreui/react-chartjs
9+
[npm-download]: https://img.shields.io/npm/dm/@coreui/react-chartjs.svg?style=flat-square
10+
11+
##### install:
12+
13+
```bash
14+
npm install @coreui/react-chartjs@next
15+
16+
# or
17+
18+
yarn add @coreui/react-chartjs@next
19+
```
20+
21+
##### import:
22+
23+
```jsx
24+
import { CChart } from '@coreui/react-chartjs'
25+
```
26+
27+
or
28+
29+
```js
30+
import {
31+
CChart,
32+
CChartBar,
33+
CChartHorizontalBar,
34+
CChartLine,
35+
CChartDoughnut,
36+
CChartRadar,
37+
CChartPie,
38+
CChartPolarArea,
39+
} from '@coreui/react-chartjs'
40+
```
41+
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: ChartData | ((canvas: HTMLCanvasElement) => 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?: (
70+
dataset: InteractionItem[],
71+
event: React.MouseEvent<HTMLCanvasElement>,
72+
) => void
73+
/**
74+
* Proxy for Chart.js getElementAtEvent. Calls with single element array and triggering event.
75+
*/
76+
getElementAtEvent?: (
77+
element: InteractionItem[],
78+
event: React.MouseEvent<HTMLCanvasElement>,
79+
) => void
80+
/**
81+
* Proxy for Chart.js getElementsAtEvent. Calls with element array and triggering event.
82+
*/
83+
getElementsAtEvent?: (
84+
elements: InteractionItem[],
85+
event: React.MouseEvent<HTMLCanvasElement>,
86+
) => void
87+
/**
88+
* Height attribute applied to the rendered canvas.
89+
*
90+
* @default 150
91+
*/
92+
height?: number
93+
/**
94+
* ID attribute applied to the rendered canvas.
95+
*/
96+
id?: string
97+
/**
98+
* The options object that is passed into the Chart.js chart.
99+
*
100+
* {@link https://www.chartjs.org/docs/latest/general/options.html More Info}
101+
*/
102+
options?: ChartOptions
103+
/**
104+
* The plugins array that is passed into the Chart.js chart (more info)
105+
*
106+
* {@link https://www.chartjs.org/docs/latest/developers/plugins.html More Info}
107+
*/
108+
plugins?: Plugin[]
109+
/**
110+
* If true, will tear down and redraw chart on all updates.
111+
*
112+
* @default false
113+
*/
114+
redraw?: boolean
115+
/**
116+
* Chart.js chart type.
117+
*
118+
* @type {'line' | 'bar' | 'radar' | 'doughnut' | 'polarArea' | 'bubble' | 'pie' | 'scatter'}
119+
*/
120+
type: ChartType
121+
/**
122+
* Width attribute applied to the rendered canvas.
123+
*
124+
* @default 300
125+
*/
126+
width?: number
127+
/**
128+
* Put the chart into the wrapper div element.
129+
*
130+
* @default true
131+
*/
132+
wrapper?: boolean
133+
```
134+
135+
##### usage:
136+
137+
```jsx
138+
...
139+
class CoreUICharts extends Component {
140+
...
141+
render() {
142+
return (
143+
<CChart
144+
type='line'
145+
data={{
146+
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
147+
datasets: [
148+
{
149+
label: '2019',
150+
backgroundColor: 'rgba(179,181,198,0.2)',
151+
borderColor: 'rgba(179,181,198,1)',
152+
pointBackgroundColor: 'rgba(179,181,198,1)',
153+
pointBorderColor: '#fff',
154+
pointHoverBackgroundColor: '#fff',
155+
pointHoverBorderColor: 'rgba(179,181,198,1)',
156+
tooltipLabelColor: 'rgba(179,181,198,1)',
157+
data: [65, 59, 90, 81, 56, 55, 40]
158+
},
159+
{
160+
label: '2020',
161+
backgroundColor: 'rgba(255,99,132,0.2)',
162+
borderColor: 'rgba(255,99,132,1)',
163+
pointBackgroundColor: 'rgba(255,99,132,1)',
164+
pointBorderColor: '#fff',
165+
pointHoverBackgroundColor: '#fff',
166+
pointHoverBorderColor: 'rgba(255,99,132,1)',
167+
tooltipLabelColor: 'rgba(255,99,132,1)',
168+
data: [28, 48, 40, 19, 96, 27, 100]
169+
}
170+
],
171+
}}
172+
options={{
173+
aspectRatio: 1.5,
174+
tooltips: {
175+
enabled: true
176+
}
177+
}}
178+
/>
179+
)
180+
}
181+
...
182+
```

‎packages/coreui-react-chartjs/package.json

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
{
2+
"name": "@coreui/react-chartjs",
3+
"version": "2.0.0-rc.2",
4+
"description": "CoreUI React component wrapper for chart.js",
5+
"license": "MIT",
6+
"homepage": "https://coreui.io",
7+
"author": {
8+
"name": "CoreUI",
9+
"url": "https://coreui.io",
10+
"github": "https://github.com/coreui",
11+
"twitter": "https://twitter.com/core_ui"
12+
},
13+
"contributors": [
14+
{
15+
"name": "CoreUI Team",
16+
"url": "https://github.com/orgs/coreui/people"
17+
}
18+
],
19+
"repository": {
20+
"type": "git",
21+
"url": "https://github.com/coreui/coreui-react-chartjs.git"
22+
},
23+
"bugs": {
24+
"url": "https://github.com/coreui/coreui-react-chartjs/issues"
25+
},
26+
"main": "dist/index.js",
27+
"module": "dist/index.es.js",
28+
"jsnext:main": "dist/index.es.js",
29+
"files": [
30+
"dist/",
31+
"README.md"
32+
],
33+
"scripts": {
34+
"build": "rollup -c",
35+
"lint": "eslint 'src/**/*.{js,ts,tsx}'",
36+
"test": "jest --coverage",
37+
"test:update": "jest --coverage --updateSnapshot"
38+
},
39+
"dependencies": {
40+
"@coreui/chartjs": "^3.0.0",
41+
"chart.js": "^3.5.0"
42+
},
43+
"peerDependencies": {
44+
"react": "^17"
45+
},
46+
"devDependencies": {
47+
"@rollup/plugin-commonjs": "^21.0.0",
48+
"@rollup/plugin-node-resolve": "^13.0.5",
49+
"@rollup/plugin-typescript": "^8.3.0",
50+
"@testing-library/jest-dom": "^5.14.1",
51+
"@testing-library/react": "^12.1.2",
52+
"@types/lodash": "^4.14.172",
53+
"@typescript-eslint/eslint-plugin": "^5.0.0",
54+
"@typescript-eslint/parser": "^5.0.0",
55+
"classnames": "^2.3.1",
56+
"eslint": "^7.32.0",
57+
"eslint-config-prettier": "^8.3.0",
58+
"eslint-plugin-prettier": "^4.0.0",
59+
"eslint-plugin-react": "^7.26.1",
60+
"eslint-plugin-react-hooks": "^4.2.0",
61+
"jest": "^27.3.0",
62+
"jest-canvas-mock": "^2.3.1",
63+
"lodash": "^4.17.21",
64+
"prettier": "^2.4.1",
65+
"prop-types": "^15.7.2",
66+
"rollup": "^2.56.2",
67+
"rollup-plugin-peer-deps-external": "^2.2.4",
68+
"ts-jest": "^27.0.7",
69+
"typescript": "^4.4.4"
70+
},
71+
"keywords": [
72+
"coreui",
73+
"chart.js",
74+
"charts",
75+
"react chart.js",
76+
"coreui-react",
77+
"react charts",
78+
"react chart components",
79+
"react chart.js implementation",
80+
"layout",
81+
"component",
82+
"react"
83+
],
84+
"jest": {
85+
"preset": "ts-jest",
86+
"setupFiles": [
87+
"jest-canvas-mock"
88+
],
89+
"testEnvironment": "jsdom",
90+
"testPathIgnorePatterns": [
91+
"dist/"
92+
]
93+
}
94+
}

0 commit comments

Comments
 (0)