@tsiky/components-r19 1.0.0

package/src/components/Charts/stacked-column/StackedColumn.tsx

@@ -0,0 +1,406 @@
+// src/components/stacked-column/StackedColumn.tsx
+import React, { useCallback, useMemo } from 'react';
+import Chart from 'react-apexcharts';
+import type { ApexOptions } from 'apexcharts';
+import sampleData from './content.json';
+/* -------------------- Types & Interfaces -------------------- */
+
+export interface TensionData {
+  labels: string[];
+  main: number[];
+  upper: number[];
+  lower: number[];
+  histogram?: number[]; // -> Réel (dark gray)
+  histogram_pred?: number[]; // -> Prediction 3h (blue)
+  histogram_inprogress?: number[]; // -> En cours (light gray)
+}
+
+export type DisplayConditionFn = (data: TensionData) => boolean;
+
+export interface RangeBandConfig {
+  id: string;
+  lowerKey: keyof TensionData;
+  upperKey: keyof TensionData;
+  visible?: boolean;
+  color?: string;
+  opacity?: number;
+}
+
+export interface LineConfig {
+  id: string;
+  key: keyof TensionData;
+  label?: string;
+  visible?: boolean;
+  color?: string;
+  width?: number;
+  dash?: number;
+}
+
+export interface BubbleConfig {
+  visible?: boolean;
+  values?: number[];
+  color?: string;
+  size?: number;
+}
+
+export interface TensionConfig {
+  rangeBands?: RangeBandConfig[];
+  lines?: LineConfig[];
+  showHistogram?: boolean;
+  histogramKey?: keyof TensionData;
+  histogramPredKey?: keyof TensionData;
+  histogramPendingKey?: keyof TensionData;
+  histogramColor?: string;
+  stackedHistogram?: boolean;
+  bubble?: BubbleConfig;
+  displayCondition?: DisplayConditionFn | null;
+  responsive?: boolean;
+}
+
+/* -------------------- Props -------------------- */
+
+interface Props {
+  data: TensionData;
+  config?: TensionConfig;
+  height?: number;
+}
+
+/* -------------------- Defaults -------------------- */
+
+const defaultConfig: TensionConfig = {
+  rangeBands: [
+    {
+      id: 'Ongoing',
+      lowerKey: 'lower',
+      upperKey: 'upper',
+      visible: true,
+      color: '#cbd7ea',
+      opacity: 0.22,
+    },
+  ],
+  lines: [
+    { id: 'Max', key: 'upper', label: 'Max', visible: true, color: '#082b4d', width: 1, dash: 0 },
+    {
+      id: 'Predictions',
+      key: 'main',
+      label: 'Predictions',
+      visible: true,
+      color: '#6fb0ff',
+      width: 1.5,
+      dash: 0,
+    },
+    { id: 'Min', key: 'lower', label: 'Min', visible: true, color: '#082b4d', width: 1, dash: 6 },
+  ],
+  showHistogram: true,
+  histogramKey: 'histogram',
+  histogramPredKey: 'histogram_pred',
+  histogramPendingKey: 'histogram_inprogress',
+  histogramColor: '#6f6f6f',
+  stackedHistogram: true,
+  bubble: { visible: true, values: sampleData.bulle, color: '#0b66ff', size: 6 },
+  displayCondition: null,
+  responsive: true,
+};
+
+/* -------------------- Helper types -------------------- */
+
+type ApexMixedSeriesItem = {
+  name: string;
+  type?: 'column' | 'line' | 'scatter' | 'rangeArea' | string;
+  data: Array<{ x: string; y: number | null | (number | null)[] }>;
+};
+
+/* -------------------- Component -------------------- */
+
+const Tension: React.FC<Props> = ({ data, config = defaultConfig, height = 350 }) => {
+  const cfg = useMemo(() => ({ ...defaultConfig, ...config }), [config]);
+
+  const buildSeriesAndStyles = useCallback((d: TensionData, c: TensionConfig) => {
+    const series: ApexMixedSeriesItem[] = [];
+    const strokeWidths: number[] = [];
+    const strokeDashArray: number[] = [];
+    const colors: string[] = [];
+    const fillTypes: ('solid' | 'gradient' | string)[] = [];
+    const fillOpacities: number[] = [];
+
+    if (c.showHistogram && c.histogramKey && c.stackedHistogram) {
+      const realArr = d[c.histogramKey] as number[] | undefined;
+      const predArr = c.histogramPredKey
+        ? (d[c.histogramPredKey] as number[] | undefined)
+        : undefined;
+      const pendingArr = c.histogramPendingKey
+        ? (d[c.histogramPendingKey] as number[] | undefined)
+        : undefined;
+
+      if (realArr || predArr || pendingArr) {
+        const predData = d.labels.map((_, i) => {
+          const r = realArr && Number.isFinite(realArr[i]) ? realArr[i] : null;
+          if (r !== null && r !== undefined && r > 0) return 0;
+          return predArr && Number.isFinite(predArr[i]) ? predArr[i] : 0;
+        });
+        const pendingData = d.labels.map((_, i) => {
+          const r = realArr && Number.isFinite(realArr[i]) ? realArr[i] : null;
+          if (r !== null && r !== undefined && r > 0) return 0;
+          return pendingArr && Number.isFinite(pendingArr[i]) ? pendingArr[i] : 0;
+        });
+        const realData = d.labels.map((_, i) => {
+          const r = realArr && Number.isFinite(realArr[i]) ? realArr[i] : 0;
+          return r;
+        });
+
+        series.push({
+          name: 'Prediction 3h',
+          type: 'column',
+          data: predData.map((v, i) => ({ x: d.labels[i], y: v })),
+        });
+        strokeWidths.push(0);
+        strokeDashArray.push(0);
+        colors.push('#6fb0ff');
+        fillTypes.push('solid');
+        fillOpacities.push(0.65);
+
+        series.push({
+          name: 'En cours',
+          type: 'column',
+          data: pendingData.map((v, i) => ({ x: d.labels[i], y: v })),
+        });
+        strokeWidths.push(0);
+        strokeDashArray.push(0);
+        colors.push('#d9d9d9');
+        fillTypes.push('solid');
+        fillOpacities.push(0.55);
+
+        series.push({
+          name: 'Réel',
+          type: 'column',
+          data: realData.map((v, i) => ({ x: d.labels[i], y: v })),
+        });
+        strokeWidths.push(0);
+        strokeDashArray.push(0);
+        colors.push(c.histogramColor ?? '#6f6f6f');
+        fillTypes.push('solid');
+        fillOpacities.push(0.9);
+      }
+    }
+
+    if (c.lines) {
+      c.lines.forEach((ln) => {
+        if (!ln.visible) return;
+        const arr = d[ln.key] as number[] | undefined;
+        if (!arr) return;
+        series.push({
+          name: ln.id,
+          type: 'line',
+          data: arr.map((v, i) => ({ x: d.labels[i], y: Number.isFinite(v) ? v : null })),
+        });
+        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);
+      });
+    }
+
+    if (c.bubble && c.bubble.visible && c.bubble.values && c.bubble.values.length > 0) {
+      const bvals = c.bubble.values;
+      series.push({
+        name: 'Correct Predictions',
+        type: 'scatter',
+        data: bvals.map((v, i) => ({ x: d.labels[i], y: typeof v === 'number' ? v : null })),
+      });
+      strokeWidths.push(0);
+      strokeDashArray.push(0);
+      colors.push(c.bubble.color ?? '#0b66ff');
+      fillTypes.push('solid');
+      fillOpacities.push(1);
+    }
+
+    if (c.rangeBands) {
+      c.rangeBands.forEach((rb) => {
+        if (!rb.visible) return;
+        const lowerArr = d[rb.lowerKey] as number[] | undefined;
+        const upperArr = d[rb.upperKey] as number[] | undefined;
+        if (!lowerArr || !upperArr) return;
+        series.push({
+          name: rb.id,
+          type: 'rangeArea',
+          data: upperArr.map((u, i) => ({
+            x: d.labels[i],
+            y: [lowerArr[i], u] as unknown as number | null,
+          })),
+        });
+        strokeWidths.push(0);
+        strokeDashArray.push(0);
+        colors.push(rb.color ?? '#b0c4de');
+        fillTypes.push('gradient');
+        fillOpacities.push(typeof rb.opacity === 'number' ? rb.opacity : 0.25);
+      });
+    }
+
+    return {
+      series,
+      strokeWidths,
+      strokeDashArray,
+      colors,
+      fillTypes,
+      fillOpacities,
+    };
+  }, []);
+
+  const buildMarkersDiscrete = useCallback(
+    (seriesArr: ApexMixedSeriesItem[], d: TensionData, c: TensionConfig) => {
+      const scatterIndex = seriesArr.findIndex((s) => s.type === 'scatter');
+      if (scatterIndex < 0) return [] as Array<Record<string, unknown>>;
+      const markers: Array<Record<string, unknown>> = [];
+      const bvals = c.bubble?.values ?? [];
+      const mainArr = d.main as number[] | undefined;
+      const size = c.bubble?.size ?? 6;
+
+      for (let i = 0; i < bvals.length; i++) {
+        const b = bvals[i];
+        const mainVal = mainArr && mainArr[i] !== undefined ? mainArr[i] : null;
+        let fillColor = c.bubble?.color ?? '#0b66ff';
+        if (mainVal !== null) {
+          if (b > mainVal) fillColor = '#ff4d4f';
+          else if (b < mainVal) fillColor = '#28a745';
+          else fillColor = '#0b66ff';
+        }
+        markers.push({
+          seriesIndex: scatterIndex,
+          dataPointIndex: i,
+          fillColor,
+          strokeColor: '#ffffff',
+          size,
+        });
+      }
+      return markers;
+    },
+    []
+  );
+
+  /* ---------- Hooks déclarés inconditionnellement ---------- */
+
+  const seriesResult = useMemo(() => {
+    if (cfg.displayCondition && !cfg.displayCondition(data)) {
+      return {
+        series: [] as ApexMixedSeriesItem[],
+        strokeWidths: [] as number[],
+        strokeDashArray: [] as number[],
+        colors: [] as string[],
+        fillTypes: [] as ('solid' | 'gradient' | string)[],
+        fillOpacities: [] as number[],
+      };
+    }
+    return buildSeriesAndStyles(data, cfg);
+  }, [data, cfg, buildSeriesAndStyles]);
+
+  const { series, strokeWidths, strokeDashArray, colors, fillTypes, fillOpacities } = seriesResult;
+
+  const markersDiscrete = useMemo(() => {
+    if (!series || series.length === 0) return [] as Array<Record<string, unknown>>;
+    return buildMarkersDiscrete(series as ApexMixedSeriesItem[], data, cfg);
+  }, [series, data, cfg, buildMarkersDiscrete]);
+
+  const options: ApexOptions = useMemo(() => {
+    if (!series || series.length === 0) {
+      return {
+        chart: { toolbar: { show: false }, animations: { enabled: false } },
+      } as ApexOptions;
+    }
+
+    const opacitiesArr = fillOpacities.length ? fillOpacities : [1];
+
+    return {
+      chart: {
+        type: 'line',
+        stacked: true,
+        toolbar: { show: false, offsetY: -20 },
+        height,
+        zoom: { enabled: true, type: 'x', autoScaleYaxis: true },
+        animations: { enabled: true },
+      },
+      plotOptions: {
+        bar: {
+          horizontal: false,
+          columnWidth: '48%',
+          borderRadius: 2,
+        },
+      },
+      stroke: {
+        curve: 'smooth',
+        width: strokeWidths,
+        dashArray: strokeDashArray,
+      },
+      colors,
+      fill: {
+        type: fillTypes,
+        opacity: fillOpacities,
+        gradient: {
+          type: 'vertical',
+          shadeIntensity: 0.4,
+          inverseColors: false,
+          opacityFrom: Math.max(...opacitiesArr),
+          opacityTo: Math.min(...opacitiesArr),
+          stops: [0, 100],
+        },
+      },
+      xaxis: {
+        categories: data.labels,
+        tickPlacement: 'on',
+      },
+      yaxis: { min: 0, tickAmount: 6 },
+      dataLabels: { enabled: false },
+      legend: { show: true, position: 'top' },
+      grid: { borderColor: '#e0e0e0' },
+      markers: {
+        shape: 'circle',
+        size: 0,
+        discrete: markersDiscrete as unknown as Array<Record<string, unknown>>,
+      },
+      tooltip: {
+        shared: true,
+        intersect: false,
+        y: {
+          formatter: (val: number | null | undefined) =>
+            typeof val === 'number' ? `${val}` : String(val),
+        },
+      },
+      responsive: cfg.responsive
+        ? [
+            {
+              breakpoint: 768,
+              options: {
+                chart: { height: Math.max(250, Math.round(height * 0.6)), width: 350 },
+                legend: { position: 'top' },
+              },
+            },
+          ]
+        : undefined,
+    } as ApexOptions;
+  }, [
+    series,
+    strokeWidths,
+    strokeDashArray,
+    colors,
+    fillTypes,
+    fillOpacities,
+    markersDiscrete,
+    cfg,
+    height,
+    data,
+  ]);
+
+  /* ---------- Retour conditionnel possible (après hooks) ---------- */
+  if (cfg.displayCondition && !cfg.displayCondition(data)) {
+    return <div style={{ padding: 12 }}>Chart hidden by displayCondition</div>;
+  }
+
+  // final render
+  // NOTE: apexcharts types mismatch possible — cast sécurisé ici.
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const apexSeries = series as unknown as any;
+
+  return <Chart options={options} series={apexSeries} type='line' height={height} width='100%' />;
+};
+
+export default Tension;

