kylefang/DefinitelyTyped
1
0
Fork 0
mirror of https://github.com/zhigang1992/DefinitelyTyped.git synced 2026-05-31 03:02:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

added types for react-chartjs-2

Browse Source
This commit is contained in:
Alexandre Pare
2017-04-12 16:01:34 -04:00
parent 7aa22525d5
commit 2f44726eed
15 changed files with 665 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
types/react-chartjs-2/index.d.ts vendored Normal file
View File

@@ -0,0 +1,57 @@
// Type definitions for react-chartjs-2 2.0
// Project: https://github.com/gor181/react-chartjs-2
// Definitions by: Alexandre Paré <https://github.com/apare>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.1
import * as React from "react";
import * as chartjs from "chart.js";
export type ChartDataFunction<T extends chartjs.ChartData> = (element: HTMLElement) => T;
export type ChartData<T extends chartjs.ChartData> = ChartDataFunction<T>| T;
export interface ChartComponentProps {
data: ChartData<chartjs.ChartData>;
type?: chartjs.ChartType;
getDatasetAtEvent?(e: any): void;
getElementAtEvent?(e: any): void;
getElementsAtEvent?(e: any): void;
height?: number;
legend?: chartjs.ChartLegendOptions;
onElementsClick?(e: any): void; // alias for getElementsAtEvent (backward compatibility)
options?: chartjs.ChartOptions;
redraw?: boolean;
width?: number;
}
export interface LinearComponentProps extends ChartComponentProps {
data: ChartData<chartjs.LinearChartData>;
}
export default class ChartComponent<P extends ChartComponentProps> extends React.Component<P, {}> {
chart_instance: chartjs;
}
export class Doughnut extends ChartComponent<ChartComponentProps> {
}
export class Pie extends ChartComponent<ChartComponentProps> {
}
export class Line extends ChartComponent<LinearComponentProps> {
}
export class Bar extends ChartComponent<LinearComponentProps> {
}
export class HorizontalBar extends ChartComponent<ChartComponentProps> {
}
export class Radar extends ChartComponent<ChartComponentProps> {
}
export class Polar extends ChartComponent<ChartComponentProps> {
}
export class Bubble extends ChartComponent<ChartComponentProps> {
}

37
types/react-chartjs-2/test/bar.tsx Normal file
View File

@@ -0,0 +1,37 @@
import * as React from 'react';
import { Bar } from 'react-chartjs-2';
const data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My First dataset',
backgroundColor: 'rgba(255,99,132,0.2)',
borderColor: 'rgba(255,99,132,1)',
borderWidth: 1,
hoverBackgroundColor: 'rgba(255,99,132,0.4)',
hoverBorderColor: 'rgba(255,99,132,1)',
data: [65, 59, 80, 81, 56, 55, 40]
}
]
};
export default React.createClass({
displayName: 'BarExample',
render() {
return (
<div>
<h2>Bar Example (custom size)</h2>
<Bar
data={data}
width={100}
height={50}
options={{
maintainAspectRatio: false
}}
/>
</div>
);
}
});

42
types/react-chartjs-2/test/bubble.tsx Executable file
View File

@@ -0,0 +1,42 @@
import * as React from 'react';
import { Bubble } from 'react-chartjs-2';
const data = {
labels: ['January'],
datasets: [
{
label: 'My First dataset',
fill: false,
lineTension: 0.1,
backgroundColor: 'rgba(75,192,192,0.4)',
borderColor: 'rgba(75,192,192,1)',
borderCapStyle: 'butt',
borderDash: [] as any[],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgba(75,192,192,1)',
pointBackgroundColor: '#fff',
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: 'rgba(75,192,192,1)',
pointHoverBorderColor: 'rgba(220,220,220,1)',
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [{ x: 10, y: 20, r: 5 }]
}
]
};
export default React.createClass({
displayName: 'BubbleExample',
render() {
return (
<div>
<h2>Bubble Example</h2>
<Bubble data={data} />
</div>
);
}
});

36
types/react-chartjs-2/test/doughnut.tsx Executable file
View File

@@ -0,0 +1,36 @@
import * as React from 'react';
import {Doughnut} from 'react-chartjs-2';
const data = {
labels: [
'Red',
'Green',
'Yellow'
],
datasets: [{
data: [300, 50, 100],
backgroundColor: [
'#FF6384',
'#36A2EB',
'#FFCE56'
],
hoverBackgroundColor: [
'#FF6384',
'#36A2EB',
'#FFCE56'
]
}]
};
export default React.createClass({
displayName: 'DoughnutExample',
render() {
return (
<div>
<h2>Doughnut Example</h2>
<Doughnut data={data} />
</div>
);
}
});

48
types/react-chartjs-2/test/dynamic-doughnut.tsx Executable file
View File

