@tsiky/components-r19 1.0.0

package/src/components/Charts/sankey-adaptation/sankey.tsx

@@ -0,0 +1,70 @@
+// MySankeyChart.tsx
+
+import React from 'react';
+import { ResponsiveSankey } from '@nivo/sankey';
+import type { SankeyDataProps } from '@nivo/sankey';
+// Définissez vos données avec le type approprié pour une meilleure intégrité
+const data: SankeyDataProps = {
+  nodes: [
+    { id: 'start', color: '#61cdbb' },
+    { id: 'process_a', color: '#97e6a6' },
+    { id: 'process_b', color: '#e8c1a0' },
+    { id: 'end_result', color: '#f1e15b' },
+  ],
+  links: [
+    { source: 'start', target: 'process_a', value: 100 },
+    { source: 'start', target: 'process_b', value: 50 },
+    { source: 'process_a', target: 'end_result', value: 75 },
+    { source: 'process_a', target: 'process_b', value: 25 },
+    { source: 'process_b', target: 'end_result', value: 75 },
+  ],
+};
+
+const MySankeyChart: React.FC = () => {
+  return (
+    <div style={{ height: '500px', width: '100%' }}>
+      <ResponsiveSankey
+        data={data}
+        margin={{ top: 10, right: 10, bottom: 10, left: 10 }}
+        align='justify'
+        colors={{ scheme: 'category10' }}
+        nodeOpacity={1}
+        nodeThickness={18}
+        nodeInnerPadding={8}
+        nodeSpacing={24}
+        linkOpacity={0.5}
+        nodeBorderWidth={0}
+        nodeBorderColor={{
+          from: 'color',
+          modifiers: [['darker', 0.8]],
+        }}
+        // Active l'affichage des étiquettes
+        enableLabels={true}
+        // Positionne les étiquettes à l'extérieur des nœuds
+        labelPosition='outside'
+        // Oriente les étiquettes horizontalement
+        labelOrientation='horizontal'
+        // Ajoute un espacement entre les nœuds et les étiquettes
+        labelPadding={16}
+        // Personnalise la couleur du texte des étiquettes
+        labelTextColor={{
+          from: 'color',
+          modifiers: [['darker', 1.5]],
+        }}
+        animate={true}
+        motionConfig='stiff'
+        // Personnalise les styles via le thème
+        theme={{
+          labels: {
+            text: {
+              fontSize: 14,
+              fontWeight: 'bold',
+            },
+          },
+        }}
+      />
+    </div>
+  );
+};
+
+export default MySankeyChart;

package/src/components/Charts/sankey-chart/SankeyChart.stories.tsx

