@adminforth/dashboard 1.1.0 → 1.2.0

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

@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { computed, watch } from 'vue'
 import { useWidgetData } from '../../queries/useWidgetData.js'
+import {
+  normalizeGaugeCardWidgetConfig,
+} from '../../model/dashboard.types.js'
 import type { DashboardWidgetConfig, DashboardWidgetTableData } from '../../model/dashboard.types.js'
 import { CHART_COLORS, formatChartValue, toFiniteNumber } from '../chart/chart.utils.js'
 
@@ -18,40 +21,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,13 +55,13 @@ watch(
   { deep: true },
 )
 
-const gaugeConfig = computed(() => parseGaugeCardConfig(props.widget.gauge_card))
+const gaugeConfig = computed(() => normalizeGaugeCardWidgetConfig(props.widget.gauge_card))
 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?.valueField || columns.value[0])
+const minField = computed(() => gaugeConfig.value?.minField)
+const maxField = computed(() => gaugeConfig.value?.maxField)
 const minValue = computed(() => {
   const dynamicMin = minField.value ? parseOptionalNumber(firstRow.value[minField.value]) : undefined
   return dynamicMin ?? parseOptionalNumber(gaugeConfig.value?.min) ?? 0

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

@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { computed, watch } from 'vue'
 import { useWidgetData } from '../../queries/useWidgetData.js'
+import {
+  normalizeKpiCardWidgetConfig,
+} from '../../model/dashboard.types.js'
 import type { DashboardWidgetConfig, DashboardWidgetTableData } from '../../model/dashboard.types.js'
 import { formatChartValue, toFiniteNumber } from '../chart/chart.utils.js'
 
@@ -26,17 +29,12 @@ 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(() => normalizeKpiCardWidgetConfig(props.widget.kpi_card))
 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?.valueField || columns.value[0])
+const labelField = computed(() => kpiConfig.value?.labelField)
 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 ?? ''}`)

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 {
+  normalizePivotTableWidgetConfig,
+} from '../../model/dashboard.types.js'
 import type { DashboardWidgetConfig, DashboardWidgetData } from '../../model/dashboard.types.js'
 import { formatChartLabel, formatChartValue, toFiniteNumber } from '../chart/chart.utils.js'
 
@@ -26,20 +29,15 @@ 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(() => normalizePivotTableWidgetConfig(props.widget.pivot_table))
 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 shouldRenderAggregateMatrix = computed(() => isAggregateData.value && !pivotConfig.value?.columnField)
+const rowField = computed(() => pivotConfig.value?.rowField || (isAggregateData.value ? 'group' : columns.value[0]))
+const columnField = computed(() => pivotConfig.value?.columnField || columns.value[1])
+const valueField = computed(() => pivotConfig.value?.valueField || columns.value[2] || columns.value[1])
 const aggregation = computed(() => pivotConfig.value?.aggregation || (valueField.value ? 'sum' : 'count'))
 const pivotColumnLabels = computed(() => {
   if (shouldRenderAggregateMatrix.value) {

package/custom/widgets/table/TableWidget.vue

@@ -132,7 +132,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(() => (

package/dist/custom/model/dashboard.types.d.ts

@@ -66,7 +66,6 @@ export type DashboardWidgetConfig = {
     kpi_card?: unknown;
     pivot_table?: unknown;
     gauge_card?: unknown;
-    query?: unknown;
 };
 export type DashboardWidgetTableData = {
     kind?: 'table';
@@ -86,5 +85,30 @@ export type DashboardWidgetAggregateData = {
     values?: Record<string, unknown>;
 };
 export type DashboardWidgetData = DashboardWidgetTableData | DashboardWidgetAggregateData;
+export type NormalizedKpiCardWidgetConfig = {
+    valueField?: string;
+    labelField?: string;
+    prefix?: string;
+    suffix?: string;
+};
+export type NormalizedGaugeCardWidgetConfig = {
+    valueField?: string;
+    min?: number | string;
+    max?: number | string;
+    minField?: string;
+    maxField?: string;
+    suffix?: string;
+    color?: string;
+};
+export type NormalizedPivotTableWidgetConfig = {
+    rowField?: string;
+    columnField?: string;
+    valueField?: string;
+    aggregation?: 'count' | 'sum';
+};
 export declare function normalizeDashboardConfig(config: unknown): DashboardConfig;
 export declare function normalizeDashboardWidgetConfig(config: unknown): unknown;
+export declare function serializeDashboardWidgetConfigForEditor(widget: DashboardWidgetConfig): Record<string, unknown>;
+export declare function normalizeKpiCardWidgetConfig(value: unknown): NormalizedKpiCardWidgetConfig | undefined;
+export declare function normalizeGaugeCardWidgetConfig(value: unknown): NormalizedGaugeCardWidgetConfig | undefined;
+export declare function normalizePivotTableWidgetConfig(value: unknown): NormalizedPivotTableWidgetConfig | undefined;

package/dist/custom/model/dashboard.types.js

@@ -2,6 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.normalizeDashboardConfig = normalizeDashboardConfig;
 exports.normalizeDashboardWidgetConfig = normalizeDashboardWidgetConfig;
+exports.serializeDashboardWidgetConfigForEditor = serializeDashboardWidgetConfigForEditor;
+exports.normalizeKpiCardWidgetConfig = normalizeKpiCardWidgetConfig;
+exports.normalizeGaugeCardWidgetConfig = normalizeGaugeCardWidgetConfig;
+exports.normalizePivotTableWidgetConfig = normalizePivotTableWidgetConfig;
 function normalizeDashboardConfig(config) {
     const value = isRecord(config) ? config : {};
     return {
@@ -13,29 +17,78 @@ function normalizeDashboardConfig(config) {
     };
 }
 function normalizeDashboardWidgetConfig(config) {
-    var _a;
     if (!isRecord(config)) {
         return config;
     }
     const normalized = Object.assign({}, config);
-    const target = normalizeDashboardWidgetTarget((_a = normalized.target) !== null && _a !== void 0 ? _a : normalized.type);
-    if (target && normalized.target === undefined) {
-        normalized.target = target;
+    normalizeWidgetLayoutConfig(normalized);
+    if (normalized.table !== undefined) {
+        normalized.table = normalizeTableConfig(normalized.table);
     }
-    if (target === 'kpi_card') {
-        const kpiCardConfig = normalizeKpiCardConfig(normalized);
-        if (kpiCardConfig !== undefined) {
-            normalized.kpi_card = kpiCardConfig;
-        }
+    if (normalized.data_source !== undefined) {
+        normalized.dataSource = normalizeWidgetDataSource(normalized.data_source);
     }
-    if (target === 'gauge_card') {
-        const gaugeCardConfig = normalizeGaugeCardConfig(normalized);
-        if (gaugeCardConfig !== undefined) {
-            normalized.gauge_card = gaugeCardConfig;
-        }
+    const target = normalizeDashboardWidgetTarget(normalized.target);
+    if (target !== undefined) {
+        normalized.target = target;
     }
     return normalized;
 }
+function serializeDashboardWidgetConfigForEditor(widget) {
+    const serialized = Object.assign({}, widget);
+    if (Object.prototype.hasOwnProperty.call(serialized, 'minWidth')) {
+        serialized.min_width = widget.minWidth;
+        delete serialized.minWidth;
+    }
+    if (Object.prototype.hasOwnProperty.call(serialized, 'maxWidth')) {
+        serialized.max_width = widget.maxWidth;
+        delete serialized.maxWidth;
+    }
+    if (widget.table !== undefined) {
+        serialized.table = serializeTableConfigForEditor(widget.table);
+    }
+    if (widget.dataSource !== undefined) {
+        serialized.data_source = serializeWidgetDataSourceForEditor(widget.dataSource);
+        delete serialized.dataSource;
+    }
+    return serialized;
+}
+function normalizeKpiCardWidgetConfig(value) {
+    const config = asWidgetConfigRecord(value);
+    if (!config) {
+        return undefined;
+    }
+    const valueField = getStringField(config, 'value_field');
+    const labelField = getStringField(config, 'label_field');
+    const prefix = getStringField(config, 'prefix');
+    const suffix = getStringField(config, 'suffix');
+    return Object.assign(Object.assign(Object.assign(Object.assign({}, (valueField !== undefined ? { valueField } : {})), (labelField !== undefined ? { labelField } : {})), (prefix !== undefined ? { prefix } : {})), (suffix !== undefined ? { suffix } : {}));
+}
+function normalizeGaugeCardWidgetConfig(value) {
+    const config = asWidgetConfigRecord(value);
+    if (!config) {
+        return undefined;
+    }
+    const valueField = getStringField(config, 'value_field');
+    const minField = getStringField(config, 'min_field');
+    const maxField = getStringField(config, 'max_field');
+    const suffix = getStringField(config, 'suffix');
+    const color = getStringField(config, 'color');
+    return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (valueField !== undefined ? { valueField } : {})), (config.min !== undefined ? { min: config.min } : {})), (config.max !== undefined ? { max: config.max } : {})), (minField !== undefined ? { minField } : {})), (maxField !== undefined ? { maxField } : {})), (suffix !== undefined ? { suffix } : {})), (color !== undefined ? { color } : {}));
+}
+function normalizePivotTableWidgetConfig(value) {
+    const config = asWidgetConfigRecord(value);
+    if (!config) {
+        return undefined;
+    }
+    const rowField = getStringField(config, 'row_field');
+    const columnField = getStringField(config, 'column_field');
+    const valueField = getStringField(config, 'value_field');
+    const aggregation = config.aggregation === 'count' || config.aggregation === 'sum'
+        ? config.aggregation
+        : undefined;
+    return Object.assign(Object.assign(Object.assign(Object.assign({}, (rowField !== undefined ? { rowField } : {})), (columnField !== undefined ? { columnField } : {})), (valueField !== undefined ? { valueField } : {})), (aggregation !== undefined ? { aggregation } : {}));
+}
 function normalizeDashboardWidgetTarget(value) {
     switch (value) {
         case 'empty':
@@ -49,46 +102,84 @@ function normalizeDashboardWidgetTarget(value) {
             return undefined;
     }
 }
-function normalizeKpiCardConfig(value) {
-    const config = isRecord(value.kpi_card) ? Object.assign({}, value.kpi_card) : {};
-    if (typeof value.valueField === 'string' && config.value_field === undefined) {
-        config.value_field = value.valueField;
+function normalizeWidgetLayoutConfig(value) {
+    if (value.min_width !== undefined) {
+        value.minWidth = value.min_width;
     }
-    if (typeof value.labelField === 'string' && config.label_field === undefined) {
-        config.label_field = value.labelField;
+    if (value.max_width !== undefined) {
+        value.maxWidth = value.max_width;
     }
-    if (typeof value.prefix === 'string' && config.prefix === undefined) {
-        config.prefix = value.prefix;
+}
+function normalizeTableConfig(value) {
+    if (!isRecord(value)) {
+        return value;
     }
-    if (typeof value.suffix === 'string' && config.suffix === undefined) {
-        config.suffix = value.suffix;
+    const normalized = Object.assign({}, value);
+    if (normalized.page_size !== undefined) {
+        normalized.pageSize = normalized.page_size;
     }
-    return Object.keys(config).length ? config : value.kpi_card;
+    return normalized;
 }
-function normalizeGaugeCardConfig(value) {
-    const config = isRecord(value.gauge_card) ? Object.assign({}, value.gauge_card) : {};
-    if (typeof value.valueField === 'string' && config.value_field === undefined) {
-        config.value_field = value.valueField;
+function normalizeWidgetDataSource(value) {
+    if (!isRecord(value) || typeof value.type !== 'string') {
+        return value;
+    }
+    const resourceId = typeof value.resource_id === 'string'
+        ? value.resource_id
+        : undefined;
+    if (value.type === 'resource') {
+        return Object.assign(Object.assign(Object.assign(Object.assign({ type: 'resource' }, (resourceId !== undefined ? { resourceId } : {})), (value.columns !== undefined ? { columns: value.columns } : {})), (value.filters !== undefined ? { filters: value.filters } : {})), (value.sort !== undefined ? { sort: value.sort } : {}));
     }
-    if (value.min !== undefined && config.min === undefined) {
-        config.min = value.min;
+    if (value.type === 'aggregate') {
+        const groupBy = normalizeGroupByRule(value.group_by);
+        return Object.assign(Object.assign(Object.assign(Object.assign({ type: 'aggregate' }, (resourceId !== undefined ? { resourceId } : {})), (value.aggregations !== undefined ? { aggregations: value.aggregations } : {})), (groupBy !== undefined ? { groupBy } : {})), (value.filters !== undefined ? { filters: value.filters } : {}));
+    }
+    return value;
+}
+function normalizeGroupByRule(value) {
+    if (!isRecord(value) || typeof value.type !== 'string') {
+        return value;
     }
-    if (value.max !== undefined && config.max === undefined) {
-        config.max = value.max;
+    if (value.type === 'field') {
+        return Object.assign({ type: 'field' }, (value.field !== undefined ? { field: value.field } : {}));
     }
-    if (typeof value.minField === 'string' && config.min_field === undefined) {
-        config.min_field = value.minField;
+    if (value.type === 'date_trunc') {
+        return Object.assign(Object.assign(Object.assign({ type: 'date_trunc' }, (value.field !== undefined ? { field: value.field } : {})), (value.truncation !== undefined ? { truncation: value.truncation } : {})), (value.timezone !== undefined ? { timezone: value.timezone } : {}));
     }
-    if (typeof value.maxField === 'string' && config.max_field === undefined) {
-        config.max_field = value.maxField;
+    return value;
+}
+function serializeTableConfigForEditor(value) {
+    if (!isRecord(value)) {
+        return value;
     }
-    if (typeof value.suffix === 'string' && config.suffix === undefined) {
-        config.suffix = value.suffix;
+    const serialized = Object.assign({}, value);
+    if (Object.prototype.hasOwnProperty.call(serialized, 'pageSize')) {
+        serialized.page_size = serialized.pageSize;
+        delete serialized.pageSize;
     }
-    if (typeof value.color === 'string' && config.color === undefined) {
-        config.color = value.color;
+    return serialized;
+}
+function serializeWidgetDataSourceForEditor(value) {
+    if (value.type === 'resource') {
+        return Object.assign(Object.assign(Object.assign({ type: 'resource', resource_id: value.resourceId }, (value.columns !== undefined ? { columns: value.columns } : {})), (value.filters !== undefined ? { filters: value.filters } : {})), (value.sort !== undefined ? { sort: value.sort } : {}));
     }
-    return Object.keys(config).length ? config : value.gauge_card;
+    return Object.assign(Object.assign({ type: 'aggregate', resource_id: value.resourceId, aggregations: value.aggregations }, (value.groupBy !== undefined ? { group_by: serializeGroupByRuleForEditor(value.groupBy) } : {})), (value.filters !== undefined ? { filters: value.filters } : {}));
+}
+function serializeGroupByRuleForEditor(value) {
+    if (value.type === 'field') {
+        return {
+            type: 'field',
+            field: value.field,
+        };
+    }
+    return Object.assign({ type: 'date_trunc', field: value.field, truncation: value.truncation }, (value.timezone !== undefined ? { timezone: value.timezone } : {}));
+}
+function asWidgetConfigRecord(value) {
+    return isRecord(value) ? value : undefined;
+}
+function getStringField(record, key) {
+    const value = record[key];
+    return typeof value === 'string' ? value : undefined;
 }
 function isRecord(value) {
     return typeof value === 'object' && value !== null;