@svadmin/ui 0.12.0 → 0.14.0

package/src/components/charts/LineChart.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+  interface DataPoint {
+    label: string;
+    value: number;
+  }
+
+  interface Props {
+    data: DataPoint[];
+    height?: number;
+    color?: string;
+    /** Show dots at data points */
+    showDots?: boolean;
+    /** Fill area under the line */
+    fill?: boolean;
+    class?: string;
+  }
+
+  let { data, height = 200, color = 'var(--primary)', showDots = true, fill = true, class: className = '' }: Props = $props();
+
+  const padding = { top: 20, right: 20, bottom: 30, left: 40 };
+  const chartWidth = $derived(Math.max(data.length * 60, 300));
+  const chartHeight = $derived(height - padding.top - padding.bottom);
+
+  const maxValue = $derived(Math.max(...data.map(d => d.value), 1));
+  const minValue = $derived(Math.min(...data.map(d => d.value), 0));
+  const range = $derived(maxValue - minValue || 1);
+
+  function getX(i: number): number {
+    if (data.length <= 1) return padding.left + chartWidth / 2;
+    return padding.left + (i / (data.length - 1)) * (chartWidth - padding.left - padding.right);
+  }
+
+  function getY(value: number): number {
+    return padding.top + chartHeight - ((value - minValue) / range) * chartHeight;
+  }
+
+  const linePath = $derived(
+    data.map((d, i) => `${i === 0 ? 'M' : 'L'} ${getX(i)} ${getY(d.value)}`).join(' ')
+  );
+
+  const areaPath = $derived(
+    linePath + ` L ${getX(data.length - 1)} ${padding.top + chartHeight} L ${getX(0)} ${padding.top + chartHeight} Z`
+  );
+</script>
+
+<div class="w-full overflow-x-auto {className}">
+  <svg viewBox="0 0 {chartWidth} {height}" class="w-full" style="min-width: {Math.min(chartWidth, 300)}px;">
+    <!-- Grid lines -->
+    {#each [0, 0.25, 0.5, 0.75, 1] as ratio}
+      {@const y = padding.top + chartHeight * (1 - ratio)}
+      <line
+        x1={padding.left}
+        y1={y}
+        x2={chartWidth - padding.right}
+        y2={y}
+        stroke="var(--border)"
+        stroke-width="1"
+        stroke-dasharray={ratio === 0 ? 'none' : '4 4'}
+        opacity="0.5"
+      />
+      <text x={padding.left - 8} y={y + 4} text-anchor="end" fill="var(--muted-foreground)" font-size="10">
+        {Math.round(minValue + range * ratio)}
+      </text>
+    {/each}
+
+    <!-- Area fill -->
+    {#if fill && data.length > 1}
+      <path
+        d={areaPath}
+        fill={color}
+        opacity="0.08"
+      />
+    {/if}
+
+    <!-- Line -->
+    {#if data.length > 1}
+      <path
+        d={linePath}
+        fill="none"
+        stroke={color}
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <animate attributeName="stroke-dashoffset" from="2000" to="0" dur="1s" fill="freeze" />
+      </path>
+    {/if}
+
+    <!-- Dots -->
+    {#if showDots}
+      {#each data as point, i}
+        <circle
+          cx={getX(i)}
+          cy={getY(point.value)}
+          r="4"
+          fill="var(--background)"
+          stroke={color}
+          stroke-width="2"
+          class="transition-all duration-200 hover:r-[6]"
+        />
+      {/each}
+    {/if}
+
+    <!-- X-axis labels -->
+    {#each data as point, i}
+      <text
+        x={getX(i)}
+        y={height - 4}
+        text-anchor="middle"
+        fill="var(--muted-foreground)"
+        font-size="10"
+      >{point.label}</text>
+    {/each}
+  </svg>
+</div>

package/src/components/charts/PieChart.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+  interface Slice {
+    label: string;
+    value: number;
+    color: string;
+  }
+
+  interface Props {
+    data: Slice[];
+    size?: number;
+    /** Donut hole ratio (0 = pie, 0.6 = donut) */
+    donut?: number;
+    class?: string;
+  }
+
+  let { data, size = 200, donut = 0.6, class: className = '' }: Props = $props();
+
+  const total = $derived(data.reduce((sum, d) => sum + d.value, 0) || 1);
+  const center = $derived(size / 2);
+  const radius = $derived(size / 2 - 8);
+  const innerRadius = $derived(radius * donut);
+
+  function getArcPath(startAngle: number, endAngle: number, outer: number, inner: number): string {
+    const startOuter = polarToCartesian(center, center, outer, endAngle);
+    const endOuter = polarToCartesian(center, center, outer, startAngle);
+    const startInner = polarToCartesian(center, center, inner, startAngle);
+    const endInner = polarToCartesian(center, center, inner, endAngle);
+    const largeArc = endAngle - startAngle > 180 ? 1 : 0;
+
+    return [
+      `M ${startOuter.x} ${startOuter.y}`,
+      `A ${outer} ${outer} 0 ${largeArc} 0 ${endOuter.x} ${endOuter.y}`,
+      inner > 0 ? `L ${startInner.x} ${startInner.y}` : `L ${center} ${center}`,
+      inner > 0 ? `A ${inner} ${inner} 0 ${largeArc} 1 ${endInner.x} ${endInner.y}` : '',
+      'Z',
+    ].join(' ');
+  }
+
+  function polarToCartesian(cx: number, cy: number, r: number, angleDeg: number) {
+    const rad = ((angleDeg - 90) * Math.PI) / 180;
+    return { x: cx + r * Math.cos(rad), y: cy + r * Math.sin(rad) };
+  }
+
+  const slices = $derived.by(() => {
+    let currentAngle = 0;
+    return data.map(d => {
+      const angle = (d.value / total) * 360;
+      const slice = {
+        ...d,
+        startAngle: currentAngle,
+        endAngle: currentAngle + angle,
+        percentage: ((d.value / total) * 100).toFixed(1),
+      };
+      currentAngle += angle;
+      return slice;
+    });
+  });
+</script>
+
+<div class="inline-flex flex-col items-center gap-3 {className}">
+  <svg viewBox="0 0 {size} {size}" width={size} height={size}>
+    {#each slices as slice, i}
+      <path
+        d={getArcPath(slice.startAngle, slice.endAngle, radius, innerRadius)}
+        fill={slice.color}
+        class="transition-all duration-200 hover:opacity-80"
+        stroke="var(--background)"
+        stroke-width="2"
+      >
+        <animate attributeName="opacity" from="0" to="1" dur="0.4s" begin="{i * 0.1}s" fill="freeze" />
+      </path>
+    {/each}
+
+    <!-- Center label (donut only) -->
+    {#if donut > 0}
+      <text x={center} y={center - 6} text-anchor="middle" fill="var(--foreground)" font-size="20" font-weight="600">
+        {total.toLocaleString()}
+      </text>
+      <text x={center} y={center + 12} text-anchor="middle" fill="var(--muted-foreground)" font-size="11">
+        Total
+      </text>
+    {/if}
+  </svg>
+
+  <!-- Legend -->
+  <div class="flex flex-wrap justify-center gap-x-4 gap-y-1">
+    {#each slices as slice}
+      <div class="flex items-center gap-1.5 text-xs">
+        <span class="h-2.5 w-2.5 rounded-full" style="background-color: {slice.color};"></span>
+        <span class="text-muted-foreground">{slice.label}</span>
+        <span class="font-medium text-foreground">{slice.percentage}%</span>
+      </div>
+    {/each}
+  </div>
+</div>

package/src/components/charts/index.ts

@@ -0,0 +1,3 @@
+export { default as BarChart } from './BarChart.svelte';
+export { default as LineChart } from './LineChart.svelte';
+export { default as PieChart } from './PieChart.svelte';

package/src/components/stories/BarChart.stories.ts

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/svelte';
+import BarChart from '../charts/BarChart.svelte';
+
+const meta = {
+  title: 'Charts/BarChart',
+  component: BarChart,
+  tags: ['autodocs'],
+  argTypes: {
+    height: { control: { type: 'number', min: 100, max: 500 } },
+    showValues: { control: 'boolean' },
+  },
+} satisfies Meta<BarChart>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    data: [
+      { label: 'Jan', value: 120 },
+      { label: 'Feb', value: 180 },
+      { label: 'Mar', value: 95 },
+      { label: 'Apr', value: 210 },
+      { label: 'May', value: 165 },
+      { label: 'Jun', value: 245 },
+    ],
+    height: 200,
+    showValues: true,
+  },
+};
+
+export const CustomColors: Story = {
+  args: {
+    data: [
+      { label: 'Users', value: 1200, color: '#6366f1' },
+      { label: 'Orders', value: 850, color: '#f59e0b' },
+      { label: 'Revenue', value: 2100, color: '#10b981' },
+      { label: 'Returns', value: 120, color: '#ef4444' },
+    ],
+    height: 250,
+    showValues: true,
+  },
+};

package/src/components/stories/LineChart.stories.ts

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/svelte';
+import LineChart from '../charts/LineChart.svelte';
+
+const meta = {
+  title: 'Charts/LineChart',
+  component: LineChart,
+  tags: ['autodocs'],
+  argTypes: {
+    height: { control: { type: 'number', min: 100, max: 500 } },
+    showDots: { control: 'boolean' },
+    fill: { control: 'boolean' },
+  },
+} satisfies Meta<LineChart>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    data: [
+      { label: 'Mon', value: 120 },
+      { label: 'Tue', value: 180 },
+      { label: 'Wed', value: 150 },
+      { label: 'Thu', value: 210 },
+      { label: 'Fri', value: 190 },
+      { label: 'Sat', value: 250 },
+      { label: 'Sun', value: 220 },
+    ],
+    height: 200,
+    showDots: true,
+    fill: true,
+  },
+};
+
+export const NoFill: Story = {
+  args: {
+    data: [
+      { label: 'Q1', value: 3200 },
+      { label: 'Q2', value: 4100 },
+      { label: 'Q3', value: 3800 },
+      { label: 'Q4', value: 5200 },
+    ],
+    height: 250,
+    showDots: true,
+    fill: false,
+    color: '#10b981',
+  },
+};

package/src/components/stories/PieChart.stories.ts

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/svelte';
+import PieChart from '../charts/PieChart.svelte';
+
+const meta = {
+  title: 'Charts/PieChart',
+  component: PieChart,
+  tags: ['autodocs'],
+  argTypes: {
+    size: { control: { type: 'number', min: 100, max: 400 } },
+    donut: { control: { type: 'number', min: 0, max: 0.8, step: 0.1 } },
+  },
+} satisfies Meta<PieChart>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Donut: Story = {
+  args: {
+    data: [
+      { label: 'Desktop', value: 580, color: '#6366f1' },
+      { label: 'Mobile', value: 320, color: '#f59e0b' },
+      { label: 'Tablet', value: 100, color: '#10b981' },
+    ],
+    size: 200,
+    donut: 0.6,
+  },
+};
+
+export const Pie: Story = {
+  args: {
+    data: [
+      { label: 'Chrome', value: 64, color: '#4285f4' },
+      { label: 'Safari', value: 19, color: '#5ac8fa' },
+      { label: 'Firefox', value: 10, color: '#ff7139' },
+      { label: 'Edge', value: 4, color: '#0078d7' },
+      { label: 'Other', value: 3, color: '#a0a0a0' },
+    ],
+    size: 220,
+    donut: 0,
+  },
+};

package/src/index.ts

@@ -54,6 +54,14 @@ export { default as CopilotPanel } from "./components/CopilotPanel.svelte";
 export { default as InsightCard } from "./components/InsightCard.svelte";
 export { default as AnomalyBadge } from "./components/AnomalyBadge.svelte";
 export { default as VoiceInput } from "./components/VoiceInput.svelte";
+export { default as AnimatedCounter } from "./components/AnimatedCounter.svelte";
+export { default as KeyboardShortcuts } from "./components/KeyboardShortcuts.svelte";
+export { default as InlineEdit } from "./components/InlineEdit.svelte";
+export { default as VirtualTable } from "./components/VirtualTable.svelte";
+export { default as DraggableHeader } from "./components/DraggableHeader.svelte";
+
+// Dashboard Charts (zero-dependency SVG)
+export { BarChart, LineChart, PieChart } from './components/charts/index.js';
 // Field display components
 export { default as NumberField } from './components/fields/NumberField.svelte';
 export { default as DateField } from './components/fields/DateField.svelte';