@tsiky/components-r19 1.0.0

package/src/components/Charts/mixed-chart/MixedChart.tsx

@@ -0,0 +1,625 @@
+import React from 'react';
+import Chart from 'react-apexcharts';
+import type { ApexOptions } from 'apexcharts';
+
+/* ---------- Types ---------- */
+export interface BandChartData {
+  labels: string[];
+  main: number[];
+  upper: number[];
+  lower: number[];
+  histogram?: number[];
+}
+
+export type DisplayConditionFn = (data: BandChartData) => boolean;
+
+export interface LineConfig {
+  id: string;
+  key: keyof BandChartData;
+  label?: string;
+  visible?: boolean;
+  color?: string;
+  width?: number;
+  dash?: number;
+}
+export interface OutlierConfig {
+  label?: string;
+  color?: string;
+  size?: number;
+  marker?: { fillColor?: string; strokeColor?: string; opacity?: number; size?: number };
+}
+
+export interface BubbleConfig {
+  visible?: boolean;
+  values?: (number | null)[];
+  color?: string;
+  size?: number;
+  outsideStyle?: { size?: number; fillColor?: string; strokeColor?: string; opacity?: number };
+  hideOutside?: boolean;
+}
+
+export interface BandChartConfig {
+  lines?: LineConfig[];
+  showHistogram?: boolean;
+  histogramKey?: keyof BandChartData;
+  histogramColor?: string;
+  // OnGoing options
+  showOnGoing?: boolean;
+  onGoingColor?: string;
+  onGoingLabel?: string;
+  onGoingIndex?: number | 'last';
+  bubble?: BubbleConfig;
+  outliers?: { lower?: OutlierConfig; upper?: OutlierConfig };
+  displayCondition?: DisplayConditionFn | null;
+  responsive?: boolean;
+}
+
+interface Props {
+  data: BandChartData;
+  config?: BandChartConfig;
+  height?: number;
+  useOnGoing?: boolean;
+}
+
+/* ---------- Local series item types (compat Apex) ---------- */
+// Note: we allow extra props (like _outside) on point objects
+type LinePoint = { x: string | number; y: number };
+type ColumnPoint = { x: string | number; y: number | null; fillColor?: string };
+type RangePoint = { x: string | number; y: [number, number] };
+type ScatterPoint = { x: string | number; y: number | null; _outside?: boolean };
+
+type SeriesItem =
+  | { name: string; type?: 'line'; data: LinePoint[] }
+  | { name: string; type?: 'column'; data: ColumnPoint[] }
+  | { name: string; type?: 'rangeArea'; data: RangePoint[] }
+  | { name: string; type?: 'scatter'; data: ScatterPoint[] };
+
+type ChartSeries = SeriesItem[];
+
+/* markers.discrete local type */
+interface MarkerDiscrete {
+  seriesIndex: number;
+  dataPointIndex: number;
+  fillColor?: string;
+  strokeColor?: string;
+  size?: number;
+}
+
+/* ---------- default config (local) ---------- */
+const defaultConfig: BandChartConfig = {
+  lines: [
+    {
+      id: 'Upper',
+      key: 'upper',
+      label: 'Upper',
+      visible: true,
+      color: 'var(--color-line)',
+      width: 1,
+      dash: 0,
+    },
+    {
+      id: 'Main',
+      key: 'main',
+      label: 'Main',
+      visible: true,
+      color: 'var(--color-main-line)',
+      width: 1.5,
+      dash: 6,
+    },
+    {
+      id: 'Lower',
+      key: 'lower',
+      label: 'Lower',
+      visible: true,
+      color: 'var(--color-line)',
+      width: 1,
+      dash: 0,
+    },
+  ],
+  showHistogram: true,
+  histogramKey: 'histogram',
+  histogramColor: '#6f6f6f',
+  showOnGoing: true,
+  onGoingColor: 'var(--color-area)',
+  onGoingLabel: 'OnGoing',
+  onGoingIndex: 'last',
+  bubble: {
+    visible: true,
+    values: [],
+    color: '#0b66ff',
+    size: 6,
+    outsideStyle: { size: 4, fillColor: 'rgba(11,102,255,0)', strokeColor: 'rgba(255,255,255,0)' },
+    hideOutside: false,
+  },
+  displayCondition: null,
+  responsive: true,
+};
+
+const MixedChart: React.FC<Props> = ({
+  data,
+  config = defaultConfig,
+  height = 350,
+  useOnGoing,
+}) => {
+  // merge defaults and provided config
+  const merged = { ...defaultConfig, ...config };
+  // minimal override: if caller provided useOnGoing boolean, it forces merged.showOnGoing
+  if (typeof useOnGoing === 'boolean') {
+    merged.showOnGoing = useOnGoing;
+  }
+  const cfg: BandChartConfig = merged;
+
+  if (cfg.displayCondition && !cfg.displayCondition(data)) {
+    return <div style={{ padding: 12 }}>Chart hidden by displayCondition</div>;
+  }
+
+  const labels = data.labels || [];
+  const n = labels.length;
+  if (!n) return <div style={{ padding: 12 }}>Pas de labels fournis</div>;
+
+  // resolve onGoing index (last histogram element by default or explicit index)
+  let resolvedOnGoingIndex: number | null = null;
+  if (cfg.showOnGoing) {
+    if (cfg.onGoingIndex === 'last' || typeof cfg.onGoingIndex === 'undefined') {
+      const h = data[cfg.histogramKey ?? 'histogram'] as number[] | undefined;
+      if (h && h.length > 0) resolvedOnGoingIndex = Math.min(h.length - 1, n - 1);
+    } else if (typeof cfg.onGoingIndex === 'number') {
+      if (cfg.onGoingIndex >= 0 && cfg.onGoingIndex < n) resolvedOnGoingIndex = cfg.onGoingIndex;
+    }
+  }
+
+  const series: ChartSeries = [];
+  const strokeWidths: number[] = [];
+  const strokeDashArray: number[] = [];
+  const colors: string[] = [];
+  const fillTypes: Array<'solid' | 'gradient'> = [];
+  const fillOpacities: number[] = [];
+
+  /* ---------------- 1) Lines (simple lines only) ---------------- */
+  if (cfg.lines) {
+    cfg.lines.forEach((ln) => {
+      if (!ln.visible) return;
+      const arr = data[ln.key] as unknown as number[] | undefined;
+      if (!arr) return;
+
+      // map to category x (labels)
+      const pts: LinePoint[] = [];
+      for (let i = 0; i < Math.min(arr.length, n); i++) pts.push({ x: labels[i], y: arr[i] });
+
+      series.push({ name: ln.id, type: 'line', data: pts });
+      strokeWidths.push(typeof ln.width === 'number' ? ln.width : 2);
+      strokeDashArray.push(typeof ln.dash === 'number' ? ln.dash : 0);
+      colors.push(ln.color ?? '#003366');
+      fillTypes.push('solid');
+      fillOpacities.push(1);
+    });
+  }
+
+  /* ---------------- 2) OUTLIERS / BUBBLES ---------------- */
+  const lowerScatter: ScatterPoint[] = [];
+  const correctScatter: ScatterPoint[] = [];
+  const upperScatter: ScatterPoint[] = [];
+  const markersDiscreteTemp: {
+    seriesKey: 'lower' | 'correct' | 'upper';
+    dataPointIndex: number;
+    outside?: boolean;
+  }[] = [];
+
+  const bvals = cfg.bubble?.values ?? [];
+  const upperArr = data.upper as unknown as number[] | undefined;
+  const lowerArr = data.lower as unknown as number[] | undefined;
+  const mainArr = data.main as unknown as number[] | undefined;
+
+  const correctColor = cfg.bubble?.color ?? '#0b66ff';
+  const correctSize = cfg.bubble?.size ?? 6;
+  const outsideStyle = cfg.bubble?.outsideStyle ?? {
+    size: Math.max(3, Math.round(correctSize * 0.6)),
+    fillColor: 'rgba(11,102,255,0)',
+    strokeColor: 'rgba(255,255,255,0)',
+  };
+  const hideOutside = cfg.bubble?.hideOutside ?? false;
+
+  const lowerCfgColor =
+    (cfg.outliers && cfg.outliers.lower && cfg.outliers.lower.color) ?? '#28a745';
+  const upperCfgColor =
+    (cfg.outliers && cfg.outliers.upper && cfg.outliers.upper.color) ?? '#ff4d4f';
+  const lowerLabel =
+    (cfg.outliers && cfg.outliers.lower && cfg.outliers.lower.label) ?? 'Lower Outlier';
+  const upperLabel =
+    (cfg.outliers && cfg.outliers.upper && cfg.outliers.upper.label) ?? 'Upper Outlier';
+
+  for (let i = 0; i < n; i++) {
+    // exclude bubble at OnGoing index (no bubble should appear on the reserved OnGoing histogram point)
+    if (resolvedOnGoingIndex !== null && i === resolvedOnGoingIndex) {
+      lowerScatter.push({ x: labels[i], y: null });
+      correctScatter.push({ x: labels[i], y: null });
+      upperScatter.push({ x: labels[i], y: null });
+      continue;
+    }
+
+    const b = bvals[i];
+    if (typeof b === 'undefined' || b === null) {
+      lowerScatter.push({ x: labels[i], y: null });
+      correctScatter.push({ x: labels[i], y: null });
+      upperScatter.push({ x: labels[i], y: null });
+      continue;
+    }
+
+    // detect outside relative to lower/upper (for hideOutside/outsideStyle)
+    let isOutside = false;
+    if (
+      Array.isArray(upperArr) &&
+      Array.isArray(lowerArr) &&
+      typeof upperArr[i] === 'number' &&
+      typeof lowerArr[i] === 'number'
+    ) {
+      const up = upperArr[i];
+      const lo = lowerArr[i];
+      if (b > up || b < lo) isOutside = true;
+    }
+
+    if (isOutside && hideOutside) {
+      lowerScatter.push({ x: labels[i], y: null });
+      correctScatter.push({ x: labels[i], y: null });
+      upperScatter.push({ x: labels[i], y: null });
+      continue;
+    }
+
+    // classification w.r.t main (Lower: lower <= b < main ; Upper: main < b <= upper ; Correct: b === main)
+    let classification: 'lower' | 'upper' | 'correct' = 'correct';
+    let outsideFlag = false;
+    if (Array.isArray(mainArr) && typeof mainArr[i] === 'number') {
+      const m = mainArr[i];
+      if (
+        Array.isArray(upperArr) &&
+        Array.isArray(lowerArr) &&
+        typeof upperArr[i] === 'number' &&
+        typeof lowerArr[i] === 'number'
+      ) {
+        const up = upperArr[i],
+          lo = lowerArr[i];
+        if (b > m && b <= up) classification = 'upper';
+        else if (b < m && b >= lo) classification = 'lower';
+        else if (b === m) classification = 'correct';
+        else {
+          outsideFlag = true;
+          classification = b > up ? 'upper' : 'lower';
+        }
+      } else {
+        if (b > m) classification = 'upper';
+        else if (b < m) classification = 'lower';
+        else classification = 'correct';
+      }
+    } else classification = 'correct';
+
+    // IMPORTANT: we add `_outside` flag on point objects so tooltip can hide them if needed
+    if (classification === 'lower') {
+      lowerScatter.push({ x: labels[i], y: b, _outside: outsideFlag });
+      correctScatter.push({ x: labels[i], y: null });
+      upperScatter.push({ x: labels[i], y: null });
+      markersDiscreteTemp.push({ seriesKey: 'lower', dataPointIndex: i, outside: outsideFlag });
+    } else if (classification === 'upper') {
+      upperScatter.push({ x: labels[i], y: b, _outside: outsideFlag });
+      lowerScatter.push({ x: labels[i], y: null });
+      correctScatter.push({ x: labels[i], y: null });
+      markersDiscreteTemp.push({ seriesKey: 'upper', dataPointIndex: i, outside: outsideFlag });
+    } else {
+      correctScatter.push({ x: labels[i], y: b, _outside: false });
+      lowerScatter.push({ x: labels[i], y: null });
+      upperScatter.push({ x: labels[i], y: null });
+      markersDiscreteTemp.push({ seriesKey: 'correct', dataPointIndex: i, outside: false });
+    }
+  }
+
+  // append scatter series in this order (affects legend ordering)
+  series.push({ name: lowerLabel, type: 'scatter', data: lowerScatter });
+  strokeWidths.push(0);
+  strokeDashArray.push(0);
+  colors.push(lowerCfgColor);
+  fillTypes.push('solid');
+  fillOpacities.push(1);
+
+  series.push({ name: 'Correct Predictions', type: 'scatter', data: correctScatter });
+  strokeWidths.push(0);
+  strokeDashArray.push(0);
+  colors.push(correctColor);
+  fillTypes.push('solid');
+  fillOpacities.push(1);
+
+  series.push({ name: upperLabel, type: 'scatter', data: upperScatter });
+  strokeWidths.push(0);
+  strokeDashArray.push(0);
+  colors.push(upperCfgColor);
+  fillTypes.push('solid');
+  fillOpacities.push(1);
+
+  // discrete markers (assign correct seriesIndex after pushing scatter series)
+  const lowerSeriesIndex = series.findIndex((s) => s.type === 'scatter' && s.name === lowerLabel);
+  const correctSeriesIndex = series.findIndex(
+    (s) => s.type === 'scatter' && s.name === 'Correct Predictions'
+  );
+  const upperSeriesIndex = series.findIndex((s) => s.type === 'scatter' && s.name === upperLabel);
+
+  const markersDiscrete: MarkerDiscrete[] = markersDiscreteTemp.map((m) => {
+    const seriesIndex =
+      m.seriesKey === 'lower'
+        ? lowerSeriesIndex
+        : m.seriesKey === 'upper'
+          ? upperSeriesIndex
+          : correctSeriesIndex;
+    if (m.outside) {
+      return {
+        seriesIndex,
+        dataPointIndex: m.dataPointIndex,
+        fillColor: outsideStyle.fillColor,
+        strokeColor: outsideStyle.strokeColor,
+        size: outsideStyle.size,
+      };
+    }
+    if (m.seriesKey === 'lower') {
+      return {
+        seriesIndex,
+        dataPointIndex: m.dataPointIndex,
+        fillColor:
+          (cfg.outliers &&
+            cfg.outliers.lower &&
+            cfg.outliers.lower.marker &&
+            cfg.outliers.lower.marker.fillColor) ??
+          lowerCfgColor,
+        strokeColor:
+          (cfg.outliers &&
+            cfg.outliers.lower &&
+            cfg.outliers.lower.marker &&
+            cfg.outliers.lower.marker.strokeColor) ??
+          '#ffffff',
+        size:
+          (cfg.outliers &&
+            cfg.outliers.lower &&
+            cfg.outliers.lower.marker &&
+            cfg.outliers.lower.marker.size) ??
+          correctSize,
+      };
+    }
+    if (m.seriesKey === 'upper') {
+      return {
+        seriesIndex,
+        dataPointIndex: m.dataPointIndex,
+        fillColor:
+          (cfg.outliers &&
+            cfg.outliers.upper &&
+            cfg.outliers.upper.marker &&
+            cfg.outliers.upper.marker.fillColor) ??
+          upperCfgColor,
+        strokeColor:
+          (cfg.outliers &&
+            cfg.outliers.upper &&
+            cfg.outliers.upper.marker &&
+            cfg.outliers.upper.marker.strokeColor) ??
+          '#ffffff',
+        size:
+          (cfg.outliers &&
+            cfg.outliers.upper &&
+            cfg.outliers.upper.marker &&
+            cfg.outliers.upper.marker.size) ??
+          correctSize,
+      };
+    }
+    return {
+      seriesIndex,
+      dataPointIndex: m.dataPointIndex,
+      fillColor: correctColor,
+      strokeColor: '#ffffff',
+      size: correctSize,
+    };
+  });
+
+  /* ---------------- 3) Histogram (columns) ---------------- */
+  if (cfg.showHistogram && cfg.histogramKey) {
+    const hArr = data[cfg.histogramKey ?? 'histogram'] as unknown as number[] | undefined;
+    if (hArr && Array.isArray(hArr) && hArr.length > 0) {
+      const len = Math.min(hArr.length, n);
+      const realPoints: ColumnPoint[] = [];
+      const onGoingPoints: ColumnPoint[] = [];
+
+      for (let i = 0; i < len; i++) {
+        const hVal = typeof hArr[i] === 'number' ? hArr[i] : null;
+        const realY = resolvedOnGoingIndex !== null && i === resolvedOnGoingIndex ? 0 : hVal;
+        const onGoingY = resolvedOnGoingIndex !== null && i === resolvedOnGoingIndex ? hVal : 0;
+
+        // keep x as label to ensure correct placement
+        realPoints.push({ x: labels[i], y: realY });
+        onGoingPoints.push({ x: labels[i], y: onGoingY });
+      }
+
+      // push Real (columns)
+      series.push({ name: 'Real', type: 'column', data: realPoints });
+      strokeWidths.push(0);
+      strokeDashArray.push(0);
+      colors.push(cfg.histogramColor ?? '#888888');
+      fillTypes.push('solid');
+      fillOpacities.push(0.4);
+
+      // push OnGoing series (visible separately in legend)
+      if (cfg.showOnGoing && resolvedOnGoingIndex !== null) {
+        series.push({ name: cfg.onGoingLabel ?? 'OnGoing', type: 'column', data: onGoingPoints });
+        strokeWidths.push(0);
+        strokeDashArray.push(0);
+        colors.push(cfg.onGoingColor ?? 'rgba(11,102,255,0.28)');
+        fillTypes.push('solid');
+        fillOpacities.push(0.65);
+      }
+    }
+  }
+
+  const stroke = {
+    curve: 'smooth' as const,
+    width: strokeWidths,
+    dashArray: strokeDashArray,
+  };
+
+  /* ---------------- Apex options (tooltip customisé pour ignorer null/undefined et garder Real/OnGoing séparés) ---------------- */
+
+  // local shape for series entries we read from w.config.series
+  type ApexSeriesLike = { name?: string; type?: string; data?: unknown[] };
+
+  // define a type for the tooltip args we use
+  type TooltipArgs = {
+    dataPointIndex: number;
+    w: {
+      config?: {
+        series?: ApexSeriesLike[];
+        colors?: string[];
+      };
+      globals?: {
+        colors?: string[];
+      };
+    };
+  };
+
+  const options: ApexOptions = {
+    chart: {
+      foreColor: 'var(--color-text)',
+      type: 'line',
+      toolbar: { show: false, offsetY: -20 },
+      width: '100%',
+      zoom: { enabled: false, type: 'x', autoScaleYaxis: true },
+      animations: {
+        enabled: true,
+        animateGradually: { enabled: true, delay: 80 },
+        dynamicAnimation: { enabled: false },
+      },
+      // keep stacked true to allow stacked columns behaviour
+      stacked: true,
+    },
+    plotOptions: {
+      bar: {
+        columnWidth: '50%',
+      },
+    },
+    stroke,
+    colors,
+    fill: {
+      type: fillTypes,
+      opacity: fillOpacities,
+      gradient: {
+        type: 'vertical',
+        gradientToColors: undefined,
+        shadeIntensity: 1,
+        inverseColors: false,
+        opacityFrom: Math.max(...(fillOpacities.length ? fillOpacities : [0.4])),
+        opacityTo: Math.min(...(fillOpacities.length ? fillOpacities : [0.4])),
+        stops: [0, 100],
+      },
+    },
+
+    // markers & discrete
+    markers: {
+      shape: 'circle',
+      size: 0,
+      hover: { sizeOffset: 6 },
+      discrete: markersDiscrete as unknown as NonNullable<
+        NonNullable<ApexOptions['markers']>['discrete']
+      >,
+    },
+
+    // CUSTOM TOOLTIP: show only defined values, keep Real and OnGoing separate,
+    // skip outlier points flagged _outside, skip column placeholder zeros
+    tooltip: {
+      shared: true,
+      intersect: false,
+      followCursor: true,
+      custom: (args: TooltipArgs) => {
+        const { dataPointIndex, w } = args;
+        const cfgSeries = w.config?.series ?? [];
+        const rows: { name: string; color: string; value: number }[] = [];
+
+        for (let i = 0; i < cfgSeries.length; i++) {
+          const sObj = cfgSeries[i] as ApexSeriesLike | undefined;
+          const sData = Array.isArray(sObj?.data) ? sObj.data : [];
+          const point = sData[dataPointIndex] as unknown;
+
+          let yVal: number | undefined = undefined;
+          let pointOutside = false;
+
+          // handle null/undefined
+          if (point === null || typeof point === 'undefined') {
+            yVal = undefined;
+          } else if (typeof point === 'object' && point !== null && 'y' in point) {
+            // point is object with y (ColumnPoint / LinePoint / ScatterPoint)
+            const p = point as { y?: unknown; _outside?: unknown };
+            const pY = p.y;
+            if (typeof pY === 'number') yVal = pY;
+            else if (typeof pY === 'string' && pY.trim() !== '') {
+              const cast = Number(pY);
+              if (!Number.isNaN(cast)) yVal = cast;
+            }
+            pointOutside = Boolean(p._outside);
+          } else if (typeof point === 'number' || typeof point === 'string') {
+            const cast = Number(point as number | string);
+            if (!Number.isNaN(cast)) yVal = cast;
+          }
+
+          if (typeof yVal === 'undefined' || yVal === null) continue;
+
+          const name = sObj?.name ? String(sObj.name) : `Series ${i + 1}`;
+          // skip outlier points that are flagged _outside
+          if ((name === lowerLabel || name === upperLabel) && pointOutside) continue;
+
+          // For column series: skip placeholder 0 so we don't show OnGoing:0 or Real:0
+          const isColumn = sObj?.type === 'column';
+          if (isColumn && Number(yVal) === 0) continue;
+
+          const color =
+            (w.config?.colors && w.config.colors[i]) ??
+            (w.globals?.colors && w.globals.colors[i]) ??
+            '#333';
+          rows.push({ name, color, value: Number(yVal) });
+        }
+
+        // build HTML with header showing the category label (e.g., "06h")
+        let rowsHtml = '';
+        for (const r of rows) {
+          rowsHtml += `
+            <div style="display:flex;align-items:center;justify-content:space-between;padding:6px 10px;border-bottom:1px solid rgba(0,0,0,0.03)">
+              <div style="display:flex;align-items:center;gap:8px;min-width:120px">
+                <span style="width:10px;height:10px;border-radius:50%;background:${r.color};display:inline-block;"></span>
+                <div style="font-size:13px;color:var(--color-text)">${r.name}</div>
+              </div>
+              <div style="font-weight:600;color:var(--color-text)">${r.value}</div>
+            </div>
+          `;
+        }
+
+        return `
+          <div style="min-width:200px;background:var(--color-content-background);border-radius:6px;box-shadow:0 6px 24px rgba(0,0,0,0.12);overflow:hidden;">
+            ${rowsHtml}
+          </div>
+        `;
+      },
+    },
+
+    xaxis: {
+      type: 'category',
+      categories: labels,
+      tickPlacement: 'on',
+      tickAmount: Math.min(12, labels.length),
+    },
+    yaxis: { min: 0, tickAmount: 6 },
+    dataLabels: { enabled: false },
+    legend: { show: true, position: 'top' },
+    grid: { borderColor: 'var(--color-border)' },
+
+    responsive: cfg.responsive ? [] : undefined,
+  };
+
+  return (
+    <Chart
+      options={options}
+      series={series as unknown as ApexOptions['series']}
+      type='line'
+      height={height}
+    />
+  );
+};
+
+export default MixedChart;

