@adminforth/dashboard 1.1.0 → 1.3.0

package/dist/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/dist/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/dist/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)

package/dist/custom/widgets/table/TableWidget.vue

@@ -113,10 +113,11 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
 import { useWidgetData } from '../../queries/useWidgetData.js'
-import type { DashboardWidgetConfig, DashboardWidgetTableData } from '../../model/dashboard.types.js'
+import { getFieldRefField } from '../../model/dashboard.types.js'
+import type { DashboardWidgetConfig, DashboardWidgetTableData, FieldRef } from '../../model/dashboard.types.js'
 
 type TableWidgetConfig = {
-  columns?: string[]
+  columns?: FieldRef[]
   pagination?: boolean
   pageSize?: number
 }
@@ -132,7 +133,7 @@ const currentPage = ref(1)
 const currentPageInput = ref(1)
 const tableConfig = computed(() => props.widget.table as TableWidgetConfig | undefined)
 const isPaginationEnabled = computed(() => tableConfig.value?.pagination !== false)
-const pageSize = computed(() => tableConfig.value?.pageSize ?? props.widget.query?.limit ?? DEFAULT_PAGE_SIZE)
+const pageSize = computed(() => tableConfig.value?.pageSize ?? DEFAULT_PAGE_SIZE)
 const dashboardSlugRef = computed(() => props.dashboardSlug)
 const widgetIdRef = computed(() => props.widget.id)
 const widgetDataRequest = computed(() => (
@@ -168,7 +169,11 @@ const tableData = computed(() => {
 
 const columns = computed(() => {
   const configuredColumns = tableConfig.value?.columns
-  return configuredColumns ?? tableData.value?.columns ?? []
+  if (configuredColumns) {
+    return configuredColumns.map((column) => getFieldRefField(column)).filter(Boolean) as string[]
+  }
+
+  return tableData.value?.columns ?? []
 })
 
 const pagination = computed(() => tableData.value?.pagination)

package/dist/endpoint/widgets.js

@@ -13,10 +13,30 @@ import { DashboardApiResponseSchema, DashboardWidgetDataResponseSchema, GroupIdR
 import { StoredWidgetConfigSchema } from '../schema/widget.js';
 function formatWidgetConfigValidationErrors(error) {
     return error.issues.map((issue) => ({
-        field: issue.path.length ? issue.path.map(String).join('.') : 'config',
+        field: issue.path.length ? formatWidgetConfigFieldPath(issue.path.map(String).join('.')) : 'config',
         message: issue.message,
     }));
 }
+function formatWidgetConfigApiValidationErrors(errors) {
+    return errors.map((error) => (Object.assign(Object.assign({}, error), { field: formatWidgetConfigFieldPath(error.field) })));
+}
+function formatWidgetConfigFieldPath(field) {
+    const fieldAliases = new Map([
+        ['minWidth', 'min_width'],
+        ['maxWidth', 'max_width'],
+        ['groupBy', 'group_by'],
+        ['orderBy', 'order_by'],
+        ['pageSize', 'page_size'],
+        ['timeSeries', 'time_series'],
+        ['valueField', 'value_field'],
+        ['targetValue', 'target_value'],
+        ['targetField', 'target_field'],
+    ]);
+    return field
+        .split('.')
+        .map((segment) => { var _a; return (_a = fieldAliases.get(segment)) !== null && _a !== void 0 ? _a : segment; })
+        .join('.');
+}
 export function registerWidgetEndpoints(server, ctx) {
     server.endpoint({
         method: 'POST',
@@ -162,7 +182,7 @@ export function registerWidgetEndpoints(server, ctx) {
                 response.setStatus(422);
                 return {
                     error: 'Invalid widget config',
-                    validationErrors: apiValidationErrors,
+                    validationErrors: formatWidgetConfigApiValidationErrors(apiValidationErrors),
                 };
             }
             return ctx.persistDashboardConfig(dashboard, Object.assign(Object.assign({}, config), { widgets: config.widgets.map((item) => item.id === widgetId
@@ -172,7 +192,7 @@ export function registerWidgetEndpoints(server, ctx) {
     server.endpoint({
         method: 'POST',
         path: '/dashboard/get_dashboard_widget_data',
-        description: 'Loads query result data for one dashboard widget by dashboard slug and widget id.',
+        description: 'Loads widget data for one dashboard widget by dashboard slug and widget id.',
         request_schema: WidgetDataRequestSchema,
         response_schema: DashboardWidgetDataResponseSchema,
         handler: (_a) => __awaiter(this, [_a], void 0, function* ({ body, response }) {