@tsiky/components-r19 1.0.0 → 1.2.0

package/src/components/Charts/boxplot-chart/BoxPlotChart.tsx

@@ -1,114 +1,114 @@
-import React from 'react';
-import Chart from 'react-apexcharts';
-import type { ApexOptions } from 'apexcharts';
-
-export interface BoxPoint {
-  x: string | number;
-  y: [number, number, number, number, number]; // [min, q1, median, q3, max]
-}
-
-export interface BoxPlotData {
-  series: BoxPoint[];
-}
-
-export interface BoxPlotConfig {
-  colorUpper?: string;
-  colorLower?: string;
-  color?: string;
-  showOutliers?: boolean;
-  tooltipFormatter?: (val: number) => string;
-  height?: number;
-  responsive?: boolean;
-}
-
-interface Props {
-  data: BoxPlotData;
-  config?: BoxPlotConfig;
-}
-
-const defaultConfig: BoxPlotConfig = {
-  colorUpper: '#2db85bff',
-  colorLower: '#b3761bff',
-  color: '#5f9ec4',
-  showOutliers: true,
-  tooltipFormatter: (v) => String(v),
-  height: 420,
-  responsive: true,
-};
-
-/** Série locale pour boxPlot */
-type BoxPlotSeries = ReadonlyArray<{
-  name: string;
-  data: ReadonlyArray<{ x: string | number; y: [number, number, number, number, number] }>;
-}>;
-
-const BoxPlotChart: React.FC<Props> = ({ data, config = defaultConfig }) => {
-  const cfg: BoxPlotConfig = { ...defaultConfig, ...config };
-
-  const seriesPoints = Array.isArray(data?.series) ? data.series : [];
-  const apexSeries: BoxPlotSeries = [
-    {
-      name: 'Distribution',
-      data: seriesPoints.map((p) => ({ x: p.x, y: p.y })),
-    },
-  ];
-  const options: ApexOptions = {
-    chart: {
-      foreColor: 'var(--color-text)',
-      type: 'boxPlot',
-      toolbar: { show: false },
-      height: cfg.height,
-    },
-    yaxis: {
-      tickAmount: 10,
-      labels: {
-        formatter: function (val: number) {
-          return val.toFixed(0);
-        },
-      },
-    },
-    plotOptions: {
-      boxPlot: {
-        colors: {
-          upper: cfg.colorUpper,
-          lower: cfg.colorLower,
-        },
-      },
-    },
-    stroke: { show: true, width: 1, colors: ['var(--color-secondary)'] },
-    markers: { size: 0 },
-    tooltip: {
-      shared: false,
-      y: {
-        formatter: (val: number | string | unknown) => {
-          if (typeof val === 'number') return cfg.tooltipFormatter!(val);
-          return String(val);
-        },
-      },
-    },
-    grid: { borderColor: '#e6e6e6' },
-    dataLabels: { enabled: false },
-    legend: { show: false },
-    responsive: cfg.responsive
-      ? [
-          // {
-          //   breakpoint: 768,
-          //   options: {
-          //     chart: { height: Math.max(220, Math.round((cfg.height ?? 380) * 0.6)) },
-          //   },
-          // },
-        ]
-      : undefined,
-  };
-
-  return (
-    <Chart
-      options={options}
-      series={apexSeries as unknown as ApexOptions['series']}
-      type='boxPlot'
-      height={cfg.height}
-    />
-  );
-};
-
-export default BoxPlotChart;
+import React from 'react';
+import Chart from 'react-apexcharts';
+import type { ApexOptions } from 'apexcharts';
+
+export interface BoxPoint {
+  x: string | number;
+  y: [number, number, number, number, number]; // [min, q1, median, q3, max]
+}
+
+export interface BoxPlotData {
+  series: BoxPoint[];
+}
+
+export interface BoxPlotConfig {
+  colorUpper?: string;
+  colorLower?: string;
+  color?: string;
+  showOutliers?: boolean;
+  tooltipFormatter?: (val: number) => string;
+  height?: number;
+  responsive?: boolean;
+}
+
+interface Props {
+  data: BoxPlotData;
+  config?: BoxPlotConfig;
+}
+
+const defaultConfig: BoxPlotConfig = {
+  colorUpper: '#2db85bff',
+  colorLower: '#b3761bff',
+  color: '#5f9ec4',
+  showOutliers: true,
+  tooltipFormatter: (v) => String(v),
+  height: 420,
+  responsive: true,
+};
+
+/** Série locale pour boxPlot */
+type BoxPlotSeries = ReadonlyArray<{
+  name: string;
+  data: ReadonlyArray<{ x: string | number; y: [number, number, number, number, number] }>;
+}>;
+
+const BoxPlotChart: React.FC<Props> = ({ data, config = defaultConfig }) => {
+  const cfg: BoxPlotConfig = { ...defaultConfig, ...config };
+
+  const seriesPoints = Array.isArray(data?.series) ? data.series : [];
+  const apexSeries: BoxPlotSeries = [
+    {
+      name: 'Distribution',
+      data: seriesPoints.map((p) => ({ x: p.x, y: p.y })),
+    },
+  ];
+  const options: ApexOptions = {
+    chart: {
+      foreColor: 'var(--color-text)',
+      type: 'boxPlot',
+      toolbar: { show: false },
+      height: cfg.height,
+    },
+    yaxis: {
+      tickAmount: 10,
+      labels: {
+        formatter: function (val: number) {
+          return val.toFixed(0);
+        },
+      },
+    },
+    plotOptions: {
+      boxPlot: {
+        colors: {
+          upper: cfg.colorUpper,
+          lower: cfg.colorLower,
+        },
+      },
+    },
+    stroke: { show: true, width: 1, colors: ['var(--color-secondary)'] },
+    markers: { size: 0 },
+    tooltip: {
+      shared: false,
+      y: {
+        formatter: (val: number | string | unknown) => {
+          if (typeof val === 'number') return cfg.tooltipFormatter!(val);
+          return String(val);
+        },
+      },
+    },
+    grid: { borderColor: '#e6e6e6' },
+    dataLabels: { enabled: false },
+    legend: { show: false },
+    responsive: cfg.responsive
+      ? [
+          // {
+          //   breakpoint: 768,
+          //   options: {
+          //     chart: { height: Math.max(220, Math.round((cfg.height ?? 380) * 0.6)) },
+          //   },
+          // },
+        ]
+      : undefined,
+  };
+
+  return (
+    <Chart
+      options={options}
+      series={apexSeries as unknown as ApexOptions['series']}
+      type='boxPlot'
+      height={cfg.height}
+    />
+  );
+};
+
+export default BoxPlotChart;

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

