Fix missing LabelList typing & update README

This commit is contained in:
Teemu Koivisto
2018-06-01 16:11:18 +03:00
parent 9fb3214e64
commit 14f39d7936
3 changed files with 47 additions and 2 deletions
+8
View File
@@ -2,3 +2,11 @@ Typings for [Recharts](http://recharts.org/), a composable charting library buil
The [Recharts website](https://github.com/recharts/recharts.org) has comprehensive API documentation which is generated from JavaScript files.
Those files are used as input to generate these typings.
# How to run tests
As of 1.6.2018.
1) Install typescript globally: `npm i -g typescript`
2) Install React's dependencies: `cd ../react && npm i`
3) Run tests: `cd ../recharts && tsc`
+17
View File
@@ -841,6 +841,23 @@ export interface LabelProps {
content?: React.ReactElement<any> | ContentRenderer<Label>;
}
export class LabelList extends React.Component<LabelListProps> { }
export interface LabelListProps {
angle?: number;
children?: React.ReactNode[] | React.ReactNode;
className?: string;
clockWise?: boolean;
content?: React.ReactElement<any> | ContentRenderer<Label>;
data?: number;
dataKey: string | number | RechartsFunction;
formatter?: LabelFormatter;
id?: string;
offset?: number;
position?: PositionType;
valueAccessor?: RechartsFunction;
}
export type AxisDomain = string | number | ContentRenderer<any> | 'auto' | 'dataMin' | 'dataMax';
export interface XPadding {
+22 -2
View File
@@ -4,8 +4,8 @@ import * as ReactDOM from 'react-dom';
import {
CartesianGrid, Line, LineChart, PieChart, Pie,
Sector, XAxis, YAxis, Tooltip, ReferenceLine,
ReferenceArea, ResponsiveContainer, Label, Brush,
ScatterChart, ZAxis, Legend, Scatter
ReferenceArea, ResponsiveContainer, Label, LabelList, Brush,
ScatterChart, ZAxis, Legend, Scatter, Bar, BarChart
} from 'recharts';
interface ComponentState {
@@ -184,6 +184,26 @@ class Component extends React.Component<{}, ComponentState> {
<Scatter name="A school" data={data} fill="#8884d8" />
</ScatterChart>
</ResponsiveContainer>
<ResponsiveContainer>
<BarChart
width={730}
height={250}
data={data}
margin={{ top: 15, right: 30, left: 20, bottom: 5 }}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name">
<Label value="Pages of my website" offset={0} position="insideBottom" />
</XAxis>
<YAxis label='pv of page' />
<Bar dataKey="pv" fill="#8884d8">
<LabelList dataKey="name" position="insideTop" angle={45} />
</Bar>
<Bar dataKey="uv" fill="#82ca9d">
<LabelList dataKey="uv" position="top" />
</Bar>
</BarChart>
</ResponsiveContainer>
</div>
);
}