@adminforth/dashboard 1.1.0 → 1.3.0

package/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/custom/composables/useElementSize.js

@@ -7,19 +7,31 @@ function useElementSize() {
     const width = (0, vue_1.ref)(0);
     const height = (0, vue_1.ref)(0);
     let observer;
+    let frameId;
     (0, vue_1.onMounted)(() => {
         observer = new ResizeObserver(([entry]) => {
             if (!entry) {
                 return;
             }
-            width.value = Math.floor(entry.contentRect.width);
-            height.value = Math.floor(entry.contentRect.height);
+            const nextWidth = Math.floor(entry.contentRect.width);
+            const nextHeight = Math.floor(entry.contentRect.height);
+            if (frameId !== undefined) {
+                cancelAnimationFrame(frameId);
+            }
+            frameId = requestAnimationFrame(() => {
+                frameId = undefined;
+                width.value = nextWidth;
+                height.value = nextHeight;
+            });
         });
         if (el.value) {
             observer.observe(el.value);
         }
     });
     (0, vue_1.onBeforeUnmount)(() => {
+        if (frameId !== undefined) {
+            cancelAnimationFrame(frameId);
+        }
         observer === null || observer === void 0 ? void 0 : observer.disconnect();
     });
     return {

package/dist/custom/composables/useElementSize.ts

@@ -13,6 +13,7 @@ export function useElementSize<T extends HTMLElement>(): ElementSizeState<T> {
   const height = ref(0)
 
   let observer: ResizeObserver | undefined
+  let frameId: number | undefined
 
   onMounted(() => {
     observer = new ResizeObserver(([entry]) => {
@@ -20,8 +21,18 @@ export function useElementSize<T extends HTMLElement>(): ElementSizeState<T> {
         return
       }
 
-      width.value = Math.floor(entry.contentRect.width)
-      height.value = Math.floor(entry.contentRect.height)
+      const nextWidth = Math.floor(entry.contentRect.width)
+      const nextHeight = Math.floor(entry.contentRect.height)
+
+      if (frameId !== undefined) {
+        cancelAnimationFrame(frameId)
+      }
+
+      frameId = requestAnimationFrame(() => {
+        frameId = undefined
+        width.value = nextWidth
+        height.value = nextHeight
+      })
     })
 
     if (el.value) {
@@ -30,6 +41,10 @@ export function useElementSize<T extends HTMLElement>(): ElementSizeState<T> {
   })
 
   onBeforeUnmount(() => {
+    if (frameId !== undefined) {
+      cancelAnimationFrame(frameId)
+    }
+
     observer?.disconnect()
   })
 

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

@@ -1,33 +1,4 @@
 import type { ChartWidgetConfig } from '../widgets/chart/chart.types.js';
-export type AggregationOperation = 'sum' | 'count' | 'avg' | 'min' | 'max' | 'median';
-export type AggregationRule = {
-    operation: AggregationOperation;
-    field?: string;
-};
-export type GroupByRule = {
-    type: 'field';
-    field: string;
-} | {
-    type: 'date_trunc';
-    field: string;
-    truncation: 'day' | 'week' | 'month' | 'year';
-    timezone?: string;
-};
-export type ResourceWidgetDataSource = {
-    type: 'resource';
-    resourceId: string;
-    columns?: string[];
-    sort?: unknown;
-    filters?: unknown;
-};
-export type AggregateWidgetDataSource = {
-    type: 'aggregate';
-    resourceId: string;
-    aggregations: Record<string, AggregationRule>;
-    groupBy?: GroupByRule;
-    filters?: unknown;
-};
-export type WidgetDataSource = ResourceWidgetDataSource | AggregateWidgetDataSource;
 export type DashboardConfig = {
     version: number;
     groups: DashboardGroupConfig[];
@@ -42,6 +13,9 @@ export type DashboardGroupMoveDirection = 'up' | 'down';
 export type DashboardWidgetMoveDirection = 'up' | 'down';
 export type DashboardWidgetTarget = 'empty' | 'table' | 'chart' | 'kpi_card' | 'pivot_table' | 'gauge_card';
 export type DashboardWidgetSize = 'small' | 'medium' | 'large' | 'wide' | 'full';
+export type QueryAggregateOperation = 'sum' | 'count' | 'count_distinct' | 'avg' | 'min' | 'max' | 'median';
+export type TimeGrain = 'hour' | 'day' | 'week' | 'month' | 'quarter' | 'year';
+export type ValueFormat = 'number' | 'compact_number' | 'currency' | 'percent' | 'percent_delta' | 'number_delta' | 'currency_delta';
 export type WidgetLayout = {
     size?: DashboardWidgetSize;
     width?: number;
@@ -49,7 +23,7 @@ export type WidgetLayout = {
     maxWidth?: number | null;
     height?: number;
 };
-export type DashboardWidgetConfig = {
+export type WidgetBaseConfig = {
     id: string;
     group_id: string;
     label?: string;
@@ -59,15 +33,173 @@ export type DashboardWidgetConfig = {
     minWidth?: number;
     maxWidth?: number | null;
     order: number;
-    target: DashboardWidgetTarget;
-    dataSource?: WidgetDataSource;
-    chart?: ChartWidgetConfig;
-    table?: unknown;
-    kpi_card?: unknown;
-    pivot_table?: unknown;
-    gauge_card?: unknown;
-    query?: unknown;
 };
+export type FilterExpression = {
+    and: FilterExpression[];
+} | {
+    or: FilterExpression[];
+} | Array<FilterExpression> | {
+    field: string;
+    eq?: unknown;
+    neq?: unknown;
+    gt?: unknown;
+    gte?: unknown;
+    lt?: unknown;
+    lte?: unknown;
+    in?: unknown[];
+    not_in?: unknown[];
+    like?: unknown;
+    ilike?: unknown;
+};
+export type QueryFieldSelectItem = {
+    field: string;
+    as?: string;
+    grain?: TimeGrain;
+};
+export type QueryAggregateSelectItem = {
+    agg: QueryAggregateOperation;
+    field?: string;
+    as: string;
+    filters?: FilterExpression;
+};
+export type QueryCalcSelectItem = {
+    calc: string;
+    as: string;
+};
+export type QuerySelectItem = QueryFieldSelectItem | QueryAggregateSelectItem | QueryCalcSelectItem;
+export type QueryGroupByItem = string | {
+    field: string;
+    as?: string;
+    grain?: TimeGrain;
+    timezone?: string;
+};
+export type QueryOrderByItem = {
+    field: string;
+    direction?: 'asc' | 'desc';
+};
+export type QueryConfig = {
+    resource: string;
+    select?: QuerySelectItem[];
+    filters?: FilterExpression;
+    groupBy?: QueryGroupByItem[];
+    orderBy?: QueryOrderByItem[];
+    limit?: number;
+    offset?: number;
+    timeSeries?: {
+        field: string;
+        grain: TimeGrain;
+        timezone?: string;
+    };
+    period?: {
+        field: string;
+        gte?: unknown;
+        lt?: unknown;
+    };
+    bucket?: {
+        field: string;
+        buckets: Array<{
+            label: string;
+            min?: number;
+            max?: number;
+        }>;
+    };
+    calcs?: QueryCalcSelectItem[];
+    formatting?: Record<string, unknown>;
+};
+export type FunnelQueryConfig = {
+    steps: FunnelQueryStep[];
+};
+export type FunnelQueryStep = {
+    name: string;
+    resource: string;
+    metric: QueryAggregateSelectItem;
+    filters?: FilterExpression;
+};
+export type FieldRef = string | {
+    field: string;
+    label?: string;
+    format?: ValueFormat;
+};
+export type TableViewConfig = {
+    columns?: FieldRef[];
+    pagination?: boolean;
+    pageSize?: number;
+};
+export type KpiCardViewConfig = {
+    title?: string;
+    value: {
+        field: string;
+        format?: ValueFormat;
+        prefix?: string;
+        suffix?: string;
+    };
+    subtitle?: {
+        text?: string;
+        field?: string;
+    };
+    comparison?: unknown;
+    sparkline?: unknown;
+};
+export type GaugeCardViewConfig = {
+    title?: string;
+    value: {
+        field: string;
+        format?: ValueFormat;
+        prefix?: string;
+        suffix?: string;
+    };
+    target?: {
+        value?: number;
+        field?: string;
+        label?: string;
+    };
+    progress?: {
+        valueField: string;
+        targetValue?: number;
+        targetField?: string;
+        format?: ValueFormat;
+    };
+    color?: string;
+};
+export type PivotTableViewConfig = {
+    rows: FieldRef[];
+    columns?: FieldRef[];
+    values: Array<{
+        field: string;
+        label?: string;
+        format?: ValueFormat;
+        aggregation?: 'sum' | 'count' | 'avg' | 'min' | 'max';
+    }>;
+};
+export type EmptyWidgetConfig = WidgetBaseConfig & {
+    target: 'empty';
+};
+export type TableWidgetConfig = WidgetBaseConfig & {
+    target: 'table';
+    table?: TableViewConfig;
+    query: QueryConfig;
+};
+export type ChartDashboardWidgetConfig = WidgetBaseConfig & {
+    target: 'chart';
+    chart: ChartWidgetConfig;
+    query: QueryConfig | FunnelQueryConfig;
+};
+export type KpiCardWidgetConfig = WidgetBaseConfig & {
+    target: 'kpi_card';
+    card: KpiCardViewConfig;
+    query: QueryConfig;
+};
+export type GaugeCardWidgetConfig = WidgetBaseConfig & {
+    target: 'gauge_card';
+    card: GaugeCardViewConfig;
+    query: QueryConfig;
+};
+export type PivotTableWidgetConfig = WidgetBaseConfig & {
+    target: 'pivot_table';
+    pivot: PivotTableViewConfig;
+    query: QueryConfig;
+};
+export type DashboardWidgetConfig = EmptyWidgetConfig | TableWidgetConfig | ChartDashboardWidgetConfig | KpiCardWidgetConfig | GaugeCardWidgetConfig | PivotTableWidgetConfig;
 export type DashboardWidgetTableData = {
     kind?: 'table';
     columns: string[];
@@ -84,7 +216,16 @@ export type DashboardWidgetAggregateData = {
     columns: string[];
     rows: Record<string, unknown>[];
     values?: Record<string, unknown>;
+    pagination?: {
+        page: number;
+        pageSize: number;
+        total: number;
+        totalPages: number;
+    };
 };
 export type DashboardWidgetData = DashboardWidgetTableData | DashboardWidgetAggregateData;
 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 getFieldRefField(value: FieldRef | undefined): string | undefined;
+export declare function getFieldRefLabel(value: FieldRef | undefined): string | undefined;

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

@@ -2,6 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.normalizeDashboardConfig = normalizeDashboardConfig;
 exports.normalizeDashboardWidgetConfig = normalizeDashboardWidgetConfig;
+exports.serializeDashboardWidgetConfigForEditor = serializeDashboardWidgetConfigForEditor;
+exports.getFieldRefField = getFieldRefField;
+exports.getFieldRefLabel = getFieldRefLabel;
 function normalizeDashboardConfig(config) {
     const value = isRecord(config) ? config : {};
     return {
@@ -13,29 +16,59 @@ 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.query !== undefined) {
+        normalized.query = normalizeQueryConfig(normalized.query);
+    }
+    if (normalized.table !== undefined) {
+        normalized.table = normalizeTableConfig(normalized.table);
+    }
+    if (normalized.card !== undefined) {
+        normalized.card = normalizeCardConfig(normalized.card);
     }
-    if (target === 'kpi_card') {
-        const kpiCardConfig = normalizeKpiCardConfig(normalized);
-        if (kpiCardConfig !== undefined) {
-            normalized.kpi_card = kpiCardConfig;
-        }
+    if (normalized.pivot !== undefined) {
+        normalized.pivot = normalizePivotConfig(normalized.pivot);
     }
-    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 ('query' in widget) {
+        serialized.query = serializeQueryConfigForEditor(widget.query);
+    }
+    if ('table' in widget && widget.table !== undefined) {
+        serialized.table = serializeTableConfigForEditor(widget.table);
+    }
+    if ('card' in widget && widget.card !== undefined) {
+        serialized.card = serializeCardConfigForEditor(widget.card);
+    }
+    if ('pivot' in widget && widget.pivot !== undefined) {
+        serialized.pivot = serializePivotConfigForEditor(widget.pivot);
+    }
+    return serialized;
+}
+function getFieldRefField(value) {
+    return typeof value === 'string' ? value : value === null || value === void 0 ? void 0 : value.field;
+}
+function getFieldRefLabel(value) {
+    return typeof value === 'string' ? value : value === null || value === void 0 ? void 0 : value.label;
+}
 function normalizeDashboardWidgetTarget(value) {
     switch (value) {
         case 'empty':
@@ -49,46 +82,79 @@ 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 (value.max_width !== undefined) {
+        value.maxWidth = value.max_width;
     }
-    if (typeof value.labelField === 'string' && config.label_field === undefined) {
-        config.label_field = value.labelField;
+}
+function normalizeQueryConfig(value) {
+    if (!isRecord(value)) {
+        return value;
     }
-    if (typeof value.prefix === 'string' && config.prefix === undefined) {
-        config.prefix = value.prefix;
+    if (Array.isArray(value.steps)) {
+        return {
+            steps: value.steps.map((step) => normalizeFunnelQueryStep(step)),
+        };
     }
-    if (typeof value.suffix === 'string' && config.suffix === undefined) {
-        config.suffix = value.suffix;
+    return Object.assign(Object.assign(Object.assign(Object.assign({}, value), (Array.isArray(value.group_by) ? { groupBy: value.group_by } : {})), (Array.isArray(value.order_by) ? { orderBy: value.order_by } : {})), (value.time_series !== undefined ? { timeSeries: value.time_series } : {}));
+}
+function normalizeFunnelQueryStep(value) {
+    if (!isRecord(value)) {
+        return value;
     }
-    return Object.keys(config).length ? config : value.kpi_card;
+    return Object.assign(Object.assign({}, value), (typeof value.resource_id === 'string' ? { resource: value.resource_id } : {}));
 }
-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 normalizeTableConfig(value) {
+    if (!isRecord(value)) {
+        return value;
     }
-    if (value.min !== undefined && config.min === undefined) {
-        config.min = value.min;
+    return Object.assign(Object.assign({}, value), (value.page_size !== undefined ? { pageSize: value.page_size } : {}));
+}
+function normalizeCardConfig(value) {
+    if (!isRecord(value)) {
+        return value;
     }
-    if (value.max !== undefined && config.max === undefined) {
-        config.max = value.max;
+    const normalized = Object.assign({}, value);
+    if (isRecord(normalized.progress)) {
+        normalized.progress = Object.assign(Object.assign(Object.assign(Object.assign({}, normalized.progress), (normalized.progress.value_field !== undefined ? { valueField: normalized.progress.value_field } : {})), (normalized.progress.target_value !== undefined ? { targetValue: normalized.progress.target_value } : {})), (normalized.progress.target_field !== undefined ? { targetField: normalized.progress.target_field } : {}));
     }
-    if (typeof value.minField === 'string' && config.min_field === undefined) {
-        config.min_field = value.minField;
+    if (isRecord(normalized.comparison)) {
+        normalized.comparison = Object.assign(Object.assign({}, normalized.comparison), (normalized.comparison.positive_is_good !== undefined ? { positiveIsGood: normalized.comparison.positive_is_good } : {}));
     }
-    if (typeof value.maxField === 'string' && config.max_field === undefined) {
-        config.max_field = value.maxField;
+    return normalized;
+}
+function normalizePivotConfig(value) {
+    return value;
+}
+function serializeQueryConfigForEditor(value) {
+    if ('steps' in value) {
+        return {
+            steps: value.steps.map((step) => (Object.assign(Object.assign({}, step), { resource_id: step.resource, resource: undefined }))).map((step) => removeUndefinedFields(step)),
+        };
     }
-    if (typeof value.suffix === 'string' && config.suffix === undefined) {
-        config.suffix = value.suffix;
+    return removeUndefinedFields(Object.assign(Object.assign({}, value), { group_by: value.groupBy, groupBy: undefined, order_by: value.orderBy, orderBy: undefined, time_series: value.timeSeries, timeSeries: undefined }));
+}
+function serializeTableConfigForEditor(value) {
+    return removeUndefinedFields(Object.assign(Object.assign({}, value), { page_size: value.pageSize, pageSize: undefined }));
+}
+function serializeCardConfigForEditor(value) {
+    const serialized = Object.assign({}, value);
+    if (isRecord(serialized.progress)) {
+        serialized.progress = removeUndefinedFields(Object.assign(Object.assign({}, serialized.progress), { value_field: serialized.progress.valueField, valueField: undefined, target_value: serialized.progress.targetValue, targetValue: undefined, target_field: serialized.progress.targetField, targetField: undefined }));
     }
-    if (typeof value.color === 'string' && config.color === undefined) {
-        config.color = value.color;
+    if (isRecord(serialized.comparison)) {
+        serialized.comparison = removeUndefinedFields(Object.assign(Object.assign({}, serialized.comparison), { positive_is_good: serialized.comparison.positiveIsGood, positiveIsGood: undefined }));
     }
-    return Object.keys(config).length ? config : value.gauge_card;
+    return removeUndefinedFields(serialized);
+}
+function serializePivotConfigForEditor(value) {
+    return value;
+}
+function removeUndefinedFields(value) {
+    return Object.fromEntries(Object.entries(value).filter(([, item]) => item !== undefined));
 }
 function isRecord(value) {
     return typeof value === 'object' && value !== null;