tekivex-ui 2.5.15 → 2.6.0

package/src/components/TkxRealTimeChart.tsx

@@ -1,383 +0,0 @@
-'use client';
-
-import {
-  useState,
-  useEffect,
-  useRef,
-  useCallback,
-  useMemo,
-  createElement,
-  type CSSProperties,
-} from 'react';
-import { useTheme } from '../themes';
-import { sanitizeString } from '../engine/security';
-import { tkx } from '../engine/tkx';
-
-// ── Types ────────────────────────────────────────────────────────────────────
-
-export interface ChartDataPoint {
-  timestamp: number;
-  value: number;
-  label?: string;
-}
-
-export interface TkxRealTimeChartProps {
-  data: ChartDataPoint[];
-  maxPoints?: number;
-  height?: number;
-  width?: number | string;
-  color?: string;
-  fill?: boolean;
-  showGrid?: boolean;
-  showLabels?: boolean;
-  showTooltip?: boolean;
-  label?: string;
-  unit?: string;
-  animate?: boolean;
-  yMin?: number;
-  yMax?: number;
-}
-
-// ── Helpers ──────────────────────────────────────────────────────────────────
-
-function formatTime(ts: number): string {
-  const d = new Date(ts);
-  const hh = String(d.getHours()).padStart(2, '0');
-  const mm = String(d.getMinutes()).padStart(2, '0');
-  const ss = String(d.getSeconds()).padStart(2, '0');
-  return `${hh}:${mm}:${ss}`;
-}
-
-function formatYLabel(val: number): string {
-  if (Math.abs(val) >= 1_000_000) return `${(val / 1_000_000).toFixed(1)}M`;
-  if (Math.abs(val) >= 1_000) return `${(val / 1_000).toFixed(1)}k`;
-  if (Number.isInteger(val)) return String(val);
-  return val.toFixed(2);
-}
-
-// ── TkxRealTimeChart ─────────────────────────────────────────────────────────
-
-export function TkxRealTimeChart({
-  data,
-  maxPoints = 60,
-  height = 200,
-  width = '100%',
-  color,
-  fill = true,
-  showGrid = true,
-  showLabels = true,
-  showTooltip = true,
-  label,
-  unit,
-  animate = true,
-  yMin,
-  yMax,
-}: TkxRealTimeChartProps) {
-  const theme = useTheme();
-  const lineColor = color ?? theme.primary;
-
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [containerWidth, setContainerWidth] = useState(600);
-  const [tooltip, setTooltip] = useState<{ x: number; y: number; point: ChartDataPoint } | null>(null);
-  const [animKey, setAnimKey] = useState(0);
-  const prevDataLenRef = useRef(data.length);
-
-  // Measure container width
-  useEffect(() => {
-    if (!containerRef.current) return;
-    const ro = new ResizeObserver((entries) => {
-      const entry = entries[0];
-      if (entry) setContainerWidth(entry.contentRect.width);
-    });
-    ro.observe(containerRef.current);
-    setContainerWidth(containerRef.current.offsetWidth);
-    return () => ro.disconnect();
-  }, []);
-
-  // Trim to maxPoints
-  const points = useMemo(
-    () => data.slice(-maxPoints),
-    [data, maxPoints],
-  );
-
-  // Trigger animate key when new point arrives
-  useEffect(() => {
-    if (points.length > prevDataLenRef.current) {
-      setAnimKey((k) => k + 1);
-    }
-    prevDataLenRef.current = points.length;
-  }, [points.length]);
-
-  const PADDING_LEFT = showLabels ? 48 : 12;
-  const PADDING_RIGHT = 12;
-  const PADDING_TOP = label ? 28 : 12;
-  const PADDING_BOTTOM = 28;
-
-  const chartW = Math.max(containerWidth - PADDING_LEFT - PADDING_RIGHT, 1);
-  const chartH = Math.max(height - PADDING_TOP - PADDING_BOTTOM, 1);
-
-  // Scales
-  const rawMinY = points.length ? Math.min(...points.map((p) => p.value)) : 0;
-  const rawMaxY = points.length ? Math.max(...points.map((p) => p.value)) : 1;
-  const dataRange = rawMaxY - rawMinY || 1;
-  const minY = yMin !== undefined ? yMin : rawMinY - dataRange * 0.1;
-  const maxY = yMax !== undefined ? yMax : rawMaxY + dataRange * 0.1;
-  const yRange = maxY - minY || 1;
-
-  function toSvgX(i: number): number {
-    if (points.length < 2) return chartW / 2;
-    return (i / (points.length - 1)) * chartW;
-  }
-
-  function toSvgY(v: number): number {
-    return chartH - ((v - minY) / yRange) * chartH;
-  }
-
-  // Paths
-  const linePath = points.length >= 2
-    ? points.map((p, i) => `${i === 0 ? 'M' : 'L'}${toSvgX(i).toFixed(2)},${toSvgY(p.value).toFixed(2)}`).join(' ')
-    : '';
-
-  const areaPath = linePath
-    ? `${linePath} L${toSvgX(points.length - 1).toFixed(2)},${chartH} L${toSvgX(0).toFixed(2)},${chartH} Z`
-    : '';
-
-  // Grid lines
-  const GRID_LINES = 4;
-  const gridLines: number[] = [];
-  for (let i = 0; i <= GRID_LINES; i++) {
-    gridLines.push(i);
-  }
-
-  // Y labels
-  const yLabels = gridLines.map((i) => {
-    const v = minY + (i / GRID_LINES) * yRange;
-    const y = toSvgY(v);
-    return { y, text: formatYLabel(v) };
-  });
-
-  // X labels (last 4 timestamps)
-  const xLabelCount = Math.min(4, points.length);
-  const xLabelIndices = xLabelCount > 0
-    ? Array.from({ length: xLabelCount }, (_, k) =>
-        Math.round((k / Math.max(xLabelCount - 1, 1)) * (points.length - 1)),
-      )
-    : [];
-
-  // Tooltip on mouse move
-  const handleMouseMove = useCallback(
-    (e: React.MouseEvent<SVGSVGElement>) => {
-      if (!showTooltip || points.length === 0) return;
-      const rect = e.currentTarget.getBoundingClientRect();
-      const mx = e.clientX - rect.left - PADDING_LEFT;
-      // Find nearest point
-      let nearest = 0;
-      let nearestDist = Infinity;
-      points.forEach((p, i) => {
-        const dx = Math.abs(toSvgX(i) - mx);
-        if (dx < nearestDist) { nearestDist = dx; nearest = i; }
-      });
-      const pt = points[nearest];
-      if (!pt) return;
-      const svgX = toSvgX(nearest) + PADDING_LEFT;
-      const svgY = toSvgY(pt.value) + PADDING_TOP;
-      setTooltip({ x: svgX, y: svgY, point: pt });
-    },
-    [points, showTooltip, PADDING_LEFT, PADDING_TOP],
-  );
-
-  const handleMouseLeave = useCallback(() => setTooltip(null), []);
-
-  const svgW = containerWidth;
-  const svgH = height;
-
-  // Animate: clip rect that expands from right
-  const animId = `tkx-chart-clip-${animKey}`;
-
-  const wrapStyle: CSSProperties = {
-    position: 'relative',
-    width: typeof width === 'number' ? `${width}px` : width,
-    background: theme.surface,
-    border: `1px solid ${theme.border}`,
-    borderRadius: 8,
-    overflow: 'hidden',
-    boxSizing: 'border-box',
-  };
-
-  return createElement(
-    'div',
-    { ref: containerRef, style: wrapStyle },
-    createElement(
-      'svg',
-      {
-        width: svgW,
-        height: svgH,
-        viewBox: `0 0 ${svgW} ${svgH}`,
-        onMouseMove: handleMouseMove,
-        onMouseLeave: handleMouseLeave,
-        style: { display: 'block', userSelect: 'none' },
-        'aria-label': label ? sanitizeString(label) : 'Real-time chart',
-      },
-      // Defs: clip for animation
-      animate && points.length >= 2 && createElement(
-        'defs',
-        null,
-        createElement(
-          'clipPath',
-          { id: animId },
-          createElement('rect', {
-            x: 0,
-            y: 0,
-            width: chartW,
-            height: svgH,
-          },
-          createElement('animate', {
-            attributeName: 'width',
-            from: Math.max(0, chartW - chartW / Math.max(points.length - 1, 1)),
-            to: chartW,
-            dur: '0.3s',
-            fill: 'freeze',
-          }),
-          ),
-        ),
-      ),
-
-      // Chart title
-      label && createElement(
-        'text',
-        {
-          x: PADDING_LEFT,
-          y: 18,
-          fill: theme.textMuted,
-          fontSize: 12,
-          fontWeight: 500,
-        },
-        sanitizeString(label),
-      ),
-
-      // Grid lines
-      showGrid && gridLines.map((i) => {
-        const yPos = toSvgY(minY + (i / GRID_LINES) * yRange) + PADDING_TOP;
-        return createElement('line', {
-          key: `grid-${i}`,
-          x1: PADDING_LEFT,
-          y1: yPos,
-          x2: PADDING_LEFT + chartW,
-          y2: yPos,
-          stroke: theme.border,
-          strokeWidth: 1,
-          strokeDasharray: '4 4',
-        });
-      }),
-
-      // Y axis labels
-      showLabels && yLabels.map((yl, i) => createElement(
-        'text',
-        {
-          key: `yl-${i}`,
-          x: PADDING_LEFT - 4,
-          y: yl.y + PADDING_TOP + 4,
-          fill: theme.textMuted,
-          fontSize: 10,
-          textAnchor: 'end',
-        },
-        yl.text,
-      )),
-
-      // Y axis unit
-      unit && createElement(
-        'text',
-        { x: 4, y: PADDING_TOP + 10, fill: theme.textMuted, fontSize: 9 },
-        sanitizeString(unit),
-      ),
-
-      // Area fill
-      fill && areaPath && createElement('path', {
-        d: areaPath,
-        fill: `${lineColor}22`,
-        clipPath: animate ? `url(#${animId})` : undefined,
-        transform: `translate(${PADDING_LEFT}, ${PADDING_TOP})`,
-      }),
-
-      // Data line
-      linePath && createElement('path', {
-        d: linePath,
-        fill: 'none',
-        stroke: lineColor,
-        strokeWidth: 2,
-        strokeLinejoin: 'round',
-        strokeLinecap: 'round',
-        clipPath: animate ? `url(#${animId})` : undefined,
-        transform: `translate(${PADDING_LEFT}, ${PADDING_TOP})`,
-      }),
-
-      // X axis labels
-      xLabelIndices.map((idx) => {
-        const pt = points[idx];
-        if (!pt) return null;
-        return createElement(
-          'text',
-          {
-            key: `xl-${idx}`,
-            x: PADDING_LEFT + toSvgX(idx),
-            y: svgH - 8,
-            fill: theme.textMuted,
-            fontSize: 9,
-            textAnchor: 'middle',
-          },
-          formatTime(pt.timestamp),
-        );
-      }),
-
-      // Tooltip vertical line
-      tooltip && createElement('line', {
-        x1: tooltip.x,
-        y1: PADDING_TOP,
-        x2: tooltip.x,
-        y2: PADDING_TOP + chartH,
-        stroke: lineColor,
-        strokeWidth: 1,
-        strokeDasharray: '3 3',
-        opacity: 0.6,
-      }),
-
-      // Tooltip dot
-      tooltip && createElement('circle', {
-        cx: tooltip.x,
-        cy: tooltip.y,
-        r: 4,
-        fill: lineColor,
-        stroke: theme.surface,
-        strokeWidth: 2,
-      }),
-
-      // Tooltip box
-      tooltip && (() => {
-        const tx = Math.min(tooltip.x + 8, svgW - 100);
-        const ty = Math.max(tooltip.y - 36, 4);
-        const valText = `${formatYLabel(tooltip.point.value)}${unit ? unit : ''}`;
-        const tsText = formatTime(tooltip.point.timestamp);
-        return createElement(
-          'g',
-          null,
-          createElement('rect', {
-            x: tx - 4,
-            y: ty - 2,
-            width: 90,
-            height: 34,
-            rx: 4,
-            fill: theme.surfaceAlt,
-            stroke: theme.border,
-            strokeWidth: 1,
-          }),
-          createElement('text', { x: tx, y: ty + 11, fill: theme.text, fontSize: 12, fontWeight: 700 }, valText),
-          createElement('text', { x: tx, y: ty + 26, fill: theme.textMuted, fontSize: 10 }, tsText),
-        );
-      })(),
-    ),
-  );
-}
-
-// Satisfy import requirement
-void tkx;
-void sanitizeString;

