fix: FunctionSeries (#380)

zakodium-oss · Apr 10, 2022 · 786bc3d · 786bc3d
1 parent 14f6e37
commit 786bc3d
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 25 deletions.
diff --git a/src/components/Series/FunctionSeries.tsx b/src/components/Series/FunctionSeries.tsx
@@ -1,32 +1,30 @@
 import { useMemo } from 'react';
 
 import { usePlotContext } from '../../contexts/plotContext';
-import { SeriesPoint } from '../../types';
-import { toNumber } from '../../utils';
+import { BaseSeriesProps, CSSFuncProps, SeriesPoint } from '../../types';
+import { toNumber, useId } from '../../utils';
 
-import { LineSeries, LineSeriesProps } from './LineSeries';
+import { LineSeries } from './LineSeries';
 
-export interface FunctionSeriesProps extends Omit<LineSeriesProps, 'data'> {
+export interface FunctionSeriesProps extends BaseSeriesProps {
   getY: (x: number) => number;
-  xAxis?: string;
+  lineStyle?: CSSFuncProps<{ id: string }>;
 }
 
 export function FunctionSeries(props: FunctionSeriesProps) {
-  const { getY, xAxis = 'x', ...otherProps } = props;
-  const {
-    axisContext: { [xAxis]: x },
-    plotWidth,
-    plotHeight,
-  } = usePlotContext();
+  const { getY, xAxis = 'x', id: propId, ...otherProps } = props;
+  const id = `~${useId(propId, 'series')}`;
+  const { axisContext, plotWidth, plotHeight } = usePlotContext();
+  const x = axisContext[xAxis];
   const step = 1;
   const data = useMemo(() => {
     const data: SeriesPoint[] = [];
     if (x) {
       const isHorizontal = x
         ? x.position === 'top' || x.position === 'bottom'
-        : undefined;
+        : false;
       const end = isHorizontal ? plotWidth : plotHeight;
-      const scale = x?.scale;
+      const scale = x.scale;
       for (let i = 0; i <= end; i += step) {
         const x = toNumber(scale.invert(i));
         data.push({
@@ -37,6 +35,11 @@ export function FunctionSeries(props: FunctionSeriesProps) {
       return data;
     }
     return [{ x: 0, y: 0 }];
-  }, [getY, plotHeight, plotWidth, x]);
-  return <LineSeries data={data} {...otherProps} />;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [x?.domain[0], x?.domain[1]]);
+  return (
+    <>
+      <LineSeries data={data} id={id} {...otherProps} />
+    </>
+  );
 }
diff --git a/src/components/Series/RangeSeries.tsx b/src/components/Series/RangeSeries.tsx
@@ -18,7 +18,8 @@ export interface RangeSeriesPoint {
 }
 
 export interface RangeSeriesProps<T extends RangeSeriesPoint>
-  extends BaseSeriesProps<T> {
+  extends BaseSeriesProps {
+  data: ReadonlyArray<T>;
   lineStyle?: CSSProperties;
 }
 

diff --git a/src/components/Series/ScatterSeries.tsx b/src/components/Series/ScatterSeries.tsx
@@ -26,7 +26,8 @@ import ErrorBars from '../ErrorBars';
 import { markersComps } from '../Markers';
 
 export interface ScatterSeriesProps<T extends SeriesPoint = SeriesPoint>
-  extends BaseSeriesProps<T> {
+  extends BaseSeriesProps {
+  data: ReadonlyArray<T>;
   markerShape?: ShapeFuncProps<T>;
   displayMarkers?: boolean;
   markerSize?: number;

diff --git a/src/contexts/plotContext.ts b/src/contexts/plotContext.ts
@@ -209,8 +209,9 @@ export function useAxisContext(
         axisMin = axis.min;
         isAxisMinForced = true;
       } else {
-        axisMin = min(state.series, (d) =>
-          d[xY].axisId === id ? d[xY].min : undefined,
+        axisMin = min(
+          state.series.filter((s) => xY !== 'x' || !s.id.startsWith('~')),
+          (d) => (d[xY].axisId === id ? d[xY].min : undefined),
         ) as number;
       }
 
@@ -223,8 +224,9 @@ export function useAxisContext(
         axisMax = axis.max;
         isAxisMaxForced = true;
       } else {
-        axisMax = max(state.series, (d) =>
-          d[xY].axisId === id ? d[xY].max : undefined,
+        axisMax = max(
+          state.series.filter((s) => xY !== 'x' || !s.id.startsWith('~')),
+          (d) => (d[xY].axisId === id ? d[xY].max : undefined),
         ) as number;
       }
 

diff --git a/src/types.ts b/src/types.ts
@@ -43,8 +43,7 @@ export type LabelFuncProps<T> =
   | ((point: T, index?: number, data?: ReadonlyArray<T>) => string)
   | string;
 
-export interface BaseSeriesProps<T> {
-  data: ReadonlyArray<T>;
+export interface BaseSeriesProps {
   id?: string;
   xAxis?: string;
   yAxis?: string;

diff --git a/stories/control/function.stories.tsx b/stories/control/function.stories.tsx
@@ -8,6 +8,7 @@ import {
   FunctionSeries,
   FunctionSeriesProps,
   useRectangularZoom,
+  LineSeries,
 } from '../../src';
 import { DEFAULT_PLOT_CONFIG, PlotControllerDecorator } from '../utils';
 
@@ -18,7 +19,7 @@ export default {
 } as Meta<Omit<FunctionSeriesProps, 'getY'>>;
 
 function getY(x: number) {
-  return 4 * Math.sin(2 * x);
+  return 4 * Math.sin(2 * x) + 20;
 }
 export function Control(props: FunctionSeriesProps) {
   const zoom = useRectangularZoom();
@@ -32,8 +33,42 @@ export function Control(props: FunctionSeriesProps) {
         yAxis="y"
         label="y=4*sin(2*x)"
       />
+
+      <Annotations>{zoom.annotations}</Annotations>
+      <Axis
+        min={0}
+        max={20}
+        paddingStart="10%"
+        paddingEnd="10%"
+        id="x"
+        position="bottom"
+      />
+      <Axis id="y" position="left" paddingStart="10%" paddingEnd="10%" />
+    </Plot>
+  );
+}
+export function WithAnotherSeries(props: FunctionSeriesProps) {
+  const zoom = useRectangularZoom();
+  return (
+    <Plot {...DEFAULT_PLOT_CONFIG}>
+      <Legend position="embedded" />
+      <FunctionSeries
+        {...props}
+        getY={getY}
+        xAxis="x"
+        yAxis="y"
+        label="y=4*sin(2*x)"
+      />
+
       <Annotations>{zoom.annotations}</Annotations>
-      <Axis paddingStart="10%" paddingEnd="10%" id="x" position="bottom" />
+      <LineSeries
+        label="line"
+        data={[
+          { x: -2, y: 20 },
+          { x: -5, y: 10 },
+        ]}
+      />
+      <Axis id="x" position="bottom" />
       <Axis id="y" position="left" paddingStart="10%" paddingEnd="10%" />
     </Plot>
   );