@tsiky/components-r19 1.0.0 → 1.2.0

package/src/components/AnnouncementPanel/ListContentContainer.tsx

@@ -1,33 +1,33 @@
-import React from 'react';
-import './ListContentContainer.css';
-
-export type ListContentContainerProps = {
-  className?: string;
-  style?: React.CSSProperties;
-  children?: React.ReactNode; // normally SimpleListBox/CounterListBox/TrendListBox
-  gap?: string;
-  background?: string;
-};
-
-export const ListContentContainer: React.FC<ListContentContainerProps> = ({
-  className = '',
-  style = {},
-  children,
-  gap = '1rem',
-  background = '#D9EEF5',
-}) => {
-  return (
-    <div
-      className={`lcc-root ${className}`}
-      style={{
-        background,
-        ...style,
-        ['--lcc-gap' as any]: gap,
-      }}
-    >
-      {React.Children.map(children, (child) => (
-        <div className='lcc-cell'>{child}</div>
-      ))}
-    </div>
-  );
-};
+import React from 'react';
+import './ListContentContainer.css';
+
+export type ListContentContainerProps = {
+  className?: string;
+  style?: React.CSSProperties;
+  children?: React.ReactNode; // normally SimpleListBox/CounterListBox/TrendListBox
+  gap?: string;
+  background?: string;
+};
+
+export const ListContentContainer: React.FC<ListContentContainerProps> = ({
+  className = '',
+  style = {},
+  children,
+  gap = '1rem',
+  background = '#D9EEF5',
+}) => {
+  return (
+    <div
+      className={`lcc-root ${className}`}
+      style={{
+        background,
+        ...style,
+        ['--lcc-gap' as any]: gap,
+      }}
+    >
+      {React.Children.map(children, (child) => (
+        <div className='lcc-cell'>{child}</div>
+      ))}
+    </div>
+  );
+};

package/src/components/AnnouncementPanel/index.ts

@@ -1,3 +1,3 @@
-export * from './ListBox';
-export * from './FlexRowContainer';
-export * from './ListContentContainer';
+export * from './ListBox';
+export * from './FlexRowContainer';
+export * from './ListContentContainer';

package/src/components/Charts/area-chart-admission/AreaChartAdmission.tsx

