Add a normalize function

[Andarius]

It would be nice to have a normalize function similar to https://github.com/jkroso/normalize-svg-path/tree/master that Redash was using. The idea behind this is to be able to use Svg Path generated by d3 by converting them using Skia.Path.MakeFromSVGString(svgPath).toCmds() into Cubic commands.

Using svg and reanimated, I've been using the following function to generate my graphs (like here https://github.com/Andarius/rn-animations-playground#8-scalable-linechart):

import { scaleLinear } from 'd3-scale';
import * as shape from 'd3-shape';

export type Config = {
  minX?: number;
  maxX?: number;
  minY?: number;
  maxY?: number;
  // See https://github.com/d3/d3-shape#curves
  curve?: shape.CurveFactory | shape.CurveFactoryLineOnly;
};

export const buildGraph = (
  data: [number, number][],
  width: number,
  height: number,
  config?: Config
) => {
  const minX = Math.min(...data.map((x) => x[0]));
  const maxX = Math.max(...data.map((x) => x[0]));
  const scaleX = scaleLinear()
    .domain([config?.minX ?? minX, config?.maxX ?? maxX])
    .range([0, width]);

  const minY = Math.min(...data.map((x) => x[1]));
  const maxY = Math.max(...data.map((x) => x[1]));
  const scaleY = scaleLinear()
    .domain([config?.minY ?? minY, config?.maxY ?? maxY])
    .range([height, 0]);

  const fmtValues = data.map((x) => [x[1], x[0]] as [number, number]);

  const path = shape
    .line()
    .x(([, x]) => scaleX(x))
    .y(([y]) => scaleY(y))
    .curve(config?.curve ?? shape.curveLinear)(fmtValues) as string;

  return {
    data: fmtValues,
    minY,
    maxY,
    path,
  };
};

So we use the power of d3 to generate the graphs.

Before, I was using parse from redash to then convert it to be used to get the Y value of the graph.

With the new way of doing it in react-native-skia, selectCurve only supports Move and Cubic PathVerb.

I created the following norm function but I'm not an expert in Bézier curves so I might be wrong and it only supports convertion of Line commands.

export const norm = (cmds: PathCommand[]): PathCommand[] => {
  'worklet';
  const normCmds: PathCommand[] = [];
  let x = 0,
    y = 0;
  for (let i = 0; i < cmds.length; i++) {
    const currCmd = cmds[i];
    if (currCmd === undefined)
      throw new Error(`No command found at index ${i}`);

    let normCmd;
    const cmd = currCmd[0];
    if (cmd === undefined) throw new Error('Got undefined command');

    if (cmd === PathVerb.Line) {
      normCmd = [
        PathVerb.Cubic,
        x,
        y,
        currCmd[1]!,
        currCmd[2]!,
        currCmd[1]!,
        currCmd[2]!,
      ];
    } else {
      normCmd = currCmd;
    }

    x = normCmd[normCmd.length - 2]!;
    y = normCmd[normCmd.length - 1]!;

    normCmds.push(normCmd);
  }

  return normCmds;
};

It could be nice to have something built-in.

[wcandillon]

I worked on something like this that we will announce in a few weeks. I would be happy to share some code there if needed.
We actually took the code from flutter/impeller: https://github.com/flutter/engine/blob/main/impeller/geometry/path_component.h

[Andarius]

Oh really nice that would be awesome!

[Andarius]

Hey @wcandillon, any news on the announcement? Otherwise, would it be possible for you to share the code mentioned above?

[wcandillon]

Yes, this was part of the canvaskit announcement: https://www.youtube.com/watch?v=3p3NI1yIgcM
The code is only available for members at https://start-react-native.dev/ but here is a copy:
canvaskit-js-main.zip. There is a c2d/Path folder that contains all the primitives you need. It would be interesting to contribute them back into redash as worklets so we could use them for RN SVG too for instance.

[Andarius]

Oh I saw the video live but I somehow missed it... Thanks a lot! I'll play with it a bit and see how I can integrate to redash :)