@tsiky/components-r19 1.0.0

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

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

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

@@ -0,0 +1,55 @@
+{
+  "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
+      ]
+    }
+  ]
+}

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

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

@@ -0,0 +1,132 @@
+import React from 'react';
+import Chart from 'react-apexcharts';
+import type { ApexOptions } from 'apexcharts';
+
+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;
+}
+
+/** 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 }) => {
+  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 (
+    <Chart
+      options={options}
+      series={series as unknown as ApexOptions['series']}
+      type='bar'
+      height={cfg.height}
+    />
+  );
+};
+
+export default HorizontalBarChart;

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

@@ -0,0 +1,15 @@
+{
+  "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]
+}