tekivex-ui 2.3.0 → 2.5.2

package/src/charts/TkxDonutChart.tsx

@@ -0,0 +1,145 @@
+import {
+  ResponsiveContainer,
+  PieChart,
+  Pie,
+  Cell,
+  Tooltip,
+  Legend,
+} from 'recharts';
+import { useTheme } from '../themes';
+import { getDefaultColors, tooltipStyle } from './shared';
+
+export interface TkxDonutChartSlice {
+  name: string;
+  value: number;
+  color?: string;
+}
+
+export interface TkxDonutChartProps {
+  data: TkxDonutChartSlice[];
+  height?: number;
+  showLegend?: boolean;
+  showTooltip?: boolean;
+  /** Center label — large text (e.g. total value) */
+  centerLabel?: string;
+  /** Center sublabel — small text below centerLabel */
+  centerSublabel?: string;
+  /** Inner radius as number or percentage string. Default: '55%' */
+  innerRadius?: number | string;
+  /** Outer radius as number or percentage string. Default: '75%' */
+  outerRadius?: number | string;
+  startAngle?: number;
+  ariaLabel?: string;
+}
+
+function CenterLabel({
+  cx, cy, label, sublabel, theme,
+}: {
+  cx: number; cy: number;
+  label?: string; sublabel?: string;
+  theme: any;
+}) {
+  if (!label && !sublabel) return null;
+  return (
+    <>
+      {label && (
+        <text x={cx} y={cy - (sublabel ? 8 : 0)} textAnchor="middle" dominantBaseline="middle"
+          fill={theme.text} fontSize={22} fontWeight={700} fontFamily="inherit">
+          {label}
+        </text>
+      )}
+      {sublabel && (
+        <text x={cx} y={cy + (label ? 18 : 0)} textAnchor="middle" dominantBaseline="middle"
+          fill={theme.textMuted} fontSize={13} fontFamily="inherit">
+          {sublabel}
+        </text>
+      )}
+    </>
+  );
+}
+
+export function TkxDonutChart({
+  data,
+  height = 300,
+  showLegend = true,
+  showTooltip = true,
+  centerLabel,
+  centerSublabel,
+  innerRadius = '55%',
+  outerRadius = '75%',
+  startAngle = 90,
+  ariaLabel = 'Donut chart',
+}: TkxDonutChartProps) {
+  const theme = useTheme();
+  const colors = getDefaultColors(theme);
+  const tt = tooltipStyle(theme);
+
+  return (
+    <div role="img" aria-label={ariaLabel} style={{ width: '100%', height }}>
+      <ResponsiveContainer width="100%" height="100%">
+        <PieChart>
+          {showTooltip && (
+            <Tooltip
+              contentStyle={tt.contentStyle}
+              labelStyle={tt.labelStyle}
+              itemStyle={tt.itemStyle}
+            />
+          )}
+          {showLegend && (
+            <Legend wrapperStyle={{ fontSize: 13, color: theme.textMuted }} />
+          )}
+          <Pie
+            data={data}
+            dataKey="value"
+            nameKey="name"
+            innerRadius={innerRadius}
+            outerRadius={outerRadius}
+            startAngle={startAngle}
+            endAngle={startAngle - 360}
+            strokeWidth={3}
+            stroke={theme.bg}
+            label={false}
+            labelLine={false}
+          >
+            {data.map((entry, i) => (
+              <Cell key={entry.name} fill={entry.color ?? colors[i % colors.length]} />
+            ))}
+            {/* Center text via customized label — recharts passes cx/cy to label */}
+          </Pie>
+          {/* SVG center label rendered as a separate layer */}
+          {(centerLabel || centerSublabel) && (
+            <text>
+              {/* This renders nothing — actual center text needs PieChart customization */}
+            </text>
+          )}
+        </PieChart>
+      </ResponsiveContainer>
+      {/* Overlay center label using absolute positioning */}
+      {(centerLabel || centerSublabel) && (
+        <div
+          style={{
+            position: 'absolute',
+            inset: 0,
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            pointerEvents: 'none',
+            marginTop: showLegend ? -24 : 0,
+          }}
+        >
+          {centerLabel && (
+            <span style={{ fontSize: 22, fontWeight: 700, color: theme.text, lineHeight: 1 }}>
+              {centerLabel}
+            </span>
+          )}
+          {centerSublabel && (
+            <span style={{ fontSize: 13, color: theme.textMuted, marginTop: 4 }}>
+              {centerSublabel}
+            </span>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/charts/TkxLineChart.tsx

@@ -0,0 +1,135 @@
+import {
+  ResponsiveContainer,
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ReferenceLine,
+} from 'recharts';
+import { useTheme } from '../themes';
+import { getDefaultColors, tooltipStyle, DEFAULT_MARGIN, type ChartMargin } from './shared';
+
+export interface TkxLineChartSeries {
+  key: string;
+  label?: string;
+  color?: string;
+  strokeWidth?: number;
+  dashed?: boolean;
+  dot?: boolean;
+}
+
+export interface TkxReferenceLineConfig {
+  y?: number;
+  x?: number | string;
+  label?: string;
+  color?: string;
+  dashed?: boolean;
+}
+
+export interface TkxLineChartProps {
+  data: Record<string, any>[];
+  series: TkxLineChartSeries[];
+  xKey: string;
+  height?: number;
+  margin?: ChartMargin;
+  showGrid?: boolean;
+  showLegend?: boolean;
+  showTooltip?: boolean;
+  smooth?: boolean;
+  referenceLines?: TkxReferenceLineConfig[];
+  xTickFormatter?: (value: any) => string;
+  yTickFormatter?: (value: any) => string;
+  yDomain?: [number | 'auto' | 'dataMin' | 'dataMax', number | 'auto' | 'dataMin' | 'dataMax'];
+  connectNulls?: boolean;
+  ariaLabel?: string;
+}
+
+export function TkxLineChart({
+  data,
+  series,
+  xKey,
+  height = 300,
+  margin = DEFAULT_MARGIN,
+  showGrid = true,
+  showLegend = true,
+  showTooltip = true,
+  smooth = true,
+  referenceLines = [],
+  xTickFormatter,
+  yTickFormatter,
+  yDomain,
+  connectNulls = false,
+  ariaLabel = 'Line chart',
+}: TkxLineChartProps) {
+  const theme = useTheme();
+  const colors = getDefaultColors(theme);
+  const tt = tooltipStyle(theme);
+  const tickStyle = { fill: theme.textMuted, fontSize: 12 };
+
+  return (
+    <div role="img" aria-label={ariaLabel} style={{ width: '100%', height }}>
+      <ResponsiveContainer width="100%" height="100%">
+        <LineChart data={data} margin={margin}>
+          {showGrid && (
+            <CartesianGrid strokeDasharray="3 3" stroke={theme.border} vertical={false} />
+          )}
+          <XAxis
+            dataKey={xKey}
+            tick={tickStyle}
+            axisLine={{ stroke: theme.border }}
+            tickLine={false}
+            tickFormatter={xTickFormatter}
+          />
+          <YAxis
+            tick={tickStyle}
+            axisLine={false}
+            tickLine={false}
+            tickFormatter={yTickFormatter}
+            domain={yDomain}
+          />
+          {showTooltip && (
+            <Tooltip
+              contentStyle={tt.contentStyle}
+              labelStyle={tt.labelStyle}
+              itemStyle={tt.itemStyle}
+              cursor={{ stroke: theme.border, strokeWidth: 1 }}
+            />
+          )}
+          {showLegend && (
+            <Legend wrapperStyle={{ fontSize: 13, color: theme.textMuted, paddingTop: 8 }} />
+          )}
+          {referenceLines.map((rl, i) => (
+            <ReferenceLine
+              key={i}
+              y={rl.y}
+              x={rl.x}
+              label={rl.label ? { value: rl.label, fill: theme.textMuted, fontSize: 11 } : undefined}
+              stroke={rl.color ?? theme.border}
+              strokeDasharray={rl.dashed ? '4 4' : undefined}
+            />
+          ))}
+          {series.map((s, i) => {
+            const color = s.color ?? colors[i % colors.length];
+            return (
+              <Line
+                key={s.key}
+                type={smooth ? 'monotone' : 'linear'}
+                dataKey={s.key}
+                name={s.label ?? s.key}
+                stroke={color}
+                strokeWidth={s.strokeWidth ?? 2}
+                strokeDasharray={s.dashed ? '6 3' : undefined}
+                dot={s.dot ?? false}
+                activeDot={{ r: 5, strokeWidth: 0, fill: color }}
+                connectNulls={connectNulls}
+              />
+            );
+          })}
+        </LineChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}

package/src/charts/TkxPieChart.tsx

@@ -0,0 +1,82 @@
+import {
+  ResponsiveContainer,
+  PieChart,
+  Pie,
+  Cell,
+  Tooltip,
+  Legend,
+} from 'recharts';
+import { useTheme } from '../themes';
+import { getDefaultColors, tooltipStyle } from './shared';
+
+export interface TkxPieChartSlice {
+  name: string;
+  value: number;
+  color?: string;
+}
+
+export interface TkxPieChartProps {
+  data: TkxPieChartSlice[];
+  height?: number;
+  showLegend?: boolean;
+  showTooltip?: boolean;
+  showLabels?: boolean;
+  /** Outer radius as a number (px) or percentage string. Default: '70%' */
+  outerRadius?: number | string;
+  /** Start angle in degrees. Default: 90 (12 o'clock) */
+  startAngle?: number;
+  ariaLabel?: string;
+}
+
+export function TkxPieChart({
+  data,
+  height = 300,
+  showLegend = true,
+  showTooltip = true,
+  showLabels = false,
+  outerRadius = '70%',
+  startAngle = 90,
+  ariaLabel = 'Pie chart',
+}: TkxPieChartProps) {
+  const theme = useTheme();
+  const colors = getDefaultColors(theme);
+  const tt = tooltipStyle(theme);
+
+  return (
+    <div role="img" aria-label={ariaLabel} style={{ width: '100%', height }}>
+      <ResponsiveContainer width="100%" height="100%">
+        <PieChart>
+          {showTooltip && (
+            <Tooltip
+              contentStyle={tt.contentStyle}
+              labelStyle={tt.labelStyle}
+              itemStyle={tt.itemStyle}
+            />
+          )}
+          {showLegend && (
+            <Legend wrapperStyle={{ fontSize: 13, color: theme.textMuted }} />
+          )}
+          <Pie
+            data={data}
+            dataKey="value"
+            nameKey="name"
+            outerRadius={outerRadius}
+            startAngle={startAngle}
+            endAngle={startAngle - 360}
+            label={showLabels ? ({ name, percent }) => `${name} (${(percent * 100).toFixed(0)}%)` : undefined}
+            labelLine={showLabels}
+            strokeWidth={2}
+            stroke={theme.bg}
+          >
+            {data.map((entry, i) => (
+              <Cell
+                key={entry.name}
+                fill={entry.color ?? colors[i % colors.length]}
+              />
+            ))}
+          </Pie>
+        </PieChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}

package/src/charts/TkxRadarChart.tsx

@@ -0,0 +1,90 @@
+import {
+  ResponsiveContainer,
+  RadarChart,
+  PolarGrid,
+  PolarAngleAxis,
+  PolarRadiusAxis,
+  Radar,
+  Legend,
+  Tooltip,
+} from 'recharts';
+import { useTheme } from '../themes';
+import { getDefaultColors, tooltipStyle } from './shared';
+
+export interface TkxRadarSeries {
+  key: string;
+  label?: string;
+  color?: string;
+  fillOpacity?: number;
+}
+
+export interface TkxRadarChartProps {
+  data: Record<string, any>[];
+  series: TkxRadarSeries[];
+  /** Key in data for the axis labels (e.g. 'subject', 'metric') */
+  angleKey: string;
+  height?: number;
+  showLegend?: boolean;
+  showTooltip?: boolean;
+  /** Outer radius as percentage string or number. Default: '70%' */
+  outerRadius?: string | number;
+  ariaLabel?: string;
+}
+
+export function TkxRadarChart({
+  data,
+  series,
+  angleKey,
+  height = 300,
+  showLegend = true,
+  showTooltip = true,
+  outerRadius = '70%',
+  ariaLabel = 'Radar chart',
+}: TkxRadarChartProps) {
+  const theme = useTheme();
+  const colors = getDefaultColors(theme);
+  const tt = tooltipStyle(theme);
+
+  return (
+    <div role="img" aria-label={ariaLabel} style={{ width: '100%', height }}>
+      <ResponsiveContainer width="100%" height="100%">
+        <RadarChart data={data} outerRadius={outerRadius}>
+          <PolarGrid stroke={theme.border} />
+          <PolarAngleAxis
+            dataKey={angleKey}
+            tick={{ fill: theme.textMuted, fontSize: 12 }}
+          />
+          <PolarRadiusAxis
+            tick={{ fill: theme.textMuted, fontSize: 10 }}
+            axisLine={false}
+            tickLine={false}
+          />
+          {showTooltip && (
+            <Tooltip
+              contentStyle={tt.contentStyle}
+              labelStyle={tt.labelStyle}
+              itemStyle={tt.itemStyle}
+            />
+          )}
+          {showLegend && (
+            <Legend wrapperStyle={{ fontSize: 13, color: theme.textMuted }} />
+          )}
+          {series.map((s, i) => {
+            const color = s.color ?? colors[i % colors.length];
+            return (
+              <Radar
+                key={s.key}
+                name={s.label ?? s.key}
+                dataKey={s.key}
+                stroke={color}
+                fill={color}
+                fillOpacity={s.fillOpacity ?? 0.2}
+                strokeWidth={2}
+              />
+            );
+          })}
+        </RadarChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}

package/src/charts/TkxScatterChart.tsx

@@ -0,0 +1,102 @@
+import {
+  ResponsiveContainer,
+  ScatterChart,
+  Scatter,
+  XAxis,
+  YAxis,
+  ZAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+} from 'recharts';
+import { useTheme } from '../themes';
+import { getDefaultColors, tooltipStyle, DEFAULT_MARGIN, type ChartMargin } from './shared';
+
+export interface TkxScatterSeries {
+  data: { x: number; y: number; z?: number; label?: string }[];
+  name?: string;
+  color?: string;
+}
+
+export interface TkxScatterChartProps {
+  series: TkxScatterSeries[];
+  height?: number;
+  margin?: ChartMargin;
+  showGrid?: boolean;
+  showLegend?: boolean;
+  showTooltip?: boolean;
+  xLabel?: string;
+  yLabel?: string;
+  xTickFormatter?: (value: any) => string;
+  yTickFormatter?: (value: any) => string;
+  /** Z-axis range (bubble size). Default: [20, 400] */
+  zRange?: [number, number];
+  ariaLabel?: string;
+}
+
+export function TkxScatterChart({
+  series,
+  height = 300,
+  margin = DEFAULT_MARGIN,
+  showGrid = true,
+  showLegend = true,
+  showTooltip = true,
+  xTickFormatter,
+  yTickFormatter,
+  zRange = [20, 400],
+  ariaLabel = 'Scatter chart',
+}: TkxScatterChartProps) {
+  const theme = useTheme();
+  const colors = getDefaultColors(theme);
+  const tt = tooltipStyle(theme);
+  const tickStyle = { fill: theme.textMuted, fontSize: 12 };
+
+  return (
+    <div role="img" aria-label={ariaLabel} style={{ width: '100%', height }}>
+      <ResponsiveContainer width="100%" height="100%">
+        <ScatterChart margin={margin}>
+          {showGrid && (
+            <CartesianGrid strokeDasharray="3 3" stroke={theme.border} />
+          )}
+          <XAxis
+            type="number"
+            dataKey="x"
+            tick={tickStyle}
+            axisLine={{ stroke: theme.border }}
+            tickLine={false}
+            tickFormatter={xTickFormatter}
+          />
+          <YAxis
+            type="number"
+            dataKey="y"
+            tick={tickStyle}
+            axisLine={false}
+            tickLine={false}
+            tickFormatter={yTickFormatter}
+          />
+          <ZAxis type="number" dataKey="z" range={zRange} />
+          {showTooltip && (
+            <Tooltip
+              contentStyle={tt.contentStyle}
+              labelStyle={tt.labelStyle}
+              itemStyle={tt.itemStyle}
+              cursor={{ strokeDasharray: '3 3' }}
+            />
+          )}
+          {showLegend && (
+            <Legend wrapperStyle={{ fontSize: 13, color: theme.textMuted, paddingTop: 8 }} />
+          )}
+          {series.map((s, i) => (
+            <Scatter
+              key={s.name ?? i}
+              name={s.name}
+              data={s.data}
+              fill={s.color ?? colors[i % colors.length]}
+              fillOpacity={0.8}
+            />
+          ))}
+        </ScatterChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}

package/src/charts/index.ts

@@ -0,0 +1,20 @@
+// ── @tekivex/ui/charts ───────────────────────────────────────────────────────
+// Theme-aware chart components built on Recharts.
+// Import from '@tekivex/ui/charts' — zero impact on the main bundle.
+// ─────────────────────────────────────────────────────────────────────────────
+
+export { TkxAreaChart } from './TkxAreaChart';
+export { TkxBarChart } from './TkxBarChart';
+export { TkxLineChart } from './TkxLineChart';
+export { TkxPieChart } from './TkxPieChart';
+export { TkxDonutChart } from './TkxDonutChart';
+export { TkxScatterChart } from './TkxScatterChart';
+export { TkxRadarChart } from './TkxRadarChart';
+
+export type { TkxAreaChartProps } from './TkxAreaChart';
+export type { TkxBarChartProps } from './TkxBarChart';
+export type { TkxLineChartProps } from './TkxLineChart';
+export type { TkxPieChartProps } from './TkxPieChart';
+export type { TkxDonutChartProps } from './TkxDonutChart';
+export type { TkxScatterChartProps } from './TkxScatterChart';
+export type { TkxRadarChartProps } from './TkxRadarChart';

package/src/charts/shared.ts

@@ -0,0 +1,45 @@
+// ── Shared chart utilities ───────────────────────────────────────────────────
+
+import type { ThemeTokens } from '../themes';
+
+/** Default palette: uses theme tokens then falls back to categorical colors */
+export function getDefaultColors(theme: ThemeTokens): string[] {
+  return [
+    theme.primary,
+    theme.secondary,
+    theme.info,
+    theme.success,
+    theme.warning,
+    theme.danger,
+    '#a855f7',
+    '#f97316',
+    '#14b8a6',
+    '#e879f9',
+  ];
+}
+
+export interface ChartMargin {
+  top?: number;
+  right?: number;
+  bottom?: number;
+  left?: number;
+}
+
+export const DEFAULT_MARGIN: ChartMargin = { top: 10, right: 30, bottom: 10, left: 0 };
+
+/** Common recharts tooltip style that matches TekiVex theme */
+export function tooltipStyle(theme: ThemeTokens) {
+  return {
+    contentStyle: {
+      backgroundColor: theme.surface,
+      border: `1px solid ${theme.border}`,
+      borderRadius: 8,
+      boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
+      color: theme.text,
+      fontSize: 13,
+    },
+    labelStyle: { color: theme.textMuted, fontWeight: 600, marginBottom: 4 },
+    itemStyle: { color: theme.text },
+    cursor: { fill: `${theme.primary}15` },
+  };
+}