@tsiky/components-r19 1.0.0

package/src/components/PerformanceCard/PerformanceCard.tsx

@@ -0,0 +1,198 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from 'react';
+import MetricsPanel from '../MetricsPanel/MetricsPanel';
+import { usePerformanceCard } from './tools/usePerformanceCard';
+import { defaultHistogramRenderer } from './defaultHistogramRenderer';
+import type { PerformanceCardData, PerformanceCardProps as BaseProps } from './tools/types';
+import styles from './PerformanceCard.module.css';
+
+// icons
+import { TrendingUp, TrendingDown } from 'lucide-react';
+
+type PerformanceCardProps = BaseProps & {
+  /**
+   * Contrôles de dimensions simples.
+   * Exemples acceptés: '320px', '100%', '24rem'
+   */
+  width?: string;
+  maxWidth?: string;
+  height?: string;
+  /**
+   * Hauteur du container du graphique (ex: '92px', '120px')
+   */
+  chartHeight?: string;
+  /**
+   * style additionnel appliqué au root
+   */
+  style?: React.CSSProperties;
+};
+
+const PerformanceCard: React.FC<PerformanceCardProps> = ({
+  data,
+  className = '',
+  compact = false,
+  editable = false,
+  onChange,
+  mapToMetricsItem,
+  renderHistogram,
+  defaultColors,
+  // new sizing props
+  width,
+  maxWidth,
+  height,
+  chartHeight,
+  style,
+}) => {
+  const { local, histogramNormalized, autoFooter, updatePartial, toMetricsItems } =
+    usePerformanceCard(data, defaultColors);
+
+  const metricsPanelItems = toMetricsItems(local.topMetrics || [], mapToMetricsItem);
+
+  const handleUpdate = (next: Partial<PerformanceCardData>) => {
+    const merged = updatePartial(next);
+    onChange?.(merged);
+  };
+
+  const parseValue = (val?: React.ReactNode): number => {
+    if (val == null) return NaN;
+
+    if (typeof val === 'number') return val;
+
+    if (typeof val === 'string') {
+      return Number(val.replace('%', '').trim());
+    }
+
+    // JSX.Element, boolean, etc. → pas comparable
+    return NaN;
+  };
+
+  const normalize = (s?: string) =>
+    s
+      ?.normalize('NFD')
+      .replace(/[\u0300-\u036f]/g, '')
+      .toLowerCase() ?? '';
+
+  const prediction = local.topMetrics?.find((m) => normalize(m.label).includes('pred'));
+  const performance = local.topMetrics?.find((m) => normalize(m.label).includes('perf'));
+
+  const perfVal = parseValue(performance?.value);
+  const predVal = parseValue(prediction?.value);
+
+  const isUp = !isNaN(perfVal) && !isNaN(predVal) && perfVal >= predVal;
+
+  // CSS custom properties for sizing (fallbacks are in CSS)
+  const cssVars: React.CSSProperties = {
+    ['--pc-width' as any]: width,
+    ['--pc-max-width' as any]: maxWidth,
+    ['--pc-height' as any]: height,
+    ['--pc-chart-height' as any]: chartHeight,
+  };
+
+  return (
+    <div
+      className={[styles.card, compact ? styles.compact : '', className].join(' ')}
+      style={{ ...cssVars, ...(style ?? {}) }}
+    >
+      <div className={styles.headerRow}>
+        <div className={styles.title}>{local.title ?? 'Performance'}</div>
+        <div className={styles.headerActions} aria-hidden>
+          {isUp ? (
+            <TrendingUp size={18} className={styles.trendUp} />
+          ) : (
+            <TrendingDown size={18} className={styles.trendDown} />
+          )}
+        </div>
+      </div>
+
+      <div className={styles.metricsRow}>
+        <MetricsPanel
+          className={styles.metricsPanel}
+          items={metricsPanelItems}
+          summary
+          orientation='horizontal'
+        />
+      </div>
+
+      {renderHistogram
+        ? renderHistogram(histogramNormalized)
+        : defaultHistogramRenderer(histogramNormalized)}
+
+      <div className={styles.footerRow}>
+        <div className={styles.footerNote}>
+          {local.footerLeft ?? (autoFooter ? autoFooter.left : null) ?? (
+            <span className={styles.placeholder}>—</span>
+          )}
+        </div>
+        <div className={styles.footerNoteRight}>
+          {local.footerRight ?? (autoFooter ? autoFooter.right : null) ?? (
+            <span className={styles.placeholder}>—</span>
+          )}
+        </div>
+      </div>
+
+      {editable && (
+        <div className={styles.editorContainer}>
+          <div className={styles.editorColumn}>
+            <strong>Top metrics</strong>
+            <div className={styles.editorList}>
+              {local.topMetrics.map((m, idx) => (
+                <div className={styles.editorRow} key={m.id ?? `${m.label}-${idx}`}>
+                  <input
+                    className={styles.editorInputLabel}
+                    value={String(m.label)}
+                    onChange={(e) => {
+                      const next = [...local.topMetrics];
+                      next[idx] = { ...next[idx], label: e.target.value };
+                      handleUpdate({ topMetrics: next });
+                    }}
+                  />
+                  <input
+                    className={styles.editorInputValue}
+                    value={String(m.value)}
+                    onChange={(e) => {
+                      const next = [...local.topMetrics];
+                      next[idx] = { ...next[idx], value: e.target.value };
+                      handleUpdate({ topMetrics: next });
+                    }}
+                  />
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <div className={styles.editorColumn}>
+            <strong>Histogram</strong>
+            <div className={styles.editorList}>
+              {local.histogram?.map((b, idx) => (
+                <div className={styles.editorRow} key={b.id ?? idx}>
+                  <input
+                    className={styles.editorInputLabel}
+                    value={String(b.label ?? '')}
+                    placeholder='label'
+                    onChange={(e) => {
+                      const next = (local.histogram || []).slice();
+                      next[idx] = { ...next[idx], label: e.target.value };
+                      handleUpdate({ histogram: next });
+                    }}
+                  />
+                  <input
+                    className={styles.editorInputValue}
+                    type='number'
+                    value={String(b.value)}
+                    onChange={(e) => {
+                      const next = (local.histogram || []).slice();
+                      next[idx] = { ...next[idx], value: Number(e.target.value) };
+                      handleUpdate({ histogram: next });
+                    }}
+                  />
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default React.memo(PerformanceCard);

package/src/components/PerformanceCard/defaultHistogramRenderer.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import styles from './PerformanceCard.module.css';
+
+interface HistogramBarNormalized {
+  id?: string | number;
+  label?: string;
+  value: number;
+  color?: string;
+  normalized: number;
+}
+
+export const defaultHistogramRenderer = (bars: HistogramBarNormalized[]) => (
+  <div className={styles.chartContainer} aria-hidden>
+    <div className={styles.chartInner}>
+      <div className={styles.dynamicBars} style={{ ['--bars-count' as never]: bars.length }}>
+        {bars.map((b) => (
+          <div key={String(b.id ?? b.label ?? Math.random())} className={styles.dynamicBarWrapper}>
+            <div
+              className={styles.dynamicBar}
+              title={`${b.label ?? ''}: ${b.value}`}
+              style={{
+                height: `${b.normalized}%`,
+                background: b.color,
+              }}
+            />
+            {b.label && <div className={styles.barLabel}>{b.label}</div>}
+          </div>
+        ))}
+      </div>
+    </div>
+  </div>
+);

package/src/components/PerformanceCard/tools/types.ts

@@ -0,0 +1,50 @@
+// types.ts
+import type { MetricsItem } from '../../MetricsPanel/tools/MetricsPanelTypes';
+
+export type TopMetric = {
+  id: string | number;
+  label: string;
+  value: string | number | React.ReactNode;
+  color?: string;
+  bgColor?: string;
+  borderColor?: string;
+  valueColor?: string;
+  subLabel?: string | React.ReactNode;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  badge?: any;
+};
+
+export type HistogramBar = {
+  id?: string | number;
+  label?: string;
+  value: number;
+  color?: string;
+};
+
+export type PerformanceCardColors = {
+  defaultMuted?: string;
+  defaultPrimary?: string;
+  defaultSuccess?: string;
+  accent?: string;
+};
+
+export type PerformanceCardData = {
+  id?: string | number;
+  title?: string;
+  topMetrics: TopMetric[];
+  histogram?: HistogramBar[];
+  footerLeft?: string | React.ReactNode;
+  footerRight?: string | React.ReactNode;
+  colors?: PerformanceCardColors;
+};
+
+export interface PerformanceCardProps {
+  data: PerformanceCardData;
+  className?: string;
+  compact?: boolean;
+  editable?: boolean;
+  onChange?: (next: PerformanceCardData) => void;
+  mapToMetricsItem?: (m: TopMetric) => MetricsItem;
+  renderHistogram?: (bars: HistogramBar[]) => React.ReactNode;
+  defaultColors?: PerformanceCardColors;
+}

package/src/components/PerformanceCard/tools/usePerformanceCard.ts

@@ -0,0 +1,93 @@
+import { useEffect, useMemo, useState } from 'react';
+import type { PerformanceCardColors, PerformanceCardData, TopMetric } from './types';
+
+export const DEFAULT_COLORS: PerformanceCardColors = {
+  defaultMuted: '#9ca3af',
+  defaultPrimary: '#4f46e5',
+  defaultSuccess: '#10b981',
+  accent: '#7c3aed',
+};
+
+export const usePerformanceCard = (
+  data: PerformanceCardData,
+  defaultColors?: PerformanceCardColors
+) => {
+  const [local, setLocal] = useState<PerformanceCardData>(data);
+
+  useEffect(() => setLocal(data), [data]);
+
+  const mergedColors: PerformanceCardColors = {
+    ...DEFAULT_COLORS,
+    ...(defaultColors || {}),
+    ...(data.colors || {}),
+  };
+
+  const defaultMap = (m: TopMetric) => ({
+    id: m.id ?? `${m.label}-${String(m.value)}`,
+    label: m.label,
+    subLabel: m.subLabel,
+    value: m.value,
+    valueColor: m.valueColor ?? m.color ?? undefined,
+    bgColor: m.bgColor,
+    borderColor: m.borderColor,
+    badge: m.badge,
+  });
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const toMetricsItems = (dataList: TopMetric[], mapToMetricsItem?: (m: TopMetric) => any) =>
+    dataList.map((m) => (mapToMetricsItem ? mapToMetricsItem(m) : defaultMap(m)));
+
+  const histogramBars = local.histogram ?? [];
+
+  const histogramNormalized = useMemo(() => {
+    if (!histogramBars.length) return [];
+    const vals = histogramBars.map((b) => (Number.isFinite(b.value) ? b.value : 0));
+    const max = Math.max(...vals, 1);
+    return histogramBars.map((b) => ({
+      ...b,
+      normalized: Math.max(0, Math.round((b.value / max) * 100)),
+      color: b.color ?? mergedColors.defaultPrimary,
+    }));
+  }, [histogramBars, mergedColors.defaultPrimary]);
+
+  const autoFooter = useMemo(() => {
+    if (!local.topMetrics || local.topMetrics.length < 2) return null;
+
+    const tryNumber = (v: unknown) => {
+      if (typeof v === 'number') return v;
+      if (typeof v === 'string') {
+        const n = parseFloat(v.replace('%', '').trim());
+        return Number.isFinite(n) ? n : NaN;
+      }
+      return NaN;
+    };
+
+    const a = tryNumber(local.topMetrics[0].value);
+    const b = tryNumber(local.topMetrics[1].value);
+
+    if (Number.isFinite(a) && Number.isFinite(b)) {
+      const diff = Math.round(a - b);
+      const sign = diff > 0 ? '+' : '';
+      return {
+        left: `${local.topMetrics[0].label} ${a}${typeof local.topMetrics[0].value === 'string' && String(local.topMetrics[0].value).includes('%') ? '%' : ''}`,
+        right: `${sign}${diff}${typeof local.topMetrics[0].value === 'string' && String(local.topMetrics[0].value).includes('%') ? '%' : ''}`,
+      };
+    }
+    return null;
+  }, [local.topMetrics]);
+
+  const updatePartial = (next: Partial<PerformanceCardData>) => {
+    const merged = { ...local, ...next };
+    setLocal(merged);
+    return merged;
+  };
+
+  return {
+    local,
+    mergedColors,
+    histogramNormalized,
+    autoFooter,
+    updatePartial,
+    toMetricsItems,
+  };
+};

package/src/components/PeriodRange/PeriodRange.module.css

@@ -0,0 +1,158 @@
+.wrapper {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 16px;
+  background: var(--color-card-background);
+  border-radius: 10px;
+  border: 1px solid rgba(16, 24, 40, 0.06);
+  box-shadow: 0 1px 0 rgba(16, 24, 40, 0.03);
+  width: 100%;
+}
+
+.label {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--color-text);
+  font-size: 14px;
+  flex: 0 0 auto;
+}
+
+.labelText {
+  display: inline-block;
+  color: var(--color-text);
+}
+
+.calendarIcon {
+  opacity: 0.75;
+  display: block;
+}
+
+.rangeRow {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  flex-wrap: nowrap;
+}
+
+.dateWrap {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+  flex: 1 1 0;
+}
+
+.innerLabel {
+  font-size: 12px;
+  color: #6b7280;
+  display: block;
+}
+
+.dateInput {
+  -webkit-appearance: none;
+  appearance: none;
+  border: 1px solid;
+  padding: 8px 10px;
+  border-radius: 8px;
+  border-color: var(--color-border);
+  font-size: 14px;
+  background: transparent;
+  width: 100%;
+  box-sizing: border-box;
+  color: var(--color-text);
+}
+
+.sepWrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 6px;
+}
+
+.separator {
+  color: #9ca3af;
+  font-weight: 600;
+  user-select: none;
+}
+
+.samplingWrap {
+  display: flex;
+  /* position: absolute; */
+  flex-direction: column;
+  gap: 6px;
+  min-width: 160px;
+  flex: 0 0 auto;
+}
+
+.samplingLabel {
+  font-size: 12px;
+  color: #374151;
+}
+
+.samplingSelect {
+  padding: 8px 10px;
+  border-radius: 8px;
+  border: 1px solid rgba(16, 24, 40, 0.06);
+  background: var(--color-background);
+  font-size: 14px;
+  box-sizing: border-box;
+  width: 100%;
+  border-color: var(--color-border);
+  color: var(--color-text);
+  cursor: pointer;
+}
+
+/* Responsive: stack on smaller screens */
+@media (max-width: 720px) {
+  .wrapper {
+    padding: 10px;
+  }
+  .rangeRow {
+    gap: 8px;
+  }
+  .label {
+    font-size: 13px;
+  }
+  .samplingWrap {
+    min-width: 140px;
+  }
+}
+
+@media (max-width: 520px) {
+  .wrapper {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 10px;
+  }
+
+  .label {
+    order: 0;
+  }
+  .rangeRow {
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: flex-start;
+  }
+
+  .dateWrap {
+    flex: 1 1 48%;
+  }
+  .sepWrap {
+    display: none;
+  }
+
+  .samplingWrap {
+    flex: 1 1 100%;
+    min-width: 0;
+  }
+}
+
+@media (max-width: 360px) {
+  .dateWrap {
+    flex: 1 1 100%;
+  }
+}

package/src/components/PeriodRange/PeriodRange.stories.tsx

@@ -0,0 +1,66 @@
+// components/PeriodRange/PeriodRange.stories.tsx
+import type { Meta, StoryObj } from '@storybook/react';
+import PeriodRange from './PeriodRange';
+
+const meta: Meta<typeof PeriodRange> = {
+  title: 'Components/PeriodRange',
+  component: PeriodRange,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof PeriodRange>;
+
+const DefaultCode = `<PeriodRange
+  start={new Date(new Date().setDate(new Date().getDate() - 7)).toISOString().slice(0, 10)}
+  end={new Date().toISOString().slice(0, 10)}
+  onChange={(range) => console.log('range', range)}
+  onSamplingChange={(sampling) => console.log('sampling', sampling)}
+/>`;
+
+export const Default: Story = {
+  args: {
+    start: new Date(new Date().setDate(new Date().getDate() - 7)).toISOString().slice(0, 10),
+    end: new Date().toISOString().slice(0, 10),
+    onChange: (r: any) => console.log('range', r),
+    onSamplingChange: (s: any) => console.log('sampling', s),
+  },
+  render: (args) => (
+    <div style={{ padding: 24, background: '#f8fafc' }}>
+      <PeriodRange {...args} />
+    </div>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        code: DefaultCode,
+      },
+    },
+  },
+};
+
+const CompactCode = `<PeriodRange />`;
+
+export const Compact: Story = {
+  args: {},
+  render: (args) => (
+    <div style={{ padding: 24 }}>
+      <PeriodRange {...args} />
+    </div>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        code: CompactCode,
+      },
+    },
+  },
+};