@tsiky/components-r19 1.3.0 → 1.3.2

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

@@ -1,34 +0,0 @@
-{
-  "labels": [
-    "00h",
-    "01h",
-    "02h",
-    "03h",
-    "04h",
-    "05h",
-    "06h",
-    "07h",
-    "08h",
-    "09h",
-    "10h",
-    "11h",
-    "12h",
-    "13h",
-    "14h",
-    "15h",
-    "16h",
-    "17h",
-    "18h",
-    "19h",
-    "20h",
-    "21h",
-    "22h",
-    "23h"
-  ],
-  "main": [3, 2, 1, 1, 1, 2, 4, 7, 11, 14, 18, 20, 18, 17, 16, 16, 17, 18, 17, 15, 12, 10, 8, 6],
-  "upper": [5, 3, 2, 2, 2, 4, 7, 11, 16, 20, 25, 28, 24, 22, 21, 21, 23, 24, 22, 19, 15, 13, 10, 8],
-  "lower": [2, 1, 0, 0, 0, 1, 3, 5, 8, 11, 14, 15, 15, 14, 13, 13, 14, 15, 14, 12, 10, 8, 6, 5],
-  "histogram": [
-    2, 1, 1, 0, 0, 1, 3, 6, 10, 13, 16, 22, 17, 15, 14, 15, 16, 17, 15, 14, 11, 10, 7, 5
-  ]
-}

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

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

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

@@ -1,183 +0,0 @@
-import { Move } from 'lucide-react';
-import React, { useEffect, useRef } from 'react';
-
-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;
-  draggable?: boolean;
-}
-
-const SankeyChart: React.FC<Props> = ({
-  links,
-  height = 480,
-  nodeWidth = 5,
-  enableToolbar = false,
-  annotatePercent = true,
-  maxLeftFraction = 0.45,
-  className,
-  draggable = false,
-}) => {
-  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 style={{ position: 'relative', height }}>
-      {/* Chart container, masqué si draggable */}
-      <div
-        ref={containerRef}
-        className={className}
-        style={{ height, overflow: 'hidden', opacity: draggable ? 0 : 1 }}
-      />
-
-      {/* Overlay Move */}
-      {draggable && (
-        <div
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            width: '100%',
-            height: '100%',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            pointerEvents: 'none',
-          }}
-        >
-          <Move size={32} strokeWidth={1.5} style={{ opacity: 0.8 }} />
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default SankeyChart;

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

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

@@ -1,72 +0,0 @@
-// 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,
-  },
-};