@@ -0,0 +1,48 @@
import * as React from 'react';
import { Doughnut } from 'react-chartjs-2';
function getRandomInt(min: number, max: number) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
const getState = () => ({
labels: [
'Red',
'Green',
'Yellow'
],
datasets: [{
data: [getRandomInt(50, 200), getRandomInt(100, 150), getRandomInt(150, 250)],
backgroundColor: [
'#CCC',
'#36A2EB',
'#FFCE56'
],
hoverBackgroundColor: [
'#FF6384',
'#36A2EB',
'#FFCE56'
]
}]
});
export default class DynamicDoughnutExample extends React.Component<any, any> {
getInitialState() {
return getState();
}
componentWillMount() {
setInterval(() => {
this.setState(getState());
}, 5000);
}
render() {
return (
<div>
<h2>Dynamically refreshed Doughnut Example</h2>
<Doughnut data={this.state} />
</div>
);
}
}

30
types/react-chartjs-2/test/horizontalBar.tsx Executable file
View File

@@ -0,0 +1,30 @@
import * as React from 'react';
import {HorizontalBar} from 'react-chartjs-2';
const data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My First dataset',
backgroundColor: 'rgba(255,99,132,0.2)',
borderColor: 'rgba(255,99,132,1)',
borderWidth: 1,
hoverBackgroundColor: 'rgba(255,99,132,0.4)',
hoverBorderColor: 'rgba(255,99,132,1)',
data: [65, 59, 80, 81, 56, 55, 40]
}
]
};
export default React.createClass({
displayName: 'BarExample',
render() {
return (
<div>
<h2>Horizontal Bar Example</h2>
<HorizontalBar data={data} />
</div>
);
}
});

47
types/react-chartjs-2/test/index.tsx Normal file
View File

@@ -0,0 +1,47 @@
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import DoughnutExample from './doughnut';
import DynamicDoughnutExample from './dynamic-doughnut';
import PieExample from './pie';
import LineExample from './line';
import BarExample from './bar';
import HorizontalBarExample from './horizontalBar';
import RadarExample from './radar';
import PolarExample from './polar';
import BubbleExample from './bubble';
import MixedDataExample from './mix';
import RandomizedDataLineExample from './randomizedLine';
class App extends React.Component<any, any> {
render() {
return (
<div>
<hr />
<DoughnutExample />
<hr />
<DynamicDoughnutExample />
<hr />
<PieExample />
<hr />
<LineExample />
<hr />
<BarExample />
<hr />
<HorizontalBarExample />
<hr />
<RadarExample />
<hr />
<PolarExample />
<hr />
<BubbleExample />
<hr />
<MixedDataExample />
<hr />
<RandomizedDataLineExample />
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'));

42
types/react-chartjs-2/test/line.tsx Executable file
View File

@@ -0,0 +1,42 @@
import * as React from 'react';
import {Line} from 'react-chartjs-2';
const data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My First dataset',
fill: false,
lineTension: 0.1,
backgroundColor: 'rgba(75,192,192,0.4)',
borderColor: 'rgba(75,192,192,1)',
borderCapStyle: 'butt',
borderDash: [] as any[],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgba(75,192,192,1)',
pointBackgroundColor: '#fff',
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: 'rgba(75,192,192,1)',
pointHoverBorderColor: 'rgba(220,220,220,1)',
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [65, 59, 80, 81, 56, 55, 40]
}
]
};
export default React.createClass({
displayName: 'LineExample',
render() {
return (
<div>
<h2>Line Example</h2>
<Line data={data} />
</div>
);
}
});

96
types/react-chartjs-2/test/mix.tsx Executable file
View File

@@ -0,0 +1,96 @@
import * as React from 'react';
import { Bar } from 'react-chartjs-2';
const data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'Sales',
type: 'line',
data: [51, 65, 40, 49, 60, 37, 40],
fill: false,
borderColor: '#EC932F',
backgroundColor: '#EC932F',
pointBorderColor: '#EC932F',
pointBackgroundColor: '#EC932F',
pointHoverBackgroundColor: '#EC932F',
pointHoverBorderColor: '#EC932F',
yAxisID: 'y-axis-2'
}, {
type: 'bar',
label: 'Visitor',
data: [200, 185, 590, 621, 250, 400, 95],
fill: false,
backgroundColor: '#71B37C',
borderColor: '#71B37C',
hoverBackgroundColor: '#71B37C',
hoverBorderColor: '#71B37C',
yAxisID: 'y-axis-1'
}]
};
const options = {
responsive: true,
tooltips: {
mode: 'label'
},
elements: {
line: {
fill: false
}
},
scales: {
xAxes: [
{
display: true,
gridLines: {
display: false
},
labels: {
show: true
}
}
],
yAxes: [
{
type: 'linear',
display: true,
position: 'left',
id: 'y-axis-1',
gridLines: {
display: false
},
labels: {
show: true
}
},
{
type: 'linear',
display: true,
position: 'right',
id: 'y-axis-2',
gridLines: {
display: false
},
labels: {
show: true
}
}
]
}
};
export default React.createClass({
displayName: 'MixExample',
render() {
return (
<div>
<h2>Mixed data Example</h2>
<Bar
data={data}
options={options}
/>
</div>
);
}
});

