adjust

Author: brc-dd

lib/components/SChartBar.vue

@@ -2,18 +2,17 @@
 import { useElementSize } from '@vueuse/core'
 import * as d3 from 'd3'
 import { useTemplateRef, watch } from 'vue'
-import { type ChartColor, type KV, c, scheme } from '../support/Chart'
-
-export type { ChartColor, KV }
+import { type ChartColor, type KV, type Margins, c, scheme } from '../support/Chart'
 
 const props = withDefaults(defineProps<{
+  // State
   data: KV[]
 
   // Chart appearance
   type?: 'horizontal' | 'vertical'
   colors?: ChartColor[]
+  margins?: Margins
   maxBandwidth?: number
-  margins?: Partial<{ top: number; right: number; bottom: number; left: number }>
 
   // Axis & labels
   xLabel?: string
@@ -25,7 +24,7 @@ const props = withDefaults(defineProps<{
   ticks?: number
   tickFontSize?: string
 
-  // Tooltip
+  // Tooltip & interactivity
   tooltip?: boolean
   tooltipFormat?: (d: KV, color: string) => string
 

lib/components/SChartPie.vue

@@ -2,19 +2,19 @@
 import { useElementSize } from '@vueuse/core'
 import * as d3 from 'd3'
 import { useTemplateRef, watch } from 'vue'
-import { type ChartColor, type KV, c, scheme } from '../support/Chart'
-
-export type { ChartColor, KV }
+import { type ChartColor, type KV, type Margins, c, scheme } from '../support/Chart'
 
 const props = withDefaults(defineProps<{
+  // State
   data: KV[]
+  activeKey?: string
 
   // Chart appearance
   type?: 'pie' | 'donut'
   half?: boolean
   colors?: ChartColor[]
+  margins?: Margins
   innerRadius?: (outerRadius: number) => number
-  margins?: Partial<{ top: number; right: number; bottom: number; left: number }>
 
   // Labels
   labels?: boolean
@@ -28,13 +28,10 @@ const props = withDefaults(defineProps<{
   legendPadding?: number
   legendFontSize?: string
 
-  // Tooltip
+  // Tooltip & interactivity
   tooltip?: boolean
   tooltipFormat?: (d: KV, color: string) => string
 
-  // Interactivity & state
-  activeKey?: string
-
   // Animation & debug
   animate?: boolean
   debug?: boolean

lib/support/Chart.ts

@@ -40,6 +40,7 @@ export const chartColors = {
 // eslint-disable-next-line @typescript-eslint/ban-types
 export type ChartColor = keyof typeof chartColors | (string & {})
 export type KV = { key: string; value: number; color?: ChartColor }
+export type Margins = Partial<{ top: number; right: number; bottom: number; left: number }>
 
 export function getColor(...colors: (ChartColor | string | null | undefined)[]): string {
   const color = colors.find((color) => color != null)