Move all apiExamples to tsx

Author: PavelVanecek

src/docs/apiExamples/AreaChart.js renamed to src/docs/apiExamples/AreaChart.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { AreaChart, XAxis, YAxis, CartesianGrid, Tooltip, Area } from 'recharts';
 
 const data = [
@@ -136,7 +135,7 @@ const rangeExampleCode = `
   height={250}
   data={rangeData}
   margin={{
-    top: 20, right: 20, bottom: 20, left: 20,
+    top: 20, right: 20, bottom: 20, left: 20
   }}
 >
   <XAxis dataKey="day" />

src/docs/apiExamples/BarChart.js renamed to src/docs/apiExamples/BarChart.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { BarChart, Legend, XAxis, YAxis, CartesianGrid, Tooltip, Bar } from 'recharts';
 
 const data = [

src/docs/apiExamples/Cell.js renamed to src/docs/apiExamples/Cell.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { PieChart, Pie, Cell, BarChart, Bar } from 'recharts';
 
 const data = [
@@ -22,8 +21,9 @@ const example = () => (
       </defs>
     </svg>
     <PieChart width={730} height={250}>
+      {/* @ts-ignore */}
       <Pie data={data} cx="50%" cy="50%" outerRadius={80} label>
-        {data.map((entry, index) => (
+        {data.map((_entry, index) => (
           <Cell key={`cell-${index}`} fill={colors[index]} />
         ))}
       </Pie>
@@ -34,7 +34,7 @@ const example = () => (
 const barExample = () => (
   <BarChart width={730} height={250} data={data}>
     <Bar dataKey="value">
-      {data.map((entry, index) => (
+      {data.map((_entry, index) => (
         <Cell key={`cell-${index}`} fill="none" stroke={colors[index]} strokeWidth={index === 2 ? 4 : 1} />
       ))}
     </Bar>

src/docs/apiExamples/ComposedChart.js renamed to src/docs/apiExamples/ComposedChart.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ComposedChart, XAxis, YAxis, CartesianGrid, Tooltip, Legend, Area, Bar, Line } from 'recharts';
 
 const data = [

src/docs/apiExamples/ErrorBar.js renamed to src/docs/apiExamples/ErrorBar.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ScatterChart, XAxis, YAxis, CartesianGrid, Tooltip, Legend, Scatter, ErrorBar } from 'recharts';
 
 const data = [
@@ -77,8 +76,8 @@ const example = () => (
 );
 
 const exampleCode = `
-<ScatterChart 
-  width={730} 
+<ScatterChart
+  width={730}
   height={250}
   margin={{ top: 20, right: 20, bottom: 0, left: 20 }}
 >

src/docs/apiExamples/FunnelChart.js renamed to src/docs/apiExamples/FunnelChart.tsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import { FunnelChart, Funnel, Tooltip, LabelList, Cell } from 'recharts';
+import { FunnelChart, Funnel, Tooltip, LabelList } from 'recharts';
 
 const data = [
   { value: 100, name: '展现', fill: '#8884d8' },

src/docs/apiExamples/Label.js renamed to src/docs/apiExamples/Label.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Label, LabelList } from 'recharts';
 import { localeGet } from '../../utils/LocaleUtils';
 
@@ -47,7 +46,7 @@ const data = [
   },
 ];
 
