feat: Eliminated unsafe lifecycle methods, rewrote GenericComponent a…

…nd GenericChartComponent
markmcdowell · Jul 12, 2022 · 7841001 · 7841001
1 parent 5da4fd0
commit 7841001
Show file tree

Hide file tree

Showing 12 changed files with 645 additions and 595 deletions.
diff --git a/packages/annotations/src/Label.tsx b/packages/annotations/src/Label.tsx
@@ -58,7 +58,7 @@ export class Label extends React.Component<LabelProps> {
 
         const { xScale, chartConfig, xAccessor } = moreProps;
 
-        const yScale = Array.isArray(chartConfig) ? undefined : chartConfig.yScale;
+        const yScale = Array.isArray(chartConfig) || !chartConfig ? undefined : chartConfig.yScale;
 
         const { xPos, yPos, fillStyle, text } = this.helper(moreProps, xAccessor, xScale, yScale);
 

diff --git a/packages/axes/src/Axis.tsx b/packages/axes/src/Axis.tsx
@@ -1,7 +1,8 @@
 import {
     first,
-    getAxisCanvas,
     GenericChartComponent,
+    GenericComponentRef,
+    getAxisCanvas,
     getStrokeDasharrayCanvas,
     last,
     strokeDashTypes,
@@ -57,14 +58,24 @@ interface AxisProps {
     readonly zoomCursorClassName?: string;
 }
 
+interface Tick {
+    value: number;
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    labelX: number;
+    labelY: number;
+}
+
 export class Axis extends React.Component<AxisProps> {
     public static defaultProps = {
         edgeClip: false,
         zoomEnabled: false,
         zoomCursorClassName: "",
     };
 
-    private readonly chartRef = React.createRef<GenericChartComponent>();
+    private readonly chartRef = React.createRef<GenericComponentRef>();
 
     public render() {
         const {
@@ -138,7 +149,7 @@ export class Axis extends React.Component<AxisProps> {
         }
 
         if (showGridLines) {
-            tickProps.ticks.forEach((tick: any) => {
+            tickProps.ticks.forEach((tick) => {
                 drawGridLine(ctx, tick, tickProps, moreProps);
             });
         }
@@ -209,7 +220,7 @@ const tickHelper = (props: AxisProps, scale: ScaleContinuousNumeric<number, numb
     const sign = orient === "top" || orient === "left" ? -1 : 1;
     const tickSpacing = Math.max(innerTickSize, 0) + tickPadding;
 
-    let ticks;
+    let ticks: Tick[];
     let dy;
     // tslint:disable-next-line: variable-name
     let canvas_dy;
@@ -346,7 +357,7 @@ const drawTicks = (ctx: CanvasRenderingContext2D, result: any) => {
     });
 };
 
-const drawGridLine = (ctx: CanvasRenderingContext2D, tick: any, result: any, moreProps: any) => {
+const drawGridLine = (ctx: CanvasRenderingContext2D, tick: Tick, result: any, moreProps: any) => {
     const { orient, gridLinesStrokeWidth, gridLinesStrokeStyle, gridLinesStrokeDasharray } = result;
 
     const { chartConfig } = moreProps;

diff --git a/packages/core/src/Chart.tsx b/packages/core/src/Chart.tsx
@@ -48,7 +48,7 @@ export const Chart = React.memo((props: React.PropsWithChildren<ChartProps>) =>
     } = props;
 
     const chartCanvasContextValue = React.useContext(ChartCanvasContext);
-    const { subscribe, unsubscribe, chartConfig } = chartCanvasContextValue;
+    const { subscribe, unsubscribe, chartConfigs } = chartCanvasContextValue;
 
     const listener = React.useCallback(
         (type: string, moreProps: any, _: any, e: React.MouseEvent) => {
@@ -89,7 +89,7 @@ export const Chart = React.memo((props: React.PropsWithChildren<ChartProps>) =>
         return () => unsubscribe(`chart_${id}`);
     }, [subscribe, unsubscribe, id, listener]);
 
-    const config = chartConfig.find(({ id }) => id === props.id)!;
+    const config = chartConfigs.find(({ id }) => id === props.id)!;
     const contextValue = React.useMemo(() => {
         return {
             ...chartCanvasContextValue,
@@ -104,7 +104,9 @@ export const Chart = React.memo((props: React.PropsWithChildren<ChartProps>) =>
 
     return (
         <ChartContext.Provider value={contextValue}>
-            <g transform={`translate(${x}, ${y})`}>{props.children}</g>
+            <g transform={`translate(${x}, ${y})`} id={`chart_${id}`}>
+                {props.children}
+            </g>
         </ChartContext.Provider>
     );
 });