mirror of
https://github.com/gosticks/DefinitelyTyped.git
synced 2025-10-16 12:05:41 +00:00
Add extra axis props (#38967)
This commit is contained in:
Matthew Bull
Armando Aguirre
parent
d56b018b0d
commit
cea4edd577
24
types/recharts/index.d.ts
vendored
24
types/recharts/index.d.ts
vendored
@ -28,7 +28,7 @@ export type TickFormatterFunction = (value: any) => any;
|
||||
export type TickGeneratorFunction = (noTicksProps: object) => any[];
|
||||
export type LabelFormatter = (label: string | number) => React.ReactNode;
|
||||
export type TooltipFormatter = (value: string | number | Array<string | number>, name: string,
|
||||
entry: TooltipPayload, index: number) => React.ReactNode;
|
||||
entry: TooltipPayload, index: number) => React.ReactNode;
|
||||
export type ItemSorter<T> = (a: T, b: T) => number;
|
||||
export type ContentRenderer<P> = (props: P) => React.ReactNode;
|
||||
export type DataKey = string | number | ((dataObject: any) => string | number | [number, number] | null);
|
||||
@ -41,7 +41,7 @@ export type ScaleType =
|
||||
'auto' | 'linear' | 'pow' | 'sqrt' | 'log' | 'identity' | 'time' | 'band' | 'point' |
|
||||
'ordinal' | 'quantile' | 'quantize' | 'utcTime' | 'sequential' | 'threshold';
|
||||
export type PositionType =
|
||||
'top' | 'left' | 'right' | 'bottom' | 'inside' | 'outside'| 'insideLeft' | 'insideRight' |
|
||||
'top' | 'left' | 'right' | 'bottom' | 'inside' | 'outside' | 'insideLeft' | 'insideRight' |
|
||||
'insideTop' | 'insideBottom' | 'insideTopLeft' | 'insideBottomLeft' | 'insideTopRight' |
|
||||
'insideBottomRight' | 'insideStart' | 'insideEnd' | 'end' | 'center';
|
||||
export type StackOffsetType = 'sign' | 'expand' | 'none' | 'wiggle' | 'silhouette';
|
||||
@ -148,7 +148,7 @@ export interface PresentationAttributes<X = number, Y = number> extends Pick<CSS
|
||||
fontSize: number | string;
|
||||
fontSizeAdjust: number | string;
|
||||
fontWeight: 'normal' | 'bold' | 'bolder' | 'lighter' |
|
||||
100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 'inherit';
|
||||
100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 'inherit';
|
||||
imageRendering: 'auto' | 'optimizeSpeed' | 'optimizeQuality' | 'inherit';
|
||||
kerning: number | string;
|
||||
opacity: number | string;
|
||||
@ -409,7 +409,7 @@ export interface LegendProps {
|
||||
onBBoxUpdate?: BBoxUpdateCallback;
|
||||
}
|
||||
|
||||
export class Legend extends React.Component<LegendProps, BoxSize> {}
|
||||
export class Legend extends React.Component<LegendProps, BoxSize> { }
|
||||
|
||||
export interface LineProps extends EventAttributes, Partial<PresentationAttributes>, Animatable {
|
||||
className?: string;
|
||||
@ -742,7 +742,7 @@ export interface ResponsiveContainerProps {
|
||||
className?: string | number;
|
||||
}
|
||||
|
||||
export class ResponsiveContainer extends React.Component<ResponsiveContainerProps, ContainerSize> {}
|
||||
export class ResponsiveContainer extends React.Component<ResponsiveContainerProps, ContainerSize> { }
|
||||
|
||||
export interface ScatterPoint {
|
||||
cx?: number;
|
||||
@ -859,7 +859,7 @@ export interface TooltipProps extends Animatable {
|
||||
useTranslate3d?: boolean;
|
||||
}
|
||||
|
||||
export class Tooltip extends React.Component<TooltipProps, BoxSize> {}
|
||||
export class Tooltip extends React.Component<TooltipProps, BoxSize> { }
|
||||
|
||||
export interface TreemapProps extends EventAttributes, Animatable {
|
||||
width?: number;
|
||||
@ -936,6 +936,12 @@ export interface XAxisProps extends EventAttributes {
|
||||
width?: number;
|
||||
// The height of axis, which need to be set by user
|
||||
height?: number;
|
||||
// Rotation of tick labels
|
||||
angle?: number;
|
||||
// X offset of tick label
|
||||
dx?: number;
|
||||
// Y offset of tick label
|
||||
dy?: number;
|
||||
mirror?: boolean;
|
||||
// The orientation of axis
|
||||
orientation?: 'top' | 'bottom';
|
||||
@ -991,6 +997,12 @@ export interface YAxisProps extends EventAttributes {
|
||||
ticks?: any[];
|
||||
// The count of ticks
|
||||
tickCount?: number;
|
||||
// Rotation of tick labels
|
||||
angle?: number;
|
||||
// X offset of tick label
|
||||
dx?: number;
|
||||
// Y offset of tick label
|
||||
dy?: number;
|
||||
// The formatter function of tick
|
||||
tickFormatter?: TickFormatterFunction;
|
||||
// The width of axis, which need to be set by user
|
||||
|
||||
@ -24,7 +24,7 @@ class Component extends React.Component<{}, ComponentState> {
|
||||
renderYAxisTitle = () => {
|
||||
return (
|
||||
<Text textAnchor="start" verticalAnchor="start" capHeight="0.8em" lineHeight="2em">
|
||||
pv of page
|
||||
pv of page
|
||||
</Text>
|
||||
);
|
||||
}
|
||||
@ -92,7 +92,7 @@ class Component extends React.Component<{}, ComponentState> {
|
||||
);
|
||||
};
|
||||
return (
|
||||
<div style={{width: "100%", height: "100%"}}>
|
||||
<div style={{ width: "100%", height: "100%" }}>
|
||||
<ResponsiveContainer height={300}>
|
||||
<LineChart width={500} height={300} data={data}>
|
||||
<XAxis dataKey="name">
|
||||
@ -101,8 +101,8 @@ class Component extends React.Component<{}, ComponentState> {
|
||||
<YAxis stroke="#8884d8">
|
||||
<Label>Y axis</Label>
|
||||
</YAxis>
|
||||
<CartesianGrid vertical={true} horizontal={false} verticalFill={["#fafafa", "#c8c8c8"]} />
|
||||
<Line type="monotone" dataKey="uv" stroke="#8884d8" onClick={ this.clickHandler } />
|
||||
<CartesianGrid vertical={true} horizontal={false} verticalFill={["#fafafa", "#c8c8c8"]} />
|
||||
<Line type="monotone" dataKey="uv" stroke="#8884d8" onClick={this.clickHandler} />
|
||||
<Line type="monotone" dataKey="pv" stroke="#82ca9d" />
|
||||
<Tooltip />
|
||||
<Brush dataKey="name" />
|
||||
@ -124,8 +124,8 @@ class Component extends React.Component<{}, ComponentState> {
|
||||
<YAxis>
|
||||
<Label>Y axis</Label>
|
||||
</YAxis>
|
||||
<CartesianGrid vertical={false} horizontal={true} horizontalFill={["#fafafa", "#c8c8c8"]} />
|
||||
<Line type="monotone" dataKey="uv" stroke="#8884d8" onClick={ this.clickHandler } />
|
||||
<CartesianGrid vertical={false} horizontal={true} horizontalFill={["#fafafa", "#c8c8c8"]} />
|
||||
<Line type="monotone" dataKey="uv" stroke="#8884d8" onClick={this.clickHandler} />
|
||||
<Line type="monotone" dataKey="pv" stroke="#82ca9d" />
|
||||
<Tooltip />
|
||||
<Brush dataKey="name" />
|
||||
@ -143,8 +143,8 @@ class Component extends React.Component<{}, ComponentState> {
|
||||
<LineChart width={500} height={300} data={data}>
|
||||
<XAxis dataKey="name" label={{ value: "X axis - name" }} />
|
||||
<YAxis label={{ value: "Y axis" }} />
|
||||
<CartesianGrid stroke="#eee" strokeDasharray="5 5" />
|
||||
<Line type="monotone" dataKey="uv" stroke="#8884d8" onClick={ this.clickHandler } />
|
||||
<CartesianGrid stroke="#eee" strokeDasharray="5 5" />
|
||||
<Line type="monotone" dataKey="uv" stroke="#8884d8" onClick={this.clickHandler} />
|
||||
<Line type="monotone" dataKey="pv" stroke="#82ca9d" />
|
||||
<Tooltip />
|
||||
<Brush dataKey="name" />
|
||||
@ -161,7 +161,7 @@ class Component extends React.Component<{}, ComponentState> {
|
||||
<ResponsiveContainer height={400}>
|
||||
<PieChart width={800} height={400}>
|
||||
<Pie
|
||||
label={(props: {name: string}) => <Label>{props.name}</Label>}
|
||||
label={(props: { name: string }) => <Label>{props.name}</Label>}
|
||||
dataKey="value"
|
||||
activeIndex={this.state.activeIndex}
|
||||
activeShape={renderActiveShape}
|
||||
@ -178,8 +178,8 @@ class Component extends React.Component<{}, ComponentState> {
|
||||
</ResponsiveContainer>
|
||||
<ResponsiveContainer height={300}>
|
||||
<ScatterChart width={500} height={300}>
|
||||
<XAxis type="number" dataKey="uv" name="stature" unit="cm" />
|
||||
<YAxis dataKey="pv" name="weight" unit="kg" />
|
||||
<XAxis type="number" dataKey="uv" name="stature" unit="cm" angle={30} dx={20} dy={20} />
|
||||
<YAxis dataKey="pv" name="weight" unit="kg" angle={30} dx={20} dy={20} />
|
||||
<ZAxis dataKey="amt" range={[64, 144]} name="score" unit="km" />
|
||||
<Tooltip cursor={{ strokeDasharray: "3 3" }} />
|
||||
<Legend />
|
||||
@ -193,20 +193,20 @@ class Component extends React.Component<{}, ComponentState> {
|
||||
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 position="top" content={this.renderYAxisTitle} />
|
||||
</YAxis>
|
||||
<Legend align="right" verticalAlign="top" height={36} width={800} wrapperStyle={{ top: 5 }}/>
|
||||
<Bar dataKey="pv" fill="#8884d8">
|
||||
<LabelList dataKey="name" position="insideTop" angle={45} />
|
||||
</Bar>
|
||||
<Bar dataKey="uv" fill="#82ca9d" radius={[10, 10, 0, 0]}>
|
||||
<LabelList dataKey="uv" position="top" />
|
||||
</Bar>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis dataKey="name">
|
||||
<Label value="Pages of my website" offset={0} position="insideBottom" />
|
||||
</XAxis>
|
||||
<YAxis>
|
||||
<Label position="top" content={this.renderYAxisTitle} />
|
||||
</YAxis>
|
||||
<Legend align="right" verticalAlign="top" height={36} width={800} wrapperStyle={{ top: 5 }} />
|
||||
<Bar dataKey="pv" fill="#8884d8">
|
||||
<LabelList dataKey="name" position="insideTop" angle={45} />
|
||||
</Bar>
|
||||
<Bar dataKey="uv" fill="#82ca9d" radius={[10, 10, 0, 0]}>
|
||||
<LabelList dataKey="uv" position="top" />
|
||||
</Bar>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
@ -214,4 +214,4 @@ class Component extends React.Component<{}, ComponentState> {
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(<Component/>, document.getElementById('app'));
|
||||
ReactDOM.render(<Component />, document.getElementById('app'));
|
||||
|
||||
Loading…
Reference in New Issue
Block a user