@adminforth/dashboard 1.1.0 → 1.3.0

package/custom/widgets/chart/ChartWidget.vue

@@ -26,7 +26,7 @@
       :rows="rows"
       :x-field="xField"
       :y-field="yField"
-      :series-name="chartConfig.series_name"
+      :series-name="lineSeriesName"
       :color="chartConfig.color"
       :height="chartHeight"
     />
@@ -71,7 +71,8 @@
       v-else-if="chartConfig?.type === 'stacked_bar'"
       :rows="rows"
       :x-field="xField"
-      :series="stackedBarSeries"
+      :y-field="yField"
+      :series-field="seriesField"
       :colors="chartConfig.colors"
       :height="chartHeight"
     />
@@ -91,13 +92,14 @@
 import { computed, watch } from 'vue'
 import { useWidgetData } from '../../queries/useWidgetData.js'
 import type { DashboardWidgetConfig, DashboardWidgetTableData } from '../../model/dashboard.types.js'
+import { normalizeChartWidgetConfig } from './chart.types.js'
 import BarChart from './bar/BarChart.vue'
 import FunnelChart from './funnel/FunnelChart.vue'
 import HistogramChart from './histogram/HistogramChart.vue'
 import LineChart from './line/LineChart.vue'
 import PieChart from './pie/PieChart.vue'
 import StackedBarChart from './stacked-bar/StackedBarChart.vue'
-import { formatChartLabel, toFiniteNumber } from './chart.utils.js'
+import { toFiniteNumber } from './chart.utils.js'
 
 const DEFAULT_WIDGET_HEIGHT = 500
 
