tekivex-ui 2.2.0 → 2.5.1

package/src/charts/TkxAreaChart.tsx

@@ -0,0 +1,119 @@
+import {
+  ResponsiveContainer,
+  AreaChart,
+  Area,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+} from 'recharts';
+import { useTheme } from '../themes';
+import { getDefaultColors, tooltipStyle, DEFAULT_MARGIN, type ChartMargin } from './shared';
+
+export interface TkxAreaChartSeries {
+  key: string;
+  label?: string;
+  color?: string;
+  /** Fill opacity. Default: 0.2 */
+  fillOpacity?: number;
+  /** Whether to stack this series. Default: false */
+  stacked?: boolean;
+}
+
+export interface TkxAreaChartProps {
+  data: Record<string, any>[];
+  series: TkxAreaChartSeries[];
+  xKey: string;
+  height?: number;
+  margin?: ChartMargin;
+  showGrid?: boolean;
+  showLegend?: boolean;
+  showTooltip?: boolean;
+  /** Smooth curves. Default: true */
+  smooth?: boolean;
+  xTickFormatter?: (value: any) => string;
+  yTickFormatter?: (value: any) => string;
+  yDomain?: [number | 'auto' | 'dataMin' | 'dataMax', number | 'auto' | 'dataMin' | 'dataMax'];
+  /** aria-label for the chart container */
+  ariaLabel?: string;
+}
+
+export function TkxAreaChart({
+  data,
+  series,
+  xKey,
+  height = 300,
+  margin = DEFAULT_MARGIN,
+  showGrid = true,
+  showLegend = true,
+  showTooltip = true,
+  smooth = true,
+  xTickFormatter,
+  yTickFormatter,
+  yDomain,
+  ariaLabel = 'Area chart',
+}: TkxAreaChartProps) {
+  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%">
+        <AreaChart 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={tt.cursor}
+            />
+          )}
+          {showLegend && (
+            <Legend
+              wrapperStyle={{ fontSize: 13, color: theme.textMuted, paddingTop: 8 }}
+            />
+          )}
+          {series.map((s, i) => {
+            const color = s.color ?? colors[i % colors.length];
+            return (
+              <Area
+                key={s.key}
+                type={smooth ? 'monotone' : 'linear'}
+                dataKey={s.key}
+                name={s.label ?? s.key}
+                stroke={color}
+                strokeWidth={2}
+                fill={color}
+                fillOpacity={s.fillOpacity ?? 0.2}
+                stackId={s.stacked ? 'stack' : undefined}
+                dot={false}
+                activeDot={{ r: 5, strokeWidth: 0 }}
+              />
+            );
+          })}
+        </AreaChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}

package/src/charts/TkxBarChart.tsx

@@ -0,0 +1,115 @@
+import {
+  ResponsiveContainer,
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  Cell,
+} from 'recharts';
+import { useTheme } from '../themes';
+import { getDefaultColors, tooltipStyle, DEFAULT_MARGIN, type ChartMargin } from './shared';
+
+export interface TkxBarChartSeries {
+  key: string;
+  label?: string;
+  color?: string;
+  /** Stack ID — bars with the same stackId are stacked. */
+  stackId?: string;
+  radius?: number | [number, number, number, number];
+}
+
+export interface TkxBarChartProps {
+  data: Record<string, any>[];
+  series: TkxBarChartSeries[];
+  xKey: string;
+  height?: number;
+  margin?: ChartMargin;
+  showGrid?: boolean;
+  showLegend?: boolean;
+  showTooltip?: boolean;
+  layout?: 'vertical' | 'horizontal';
+  barSize?: number;
+  /** Use gradient fill per series. Default: false */
+  gradient?: boolean;
+  xTickFormatter?: (value: any) => string;
+  yTickFormatter?: (value: any) => string;
+  ariaLabel?: string;
+}
+
+export function TkxBarChart({
+  data,
+  series,
+  xKey,
+  height = 300,
+  margin = DEFAULT_MARGIN,
+  showGrid = true,
+  showLegend = true,
+  showTooltip = true,
+  layout = 'horizontal',
+  barSize,
+  xTickFormatter,
+  yTickFormatter,
+  ariaLabel = 'Bar chart',
+}: TkxBarChartProps) {
+  const theme = useTheme();
+  const colors = getDefaultColors(theme);
+  const tt = tooltipStyle(theme);
+  const tickStyle = { fill: theme.textMuted, fontSize: 12 };
+  const isVertical = layout === 'vertical';
+
+  return (
+    <div role="img" aria-label={ariaLabel} style={{ width: '100%', height }}>
+      <ResponsiveContainer width="100%" height="100%">
+        <BarChart data={data} margin={margin} layout={layout}>
+          {showGrid && (
+            <CartesianGrid
+              strokeDasharray="3 3"
+              stroke={theme.border}
+              vertical={isVertical}
+              horizontal={!isVertical}
+            />
+          )}
+          {isVertical ? (
+            <>
+              <YAxis dataKey={xKey} type="category" tick={tickStyle} axisLine={false} tickLine={false} tickFormatter={xTickFormatter} width={100} />
+              <XAxis type="number" tick={tickStyle} axisLine={{ stroke: theme.border }} tickLine={false} tickFormatter={yTickFormatter} />
+            </>
+          ) : (
+            <>
+              <XAxis dataKey={xKey} tick={tickStyle} axisLine={{ stroke: theme.border }} tickLine={false} tickFormatter={xTickFormatter} />
+              <YAxis tick={tickStyle} axisLine={false} tickLine={false} tickFormatter={yTickFormatter} />
+            </>
+          )}
+          {showTooltip && (
+            <Tooltip
+              contentStyle={tt.contentStyle}
+              labelStyle={tt.labelStyle}
+              itemStyle={tt.itemStyle}
+              cursor={{ fill: `${theme.surfaceAlt}` }}
+            />
+          )}
+          {showLegend && (
+            <Legend wrapperStyle={{ fontSize: 13, color: theme.textMuted, paddingTop: 8 }} />
+          )}
+          {series.map((s, i) => {
+            const color = s.color ?? colors[i % colors.length];
+            return (
+              <Bar
+                key={s.key}
+                dataKey={s.key}
+                name={s.label ?? s.key}
+                fill={color}
+                stackId={s.stackId}
+                maxBarSize={barSize ?? 40}
+                radius={s.radius ?? [4, 4, 0, 0]}
+              />
+            );
+          })}
+        </BarChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}

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>
+  );
+}