-const example = (local) => (
+const example = (local: string) => (
   <div>
     <p style={{ fontSize: 18 }}>{localeGet(local, 'label', 'cartesian-title')}</p>
     <div className="cartesian-label-position">
@@ -206,10 +205,10 @@ export default [
   {
     demo: chartExample,
     code: `
-<BarChart 
-  width={730} 
-  height={250} 
-  data={data} 
+<BarChart
+  width={730}
+  height={250}
+  data={data}
   margin={{ top: 15, right: 30, left: 20, bottom: 5 }}
 >
   <CartesianGrid strokeDasharray="3 3" />

src/docs/apiExamples/LabelList.js renamed to src/docs/apiExamples/LabelList.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Label, LabelList } from 'recharts';
 
 const data = [

src/docs/apiExamples/Legend.js renamed to src/docs/apiExamples/Legend.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { LineChart, XAxis, YAxis, CartesianGrid, Tooltip, Legend, Line } from 'recharts';
 
 const data = [

src/docs/apiExamples/LineChart.js renamed to src/docs/apiExamples/LineChart.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { LineChart, XAxis, YAxis, CartesianGrid, Tooltip, Legend, Line } from 'recharts';
 
 const data = [

src/docs/apiExamples/PieChart.js renamed to src/docs/apiExamples/PieChart.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { PieChart, Pie } from 'recharts';
 
 const data01 = [

src/docs/apiExamples/RadarChart.js renamed to src/docs/apiExamples/RadarChart.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { RadarChart, Radar, PolarAngleAxis, PolarRadiusAxis, Legend, PolarGrid } from 'recharts';
 
 const data = [

src/docs/apiExamples/RadialBarChart.js renamed to src/docs/apiExamples/RadialBarChart.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { RadialBarChart, RadialBar, Legend, Tooltip } from 'recharts';
 
 const data = [
@@ -56,23 +55,23 @@ const example = () => (
     startAngle={180}
     endAngle={0}
   >
-    <RadialBar minAngle={15} label={{ fill: '#666', position: 'insideStart' }} background clockWise dataKey="uv" />
+    <RadialBar label={{ fill: '#666', position: 'insideStart' }} background dataKey="uv" />
     <Legend iconSize={10} width={120} height={140} layout="vertical" verticalAlign="middle" align="right" />
     <Tooltip />
   </RadialBarChart>
 );
 
 const exampleCode = `
-<RadialBarChart 
-  width={730} 
-  height={250} 
-  innerRadius="10%" 
-  outerRadius="80%" 
-  data={data} 
-  startAngle={180} 
+<RadialBarChart
+  width={730}
+  height={250}
+  innerRadius="10%"
+  outerRadius="80%"
+  data={data}
+  startAngle={180}
   endAngle={0}
 >
-  <RadialBar minAngle={15} label={{ fill: '#666', position: 'insideStart' }} background clockWise={true} dataKey='uv' />
+  <RadialBar label={{ fill: '#666', position: 'insideStart' }} background dataKey='uv' />
   <Legend iconSize={10} width={120} height={140} layout='vertical' verticalAlign='middle' align="right" />
   <Tooltip />
 </RadialBarChart>

src/docs/apiExamples/ReferenceArea.js renamed to src/docs/apiExamples/ReferenceArea.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ScatterChart, Scatter, XAxis, YAxis, ZAxis, CartesianGrid, Tooltip, Legend, ReferenceArea } from 'recharts';
 
 const data01 = [
@@ -43,8 +42,8 @@ const example = () => (
 );
 
 const exampleCode = `
-<ScatterChart 
-  width={730} 
+<ScatterChart
+  width={730}
   height={250}
   margin={{ top: 20, right: 20, bottom: 10, left: 10 }}
 >

src/docs/apiExamples/ReferenceDot.js renamed to src/docs/apiExamples/ReferenceDot.tsx

@@ -1,7 +1,12 @@
-import React from 'react';
 import { ScatterChart, XAxis, YAxis, Scatter, CartesianGrid, Tooltip, ReferenceDot } from 'recharts';
 
-const data = [
+type DataEntry = {
+  x: number;
+  y: number;
+  z?: number;
+}
+
+const data: DataEntry[] = [
   { x: 100, y: 200, z: 200 },
   { x: 120, y: 100, z: 260 },
   { x: 170, y: 300, z: 400 },
@@ -10,15 +15,15 @@ const data = [
   { x: 110, y: 280, z: 200 },
 ];
 
-const getMeanValue = (o) => {
+const getMeanValue = (o: ReadonlyArray<DataEntry>) => {
   const len = o.length;
 
   if (!len) {
     return null;
   }
 
   return o.reduce(
-    (result, entry) => ({
+    (result: DataEntry, entry: DataEntry) => ({
       x: result.x + (entry.x || 0) / len,
       y: result.y + (entry.y || 0) / len,
     }),
@@ -51,9 +56,9 @@ const example = () => {
 };
 
 const exampleCode = `
-<ScatterChart 
-  width={730} 
-  height={250} 
+<ScatterChart
+  width={730}
+  height={250}
   margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
 >
     <CartesianGrid />

src/docs/apiExamples/ReferenceLine.js renamed to src/docs/apiExamples/ReferenceLine.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { AreaChart, ReferenceLine, Area, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts';
 
 const data = [

src/docs/apiExamples/ResponsiveContainer.js renamed to src/docs/apiExamples/ResponsiveContainer.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ResponsiveContainer, AreaChart, ReferenceLine, Area, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts';
 
 const data = [

src/docs/apiExamples/SankeyChart.js renamed to src/docs/apiExamples/SankeyChart.tsx

@@ -1,5 +1,8 @@
-import React from 'react';
-import { Sankey, Tooltip, Layer, Rectangle } from 'recharts';
+import { Sankey, Tooltip, Layer, Rectangle, useChartWidth } from 'recharts';
+// TODO export this type from recharts
+// eslint-disable-next-line import/no-unresolved
+import { NodeProps } from 'recharts/types/chart/Sankey';
+import { ReactNode } from 'react';
 
 const data0 = {
   nodes: [
@@ -17,7 +20,11 @@ const data0 = {
   ],
 };
 
-const MyCustomNode = ({ x, y, width, height, index, payload, containerWidth }) => {
+const MyCustomNode = ({ x, y, width, height, index, payload }: NodeProps): ReactNode => {
+  const containerWidth = useChartWidth();
+  if (containerWidth == null) {
+    return null; // Return null if used outside of a chart context
+  }
   const isOut = x + width + 6 > containerWidth;
   return (
     <Layer key={`CustomNode${index}`}>
@@ -50,7 +57,8 @@ const example = () => (
     width={960}
     height={500}
     data={data0}
-    node={<MyCustomNode />}
+    // @ts-ignore Recharts type does not allow null but it should! TODO fix
+    node={MyCustomNode}
     nodePadding={50}
     margin={{
       left: 200,
@@ -75,7 +83,7 @@ const exampleCode = `
    left: 200,
     right: 200,
     top: 100,
-    bottom: 100,
+    bottom: 100
   }}
   link={{ stroke: '#77c878' }}
 >

src/docs/apiExamples/ScatterChart.js renamed to src/docs/apiExamples/ScatterChart.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ScatterChart, Scatter, XAxis, YAxis, ZAxis, CartesianGrid, Tooltip, Legend } from 'recharts';
 
 const data01 = [
@@ -49,7 +48,7 @@ const exampleCode = `
     top: 20,
     right: 20,
     bottom: 10,
-    left: 10,
+    left: 10
   }}
 >
   <CartesianGrid strokeDasharray="3 3" />

src/docs/apiExamples/Treemap.js renamed to src/docs/apiExamples/Treemap.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Treemap } from 'recharts';
 
 const data = [