@tsiky/components-r19 1.3.0 → 1.3.2

package/src/components/Charts/area-chart-admission/AreaChartAdmission.stories.tsx

@@ -1,65 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import Area from './AreaChartAdmission';
-import rawAdmissionData from './AreaChartAdmission.json';
-
-// Typage du JSON
-type AdmissionData = {
-  categories: string[];
-  series: { name: string; data: number[] }[];
-};
-
-const admissionData = rawAdmissionData as AdmissionData;
-
-const meta: Meta<typeof Area> = {
-  title: 'Charts/AreaChartAdmission',
-  component: Area,
-  args: {
-    categories: admissionData.categories,
-    series: admissionData.series,
-    height: 360,
-    title: 'Admissions',
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Area>;
-
-//  Version par défaut (grand écran / desktop)
-export const Desktop: Story = {
-  parameters: {
-    viewport: {
-      defaultViewport: 'responsive', // Storybook ajuste automatiquement
-    },
-  },
-};
-
-//  Version tablette
-export const Tablet: Story = {
-  args: { height: 300 },
-  parameters: {
-    viewport: {
-      defaultViewport: 'ipad',
-    },
-  },
-};
-
-//  Version mobile portrait
-export const MobilePortrait: Story = {
-  args: { height: 250 },
-  parameters: {
-    viewport: {
-      defaultViewport: 'iphone6',
-    },
-  },
-};
-
-//  Version mobile paysage
-export const MobileLandscape: Story = {
-  args: { height: 200 },
-  parameters: {
-    viewport: {
-      defaultViewport: 'iphone6p', // iPhone 6 Plus (paysage)
-    },
-  },
-};

package/src/components/Charts/area-chart-admission/AreaChartAdmission.tsx

@@ -1,129 +0,0 @@
-import React from 'react';
-import Chart from 'react-apexcharts';
-import type { ApexOptions } from 'apexcharts';
-import { Move } from 'lucide-react';
-
-export type SeriesItem = { name: string; data: number[] };
-
-interface ChartProps {
-  categories: string[];
-  series: SeriesItem[];
-  height?: number;
-  title?: string;
-  draggable?: boolean;
-}
-
-const defaultColors = ['#e24b33', '#e2b23a', '#6feff0', '#2f5be8'];
-
-const Area: React.FC<ChartProps> = ({
-  categories,
-  series,
-  height = 350,
-  title = 'Admissions',
-  draggable = false,
-}) => {
-  const maxStack = Math.max(
-    ...categories.map((_, i) => series.reduce((s, ser) => s + (ser.data[i] ?? 0), 0))
-  );
-  const yMax = Math.max(100, Math.ceil(maxStack / 50) * 50);
-
-  const apexOptions: ApexOptions = {
-    chart: {
-      foreColor: 'var(--color-text)',
-      type: 'area',
-      stacked: true,
-      stackType: 'normal',
-      toolbar: { show: false },
-      zoom: { enabled: false },
-      animations: { enabled: true },
-      fontFamily: "Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial",
-    },
-    title: {
-      text: title,
-      align: 'center',
-      style: { fontSize: '36px', fontWeight: 700, color: '#555' },
-    },
-    colors: defaultColors,
-    dataLabels: { enabled: false },
-    stroke: { curve: 'smooth', width: 1.5 },
-    fill: { type: 'solid', opacity: 0.95 },
-    markers: { size: 0 },
-    legend: {
-      show: true,
-      position: 'top',
-      horizontalAlign: 'center',
-      itemMargin: { horizontal: 8, vertical: 0 },
-    },
-    xaxis: {
-      categories,
-      labels: { rotate: -45, rotateAlways: true, style: { fontSize: '12px' } },
-      tickPlacement: 'on',
-    },
-    yaxis: {
-      min: 0,
-      max: yMax,
-      tickAmount: 7,
-      labels: { formatter: (val) => String(Math.round(Number(val))) },
-    },
-    grid: { borderColor: '#e9e9e9', strokeDashArray: 0 },
-    tooltip: {
-      shared: true,
-      intersect: false,
-      y: { formatter: (val: number) => String(val) },
-    },
-    responsive: [
-      {
-        breakpoint: 768,
-        options: {
-          chart: { height: Math.max(240, Math.round(height * 0.7)) },
-          legend: { position: 'top' },
-          xaxis: { labels: { rotate: -45 } },
-        },
-      },
-    ],
-  };
-
-  const apexSeries = series.map((s) => ({
-    name: s.name,
-    type: 'area' as const,
-    data: s.data,
-  }));
-
-  return (
-    <div
-      style={{
-        position: 'relative',
-        height,
-        width: '100%',
-        overflow: 'hidden',
-      }}
-    >
-      {/* Chart visible ou masqué */}
-      <div style={{ opacity: draggable ? 0 : 1, transition: 'opacity 0.2s ease-in-out' }}>
-        <Chart options={apexOptions} series={apexSeries} type='area' height={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.6)',
-            borderRadius: 12,
-            backdropFilter: 'blur(3px)',
-            pointerEvents: 'none',
-            transition: 'opacity 0.2s ease-in-out',
-          }}
-        >
-          <Move size={38} strokeWidth={1.5} style={{ opacity: 0.85 }} />
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default Area;

package/src/components/Charts/area-chart-admission/content.json

@@ -1,48 +0,0 @@
-{
-  "categories": [
-    "feb. 21",
-    "mr. 2",
-    "mr. 11",
-    "mr. 20",
-    "mr. 29",
-    "apr. 7",
-    "apr. 16",
-    "apr. 25",
-    "mai. 4",
-    "mai. 13",
-    "mai. 22",
-    "mai. 31",
-    "jun. 9",
-    "jun. 18",
-    "jun. 27",
-    "jul. 6",
-    "jul. 15",
-    "jul. 24",
-    "aug. 2",
-    "aug. 11"
-  ],
-  "series": [
-    {
-      "name": "0h-6h",
-      "data": [12, 14, 13, 11, 10, 12, 14, 16, 15, 17, 16, 15, 17, 18, 20, 22, 20, 19, 21, 23]
-    },
-    {
-      "name": "6h-12h",
-      "data": [60, 58, 55, 52, 50, 56, 58, 60, 62, 63, 64, 62, 66, 68, 67, 64, 66, 65, 63, 61]
-    },
-    {
-      "name": "12h-18h",
-      "data": [
-        120, 135, 130, 125, 131, 140, 135, 138, 132, 130, 133, 132, 135, 140, 142, 130, 135, 140,
-        138, 144
-      ]
-    },
-    {
-      "name": "18h-0h",
-      "data": [
-        110, 120, 118, 115, 120, 125, 121, 128, 135, 140, 138, 140, 145, 150, 155, 152, 148, 142,
-        138, 136
-      ]
-    }
-  ]
-}

package/src/components/Charts/area-chart-hospitalisation/AreaChartHospitalisation.stories.tsx

@@ -1,141 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import HospitalisationPage, {
-  HospitalisationChart,
-  type HospitalisationChartProps,
-} from './AreaChartHospitalisation';
-
-// importer les données fournies (content.json placé à côté de ce fichier)
-import content from './AreaChartHospitalisation.json';
-
-/**
- * Meta (CSF) pour Storybook
- */
-const meta: Meta<typeof HospitalisationChart> = {
-  title: 'Charts/AreaChartHospitalisation',
-  component: HospitalisationChart,
-  tags: ['autodocs'],
-  argTypes: {
-    height: {
-      control: { type: 'number', min: 100, max: 800, step: 10 },
-    },
-    // Les props labels/series sont complexes : on évite le contrôle direct
-    labels: { control: false },
-    series: { control: false },
-  },
-  parameters: {
-    // layout responsive par défaut (le composant gère ses breakpoints)
-    layout: 'centered',
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof HospitalisationChart>;
-
-/**
- * Données issues de content.json
- * - content.labels : string[]
- * - content.series : { name: string; data: number[] }[]
- */
-const contentData = content as { labels: string[]; series: HospitalisationChartProps['series'] };
-
-const sampleLabels: string[] = contentData.labels;
-const sampleSeries: HospitalisationChartProps['series'] = contentData.series;
-
-/**
- * Story principale : le chart seul (avec tes données réelles)
- */
-export const Default: Story = {
-  args: {
-    labels: sampleLabels,
-    series: sampleSeries,
-    height: 440,
-  } as HospitalisationChartProps,
-};
-
-/**
- * Variantes pour vérifier l'adaptation aux différentes tailles d'écran.
- * Ces stories enveloppent le composant dans un conteneur de largeur fixe
- * pour simuler Desktop / Tablet / Mobile.
- */
-
-export const Desktop: Story = {
-  render: (args) => (
-    <div style={{ width: 1200, margin: '0 auto', padding: 24, background: '#f3f4f6' }}>
-      <div style={{ maxWidth: '100%', margin: '0 auto' }}>
-        <HospitalisationChart {...(args as HospitalisationChartProps)} />
-      </div>
-    </div>
-  ),
-  args: {
-    labels: sampleLabels,
-    series: sampleSeries,
-    height: 480,
-  } as HospitalisationChartProps,
-  parameters: {
-    docs: {
-      description: { story: 'Vue Desktop (simulée, largeur 1200px).' },
-    },
-  },
-};
-
-export const Tablet: Story = {
-  render: (args) => (
-    <div style={{ width: 768, margin: '0 auto', padding: 16, background: '#f3f4f6' }}>
-      <div style={{ maxWidth: '100%', margin: '0 auto' }}>
-        <HospitalisationChart {...(args as HospitalisationChartProps)} />
-      </div>
-    </div>
-  ),
-  args: {
-    labels: sampleLabels,
-    series: sampleSeries,
-    height: 420,
-  } as HospitalisationChartProps,
-  parameters: {
-    docs: {
-      description: { story: 'Vue Tablet (simulée, largeur 768px).' },
-    },
-  },
-};
-
-export const Mobile: Story = {
-  render: (args) => (
-    <div style={{ width: 375, margin: '0 auto', padding: 12, background: '#f3f4f6' }}>
-      <div style={{ maxWidth: '100%', margin: '0 auto' }}>
-        <HospitalisationChart {...(args as HospitalisationChartProps)} />
-      </div>
-    </div>
-  ),
-  args: {
-    labels: sampleLabels,
-    series: sampleSeries,
-    height: 320,
-  } as HospitalisationChartProps,
-  parameters: {
-    docs: {
-      description: { story: 'Vue Mobile (simulée, largeur 375px).' },
-    },
-  },
-};
-
-/**
- * Story : aperçu de la page complète (dropdown + carte)
- * On continue d'utiliser la page complète qui tente de charger le JSON depuis /hospitalisationData.json
- */
-export const PageView = {
-  render: () => (
-    <div style={{ background: '#f3f4f6', padding: 24 }}>
-      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
-        <HospitalisationPage />
-      </div>
-    </div>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Rendu complet de la page `HospitalisationPage` (titre centré, dropdown, carte).',
-      },
-    },
-  },
-};

package/src/components/Charts/area-chart-hospitalisation/AreaChartHospitalisation.tsx

@@ -1,262 +0,0 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import Chart from 'react-apexcharts';
-import type { ApexOptions } from 'apexcharts';
-
-export type SeriesItem = {
-  name: string;
-  data: number[];
-};
-
-export interface HospitalisationChartProps {
-  labels: string[];
-  series: SeriesItem[];
-  height?: number;
-}
-
-const defaultColors = ['#e64a19', '#f0a500', '#66e0f0', '#1e63ff']; // 0-6 / 6-12 / 12-18 / 18-0
-
-export const HospitalisationChart: React.FC<HospitalisationChartProps> = ({
-  labels,
-  series,
-  height = 420,
-}) => {
-  const options: ApexOptions = {
-    chart: {
-      type: 'area',
-      stacked: true,
-      toolbar: { show: false },
-      zoom: { enabled: false },
-      animations: { enabled: true },
-    },
-    stroke: {
-      curve: 'smooth',
-      width: 1.6,
-    },
-    fill: {
-      type: 'solid',
-    },
-    colors: defaultColors,
-    legend: {
-      show: true,
-      position: 'top',
-      horizontalAlign: 'center',
-      offsetY: 0,
-      labels: {
-        useSeriesColors: false,
-      },
-      markers: {
-        /*width: 16,
-        height: 12,
-        radius: 3,*/
-      },
-    },
-    xaxis: {
-      categories: labels,
-      labels: {
-        rotate: -45,
-        rotateAlways: true,
-        trim: true,
-        style: {
-          fontSize: '11px',
-        },
-      },
-      tickPlacement: 'on',
-      tooltip: { enabled: false },
-    },
-    yaxis: {
-      min: 0,
-      tickAmount: 6,
-      labels: {
-        // Apex y-axis formatter signature: (val: number) => string
-        formatter: (val: number) => `${Math.round(Number(val))}`,
-      },
-    },
-    grid: {
-      borderColor: '#e9e9e9',
-      row: {
-        colors: undefined,
-      },
-    },
-    dataLabels: { enabled: false },
-    markers: {
-      size: 0,
-    },
-    tooltip: {
-      shared: true,
-      intersect: false,
-    },
-    responsive: [
-      {
-        breakpoint: 1024,
-        options: {
-          chart: { height: Math.max(300, Math.round(height * 0.75)) },
-          xaxis: { labels: { rotate: -45 } },
-        },
-      },
-      {
-        breakpoint: 480,
-        options: {
-          chart: { height: 300 },
-          legend: { position: 'top' },
-          xaxis: { labels: { rotate: -45, style: { fontSize: '10px' } } },
-        },
-      },
-    ],
-  };
-
-  return <Chart options={options} series={series} type='area' height={height} width='100%' />;
-};
-
-/* ---------- Utils & Page ---------- */
-
-function generateWeeklyLabels(start: string, end: string) {
-  const s = new Date(start);
-  const e = new Date(end);
-  const labels: string[] = [];
-  for (let d = new Date(s); d <= e; d.setDate(d.getDate() + 7)) {
-    labels.push(d.toLocaleDateString('fr-FR', { month: 'short', day: 'numeric' }).replace('.', ''));
-  }
-  return labels;
-}
-
-function randomSeries(length: number, min: number, max: number) {
-  return Array.from({ length }, () => Math.max(0, Math.round(min + Math.random() * (max - min))));
-}
-
-/** Type guard pour valider le JSON sans utiliser `any` */
-const isSeriesItem = (s: unknown): s is SeriesItem => {
-  if (typeof s !== 'object' || s === null) return false;
-  const rec = s as Record<string, unknown>;
-  return (
-    typeof rec.name === 'string' &&
-    Array.isArray(rec.data) &&
-    rec.data.every((n: unknown) => typeof n === 'number')
-  );
-};
-
-const isHospitalisationJson = (obj: unknown): obj is { labels: string[]; series: SeriesItem[] } => {
-  if (typeof obj !== 'object' || obj === null) return false;
-  const rec = obj as Record<string, unknown>;
-  return (
-    Array.isArray(rec.labels) &&
-    rec.labels.every((l: unknown) => typeof l === 'string') &&
-    Array.isArray(rec.series) &&
-    rec.series.every((s: unknown) => isSeriesItem(s))
-  );
-};
-
-export const HospitalisationPage: React.FC = () => {
-  const [zone, setZone] = useState<string>('inconue');
-  const [dataFromJson, setDataFromJson] = useState<{
-    labels: string[];
-    series: SeriesItem[];
-  } | null>(null);
-
-  // fallback labels (same range que ton exemple)
-  const fallbackLabels = useMemo(() => generateWeeklyLabels('2024-02-21', '2024-08-11'), []);
-  const fallbackSeries = useMemo(() => {
-    const n = fallbackLabels.length;
-    return [
-      { name: '0h-6h', data: randomSeries(n, 4, 14) },
-      { name: '6h-12h', data: randomSeries(n, 6, 14) },
-      { name: '12h-18h', data: randomSeries(n, 8, 26) },
-      { name: '18h-0h', data: randomSeries(n, 12, 36) },
-    ];
-  }, [fallbackLabels]);
-
-  // Essayer de charger /hospitalisationData.json depuis le dossier public
-  useEffect(() => {
-    let mounted = true;
-    fetch('/hospitalisationData.json')
-      .then((res) => {
-        if (!res.ok) throw new Error('not found');
-        return res.json();
-      })
-      .then((json) => {
-        // validation minimale sans any
-        if (mounted && isHospitalisationJson(json)) {
-          setDataFromJson({ labels: json.labels, series: json.series });
-        } else {
-          setDataFromJson(null);
-        }
-      })
-      .catch(() => {
-        // fichier non trouvé ou invalide -> on reste sur les données de secours
-        setDataFromJson(null);
-      });
-
-    return () => {
-      mounted = false;
-    };
-  }, []);
-
-  const labels = dataFromJson ? dataFromJson.labels : fallbackLabels;
-  const series = dataFromJson ? dataFromJson.series : fallbackSeries;
-
-  return (
-    <div style={{ maxWidth: 1200, margin: '0 auto', padding: '24px 12px' }}>
-      <h1
-        style={{
-          textAlign: 'center',
-          fontSize: 56,
-          margin: '8px 0 18px',
-          color: '#5a5a5a',
-          fontWeight: 700,
-          letterSpacing: -1,
-        }}
-      >
-        Hospitalisations
-      </h1>
-
-      <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 14 }}>
-        <div
-          style={{
-            display: 'inline-flex',
-            alignItems: 'center',
-            border: '3px solid #3b82f6',
-            borderRadius: 10,
-            padding: '6px 12px',
-            minWidth: 260,
-            background: '#fff',
-            boxShadow: '0 6px 10px rgba(59,130,246,0.08)',
-          }}
-        >
-          <select
-            value={zone}
-            onChange={(e) => setZone(e.target.value)}
-            style={{
-              border: 'none',
-              outline: 'none',
-              fontSize: 18,
-              padding: '6px 8px',
-              flex: 1,
-              appearance: 'none',
-              WebkitAppearance: 'none',
-              MozAppearance: 'none',
-              background: 'transparent',
-              cursor: 'pointer',
-            }}
-          >
-            <option value='inconue'>inconue</option>
-            <option value='regionA'>Region A</option>
-            <option value='regionB'>Region B</option>
-          </select>
-          <div style={{ marginLeft: 8, transform: 'scale(1.1)' }}>▾</div>
-        </div>
-      </div>
-
-      <div
-        style={{
-          background: '#fff',
-          borderRadius: 14,
-          padding: '18px 18px 10px',
-          boxShadow: '0 8px 20px rgba(0,0,0,0.06)',
-        }}
-      >
-        <HospitalisationChart labels={labels} series={series} height={440} />
-      </div>
-    </div>
-  );
-};
-
-export default HospitalisationPage;

