sort props, add variations in data

Author: brc-dd

lib/components/SChartBar.vue

@@ -8,34 +8,45 @@ export type { ChartColor, KV }
 
 const props = withDefaults(defineProps<{
   data: KV[]
+
+  // Chart appearance
+  type?: 'horizontal' | 'vertical'
   colors?: ChartColor[]
+  maxBandwidth?: number
   margins?: Partial<{ top: number; right: number; bottom: number; left: number }>
-  type?: 'horizontal' | 'vertical'
-  debug?: boolean
-  ticks?: number
-  tickFontSize?: string
-  animate?: boolean
-  tooltip?: boolean
-  tooltipFormat?: (d: KV, color: string) => string
+
+  // Axis & labels
   xLabel?: string
   yLabel?: string
   xLabelOffset?: number
   yLabelOffset?: number
   xLabelFontSize?: string
   yLabelFontSize?: string
-  maxBandwidth?: number
+  ticks?: number
+  tickFontSize?: string
+
+  // Tooltip
+  tooltip?: boolean
+  tooltipFormat?: (d: KV, color: string) => string
+
+  // Animation & debug
+  animate?: boolean
+  debug?: boolean
 }>(), {
-  colors: () => ['blue'],
   type: 'vertical',
-  debug: false,
+  colors: () => ['blue'],
+  maxBandwidth: 100,
+
+  xLabelFontSize: '14px',
+  yLabelFontSize: '14px',
   ticks: 5,
   tickFontSize: '14px',
-  animate: true,
+
   tooltip: true,
   tooltipFormat: (d: KV) => `${d.key} – ${d.value}`,
-  xLabelFontSize: '14px',
-  yLabelFontSize: '14px',
-  maxBandwidth: 100
+
+  animate: true,
+  debug: false
 })
 
 const chartRef = useTemplateRef('chart')

lib/components/SChartPie.vue

@@ -8,39 +8,55 @@ export type { ChartColor, KV }
 
 const props = withDefaults(defineProps<{
   data: KV[]
-  colors?: ChartColor[]
-  margins?: Partial<{ top: number; right: number; bottom: number; left: number }>
-  innerRadius?: (outerRadius: number) => number
+
+  // Chart appearance
   type?: 'pie' | 'donut'
   half?: boolean
-  debug?: boolean
-  animate?: boolean
-  tooltip?: boolean
-  activeKey?: string
-  tooltipFormat?: (d: KV, color: string) => string
+  colors?: ChartColor[]
+  innerRadius?: (outerRadius: number) => number
+  margins?: Partial<{ top: number; right: number; bottom: number; left: number }>
+
+  // Labels
+  labels?: boolean
+  labelFormat?: (d: KV) => string
+  labelFontSize?: string
+
+  // Legend
   legend?: boolean
   legendFormatKey?: (d: KV) => string
   legendFormatValue?: (d: KV) => string
   legendPadding?: number
   legendFontSize?: string
-  labels?: boolean
-  labelFormat?: (d: KV) => string
-  labelFontSize?: string
+
+  // Tooltip
+  tooltip?: boolean
+  tooltipFormat?: (d: KV, color: string) => string
+
+  // Interactivity & state
+  activeKey?: string
+
+  // Animation & debug
+  animate?: boolean
+  debug?: boolean
 }>(), {
   type: 'donut',
   half: false,
-  debug: false,
-  animate: true,
-  tooltip: true,
-  tooltipFormat: (d: KV) => `${d.key} – ${d.value}`,
+
+  labels: false,
+  labelFormat: (d: KV) => `${d.key} – ${d.value}`,
+  labelFontSize: '14px',
+
   legend: true,
   legendFormatKey: (d: KV) => d.key,
   legendFormatValue: (d: KV) => d.value.toString(),
   legendPadding: 70,
   legendFontSize: '14px',
-  labels: false,
-  labelFormat: (d: KV) => `${d.key} – ${d.value}`,
-  labelFontSize: '14px'
+
+  tooltip: true,
+  tooltipFormat: (d: KV) => `${d.key} – ${d.value}`,
+
+  animate: true,
+  debug: false
 })
 
 const chartRef = useTemplateRef('chart')

stories/components/SChart.01_Playground.story.vue

@@ -17,11 +17,11 @@ const title = 'Components / SChart / 01. Playground'
 
 const data = ref<KV[]>([
   { key: '2018', value: 10 },
-  { key: '2019', value: 15 },
-  { key: '2020', value: 20 },
+  { key: '2019', value: 20 },
+  { key: '2020', value: 15 },
   { key: '2021', value: 25 },
-  { key: '2022', value: 30 },
-  { key: '2023', value: 35 },
+  { key: '2022', value: 35 },
+  { key: '2023', value: 30 },
   { key: '2024', value: 40 },
   { key: '2025', value: 45 }
 ])