@sabrenski/spire-ui 0.0.1

package/src/components/Chart/Chart.test.ts

@@ -0,0 +1,359 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { nextTick } from 'vue'
+import BaseChart from './BaseChart.vue'
+import LineChart from './LineChart.vue'
+import BarChart from './BarChart.vue'
+import DonutChart from './DonutChart.vue'
+
+vi.mock('chart.js', () => {
+  class MockChart {
+    static register = vi.fn()
+    destroy = vi.fn()
+    update = vi.fn()
+    resize = vi.fn()
+    data: { datasets: unknown[] }
+    options: unknown
+    isDatasetVisible = vi.fn().mockReturnValue(true)
+    setDatasetVisibility = vi.fn()
+
+    constructor(
+      _canvas: HTMLCanvasElement,
+      config: { data?: { datasets?: unknown[] }; options?: unknown }
+    ) {
+      this.data = config.data && config.data.datasets
+        ? config.data as { datasets: unknown[] }
+        : { datasets: [] }
+      this.options = config.options || {}
+    }
+  }
+
+  return {
+    Chart: MockChart,
+    registerables: []
+  }
+})
+
+const mockGetComputedStyle = vi.fn().mockReturnValue({
+  getPropertyValue: vi.fn().mockReturnValue('')
+})
+
+class MockResizeObserver {
+  observe = vi.fn()
+  disconnect = vi.fn()
+  unobserve = vi.fn()
+  constructor() {}
+}
+
+beforeEach(() => {
+  vi.stubGlobal('getComputedStyle', mockGetComputedStyle)
+  vi.stubGlobal('ResizeObserver', MockResizeObserver)
+})
+
+afterEach(() => {
+  vi.unstubAllGlobals()
+})
+
+describe('BaseChart', () => {
+  const defaultProps = {
+    type: 'line' as const,
+    data: {
+      labels: ['Jan', 'Feb', 'Mar'],
+      datasets: [
+        { label: 'Sales', data: [10, 20, 30] }
+      ]
+    }
+  }
+
+  describe('Rendering', () => {
+    it('renders canvas element', () => {
+      const wrapper = mount(BaseChart, { props: defaultProps })
+      expect(wrapper.find('canvas').exists()).toBe(true)
+    })
+
+    it('renders chart container', () => {
+      const wrapper = mount(BaseChart, { props: defaultProps })
+      expect(wrapper.find('.ui-chart').exists()).toBe(true)
+    })
+
+    it('renders canvas container with height', () => {
+      const wrapper = mount(BaseChart, {
+        props: { ...defaultProps, height: 400 }
+      })
+      const container = wrapper.find('.ui-chart__canvas-container')
+      expect(container.attributes('style')).toContain('height: 400px')
+    })
+
+    it('accepts string height', () => {
+      const wrapper = mount(BaseChart, {
+        props: { ...defaultProps, height: '50vh' }
+      })
+      const container = wrapper.find('.ui-chart__canvas-container')
+      expect(container.attributes('style')).toContain('height: 50vh')
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('has role="img" on canvas', () => {
+      const wrapper = mount(BaseChart, { props: defaultProps })
+      expect(wrapper.find('canvas').attributes('role')).toBe('img')
+    })
+
+    it('sets aria-label on canvas', () => {
+      const wrapper = mount(BaseChart, {
+        props: { ...defaultProps, ariaLabel: 'Sales chart' }
+      })
+      expect(wrapper.find('canvas').attributes('aria-label')).toBe('Sales chart')
+    })
+
+    it('renders screen reader table fallback', () => {
+      const wrapper = mount(BaseChart, { props: defaultProps })
+      expect(wrapper.find('.ui-chart__sr-table').exists()).toBe(true)
+    })
+
+    it('populates fallback table with data', () => {
+      const wrapper = mount(BaseChart, { props: defaultProps })
+      const headers = wrapper.findAll('.ui-chart__sr-table th')
+      expect(headers.length).toBeGreaterThan(0)
+    })
+  })
+
+  describe('Props', () => {
+    it('accepts different chart types', async () => {
+      const wrapper = mount(BaseChart, {
+        props: { ...defaultProps, type: 'bar' }
+      })
+      expect(wrapper.props('type')).toBe('bar')
+
+      await wrapper.setProps({ type: 'doughnut' })
+      expect(wrapper.props('type')).toBe('doughnut')
+    })
+
+    it('defaults height to 300', () => {
+      const wrapper = mount(BaseChart, { props: defaultProps })
+      const container = wrapper.find('.ui-chart__canvas-container')
+      expect(container.attributes('style')).toContain('height: 300px')
+    })
+  })
+})
+
+describe('LineChart', () => {
+  const defaultProps = {
+    labels: ['Jan', 'Feb', 'Mar', 'Apr'],
+    series: [
+      { name: 'Revenue', data: [100, 200, 150, 300] },
+      { name: 'Expenses', data: [80, 120, 100, 180] }
+    ]
+  }
+
+  describe('Rendering', () => {
+    it('renders BaseChart with type line', () => {
+      const wrapper = mount(LineChart, { props: defaultProps })
+      const baseChart = wrapper.findComponent(BaseChart)
+      expect(baseChart.exists()).toBe(true)
+    })
+
+    it('renders legend by default', () => {
+      const wrapper = mount(LineChart, { props: defaultProps })
+      expect(wrapper.find('.ui-line-chart__legend').exists()).toBe(true)
+    })
+
+    it('renders legend items for each series', async () => {
+      const wrapper = mount(LineChart, { props: defaultProps })
+      await nextTick()
+      const items = wrapper.findAll('.ui-line-chart__legend-item')
+      expect(items.length).toBe(2)
+    })
+
+    it('hides legend when showLegend is false', () => {
+      const wrapper = mount(LineChart, {
+        props: { ...defaultProps, showLegend: false }
+      })
+      expect(wrapper.find('.ui-line-chart__legend').exists()).toBe(false)
+    })
+  })
+
+  describe('Props', () => {
+    it('passes height to BaseChart', () => {
+      const wrapper = mount(LineChart, {
+        props: { ...defaultProps, height: 500 }
+      })
+      const baseChart = wrapper.findComponent(BaseChart)
+      expect(baseChart.props('height')).toBe(500)
+    })
+
+    it('passes ariaLabel to BaseChart', () => {
+      const wrapper = mount(LineChart, {
+        props: { ...defaultProps, ariaLabel: 'Revenue over time' }
+      })
+      const baseChart = wrapper.findComponent(BaseChart)
+      expect(baseChart.props('ariaLabel')).toBe('Revenue over time')
+    })
+
+    it('accepts fill prop', () => {
+      const wrapper = mount(LineChart, {
+        props: { ...defaultProps, fill: true }
+      })
+      expect(wrapper.props('fill')).toBe(true)
+    })
+
+    it('accepts tension prop', () => {
+      const wrapper = mount(LineChart, {
+        props: { ...defaultProps, tension: 0.2 }
+      })
+      expect(wrapper.props('tension')).toBe(0.2)
+    })
+  })
+
+  describe('Legend interaction', () => {
+    it('legend items are clickable', async () => {
+      const wrapper = mount(LineChart, { props: defaultProps })
+      await nextTick()
+      const legendItem = wrapper.find('.ui-line-chart__legend-item')
+      expect(legendItem.element.tagName).toBe('BUTTON')
+    })
+  })
+})
+
+describe('BarChart', () => {
+  const defaultProps = {
+    labels: ['Q1', 'Q2', 'Q3', 'Q4'],
+    series: [
+      { name: 'Sales', data: [100, 150, 120, 200] }
+    ]
+  }
+
+  describe('Rendering', () => {
+    it('renders BaseChart with type bar', () => {
+      const wrapper = mount(BarChart, { props: defaultProps })
+      const baseChart = wrapper.findComponent(BaseChart)
+      expect(baseChart.exists()).toBe(true)
+      expect(baseChart.props('type')).toBe('bar')
+    })
+
+    it('renders legend by default', () => {
+      const wrapper = mount(BarChart, { props: defaultProps })
+      expect(wrapper.find('.ui-bar-chart__legend').exists()).toBe(true)
+    })
+  })
+
+  describe('Props', () => {
+    it('accepts horizontal prop', () => {
+      const wrapper = mount(BarChart, {
+        props: { ...defaultProps, horizontal: true }
+      })
+      expect(wrapper.props('horizontal')).toBe(true)
+    })
+
+    it('accepts stacked prop', () => {
+      const wrapper = mount(BarChart, {
+        props: { ...defaultProps, stacked: true }
+      })
+      expect(wrapper.props('stacked')).toBe(true)
+    })
+
+    it('accepts borderRadius prop', () => {
+      const wrapper = mount(BarChart, {
+        props: { ...defaultProps, borderRadius: 8 }
+      })
+      expect(wrapper.props('borderRadius')).toBe(8)
+    })
+  })
+})
+
+describe('DonutChart', () => {
+  const defaultProps = {
+    segments: [
+      { label: 'Direct', value: 300 },
+      { label: 'Referral', value: 200 },
+      { label: 'Social', value: 100 }
+    ]
+  }
+
+  describe('Rendering', () => {
+    it('renders BaseChart with type doughnut', () => {
+      const wrapper = mount(DonutChart, { props: defaultProps })
+      const baseChart = wrapper.findComponent(BaseChart)
+      expect(baseChart.exists()).toBe(true)
+      expect(baseChart.props('type')).toBe('doughnut')
+    })
+
+    it('renders legend by default', () => {
+      const wrapper = mount(DonutChart, { props: defaultProps })
+      expect(wrapper.find('.ui-donut-chart__legend').exists()).toBe(true)
+    })
+
+    it('renders legend items for each segment', () => {
+      const wrapper = mount(DonutChart, { props: defaultProps })
+      const items = wrapper.findAll('.ui-donut-chart__legend-item')
+      expect(items.length).toBe(3)
+    })
+
+    it('displays percentage values in legend', () => {
+      const wrapper = mount(DonutChart, { props: defaultProps })
+      const values = wrapper.findAll('.ui-donut-chart__legend-value')
+      expect(values[0].text()).toBe('50%')
+      expect(values[1].text()).toBe('33%')
+      expect(values[2].text()).toBe('17%')
+    })
+  })
+
+  describe('Center content', () => {
+    it('renders center value when provided', () => {
+      const wrapper = mount(DonutChart, {
+        props: { ...defaultProps, centerValue: '600' }
+      })
+      expect(wrapper.find('.ui-donut-chart__center-value').text()).toBe('600')
+    })
+
+    it('renders center label when provided', () => {
+      const wrapper = mount(DonutChart, {
+        props: { ...defaultProps, centerLabel: 'Total' }
+      })
+      expect(wrapper.find('.ui-donut-chart__center-label').text()).toBe('Total')
+    })
+
+    it('renders center slot content', () => {
+      const wrapper = mount(DonutChart, {
+        props: defaultProps,
+        slots: {
+          center: '<div data-testid="custom-center">Custom</div>'
+        }
+      })
+      expect(wrapper.find('[data-testid="custom-center"]').exists()).toBe(true)
+    })
+  })
+
+  describe('Props', () => {
+    it('accepts cutout prop', () => {
+      const wrapper = mount(DonutChart, {
+        props: { ...defaultProps, cutout: 50 }
+      })
+      expect(wrapper.props('cutout')).toBe(50)
+    })
+
+    it('accepts legendPosition prop', async () => {
+      const wrapper = mount(DonutChart, {
+        props: { ...defaultProps, legendPosition: 'bottom' }
+      })
+      expect(wrapper.find('.ui-donut-chart--legend-bottom').exists()).toBe(true)
+
+      await wrapper.setProps({ legendPosition: 'left' })
+      expect(wrapper.find('.ui-donut-chart--legend-left').exists()).toBe(true)
+    })
+
+    it('accepts custom segment colors', () => {
+      const wrapper = mount(DonutChart, {
+        props: {
+          segments: [
+            { label: 'A', value: 100, color: '#ff0000' },
+            { label: 'B', value: 200, color: '#00ff00' }
+          ]
+        }
+      })
+      const colors = wrapper.findAll('.ui-donut-chart__legend-color')
+      expect(colors[0].attributes('style')).toContain('background-color: #ff0000')
+      expect(colors[1].attributes('style')).toContain('background-color: #00ff00')
+    })
+  })
+})

package/src/components/Chart/DonutChart.vue

@@ -0,0 +1,283 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { ChartData, ChartOptions } from 'chart.js'
+import BaseChart from './BaseChart.vue'
+import type { LegendItem, TooltipData, PointClickData } from './BaseChart.vue'
+import { useChartTheme } from './useChartTheme'
+
+type DonutChartData = ChartData<'doughnut'>
+type DonutChartOptions = ChartOptions<'doughnut'>
+
+export interface DonutChartSegment {
+  label: string
+  value: number
+  color?: string
+}
+
+export interface SegmentClickData {
+  segment: DonutChartSegment
+  index: number
+  percentage: number
+}
+
+export interface DonutChartProps {
+  /** Chart segments */
+  segments: DonutChartSegment[]
+  /** Chart height */
+  height?: string | number
+  /** Donut cutout percentage (0-100, 0 = pie chart) */
+  cutout?: number
+  /** Accessible label */
+  ariaLabel?: string
+  /** Show built-in legend */
+  showLegend?: boolean
+  /** Legend position */
+  legendPosition?: 'top' | 'bottom' | 'left' | 'right'
+  /** Center label (for donut charts) */
+  centerLabel?: string
+  /** Center value (for donut charts) */
+  centerValue?: string
+}
+
+const props = withDefaults(defineProps<DonutChartProps>(), {
+  height: 300,
+  cutout: 65,
+  showLegend: true,
+  legendPosition: 'right'
+})
+
+defineSlots<{
+  legend?: (props: { items: LegendItem[]; toggle: (index: number) => void }) => unknown
+  tooltip?: (props: { data: TooltipData | null }) => unknown
+  center?: () => unknown
+}>()
+
+const emit = defineEmits<{
+  segmentClick: [data: SegmentClickData]
+}>()
+
+const { getColor } = useChartTheme()
+
+const chartData = computed(() => ({
+  labels: props.segments.map((s) => s.label),
+  datasets: [
+    {
+      data: props.segments.map((s) => s.value),
+      backgroundColor: props.segments.map((s, i) => s.color || getColor(i)),
+      borderWidth: 0,
+      hoverOffset: 4
+    }
+  ]
+}) as DonutChartData)
+
+const chartOptions = computed(() => ({
+  cutout: `${props.cutout}%`,
+  plugins: {
+    legend: {
+      display: false
+    }
+  },
+  interaction: {
+    mode: 'nearest' as const,
+    intersect: true
+  }
+}) as DonutChartOptions)
+
+const total = computed(() =>
+  props.segments.reduce((sum, s) => sum + s.value, 0)
+)
+
+const legendItems = computed<LegendItem[]>(() =>
+  props.segments.map((segment, index) => ({
+    label: segment.label,
+    color: segment.color || getColor(index),
+    hidden: false,
+    datasetIndex: index
+  }))
+)
+
+function formatPercent(value: number): string {
+  return `${Math.round((value / total.value) * 100)}%`
+}
+
+function handlePointClick(data: PointClickData) {
+  const index = data.index
+  const segment = props.segments[index]
+  if (segment) {
+    emit('segmentClick', {
+      segment,
+      index,
+      percentage: Math.round((segment.value / total.value) * 100)
+    })
+  }
+}
+</script>
+
+<template>
+  <div
+    class="ui-donut-chart"
+    :class="[`ui-donut-chart--legend-${legendPosition}`]"
+  >
+    <!-- Legend (conditional position) -->
+    <slot v-if="showLegend && (legendPosition === 'top' || legendPosition === 'left')" name="legend" :items="legendItems" :toggle="() => {}">
+      <div class="ui-donut-chart__legend">
+        <div
+          v-for="(segment, index) in segments"
+          :key="index"
+          class="ui-donut-chart__legend-item"
+        >
+          <span
+            class="ui-donut-chart__legend-color"
+            :style="{ backgroundColor: segment.color || getColor(index) }"
+          />
+          <span class="ui-donut-chart__legend-label">{{ segment.label }}</span>
+          <span class="ui-donut-chart__legend-value">{{ formatPercent(segment.value) }}</span>
+        </div>
+      </div>
+    </slot>
+
+    <!-- Chart Container -->
+    <div class="ui-donut-chart__container">
+      <BaseChart
+        type="doughnut"
+        :data="chartData"
+        :options="chartOptions"
+        :height="height"
+        :aria-label="ariaLabel"
+        @point-click="handlePointClick"
+      >
+        <template #legend>
+          <!-- Disable BaseChart legend, we render our own -->
+        </template>
+        <template #tooltip="{ data }">
+          <slot name="tooltip" :data="data" />
+        </template>
+      </BaseChart>
+
+      <!-- Center Content -->
+      <div v-if="centerLabel || centerValue || $slots.center" class="ui-donut-chart__center">
+        <slot name="center">
+          <div v-if="centerValue" class="ui-donut-chart__center-value">
+            {{ centerValue }}
+          </div>
+          <div v-if="centerLabel" class="ui-donut-chart__center-label">
+            {{ centerLabel }}
+          </div>
+        </slot>
+      </div>
+    </div>
+
+    <!-- Legend (conditional position) -->
+    <slot v-if="showLegend && (legendPosition === 'bottom' || legendPosition === 'right')" name="legend" :items="legendItems" :toggle="() => {}">
+      <div class="ui-donut-chart__legend">
+        <div
+          v-for="(segment, index) in segments"
+          :key="index"
+          class="ui-donut-chart__legend-item"
+        >
+          <span
+            class="ui-donut-chart__legend-color"
+            :style="{ backgroundColor: segment.color || getColor(index) }"
+          />
+          <span class="ui-donut-chart__legend-label">{{ segment.label }}</span>
+          <span class="ui-donut-chart__legend-value">{{ formatPercent(segment.value) }}</span>
+        </div>
+      </div>
+    </slot>
+  </div>
+</template>
+
+<style scoped>
+.ui-donut-chart {
+  display: flex;
+  font-family: var(--font-sans);
+}
+
+.ui-donut-chart--legend-top,
+.ui-donut-chart--legend-bottom {
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
+.ui-donut-chart--legend-left,
+.ui-donut-chart--legend-right {
+  flex-direction: row;
+  gap: var(--space-6);
+  align-items: center;
+}
+
+.ui-donut-chart--legend-left {
+  flex-direction: row-reverse;
+}
+
+.ui-donut-chart__container {
+  position: relative;
+  flex-shrink: 0;
+}
+
+.ui-donut-chart--legend-left .ui-donut-chart__container,
+.ui-donut-chart--legend-right .ui-donut-chart__container {
+  flex: 1;
+  max-width: 50%;
+}
+
+.ui-donut-chart__center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+  pointer-events: none;
+}
+
+.ui-donut-chart__center-value {
+  font-size: var(--text-2xl);
+  font-weight: var(--font-semibold);
+  color: var(--chart-text, var(--text-primary));
+  line-height: 1;
+}
+
+.ui-donut-chart__center-label {
+  font-size: var(--text-sm);
+  color: var(--chart-text-muted, var(--text-secondary));
+  margin-top: var(--space-1);
+}
+
+.ui-donut-chart__legend {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.ui-donut-chart--legend-top .ui-donut-chart__legend,
+.ui-donut-chart--legend-bottom .ui-donut-chart__legend {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: var(--space-4);
+}
+
+.ui-donut-chart__legend-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-size: var(--text-sm);
+}
+
+.ui-donut-chart__legend-color {
+  width: 10px;
+  height: 10px;
+  border-radius: var(--radius-full);
+  flex-shrink: 0;
+}
+
+.ui-donut-chart__legend-label {
+  color: var(--chart-legend-text, var(--text-secondary));
+  flex: 1;
+}
+
+.ui-donut-chart__legend-value {
+  color: var(--chart-text, var(--text-primary));
+  font-weight: var(--font-medium);
+  font-variant-numeric: tabular-nums;
+}
+</style>