package/src/components/Charts/area-chart-hospitalisation/content.json

@@ -1,55 +0,0 @@
-{
-  "labels": [
-    "21 févr",
-    "28 févr",
-    "6 mars",
-    "13 mars",
-    "20 mars",
-    "27 mars",
-    "3 avr",
-    "10 avr",
-    "17 avr",
-    "24 avr",
-    "1 mai",
-    "8 mai",
-    "15 mai",
-    "22 mai",
-    "29 mai",
-    "5 juin",
-    "12 juin",
-    "19 juin",
-    "26 juin",
-    "3 juil",
-    "10 juil",
-    "17 juil",
-    "24 juil",
-    "31 juil",
-    "7 août"
-  ],
-  "series": [
-    {
-      "name": "0h-6h",
-      "data": [4, 7, 5, 6, 8, 9, 7, 10, 12, 6, 5, 8, 9, 6, 7, 10, 8, 11, 12, 13, 9, 8, 7, 6, 5]
-    },
-    {
-      "name": "6h-12h",
-      "data": [
-        6, 8, 10, 7, 9, 12, 11, 10, 14, 13, 12, 10, 11, 12, 13, 10, 11, 12, 13, 14, 12, 11, 9, 10, 8
-      ]
-    },
-    {
-      "name": "12h-18h",
-      "data": [
-        10, 12, 15, 14, 16, 18, 17, 20, 22, 19, 21, 18, 20, 19, 21, 23, 22, 24, 26, 25, 23, 22, 20,
-        19, 18
-      ]
-    },
-    {
-      "name": "18h-0h",
-      "data": [
-        15, 18, 20, 19, 22, 24, 23, 26, 28, 25, 29, 26, 28, 30, 27, 28, 32, 30, 31, 34, 32, 30, 28,
-        26, 25
-      ]
-    }
-  ]
-}