@@ -126,31 +128,37 @@ watch(
 const chartData = computed(() => data.value?.data as DashboardWidgetTableData | null)
 const rows = computed(() => chartData.value?.rows ?? [])
 const columns = computed(() => chartData.value?.columns ?? [])
-const chartConfig = computed(() => props.widget.chart)
-const xField = computed(() => chartConfig.value?.x_field || columns.value[0])
-const yField = computed(() => chartConfig.value?.y_field || columns.value[1])
-const labelField = computed(() => chartConfig.value?.label_field || columns.value[0])
-const valueField = computed(() => chartConfig.value?.value_field || columns.value[1])
-const pieRows = computed(() => {
-  if (chartConfig.value?.value_field) {
-    return rows.value
-  }
+const chartConfig = computed(() => normalizeChartWidgetConfig(props.widget.chart))
+
+function resolveChartDimensionField(field: string | undefined, fallbackField: string | undefined) {
+  const resolvedField = field ?? fallbackField
 
-  const groupedRows = new Map<string, { label: string, value: number }>()
+  if (!resolvedField) {
+    return ''
+  }
 
-  for (const row of rows.value) {
-    const label = formatChartLabel(row[labelField.value])
-    const item = groupedRows.get(label) ?? { label, value: 0 }
-    item.value += 1
-    groupedRows.set(label, item)
+  if (columns.value.includes(resolvedField)) {
+    return resolvedField
   }
 
-  return Array.from(groupedRows.values())
+  return resolvedField
+}
+
+const firstYField = computed(() => {
+  const y = chartConfig.value?.y
+  return Array.isArray(y) ? y[0]?.field : y?.field
 })
-const pieLabelField = computed(() => chartConfig.value?.value_field ? labelField.value : 'label')
-const pieValueField = computed(() => chartConfig.value?.value_field ? valueField.value : 'value')
+const xField = computed(() => resolveChartDimensionField(chartConfig.value?.x?.field, columns.value[0]))
+const yField = computed(() => firstYField.value || columns.value[1])
+const labelField = computed(() => resolveChartDimensionField(chartConfig.value?.label?.field, columns.value[0] || 'name'))
+const valueField = computed(() => chartConfig.value?.value?.field || columns.value[1] || 'value')
+const pieRows = computed(() => rows.value)
+const pieLabelField = computed(() => labelField.value)
+const pieValueField = computed(() => valueField.value)
 const barRows = computed(() => {
-  const bucketField = chartConfig.value?.bucket_field
+  const bucketField = chartConfig.value?.type === 'histogram'
+    ? chartConfig.value.x?.field
+    : undefined
 
   if (!bucketField) {
     return rows.value
@@ -167,19 +175,12 @@ const barRows = computed(() => {
     }).length,
   }))
 })
-const barLabelField = computed(() => chartConfig.value?.bucket_field ? 'label' : labelField.value)
-const barValueField = computed(() => chartConfig.value?.bucket_field ? 'count' : valueField.value)
-const stackedBarSeries = computed(() => {
-  if (chartConfig.value?.series?.length) {
-    return chartConfig.value.series
-  }
-
-  return columns.value
-    .filter((column) => column !== xField.value)
-    .map((column) => ({
-      name: column,
-      field: column,
-    }))
+const barLabelField = computed(() => chartConfig.value?.type === 'histogram' && chartConfig.value.buckets ? 'label' : xField.value)
+const barValueField = computed(() => chartConfig.value?.type === 'histogram' && chartConfig.value.buckets ? 'count' : yField.value)
+const seriesField = computed(() => chartConfig.value?.series?.field || columns.value[2] || '')
+const lineSeriesName = computed(() => {
+  const y = chartConfig.value?.y
+  return Array.isArray(y) ? y[0]?.label : undefined
 })
 
 const chartHeight = computed(() => {

package/custom/widgets/chart/bar/BarChart.vue

@@ -83,7 +83,14 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useElementSize } from '../../../composables/useElementSize.js'
-import { CHART_COLORS, formatChartAxisLabel, formatChartLabel, formatChartValue, toFiniteNumber } from '../chart.utils.js'
+import {
+  CHART_COLORS,
+  formatChartAxisLabel,
+  formatChartLabel,
+  formatChartValue,
+  getChartYAxisWidth,
+  toFiniteNumber,
+} from '../chart.utils.js'
 
 const props = withDefaults(defineProps<{
   rows: Record<string, unknown>[]
@@ -97,12 +104,6 @@ const props = withDefaults(defineProps<{
 
 const { el: rootEl, width: rootWidth, height: rootHeight } = useElementSize<HTMLDivElement>()
 
-const padding = {
-  top: 20,
-  right: 6,
-  bottom: 34,
-  left: 38,
-}
 const chartWidth = computed(() => Math.max(rootWidth.value, 1))
 const chartHeight = computed(() => {
   if (rootHeight.value > 0) {
@@ -115,8 +116,15 @@ const chartHeight = computed(() => {
 const chartColor = computed(() => props.color || CHART_COLORS[0])
 const values = computed(() => props.rows.map((row) => toFiniteNumber(row[props.valueField])))
 const maxValue = computed(() => Math.max(...values.value, 1))
-const innerWidth = computed(() => Math.max(chartWidth.value - padding.left - padding.right, 1))
-const innerHeight = computed(() => Math.max(chartHeight.value - padding.top - padding.bottom, 1))
+const yTickValues = computed(() => [maxValue.value, maxValue.value * 0.5, 0])
+const padding = computed(() => ({
+  top: 20,
+  right: 6,
+  bottom: 34,
+  left: getChartYAxisWidth(yTickValues.value, chartWidth.value),
+}))
+const innerWidth = computed(() => Math.max(chartWidth.value - padding.value.left - padding.value.right, 1))
+const innerHeight = computed(() => Math.max(chartHeight.value - padding.value.top - padding.value.bottom, 1))
 const barGap = 12
 const barWidth = computed(() => {
   const count = Math.max(props.rows.length, 1)
@@ -126,7 +134,7 @@ const totalChartWidth = computed(() => {
   const count = Math.max(props.rows.length, 1)
   return count * barWidth.value + (count - 1) * barGap
 })
-const chartStartX = computed(() => padding.left + Math.max((innerWidth.value - totalChartWidth.value) / 2, 0))
+const chartStartX = computed(() => padding.value.left + Math.max((innerWidth.value - totalChartWidth.value) / 2, 0))
 const visibleLabelIndexes = computed(() => {
   const count = props.rows.length
   const approxLabelWidth = 52
@@ -155,13 +163,13 @@ const bars = computed(() => props.rows.map((row, index) => {
     axisLabel: formatChartAxisLabel(row[props.labelField]),
     value,
     x: chartStartX.value + index * (barWidth.value + barGap),
-    y: padding.top + innerHeight.value - height,
+    y: padding.value.top + innerHeight.value - height,
     height,
   }
 }))
 
 const yTicks = computed(() => [0, 0.5, 1].map((ratio) => ({
   value: maxValue.value * (1 - ratio),
-  y: padding.top + innerHeight.value * ratio,
+  y: padding.value.top + innerHeight.value * ratio,
 })))
 </script>

package/custom/widgets/chart/chart.types.ts

@@ -1,3 +1,5 @@
+import type { ValueFormat } from '../../model/dashboard.types.js'
+
 export type ChartWidgetType =
   | 'line'
   | 'pie'
@@ -12,23 +14,55 @@ export type ChartWidgetBucketConfig = {
   max?: number
 }
 
+export type ChartFieldRef = {
+  field: string
+  label?: string
+  format?: ValueFormat
+}
+
 export type ChartWidgetSeriesConfig = {
-  name: string
   field: string
+  label?: string
   color?: string
 }
 
 export type ChartWidgetConfig = {
   type: ChartWidgetType
   title?: string
-  x_field?: string
-  y_field?: string
-  label_field?: string
-  value_field?: string
-  bucket_field?: string
+  x?: ChartFieldRef
+  y?: ChartFieldRef | ChartFieldRef[]
+  label?: ChartFieldRef
+  value?: ChartFieldRef
   buckets?: ChartWidgetBucketConfig[]
-  series?: ChartWidgetSeriesConfig[]
-  series_name?: string
+  series?: ChartWidgetSeriesConfig
   color?: string
   colors?: string[]
 }
+
+export type NormalizedChartWidgetConfig = ChartWidgetConfig
+
+export function normalizeChartWidgetConfig(value: unknown): NormalizedChartWidgetConfig | undefined {
+  if (!isRecord(value) || !normalizeChartWidgetType(value.type)) {
+    return undefined
+  }
+
+  return value as ChartWidgetConfig
+}
+
+function normalizeChartWidgetType(value: unknown): ChartWidgetType | undefined {
+  switch (value) {
+    case 'line':
+    case 'pie':
+    case 'bar':
+    case 'stacked_bar':
+    case 'funnel':
+    case 'histogram':
+      return value
+    default:
+      return undefined
+  }
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null
+}

package/custom/widgets/chart/chart.utils.ts

@@ -18,6 +18,17 @@ export function formatChartValue(value: number, options: Intl.NumberFormatOption
   return new Intl.NumberFormat(undefined, options).format(value)
 }
 
+export function getChartYAxisWidth(values: number[], chartWidth: number) {
+  const maxLabelLength = Math.max(
+    ...values.map((value) => formatChartValue(value).length),
+    1,
+  )
+  const estimatedWidth = Math.ceil(maxLabelLength * 6.5) + 18
+  const responsiveMaxWidth = Math.max(Math.floor(chartWidth * 0.36), 38)
+
+  return Math.min(Math.max(estimatedWidth, 38), responsiveMaxWidth, 120)
+}
+
 export function formatChartLabel(value: unknown) {
   if (typeof value !== 'string') {
     return String(value)

package/custom/widgets/chart/funnel/FunnelChart.vue

@@ -48,9 +48,11 @@ const funnelRows = computed(() => {
     groupedRows.set(label, item)
   }
 
-  return Array.from(groupedRows.values())
-    .filter((row) => row.value > 0)
-    .sort((left, right) => right.value - left.value)
+  const rows = Array.from(groupedRows.values()).filter((row) => row.value > 0)
+
+  return props.labelField === 'name'
+    ? rows
+    : rows.sort((left, right) => right.value - left.value)
 })
 
 const maxValue = computed(() => {
@@ -194,4 +196,4 @@ const segments = computed(() => funnelRows.value.map((row, index) => {
       </div>
     </div>
   </div>
-</template>
+</template>

package/custom/widgets/chart/line/LineChart.vue

@@ -85,7 +85,14 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useElementSize } from '../../../composables/useElementSize.js'
-import { CHART_COLORS, formatChartAxisLabel, formatChartLabel, formatChartValue, toFiniteNumber } from '../chart.utils.js'
+import {
+  CHART_COLORS,
+  formatChartAxisLabel,
+  formatChartLabel,
+  formatChartValue,
+  getChartYAxisWidth,
+  toFiniteNumber,
+} from '../chart.utils.js'
 
 const props = withDefaults(defineProps<{
   rows: Record<string, unknown>[]
@@ -100,12 +107,6 @@ const props = withDefaults(defineProps<{
 
 const { el: rootEl, width: rootWidth, height: rootHeight } = useElementSize<HTMLDivElement>()
 
-const padding = {
-  top: 12,
-  right: 6,
-  bottom: 24,
-  left: 38,
-}
 const chartWidth = computed(() => Math.max(rootWidth.value, 1))
 const chartHeight = computed(() => {
   if (rootHeight.value > 0) {
@@ -118,14 +119,21 @@ const chartHeight = computed(() => {
 const chartColor = computed(() => props.color || CHART_COLORS[0])
 const values = computed(() => props.rows.map((row) => toFiniteNumber(row[props.yField])))
 const maxValue = computed(() => Math.max(...values.value, 1))
-const innerWidth = computed(() => Math.max(chartWidth.value - padding.left - padding.right, 1))
-const innerHeight = computed(() => Math.max(chartHeight.value - padding.top - padding.bottom, 1))
+const yTickValues = computed(() => [maxValue.value, maxValue.value * 0.5, 0])
+const padding = computed(() => ({
+  top: 12,
+  right: 6,
+  bottom: 24,
+  left: getChartYAxisWidth(yTickValues.value, chartWidth.value),
+}))
+const innerWidth = computed(() => Math.max(chartWidth.value - padding.value.left - padding.value.right, 1))
+const innerHeight = computed(() => Math.max(chartHeight.value - padding.value.top - padding.value.bottom, 1))
 
 const points = computed(() => {
   if (props.rows.length === 1) {
     return [{
-      x: padding.left + innerWidth.value / 2,
-      y: padding.top + innerHeight.value - (values.value[0] / maxValue.value) * innerHeight.value,
+      x: padding.value.left + innerWidth.value / 2,
+      y: padding.value.top + innerHeight.value - (values.value[0] / maxValue.value) * innerHeight.value,
       label: formatChartLabel(props.rows[0][props.xField]),
       axisLabel: formatChartAxisLabel(props.rows[0][props.xField]),
       value: values.value[0],
@@ -133,8 +141,8 @@ const points = computed(() => {
   }
 
   return props.rows.map((row, index) => ({
-    x: padding.left + (index / (props.rows.length - 1)) * innerWidth.value,
-    y: padding.top + innerHeight.value - (values.value[index] / maxValue.value) * innerHeight.value,
+    x: padding.value.left + (index / (props.rows.length - 1)) * innerWidth.value,
+    y: padding.value.top + innerHeight.value - (values.value[index] / maxValue.value) * innerHeight.value,
     label: formatChartLabel(row[props.xField]),
     axisLabel: formatChartAxisLabel(row[props.xField]),
     value: values.value[index],
@@ -152,12 +160,12 @@ const fillPath = computed(() => {
 
   const first = points.value[0]
   const last = points.value[points.value.length - 1]
-  return `${linePath.value} L ${last.x} ${padding.top + innerHeight.value} L ${first.x} ${padding.top + innerHeight.value} Z`
+  return `${linePath.value} L ${last.x} ${padding.value.top + innerHeight.value} L ${first.x} ${padding.value.top + innerHeight.value} Z`
 })
 
 const yTicks = computed(() => [0, 0.5, 1].map((ratio) => ({
   value: maxValue.value * (1 - ratio),
-  y: padding.top + innerHeight.value * ratio,
+  y: padding.value.top + innerHeight.value * ratio,
 })))
 
 const xLabels = computed(() => {

package/custom/widgets/chart/stacked-bar/StackedBarChart.vue

@@ -1,13 +1,20 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useElementSize } from '../../../composables/useElementSize.js'
-import type { ChartWidgetSeriesConfig } from '../chart.types.js'
-import { CHART_COLORS, formatChartAxisLabel, formatChartLabel, formatChartValue, toFiniteNumber } from '../chart.utils.js'
+import {
+  CHART_COLORS,
+  formatChartAxisLabel,
+  formatChartLabel,
+  formatChartValue,
+  getChartYAxisWidth,
+  toFiniteNumber,
+} from '../chart.utils.js'
 
 const props = withDefaults(defineProps<{
   rows: Record<string, unknown>[]
   xField: string
-  series: ChartWidgetSeriesConfig[]
+  yField: string
+  seriesField: string
   colors?: string[]
   height?: number
 }>(), {
@@ -17,16 +24,11 @@ const props = withDefaults(defineProps<{
 const { el: rootEl, width: rootWidth } = useElementSize<HTMLDivElement>()
 const { el: svgEl, width: svgWidth, height: svgHeight } = useElementSize<HTMLDivElement>()
 
-const padding = {
-  top: 24,
-  right: 6,
-  bottom: 34,
-  left: 38,
-}
 const barGap = 10
-const normalizedSeries = computed(() => props.series.map((series, index) => ({
-  ...series,
-  color: series.color || props.colors?.[index] || CHART_COLORS[index % CHART_COLORS.length],
+const seriesNames = computed(() => Array.from(new Set(props.rows.map((row) => formatChartLabel(row[props.seriesField])))))
+const normalizedSeries = computed(() => seriesNames.value.map((name, index) => ({
+  name,
+  color: props.colors?.[index] || CHART_COLORS[index % CHART_COLORS.length],
 })))
 const showLegend = computed(() => normalizedSeries.value.length > 0)
 const isCompact = computed(() => rootWidth.value > 0 && rootWidth.value < 420)
@@ -38,19 +40,15 @@ const chartHeight = computed(() => {
 
   return Math.max(props.height - (showLegend.value ? 28 : 0), 96)
 })
-const innerWidth = computed(() => Math.max(chartWidth.value - padding.left - padding.right, 1))
-const innerHeight = computed(() => Math.max(chartHeight.value - padding.top - padding.bottom, 1))
 const groupedRows = computed(() => {
   const grouped = new Map<string, Record<string, unknown>>()
 
   for (const row of props.rows) {
     const label = formatChartLabel(row[props.xField])
     const item = grouped.get(label) ?? { [props.xField]: label }
+    const seriesName = formatChartLabel(row[props.seriesField])
 
-    for (const series of normalizedSeries.value) {
-      item[series.name] = toFiniteNumber(item[series.name])
-        + getSeriesContribution(row[series.field], series.name)
-    }
+    item[seriesName] = toFiniteNumber(item[seriesName]) + toFiniteNumber(row[props.yField])
 
     grouped.set(label, item)
   }
@@ -65,15 +63,24 @@ const totalChartWidth = computed(() => {
   const count = Math.max(groupedRows.value.length, 1)
   return count * barWidth.value + (count - 1) * barGap
 })
-const chartStartX = computed(() => padding.left + Math.max((innerWidth.value - totalChartWidth.value) / 2, 0))
+const chartStartX = computed(() => padding.value.left + Math.max((innerWidth.value - totalChartWidth.value) / 2, 0))
 const totals = computed(() => groupedRows.value.map((row) => normalizedSeries.value.reduce(
   (sum, series) => sum + toFiniteNumber(row[series.name]),
   0,
 )))
 const maxTotal = computed(() => Math.max(...totals.value, 1))
+const yTickValues = computed(() => [maxTotal.value, maxTotal.value * 0.5, 0])
+const padding = computed(() => ({
+  top: 24,
+  right: 6,
+  bottom: 34,
+  left: getChartYAxisWidth(yTickValues.value, chartWidth.value),
+}))
+const innerWidth = computed(() => Math.max(chartWidth.value - padding.value.left - padding.value.right, 1))
+const innerHeight = computed(() => Math.max(chartHeight.value - padding.value.top - padding.value.bottom, 1))
 
 const bars = computed(() => groupedRows.value.map((row, rowIndex) => {
-  let y = padding.top + innerHeight.value
+  let y = padding.value.top + innerHeight.value
 
   return {
     label: String(row[props.xField]),
@@ -118,31 +125,9 @@ const visibleLabelIndexes = computed(() => {
 
 const yTicks = computed(() => [0, 0.5, 1].map((ratio) => ({
   value: maxTotal.value * (1 - ratio),
-  y: padding.top + innerHeight.value * ratio,
+  y: padding.value.top + innerHeight.value * ratio,
 })))
 
-function getSeriesContribution(value: unknown, seriesName: string) {
-  if (typeof value === 'boolean') {
-    return value === getBooleanSeriesValue(seriesName) ? 1 : 0
-  }
-
-  if (typeof value === 'string' && ['true', 'false'].includes(value.toLowerCase())) {
-    return (value.toLowerCase() === 'true') === getBooleanSeriesValue(seriesName) ? 1 : 0
-  }
-
-  return toFiniteNumber(value)
-}
-
-function getBooleanSeriesValue(seriesName: string) {
-  const normalizedName = seriesName.toLowerCase()
-
-  if (normalizedName.includes('unlisted') || normalizedName.includes('false')) {
-    return false
-  }
-
-  return true
-}
-
 function getBarTooltip(bar: { label: string, total: number, segments: Array<{ name: string, value: number }> }) {
   const percentFormatter = new Intl.NumberFormat(undefined, { maximumFractionDigits: 1 })
 

package/custom/widgets/gauge-card/GaugeCardWidget.vue

@@ -18,40 +18,6 @@ const {
   refetch,
 } = useWidgetData(dashboardSlugRef, widgetIdRef)
 
-type GaugeCardConfig = {
-  value_field?: string
-  valueField?: string
-  min?: number | string
-  max?: number | string
-  min_field?: string
-  minField?: string
-  max_field?: string
-  maxField?: string
-  suffix?: string
-  color?: string
-}
-
-function isRecord(value: unknown): value is Record<string, unknown> {
-  return typeof value === 'object' && value !== null
-}
-
-function parseGaugeCardConfig(value: unknown): GaugeCardConfig | undefined {
-  if (isRecord(value)) {
-    return value as GaugeCardConfig
-  }
-
-  if (typeof value !== 'string') {
-    return undefined
-  }
-
-  try {
-    const parsed = JSON.parse(value) as unknown
-    return isRecord(parsed) ? parsed as GaugeCardConfig : undefined
-  } catch {
-    return undefined
-  }
-}
-
 function parseOptionalNumber(value: unknown): number | undefined {
   if (value === null || value === undefined || value === '') {
     return undefined
@@ -86,20 +52,18 @@ watch(
   { deep: true },
 )
 
-const gaugeConfig = computed(() => parseGaugeCardConfig(props.widget.gauge_card))
+const gaugeConfig = computed(() => props.widget.target === 'gauge_card' ? props.widget.card : undefined)
 const widgetData = computed(() => data.value?.data as DashboardWidgetTableData | null)
 const columns = computed(() => widgetData.value?.columns ?? [])
 const firstRow = computed(() => widgetData.value?.rows[0] ?? {})
-const valueField = computed(() => gaugeConfig.value?.value_field || gaugeConfig.value?.valueField || columns.value[0])
-const minField = computed(() => gaugeConfig.value?.min_field || gaugeConfig.value?.minField)
-const maxField = computed(() => gaugeConfig.value?.max_field || gaugeConfig.value?.maxField)
+const valueField = computed(() => gaugeConfig.value?.value.field || columns.value[0])
+const targetField = computed(() => gaugeConfig.value?.target?.field ?? gaugeConfig.value?.progress?.targetField)
 const minValue = computed(() => {
-  const dynamicMin = minField.value ? parseOptionalNumber(firstRow.value[minField.value]) : undefined
-  return dynamicMin ?? parseOptionalNumber(gaugeConfig.value?.min) ?? 0
+  return 0
 })
 const maxValue = computed(() => {
-  const dynamicMax = maxField.value ? parseOptionalNumber(firstRow.value[maxField.value]) : undefined
-  return dynamicMax ?? parseOptionalNumber(gaugeConfig.value?.max) ?? 100
+  const dynamicMax = targetField.value ? parseOptionalNumber(firstRow.value[targetField.value]) : undefined
+  return dynamicMax ?? parseOptionalNumber(gaugeConfig.value?.target?.value ?? gaugeConfig.value?.progress?.targetValue) ?? 100
 })
 const value = computed(() => toFiniteNumber(firstRow.value[valueField.value]))
 const fractionDigits = computed(() => Math.min([
@@ -179,7 +143,7 @@ const gaugeColor = computed(() => gaugeConfig.value?.color || CHART_COLORS[0])
       </svg>
 
       <div class="text-3xl font-bold text-lightNavbarText dark:text-darkNavbarText">
-        {{ formattedValue }}{{ gaugeConfig?.suffix ?? '' }}
+        {{ gaugeConfig?.value.prefix ?? '' }}{{ formattedValue }}{{ gaugeConfig?.value.suffix ?? '' }}
       </div>
       <div class="text-sm text-lightListTableText dark:text-darkListTableText">
         {{ formattedMinValue }} - {{ formattedMaxValue }}

package/custom/widgets/kpi-card/KpiCardWidget.vue

@@ -26,20 +26,16 @@ watch(
   { deep: true },
 )
 
-const kpiConfig = computed(() => props.widget.kpi_card as {
-  value_field?: string
-  label_field?: string
-  prefix?: string
-  suffix?: string
-} | undefined)
+const kpiConfig = computed(() => props.widget.target === 'kpi_card' ? props.widget.card : undefined)
 const widgetData = computed(() => data.value?.data as DashboardWidgetTableData | null)
 const columns = computed(() => widgetData.value?.columns ?? [])
 const firstRow = computed(() => widgetData.value?.rows[0] ?? {})
-const valueField = computed(() => kpiConfig.value?.value_field || columns.value[0])
-const labelField = computed(() => kpiConfig.value?.label_field)
+const valueField = computed(() => kpiConfig.value?.value.field || columns.value[0])
 const value = computed(() => toFiniteNumber(firstRow.value[valueField.value]))
-const label = computed(() => labelField.value ? String(firstRow.value[labelField.value]) : props.widget.label)
-const formattedValue = computed(() => `${kpiConfig.value?.prefix ?? ''}${formatChartValue(value.value)}${kpiConfig.value?.suffix ?? ''}`)
+const label = computed(() => kpiConfig.value?.subtitle?.field
+  ? String(firstRow.value[kpiConfig.value.subtitle.field])
+  : kpiConfig.value?.subtitle?.text ?? kpiConfig.value?.title ?? props.widget.label)
+const formattedValue = computed(() => `${kpiConfig.value?.value.prefix ?? ''}${formatChartValue(value.value)}${kpiConfig.value?.value.suffix ?? ''}`)
 </script>
 
 <template>

package/custom/widgets/pivot-table/PivotTableWidget.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { computed, watch } from 'vue'
 import { useWidgetData } from '../../queries/useWidgetData.js'
+import {
+  getFieldRefField,
+} from '../../model/dashboard.types.js'
 import type { DashboardWidgetConfig, DashboardWidgetData } from '../../model/dashboard.types.js'
 import { formatChartLabel, formatChartValue, toFiniteNumber } from '../chart/chart.utils.js'
 
@@ -26,21 +29,17 @@ watch(
   { deep: true },
 )
 
-const pivotConfig = computed(() => props.widget.pivot_table as {
-  row_field?: string
-  column_field?: string
-  value_field?: string
-  aggregation?: 'count' | 'sum'
-} | undefined)
+const pivotConfig = computed(() => props.widget.target === 'pivot_table' ? props.widget.pivot : undefined)
 const widgetData = computed(() => data.value?.data as DashboardWidgetData | null)
 const rows = computed(() => widgetData.value?.rows ?? [])
 const columns = computed(() => widgetData.value?.columns ?? [])
 const isAggregateData = computed(() => widgetData.value?.kind === 'aggregate')
-const shouldRenderAggregateMatrix = computed(() => isAggregateData.value && !pivotConfig.value?.column_field)
-const rowField = computed(() => pivotConfig.value?.row_field || (isAggregateData.value ? 'group' : columns.value[0]))
-const columnField = computed(() => pivotConfig.value?.column_field || columns.value[1])
-const valueField = computed(() => pivotConfig.value?.value_field || columns.value[2] || columns.value[1])
-const aggregation = computed(() => pivotConfig.value?.aggregation || (valueField.value ? 'sum' : 'count'))
+const shouldRenderAggregateMatrix = computed(() => isAggregateData.value && !pivotConfig.value?.columns?.length)
+const rowField = computed(() => getFieldRefField(pivotConfig.value?.rows[0]) || columns.value[0])
+const columnField = computed(() => getFieldRefField(pivotConfig.value?.columns?.[0]) || columns.value[1])
+const valueConfig = computed(() => pivotConfig.value?.values[0])
+const valueField = computed(() => valueConfig.value?.field || columns.value[2] || columns.value[1])
+const aggregation = computed(() => valueConfig.value?.aggregation || (valueField.value ? 'sum' : 'count'))
 const pivotColumnLabels = computed(() => {
   if (shouldRenderAggregateMatrix.value) {
     return columns.value.filter((column) => column !== rowField.value)