@obitrain/charts 0.9.2

package/src/Charts/maths.ts

@@ -0,0 +1,245 @@
+import type { PathCommand, Vector } from '@shopify/react-native-skia';
+import { PathVerb, vec } from '@shopify/react-native-skia';
+
+// code from William Candillon
+
+const round = (value: number, precision = 0): number => {
+  'worklet';
+
+  const p = Math.pow(10, precision);
+  return Math.round(value * p) / p;
+};
+
+// https://stackoverflow.com/questions/27176423/function-to-solve-cubic-equation-analytically
+const cuberoot = (x: number): number => {
+  'worklet';
+
+  const y = Math.pow(Math.abs(x), 1 / 3);
+  return x < 0 ? -y : y;
+};
+
+const solveCubic = (a: number, b: number, c: number, d: number): number[] => {
+  'worklet';
+
+  if (Math.abs(a) < 1e-8) {
+    // Quadratic case, ax^2+bx+c=0
+    a = b;
+    b = c;
+    c = d;
+    if (Math.abs(a) < 1e-8) {
+      // Linear case, ax+b=0
+      a = b;
+      b = c;
+      if (Math.abs(a) < 1e-8) {
+        // Degenerate case
+        return [];
+      }
+      return [-b / a];
+    }
+
+    const D = b * b - 4 * a * c;
+    if (Math.abs(D) < 1e-8) return [-b / (2 * a)];
+    if (D > 0)
+      return [(-b + Math.sqrt(D)) / (2 * a), (-b - Math.sqrt(D)) / (2 * a)];
+
+    return [];
+  }
+
+  // Convert to depressed cubic t^3+pt+q = 0 (subst x = t - b/3a)
+  const p = (3 * a * c - b * b) / (3 * a * a);
+  const q = (2 * b * b * b - 9 * a * b * c + 27 * a * a * d) / (27 * a * a * a);
+  let roots: number[] = [];
+
+  if (Math.abs(p) < 1e-8) {
+    // p = 0 -> t^3 = -q -> t = -q^1/3
+    roots = [cuberoot(-q)];
+  } else if (Math.abs(q) < 1e-8) {
+    // q = 0 -> t^3 + pt = 0 -> t(t^2+p)=0
+    roots = [0].concat(p < 0 ? [Math.sqrt(-p), -Math.sqrt(-p)] : []);
+  } else {
+    const D = (q * q) / 4 + (p * p * p) / 27;
+    if (Math.abs(D) < 1e-8) {
+      // D = 0 -> two roots
+      roots = [(-1.5 * q) / p, (3 * q) / p];
+    } else if (D > 0) {
+      // Only one real root
+      const u = cuberoot(-q / 2 - Math.sqrt(D));
+      roots = [u - p / (3 * u)];
+    } else {
+      // D < 0, three roots, but needs to use complex numbers/trigonometric solution
+      const u = 2 * Math.sqrt(-p / 3);
+      const t = Math.acos((3 * q) / p / u) / 3; // D < 0 implies p < 0 and acos argument in [-1..1]
+      const k = (2 * Math.PI) / 3;
+      roots = [u * Math.cos(t), u * Math.cos(t - k), u * Math.cos(t - 2 * k)];
+    }
+  }
+
+
+
+  // Convert back from depressed cubic
+  for (let i = 0; i < roots.length; i++) roots[i]! -= b / (3 * a);
+
+  return roots;
+};
+
+// const cubicBezier = (
+//   t: number,
+//   from: number,
+//   c1: number,
+//   c2: number,
+//   to: number
+// ): number => {
+//   'worklet';
+
+//   const term = 1 - t;
+//   const a = 1 * term ** 3 * t ** 0 * from;
+//   const b = 3 * term ** 2 * t ** 1 * c1;
+//   const c = 3 * term ** 1 * t ** 2 * c2;
+//   const d = 1 * term ** 0 * t ** 3 * to;
+//   return a + b + c + d;
+// };
+
+const cubicSolve = function (
+  t: number,
+  p0: number,
+  p1: number,
+  p2: number,
+  p3: number
+) {
+  'worklet';
+  return (
+    (1 - t) * (1 - t) * (1 - t) * p0 +
+    3 * (1 - t) * (1 - t) * t * p1 +
+    3 * (1 - t) * t * t * p2 +
+    t * t * t * p3
+  );
+};
+
+export const cubicBezierYForX = (
+  x: number,
+  a: Vector,
+  b: Vector,
+  c: Vector,
+  d: Vector,
+  precision = 2
+): number => {
+  'worklet';
+
+  const pa = -a.x + 3 * b.x - 3 * c.x + d.x;
+  const pb = 3 * a.x - 6 * b.x + 3 * c.x;
+  const pc = -3 * a.x + 3 * b.x;
+  const pd = a.x - x;
+  const ts = solveCubic(pa, pb, pc, pd)
+    .map((root) => round(root, precision))
+    .filter((root) => root >= 0 && root <= 1);
+  const t = ts[0];
+  if (t == null) return 0;
+  //   return cubicBezier(t, a.y, b.y, c.y, d.y);
+  return cubicSolve(t, a.y, b.y, c.y, d.y);
+};
+
+interface Cubic {
+  from: Vector;
+  c1: Vector;
+  c2: Vector;
+  to: Vector;
+}
+
+export const selectCurve = (
+  cmds: PathCommand[],
+  x: number
+): Cubic | undefined => {
+  'worklet';
+
+  let from: Vector = vec(0, 0);
+  for (let i = 0; i < cmds.length; i++) {
+    const cmd = cmds[i];
+    if (cmd == null) {
+      return undefined;
+    }
+
+    if (cmd[0] === PathVerb.Move) {
+      from = vec(cmd[1], cmd[2]);
+    } else if (cmd[0] === PathVerb.Cubic) {
+      const c1 = vec(cmd[1], cmd[2]);
+      const c2 = vec(cmd[3], cmd[4]);
+      const to = vec(cmd[5], cmd[6]);
+      if (x >= from.x && x <= to.x) {
+        return {
+          from,
+          c1,
+          c2,
+          to,
+        };
+      }
+      from = to;
+    }
+  }
+
+  return undefined;
+};
+
+/**
+ * Convert commands to cubic bezier
+ */
+export const commandsToBezier = (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;
+};
+
+export const getYForX = (
+  cmds: PathCommand[],
+  x: number,
+  precision = 2
+): number | undefined => {
+  'worklet';
+  const cmdsNorm = commandsToBezier(cmds);
+  const c = selectCurve(cmdsNorm, x);
+  if (c == null) return undefined;
+
+  return cubicBezierYForX(x, c.from, c.c1, c.c2, c.to, precision);
+};
+
+// See Path/getPath2D
+
+import { type SkPoint } from '@shopify/react-native-skia';
+
+export const magnitude = (p: SkPoint): number =>
+  Math.sqrt(p.x * p.x + p.y * p.y);
+
+export const normalize = (p: SkPoint) => {
+  const m = magnitude(p);
+  return { x: p.x / m, y: p.y / m } as SkPoint;
+};