package/src/components/TkxResult.tsx

@@ -1,130 +0,0 @@
-'use client';
-
-import { type ReactNode } from 'react';
-import { useTheme } from '../themes';
-import { sanitizeString } from '../engine/security';
-import { useReducedMotion } from '../hooks';
-import { tkx } from '../engine/tkx';
-
-// ── Types ────────────────────────────────────────────────────────────────────
-
-export type ResultStatus = 'success' | 'error' | 'warning' | 'info' | '404' | '403' | '500';
-
-export interface TkxResultProps {
-  status: ResultStatus;
-  title: string;
-  subTitle?: string;
-  icon?: ReactNode;
-  extra?: ReactNode;
-}
-
-// ── Status Icons (SVG) ──────────────────────────────────────────────────────
-
-const STATUS_ICONS: Record<ResultStatus, (color: string) => ReactNode> = {
-  success: (c) => (
-    <svg width="72" height="72" viewBox="0 0 72 72" fill="none" aria-hidden="true">
-      <circle cx="36" cy="36" r="34" stroke={c} strokeWidth="3" fill={`${c}18`} />
-      <path d="M22 37l9 9 19-19" stroke={c} strokeWidth="4" strokeLinecap="round" strokeLinejoin="round" />
-    </svg>
-  ),
-  error: (c) => (
-    <svg width="72" height="72" viewBox="0 0 72 72" fill="none" aria-hidden="true">
-      <circle cx="36" cy="36" r="34" stroke={c} strokeWidth="3" fill={`${c}18`} />
-      <path d="M26 26l20 20M46 26L26 46" stroke={c} strokeWidth="4" strokeLinecap="round" />
-    </svg>
-  ),
-  warning: (c) => (
-    <svg width="72" height="72" viewBox="0 0 72 72" fill="none" aria-hidden="true">
-      <path d="M36 6L4 64h64L36 6z" stroke={c} strokeWidth="3" fill={`${c}18`} />
-      <path d="M36 30v16" stroke={c} strokeWidth="4" strokeLinecap="round" />
-      <circle cx="36" cy="54" r="2.5" fill={c} />
-    </svg>
-  ),
-  info: (c) => (
-    <svg width="72" height="72" viewBox="0 0 72 72" fill="none" aria-hidden="true">
-      <circle cx="36" cy="36" r="34" stroke={c} strokeWidth="3" fill={`${c}18`} />
-      <path d="M36 32v18" stroke={c} strokeWidth="4" strokeLinecap="round" />
-      <circle cx="36" cy="22" r="2.5" fill={c} />
-    </svg>
-  ),
-  '404': (c) => (
-    <svg width="72" height="72" viewBox="0 0 72 72" fill="none" aria-hidden="true">
-      <circle cx="36" cy="36" r="34" stroke={c} strokeWidth="3" fill={`${c}18`} />
-      <text x="36" y="44" textAnchor="middle" fontSize="22" fontWeight="bold" fill={c}>404</text>
-    </svg>
-  ),
-  '403': (c) => (
-    <svg width="72" height="72" viewBox="0 0 72 72" fill="none" aria-hidden="true">
-      <circle cx="36" cy="36" r="34" stroke={c} strokeWidth="3" fill={`${c}18`} />
-      <path d="M28 30h16v16H28z" stroke={c} strokeWidth="3" fill="none" />
-      <path d="M32 30v-4a4 4 0 018 0v4" stroke={c} strokeWidth="3" fill="none" />
-    </svg>
-  ),
-  '500': (c) => (
-    <svg width="72" height="72" viewBox="0 0 72 72" fill="none" aria-hidden="true">
-      <circle cx="36" cy="36" r="34" stroke={c} strokeWidth="3" fill={`${c}18`} />
-      <text x="36" y="44" textAnchor="middle" fontSize="22" fontWeight="bold" fill={c}>500</text>
-    </svg>
-  ),
-};
-
-// ── Color Mapping ────────────────────────────────────────────────────────────
-
-function getStatusColor(status: ResultStatus, theme: ReturnType<typeof useTheme>): string {
-  switch (status) {
-    case 'success': return theme.success;
-    case 'error':
-    case '500': return theme.danger;
-    case 'warning': return theme.warning;
-    case 'info': return theme.info;
-    case '404':
-    case '403': return theme.textMuted;
-  }
-}
-
-// ── Component ────────────────────────────────────────────────────────────────
-
-export function TkxResult({ status, title, subTitle, icon, extra }: TkxResultProps) {
-  const theme = useTheme();
-  const reducedMotion = useReducedMotion();
-  const accentColor = getStatusColor(status, theme);
-  const safeTitle = sanitizeString(title);
-  const safeSubTitle = subTitle ? sanitizeString(subTitle) : undefined;
-
-  return (
-    <div
-      role="status"
-      aria-live="polite"
-      className={tkx('flex flex-col items-center text-center px-6 py-12 font-sans')}
-      style={{
-        animation: reducedMotion ? 'none' : 'tkxFadeIn 0.3s ease',
-      }}
-    >
-      <div className={tkx('mb-6')}>
-        {icon ?? STATUS_ICONS[status](accentColor)}
-      </div>
-
-      <h2
-        className={tkx('text-xl font-semibold m-0 mb-2')}
-        style={{ color: theme.text }}
-      >
-        {safeTitle}
-      </h2>
-
-      {safeSubTitle && (
-        <p
-          className={tkx('text-sm m-0 mb-6 max-w-md leading-relaxed')}
-          style={{ color: theme.textMuted }}
-        >
-          {safeSubTitle}
-        </p>
-      )}
-
-      {extra && (
-        <div className={tkx('flex items-center gap-3 mt-4')}>
-          {extra}
-        </div>
-      )}
-    </div>
-  );
-}