36
types/react-chartjs-2/test/pie.tsx Executable file
View File

@@ -0,0 +1,36 @@
import * as React from 'react';
import {Pie} from 'react-chartjs-2';
const data = {
labels: [
'Red',
'Green',
'Yellow'
],
datasets: [{
data: [300, 50, 100],
backgroundColor: [
'#FF6384',
'#36A2EB',
'#FFCE56'
],
hoverBackgroundColor: [
'#FF6384',
'#36A2EB',
'#FFCE56'
]
}]
};
export default React.createClass({
displayName: 'PieExample',
render() {
return (
<div>
<h2>Pie Example</h2>
<Pie data={data} />
</div>
);
}
});

42
types/react-chartjs-2/test/polar.tsx Executable file
View File

@@ -0,0 +1,42 @@
import * as React from 'react';
import {Polar} from 'react-chartjs-2';
const data = {
datasets: [{
data: [
11,
16,
7,
3,
14
],
backgroundColor: [
'#FF6384',
'#4BC0C0',
'#FFCE56',
'#E7E9ED',
'#36A2EB'
],
label: 'My dataset' // for legend
}],
labels: [
'Red',
'Green',
'Yellow',
'Grey',
'Blue'
]
};
export default React.createClass({
displayName: 'PolarExample',
render() {
return (
<div>
<h2>Polar Example</h2>
<Polar data={data} />
</div>
);
}
});

41
types/react-chartjs-2/test/radar.tsx Executable file
View File

@@ -0,0 +1,41 @@
import * as React from 'react';
import {Radar} from 'react-chartjs-2';
const data = {
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
datasets: [
{
label: 'My First dataset',
backgroundColor: 'rgba(179,181,198,0.2)',
borderColor: 'rgba(179,181,198,1)',
pointBackgroundColor: 'rgba(179,181,198,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(179,181,198,1)',
data: [65, 59, 90, 81, 56, 55, 40]
},
{
label: 'My Second dataset',
backgroundColor: 'rgba(255,99,132,0.2)',
borderColor: 'rgba(255,99,132,1)',
pointBackgroundColor: 'rgba(255,99,132,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(255,99,132,1)',
data: [28, 48, 40, 19, 96, 27, 100]
}
]
};
export default React.createClass({
displayName: 'RadarExample',
render() {
return (
<div>
<h2>Radar Example</h2>
<Radar data={data} />
</div>
);
}
});

75
types/react-chartjs-2/test/randomizedLine.tsx Executable file
View File

@@ -0,0 +1,75 @@
import * as React from 'react';
import { Line } from 'react-chartjs-2';
const initialState = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My First dataset',
fill: false,
lineTension: 0.1,
backgroundColor: 'rgba(75,192,192,0.4)',
borderColor: 'rgba(75,192,192,1)',
borderCapStyle: 'butt',
borderDash: [] as any[],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgba(75,192,192,1)',
pointBackgroundColor: '#fff',
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: 'rgba(75,192,192,1)',
pointHoverBorderColor: 'rgba(220,220,220,1)',
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [65, 59, 80, 81, 56, 55, 40]
}
]
};
class Graph extends React.Component<any, any> {
componentWillMount() {
this.setState(initialState);
}
componentDidMount() {
let _this = this;
setInterval(() => {
let oldDataSet = _this.state;
let newData: number[] = [];
_this.state.labels.forEach(() => {
newData.push(Math.floor(Math.random() * 100));
});
let newDataSet = {
...oldDataSet
};
newDataSet.data = newData;
_this.setState({ datasets: [newDataSet] });
}, 5000);
}
render() {
return (
<Line data={this.state} />
);
}
}
export default React.createClass({
displayName: 'RandomizedDataLineExample',
render() {
return (
<div>
<h2>Random Animated Line Example</h2>
<Graph />
</div>
);
}
});

35
types/react-chartjs-2/tsconfig.json Normal file
View File

@@ -0,0 +1,35 @@
{
"compilerOptions": {
"module": "commonjs",
"lib": [
"es6",
"dom"
],
"noImplicitAny": true,
"noImplicitThis": true,
"strictNullChecks": false,
"baseUrl": "../",
"typeRoots": [
"../"
],
"types": [],
"noEmit": true,
"forceConsistentCasingInFileNames": true,
"jsx": "react"
},
"files": [
"index.d.ts",
"test/index.tsx",
"test/bar.tsx",
"test/bubble.tsx",
"test/doughnut.tsx",
"test/dynamic-doughnut.tsx",
"test/horizontalBar.tsx",
"test/line.tsx",
"test/mix.tsx",
"test/pie.tsx",
"test/polar.tsx",
"test/radar.tsx",
"test/randomizedLine.tsx"
]
}

1
types/react-chartjs-2/tslint.json Normal file
View File

@@ -0,0 +1 @@
{ "extends": "../tslint.json" }