package/src/Charts/types.ts

@@ -0,0 +1,16 @@
+import type { SharedValue } from 'react-native-reanimated';
+import type { GraphData } from './graphUtils';
+
+export type LineGraphType = GraphData; // Omit<GraphData, 'path'> & { path: RPath };
+
+export type DataPoint = {
+  x: number;
+  y: number;
+  value: number;
+};
+
+export type AnimatedDot = {
+  x: SharedValue<number>;
+  y: SharedValue<number>;
+  opacity: SharedValue<number>;
+};

package/src/dateUtils.ts

@@ -0,0 +1,163 @@
+export type DateRange = 'day' | 'month' | 'trimester' | 'year' | 'all';
+
+export const getMonthInterval = function (
+  month: number,
+  nbMonths: number
+): string {
+  if (month <= 0) throw new Error('Months should start at 1');
+  return (month - (month % nbMonths) + 1).toString().padStart(2, '0');
+};
+
+/**
+ * Get the date interval based on the date range.
+ * For example, for the date 2021-01-01:
+ * - day: 2021-01-01
+ * - month: 2021-01
+ * - trimester: 2021-01
+ * - year: 2021
+ * @param date
+ * @param dateRange
+ * @returns
+ */
+export const getDateInterval = function (
+  date: Date,
+  dateRange: DateRange
+): string {
+  const year = date.getFullYear();
+  const month = date.getMonth() + 1;
+  const day = date.getDate().toString().padStart(2, '0');
+
+  const monthStr = month.toString().padStart(2, '0');
+
+  switch (dateRange) {
+    case 'day':
+      return `${year}-${monthStr}-${day}`;
+    case 'month':
+      return `${year}-${monthStr}`;
+    case 'trimester':
+      return `${year}-${getMonthInterval(month, 3)}`;
+    case 'year':
+      return `${year}`;
+  }
+  throw new Error('Invalid date range');
+};
+
+//@ts-ignore
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const fmtData = function (data: [Date, number][], dateRange: DateRange) {
+  const _dataFmt = new Map<string, [number, number]>();
+  for (const [date, value] of data) {
+    const _dateStr = getDateInterval(date, dateRange);
+    if (!_dataFmt.has(_dateStr))
+      _dataFmt.set(_dateStr, [date.getTime(), value]);
+  }
+
+  return [..._dataFmt.values()];
+};
+
+/**
+ * Groups an array of Date objects by a specific time interval (day, month, trimester, year)
+ * and calculates the earliest and latest dates within each interval.
+ * For instance, given the dates [2021-01-01, 2021-01-25, 2021-03-01, 2021-10-01]:
+ *  - month: { '2021-01': [2021-01-01, 2021-01-25],
+*              '2021-03': [2021-03-01, 2021-03-01],
+               '2021-10': [2021-10-01, 2021-10-01] }
+
+ * @param {Date[]} dates - An array of dates to group and find boundary dates for.
+ * @returns {Map<string, [Date, Date]>} - A map where each key represents an interval
+ * as a string (formatted according to the interval type, e.g., '2021', '2021-03', '2021-01-01'),
+ * and each value is a tuple containing the earliest and latest dates within that interval.
+ */
+export function getDateBoundaries(dates: Date[], dateRange: DateRange) {
+  const ranges = new Map<string, [Date, Date]>();
+
+  for (const date of dates) {
+    const _dateStr = getDateInterval(date, dateRange);
+    const _range = ranges.get(_dateStr);
+    if (!_range) ranges.set(_dateStr, [date, date]);
+    else if (date > _range[1]) ranges.set(_dateStr, [_range[0], date]);
+  }
+  return ranges;
+}
+
+export function sampleDates(
+  dates: Date[],
+  sampleSize: number,
+  indexOffset: number = 0
+): { dates: Date[]; indexes: number[] } {
+  if (sampleSize <= 0 || dates.length === 0) {
+    return { dates: [], indexes: [] };
+  }
+
+  if (sampleSize >= dates.length) {
+    return {
+      dates,
+      indexes: Array.from({ length: dates.length }, (_, i) => indexOffset + i),
+    };
+  }
+
+  // Calculate total time span and interval
+  const firstItem = dates[0]!;
+  const lastItem = dates[dates.length - 1]!;
+  const startTime = firstItem.getTime();
+  const endTime = lastItem.getTime();
+  const timeSpan = endTime - startTime;
+  const timeInterval = timeSpan / (sampleSize - 1);
+
+  const sampledDates: Date[] = [firstItem]; // Always include the first date
+  const sampledIndexes = [0];
+  let nextTime = startTime + timeInterval;
+
+  // Select dates closest to each time interval
+  for (let i = 1; i < sampleSize - 1; i++) {
+    let closestDate = dates[0];
+    let minDiff = Math.abs(startTime - nextTime);
+    let closestIndex = 0;
+    for (let j = 1; j < dates.length; j++) {
+      const diff = Math.abs(dates[j]!.getTime() - nextTime);
+      if (diff < minDiff) {
+        closestDate = dates[j];
+        closestIndex = j;
+        minDiff = diff;
+      }
+    }
+    sampledDates.push(closestDate!);
+    sampledIndexes.push(closestIndex);
+    nextTime += timeInterval;
+  }
+
+  sampledDates.push(lastItem); // Always include the last date
+  sampledIndexes.push(dates.length - 1);
+
+  return {
+    dates: sampledDates,
+    indexes: sampledIndexes.map((x) => indexOffset + x),
+  };
+}
+
+export function sampleDatesByRange(
+  dates: Date[],
+  sampleSize: number,
+  dateRange: DateRange
+): Map<string, { dates: Date[]; indexes: number[] }> {
+  const boundaries = getDateBoundaries(dates, dateRange);
+  const rangedData = new Map<string, Date[]>();
+  for (let i = 0; i < dates.length; i++) {
+    let date = dates[i]!;
+    for (const [key, [minDate, maxDate]] of boundaries) {
+      if (date >= minDate && date <= maxDate) {
+        if (!rangedData.has(key)) rangedData.set(key, []);
+        rangedData.get(key)!.push(date);
+        break;
+      }
+    }
+  }
+  const sampledData = new Map<string, { dates: Date[]; indexes: number[] }>();
+  let offset = 0;
+  for (const [key, value] of rangedData) {
+    sampledData.set(key, sampleDates(value, sampleSize, offset));
+    offset += value.length;
+  }
+
+  return sampledData;
+}

package/src/index.tsx

@@ -0,0 +1,4 @@
+export * from './Charts';
+export * from './dateUtils';
+export type { DateRange } from './dateUtils';
+export * from './textUtils';

package/src/textUtils.ts

@@ -0,0 +1,21 @@
+import {
+  useDerivedValue,
+  useSharedValue,
+  type SharedValue,
+} from 'react-native-reanimated';
+
+const textToString = function (value: number) {
+  'worklet';
+  return value.toFixed(0).toString();
+};
+
+export const useSharedNumberToStr = function (
+  initValue: number = 0
+): [SharedValue<number>, SharedValue<string>] {
+  const value = useSharedValue<number>(initValue);
+  const valueStr = useDerivedValue(() => {
+    return textToString(value.value);
+  }, [value]);
+
+  return [value, valueStr];
+};