From cea4edd577e26feb2c4db3fac9a9f4e1df557158 Mon Sep 17 00:00:00 2001
From: Matthew Bull <wingsbob@users.noreply.github.com>
Date: Tue, 8 Oct 2019 22:17:52 +0100
Subject: [PATCH] Add extra axis props (#38967)

---
 types/recharts/index.d.ts         | 24 ++++++++++----
 types/recharts/recharts-tests.tsx | 52 +++++++++++++++----------------
 2 files changed, 44 insertions(+), 32 deletions(-)

diff --git a/types/recharts/index.d.ts b/types/recharts/index.d.ts
index 829a3acd8a..7f1cc0cd61 100644
--- a/types/recharts/index.d.ts
+++ b/types/recharts/index.d.ts
@@ -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
diff --git a/types/recharts/recharts-tests.tsx b/types/recharts/recharts-tests.tsx
index 8c3b10997b..56eff54aa6 100644
--- a/types/recharts/recharts-tests.tsx
+++ b/types/recharts/recharts-tests.tsx
@@ -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'));