@tsiky/components-r19 1.3.0 → 1.3.1

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

@@ -1,681 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import Chart from 'react-apexcharts';
-import type { ApexOptions } from 'apexcharts';
-import { Move } from 'lucide-react';
-
-/* ---------- 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;
-  draggable?: boolean;
-  tooltipEnabled?: boolean;
-  // zoomEnabled removed as separate prop — zoom/pan follow tooltipEnabled
-}
-
-/* ---------- 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,
-  draggable = false,
-  tooltipEnabled = true,
-}) => {
-  const [renderKey, setRenderKey] = useState(0);
-  const [loading, setLoading] = useState(false);
-
-  // Lorsque draggable passe de true → false, on force remount
-  useEffect(() => {
-    if (!draggable) {
-      setLoading(true);
-      const timeout = setTimeout(() => {
-        setRenderKey((k) => k + 1); // nouvelle key → remount Chart
-        setLoading(false);
-      }, 10); // très court délai pour permettre le placeholder
-      return () => clearTimeout(timeout);
-    }
-  }, [draggable]);
-
-  // 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,
-        autoSelected: 'pan',
-        tools: {
-          download: false,
-          selection: true,
-          zoom: true,
-          zoomin: true,
-          zoomout: true,
-          pan: true,
-          reset: true,
-        },
-      },
-      width: '100%',
-      zoom: {
-        enabled: tooltipEnabled,
-        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: {
-      enabled: tooltipEnabled,
-      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 (
-    <div style={{ position: 'relative', width: '100%', height }}>
-      {draggable && !loading ? (
-        <div
-          style={{
-            width: '100%',
-            height: '100%',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-          }}
-        >
-          <Move size={48} strokeWidth={1.5} style={{ opacity: 0.8 }} />
-        </div>
-      ) : (
-        <Chart
-          key={renderKey} // force remount si besoin
-          options={options}
-          series={series as unknown as ApexOptions['series']}
-          type='line'
-          height={height}
-        />
-      )}
-    </div>
-  );
-};
-
-export default MixedChart;