From 2f44726eedce1804ac2d27c1e140fc34bd35fac3 Mon Sep 17 00:00:00 2001 From: Alexandre Pare Date: Wed, 12 Apr 2017 16:01:34 -0400 Subject: [PATCH] added types for react-chartjs-2 --- types/react-chartjs-2/index.d.ts | 57 +++++++++++ types/react-chartjs-2/test/bar.tsx | 37 +++++++ types/react-chartjs-2/test/bubble.tsx | 42 ++++++++ types/react-chartjs-2/test/doughnut.tsx | 36 +++++++ .../react-chartjs-2/test/dynamic-doughnut.tsx | 48 ++++++++++ types/react-chartjs-2/test/horizontalBar.tsx | 30 ++++++ types/react-chartjs-2/test/index.tsx | 47 +++++++++ types/react-chartjs-2/test/line.tsx | 42 ++++++++ types/react-chartjs-2/test/mix.tsx | 96 +++++++++++++++++++ types/react-chartjs-2/test/pie.tsx | 36 +++++++ types/react-chartjs-2/test/polar.tsx | 42 ++++++++ types/react-chartjs-2/test/radar.tsx | 41 ++++++++ types/react-chartjs-2/test/randomizedLine.tsx | 75 +++++++++++++++ types/react-chartjs-2/tsconfig.json | 35 +++++++ types/react-chartjs-2/tslint.json | 1 + 15 files changed, 665 insertions(+) create mode 100644 types/react-chartjs-2/index.d.ts create mode 100644 types/react-chartjs-2/test/bar.tsx create mode 100755 types/react-chartjs-2/test/bubble.tsx create mode 100755 types/react-chartjs-2/test/doughnut.tsx create mode 100755 types/react-chartjs-2/test/dynamic-doughnut.tsx create mode 100755 types/react-chartjs-2/test/horizontalBar.tsx create mode 100644 types/react-chartjs-2/test/index.tsx create mode 100755 types/react-chartjs-2/test/line.tsx create mode 100755 types/react-chartjs-2/test/mix.tsx create mode 100755 types/react-chartjs-2/test/pie.tsx create mode 100755 types/react-chartjs-2/test/polar.tsx create mode 100755 types/react-chartjs-2/test/radar.tsx create mode 100755 types/react-chartjs-2/test/randomizedLine.tsx create mode 100644 types/react-chartjs-2/tsconfig.json create mode 100644 types/react-chartjs-2/tslint.json diff --git a/types/react-chartjs-2/index.d.ts b/types/react-chartjs-2/index.d.ts new file mode 100644 index 0000000000..e3e2da896c --- /dev/null +++ b/types/react-chartjs-2/index.d.ts @@ -0,0 +1,57 @@ +// Type definitions for react-chartjs-2 2.0 +// Project: https://github.com/gor181/react-chartjs-2 +// Definitions by: Alexandre Paré +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.1 + +import * as React from "react"; +import * as chartjs from "chart.js"; + +export type ChartDataFunction = (element: HTMLElement) => T; +export type ChartData = ChartDataFunction| T; + +export interface ChartComponentProps { + data: 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; +} + +export default class ChartComponent

