diff --git a/react-easy-chart/index.d.ts b/react-easy-chart/index.d.ts new file mode 100644 index 0000000000..8728ad0eaf --- /dev/null +++ b/react-easy-chart/index.d.ts @@ -0,0 +1,277 @@ +// Type definitions for react-easy-chart v0.1.12 +// Project: https://github.com/rma-consulting/react-easy-chart +// Definitions by: Dave Leaver +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped + +/// + +declare module "react-easy-chart" { + + interface BarData { + x: number | Date | string; + y: number; + color?: string + } + interface BarChartProps { + /** Whether to show axis labels */ + axes?: boolean; + + /** Labels for each of the axis */ + axisLabels?: { x?: string, y?: string, y2?: string }; + + /** The width of an individual bar in pixels */ + barWidth?: number; + + clickHandler?: (data: BarData, mouseEvent: MouseEvent) => any; + + /** Whether to automatically color the bars */ + colorBars?: boolean; + + data: Array; + + /** A d3 time formatting pattern to be applied to format the x axis values */ + datePattern?: string; + + /** Whether to show horizontal grid lines on the chart */ + grid?: boolean; + + /** Height of the chart in pixels */ + height?: number; + + /** Interpolation method if you add a line to this chart (via lineData) */ + interpolate?: string; + + lineData?: Array; + + /** css margins */ + margin?: { top?: number, right?: number, bottom?: number, left?: number }; + + mouseMoveHandler?: (data: BarData, mouseEvent: MouseEvent) => any; + + mouseOutHandler?: (data: BarData, mouseEvent: MouseEvent) => any; + + mouseOverHandler?: (data: BarData, mouseEvent: MouseEvent) => any; + + /** The d3 time format to be used for the x axis (when xType is 'time') */ + tickTimeDisplayFormat?: string; + + /** Width of the chart in pixels */ + width?: number; + + /** The range that the x axis should show (otherwise automatically calculated) */ + xDomainRange?: Array | Array | Array; + + /** The amount of ticks to be shown on the x axis */ + xTickNumber?: number; + + /** What data type the x axis is */ + xType?: 'time' | 'text' | 'linear'; + + /** What data type the second y axis is */ + y2Type?: 'time' | 'text' | 'linear'; + + /** Whether to show the axis on the right (default false: left) */ + yAxisOrientRight?: boolean; + + /** The range that the y axis should show (otherwise automatically calculated) */ + yDomainRange?: Array; + + /** The amount of ticks to be shown on the y axis */ + yTickNumber?: number; + } + class BarChart extends React.Component { + } + + interface PieData { + key: string; + value: number; + color?: string; + } + interface PieChartProps { + clickHandler?: (data: PieData, mouseEvent: MouseEvent) => any; + + data: Array<{ key: string, value: number, color?: string }>; + + /** Size in pixels of the inner hole (diameter) */ + innerHoleSize?: number; + + /** Whether to add labels the to pie segments */ + labels?: boolean; + + mouseMoveHandler?: (data: PieData, mouseEvent: MouseEvent) => any; + + mouseOutHandler?: (data: PieData, mouseEvent: MouseEvent) => any; + + mouseOverHandler?: (data: PieData, mouseEvent: MouseEvent) => any; + + /** Padding around the chart in pixels */ + padding?: number; + + /** Size in pixels in each dimension */ + size?: number; + + styles?: { [cssSelector: string]: React.CSSProperties }; + } + class PieChart extends React.Component { + } + + interface LineData { + x: number | Date | string; + y: number | Date | string; + } + interface LineChartProps { + /** Whether to show axis labels */ + axes?: boolean; + + /** Labels for each of the axis */ + axisLabels?: { x?: string, y?: string }; + + clickHandler?: (data: LineData, mouseEvent: MouseEvent) => any; + + data: Array>; + + /** Whether to show circles on the data points */ + dataPoints?: boolean; + + /** Whether to show horizontal grid lines on the chart */ + grid?: boolean; + + /** Height of the chart in pixels */ + height?: number; + + /** Smoothing option for the lines */ + interpolate?: 'linear' | 'linear-closed' | 'step' | 'step-before' | 'step-after' | 'basis' | 'basis-open' | 'basis-closed' | 'bundle' | 'cardinal' | 'cardinal-open' | 'cardinal-closed' | 'monotone'; + + lineColors?: Array; + + /** css margins */ + margin?: { top?: number, right?: number, bottom?: number, left?: number }; + + mouseMoveHandler?: (data: LineData, mouseEvent: MouseEvent) => any; + + mouseOutHandler?: (data: LineData, mouseEvent: MouseEvent) => any; + + mouseOverHandler?: (data: LineData, mouseEvent: MouseEvent) => any; + + /** The d3 time format to be used for the x axis (when xType is 'time') */ + tickTimeDisplayFormat?: string; + + /** Whether to show vertical grid lines on the chart */ + verticalGrid?: boolean; + + /** Width of the chart in pixels */ + width?: number; + + /** The range that the x axis should show (otherwise automatically calculated) */ + xDomainRange?: Array | Array | Array; + + /** The amount of ticks to be shown on the x axis */ + xTicks?: number; + + /** What data type the x axis is */ + xType?: 'time' | 'text' | 'linear'; + + /** Whether to show the axis on the right (default false: left) */ + yAxisOrientRight?: boolean; + + /** The range that the y axis should show (otherwise automatically calculated) */ + yDomainRange?: Array | Array; + + /** The amount of ticks to be shown on the y axis */ + yTicks?: number; + + /** What data type the x axis is */ + yType?: 'time' | 'text' | 'linear'; + } + class LineChart extends React.Component { + } + + interface AreaChartProps extends LineChartProps { + /** Make the gradient area a solid fill rather than a gradient */ + noAreaGradient?: boolean; + } + class AreaChart extends React.Component { + } + + interface ScatterplotData { + type: string | number; + x: number | Date | string; + y: number | Date | string; + z?: number; + } + interface ScatterplotChartProps { + /** Whether to show axis labels */ + axes?: boolean; + + /** Labels for each of the axis */ + axisLabels?: { x?: string, y?: string }; + + clickHandler?: (data: ScatterplotData, mouseEvent: MouseEvent) => any; + + /** Allows styling of individual types of points */ + config?: Array<{ type: string, color: string, stroke: string }>; + + data: Array; + + /** Radius of the dots on the chart */ + dotRadius?: number; + + /** Whether to show horizontal grid lines on the chart */ + grid?: boolean; + + /** Height of the chart in pixels */ + height?: number; + + /** css margins */ + margin?: { top?: number, right?: number, bottom?: number, left?: number }; + + mouseMoveHandler?: (data: ScatterplotData, mouseEvent: MouseEvent) => any; + + mouseOutHandler?: (data: ScatterplotData, mouseEvent: MouseEvent) => any; + + mouseOverHandler?: (data: ScatterplotData, mouseEvent: MouseEvent) => any; + + /** Whether to show vertical grid lines on the chart */ + verticalGrid?: boolean; + + /** Width of the chart in pixels */ + width?: number; + + /** The range that the x axis should show (otherwise automatically calculated) */ + xDomainRange?: Array | Array | Array; + + /** What data type the x axis is */ + xType?: 'time' | 'text' | 'linear'; + + /** Whether to show the axis on the right (default false: left) */ + yAxisOrientRight?: boolean; + + /** The range that the y axis should show (otherwise automatically calculated) */ + yDomainRange?: Array | Array | Array; + + /** What data type the x axis is */ + yType?: 'time' | 'text' | 'linear'; + } + class ScatterplotChart extends React.Component { + } + + interface LegendProps { + /** Override the color of the items */ + config?: Array<{ color: string }>; + + data: Array; + + dataId: string; + + /** change list items to inline-block (default block) */ + horizontal?: boolean; + + /** Override the css styles of individual components, see http://rma-consulting.github.io/react-easy-chart/legend/index.html */ + styles?: { [cssSelector: string]: React.CSSProperties }; + } + class Legend extends React.Component { + + } + +} + diff --git a/react-easy-chart/react-easy-chart-tests.tsx b/react-easy-chart/react-easy-chart-tests.tsx new file mode 100644 index 0000000000..65ab377ccc --- /dev/null +++ b/react-easy-chart/react-easy-chart-tests.tsx @@ -0,0 +1,2021 @@ +import * as React from 'react'; +import { AreaChart, BarChart, Legend, LineChart, PieChart, ScatterplotChart } from 'react-easy-chart'; + +class BarChartData extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class BarChartHeightAndWidth extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class BarChartColorBars extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class BarChartMargin extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class BarChartOverridingBarColors extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class BarChartAxes extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class BarChartAxesLabels extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class BarChartYAxisOrientation extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class BarChartYAxesType extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class BarChartYAxesType2 extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class BarChartDatePattern extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class BarChartBarWidth extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class BarChartDomainRange extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class BarChartTickDisplayFormat extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class BarChartNumberOfTicks extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class BarChartGrid extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class BarChartBarAndLine extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class BarChartMouseHandlers extends React.Component<{}, {}> { + mouseOverHandler(d: any, e: any) { + } + + mouseMoveHandler(e: any) { + } + + mouseOutHandler() { + } + + render(): any { + return ( + this.setState({ dataDisplay: `The value on the ${d.x} is ${d.y}` })} + mouseOverHandler={this.mouseOverHandler} + mouseOutHandler={this.mouseOutHandler} + mouseMoveHandler={this.mouseMoveHandler} + yDomainRange={[0, 100]} + /> + ); + } +} + + +class PieChartData extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class PieChartColor extends React.Component<{}, {}> { + render(): any { + return ( + + + ); + } +} + +class PieChartSize extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class PieChartDonut extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class PieChartPadding extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class PieChartLabels extends React.Component<{}, {}> { + render(): any { + return ( + rt_text': { + fontSize: '1em', + fill: '#fff' + } + }} + /> + ); + } +} + +class PieChartStyle extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class PieChartMouseHandlers extends React.Component<{}, {}> { + mouseOverHandler(d: any, e: any) { } + mouseMoveHandler(e: any) { } + mouseOutHandler() { } + render(): any { + return ( + this.setState({})} + mouseOverHandler={this.mouseOverHandler} + mouseOutHandler={this.mouseOutHandler.bind(this)} + mouseMoveHandler={this.mouseMoveHandler.bind(this)} + padding={10} + /> + ); + } +} + + +class LineChartData extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class LineChartData2 extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class LineChartHeightAndWidth extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class LineChartMargin extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class LineChartAxes extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class LineChartAxesLabels extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class LineChartYAxisOrientation extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class LineChartInterpolate extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class LineChartXType extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class LineChartXTypeTime extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class LineChartYTypeText extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class LineChartYTypeTime extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class LineChartGrid extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class LineChartVerticalGrid extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class LineChartDomainRange extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class LineChartTickDisplayFormat extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class LineChartNumberOfTicks extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class LineChartLineColors extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class LineChartDataPoints extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class LineChartMouseEvents extends React.Component<{}, {}> { + mouseOverHandler(d: any, e: any) { } + mouseMoveHandler(e: any) { } + mouseOutHandler() { } + render(): any { + return ( + { } } + mouseOverHandler={this.mouseOverHandler} + mouseOutHandler={this.mouseOutHandler} + mouseMoveHandler={this.mouseMoveHandler} + width={700} + height={350} + interpolate={'cardinal'} + data={[ + [ + { x: 10, y: 25 }, + { x: 20, y: 10 }, + { x: 30, y: 25 }, + { x: 40, y: 10 }, + { x: 50, y: 12 }, + { x: 60, y: 25 } + ], [ + { x: 10, y: 40 }, + { x: 20, y: 30 }, + { x: 30, y: 25 }, + { x: 40, y: 60 }, + { x: 50, y: 22 }, + { x: 60, y: 9 } + ] + ]} + /> + ); + } +} + + +class AreaChartData extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class AreaChartData2 extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class AreaChartHeightAndWidth extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class AreaChartMargin extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class AreaChartAxes extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class AreaChartAxesLabels extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class AreaChartYAxisOrientation extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class AreaChartInterpolate extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class AreaChartAxisType extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class AreaChartAxisTypeXTime extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class AreaChartYTypeText extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class AreaChartGrid extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class AreaChartVerticalGrid extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class AreaChartDomainRange extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class AreaChartTickDisplayFormat extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class AreaChartTickNumbers extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class AreaChartDataPoints extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class AreaChartMouseHandlers extends React.Component<{}, {}> { + mouseOverHandler(d: any, e: any) { } + mouseMoveHandler(e: any) { } + mouseOutHandler() { } + render(): any { + return ( + { } } + mouseOverHandler={this.mouseOverHandler} + mouseOutHandler={this.mouseOutHandler} + mouseMoveHandler={this.mouseMoveHandler} + tickTimeDisplayFormat={'%d %m'} + interpolate={'cardinal'} + width={750} + height={250} + data={[ + [ + { x: '1-Jan-15', y: 20 }, + { x: '1-Feb-15', y: 10 }, + { x: '1-Mar-15', y: 33 }, + { x: '1-Apr-15', y: 45 }, + { x: '1-May-15', y: 15 } + ], [ + { x: '1-Jan-15', y: 10 }, + { x: '1-Feb-15', y: 15 }, + { x: '1-Mar-15', y: 13 }, + { x: '1-Apr-15', y: 15 }, + { x: '1-May-15', y: 10 } + ] + ]} + /> + ); + } +} + + +const data = [ + { + type: 'One', + x: 1, + y: 5 + }, + { + type: 'Two', + x: 3, + y: 1 + }, + { + type: 'Three', + x: 0, + y: 6 + }, + { + type: 'Four', + x: 5, + y: 2 + }, + { + type: 'Five', + x: 4, + y: 4 + }, + { + type: 'Six', + x: 5, + y: 9 + }, + { + type: 'Seven', + x: 9, + y: 1 + }, + { + type: 'Eight', + x: 5, + y: 6 + }, + { + type: 'Nine', + x: 3, + y: 9 + }, + { + type: 'Ten', + x: 7, + y: 9 + } +]; + +class ScatterplotData extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class ScatterplotHeightAndWidth extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class ScatterplotMargin extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class ScatterplotAxes extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class ScatterplotYAxisOrientation extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class ScatterplotAxesLabels extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class ScatterplotDotRadius extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class ScatterplotConfig extends React.Component<{}, {}> { + config = [ + { + type: 'One', + color: '#ff0000', + stroke: 'blue' + }, + { + type: 'Two', + color: '#00ff00', + stroke: 'blue' + }, + { + type: 'Three', + color: '#ffffff', + stroke: 'black' + } + ]; + render(): any { + return ( + + ); + } +} + +class ScatterplotGrid extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class ScatterplotVerticalGrid extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class ScatterplotAxisType extends React.Component<{}, {}> { + + typedData = [ + { + type: 1, + x: 'Tue', + y: 10 + }, + { + type: 1, + x: 'Wed', + y: 20 + }, + { + type: 2, + x: 'Tue', + y: 30 + }, + { + type: 3, + x: 'Thu', + y: 40 + } + ]; + render(): any { + return ( + + + ); + } +} + +class ScatterplotDomainRange extends React.Component<{}, {}> { + + typedData = [ + { + type: 1, + x: '1-Jan-15', + y: 10 + }, + { + type: 1, + x: '2-Jan-15', + y: 20 + }, + { + type: 2, + x: '1-Jan-15', + y: 30 + }, + { + type: 2, + x: '2-Jan-15', + y: 30 + }, + { + type: 3, + x: '3-Jan-15', + y: 40 + } + ]; + + render(): any { + return ( + + ); + } +} + +class ScatterplotMouseEvents extends React.Component<{}, {}> { + mouseOverHandler(d: any, e: any) { } + mouseMoveHandler(e: any) { } + mouseOutHandler() { } + render(): any { + return ( + + { } } + /> + ); + } +} + + +const pieData = [ + { key: 'Cats', value: 100 }, + { key: 'Dogs', value: 200 }, + { key: 'Other', value: 50 } +]; + +class LegendData extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +class LegendHorizontal extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + +const pieDataCustom = [ + { key: 'Cats', value: 100, color: '#aaac84' }, + { key: 'Dogs', value: 200, color: '#dce7c5' }, + { key: 'Other', value: 50, color: '#e3a51a' } +]; + +const config = [ + { color: '#aaac84' }, + { color: '#dce7c5' }, + { color: '#e3a51a' } +]; + +class LegendConfig extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} + + +/* default component styles */ +const defaultStyles = { + '.legend': { + 'list-style': 'none', + margin: 0, + padding: 0 + }, + '.legend li': { + display: 'block', + lineHeight: '24px', + marginRight: '24px', + marginBottom: '6px', + paddingLeft: '24px', + position: 'relative' + }, + '.legend li.horizontal': { + display: 'inline-block' + }, + '.legend .icon': { + width: '12px', + height: '12px', + background: 'red', + borderRadius: '6px', + position: 'absolute', + left: '0', + top: '50%', + marginTop: '-6px' + } +}; + +/* example override */ +const customStyle = { + '.legend': { + backgroundColor: '#f9f9f9', + border: '1px solid #e5e5e5', + borderRadius: '12px', + fontSize: '0.8em', + maxWidth: '300px', + padding: '12px' + } +}; + +class LegendStyles extends React.Component<{}, {}> { + render(): any { + return ( + + ); + } +} \ No newline at end of file diff --git a/react-easy-chart/tsconfig.json b/react-easy-chart/tsconfig.json new file mode 100644 index 0000000000..fa7efaac28 --- /dev/null +++ b/react-easy-chart/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "module": "commonjs", + "target": "es6", + "noImplicitAny": true, + "strictNullChecks": false, + "baseUrl": "../", + "jsx": "react", + "typeRoots": [ + "../" + ], + "types": ["react"], + "noEmit": true, + "forceConsistentCasingInFileNames": true + }, + "files": [ + "index.d.ts", + "react-easy-chart-tests.tsx" + ] +} \ No newline at end of file