feat: add label size customization for number card

frontend/src2/charts/components/NumberChart.vue

@@ -53,6 +53,10 @@ const cards = computed(() => {
 		const decimal = getNumberOption(idx, 'decimal')
 		const color = getNumberOption(idx, 'color')
 		const shorten_numbers = getNumberOption(idx, 'shorten_numbers')
+		const label_bold = getNumberOption(idx, 'label_bold')
+		const label_italic = getNumberOption(idx, 'label_italic')
+		const label_color = getNumberOption(idx, 'label_color')
+		const label_size = getNumberOption(idx, 'label_size')
 
 		return {
 			measure_name,
@@ -64,6 +68,10 @@ const cards = computed(() => {
 			prefix,
 			suffix,
 			color,
+			label_bold,
+			label_italic,
+			label_color,
+			label_size,
 		}
 	})
 })
@@ -105,14 +113,26 @@ function onDoubleClick(measure_name: string) {
 					prefix,
 					suffix,
 					color,
+					label_bold,
+					label_italic,
+					label_color,
+					label_size,
 				} in cards"
 				:key="measure_name"
 				class="flex max-h-[140px] items-center gap-2 overflow-hidden rounded bg-white px-6 pt-5 shadow cursor-pointer"
 				:class="config.comparison ? 'pb-6' : 'pb-3'"
 				@dblclick="onDoubleClick(measure_name)"
 			>
 				<div class="flex w-full flex-col">
-					<span class="truncate text-sm font-medium">
+					<span
+						class="truncate text-sm font-medium"
+						:style="{
+							fontWeight: label_bold ? 'bold' : '500',
+							fontStyle: label_italic ? 'italic' : 'normal',
+							color: label_color || undefined,
+							fontSize: label_size ? `${label_size}px` : undefined,
+						}"
+					>
 						{{ measure_name }}
 					</span>
 					<div

frontend/src2/charts/components/NumberChartConfigForm.vue

@@ -109,14 +109,55 @@ function setNumberOption(index: number, option: keyof NumberColumnOptions, value
 									</InlineFormControlLabel>
 									<InlineFormControlLabel label="Color">
 										<ColorInput
-											:model-value="getNumberOption(index, 'color')"
+											:model-value="
+												getNumberOption(index, 'color') as
+													| string
+													| undefined
+											"
 											@update:model-value="
 												setNumberOption(index, 'color', $event)
 											"
 											placement="left-start"
 										/>
 									</InlineFormControlLabel>
-
+									<InlineFormControlLabel label="Label Color">
+										<ColorInput
+											:model-value="
+												getNumberOption(index, 'label_color') as
+													| string
+													| undefined
+											"
+											@update:model-value="
+												setNumberOption(index, 'label_color', $event)
+											"
+											placement="left-start"
+										/>
+									</InlineFormControlLabel>
+									<InlineFormControlLabel label="Label Size">
+										<FormControl
+											type="number"
+											autocomplete="off"
+											:modelValue="getNumberOption(index, 'label_size')"
+											@update:modelValue="
+												setNumberOption(index, 'label_size', Number($event))
+											"
+											placeholder="14"
+										/>
+									</InlineFormControlLabel>
+									<Toggle
+										label="Bold Label"
+										:modelValue="getNumberOption(index, 'label_bold')"
+										@update:modelValue="
+											setNumberOption(index, 'label_bold', $event)
+										"
+									/>
+									<Toggle
+										label="Italic Label"
+										:modelValue="getNumberOption(index, 'label_italic')"
+										@update:modelValue="
+											setNumberOption(index, 'label_italic', $event)
+										"
+									/>
 									<Toggle
 										label="Show short numbers"
 										:modelValue="getNumberOption(index, 'shorten_numbers')"

frontend/src2/types/chart.types.ts

@@ -40,6 +40,9 @@ export type Series = {
 	align?: 'Left' | 'Right'
 	show_data_labels?: boolean
 	hide_from_chart?: boolean
+	label_bold?: boolean
+	label_italic?: boolean
+	label_color?: string
 }
 export type YAxisLine = Series & {
 	series: SeriesLine[]
@@ -93,6 +96,10 @@ export type NumberColumnOptions = {
 	prefix?: string
 	suffix?: string
 	color?: string
+	label_bold?: boolean
+	label_italic?: boolean
+	label_color?: string
+	label_size?: number
 }
 
 export type DonutChartConfig = {