extends React.Component { + chart_instance: chartjs; +} + +export class Doughnut extends ChartComponent { +} + +export class Pie extends ChartComponent { +} + +export class Line extends ChartComponent { +} + +export class Bar extends ChartComponent { +} + +export class HorizontalBar extends ChartComponent { +} + +export class Radar extends ChartComponent { +} + +export class Polar extends ChartComponent { +} + +export class Bubble extends ChartComponent { +} diff --git a/types/react-chartjs-2/test/bar.tsx b/types/react-chartjs-2/test/bar.tsx new file mode 100644 index 0000000000..c1ff3a3567 --- /dev/null +++ b/types/react-chartjs-2/test/bar.tsx @@ -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 ( +

+

Bar Example (custom size)

+ +
+ ); + } +}); diff --git a/types/react-chartjs-2/test/bubble.tsx b/types/react-chartjs-2/test/bubble.tsx new file mode 100755 index 0000000000..b52d306136 --- /dev/null +++ b/types/react-chartjs-2/test/bubble.tsx @@ -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 ( +
+

Bubble Example

+ +
+ ); + } +}); diff --git a/types/react-chartjs-2/test/doughnut.tsx b/types/react-chartjs-2/test/doughnut.tsx new file mode 100755 index 0000000000..4051310185 --- /dev/null +++ b/types/react-chartjs-2/test/doughnut.tsx @@ -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 ( +
+

Doughnut Example

+ +
+ ); + } +}); diff --git a/types/react-chartjs-2/test/dynamic-doughnut.tsx b/types/react-chartjs-2/test/dynamic-doughnut.tsx new file mode 100755 index 0000000000..8c22df6e4a --- /dev/null +++ b/types/react-chartjs-2/test/dynamic-doughnut.tsx @@ -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 { + getInitialState() { + return getState(); + } + + componentWillMount() { + setInterval(() => { + this.setState(getState()); + }, 5000); + } + + render() { + return ( +
+

Dynamically refreshed Doughnut Example

+ +
+ ); + } +} diff --git a/types/react-chartjs-2/test/horizontalBar.tsx b/types/react-chartjs-2/test/horizontalBar.tsx new file mode 100755 index 0000000000..4d6381749d --- /dev/null +++ b/types/react-chartjs-2/test/horizontalBar.tsx @@ -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 ( +
+

Horizontal Bar Example

+ +
+ ); + } +}); diff --git a/types/react-chartjs-2/test/index.tsx b/types/react-chartjs-2/test/index.tsx new file mode 100644 index 0000000000..0376218e1d --- /dev/null +++ b/types/react-chartjs-2/test/index.tsx @@ -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 { + render() { + return ( +
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ ); + } +} + +ReactDOM.render(, document.getElementById('app')); diff --git a/types/react-chartjs-2/test/line.tsx b/types/react-chartjs-2/test/line.tsx new file mode 100755 index 0000000000..fb60416e4a --- /dev/null +++ b/types/react-chartjs-2/test/line.tsx @@ -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 ( +
+

Line Example

+ +
+ ); + } +}); diff --git a/types/react-chartjs-2/test/mix.tsx b/types/react-chartjs-2/test/mix.tsx new file mode 100755 index 0000000000..208023b62d --- /dev/null +++ b/types/react-chartjs-2/test/mix.tsx @@ -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 ( +
+

Mixed data Example

+ +
+ ); + } +}); diff --git a/types/react-chartjs-2/test/pie.tsx b/types/react-chartjs-2/test/pie.tsx new file mode 100755 index 0000000000..ba0a23ffb3 --- /dev/null +++ b/types/react-chartjs-2/test/pie.tsx @@ -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 ( +
+

Pie Example

+ +
+ ); + } +}); diff --git a/types/react-chartjs-2/test/polar.tsx b/types/react-chartjs-2/test/polar.tsx new file mode 100755 index 0000000000..b38fc9b44f --- /dev/null +++ b/types/react-chartjs-2/test/polar.tsx @@ -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 ( +
+

Polar Example

+ +
+ ); + } +}); diff --git a/types/react-chartjs-2/test/radar.tsx b/types/react-chartjs-2/test/radar.tsx new file mode 100755 index 0000000000..fb4535d5e3 --- /dev/null +++ b/types/react-chartjs-2/test/radar.tsx @@ -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 ( +
+

Radar Example

+ +
+ ); + } +}); diff --git a/types/react-chartjs-2/test/randomizedLine.tsx b/types/react-chartjs-2/test/randomizedLine.tsx new file mode 100755 index 0000000000..7ee5e1851a --- /dev/null +++ b/types/react-chartjs-2/test/randomizedLine.tsx @@ -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 { + 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 ( + + ); + } +} + +export default React.createClass({ + displayName: 'RandomizedDataLineExample', + + render() { + return ( +
+

Random Animated Line Example

+ +
+ ); + } +}); diff --git a/types/react-chartjs-2/tsconfig.json b/types/react-chartjs-2/tsconfig.json new file mode 100644 index 0000000000..6320b29ac8 --- /dev/null +++ b/types/react-chartjs-2/tsconfig.json @@ -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" + ] +} \ No newline at end of file diff --git a/types/react-chartjs-2/tslint.json b/types/react-chartjs-2/tslint.json new file mode 100644 index 0000000000..377cc837d4 --- /dev/null +++ b/types/react-chartjs-2/tslint.json @@ -0,0 +1 @@ +{ "extends": "../tslint.json" }