mirror of
https://github.com/gosticks/DefinitelyTyped.git
synced 2025-10-16 12:05:41 +00:00
2021 lines
34 KiB
TypeScript
2021 lines
34 KiB
TypeScript
import * as React from 'react';
|
|
import { AreaChart, BarChart, Legend, LineChart, PieChart, ScatterplotChart } from 'react-easy-chart';
|
|
|
|
class BarChartData extends React.Component {
|
|
render(): any {
|
|
return (
|
|
<BarChart
|
|
data={[
|
|
{ x: 'A', y: 20 },
|
|
{ x: 'B', y: 30 },
|
|
{ x: 'C', y: 40 },
|
|
{ x: 'D', y: 20 },
|
|
{ x: 'E', y: 40 },
|
|
{ x: 'F', y: 25 },
|
|
{ x: 'G', y: 5 }
|
|
]}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
class BarChartHeightAndWidth extends React.Component {
|
|
render(): any {
|
|
return (
|
|
<BarChart
|
|
height={150}
|
|
width={350}
|
|
data={[
|
|
{
|
|
x: 'A',
|
|
y: 46
|
|
},
|
|
{
|
|
x: 'B',
|
|
y: 26
|
|
}
|
|
]}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
class BarChartColorBars extends React.Component {
|
|
render(): any {
|
|
return (
|
|
<BarChart
|
|
colorBars
|
|
height={150}
|
|
width={650}
|
|
data={[
|
|
{
|
|
x: 'A',
|
|
y: 46
|
|
},
|
|
{
|
|
x: 'B',
|
|
y: 26
|
|
}
|
|
]}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
class BarChartMargin extends React.Component {
|
|
render(): any {
|
|
return (
|
|
<BarChart
|
|
colorBars
|
|
height={150}
|
|
width={650}
|
|
data={[]}
|
|
margin={{ top: 0, right: 0, bottom: 30, left: 100 }}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
class BarChartOverridingBarColors extends React.Component {
|
|
render(): any {
|
|
return (
|
|
<BarChart
|
|
data={[
|
|
{ x: 'A', y: 20 },
|
|
{ x: 'B', y: 30, color: '#f00' },
|
|
{ x: 'C', y: 40 },
|
|
{ x: 'D', y: 20 },
|
|
{ x: 'E', y: 40 },
|
|
{ x: 'F', y: 25 },
|
|
{ x: 'G', y: 5, color: 'orange' }
|
|
]}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
class BarChartAxes extends React.Component {
|
|
render(): any {
|
|
return (
|
|
<BarChart
|
|
axes
|
|
height={250}
|
|
width={650}
|
|
data={[
|
|
{
|
|
x: 'A',
|
|
y: 46
|
|
},
|
|
{
|
|
x: 'B',
|
|
y: 26
|
|
}
|
|
]}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
class BarChartAxesLabels extends React.Component {
|
|
render(): any {
|
|
return (
|
|
<BarChart
|
|
axisLabels={{ x: 'My x Axis', y: 'My y Axis' }}
|
|
axes
|
|
data={[
|
|
{
|
|
x: 'A',
|
|
y: 46
|
|
},
|
|
{
|
|
x: 'B',
|
|
y: 26
|
|
}
|
|
]}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
class BarChartYAxisOrientation extends React.Component {
|
|
render(): any {
|
|
return (
|
|
<BarChart
|
|
axes
|
|
axisLabels={{ x: 'My x Axis', y: 'My y Axis' }}
|
|
yAxisOrientRight
|
|
height={250}
|
|
width={650}
|
|
data={[
|
|
{
|
|
x: 'A',
|
|
y: 46
|
|
},
|
|
{
|
|
x: 'B',
|
|
y: 26
|
|
}
|
|
]}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
class BarChartYAxesType extends React.Component {
|
|
render(): any {
|
|
return (
|
|
<BarChart
|
|
axisLabels={{ x: 'My x Axis', y: 'My y Axis' }}
|
|
axes
|
|
height={250}
|
|
width={650}
|
|
xType={'linear'}
|
|
data={[
|
|
{ x: 10, y: 20 },
|
|
{ x: 12, y: 20 },
|
|
{ x: 30, y: 30, color: '#f00' },
|
|
{ x: 40, y: 40 }
|
|
]}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
class BarChartYAxesType2 extends React.Component {
|
|
render(): any {
|
|
return (
|
|
<BarChart
|
|
axisLabels={{ x: 'My x Axis', y: 'My y Axis' }}
|
|
axes
|
|
height={250}
|
|
width={650}
|
|
colorBars
|
|
xType={'time'}
|
|
data={[
|
|
{ x: '1-Jan-15', y: 20 },
|
|
{ x: '2-Jan-15', y: 10 },
|
|
{ x: '3-Jan-15', y: 33 }
|
|
]}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
class BarChartDatePattern extends React.Component {
|
|
render(): any {
|
|
return (
|
|
<BarChart
|
|
axisLabels={{ x: 'My x Axis', y: 'My y Axis' }}
|
|
axes
|
|
height={250}
|
|
width={650}
|
|
datePattern="%d-%b-%y %H:%M"
|
|
colorBars
|
|
xType={'time'}
|
|
data={[
|
|
{ x: '1-Jan-15 13:00', y: 20 },
|
|
{ x: '1-Jan-15 14:00', y: 10 },
|
|
{ x: '1-Jan-15 15:00', y: 33 }
|
|
]}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
class BarChartBarWidth extends React.Component {
|
|
render(): any {
|
|
return (
|
|
<BarChart
|
|
axisLabels={{ x: 'My x Axis', y: 'My y Axis' }}
|
|
axes
|
|
height={250}
|
|
width={650}
|
|
margin={{ top: 50, right: 100, bottom: 50, left: 100 }}
|
|
colorBars
|
|
barWidth={40}
|
|
xType={'time'}
|
|
data={[
|
|
{ x: '1-Jan-15', y: 20 },
|
|
{ x: '2-Jan-15', y: 10 },
|
|
{ x: '3-Jan-15', y: 33 }
|
|
]}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
class BarChartDomainRange extends React.Component {
|
|
render(): any {
|
|
return (
|
|
<BarChart
|
|
axisLabels={{ x: 'My x Axis', y: 'My y Axis' }}
|
|
axes
|
|
colorBars
|
|
height={250}
|
|
width={650}
|
|
barWidth={20}
|
|
xType={'time'}
|
|
xDomainRange={['5-Jan-15', '18-Jan-15']}
|
|
yDomainRange={[5, 50]}
|
|
data={[
|
|
{ x: '10-Jan-15', y: 20 },
|
|
{ x: '12-Jan-15', y: 10 },
|
|
{ x: '15-Jan-15', y: 33 }
|
|
]}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
class BarChartTickDisplayFormat extends React.Component {
|
|
render(): any {
|
|
return (
|
|
<BarChart
|
|
axisLabels={{ x: 'My x Axis', y: 'My y Axis' }}
|
|
axes
|
|
colorBars
|
|
height={250}
|
|
width={650}
|
|
barWidth={20}
|
|
xType={'time'}
|
|
tickTimeDisplayFormat={'%a'}
|
|
xDomainRange={['1-Jan-15', '20-Jan-15']}
|
|
data={[
|
|
{ x: '10-Jan-15', y: 20 },
|
|
{ x: '12-Jan-15', y: 10 },
|
|
{ x: '15-Jan-15', y: 33 }
|
|
]}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
class BarChartNumberOfTicks extends React.Component {
|
|
render(): any {
|
|
return (
|
|
<BarChart
|
|
axisLabels={{ x: 'My x Axis', y: 'My y Axis' }}
|
|
axes
|
|
colorBars
|
|
height={250}
|
|
width={650}
|
|
barWidth={20}
|
|
xTickNumber={5}
|
|
yTickNumber={3}
|
|
xType={'time'}
|
|
xDomainRange={['1-Jan-15', '20-Jan-15']}
|
|
data={[
|
|
{ x: '10-Jan-15', y: 20 },
|
|
{ x: '12-Jan-15', y: 10 },
|
|
{ x: '15-Jan-15', y: 33 }
|
|
]}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
class BarChartGrid extends React.Component {
|
|
render(): any {
|
|
return (
|
|
<BarChart
|
|
axisLabels={{ x: 'My x Axis', y: 'My y Axis' }}
|
|
axes
|
|
grid
|
|
colorBars
|
|
height={250}
|
|
width={650}
|
|
data={[
|
|
{
|
|
x: 'A',
|
|
y: 46
|
|
},
|
|
{
|
|
x: 'B',
|
|
y: 26
|
|
}
|
|
]}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
class BarChartBarAndLine extends React.Component {
|
|
render(): any {
|
|
return (
|
|
<BarChart
|
|
axisLabels={{ x: 'My x Axis', y: 'My y Axis', y2: 'My second y Axis' }}
|
|
axes
|
|
grid
|
|
colorBars
|
|
height={450}
|
|
width={650}
|
|
interpolate={'cardinal'}
|
|
y2Type="linear"
|
|
lineData={[
|
|
{
|
|
x: 'A',
|
|
y: 1000
|
|
},
|
|
{
|
|
x: 'B',
|
|
y: 2000
|
|
}
|
|
]}
|
|
data={[
|
|
{
|
|
x: 'A',
|
|
y: 46
|
|
},
|
|
{
|
|
x: 'B',
|
|
y: 26
|
|
}
|
|
]}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
class BarChartMouseHandlers extends React.Component {
|
|
mouseOverHandler(d: any, e: any) {
|
|
}
|
|
|
|
mouseMoveHandler(e: any) {
|
|
}
|
|
|
|
mouseOutHandler() {
|
|
}
|
|
|
|
render(): any {
|
|
return (
|
|
<BarChart
|
|
axisLabels={{ x: 'My x Axis', y: 'My y Axis' }}
|
|
axes
|
|
grid
|
|
colorBars
|
|
height={250}
|
|
width={650}
|
|
data={[
|
|
{
|
|
x: 'A',
|
|
y: 46
|
|
},
|
|
{
|
|
x: 'B',
|
|
y: 26
|
|
}
|
|
]}
|
|
clickHandler={(d) => 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 (
|
|
<PieChart
|
|
data={[
|
|
{ key: 'A', value: 100 },
|
|
{ key: 'B', value: 200 },
|
|
{ key: 'C', value: 50 }
|
|
]}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
class PieChartColor extends React.Component {
|
|
render(): any {
|
|
return (
|
|
|
|
<PieChart
|
|
data={[
|
|
{ key: 'A', value: 100, color: '#aaac84' },
|
|
{ key: 'B', value: 200, color: '#dce7c5' },
|
|
{ key: 'C', value: 50, color: '#e3a51a' }
|
|
]}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
class PieChartSize extends React.Component {
|
|
render(): any {
|
|
return (
|
|
<PieChart
|
|
size={100}
|
|
data={[
|
|
{ key: 'A', value: 100, color: '#aaac84' },
|
|
{ key: 'B', value: 200, color: '#dce7c5' },
|
|
{ key: 'C', value: 50, color: '#e3a51a' }
|
|
]}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
class PieChartDonut extends React.Component {
|
|
render(): any {
|
|
return (
|
|
<PieChart
|
|
size={400}
|
|
innerHoleSize={200}
|
|
data={[
|
|
{ key: 'A', value: 100, color: '#aaac84' },
|
|
{ key: 'B', value: 200, color: '#dce7c5' },
|
|
{ key: 'C', value: 50, color: '#e3a51a' }
|
|
]}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
class PieChartPadding extends React.Component {
|
|
render(): any {
|
|
return (
|
|
<PieChart
|
|
padding={50}
|
|
data={[
|
|
{ key: 'A', value: 100, color: '#aaac84' },
|
|
{ key: 'B', value: 200, color: '#dce7c5' },
|
|
{ key: 'C', value: 50, color: '#e3a51a' }
|
|
]}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
class PieChartLabels extends React.Component {
|
|
render(): any {
|
|
return (
|
|
<PieChart
|
|
labels
|
|
data={[
|
|
{ key: 'A', value: 100, color: '#aaac84' },
|
|
{ key: 'B', value: 200, color: '#dce7c5' },
|
|
{ key: 'C', value: 50, color: '#e3a51a' }
|
|
]}
|
|
styles={{
|
|
'<div className="cha"></div>rt_text': {
|
|
fontSize: '1em',
|
|
fill: '#fff'
|
|
}
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
class PieChartStyle extends React.Component {
|
|
render(): any {
|
|
return (
|
|
<PieChart
|
|
labels
|
|
styles={{
|
|
'.chart_lines': {
|
|
strokeWidth: 0
|
|
},
|
|
'.chart_text': {
|
|
fontFamily: 'serif',
|
|
fontSize: '1.25em',
|
|
fill: '#333'
|
|
}
|
|
}}
|
|
data={[
|
|
{ key: 'A', value: 100, color: '#aaac84' },
|
|
{ key: 'B', value: 200, color: '#dce7c5' },
|
|
{ key: 'C', value: 50, color: '#e3a51a' }
|
|
]}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
class PieChartMouseHandlers extends React.Component {
|
|
mouseOverHandler(d: any, e: any) { }
|
|
mouseMoveHandler(e: any) { }
|
|
mouseOutHandler() { }
|
|
render(): any {
|
|
return (
|
|
<PieChart
|
|
data={[
|
|
{ key: 'A', value: 100, color: '#aaac84' },
|
|
{ key: 'B', value: 200, color: '#dce7c5' },
|
|
{ key: 'C', value: 50, color: '#e3a51a' }
|
|
]}
|
|
innerHoleSize={200}
|
|
clickHandler={(d) => 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 (
|
|
<LineChart
|
|
data={[
|
|
[
|
|
{ x: 1, y: 20 },
|
|
{ x: 2, y: 10 },
|
|
{ x: 3, y: 25 }
|
|
]
|
|
]}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
class LineChartData2 extends React.Component {
|
|
render(): any {
|
|
return (
|
|
<LineChart
|
|
data={[
|
|
[
|
|
{ x: 1, y: 20 },
|
|
{ x: 2, y: 10 },
|
|
{ x: 3, y: 25 }
|
|
], [
|
|
{ x: 1, y: 10 },
|
|
{ x: 2, y: 12 },
|
|
{ x: 3, y: 4 }
|
|
]
|
|
]}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
class LineChartHeightAndWidth extends React.Component {
|
|
render(): any {
|
|
return (
|
|
<LineChart
|
|
width={50}
|
|
height={50}
|
|
data={[
|
|
[
|
|
{ x: 1, y: 20 },
|
|
{ x: 2, y: 10 },
|
|
{ x: 3, y: 25 }
|
|
], [
|
|
{ x: 1, y: 10 },
|
|
{ x: 2, y: 12 },
|
|
{ x: 3, y: 4 }
|
|
]
|
|
]}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
class LineChartMargin extends React.Component {
|
|
render(): any {
|
|
return (
|
|
<LineChart
|
|
margin={{ top: 0, right: 0, bottom: 30, left: 100 }}
|
|
width={250}
|
|
height={250}
|
|
data={[
|
|
[
|
|
{ x: 1, y: 20 },
|
|
{ x: 2, y: 10 },
|
|
{ x: 3, y: 25 }
|
|
], [
|
|
{ x: 1, y: 10 },
|
|
{ x: 2, y: 12 },
|
|
{ x: 3, y: 4 }
|
|
]
|
|
]}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
class LineChartAxes extends React.Component {
|
|
render(): any {
|
|
return (
|
|
<LineChart
|
|
axes
|
|
width={250}
|
|
height={250}
|
|
data={[
|
|
[
|
|
{ x: 1, y: 20 },
|
|
{ x: 2, y: 10 },
|
|
{ x: 3, y: 25 }
|
|
], [
|
|
{ x: 1, y: 10 },
|
|
{ x: 2, y: 12 },
|
|
{ x: 3, y: 4 }
|
|
]
|
|
]}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
class LineChartAxesLabels extends React.Component {
|
|
render(): any {
|
|
return (
|
|
<LineChart
|
|
axes
|
|
margin={{ top: 10, right: 10, bottom: 50, left: 50 }}
|
|
axisLabels={{ x: 'My x Axis', y: 'My y Axis' }}
|
|
width={250}
|
|
height={250}
|
|
data={[
|
|
[
|
|
{ x: 1, y: 20 },
|
|
{ x: 2, y: 10 },
|
|
{ x: 3, y: 25 }
|
|
], [
|
|
{ x: 1, y: 10 },
|
|
{ x: 2, y: 12 },
|
|
{ x: 3, y: 4 }
|
|
]
|
|
]}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
class LineChartYAxisOrientation extends React.Component {
|
|
render(): any {
|
|
return (
|
|
<LineChart
|
|
axes
|
|
axisLabels={{ x: 'My x Axis', y: 'My y Axis' }}
|
|
yAxisOrientRight
|
|
width={450}
|
|
height={250}
|
|
data={[
|
|
[
|
|
{ x: 1, y: 20 },
|
|
{ x: 2, y: 10 },
|
|
{ x: 3, y: 25 }
|
|
], [
|
|
{ x: 1, y: 10 },
|
|
{ x: 2, y: 12 },
|
|
{ x: 3, y: 4 }
|
|
]
|
|
]}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
class LineChartInterpolate extends React.Component {
|
|
render(): any {
|
|
return (
|
|
<LineChart
|
|
axes
|
|
margin={{ top: 10, right: 10, bottom: 50, left: 50 }}
|
|
axisLabels={{ x: 'My x Axis', y: 'My y Axis' }}
|
|
width={250}
|
|
interpolate={'cardinal'}
|
|
height={250}
|
|
data={[
|
|
[
|
|
{ x: 1, y: 20 },
|
|
{ x: 2, y: 10 },
|
|
{ x: 3, y: 25 }
|
|
], [
|
|
{ x: 1, y: 10 },
|
|
{ x: 2, y: 12 },
|
|
{ x: 3, y: 4 }
|
|
]
|
|
]}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
class LineChartXType extends React.Component {
|
|
render(): any {
|
|
return (
|
|
<LineChart
|
|
xType={'text'}
|
|
axes
|
|
width={350}
|
|
height={250}
|
|
interpolate={'cardinal'}
|
|
data={[
|
|
[
|
|
{ x: 'Mon', y: 20 },
|
|
{ x: 'Tue', y: 10 },
|
|
{ x: 'Wed', y: 33 },
|
|
{ x: 'Thu', y: 45 },
|
|
{ x: 'Fri', y: 15 }
|
|
], [
|
|
{ x: 'Mon', y: 10 },
|
|
{ x: 'Tue', y: 15 },
|
|
{ x: 'Wed', y: 13 },
|
|
{ x: 'Thu', y: 15 },
|
|
{ x: 'Fri', y: 10 }
|
|
]
|
|
]}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
class LineChartXTypeTime extends React.Component {
|
|
render(): any {
|
|
return (
|
|
<LineChart
|
|
xType={'time'}
|
|
axes
|
|
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 }
|
|
]
|
|
]}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
class LineChartYTypeText extends React.Component {
|
|
render(): any {
|
|
return (
|
|
<LineChart
|
|
yType={'text'}
|
|
xType={'text'}
|
|
axes
|
|
margin={{ top: 0, right: 0, bottom: 100, left: 100 }}
|
|
yDomainRange={['Allot', 'Middle', 'Less']}
|
|
interpolate={'cardinal'}
|
|
width={350}
|
|
height={250}
|
|
data={[
|
|
[
|
|
{ x: 'Mon', y: 'Little' },
|
|
{ x: 'Tue', y: 'Perfect' },
|
|
{ x: 'Wed', y: 'Allot' },
|
|
{ x: 'Thu', y: 'Little' },
|
|
{ x: 'Fri', y: 'Perfect' }
|
|
]
|
|
]}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
class LineChartYTypeTime extends React.Component {
|
|
render(): any {
|
|
return (
|
|
<LineChart
|
|
axisLabels={{ x: 'Total Revenue', y: 'January' }}
|
|
margin={{ top: 10, right: 30, bottom: 50, left: 70 }}
|
|
yType={'time'}
|
|
axes
|
|
width={500}
|
|
height={500}
|
|
data={[
|
|
[
|
|
{ x: 10, y: '1-Jan-15' },
|
|
{ x: 20, y: '10-Jan-15' },
|
|
{ x: 40, y: '21-Jan-15' },
|
|
{ x: 80, y: '31-Jan-15' }
|
|
], [
|
|
{ x: 0, y: '1-Jan-15' },
|
|
{ x: 15, y: '10-Jan-15' },
|
|
{ x: 20, y: '21-Jan-15' },
|
|
{ x: 25, y: '31-Jan-15' }
|
|
]
|
|
]}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
class LineChartGrid extends React.Component {
|
|
render(): any {
|
|
return (
|
|
<LineChart
|
|
axisLabels={{ x: 'Total Revenue', y: 'January' }}
|
|
margin={{ top: 10, right: 30, bottom: 50, left: 70 }}
|
|
yType={'time'}
|
|
axes
|
|
grid
|
|
width={500}
|
|
height={500}
|
|
data={[
|
|
[
|
|
{ x: 10, y: '1-Jan-15' },
|
|
{ x: 20, y: '10-Jan-15' },
|
|
{ x: 40, y: '21-Jan-15' },
|
|
{ x: 80, y: '31-Jan-15' }
|
|
], [
|
|
{ x: 0, y: '1-Jan-15' },
|
|
{ x: 15, y: '10-Jan-15' },
|
|
{ x: 20, y: '21-Jan-15' },
|
|
{ x: 25, y: '31-Jan-15' }
|
|
]
|
|
]}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
class LineChartVerticalGrid extends React.Component {
|
|
render(): any {
|
|
return (
|
|
<LineChart
|
|
xType={'time'}
|
|
axes
|
|
grid
|
|
verticalGrid
|
|
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 }
|
|
]
|
|
]}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
class LineChartDomainRange extends React.Component {
|
|
render(): any {
|
|
return (
|
|
<LineChart
|
|
axes
|
|
xDomainRange={[0, 100]}
|
|
yDomainRange={[0, 100]}
|
|
margin={{ top: 0, right: 0, bottom: 100, left: 100 }}
|
|
width={250}
|
|
height={250}
|
|
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 LineChartTickDisplayFormat extends React.Component {
|
|
render(): any {
|
|
return (
|
|
<LineChart
|
|
axisLabels={{ x: 'Total Revenue', y: 'January' }}
|
|
margin={{ top: 10, right: 30, bottom: 50, left: 70 }}
|
|
yType={'time'}
|
|
axes
|
|
interpolate={'cardinal'}
|
|
tickTimeDisplayFormat={'%a'}
|
|
width={500}
|
|
height={500}
|
|
data={[
|
|
[
|
|
{ x: 10, y: '1-Jan-15' },
|
|
{ x: 20, y: '10-Jan-15' },
|
|
{ x: 40, y: '21-Jan-15' },
|
|
{ x: 80, y: '31-Jan-15' }
|
|
], [
|
|
{ x: 0, y: '1-Jan-15' },
|
|
{ x: 15, y: '10-Jan-15' },
|
|
{ x: 20, y: '21-Jan-15' },
|
|
{ x: 25, y: '31-Jan-15' }
|
|
]
|
|
]}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
class LineChartNumberOfTicks extends React.Component {
|
|
render(): any {
|
|
return (
|
|
<LineChart
|
|
axes
|
|
xTicks={5}
|
|
yTicks={5}
|
|
xDomainRange={[0, 100]}
|
|
yDomainRange={[0, 100]}
|
|
width={500}
|
|
height={250}
|
|
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 LineChartLineColors extends React.Component {
|
|
render(): any {
|
|
return (
|
|
<LineChart
|
|
xType={'time'}
|
|
axes
|
|
grid
|
|
verticalGrid
|
|
interpolate={'cardinal'}
|
|
lineColors={['pink', 'cyan']}
|
|
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 }
|
|
]
|
|
]}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
class LineChartDataPoints extends React.Component {
|
|
render(): any {
|
|
return (
|
|
<LineChart
|
|
axes
|
|
dataPoints
|
|
xDomainRange={[0, 100]}
|
|
yDomainRange={[0, 100]}
|
|
width={500}
|
|
height={250}
|
|
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 LineChartMouseEvents extends React.Component {
|
|
mouseOverHandler(d: any, e: any) { }
|
|
mouseMoveHandler(e: any) { }
|
|
mouseOutHandler() { }
|
|
render(): any {
|
|
return (
|
|
<LineChart
|
|
axes
|
|
dataPoints
|
|
grid
|
|
xDomainRange={[0, 100]}
|
|
yDomainRange={[0, 100]}
|
|
clickHandler={() => { } }
|
|
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 (
|
|
<AreaChart
|
|
data={[
|
|
[
|
|
{ x: 1, y: 20 },
|
|
{ x: 2, y: 10 },
|
|
{ x: 3, y: 25 }
|
|
]
|
|
]}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
class AreaChartData2 extends React.Component {
|
|
render(): any {
|
|
return (
|
|
<AreaChart
|
|
data={[
|
|
[
|
|
{ x: 1, y: 20 },
|
|
{ x: 2, y: 10 },
|
|
{ x: 3, y: 25 }
|
|
], [
|
|
{ x: 1, y: 10 },
|
|
{ x: 2, y: 12 },
|
|
{ x: 3, y: 4 }
|
|
]
|
|
]}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
class AreaChartHeightAndWidth extends React.Component {
|
|
render(): any {
|
|
return (
|
|
<AreaChart
|
|
width={50}
|
|
height={50}
|
|
data={[
|
|
[
|
|
{ x: 1, y: 20 },
|
|
{ x: 2, y: 10 },
|
|
{ x: 3, y: 25 }
|
|
], [
|
|
{ x: 1, y: 10 },
|
|
{ x: 2, y: 12 },
|
|
{ x: 3, y: 4 }
|
|
]
|
|
]}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
class AreaChartMargin extends React.Component {
|
|
render(): any {
|
|
return (
|
|
<AreaChart
|
|
margin={{ top: 30, right: 30, bottom: 30, left: 30 }}
|
|
width={250}
|
|
height={250}
|
|
data={[
|
|
[
|
|
{ x: 1, y: 20 },
|
|
{ x: 2, y: 10 },
|
|
{ x: 3, y: 25 }
|
|
], [
|
|
{ x: 1, y: 10 },
|
|
{ x: 2, y: 12 },
|
|
{ x: 3, y: 4 }
|
|
]
|
|
]}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
class AreaChartAxes extends React.Component {
|
|
render(): any {
|
|
return (
|
|
<AreaChart
|
|
axes
|
|
width={250}
|
|
height={250}
|
|
data={[
|
|
[
|
|
{ x: 1, y: 20 },
|
|
{ x: 2, y: 10 },
|
|
{ x: 3, y: 25 }
|
|
], [
|
|
{ x: 1, y: 10 },
|
|
{ x: 2, y: 12 },
|
|
{ x: 3, y: 4 }
|
|
]
|
|
]}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
class AreaChartAxesLabels extends React.Component {
|
|
render(): any {
|
|
return (
|
|
<AreaChart
|
|
axes
|
|
margin={{ top: 10, right: 10, bottom: 50, left: 50 }}
|
|
axisLabels={{ x: 'My x Axis', y: 'My y Axis' }}
|
|
width={250}
|
|
height={250}
|
|
data={[
|
|
[
|
|
{ x: 1, y: 20 },
|
|
{ x: 2, y: 10 },
|
|
{ x: 3, y: 25 }
|
|
], [
|
|
{ x: 1, y: 10 },
|
|
{ x: 2, y: 12 },
|
|
{ x: 3, y: 4 }
|
|
]
|
|
]}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
class AreaChartYAxisOrientation extends React.Component {
|
|
render(): any {
|
|
return (
|
|
<AreaChart
|
|
axes
|
|
axisLabels={{ x: 'My x Axis', y: 'My y Axis' }}
|
|
yAxisOrientRight
|
|
width={450}
|
|
height={250}
|
|
data={[
|
|
[
|
|
{ x: 1, y: 20 },
|
|
{ x: 2, y: 10 },
|
|
{ x: 3, y: 25 }
|
|
], [
|
|
{ x: 1, y: 10 },
|
|
{ x: 2, y: 12 },
|
|
{ x: 3, y: 4 }
|
|
]
|
|
]}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
class AreaChartInterpolate extends React.Component {
|
|
render(): any {
|
|
return (
|
|
<AreaChart
|
|
axes
|
|
margin={{ top: 10, right: 10, bottom: 50, left: 50 }}
|
|
axisLabels={{ x: 'My x Axis', y: 'My y Axis' }}
|
|
width={250}
|
|
interpolate={'cardinal'}
|
|
height={250}
|
|
data={[
|
|
[
|
|
{ x: 1, y: 20 },
|
|
{ x: 2, y: 10 },
|
|
{ x: 3, y: 25 }
|
|
], [
|
|
{ x: 1, y: 10 },
|
|
{ x: 2, y: 12 },
|
|
{ x: 3, y: 4 }
|
|
]
|
|
]}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
class AreaChartAxisType extends React.Component {
|
|
render(): any {
|
|
return (
|
|
<AreaChart
|
|
xType={'text'}
|
|
axes
|
|
width={350}
|
|
height={250}
|
|
interpolate={'cardinal'}
|
|
data={[
|
|
[
|
|
{ x: 'Mon', y: 20 },
|
|
{ x: 'Tue', y: 10 },
|
|
{ x: 'Wed', y: 33 },
|
|
{ x: 'Thu', y: 45 },
|
|
{ x: 'Fri', y: 15 }
|
|
], [
|
|
{ x: 'Mon', y: 10 },
|
|
{ x: 'Tue', y: 15 },
|
|
{ x: 'Wed', y: 13 },
|
|
{ x: 'Thu', y: 15 },
|
|
{ x: 'Fri', y: 10 }
|
|
]
|
|
]}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
class AreaChartAxisTypeXTime extends React.Component {
|
|
render(): any {
|
|
return (
|
|
<AreaChart
|
|
xType={'time'}
|
|
axes
|
|
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 }
|
|
]
|
|
]}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
class AreaChartYTypeText extends React.Component {
|
|
render(): any {
|
|
return (
|
|
<AreaChart
|
|
yType={'text'}
|
|
xType={'text'}
|
|
axes
|
|
margin={{ top: 0, right: 0, bottom: 100, left: 100 }}
|
|
yDomainRange={['Allot', 'Middle', 'Less']}
|
|
interpolate={'cardinal'}
|
|
width={350}
|
|
height={250}
|
|
data={[
|
|
[
|
|
{ x: 'Mon', y: 'Little' },
|
|
{ x: 'Tue', y: 'Perfect' },
|
|
{ x: 'Wed', y: 'Allot' },
|
|
{ x: 'Thu', y: 'Little' },
|
|
{ x: 'Fri', y: 'Perfect' }
|
|
]
|
|
]}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
class AreaChartGrid extends React.Component {
|
|
render(): any {
|
|
return (
|
|
<AreaChart
|
|
xType={'time'}
|
|
axes
|
|
grid
|
|
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 }
|
|
]
|
|
]}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
class AreaChartVerticalGrid extends React.Component {
|
|
render(): any {
|
|
return (
|
|
<AreaChart
|
|
xType={'time'}
|
|
axes
|
|
grid
|
|
verticalGrid
|
|
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 }
|
|
]
|
|
]}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
class AreaChartDomainRange extends React.Component {
|
|
render(): any {
|
|
return (
|
|
<AreaChart
|
|
axes
|
|
xDomainRange={[0, 100]}
|
|
yDomainRange={[0, 100]}
|
|
margin={{ top: 0, right: 0, bottom: 100, left: 100 }}
|
|
width={750}
|
|
height={250}
|
|
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 AreaChartTickDisplayFormat extends React.Component {
|
|
render(): any {
|
|
return (
|
|
<AreaChart
|
|
xType={'time'}
|
|
axes
|
|
grid
|
|
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 }
|
|
]
|
|
]}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
class AreaChartTickNumbers extends React.Component {
|
|
render(): any {
|
|
return (
|
|
<AreaChart
|
|
xType={'time'}
|
|
axes
|
|
xTicks={5}
|
|
yTicks={3}
|
|
grid
|
|
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 }
|
|
]
|
|
]}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
class AreaChartDataPoints extends React.Component {
|
|
render(): any {
|
|
return (
|
|
<AreaChart
|
|
xType={'time'}
|
|
axes
|
|
dataPoints
|
|
xTicks={5}
|
|
yTicks={3}
|
|
grid
|
|
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 }
|
|
]
|
|
]}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
class AreaChartMouseHandlers extends React.Component {
|
|
mouseOverHandler(d: any, e: any) { }
|
|
mouseMoveHandler(e: any) { }
|
|
mouseOutHandler() { }
|
|
render(): any {
|
|
return (
|
|
<AreaChart
|
|
xType={'time'}
|
|
axes
|
|
dataPoints
|
|
xTicks={5}
|
|
yTicks={3}
|
|
grid
|
|
clickHandler={(d) => { } }
|
|
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 (
|
|
<ScatterplotChart data={data} />
|
|
);
|
|
}
|
|
}
|
|
|
|
class ScatterplotHeightAndWidth extends React.Component {
|
|
render(): any {
|
|
return (
|
|
<ScatterplotChart data={data} width={160} height={90} />
|
|
);
|
|
}
|
|
}
|
|
|
|
class ScatterplotMargin extends React.Component {
|
|
render(): any {
|
|
return (
|
|
<ScatterplotChart
|
|
data={data}
|
|
margin={{ top: 10, right: 10, bottom: 30, left: 100 }} />
|
|
);
|
|
}
|
|
}
|
|
|
|
class ScatterplotAxes extends React.Component {
|
|
render(): any {
|
|
return (
|
|
<ScatterplotChart
|
|
data={data}
|
|
axes
|
|
width={480}
|
|
height={270} />
|
|
);
|
|
}
|
|
}
|
|
|
|
class ScatterplotYAxisOrientation extends React.Component {
|
|
render(): any {
|
|
return (
|
|
<ScatterplotChart
|
|
data={data}
|
|
axes
|
|
yAxisOrientRight
|
|
axisLabels={{ x: 'My x Axis', y: 'My y Axis' }}
|
|
width={480}
|
|
height={270}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
class ScatterplotAxesLabels extends React.Component {
|
|
render(): any {
|
|
return (
|
|
<ScatterplotChart
|
|
data={data}
|
|
axes
|
|
axisLabels={{ x: 'My x Axis', y: 'My y Axis' }}
|
|
width={480}
|
|
height={270}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
class ScatterplotDotRadius extends React.Component {
|
|
render(): any {
|
|
return (
|
|
<ScatterplotChart
|
|
data={data}
|
|
axes
|
|
axisLabels={{ x: 'My x Axis', y: 'My y Axis' }}
|
|
dotRadius={10}
|
|
width={480}
|
|
height={270}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
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 (
|
|
<ScatterplotChart data={data} config={this.config} />
|
|
);
|
|
}
|
|
}
|
|
|
|
class ScatterplotGrid extends React.Component {
|
|
render(): any {
|
|
return (
|
|
<ScatterplotChart
|
|
data={data}
|
|
axes
|
|
axisLabels={{ x: 'My x Axis', y: 'My y Axis' }}
|
|
dotRadius={10}
|
|
width={480}
|
|
height={270}
|
|
grid
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
class ScatterplotVerticalGrid extends React.Component {
|
|
render(): any {
|
|
return (
|
|
<ScatterplotChart
|
|
data={data}
|
|
axes
|
|
verticalGrid
|
|
axisLabels={{ x: 'My x Axis', y: 'My y Axis' }}
|
|
dotRadius={10}
|
|
width={480}
|
|
height={270}
|
|
grid
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
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 (
|
|
|
|
<ScatterplotChart
|
|
data={this.typedData}
|
|
axes
|
|
axisLabels={{ x: 'My x Axis', y: 'My y Axis' }}
|
|
dotRadius={6}
|
|
width={480}
|
|
height={270}
|
|
grid
|
|
xType="text"
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
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 (
|
|
<ScatterplotChart
|
|
data={this.typedData}
|
|
axes
|
|
axisLabels={{ x: 'My x Axis', y: 'My y Axis' }}
|
|
dotRadius={6}
|
|
width={480}
|
|
height={270}
|
|
grid
|
|
xType="time"
|
|
xDomainRange={['31-Dec-14', '4-Jan-15']}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
class ScatterplotMouseEvents extends React.Component {
|
|
mouseOverHandler(d: any, e: any) { }
|
|
mouseMoveHandler(e: any) { }
|
|
mouseOutHandler() { }
|
|
render(): any {
|
|
return (
|
|
|
|
<ScatterplotChart
|
|
data={data}
|
|
axes
|
|
axisLabels={{ x: 'My x Axis', y: 'My y Axis' }}
|
|
dotRadius={6}
|
|
width={480}
|
|
height={270}
|
|
grid
|
|
mouseOverHandler={this.mouseOverHandler}
|
|
mouseOutHandler={this.mouseOutHandler}
|
|
mouseMoveHandler={this.mouseMoveHandler}
|
|
clickHandler={(d) => { } }
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
|
|
const pieData = [
|
|
{ key: 'Cats', value: 100 },
|
|
{ key: 'Dogs', value: 200 },
|
|
{ key: 'Other', value: 50 }
|
|
];
|
|
|
|
class LegendData extends React.Component {
|
|
render(): any {
|
|
return (
|
|
<Legend data={pieData} dataId={'key'} />
|
|
);
|
|
}
|
|
}
|
|
|
|
class LegendHorizontal extends React.Component {
|
|
render(): any {
|
|
return (
|
|
<Legend data={pieData} dataId={'key'} horizontal />
|
|
);
|
|
}
|
|
}
|
|
|
|
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 (
|
|
<Legend data={pieDataCustom} dataId={'key'} config={config} />
|
|
);
|
|
}
|
|
}
|
|
|
|
|
|
/* 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 (
|
|
<Legend
|
|
data={pieDataCustom}
|
|
dataId={'key'}
|
|
config={config}
|
|
styles={customStyle}
|
|
horizontal
|
|
/>
|
|
);
|
|
}
|
|
} |