Merge branch 'main' into logscale-examples

package.json

@@ -53,18 +53,18 @@
   },
   "devDependencies": {
     "@simbathesailor/use-what-changed": "^2.0.0",
-    "@storybook/addon-essentials": "^6.4.14",
-    "@storybook/addon-links": "^6.4.14",
-    "@storybook/addon-storysource": "^6.4.14",
-    "@storybook/react": "^6.4.14",
+    "@storybook/addon-essentials": "^6.4.16",
+    "@storybook/addon-links": "^6.4.16",
+    "@storybook/addon-storysource": "^6.4.16",
+    "@storybook/react": "^6.4.16",
     "@types/d3-array": "^3.0.2",
     "@types/d3-scale": "^4.0.2",
     "@types/d3-scale-chromatic": "^3.0.0",
     "@types/d3-shape": "^3.0.2",
     "@types/react": "^17.0.38",
     "@zakodium/eslint-config": "^5.1.0",
-    "eslint": "^8.7.0",
-    "mass-tools": "^0.60.25",
+    "eslint": "^8.8.0",
+    "mass-tools": "^0.60.26",
     "ml-dataset-iris": "^1.2.1",
     "ml-pca": "^4.0.2",
     "ml-regression-simple-linear": "^2.0.3",

src/components/Annotations/DirectedEllipse.tsx

@@ -0,0 +1,40 @@
+import { SVGProps } from 'react';
+
+import { useDirectedEllipsePosition } from '../../hooks';
+
+export interface AnnotationDirectedEllipseProps
+  extends Omit<
+    SVGProps<SVGEllipseElement>,
+    'x1' | 'x2' | 'y1' | 'y2' | 'cx' | 'cy' | 'rx' | 'ry' | 'x' | 'y' | 'width'
+  > {
+  x1: number | string;
+  y1: number | string;
+  x2: number | string;
+  y2: number | string;
+  width: number | string;
+}
+
+export function DirectedEllipse(props: AnnotationDirectedEllipseProps) {
+  const { x1, y1, y2, x2, color, width, style, ...otherProps } = props;
+
+  const { cx, cy, rx, ry, rotation } = useDirectedEllipsePosition({
+    x1,
+    y1,
+    y2,
+    x2,
+    width,
+  });
+
+  return (
+    <ellipse
+      cx={cx}
+      cy={cy}
+      rx={rx}
+      ry={ry}
+      transform={`rotate(${rotation} 0 0)`}
+      style={{ ...style, transformOrigin: 'center', transformBox: 'fill-box' }}
+      fill={color}
+      {...otherProps}
+    />
+  );
+}

src/components/Axis/Axis.tsx

@@ -1,4 +1,4 @@
-import { ScaleLinear, ScaleLogarithmic } from 'd3-scale';
+import { ScaleLinear, ScaleLogarithmic, ScaleTime } from 'd3-scale';
 import { CSSProperties, ReactNode, useEffect } from 'react';
 
 import {
@@ -10,6 +10,7 @@ import { getInnerOffset } from '../../utils/axis';
 
 import LinearAxis from './LinearAxis';
 import LogAxis from './LogAxis';
+import TimeAxis from './TimeAxis';
 
 export interface AxisProps {
   id?: string;
@@ -23,7 +24,7 @@ export interface AxisProps {
   paddingEnd?: number;
 
   flip?: boolean;
-  scale?: 'linear' | 'log';
+  scale?: 'linear' | 'log' | 'time';
 
   /**
    * Hide all axis elements.
@@ -47,6 +48,10 @@ export interface AxisProps {
 
   hiddenTicks?: boolean;
   tickPosition?: TickPosition;
+  /**
+   * With time scale the default values is d3's smart tickFormat
+   * With other types of scales the default is converting the value to a string
+   */
   tickLabelFormat?: TickLabelFormat;
   tickLabelStyle?: CSSProperties;
 
@@ -173,6 +178,14 @@ export function Axis({
         scale={currentAxis.scale as ScaleLinear<number, number>}
       />
     );
+  }
+  if (scale === 'time') {
+    return (
+      <TimeAxis
+        {...childProps}
+        scale={currentAxis.scale as ScaleTime<number, number>}
+      />
+    );
   } else {
     return (
       <LogAxis

src/components/Axis/HorizontalAxisGridLines.tsx

@@ -1,11 +1,12 @@
 import { CSSProperties } from 'react';
-import { PrimaryLinearTicks, PrimaryLogTicks } from 'react-d3-utils';
 
 import { Position } from '../../types';
 
+import { TicksType } from './types';
+
 interface HorizontalAxisGridLinesProps {
   plotHeight: number;
-  primaryTicks: PrimaryLinearTicks[] | PrimaryLogTicks[];
+  primaryTicks: TicksType[];
   position: Position;
   style?: CSSProperties;
 }

src/components/Axis/Ticks.tsx

@@ -1,7 +1,6 @@
 import { CSSProperties, ReactNode, SVGAttributes } from 'react';
-import { PrimaryLinearTicks, PrimaryLogTicks } from 'react-d3-utils';
 
-import { Scales } from './types';
+import { TicksType, Scales } from './types';
 
 interface CoordinatesXY {
   x1?: number;
@@ -26,7 +25,7 @@ export interface TickProps {
 }
 
 export interface TicksProps extends Omit<TickProps, 'line' | 'text'> {
-  primaryTicks: PrimaryLinearTicks[] | PrimaryLogTicks[];
+  primaryTicks: TicksType[];
   secondaryTickLength: number;
   scale: Scales;
   secondaryTickStyle?: CSSProperties;

src/components/Axis/TimeAxis.tsx

@@ -0,0 +1,37 @@
+import { ScaleTime } from 'd3-scale';
+import { useRef } from 'react';
+import { useTimeTicks } from 'react-d3-utils';
+
+import HorizontalAxis from './HorizontalAxis';
+import VerticalAxis from './VerticalAxis';
+import { AxisChildProps } from './types';
+
+interface TimeAxisProps extends AxisChildProps {
+  scale: ScaleTime<number, number>;
+}
+
+export default function TimeAxis(props: TimeAxisProps) {
+  const { position, tickLabelFormat, scale, ...otherProps } = props;
+
+  const axisRef = useRef<SVGGElement>(null);
+
+  const direction =
+    position === 'left' || position === 'right' ? 'vertical' : 'horizontal';
+
+  const primaryTicks = useTimeTicks(scale, direction, axisRef, {
+    tickFormat: tickLabelFormat,
+  });
+
+  const AxisComponent =
+    direction === 'vertical' ? VerticalAxis : HorizontalAxis;
+
+  return (
+    <AxisComponent
+      scale={scale}
+      axisRef={axisRef}
+      primaryTicks={primaryTicks}
+      position={position}
+      {...otherProps}
+    />
+  );
+}

src/components/Axis/VerticalAxisGridLines.tsx

@@ -1,11 +1,12 @@
 import { CSSProperties } from 'react';
-import { PrimaryLinearTicks, PrimaryLogTicks } from 'react-d3-utils';
 
 import { Position } from '../../types';
 
+import { TicksType } from './types';
+
 interface VerticalAxisGridlinesProps {
   plotWidth: number;
-  primaryTicks: PrimaryLinearTicks[] | PrimaryLogTicks[];
+  primaryTicks: TicksType[];
   position: Position;
   style?: CSSProperties;
 }

src/components/Axis/types.ts

@@ -1,6 +1,6 @@
-import { ScaleLinear, ScaleLogarithmic } from 'd3-scale';
+import { ScaleLinear, ScaleLogarithmic, ScaleTime } from 'd3-scale';
 import { CSSProperties, ReactNode, Ref } from 'react';
-import { PrimaryLinearTicks, PrimaryLogTicks } from 'react-d3-utils';
+import { PrimaryLinearTicks, PrimaryLogTicks, TimeTicks } from 'react-d3-utils';
 
 import type { Position, TickLabelFormat, TickPosition } from '../../types';
 
@@ -27,12 +27,15 @@ export interface AxisCommonProps {
 }
 export type Scales =
   | ScaleLinear<number, number>
-  | ScaleLogarithmic<number, number>;
+  | ScaleLogarithmic<number, number>
+  | ScaleTime<number, number>;
 export interface AxisRendererProps extends AxisCommonProps {
   axisRef: Ref<SVGGElement>;
-  primaryTicks: PrimaryLinearTicks[] | PrimaryLogTicks[];
+  primaryTicks: TicksType[];
 }
 
 export interface AxisChildProps extends AxisCommonProps {
   tickLabelFormat?: TickLabelFormat;
 }
+
+export type TicksType = PrimaryLinearTicks | PrimaryLogTicks | TimeTicks;

src/components/BarSeries.tsx

@@ -3,7 +3,7 @@ import { CSSProperties, useEffect, useMemo, useState } from 'react';
 import { useLegend } from '../contexts/legendContext';
 import { usePlotContext } from '../contexts/plotContext';
 import type { SeriesPoint } from '../types';
-import { getNextId, validateAxis } from '../utils';
+import { functionalStyle, getNextId, validateAxis } from '../utils';
 
 import { LineSeriesProps } from './LineSeries';
 import { ScatterSeries } from './ScatterSeries';
@@ -13,14 +13,14 @@ export interface BarSeriesProps extends LineSeriesProps {}
 export function BarSeries(props: BarSeriesProps) {
   const [, legendDispatch] = useLegend();
   const { colorScaler } = usePlotContext();
-  const [id] = useState(() => props.groupId || `series-${getNextId()}`);
+  const [id] = useState(() => props.id || `series-${getNextId()}`);
   const { lineStyle = {}, displayMarker = false, ...otherProps } = props;
   const lineProps = {
     id,
     data: props.data,
     xAxis: props.xAxis || 'x',
     yAxis: props.yAxis || 'y',
-    lineStyle,
+    lineStyle: functionalStyle({}, lineStyle, { id }),
   };
 
   const colorLine = lineStyle?.stroke
@@ -58,7 +58,7 @@ export function BarSeries(props: BarSeriesProps) {
       <ScatterSeries
         {...otherProps}
         hidden={!displayMarker || props.hidden}
-        groupId={id}
+        id={id}
       />
     </g>
   );