@tsiky/components-r19 1.3.0 → 1.3.1

package/src/components/Charts/bar-chart/BarChart.stories.tsx

@@ -1,50 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import HorizontalBarChart, { type HorizontalBarData, type HorizontalBarConfig } from './BarChart';
-import demoContent from './content.json';
-
-const demoData: HorizontalBarData = {
-  labels: demoContent.labels,
-  values: demoContent.values,
-};
-
-const defaultCfg: HorizontalBarConfig = {
-  color: '#5f9ec4',
-  sort: 'desc',
-  height: 520,
-  showGrid: true,
-  showLegend: false,
-};
-
-const meta: Meta<typeof HorizontalBarChart> = {
-  title: 'Charts/HorizontalBarChart',
-  component: HorizontalBarChart,
-  tags: ['autodocs'],
-  argTypes: {
-    data: { control: 'object' },
-    config: { control: 'object' },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof HorizontalBarChart>;
-
-export const Default: Story = {
-  args: {
-    data: demoData,
-    config: defaultCfg,
-  },
-};
-
-export const NoGrid: Story = {
-  args: {
-    data: demoData,
-    config: { ...defaultCfg, showGrid: false, color: '#7cb342' },
-  },
-};
-
-export const Small: Story = {
-  args: {
-    data: { labels: demoData.labels.slice(0, 6), values: demoData.values.slice(0, 6) },
-    config: { ...defaultCfg, height: 360, color: '#ff7043' },
-  },
-};

package/src/components/Charts/bar-chart/BarChart.tsx

@@ -1,171 +0,0 @@
-import React from 'react';
-import Chart from 'react-apexcharts';
-import type { ApexOptions } from 'apexcharts';
-import { Move } from 'lucide-react';
-
-export interface HorizontalBarData {
-  labels: string[];
-  values: number[];
-}
-
-export interface HorizontalBarConfig {
-  color?: string;
-  sort?: 'desc' | 'asc' | null;
-  height?: number;
-  showGrid?: boolean;
-  showLegend?: boolean;
-}
-
-interface Props {
-  data: HorizontalBarData;
-  config?: HorizontalBarConfig;
-  draggable?: boolean;
-}
-
-/** Default (local) config */
-const defaultConfig: HorizontalBarConfig = {
-  color: '#4f9db5',
-  sort: 'desc',
-  height: 520,
-  showGrid: true,
-  showLegend: false,
-};
-
-/** Série locale (évite d'importer ApexAxisChartSeries) */
-type HBarSeries = ReadonlyArray<{
-  name: string;
-  data: ReadonlyArray<number>;
-}>;
-
-const HorizontalBarChart: React.FC<Props> = ({
-  data,
-  config = defaultConfig,
-  draggable = false,
-}) => {
-  const cfg: HorizontalBarConfig = { ...defaultConfig, ...config };
-
-  const labels = data.labels ?? [];
-  const values = data.values ?? [];
-
-  // normalize lengths
-  const len = Math.min(labels.length, values.length);
-  const pairs: { label: string; value: number }[] = [];
-  for (let i = 0; i < len; i++) pairs.push({ label: labels[i], value: values[i] });
-
-  // optional sorting
-  if (cfg.sort === 'desc') pairs.sort((a, b) => b.value - a.value);
-  else if (cfg.sort === 'asc') pairs.sort((a, b) => a.value - b.value);
-
-  const labelsSorted = pairs.map((p) => p.label);
-  const valuesSorted = pairs.map((p) => p.value);
-
-  const series: HBarSeries = [
-    {
-      name: 'Valeur',
-      data: valuesSorted,
-    },
-  ];
-
-  const options: ApexOptions = {
-    chart: {
-      foreColor: 'var(--color-text)',
-      type: 'bar',
-      toolbar: { show: false },
-      height: cfg.height,
-    },
-    plotOptions: {
-      bar: {
-        horizontal: true,
-        barHeight: '60%',
-        distributed: false,
-        borderRadius: 6,
-        borderRadiusApplication: 'end',
-      },
-    },
-    dataLabels: {
-      enabled: false,
-      formatter: (val: number) => String(val),
-      style: { fontSize: '12px' },
-      offsetX: 0,
-    },
-    yaxis: {
-      labels: { style: { fontSize: '12px' } },
-    },
-    grid: {
-      show: !!cfg.showGrid,
-      borderColor: '#e6e6e6',
-    },
-    tooltip: {
-      shared: false,
-      y: { formatter: (val: number) => String(val) },
-    },
-    legend: { show: !!cfg.showLegend },
-    colors: [cfg.color],
-    xaxis: {
-      min: 0,
-      tickAmount: 5,
-      categories: labelsSorted,
-      labels: { formatter: (v: string | number) => String(v) },
-    },
-    responsive: [
-      // {
-      //   breakpoint: 1024,
-      //   options: {
-      //     plotOptions: { bar: { barHeight: '52%' } },
-      //     chart: { height: Math.max(300, Math.round((cfg.height ?? 520) * 0.75)), width: 520 },
-      //   },
-      // },
-      // {
-      //   breakpoint: 768,
-      //   options: {
-      //     plotOptions: { bar: { barHeight: '48%' } },
-      //     chart: { height: Math.max(260, Math.round((cfg.height ?? 520) * 0.6)), width: 360 },
-      //   },
-      // },
-    ],
-  };
-
-  return (
-    <div
-      style={{
-        position: 'relative',
-        height: cfg.height,
-        width: '100%',
-        overflow: 'hidden',
-      }}
-    >
-      {/* Chart affiché normalement */}
-      <div style={{ opacity: draggable ? 0 : 1, transition: 'opacity 0.15s ease-in-out' }}>
-        <Chart
-          options={options}
-          series={series as unknown as ApexOptions['series']}
-          type='bar'
-          height={cfg.height}
-          width='100%'
-        />
-      </div>
-
-      {/* Overlay Move */}
-      {draggable && (
-        <div
-          style={{
-            position: 'absolute',
-            inset: 0,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            background: 'rgba(255,255,255,0.5)',
-            borderRadius: 12,
-            backdropFilter: 'blur(3px)',
-            pointerEvents: 'none',
-            transition: 'opacity 0.15s ease-in-out',
-          }}
-        >
-          <Move size={36} strokeWidth={1.5} style={{ opacity: 0.85 }} />
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default HorizontalBarChart;

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

@@ -1,15 +0,0 @@
-{
-  "labels": [
-    "URGENCES ZSTCD",
-    "UNITE DE MEDECINE AIGUE GERIATRIQUE HC",
-    "MALADIES APPAREIL DIGESTIF ET NUTRITION HC",
-    "CARDIOLOGIE HC",
-    "NEUROLOGIE VASCULAIRE HC",
-    "CHIRURGIE ORTHOPEDIQUE ET TRAUMATOLOGIE B HC",
-    "CHIRURGIE ORTHOPEDIQUE ET TRAUMATOLOGIE A HC",
-    "NEUROLOGIE AIGUE HORS VASCULAIRE HC",
-    "UNITE DE SOINS ANXIETE DEPRESSION 5A",
-    "UNITE DE MALADIES INFECTIEUSES ET TROPICALES HC"
-  ],
-  "values": [8800, 1200, 1100, 1050, 800, 550, 520, 420, 320, 150]
-}

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

@@ -1,63 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import BoxPlotChart, { type BoxPlotData, type BoxPlotConfig } from './BoxPlotChart';
-import demoContent from './content.json';
-import { computeBoxFromArray } from './boxUtils';
-
-const series = (demoContent.rawByDay as { label: string; values: number[] }[]).map((d) => ({
-  x: d.label,
-  y: computeBoxFromArray(d.values),
-}));
-
-const chartData: BoxPlotData = { series };
-
-const defaultCfg: BoxPlotConfig = {
-  colorUpper: '#2d3bb8ff',
-  colorLower: '#b3761bff',
-  color: '#5f9ec4',
-  showOutliers: true,
-  tooltipFormatter: (v) => String(v),
-  height: 480,
-  responsive: true,
-};
-
-const meta: Meta<typeof BoxPlotChart> = {
-  title: 'Charts/BoxPlotChart',
-  component: BoxPlotChart,
-  tags: ['autodocs'],
-  parameters: { layout: 'padded' },
-  argTypes: {
-    config: { control: 'object' },
-    data: { control: 'object' },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof BoxPlotChart>;
-
-export const FromRawData: Story = {
-  args: {
-    data: chartData,
-    config: {
-      ...defaultCfg,
-      colorUpper: '#35bee0ff',
-      colorLower: '#209bb9ff',
-      height: 480,
-      showOutliers: true,
-    },
-  },
-};
-
-export const WithoutOutliers: Story = {
-  args: { data: chartData, config: { ...defaultCfg, showOutliers: false } },
-};
-
-export const SmallHeight: Story = {
-  args: { data: chartData, config: { ...defaultCfg, height: 320 } },
-};
-
-export const Playground: Story = {
-  args: { data: chartData, config: defaultCfg },
-  argTypes: {
-    config: { control: 'object' },
-  },
-};

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

@@ -1,114 +0,0 @@
-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/boxplot-chart/boxUtils.ts

@@ -1,22 +0,0 @@
-export function quantile(sorted: number[], q: number): number {
-  if (!sorted.length) return 0;
-  const pos = (sorted.length - 1) * q;
-  const base = Math.floor(pos);
-  const rest = pos - base;
-  if (sorted[base + 1] !== undefined) {
-    return sorted[base] + rest * (sorted[base + 1] - sorted[base]);
-  }
-  return sorted[base];
-}
-
-/** Retourne [min, q1, median, q3, max] */
-export function computeBoxFromArray(values: number[]): [number, number, number, number, number] {
-  if (!values || !values.length) return [0, 0, 0, 0, 0];
-  const sorted = [...values].sort((a, b) => a - b);
-  const min = sorted[0];
-  const max = sorted[sorted.length - 1];
-  const q1 = quantile(sorted, 0.25);
-  const median = quantile(sorted, 0.5);
-  const q3 = quantile(sorted, 0.75);
-  return [min, q1, median, q3, max];
-}

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

@@ -1,11 +0,0 @@
-{
-  "rawByDay": [
-    { "label": "Lundi", "values": [1, 2, 2, 3, 3, 4, 4, 4, 5, 5, 6, 8] },
-    { "label": "Mardi", "values": [0, 2, 3, 3, 3, 4, 4, 4, 5, 5, 6, 8] },
-    { "label": "Mercredi", "values": [0, 1, 3, 3, 4, 4, 4, 5, 5, 6, 10] },
-    { "label": "Jeudi", "values": [1, 1, 2, 3, 4, 4, 5, 5, 5, 6, 8] },
-    { "label": "Vendredi", "values": [0, 2, 2, 3, 3, 4, 4, 5, 6, 6, 9] },
-    { "label": "Samedi", "values": [1, 2, 2, 2, 3, 3, 4, 4, 4, 7, 8] },
-    { "label": "Dimanche", "values": [0, 1, 1, 2, 2, 2, 3, 3, 3, 5, 7] }
-  ]
-}

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

@@ -1,83 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import MixedChart, { type BandChartData, type BandChartConfig } from './MixedChart';
-import demoContent from './content.json';
-
-const demoData: BandChartData = {
-  labels: demoContent.labels,
-  main: demoContent.main,
-  upper: demoContent.upper,
-  lower: demoContent.lower,
-  histogram: demoContent.histogram,
-};
-
-const demoConfig: BandChartConfig = {
-  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 },
-    {
-      id: 'Predictions',
-      key: 'main',
-      label: 'Predictions',
-      visible: true,
-      color: '#6fb0ff',
-      width: 1.5,
-    },
-    { id: 'Min', key: 'lower', label: 'Min', visible: true, color: '#082b4d', width: 1, dash: 6 },
-  ],
-  showHistogram: true,
-  histogramKey: 'histogram',
-  histogramColor: '#6f6f6f',
-  bubble: { visible: true, values: demoContent.histogram, size: 4 },
-  responsive: true,
-};
-
-const meta: Meta<typeof MixedChart> = {
-  title: 'Charts/MixedChart',
-  component: MixedChart,
-  tags: ['autodocs'],
-  argTypes: {
-    height: { control: 'number' },
-    config: { control: 'object' },
-    data: { control: 'object' },
-  },
-  parameters: { layout: 'padded' },
-};
-
-export default meta;
-type Story = StoryObj<typeof MixedChart>;
-
-export const Playground: Story = {
-  args: {
-    data: demoData,
-    config: demoConfig,
-    height: 360,
-  },
-};
-
-export const Small: Story = {
-  args: { data: demoData, config: { ...demoConfig, showHistogram: false }, height: 260 },
-};
-
-export const NoBands: Story = {
-  args: { data: demoData, config: { ...demoConfig, rangeBands: undefined }, height: 360 },
-};
-
-export const BandOnly: Story = {
-  args: {
-    data: demoData,
-    config: {
-      ...demoConfig,
-      lines: [{ id: 'upper', key: 'upper', visible: false, color: '#082b4d', width: 1 }],
-    },
-    height: 360,
-  },
-};