@@ -1,6 +1,7 @@
-import React from 'react';
+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 {
@@ -59,6 +60,9 @@ interface Props {
   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) ---------- */
@@ -140,7 +144,24 @@ const MixedChart: React.FC<Props> = ({
   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
@@ -480,9 +501,26 @@ const MixedChart: React.FC<Props> = ({
     chart: {
       foreColor: 'var(--color-text)',
       type: 'line',
-      toolbar: { show: false, offsetY: -20 },
+      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: false, type: 'x', autoScaleYaxis: true },
+      zoom: {
+        enabled: tooltipEnabled,
+        type: 'x',
+        autoScaleYaxis: true,
+      },
       animations: {
         enabled: true,
         animateGradually: { enabled: true, delay: 80 },
@@ -525,6 +563,7 @@ const MixedChart: React.FC<Props> = ({
     // 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,
@@ -613,12 +652,29 @@ const MixedChart: React.FC<Props> = ({
   };
 
   return (
-    <Chart
-      options={options}
-      series={series as unknown as ApexOptions['series']}
-      type='line'
-      height={height}
-    />
+    <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>
   );
 };
 

package/src/components/Charts/sankey-adaptation/sankey.tsx

@@ -1,70 +1,70 @@
-// MySankeyChart.tsx
-
-import React from 'react';
-import { ResponsiveSankey } from '@nivo/sankey';
-import type { SankeyDataProps } from '@nivo/sankey';
-// Définissez vos données avec le type approprié pour une meilleure intégrité
-const data: SankeyDataProps = {
-  nodes: [
-    { id: 'start', color: '#61cdbb' },
-    { id: 'process_a', color: '#97e6a6' },
-    { id: 'process_b', color: '#e8c1a0' },
-    { id: 'end_result', color: '#f1e15b' },
-  ],
-  links: [
-    { source: 'start', target: 'process_a', value: 100 },
-    { source: 'start', target: 'process_b', value: 50 },
-    { source: 'process_a', target: 'end_result', value: 75 },
-    { source: 'process_a', target: 'process_b', value: 25 },
-    { source: 'process_b', target: 'end_result', value: 75 },
-  ],
-};
-
-const MySankeyChart: React.FC = () => {
-  return (
-    <div style={{ height: '500px', width: '100%' }}>
-      <ResponsiveSankey
-        data={data}
-        margin={{ top: 10, right: 10, bottom: 10, left: 10 }}
-        align='justify'
-        colors={{ scheme: 'category10' }}
-        nodeOpacity={1}
-        nodeThickness={18}
-        nodeInnerPadding={8}
-        nodeSpacing={24}
-        linkOpacity={0.5}
-        nodeBorderWidth={0}
-        nodeBorderColor={{
-          from: 'color',
-          modifiers: [['darker', 0.8]],
-        }}
-        // Active l'affichage des étiquettes
-        enableLabels={true}
-        // Positionne les étiquettes à l'extérieur des nœuds
-        labelPosition='outside'
-        // Oriente les étiquettes horizontalement
-        labelOrientation='horizontal'
-        // Ajoute un espacement entre les nœuds et les étiquettes
-        labelPadding={16}
-        // Personnalise la couleur du texte des étiquettes
-        labelTextColor={{
-          from: 'color',
-          modifiers: [['darker', 1.5]],
-        }}
-        animate={true}
-        motionConfig='stiff'
-        // Personnalise les styles via le thème
-        theme={{
-          labels: {
-            text: {
-              fontSize: 14,
-              fontWeight: 'bold',
-            },
-          },
-        }}
-      />
-    </div>
-  );
-};
-
-export default MySankeyChart;
+// MySankeyChart.tsx
+
+import React from 'react';
+import { ResponsiveSankey } from '@nivo/sankey';
+import type { SankeyDataProps } from '@nivo/sankey';
+// Définissez vos données avec le type approprié pour une meilleure intégrité
+const data: SankeyDataProps = {
+  nodes: [
+    { id: 'start', color: '#61cdbb' },
+    { id: 'process_a', color: '#97e6a6' },
+    { id: 'process_b', color: '#e8c1a0' },
+    { id: 'end_result', color: '#f1e15b' },
+  ],
+  links: [
+    { source: 'start', target: 'process_a', value: 100 },
+    { source: 'start', target: 'process_b', value: 50 },
+    { source: 'process_a', target: 'end_result', value: 75 },
+    { source: 'process_a', target: 'process_b', value: 25 },
+    { source: 'process_b', target: 'end_result', value: 75 },
+  ],
+};
+
+const MySankeyChart: React.FC = () => {
+  return (
+    <div style={{ height: '500px', width: '100%' }}>
+      <ResponsiveSankey
+        data={data}
+        margin={{ top: 10, right: 10, bottom: 10, left: 10 }}
+        align='justify'
+        colors={{ scheme: 'category10' }}
+        nodeOpacity={1}
+        nodeThickness={18}
+        nodeInnerPadding={8}
+        nodeSpacing={24}
+        linkOpacity={0.5}
+        nodeBorderWidth={0}
+        nodeBorderColor={{
+          from: 'color',
+          modifiers: [['darker', 0.8]],
+        }}
+        // Active l'affichage des étiquettes
+        enableLabels={true}
+        // Positionne les étiquettes à l'extérieur des nœuds
+        labelPosition='outside'
+        // Oriente les étiquettes horizontalement
+        labelOrientation='horizontal'
+        // Ajoute un espacement entre les nœuds et les étiquettes
+        labelPadding={16}
+        // Personnalise la couleur du texte des étiquettes
+        labelTextColor={{
+          from: 'color',
+          modifiers: [['darker', 1.5]],
+        }}
+        animate={true}
+        motionConfig='stiff'
+        // Personnalise les styles via le thème
+        theme={{
+          labels: {
+            text: {
+              fontSize: 14,
+              fontWeight: 'bold',
+            },
+          },
+        }}
+      />
+    </div>
+  );
+};
+
+export default MySankeyChart;