package/src/components/Charts/mixed-chart/content.json

@@ -0,0 +1,34 @@
+{
+  "labels": [
+    "00h",
+    "01h",
+    "02h",
+    "03h",
+    "04h",
+    "05h",
+    "06h",
+    "07h",
+    "08h",
+    "09h",
+    "10h",
+    "11h",
+    "12h",
+    "13h",
+    "14h",
+    "15h",
+    "16h",
+    "17h",
+    "18h",
+    "19h",
+    "20h",
+    "21h",
+    "22h",
+    "23h"
+  ],
+  "main": [3, 2, 1, 1, 1, 2, 4, 7, 11, 14, 18, 20, 18, 17, 16, 16, 17, 18, 17, 15, 12, 10, 8, 6],
+  "upper": [5, 3, 2, 2, 2, 4, 7, 11, 16, 20, 25, 28, 24, 22, 21, 21, 23, 24, 22, 19, 15, 13, 10, 8],
+  "lower": [2, 1, 0, 0, 0, 1, 3, 5, 8, 11, 14, 15, 15, 14, 13, 13, 14, 15, 14, 12, 10, 8, 6, 5],
+  "histogram": [
+    2, 1, 1, 0, 0, 1, 3, 6, 10, 13, 16, 22, 17, 15, 14, 15, 16, 17, 15, 14, 11, 10, 7, 5
+  ]
+}