package/src/components/Charts/stacked-column/content.json

@@ -0,0 +1,37 @@
+{
+  "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, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+  "histogram_pred": [
+    0, 0, 0, 8, 7, 6, 5, 4, 3, 2, 2, 1, 18, 17, 16, 15, 14, 13, 12, 11, 10, 9, 8, 7
+  ],
+  "histogram_inprogress": [0, 0, 0, 2, 1, 1, 1, 1, 1, 1, 1, 0, 6, 5, 4, 3, 3, 2, 2, 1, 1, 1, 1, 1],
+  "bulle": [2, 1, 1, 0, 0, 1, 3, 6, 10, 13, 16, 22, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+}

package/src/components/Charts/stacked-column-one-hundred-percent/StackedColumnOneHundredPercent.stories.tsx

@@ -0,0 +1,43 @@
+// src/stories/SingleStacked100Chart.stories.tsx
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import SingleStacked100Chart, { type SingleStackedSeries } from './StackedColumnOneHundredPercent';
+
+// Import du JSON pour les données
+import data from './content.json';
+
+const meta: Meta<typeof SingleStacked100Chart> = {
+  title: 'Charts/StackedColumnOneHundredPercent',
+  component: SingleStacked100Chart,
+  tags: ['autodocs'],
+  argTypes: {
+    title: { control: 'text' },
+    height: { control: 'number' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof SingleStacked100Chart>;
+
+// Story utilisant les données JSON
+export const Default: Story = {
+  args: {
+    title: 'Répartition des Produits',
+    series: data as SingleStackedSeries[],
+    height: 360,
+  },
+};
+
+// Story avec plus de catégories (manuelle)
+export const ManyCategories: Story = {
+  args: {
+    title: 'Répartition Large',
+    series: [
+      { name: 'Catégorie 1', value: 10 },
+      { name: 'Catégorie 2', value: 20 },
+      { name: 'Catégorie 3', value: 15 },
+      { name: 'Catégorie 4', value: 25 },
+      { name: 'Catégorie 5', value: 30 },
+    ] as SingleStackedSeries[],
+    height: 380,
+  },
+};

package/src/components/Charts/stacked-column-one-hundred-percent/StackedColumnOneHundredPercent.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import Chart from 'react-apexcharts';
+import type { ApexOptions } from 'apexcharts';
+
+// Type pour chaque série
+export type SingleStackedSeries = {
+  name: string;
+  value: number;
+};
+
+// Props du composant
+export interface SingleStacked100ChartProps {
+  title?: string;
+  series: SingleStackedSeries[];
+  height?: number;
+}
+
+// Composant graphique
+const SingleStacked100Chart: React.FC<SingleStacked100ChartProps> = ({
+  title = 'Répartition',
+  series,
+  height = 360,
+}) => {
+  const apexSeries = series.map((s) => ({
+    name: s.name,
+    data: [s.value], // une seule valeur par série
+  }));
+
+  const options: ApexOptions = {
+    chart: {
+      type: 'bar',
+      stacked: true,
+      stackType: '100%',
+      toolbar: { show: false },
+    },
+    plotOptions: {
+      bar: {
+        horizontal: false,
+        columnWidth: '50%',
+      },
+    },
+    xaxis: {
+      categories: [title],
+    },
+    yaxis: {
+      max: 100,
+      tickAmount: 1,
+      labels: {
+        formatter: (val) => `${val}%`,
+      },
+    },
+    dataLabels: {
+      enabled: false,
+    },
+    legend: {
+      show: false,
+      position: 'bottom',
+    },
+    colors: ['#e0f3f8', '#abd9e9', '#74add1', '#4575b4', '#313695'],
+  };
+
+  return <Chart options={options} series={apexSeries} type='bar' height={height} />;
+};
+
+import data from './content.json';
+
+const PageColonne: React.FC = () => {
+  return (
+    <div>
+      <SingleStacked100Chart title='Produits' series={data as SingleStackedSeries[]} height={380} />
+    </div>
+  );
+};
+
+export default PageColonne;

package/src/components/Charts/stacked-column-one-hundred-percent/content.json

@@ -0,0 +1,6 @@
+[
+  { "name": "Produit A", "value": 40 },
+  { "name": "Produit B", "value": 25 },
+  { "name": "Produit C", "value": 20 },
+  { "name": "Produit D", "value": 15 }
+]

package/src/components/CircularProgress/CircularProgress.css

@@ -0,0 +1,79 @@
+.circular-progress-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.circular-progress {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: circular-progress-fade-in 0.4s ease-out;
+}
+
+.circular-progress svg {
+  transform: rotate(-90deg);
+}
+
+.circular-progress-bg {
+  opacity: 0.3;
+}
+
+.circular-progress-bar {
+  transition: stroke-dashoffset 0.6s ease;
+}
+
+.circular-progress-content {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.2em;
+}
+
+.circular-progress-text-top {
+  font-size: var(--h3, 1.5rem); /* ~24px */
+  font-weight: var(--font-medium, 500);
+  text-align: center;
+  line-height: 1.2;
+  max-width: 80%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.circular-progress-text-bottom {
+  font-size: var(--text-paragraph, 1rem); /* 16px */
+  font-weight: var(--font-medium, 500);
+  text-align: center;
+  line-height: 1.2;
+  max-width: 80%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.circular-progress-label {
+  margin-top: 0.75em;
+  font-size: var(--text-paragraph, 1rem); /* 16px */
+  font-weight: var(--font-medium, 500);
+  text-align: center;
+  max-width: 100%;
+}
+
+/* Animation pour le chargement */
+@keyframes circular-progress-fade-in {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}