@tsiky/components-r19 1.0.0

package/src/components/Charts/boxplot-chart/BoxPlotChart.stories.tsx

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import BoxPlotChart, { type BoxPlotData, type BoxPlotConfig } from './BoxPlotChart';
+import demoContent from './content.json';
+import { computeBoxFromArray } from './boxUtils';
+
+const series = (demoContent.rawByDay as { label: string; values: number[] }[]).map((d) => ({
+  x: d.label,
+  y: computeBoxFromArray(d.values),
+}));
+
+const chartData: BoxPlotData = { series };
+
+const defaultCfg: BoxPlotConfig = {
+  colorUpper: '#2d3bb8ff',
+  colorLower: '#b3761bff',
+  color: '#5f9ec4',
+  showOutliers: true,
+  tooltipFormatter: (v) => String(v),
+  height: 480,
+  responsive: true,
+};
+
+const meta: Meta<typeof BoxPlotChart> = {
+  title: 'Charts/BoxPlotChart',
+  component: BoxPlotChart,
+  tags: ['autodocs'],
+  parameters: { layout: 'padded' },
+  argTypes: {
+    config: { control: 'object' },
+    data: { control: 'object' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof BoxPlotChart>;
+
+export const FromRawData: Story = {
+  args: {
+    data: chartData,
+    config: {
+      ...defaultCfg,
+      colorUpper: '#35bee0ff',
+      colorLower: '#209bb9ff',
+      height: 480,
+      showOutliers: true,
+    },
+  },
+};
+
+export const WithoutOutliers: Story = {
+  args: { data: chartData, config: { ...defaultCfg, showOutliers: false } },
+};
+
+export const SmallHeight: Story = {
+  args: { data: chartData, config: { ...defaultCfg, height: 320 } },
+};
+
+export const Playground: Story = {
+  args: { data: chartData, config: defaultCfg },
+  argTypes: {
+    config: { control: 'object' },
+  },
+};

package/src/components/Charts/boxplot-chart/BoxPlotChart.tsx

@@ -0,0 +1,114 @@
+import React from 'react';
+import Chart from 'react-apexcharts';
+import type { ApexOptions } from 'apexcharts';
+
+export interface BoxPoint {
+  x: string | number;
+  y: [number, number, number, number, number]; // [min, q1, median, q3, max]
+}
+
+export interface BoxPlotData {
+  series: BoxPoint[];
+}
+
+export interface BoxPlotConfig {
+  colorUpper?: string;
+  colorLower?: string;
+  color?: string;
+  showOutliers?: boolean;
+  tooltipFormatter?: (val: number) => string;
+  height?: number;
+  responsive?: boolean;
+}
+
+interface Props {
+  data: BoxPlotData;
+  config?: BoxPlotConfig;
+}
+
+const defaultConfig: BoxPlotConfig = {
+  colorUpper: '#2db85bff',
+  colorLower: '#b3761bff',
+  color: '#5f9ec4',
+  showOutliers: true,
+  tooltipFormatter: (v) => String(v),
+  height: 420,
+  responsive: true,
+};
+
+/** Série locale pour boxPlot */
+type BoxPlotSeries = ReadonlyArray<{
+  name: string;
+  data: ReadonlyArray<{ x: string | number; y: [number, number, number, number, number] }>;
+}>;
+
+const BoxPlotChart: React.FC<Props> = ({ data, config = defaultConfig }) => {
+  const cfg: BoxPlotConfig = { ...defaultConfig, ...config };
+
+  const seriesPoints = Array.isArray(data?.series) ? data.series : [];
+  const apexSeries: BoxPlotSeries = [
+    {
+      name: 'Distribution',
+      data: seriesPoints.map((p) => ({ x: p.x, y: p.y })),
+    },
+  ];
+  const options: ApexOptions = {
+    chart: {
+      foreColor: 'var(--color-text)',
+      type: 'boxPlot',
+      toolbar: { show: false },
+      height: cfg.height,
+    },
+    yaxis: {
+      tickAmount: 10,
+      labels: {
+        formatter: function (val: number) {
+          return val.toFixed(0);
+        },
+      },
+    },
+    plotOptions: {
+      boxPlot: {
+        colors: {
+          upper: cfg.colorUpper,
+          lower: cfg.colorLower,
+        },
+      },
+    },
+    stroke: { show: true, width: 1, colors: ['var(--color-secondary)'] },
+    markers: { size: 0 },
+    tooltip: {
+      shared: false,
+      y: {
+        formatter: (val: number | string | unknown) => {
+          if (typeof val === 'number') return cfg.tooltipFormatter!(val);
+          return String(val);
+        },
+      },
+    },
+    grid: { borderColor: '#e6e6e6' },
+    dataLabels: { enabled: false },
+    legend: { show: false },
+    responsive: cfg.responsive
+      ? [
+          // {
+          //   breakpoint: 768,
+          //   options: {
+          //     chart: { height: Math.max(220, Math.round((cfg.height ?? 380) * 0.6)) },
+          //   },
+          // },
+        ]
+      : undefined,
+  };
+
+  return (
+    <Chart
+      options={options}
+      series={apexSeries as unknown as ApexOptions['series']}
+      type='boxPlot'
+      height={cfg.height}
+    />
+  );
+};
+
+export default BoxPlotChart;

package/src/components/Charts/boxplot-chart/boxUtils.ts

@@ -0,0 +1,22 @@
+export function quantile(sorted: number[], q: number): number {
+  if (!sorted.length) return 0;
+  const pos = (sorted.length - 1) * q;
+  const base = Math.floor(pos);
+  const rest = pos - base;
+  if (sorted[base + 1] !== undefined) {
+    return sorted[base] + rest * (sorted[base + 1] - sorted[base]);
+  }
+  return sorted[base];
+}
+
+/** Retourne [min, q1, median, q3, max] */
+export function computeBoxFromArray(values: number[]): [number, number, number, number, number] {
+  if (!values || !values.length) return [0, 0, 0, 0, 0];
+  const sorted = [...values].sort((a, b) => a - b);
+  const min = sorted[0];
+  const max = sorted[sorted.length - 1];
+  const q1 = quantile(sorted, 0.25);
+  const median = quantile(sorted, 0.5);
+  const q3 = quantile(sorted, 0.75);
+  return [min, q1, median, q3, max];
+}

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

@@ -0,0 +1,11 @@
+{
+  "rawByDay": [
+    { "label": "Lundi", "values": [1, 2, 2, 3, 3, 4, 4, 4, 5, 5, 6, 8] },
+    { "label": "Mardi", "values": [0, 2, 3, 3, 3, 4, 4, 4, 5, 5, 6, 8] },
+    { "label": "Mercredi", "values": [0, 1, 3, 3, 4, 4, 4, 5, 5, 6, 10] },
+    { "label": "Jeudi", "values": [1, 1, 2, 3, 4, 4, 5, 5, 5, 6, 8] },
+    { "label": "Vendredi", "values": [0, 2, 2, 3, 3, 4, 4, 5, 6, 6, 9] },
+    { "label": "Samedi", "values": [1, 2, 2, 2, 3, 3, 4, 4, 4, 7, 8] },
+    { "label": "Dimanche", "values": [0, 1, 1, 2, 2, 2, 3, 3, 3, 5, 7] }
+  ]
+}

package/src/components/Charts/mixed-chart/MixedChart.stories.tsx

@@ -0,0 +1,83 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import MixedChart, { type BandChartData, type BandChartConfig } from './MixedChart';
+import demoContent from './content.json';
+
+const demoData: BandChartData = {
+  labels: demoContent.labels,
+  main: demoContent.main,
+  upper: demoContent.upper,
+  lower: demoContent.lower,
+  histogram: demoContent.histogram,
+};
+
+const demoConfig: BandChartConfig = {
+  rangeBands: [
+    {
+      id: 'Ongoing',
+      lowerKey: 'lower',
+      upperKey: 'upper',
+      visible: true,
+      color: '#cbd7ea',
+      opacity: 0.22,
+    },
+  ],
+  lines: [
+    { id: 'Max', key: 'upper', label: 'Max', visible: true, color: '#082b4d', width: 1 },
+    {
+      id: 'Predictions',
+      key: 'main',
+      label: 'Predictions',
+      visible: true,
+      color: '#6fb0ff',
+      width: 1.5,
+    },
+    { id: 'Min', key: 'lower', label: 'Min', visible: true, color: '#082b4d', width: 1, dash: 6 },
+  ],
+  showHistogram: true,
+  histogramKey: 'histogram',
+  histogramColor: '#6f6f6f',
+  bubble: { visible: true, values: demoContent.histogram, size: 4 },
+  responsive: true,
+};
+
+const meta: Meta<typeof MixedChart> = {
+  title: 'Charts/MixedChart',
+  component: MixedChart,
+  tags: ['autodocs'],
+  argTypes: {
+    height: { control: 'number' },
+    config: { control: 'object' },
+    data: { control: 'object' },
+  },
+  parameters: { layout: 'padded' },
+};
+
+export default meta;
+type Story = StoryObj<typeof MixedChart>;
+
+export const Playground: Story = {
+  args: {
+    data: demoData,
+    config: demoConfig,
+    height: 360,
+  },
+};
+
+export const Small: Story = {
+  args: { data: demoData, config: { ...demoConfig, showHistogram: false }, height: 260 },
+};
+
+export const NoBands: Story = {
+  args: { data: demoData, config: { ...demoConfig, rangeBands: undefined }, height: 360 },
+};
+
+export const BandOnly: Story = {
+  args: {
+    data: demoData,
+    config: {
+      ...demoConfig,
+      lines: [{ id: 'upper', key: 'upper', visible: false, color: '#082b4d', width: 1 }],
+    },
+    height: 360,
+  },
+};