How to plot discrete segments from path.cubicTo() based on null value of that point.

[pandey21197]

The createPath return the path for all the points, but how can we get discrete paths when value is null for that point.

const createPath = points => {
  const path = Skia.Path.Make();

  for (let i = 0; i < points.length; i++) {
    const point = points[i];

    // first point needs to start the path
    if (i === 0) {
      path.moveTo(point.x, point.y);
    }

    const prev = points[i - 1];
    const prevPrev = points[i - 2];

    if (prev == null) {
      continue;
    }

    const p0 = prevPrev ?? prev;
    const p1 = prev;
    const cp1x = (2 * p0.x + p1.x) / 3;
    const cp1y = (2 * p0.y + p1.y) / 3;
    const cp2x = (p0.x + 2 * p1.x) / 3;
    const cp2y = (p0.y + 2 * p1.y) / 3;
    const cp3x = (p0.x + 4 * p1.x + point.x) / 6;
    const cp3y = (p0.y + 4 * p1.y + point.y) / 6;

    path.cubicTo(cp1x, cp1y, cp2x, cp2y, cp3x, cp3y);
  }

  return path;
};

eg for data set:
export const data = [
{x: '2000-02-01T05:00:00.000Z', y: 250},
{x: '2000-02-02T05:00:00.000Z', y: 300.35},
{x: '2000-02-03T05:00:00.000Z', y: 150.84},
{x: '2000-02-04T05:00:00.000Z', y: 500.92},
{x: '2000-02-05T05:00:00.000Z', y: 200.8},
{x: '2000-02-06T05:00:00.000Z', y: 150.47},
{x: '2000-02-07T05:00:00.000Z', y:0},
{x: '2000-02-08T05:00:00.000Z', y: 0},
{x: '2000-02-09T05:00:00.000Z', y: 1500.47},
{x: '2000-02-10T05:00:00.000Z', y: 83.8},
{x: '2000-02-11T05:00:00.000Z', y: 100.47},
{x: '2000-02-12T05:00:00.000Z', y: 1000.47},
{x: '2000-02-13T05:00:00.000Z', y: 200.47},
{x: '2000-02-14T05:00:00.000Z', y: 500.47},
{x: '2000-02-15T05:00:00.000Z', y: 600.47},
];

for y value 0, it creates single path with plotted 0 value, rather we want to create discrete paths:

1. for valid value
2. invalid value

expected outcome:

[wcandillon]

You can use the y=0 as a separate and create as many paths as you need.

[pandey21197]

@wcandillon how to connect those paths in in Path compenent below:

       <Path
                    path={path}
                    strokeWidth={lineThickness}
                    style="stroke"
                    strokeJoin="round"
                    strokeCap="round">
          
                  </Path>