@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import SankeyChart, { type SankeyLink } from './SankeyChart';
+import demoContent from './content.json';
+
+const demoLinks: SankeyLink[] = demoContent.links;
+
+const meta: Meta<typeof SankeyChart> = {
+  title: 'Charts/SankeyChart',
+  component: SankeyChart,
+  tags: ['autodocs'],
+  parameters: { layout: 'fullscreen' },
+  argTypes: {
+    links: { control: 'object', description: 'Array of { source, target, value }' },
+    height: { control: 'number' },
+    nodeWidth: { control: 'number' },
+    enableToolbar: { control: 'boolean' },
+    annotatePercent: { control: 'boolean' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof SankeyChart>;
+
+export const Default: Story = {
+  args: {
+    links: demoLinks,
+    height: 480,
+    nodeWidth: 12,
+    enableToolbar: true,
+    annotatePercent: true,
+  },
+};
+
+export const Compact: Story = {
+  args: {
+    links: demoLinks,
+    height: 320,
+    nodeWidth: 8,
+    enableToolbar: false,
+    annotatePercent: true,
+  },
+};
+
+export const NoAnnotation: Story = {
+  args: {
+    links: demoLinks,
+    height: 420,
+    nodeWidth: 12,
+    enableToolbar: false,
+    annotatePercent: false,
+  },
+};
+
+export const ExampleWithCustomLinks: Story = {
+  args: {
+    links: [
+      { source: 'A', target: 'X', value: 50 },
+      { source: 'A', target: 'Y', value: 30 },
+      { source: 'A', target: 'Z', value: 20 },
+      { source: 'B', target: 'X', value: 10 },
+      { source: 'B', target: 'Y', value: 40 },
+      { source: 'B', target: 'Z', value: 50 },
+    ],
+    height: 420,
+    nodeWidth: 12,
+    enableToolbar: true,
+    annotatePercent: true,
+  },
+};

package/src/components/Charts/sankey-chart/SankeyChart.tsx

@@ -0,0 +1,155 @@
+import React, { useEffect, useRef } from 'react';
+import { color } from 'storybook/internal/theming';
+
+export type SankeyLink = { source: string; target: string; value: number; color?: string };
+
+interface Props {
+  links?: SankeyLink[];
+  height?: number;
+  nodeWidth?: number;
+  enableToolbar?: boolean;
+  annotatePercent?: boolean;
+  maxLeftFraction?: number;
+  className?: string;
+}
+
+const SankeyChart: React.FC<Props> = ({
+  links,
+  height = 480,
+  nodeWidth = 5,
+  enableToolbar = false,
+  annotatePercent = true,
+  maxLeftFraction = 0.45,
+  className,
+}) => {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    let sInstance: { render: (d: unknown) => void; destroy?: () => void } | null = null;
+    let mounted = true;
+
+    (async () => {
+      try {
+        const mod = await import('apexsankey');
+        const ApexSankey = mod?.default as unknown;
+
+        if (!mounted) return;
+        const mountEl = containerRef.current;
+        if (!mountEl) return;
+
+        const defaultLinks: SankeyLink[] = [
+          { source: 'non-seniors', target: 'retour', value: 73.9 },
+          { source: 'non-seniors', target: 'hospitalisations', value: 23.9 },
+          { source: 'non-seniors', target: 'transfert', value: 2.1 },
+          { source: 'non-seniors', target: 'maison_medicale_de_garde', value: 0.1 },
+          { source: 'non-seniors', target: 'deces', value: 0.1 },
+          { source: 'seniors', target: 'retour', value: 75.6 },
+          { source: 'seniors', target: 'hospitalisations', value: 20.4 },
+          { source: 'seniors', target: 'transfert', value: 3.1 },
+          { source: 'seniors', target: 'maison_medicale_de_garde', value: 0.1 },
+          { source: 'seniors', target: 'deces', value: 0.8 },
+        ];
+        const usedLinks = links && links.length ? links : defaultLinks;
+
+        const nodeSet = new Set<string>();
+        usedLinks.forEach((l) => {
+          nodeSet.add(l.source);
+          nodeSet.add(l.target);
+        });
+
+        const orderedNodes = [
+          'non-seniors',
+          'seniors',
+          'retour',
+          'hospitalisations',
+          'transfert',
+          'maison_medicale_de_garde',
+          'deces',
+        ].filter((id) => nodeSet.has(id));
+        for (const id of nodeSet) if (!orderedNodes.includes(id)) orderedNodes.push(id);
+
+        const totalsBySource: Record<string, number> = {};
+        const totalsByTarget: Record<string, number> = {};
+        let overall = 0;
+        usedLinks.forEach((l) => {
+          totalsBySource[l.source] = (totalsBySource[l.source] || 0) + (l.value ?? 0);
+          totalsByTarget[l.target] = (totalsByTarget[l.target] || 0) + (l.value ?? 0);
+          overall += l.value ?? 0;
+        });
+
+        const nodes = orderedNodes.map((id) => {
+          let title = id;
+          if (annotatePercent) {
+            const srcVal = totalsBySource[id];
+            if (typeof srcVal === 'number' && overall > 0) {
+              const pct = Math.round((srcVal / overall) * 1000) / 10;
+              title = `${id} (${pct}%)`;
+            } else {
+              const t = totalsByTarget[id];
+              if (typeof t === 'number' && overall > 0) {
+                const pct = Math.round((t / overall) * 1000) / 10;
+                title = `${id} (${pct}%)`;
+              }
+            }
+          }
+          return { id, title };
+        });
+
+        const edges = usedLinks.map((l) => ({
+          source: l.source,
+          target: l.target,
+          value: l.value,
+        }));
+        const data = { nodes, edges };
+
+        const parent = mountEl?.parentElement;
+        const containerWidth = parent ? parent.clientWidth || 420 : mountEl?.clientWidth || 420;
+
+        const graphOptions = {
+          nodeWidth,
+          fontFamily:
+            "Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial",
+          fontWeight: '600',
+          fontColor: 'var(--color-text)',
+          height,
+          enableToolbar,
+          viewPortWidth: containerWidth,
+          viewPortHeight: height,
+          width: containerWidth,
+          nodeAlignment: 'top',
+          colors: {
+            text: 'var(--color-text)',
+            background: '#fff',
+          },
+          linkOpacity: 0.6,
+          canvasStyle: {},
+        };
+
+        // constructor type
+        const SankeyCtor = ApexSankey as unknown as new (
+          el: Element,
+          opts: unknown
+        ) => { render: (d: unknown) => void; destroy?: () => void };
+        sInstance = new SankeyCtor(mountEl as Element, graphOptions as unknown);
+        sInstance.render(data as unknown);
+      } catch (err) {
+        console.error('Erreur lors du rendu ApexSankey :', err);
+      }
+    })();
+
+    return () => {
+      mounted = false;
+      try {
+        if (sInstance && typeof sInstance.destroy === 'function') sInstance.destroy();
+      } catch {
+        /* noop */
+      }
+    };
+  }, [links, height, nodeWidth, enableToolbar, annotatePercent, maxLeftFraction]);
+
+  return (
+    <div ref={containerRef} className={className} style={{ height: height, overflow: 'hidden' }} />
+  );
+};
+
+export default SankeyChart;

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

@@ -0,0 +1,15 @@
+{
+  "links": [
+    { "source": "non-seniors", "target": "retour", "value": 73.9 },
+    { "source": "non-seniors", "target": "hospitalisations", "value": 23.9 },
+    { "source": "non-seniors", "target": "transfert", "value": 2.1 },
+    { "source": "non-seniors", "target": "maison_medicale_de_garde", "value": 0.1 },
+    { "source": "non-seniors", "target": "deces", "value": 0.1 },
+
+    { "source": "seniors", "target": "retour", "value": 75.6 },
+    { "source": "seniors", "target": "hospitalisations", "value": 20.4 },
+    { "source": "seniors", "target": "transfert", "value": 3.1 },
+    { "source": "seniors", "target": "maison_medicale_de_garde", "value": 0.1 },
+    { "source": "seniors", "target": "deces", "value": 0.8 }
+  ]
+}

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

@@ -0,0 +1,72 @@
+// src/stories/Tension.stories.tsx
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import Tension, { type TensionData } from './StackedColumn';
+import sampleData from './content.json';
+
+const meta: Meta<typeof Tension> = {
+  title: 'Charts/StackedColumn',
+  component: Tension,
+  parameters: {
+    layout: 'fullscreen', // <-- passe la canvas en plein écran
+  },
+  // décorateur global pour ce fichier : conteneur full-screen responsive
+  decorators: [
+    (Story) => {
+      const usedHeight =
+        typeof window !== 'undefined' ? Math.max(300, window.innerHeight - 80) : 350;
+      return (
+        <div
+          style={{
+            width: '100%',
+            height: '100vh',
+            display: 'flex',
+            alignItems: 'stretch',
+            justifyContent: 'center',
+            padding: 20,
+            boxSizing: 'border-box',
+            background: '#fff',
+          }}
+        >
+          {/* wrapper qui limite la largeur et donne toute la hauteur au chart */}
+          <div style={{ width: '100%', maxWidth: 1200, height: usedHeight }}>
+            <Story />
+          </div>
+        </div>
+      );
+    },
+  ],
+};
+export default meta;
+
+type Story = StoryObj<typeof Tension>;
+
+const computedHeight = typeof window !== 'undefined' ? Math.max(300, window.innerHeight - 80) : 350;
+
+export const Default: Story = {
+  args: {
+    data: sampleData as unknown as TensionData,
+    // Pas de config fourni -> le composant utilisera son defaultConfig interne
+    height: computedHeight,
+  },
+};
+
+export const WithoutHistogram: Story = {
+  args: {
+    data: sampleData as unknown as TensionData,
+    // on fournit uniquement l'override voulu ; le composant fusionne avec son defaultConfig
+    config: { showHistogram: false },
+    height: computedHeight,
+  },
+};
+
+export const OnlyLines: Story = {
+  args: {
+    data: sampleData as unknown as TensionData,
+    config: {
+      showHistogram: false,
+      bubble: { visible: false },
+      rangeBands: [],
+    },
+    height: computedHeight,
+  },
+};