@obitrain/charts 0.10.4 → 0.12.0

package/src/Charts/BottomAxis/Tick.tsx

@@ -1,11 +1,13 @@
 import {
+  DashPathEffect,
   Group,
   Line,
   Text,
   vec,
+  type Color,
   type SkFont,
-} from '@shopify/react-native-skia';
-import React from 'react';
+} from 'react-native-skia';
+import { memo, useMemo } from 'react';
 import { useDerivedValue, type SharedValue } from 'react-native-reanimated';
 import { getPositionWl } from '../gesture';
 
@@ -17,10 +19,37 @@ export type TickProps = {
   offsetX: SharedValue<number>;
   offsetY?: number;
   font: SkFont;
+  color?: Color;
+  labelColor?: Color;
+  /** Length of the tick line. Use a negative value (e.g. -chartHeight) to draw a vertical gridline above the axis. */
+  tickLength?: number;
+  strokeWidth?: number;
+  /** Dash/gap lengths for a dashed tick line. */
+  dash?: [number, number];
+  showLabel?: boolean;
+  /** `center` puts the label under the tick, `left` starts it right after the tick. */
+  labelAlign?: 'center' | 'left';
+  /** Gap between the tick and a left-aligned label. */
+  labelGap?: number;
 };
 
-export const Tick: React.FC<TickProps> = (props) => {
-  const { label, scale, focalX, offsetX, initPosition, font } = props;
+const TickComponent = function (props: TickProps) {
+  const {
+    label,
+    scale,
+    focalX,
+    offsetX,
+    initPosition,
+    font,
+    color = 'black',
+    labelColor,
+    tickLength = 10,
+    strokeWidth,
+    dash,
+    showLabel = true,
+    labelAlign = 'center',
+    labelGap = 6,
+  } = props;
   const offsetY = props.offsetY ?? 0;
   const transform = useDerivedValue(() => [
     {
@@ -32,20 +61,37 @@ export const Tick: React.FC<TickProps> = (props) => {
       ),
     },
   ]);
-  const width = font
-    .getGlyphWidths(font.getGlyphIDs(label))
-    .reduce((a, b) => a + b, 0);
+  const width = useMemo(
+    () =>
+      font.getGlyphWidths(font.getGlyphIDs(label)).reduce((a, b) => a + b, 0),
+    [font, label]
+  );
+  const labelX = labelAlign === 'left' ? labelGap : -width / 2;
 
   return (
     <Group transform={transform}>
-      <Line color="black" p1={vec(0, offsetY)} p2={vec(0, offsetY + 10)} />
-      <Text
-        text={label}
-        color="black"
-        x={-width / 2}
-        y={offsetY + 23}
-        font={font}
-      />
+      <Line
+        color={color}
+        strokeWidth={strokeWidth}
+        p1={vec(0, offsetY)}
+        p2={vec(0, offsetY + tickLength)}
+      >
+        {dash !== undefined ? <DashPathEffect intervals={dash} /> : null}
+      </Line>
+      {showLabel ? (
+        <Text
+          text={label}
+          color={labelColor ?? color}
+          x={labelX}
+          y={offsetY + 23}
+          font={font}
+        />
+      ) : null}
     </Group>
   );
 };
+
+// Memoized: zoom/pan flows through shared values, so a Tick only needs to
+// re-render when its label or base position changes
+export const Tick = memo(TickComponent);
+Tick.displayName = 'Tick';

package/src/Charts/BottomAxis/index.tsx

@@ -1,3 +1,7 @@
 export { AxisLine, type AxisLineProps } from './AxisLine';
-export { BottomAxis, type BottomAxisProps } from './BottomAxis';
+export {
+  BottomAxis,
+  type AxisTick,
+  type BottomAxisProps,
+} from './BottomAxis';
 export { Tick, type TickProps } from './Tick';

package/src/Charts/Cursor.tsx

@@ -1,7 +1,7 @@
-import { Circle, type PathCommand } from '@shopify/react-native-skia';
-import type { FC } from 'react';
+import { Circle, type PathCommand } from 'react-native-skia';
+import { useEffect, type FC } from 'react';
 import { useDerivedValue, type SharedValue } from 'react-native-reanimated';
-import { getYForX } from './maths';
+import { commandsToBezier, getYForXOnBeziers } from './maths';
 
 const CURSOR_SIZE = 10;
 
@@ -10,6 +10,9 @@ export type CursorProps = {
   positionX: SharedValue<number>;
   size?: number;
   color?: string;
+  /** When set, draws a ring of this color around the cursor. */
+  strokeColor?: string;
+  strokeWidth?: number;
   currentValue?: SharedValue<number> | SharedValue<number | undefined>;
   translateY?: SharedValue<number | undefined>;
 };
@@ -18,20 +21,30 @@ const Cursor: FC<CursorProps> = function ({
   commands,
   positionX,
   color,
+  strokeColor,
+  strokeWidth = 2,
   currentValue,
   translateY,
   size = CURSOR_SIZE,
 }) {
-  if (currentValue !== undefined && translateY !== undefined) {
-    console.warn('currentValue has no effect when translateY is set');
-  }
+  const conflictingProps = currentValue !== undefined && translateY !== undefined;
+  useEffect(() => {
+    if (conflictingProps)
+      console.warn('currentValue has no effect when translateY is set');
+  }, [conflictingProps]);
 
-  const derivedTranslateY = useDerivedValue(() => {
+  // Normalized once per path change, not on every cursor move
+  const beziers = useDerivedValue(() => {
     const _commands = commands?.value;
-    if (_commands === undefined) {
+    return _commands === undefined ? undefined : commandsToBezier(_commands);
+  });
+
+  const derivedTranslateY = useDerivedValue(() => {
+    const _beziers = beziers.value;
+    if (_beziers === undefined) {
       return 0;
     }
-    const _value = getYForX(_commands, positionX.value) ?? 0;
+    const _value = getYForXOnBeziers(_beziers, positionX.value) ?? 0;
     if (translateY === undefined && currentValue !== undefined) {
       currentValue.value = _value;
     }
@@ -44,7 +57,22 @@ const Cursor: FC<CursorProps> = function ({
     { translateX: positionX.value },
     { translateY: _translateY.value ?? 0 },
   ]);
-  return <Circle transform={transform} cx={0} cy={0} r={size} color={color} />;
+  return (
+    <>
+      <Circle transform={transform} cx={0} cy={0} r={size} color={color} />
+      {strokeColor !== undefined ? (
+        <Circle
+          transform={transform}
+          cx={0}
+          cy={0}
+          r={size}
+          color={strokeColor}
+          style="stroke"
+          strokeWidth={strokeWidth}
+        />
+      ) : null}
+    </>
+  );
 };
 
 export { Cursor };

package/src/Charts/Dot.tsx

@@ -0,0 +1,64 @@
+import { Circle, Group, type Color } from 'react-native-skia';
+import { memo } from 'react';
+import { useDerivedValue, type SharedValue } from 'react-native-reanimated';
+import { getPositionWl } from './gesture';
+
+export type DotProps = {
+  x: SharedValue<number> | number;
+  y: SharedValue<number> | number;
+  opacity?: SharedValue<number> | number;
+  r?: number;
+  color?: Color;
+  /**
+   * When set, the dot is drawn as a ring: `fillColor` inside, `color` as the
+   * stroke. Use the chart background color to get a "hollow" marker.
+   */
+  fillColor?: Color;
+  strokeWidth?: number;
+  // Optional zoom/pan awareness (see useScalableGesture)
+  scale?: SharedValue<number>;
+  focalX?: SharedValue<number>;
+  offsetX?: SharedValue<number>;
+};
+
+function DotComponent(props: DotProps) {
+  const {
+    x,
+    y,
+    opacity = 1,
+    r = 4,
+    color = 'black',
+    fillColor,
+    strokeWidth = 2,
+    scale,
+    focalX,
+    offsetX,
+  } = props;
+
+  const cx = useDerivedValue(() => {
+    const _x = typeof x === 'number' ? x : x.value;
+    if (scale === undefined || focalX === undefined || offsetX === undefined)
+      return _x;
+    return getPositionWl(_x, focalX.value, scale.value, offsetX.value);
+  });
+
+  return (
+    <Group opacity={opacity}>
+      <Circle cx={cx} cy={y} r={r} color={fillColor ?? color} />
+      {fillColor !== undefined ? (
+        <Circle
+          cx={cx}
+          cy={y}
+          r={r}
+          style="stroke"
+          color={color}
+          strokeWidth={strokeWidth}
+        />
+      ) : null}
+    </Group>
+  );
+}
+
+// Memoized: charts render many dots and the position updates flow through
+// shared values, so parent re-renders don't need to reach them
+export const Dot = memo(DotComponent);

package/src/Charts/Dots.tsx

@@ -0,0 +1,96 @@
+import { Path, Skia, type Color } from 'react-native-skia';
+import { type FC } from 'react';
+import { useDerivedValue, type SharedValue } from 'react-native-reanimated';
+import { getPositionWl } from './gesture';
+import type { AnimatedDot } from './types';
+
+export type DotShape = 'circle' | 'diamond';
+
+export type DotsProps = {
+  dots: AnimatedDot[];
+  r?: number;
+  shape?: DotShape;
+  color?: Color;
+  /** When set, dots are drawn as rings: `fillColor` inside, `color` as the stroke. */
+  fillColor?: Color;
+  strokeWidth?: number;
+  /** Viewport width used to cull off-screen dots. */
+  width?: number;
+  // Optional zoom/pan awareness (see useScalableGesture)
+  scale?: SharedValue<number>;
+  focalX?: SharedValue<number>;
+  offsetX?: SharedValue<number>;
+};
+
+/**
+ * Draw a whole series of dots as a single Skia path (two with `fillColor`).
+ * Unlike mapping over {@link Dot}, this runs one worklet per frame instead of
+ * one per dot, which keeps large series smooth during zoom/pan gestures.
+ * Per-dot opacity is binary here: dots below 0.5 are hidden.
+ */
+const Dots: FC<DotsProps> = function (props) {
+  const {
+    dots,
+    r = 4,
+    shape = 'circle',
+    color = 'black',
+    fillColor,
+    strokeWidth = 2,
+    width,
+    scale,
+    focalX,
+    offsetX,
+  } = props;
+
+  const path = useDerivedValue(() => {
+    const p = Skia.PathBuilder.Make();
+    const margin = r + strokeWidth;
+    for (const dot of dots) {
+      if (dot.opacity.value < 0.5) continue;
+      const x =
+        scale === undefined || focalX === undefined || offsetX === undefined
+          ? dot.x.value
+          : getPositionWl(
+              dot.x.value,
+              focalX.value,
+              scale.value,
+              offsetX.value
+            );
+      if (width !== undefined && (x < -margin || x > width + margin)) continue;
+      const y = dot.y.value;
+      if (shape === 'diamond') {
+        // One addPoly beats four moveTo/lineTo calls: each is a JSI hop, and
+        // this worklet rebuilds every dot on every frame of a gesture
+        p.addPoly(
+          [
+            { x, y: y - r },
+            { x: x + r, y },
+            { x, y: y + r },
+            { x: x - r, y },
+          ],
+          true
+        );
+      } else {
+        p.addCircle(x, y, r);
+      }
+    }
+    return p.build();
+  });
+
+  return (
+    <>
+      <Path path={path} color={fillColor ?? color} />
+      {fillColor !== undefined ? (
+        <Path
+          path={path}
+          style="stroke"
+          color={color}
+          strokeWidth={strokeWidth}
+          strokeJoin="round"
+        />
+      ) : null}
+    </>
+  );
+};
+
+export { Dots };

package/src/Charts/Linechart/index.tsx

@@ -1,4 +1,4 @@
-import { Canvas, Group, Path, type SkPath } from '@shopify/react-native-skia';
+import { Canvas, Group, Path, type SkPath } from 'react-native-skia';
 import type { FC } from 'react';
 import React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';

package/src/Charts/YAxis.tsx

@@ -0,0 +1,103 @@
+import {
+  Group,
+  Line,
+  Text,
+  vec,
+  type Color,
+  type SkFont,
+} from 'react-native-skia';
+import { memo, useMemo, type FC } from 'react';
+import { StyleSheet } from 'react-native';
+
+export type YAxisProps = {
+  width: number;
+  height: number;
+  font: SkFont;
+  minY: number;
+  maxY: number;
+  /** Values to draw a gridline at. Defaults to `nbTicks` evenly spaced values. */
+  values?: number[];
+  nbTicks?: number;
+  color?: Color;
+  labelColor?: Color;
+  strokeWidth?: number;
+  showLabels?: boolean;
+  formatLabel?: (value: number) => string;
+};
+
+const defaultFormatLabel = (value: number) => `${Math.round(value)}`;
+
+/** Evenly spaced integer ticks from 0 to a padded maximum, e.g. 0, 26, 52, 78, 104. */
+export const getPaddedTicks = function (
+  maxValue: number,
+  nbTicks = 4,
+  padding = 1.15
+): number[] {
+  const step = Math.max(1, Math.ceil((maxValue * padding) / nbTicks));
+  return Array.from({ length: nbTicks + 1 }, (_, i) => i * step);
+};
+
+const YAxis: FC<YAxisProps> = function (props) {
+  const {
+    width,
+    height,
+    font,
+    minY,
+    maxY,
+    nbTicks = 4,
+    color = 'black',
+    labelColor,
+    strokeWidth = StyleSheet.hairlineWidth,
+    showLabels = true,
+    formatLabel = defaultFormatLabel,
+  } = props;
+
+  // Measured once per input change: parents re-render while panning
+  const rows = useMemo(() => {
+    // A flat range would divide by zero
+    const span = maxY - minY || 1;
+    const values =
+      props.values ??
+      Array.from(
+        { length: nbTicks },
+        (_, i) => minY + ((i + 1) * (maxY - minY)) / nbTicks
+      );
+    return values.map((value) => {
+      const label = formatLabel(value);
+      const labelWidth = font
+        .getGlyphWidths(font.getGlyphIDs(label))
+        .reduce((a, b) => a + b, 0);
+      return {
+        label,
+        labelWidth,
+        transform: [{ translateY: height - ((value - minY) * height) / span }],
+        p1: vec(0, 0),
+        p2: vec(showLabels ? width - 10 - labelWidth : width, 0),
+      };
+    });
+  }, [props.values, nbTicks, minY, maxY, height, width, font, showLabels, formatLabel]);
+
+  return (
+    <Group>
+      {rows.map((row, i) => (
+        <Group key={`YTick-${i}`} transform={row.transform}>
+          <Line p1={row.p1} p2={row.p2} color={color} strokeWidth={strokeWidth} />
+          {showLabels ? (
+            <Text
+              text={row.label}
+              x={width - row.labelWidth}
+              y={font.getSize() / 2.5}
+              font={font}
+              color={labelColor ?? color}
+            />
+          ) : null}
+        </Group>
+      ))}
+    </Group>
+  );
+};
+
+const MemoYAxis = memo(YAxis);
+MemoYAxis.displayName = 'YAxis';
+
+export { MemoYAxis as YAxis };

package/src/Charts/ZoomableLinechart/ScalablePath.tsx

@@ -1,4 +1,4 @@
-import { Path, Skia, type SkPath } from '@shopify/react-native-skia';
+import { Path, Skia, type SkPath } from 'react-native-skia';
 import { type FC } from 'react';
 import { useDerivedValue, type SharedValue } from 'react-native-reanimated';
 
@@ -8,7 +8,7 @@ export type ScalablePathProps = {
   focalX: SharedValue<number>;
   offsetX: SharedValue<number>;
   color?: string;
-  pathProps?: Omit<React.ComponentProps<typeof Path>, 'color'>;
+  pathProps?: Omit<React.ComponentProps<typeof Path>, 'color' | 'path'>;
 };
 
 const ScalablePath: FC<ScalablePathProps> = function (props) {
@@ -16,13 +16,12 @@ const ScalablePath: FC<ScalablePathProps> = function (props) {
 
   const animatedPath = useDerivedValue(() => {
     // Affine equivalent of getPositionWl: x' = scale * x + focalX * (1 - scale) + offsetX
-    const _path = path.value.copy();
-    _path.transform(
-      Skia.Matrix()
-        .translate(focalX.value * (1 - scale.value) + offsetX.value, 0)
-        .scale(scale.value, 1)
-    );
-    return _path;
+    // Plain 3x3 matrix: a Skia.Matrix() would allocate a native object per frame
+    const s = scale.value;
+    const tx = focalX.value * (1 - s) + offsetX.value;
+    return Skia.PathBuilder.MakeFromPath(path.value)
+      .transform([s, 0, tx, 0, 1, 0, 0, 0, 1])
+      .build();
   });
 
   return (

package/src/Charts/ZoomableLinechart/index.tsx

@@ -1,4 +1,4 @@
-import { Canvas, Group, type SkPath } from '@shopify/react-native-skia';
+import { Canvas, Group, type SkPath } from 'react-native-skia';
 import type { FC } from 'react';
 import React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';