@tsiky/components-r19 1.3.0 → 1.3.1

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

@@ -1,406 +0,0 @@
-// 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

@@ -1,37 +0,0 @@
-{
-  "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

@@ -1,43 +0,0 @@
-// 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

@@ -1,75 +0,0 @@
-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

@@ -1,6 +0,0 @@
-[
-  { "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

@@ -1,79 +0,0 @@
-.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);
-  }
-}