fix(core): correcting zoom anchor types

Passing throught the xAccessor type.
markmcdowell · Sep 2, 2020 · 052981a · 052981a
1 parent d3607fe
commit 052981a
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 8 deletions.
diff --git a/packages/core/src/ChartCanvas.tsx b/packages/core/src/ChartCanvas.tsx
@@ -323,7 +323,7 @@ export interface ChartCanvasProps<TXAxis extends number | Date> {
     readonly xExtents: ((data: any[]) => [TXAxis, TXAxis]) | (((data: any[]) => TXAxis) | TXAxis)[];
     readonly xScale: ScaleContinuousNumeric<number, number> | ScaleTime<number, number>;
     readonly zIndex?: number;
-    readonly zoomAnchor?: (options: IZoomAnchorOptions<any>) => TXAxis;
+    readonly zoomAnchor?: (options: IZoomAnchorOptions<any, TXAxis>) => TXAxis;
     readonly zoomMultiplier?: number;
 }
 

diff --git a/packages/core/src/zoom/zoomBehavior.ts b/packages/core/src/zoom/zoomBehavior.ts
@@ -2,24 +2,33 @@ import { ScaleContinuousNumeric, ScaleTime } from "d3-scale";
 import { getCurrentItem } from "../utils/ChartDataUtil";
 import { last } from "../utils/index";
 
-export interface IZoomAnchorOptions<T> {
-    readonly plotData: T[];
+export interface IZoomAnchorOptions<TData, TXAxis extends number | Date> {
+    readonly plotData: TData[];
     readonly mouseXY: number[];
-    readonly xAccessor: (data: T) => number | Date;
+    readonly xAccessor: (data: TData) => TXAxis;
     readonly xScale: ScaleContinuousNumeric<number, number> | ScaleTime<number, number>;
 }
 
-export const mouseBasedZoomAnchor = <T>({ xScale, xAccessor, mouseXY, plotData }: IZoomAnchorOptions<T>) => {
+export const mouseBasedZoomAnchor = <TData, TXAxis extends number | Date>(
+    options: IZoomAnchorOptions<TData, TXAxis>,
+) => {
+    const { xScale, xAccessor, mouseXY, plotData } = options;
     const currentItem = getCurrentItem(xScale, xAccessor, mouseXY, plotData);
     return xAccessor(currentItem);
 };
 
-export const lastVisibleItemBasedZoomAnchor = <T>({ xAccessor, plotData }: IZoomAnchorOptions<T>) => {
+export const lastVisibleItemBasedZoomAnchor = <TData, TXAxis extends number | Date>(
+    options: IZoomAnchorOptions<TData, TXAxis>,
+) => {
+    const { xAccessor, plotData } = options;
     const lastItem = last(plotData);
     return xAccessor(lastItem);
 };
 
-export const rightDomainBasedZoomAnchor = <T>({ xScale }: IZoomAnchorOptions<T>) => {
+export const rightDomainBasedZoomAnchor = <TData, TXAxis extends number | Date>(
+    options: IZoomAnchorOptions<TData, TXAxis>,
+) => {
+    const { xScale } = options;
     const [, end] = xScale.domain();
     return end;
 };
diff --git a/packages/stories/src/features/interaction/Interaction.tsx b/packages/stories/src/features/interaction/Interaction.tsx
@@ -8,6 +8,7 @@ import {
     YAxis,
     withDeviceRatio,
     withSize,
+    IZoomAnchorOptions,
 } from "react-financial-charts";
 import { IOHLCData, withOHLCData } from "../../data";
 
@@ -20,7 +21,7 @@ interface ChartProps {
     readonly height: number;
     readonly ratio: number;
     readonly width: number;
-    readonly zoomAnchor?: any;
+    readonly zoomAnchor?: (options: IZoomAnchorOptions<any>) => number | Date;
 }
 
 class Interaction extends React.Component<ChartProps> {