Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit0c1c5b5

Browse files
committed
release: v2.0.0-alpha.1
1 parentae8b43f commit0c1c5b5

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+
*@defaulttrue
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+
*{@linkhttps://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+
*@default150
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+
*{@linkhttps://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+
*{@linkhttps://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+
*@defaultfalse
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+
*@default300
116+
*/
117+
width?: number
118+
/**
119+
* Put the chart into the wrapper div element.
120+
*
121+
*@defaulttrue
122+
*/
123+
wrapper?: boolean
124+
```
41125

42126
#####usage:
127+
43128
```jsx
44129
...
45130
classCoreUIChartsextendsComponent {
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*aschartjsfrom'chart.js'
1414
import{customTooltipsascuiCustomTooltips}from'@coreui/chartjs'
1515

16-
importmergefrom'lodash/merge'
1716
importassignfrom'lodash/assign'
1817
importfindfrom'lodash/find'
18+
importmergefrom'lodash/merge'
1919

2020
exportinterfaceCChartPropsextendsHTMLAttributes<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+
importReact,{forwardRef}from'react'
2+
import{CChart,CChartProps}from'./CChart'
3+
importChartfrom'chart.js/auto'
4+
// import * as chartjs from 'chart.js';
5+
6+
exportconstCChartBar=forwardRef<Chart|undefined,CChartProps>((props,ref)=>(
7+
<CChart{...props}type="bar"ref={ref}/>
8+
))
9+
10+
CChartBar.displayName='CChartBar'
11+
12+
exportconstCChartBubble=forwardRef<Chart|undefined,CChartProps>((props,ref)=>(
13+
<CChart{...props}type="bubble"ref={ref}/>
14+
))
15+
16+
CChartBubble.displayName='CChartBubble'
17+
18+
exportconstCChartDoughnut=forwardRef<Chart|undefined,CChartProps>((props,ref)=>(
19+
<CChart{...props}type="doughnut"ref={ref}/>
20+
))
21+
22+
CChartDoughnut.displayName='CChartDoughnut'
23+
24+
exportconstCChartHorizontalBar=forwardRef<Chart|undefined,CChartProps>((props,ref)=>(
25+
<CChart{...props}type="horizontalBar"ref={ref}/>
26+
))
27+
28+
CChartHorizontalBar.displayName='CChartHorizontalBar'
29+
30+
exportconstCChartLine=forwardRef<Chart|undefined,CChartProps>((props,ref)=>(
31+
<CChart{...props}type="line"ref={ref}/>
32+
))
33+
34+
CChartLine.displayName='CChartLine'
35+
36+
exportconstCChartPie=forwardRef<Chart|undefined,CChartProps>((props,ref)=>(
37+
<CChart{...props}type="pie"ref={ref}/>
38+
))
39+
40+
CChartPie.displayName='CChartPie'
41+
42+
exportconstCChartPolarArea=forwardRef<Chart|undefined,CChartProps>((props,ref)=>(
43+
<CChart{...props}type="polarArea"ref={ref}/>
44+
))
45+
46+
CChartPolarArea.displayName='CChartPolarArea'
47+
48+
exportconstCChartRadar=forwardRef<Chart|undefined,CChartProps>((props,ref)=>(
49+
<CChart{...props}type="radar"ref={ref}/>
50+
))
51+
52+
CChartRadar.displayName='CChartRadar'
53+
54+
exportconstCChartScatter=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)
[8]ページ先頭
©2009-2025 Movatter.jp