@tsiky/components-r19 1.0.0

package/src/components/MetricsPanel/MetricsPanel.stories.tsx

@@ -0,0 +1,692 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from 'react';
+// eslint-disable-next-line storybook/no-renderer-packages
+import type { Meta, StoryObj } from '@storybook/react';
+import MetricsPanel from './MetricsPanel';
+import type { MetricsItem } from './tools/MetricsPanelTypes';
+import { hexToRgba as utilHexToRgba } from './tools/colorUtils';
+import {
+  Users,
+  CheckCircle,
+  Bed,
+  XCircle,
+  Lock,
+  Clock,
+  AlertCircle,
+  Home,
+  Plane,
+  Calendar,
+} from 'lucide-react';
+
+const meta: Meta<typeof MetricsPanel> = {
+  title: 'Components/MetricsPanel',
+  component: MetricsPanel,
+  parameters: { layout: 'padded' },
+  tags: ['autodocs'],
+};
+export default meta;
+type Story = StoryObj<typeof MetricsPanel>;
+
+const hexToRgba = (color: string, alpha = 1) => {
+  try {
+    return utilHexToRgba(color, alpha);
+  } catch {
+    return `rgba(124, 58, 237, ${alpha})`;
+  }
+};
+
+/* ---- demo items (shared) ---- */
+const demoItems: MetricsItem[] = [
+  {
+    id: 1,
+    label: 'DMS',
+    subLabel: '2023-08-02',
+    value: '3.8h',
+    badge: { text: 'Prédiction', color: 'transparent', textColor: '#6b7280', small: true },
+  } as any,
+  {
+    id: 2,
+    label: 'Admissions',
+    subLabel: '03.08',
+    value: '205',
+    badge: { text: '205', subText: '100%', color: '#10b981', small: true },
+  } as any,
+  {
+    id: 3,
+    label: 'Tension',
+    subLabel: '03.08',
+    value: '68',
+    badge: { text: '30', subText: '78%', color: '#fb923c', small: true },
+  } as any,
+  {
+    id: 4,
+    label: 'Hospitalisations',
+    subLabel: '03.08',
+    value: '48',
+    badge: { text: '33', subText: '66%', color: '#fb7185', small: true },
+  } as any,
+  {
+    id: 5,
+    label: 'Imagerie',
+    subLabel: '03.08',
+    value: '109',
+    badge: { text: '104', subText: '95%', color: '#10b981', small: true },
+  } as any,
+  {
+    id: 6,
+    label: 'Sorties',
+    subLabel: '03.08',
+    value: '219',
+    badge: { text: '211', subText: '97%', color: '#10b981', small: true },
+  } as any,
+  {
+    id: 7,
+    label: '> 75 ans',
+    subLabel: '03.08',
+    value: '38',
+    badge: { text: '30', subText: '78%', color: '#fb923c', small: true },
+  } as any,
+  {
+    id: 8,
+    label: 'Charge des médecins',
+    subLabel: '03.08',
+    value: '12',
+    badge: { text: '10', subText: '85%', color: '#10b981', small: true },
+  } as any,
+];
+
+/* ---------------- Stories ---------------- */
+
+/* Default (compact preset) */
+export const Default: Story = {
+  render: (args) => (
+    <MetricsPanel
+      {...(args as any)}
+      items={demoItems}
+      title='Mesures'
+      color='#7c3aed'
+      layout='vertical'
+      compact
+      preset='compact'
+      onItemClick={(it) => console.log('clicked', it)}
+    />
+  ),
+  parameters: {
+    docs: {
+      source: {
+        code: `import React from 'react';
+import MetricsPanel from './MetricsPanel';
+
+const items = ${JSON.stringify(demoItems, null, 2)};
+
+<MetricsPanel
+  title="Mesures"
+  items={items}
+  color="#7c3aed"
+  layout="vertical"
+  compact
+  preset="compact"
+/>`,
+      },
+    },
+  },
+};
+
+/* Compact sized: montre comment forcer largeur/hauteur des items compact */
+export const CompactSized: Story = {
+  render: (args) => (
+    <MetricsPanel
+      {...(args as any)}
+      items={demoItems}
+      title='Compact — taille fixe des items'
+      color='#7c3aed'
+      layout='vertical'
+      compact
+      preset='compact'
+      compactItemWidth={280}
+      compactItemHeight={96}
+      compactItemStyle={{ borderRadius: 12, padding: 10 }}
+      onItemClick={(it) => console.log('clicked', it)}
+    />
+  ),
+  parameters: {
+    docs: {
+      source: {
+        code: `import React from 'react';
+import MetricsPanel from './MetricsPanel';
+
+const items = ${JSON.stringify(demoItems, null, 2)};
+
+<MetricsPanel
+  title="Compact — taille fixe des items"
+  items={items}
+  layout="vertical"
+  compact
+  preset="compact"
+  compactItemWidth={280}
+  compactItemHeight={96}
+  compactItemStyle={{ borderRadius: 12, padding: 10 }}
+/>`,
+      },
+    },
+  },
+};
+
+/* Summary style (démo couleurs) */
+export const SummaryStyle: Story = {
+  args: {
+    summaryBgColors: [
+      'rgba(239,68,68,0.08)',
+      'rgba(249,115,22,0.08)',
+      'rgba(234,179,8,0.08)',
+      'rgba(34,197,94,0.08)',
+    ],
+    summaryBorderColors: [
+      'rgba(239,68,68,0.12)',
+      'rgba(249,115,22,0.12)',
+      'rgba(234,179,8,0.12)',
+      'rgba(34,197,94,0.12)',
+    ],
+    summaryValueColors: ['#dc2626', '#ea580c', '#a16207', '#15803d'],
+  },
+  render: (args) => (
+    <MetricsPanel
+      {...(args as any)}
+      items={[
+        { id: 's1', label: 'Précision moyenne', value: '92%' } as any,
+        { id: 's2', label: 'Métriques suivies', value: '8' } as any,
+        { id: 's3', label: 'Alertes actives', value: '3' } as any,
+        { id: 's4', label: 'Période analysée', value: '24h' } as any,
+      ]}
+      title='Résumé de performance'
+      summary
+      preset='summary'
+      onItemClick={(it) => console.log('summary clicked', it)}
+    />
+  ),
+  parameters: {
+    docs: {
+      source: {
+        code: `import React from 'react';
+import MetricsPanel from './MetricsPanel';
+
+const items = [
+  { id: 's1', label: 'Précision moyenne', value: '92%' },
+  { id: 's2', label: 'Métriques suivies', value: '8' },
+  { id: 's3', label: 'Alertes actives', value: '3' },
+  { id: 's4', label: 'Période analysée', value: '24h' },
+];
+
+const summaryBgColors = [
+  'rgba(239,68,68,0.08)',
+  'rgba(249,115,22,0.08)',
+  'rgba(234,179,8,0.08)',
+  'rgba(34,197,94,0.08)',
+];
+
+const summaryBorderColors = [
+  'rgba(239,68,68,0.12)',
+  'rgba(249,115,22,0.12)',
+  'rgba(234,179,8,0.12)',
+  'rgba(34,197,94,0.12)',
+];
+
+const summaryValueColors = ['#dc2626', '#ea580c', '#a16207', '#15803d'];
+
+<MetricsPanel
+  title="Résumé de performance"
+  summary
+  preset="summary"
+  items={items}
+  summaryBgColors={summaryBgColors}
+  summaryBorderColors={summaryBorderColors}
+  summaryValueColors={summaryValueColors}
+/>`,
+      },
+    },
+  },
+};
+
+/* Summary sized: fixe largeur/hauteur des cartes summary */
+export const SummarySized: Story = {
+  render: (args) => (
+    <MetricsPanel
+      {...(args as any)}
+      items={[
+        { id: 's1', label: 'Précision moyenne', value: '92%', valueColor: '#059669' } as any,
+        { id: 's2', label: 'Métriques suivies', value: '8', valueColor: '#2563eb' } as any,
+        { id: 's3', label: 'Alertes actives', value: '3', valueColor: '#b45309' } as any,
+        { id: 's4', label: 'Période analysée', value: '24h', valueColor: '#7c3aed' } as any,
+      ]}
+      title='Summary — taille fixe des cartes'
+      summary
+      orientation='horizontal'
+      preset='summary'
+      summaryCardWidth='220px'
+      summaryCardHeight={100}
+      summaryCardStyle={{ borderRadius: 12, boxShadow: '0 10px 24px rgba(15,23,42,0.06)' }}
+    />
+  ),
+  parameters: {
+    docs: {
+      source: {
+        code: `import React from 'react';
+import MetricsPanel from './MetricsPanel';
+
+const items = [
+  { id: 's1', label: 'Précision moyenne', value: '92%', valueColor: '#059669' },
+  { id: 's2', label: 'Métriques suivies', value: '8', valueColor: '#2563eb' },
+  { id: 's3', label: 'Alertes actives', value: '3', valueColor: '#b45309' },
+  { id: 's4', label: 'Période analysée', value: '24h', valueColor: '#7c3aed' },
+];
+
+<MetricsPanel
+  title="Summary — taille fixe des cartes"
+  summary
+  orientation="horizontal"
+  preset="summary"
+  items={items}
+  summaryCardWidth="220px"
+  summaryCardHeight={100}
+  summaryCardStyle={{ borderRadius: 12, boxShadow: '0 10px 24px rgba(15,23,42,0.06)' }}
+/>`,
+      },
+    },
+  },
+};
+
+/* AlternateHorizontal */
+export const AlternateHorizontal: Story = {
+  render: (args) => (
+    <MetricsPanel
+      {...(args as any)}
+      items={[
+        {
+          id: 'a1',
+          label: "ER Temps d'attente",
+          subLabel: '04.09',
+          value: '1.2h',
+          badge: { text: 'Trend', subText: '+5%', color: '#fb923c', small: true },
+        } as any,
+        {
+          id: 'a2',
+          label: 'Consultations',
+          subLabel: '04.09',
+          value: '482',
+          badge: { text: '482', subText: '↑', color: '#10b981', small: true },
+        } as any,
+        {
+          id: 'a3',
+          label: 'Imagerie urg.',
+          subLabel: '04.09',
+          value: '76',
+          badge: { text: '76', subText: '↓', color: '#fb7185', small: true },
+        } as any,
+        {
+          id: 'a4',
+          label: 'Opérations',
+          subLabel: '04.09',
+          value: '34',
+          badge: { text: '34', subText: 'OK', color: '#2563eb', small: true },
+        } as any,
+      ]}
+      title='Vue rapide (Horizontal)'
+      color='#0ea5a4'
+      layout='horizontal'
+      orientation='horizontal'
+      compact
+      preset='alternateHorizontal'
+    />
+  ),
+  parameters: {
+    docs: {
+      source: {
+        code: `import React from 'react';
+import MetricsPanel from './MetricsPanel';
+
+const items = [
+  { id: 'a1', label: 'ER Temps d\\'attente', subLabel: '04.09', value: '1.2h', badge: { text: 'Trend', subText: '+5%', color:'#fb923c' } },
+  { id: 'a2', label: 'Consultations', subLabel: '04.09', value: '482', badge: { text: '482', subText: '↑', color:'#10b981' } },
+  { id: 'a3', label: 'Imagerie urg.', subLabel: '04.09', value: '76', badge: { text: '76', subText: '↓', color:'#fb7185' } },
+  { id: 'a4', label: 'Opérations', subLabel: '04.09', value: '34', badge: { text: '34', subText: 'OK', color:'#2563eb' } },
+];
+
+<MetricsPanel
+  title="Vue rapide (Horizontal)"
+  items={items}
+  color="#0ea5a4"
+  layout="horizontal"
+  orientation="horizontal"
+  compact
+  preset="alternateHorizontal"
+/>`,
+      },
+    },
+  },
+};
+
+/* CustomColors */
+export const CustomColors: Story = {
+  render: (args) => (
+    <MetricsPanel
+      {...(args as any)}
+      items={[
+        { id: 'c1', label: 'Urgences', value: '124' } as any,
+        { id: 'c2', label: 'Consultations', value: '58' } as any,
+        { id: 'c3', label: 'Hospitalisations', value: '23' } as any,
+        { id: 'c4', label: 'Opérations', value: '12' } as any,
+      ]}
+      title='Statistiques personnalisées'
+      summary
+      layout='horizontal'
+      orientation='horizontal'
+      summaryBgColors={[
+        'rgba(255,0,0,0.08)',
+        'rgba(0,255,0,0.08)',
+        'rgba(0,0,255,0.08)',
+        'rgba(255,255,0,0.08)',
+      ]}
+      summaryBorderColors={[
+        'rgba(255,0,0,0.12)',
+        'rgba(0,255,0,0.12)',
+        'rgba(0,0,255,0.12)',
+        'rgba(255,255,0,0.12)',
+      ]}
+      summaryValueColors={['#ff0000', '#00ff00', '#0000ff', '#ffff00']}
+      preset='summary'
+    />
+  ),
+  parameters: {
+    docs: {
+      source: {
+        code: `import React from 'react';
+import MetricsPanel from './MetricsPanel';
+
+const items = [
+  { id: 'c1', label: 'Urgences', value: '124' },
+  { id: 'c2', label: 'Consultations', value: '58' },
+  { id: 'c3', label: 'Hospitalisations', value: '23' },
+  { id: 'c4', label: 'Opérations', value: '12' },
+];
+
+const summaryBgColors = [
+  'rgba(255,0,0,0.08)',
+  'rgba(0,255,0,0.08)',
+  'rgba(0,0,255,0.08)',
+  'rgba(255,255,0,0.08)',
+];
+
+const summaryBorderColors = [
+  'rgba(255,0,0,0.12)',
+  'rgba(0,255,0,0.12)',
+  'rgba(0,0,255,0.12)',
+  'rgba(255,255,0,0.12)',
+];
+
+const summaryValueColors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00'];
+
+<MetricsPanel
+  title="Statistiques personnalisées"
+  summary
+  layout="horizontal"
+  orientation="horizontal"
+  preset="summary"
+  items={items}
+  summaryBgColors={summaryBgColors}
+  summaryBorderColors={summaryBorderColors}
+  summaryValueColors={summaryValueColors}
+/>`,
+      },
+    },
+  },
+};
+
+/* ImageExample */
+const imageItems: MetricsItem[] = [
+  {
+    id: 'c-patients',
+    label: 'Patients entrants',
+    value: '694',
+    bgColor: hexToRgba('#7c3aed', 0.03),
+    borderColor: hexToRgba('#7c3aed', 0.08),
+    iconComponent: Users,
+    iconSquareBg: hexToRgba('#7c3aed', 0.12),
+    iconColor: '#7c3aed',
+  } as any,
+  {
+    id: 'c-disponibles',
+    label: 'Disponibles',
+    value: '336',
+    bgColor: hexToRgba('#10b981', 0.03),
+    borderColor: hexToRgba('#10b981', 0.08),
+    iconComponent: CheckCircle,
+    iconSquareBg: hexToRgba('#10b981', 0.12),
+    iconColor: '#10b981',
+  } as any,
+  {
+    id: 'c-occupes',
+    label: 'Occupés',
+    value: '655',
+    bgColor: hexToRgba('#f59e0b', 0.03),
+    borderColor: hexToRgba('#f59e0b', 0.08),
+    iconComponent: Bed,
+    iconSquareBg: hexToRgba('#f59e0b', 0.12),
+    iconColor: '#f59e0b',
+  } as any,
+  {
+    id: 'c-indispo',
+    label: 'Indisponibles',
+    value: '0',
+    bgColor: hexToRgba('#ef4444', 0.03),
+    borderColor: hexToRgba('#ef4444', 0.08),
+    iconComponent: XCircle,
+    iconSquareBg: hexToRgba('#ef4444', 0.12),
+    iconColor: '#ef4444',
+  } as any,
+  {
+    id: 'c-femmes',
+    label: 'Femmes',
+    value: '76',
+    bgColor: hexToRgba('#374151', 0.03),
+    borderColor: hexToRgba('#374151', 0.08),
+    iconComponent: Lock,
+    iconSquareBg: hexToRgba('#374151', 0.12),
+    iconColor: '#374151',
+  } as any,
+  {
+    id: 'c-permis',
+    label: 'Permis Durée Déterminée',
+    value: '43',
+    bgColor: hexToRgba('#7c3aed', 0.03),
+    borderColor: hexToRgba('#7c3aed', 0.08),
+    iconComponent: Clock,
+    iconSquareBg: hexToRgba('#a855f7', 0.12),
+    iconColor: '#7c3aed',
+  } as any,
+];
+
+/* ImageBasedExample (custom itemsContainerStyle) */
+export const ImageBasedExample: Story = {
+  render: () => (
+    <MetricsPanel
+      title='Tableau de bord'
+      summary
+      orientation='horizontal'
+      itemsContainerStyle={{
+        display: 'flex',
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        gap: '8px',
+        justifyContent: 'flex-start',
+      }}
+      items={[
+        {
+          id: 'un-count',
+          label: 'Un Count',
+          value: '950',
+          bgColor: hexToRgba('#7c3aed', 0.03),
+          borderColor: hexToRgba('#7c3aed', 0.08),
+          valueColor: '#7c3aed',
+          iconComponent: Users,
+          iconSquareBg: hexToRgba('#7c3aed', 0.12),
+          iconColor: '#7c3aed',
+        } as any,
+        {
+          id: 'un-month',
+          label: 'Un Month',
+          value: '40',
+          bgColor: hexToRgba('#10b981', 0.03),
+          borderColor: hexToRgba('#10b981', 0.08),
+          valueColor: '#10b981',
+          iconComponent: Calendar,
+          iconSquareBg: hexToRgba('#10b981', 0.12),
+          iconColor: '#10b981',
+        } as any,
+        {
+          id: 'departure',
+          label: 'Departure',
+          value: '307',
+          bgColor: hexToRgba('#f59e0b', 0.03),
+          borderColor: hexToRgba('#f59e0b', 0.08),
+          valueColor: '#f59e0b',
+          iconComponent: Plane,
+          iconSquareBg: hexToRgba('#f59e0b', 0.12),
+          iconColor: '#f59e0b',
+        } as any,
+        {
+          id: 'oversite',
+          label: 'Oversite',
+          value: '643',
+          bgColor: hexToRgba('#ef4444', 0.03),
+          borderColor: hexToRgba('#ef4444', 0.08),
+          valueColor: '#ef4444',
+          iconComponent: Home,
+          iconSquareBg: hexToRgba('#ef4444', 0.12),
+          iconColor: '#ef4444',
+        } as any,
+        {
+          id: 'tier-accident',
+          label: 'Tier (Accident)',
+          value: '67.68%',
+          bgColor: hexToRgba('#374151', 0.03),
+          borderColor: hexToRgba('#374151', 0.08),
+          valueColor: '#374151',
+          iconComponent: AlertCircle,
+          iconSquareBg: hexToRgba('#374151', 0.12),
+          iconColor: '#374151',
+        } as any,
+      ]}
+      preset='image'
+    />
+  ),
+  parameters: {
+    docs: {
+      source: {
+        code: `import React from 'react';
+import MetricsPanel from './MetricsPanel';
+import { hexToRgba } from './tools/colorUtils';
+
+const items = [
+  { id: 'un-count', label: 'Un Count', value: '950', bgColor: hexToRgba('#7c3aed', 0.03), borderColor: hexToRgba('#7c3aed', 0.08) },
+  { id: 'un-month', label: 'Un Month', value: '40', bgColor: hexToRgba('#10b981', 0.03), borderColor: hexToRgba('#10b981', 0.08) },
+  { id: 'departure', label: 'Departure', value: '307', bgColor: hexToRgba('#f59e0b', 0.03), borderColor: hexToRgba('#f59e0b', 0.08) },
+  { id: 'oversite', label: 'Oversite', value: '643', bgColor: hexToRgba('#ef4444', 0.03), borderColor: hexToRgba('#ef4444', 0.08) },
+  { id: 'tier-accident', label: 'Tier (Accident)', value: '67.68%', bgColor: hexToRgba('#374151', 0.03), borderColor: hexToRgba('#374151', 0.08) },
+];
+
+<MetricsPanel
+  title="Tableau de bord"
+  summary
+  orientation="horizontal"
+  itemsContainerStyle={{
+    display: 'flex',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: '8px',
+    justifyContent: 'flex-start'
+  }}
+  items={items}
+  preset="image"
+/>`,
+      },
+    },
+  },
+};
+
+/* PertinenceCards */
+export const PertinenceCards: Story = {
+  render: () => (
+    <MetricsPanel
+      summary
+      title=''
+      orientation='horizontal'
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore optional
+      summaryGridColumns={3}
+      items={[
+        {
+          id: 'p1',
+          label: 'Pertinence heure (h) de sortie',
+          value: '4.1',
+          valueColor: '#7c3aed',
+          bgColor: '#ffffff',
+          borderColor: 'rgba(15,23,42,0.08)',
+        } as any,
+        {
+          id: 'p2',
+          label: 'Pertinence séquence (s)',
+          value: '100%',
+          valueColor: '#7c3aed',
+          bgColor: '#ffffff',
+          borderColor: 'rgba(15,23,42,0.08)',
+        } as any,
+        {
+          id: 'p3',
+          label: 'Pertinence type (t) de sortie',
+          value: '0%',
+          valueColor: '#7c3aed',
+          bgColor: '#ffffff',
+          borderColor: 'rgba(15,23,42,0.08)',
+        } as any,
+      ]}
+      itemsContainerStyle={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(3, 1fr)',
+        gap: 18,
+        alignItems: 'stretch',
+        width: '100%',
+      }}
+      preset='pertinence'
+    />
+  ),
+  parameters: {
+    docs: {
+      source: {
+        code: `import React from 'react';
+import MetricsPanel from './MetricsPanel';
+
+const items = [
+  { id: 'p1', label: 'Pertinence heure (h) de sortie', value: '4.1', valueColor: '#7c3aed', bgColor: '#ffffff', borderColor: 'rgba(15,23,42,0.08)' },
+  { id: 'p2', label: 'Pertinence séquence (s)', value: '100%', valueColor: '#7c3aed', bgColor: '#ffffff', borderColor: 'rgba(15,23,42,0.08)' },
+  { id: 'p3', label: 'Pertinence type (t) de sortie', value: '0%', valueColor: '#7c3aed', bgColor: '#ffffff', borderColor: 'rgba(15,23,42,0.08)' },
+];
+
+<MetricsPanel
+  summary
+  title=""
+  orientation="horizontal"
+  summaryGridColumns={3}
+  items={items}
+  itemsContainerStyle={{
+    display: 'grid',
+    gridTemplateColumns: 'repeat(3, 1fr)',
+    gap: 18,
+    alignItems: 'stretch',
+    width: '100%',
+  }}
+  preset="pertinence"
+/>`,
+      },
+    },
+  },
+};