@@ -1,89 +1,129 @@
-import React from 'react';
-import Chart from 'react-apexcharts';
-import type { ApexOptions } from 'apexcharts';
-
-export type SeriesItem = { name: string; data: number[] };
-
-interface ChartProps {
-  categories: string[];
-  series: SeriesItem[];
-  height?: number;
-  title?: string;
-}
-
-const defaultColors = ['#e24b33', '#e2b23a', '#6feff0', '#2f5be8'];
-
-const Area: React.FC<ChartProps> = ({ categories, series, height = 350, title = 'Admissions' }) => {
-  const maxStack = Math.max(
-    ...categories.map((_, i) => series.reduce((s, ser) => s + (ser.data[i] ?? 0), 0))
-  );
-  const yMax = Math.max(100, Math.ceil(maxStack / 50) * 50);
-
-  const apexOptions: ApexOptions = {
-    chart: {
-      foreColor: 'var(--color-text)',
-      type: 'area',
-      stacked: true,
-      stackType: 'normal',
-      toolbar: { show: false },
-      zoom: { enabled: false },
-      animations: { enabled: true },
-      fontFamily: "Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial",
-    },
-    title: {
-      text: title,
-      align: 'center',
-      style: { fontSize: '36px', fontWeight: 700, color: '#555' },
-    },
-    colors: defaultColors,
-    dataLabels: { enabled: false },
-    stroke: { curve: 'smooth', width: 1.5 },
-    fill: { type: 'solid', opacity: 0.95 },
-    markers: { size: 0 },
-    legend: {
-      show: true,
-      position: 'top',
-      horizontalAlign: 'center',
-      itemMargin: { horizontal: 8, vertical: 0 },
-    },
-    xaxis: {
-      categories,
-      labels: { rotate: -45, rotateAlways: true, style: { fontSize: '12px' } },
-      tickPlacement: 'on',
-    },
-    yaxis: {
-      min: 0,
-      max: yMax,
-      tickAmount: 7,
-      labels: { formatter: (val) => String(Math.round(Number(val))) },
-    },
-    grid: { borderColor: '#e9e9e9', strokeDashArray: 0 },
-    tooltip: {
-      shared: true,
-      intersect: false,
-      y: { formatter: (val: number) => String(val) },
-    },
-    responsive: [
-      {
-        breakpoint: 768,
-        options: {
-          chart: { height: Math.max(240, Math.round(height * 0.7)) },
-          legend: { position: 'top' },
-          xaxis: { labels: { rotate: -45 } },
-        },
-      },
-    ],
-  };
-
-  const apexSeries = series.map((s) => ({
-    name: s.name,
-    type: 'area' as const,
-    data: s.data,
-  }));
-
-  return (
-    <Chart options={apexOptions} series={apexSeries} type='area' height={height} width='100%' />
-  );
-};
-
-export default Area;
+import React from 'react';
+import Chart from 'react-apexcharts';
+import type { ApexOptions } from 'apexcharts';
+import { Move } from 'lucide-react';
+
+export type SeriesItem = { name: string; data: number[] };
+
+interface ChartProps {
+  categories: string[];
+  series: SeriesItem[];
+  height?: number;
+  title?: string;
+  draggable?: boolean;
+}
+
+const defaultColors = ['#e24b33', '#e2b23a', '#6feff0', '#2f5be8'];
+
+const Area: React.FC<ChartProps> = ({
+  categories,
+  series,
+  height = 350,
+  title = 'Admissions',
+  draggable = false,
+}) => {
+  const maxStack = Math.max(
+    ...categories.map((_, i) => series.reduce((s, ser) => s + (ser.data[i] ?? 0), 0))
+  );
+  const yMax = Math.max(100, Math.ceil(maxStack / 50) * 50);
+
+  const apexOptions: ApexOptions = {
+    chart: {
+      foreColor: 'var(--color-text)',
+      type: 'area',
+      stacked: true,
+      stackType: 'normal',
+      toolbar: { show: false },
+      zoom: { enabled: false },
+      animations: { enabled: true },
+      fontFamily: "Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial",
+    },
+    title: {
+      text: title,
+      align: 'center',
+      style: { fontSize: '36px', fontWeight: 700, color: '#555' },
+    },
+    colors: defaultColors,
+    dataLabels: { enabled: false },
+    stroke: { curve: 'smooth', width: 1.5 },
+    fill: { type: 'solid', opacity: 0.95 },
+    markers: { size: 0 },
+    legend: {
+      show: true,
+      position: 'top',
+      horizontalAlign: 'center',
+      itemMargin: { horizontal: 8, vertical: 0 },
+    },
+    xaxis: {
+      categories,
+      labels: { rotate: -45, rotateAlways: true, style: { fontSize: '12px' } },
+      tickPlacement: 'on',
+    },
+    yaxis: {
+      min: 0,
+      max: yMax,
+      tickAmount: 7,
+      labels: { formatter: (val) => String(Math.round(Number(val))) },
+    },
+    grid: { borderColor: '#e9e9e9', strokeDashArray: 0 },
+    tooltip: {
+      shared: true,
+      intersect: false,
+      y: { formatter: (val: number) => String(val) },
+    },
+    responsive: [
+      {
+        breakpoint: 768,
+        options: {
+          chart: { height: Math.max(240, Math.round(height * 0.7)) },
+          legend: { position: 'top' },
+          xaxis: { labels: { rotate: -45 } },
+        },
+      },
+    ],
+  };
+
+  const apexSeries = series.map((s) => ({
+    name: s.name,
+    type: 'area' as const,
+    data: s.data,
+  }));
+
+  return (
+    <div
+      style={{
+        position: 'relative',
+        height,
+        width: '100%',
+        overflow: 'hidden',
+      }}
+    >
+      {/* Chart visible ou masqué */}
+      <div style={{ opacity: draggable ? 0 : 1, transition: 'opacity 0.2s ease-in-out' }}>
+        <Chart options={apexOptions} series={apexSeries} type='area' height={height} width='100%' />
+      </div>
+
+      {/* Overlay Move */}
+      {draggable && (
+        <div
+          style={{
+            position: 'absolute',
+            inset: 0,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            background: 'rgba(255, 255, 255, 0.6)',
+            borderRadius: 12,
+            backdropFilter: 'blur(3px)',
+            pointerEvents: 'none',
+            transition: 'opacity 0.2s ease-in-out',
+          }}
+        >
+          <Move size={38} strokeWidth={1.5} style={{ opacity: 0.85 }} />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Area;

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

@@ -1,132 +1,171 @@
-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;
+import React from 'react';
+import Chart from 'react-apexcharts';
+import type { ApexOptions } from 'apexcharts';
+import { Move } from 'lucide-react';
+
+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;
+  draggable?: boolean;
+}
+
+/** 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,
+  draggable = false,
+}) => {
+  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 (
+    <div
+      style={{
+        position: 'relative',
+        height: cfg.height,
+        width: '100%',
+        overflow: 'hidden',
+      }}
+    >
+      {/* Chart affiché normalement */}
+      <div style={{ opacity: draggable ? 0 : 1, transition: 'opacity 0.15s ease-in-out' }}>
+        <Chart
+          options={options}
+          series={series as unknown as ApexOptions['series']}
+          type='bar'
+          height={cfg.height}
+          width='100%'
+        />
+      </div>
+
+      {/* Overlay Move */}
+      {draggable && (
+        <div
+          style={{
+            position: 'absolute',
+            inset: 0,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            background: 'rgba(255,255,255,0.5)',
+            borderRadius: 12,
+            backdropFilter: 'blur(3px)',
+            pointerEvents: 'none',
+            transition: 'opacity 0.15s ease-in-out',
+          }}
+        >
+          <Move size={36} strokeWidth={1.5} style={{ opacity: 0.85 }} />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default HorizontalBarChart;