@adminforth/dashboard 1.0.0 → 1.2.0

package/dist/custom/queries/useDashboardConfig.d.ts

@@ -23,6 +23,27 @@ export declare function useDashboardConfig(slug: Ref<string>): {
                 maxWidth?: number | null | undefined;
                 order: number;
                 target: import("../model/dashboard.types.js").DashboardWidgetTarget;
+                dataSource?: {
+                    type: "resource";
+                    resourceId: string;
+                    columns?: string[] | undefined;
+                    sort?: unknown;
+                    filters?: unknown;
+                } | {
+                    type: "aggregate";
+                    resourceId: string;
+                    aggregations: Record<string, import("../model/dashboard.types.js").AggregationRule>;
+                    groupBy?: {
+                        type: "field";
+                        field: string;
+                    } | {
+                        type: "date_trunc";
+                        field: string;
+                        truncation: "day" | "week" | "month" | "year";
+                        timezone?: string | undefined;
+                    } | undefined;
+                    filters?: unknown;
+                } | undefined;
                 chart?: {
                     type: import("../widgets/chart/chart.types.js").ChartWidgetType;
                     title?: string | undefined;
@@ -49,7 +70,6 @@ export declare function useDashboardConfig(slug: Ref<string>): {
                 kpi_card?: unknown;
                 pivot_table?: unknown;
                 gauge_card?: unknown;
-                query?: unknown;
             }[];
         };
     } | null, import("../api/dashboardApi.js").DashboardResponse | {
@@ -75,6 +95,27 @@ export declare function useDashboardConfig(slug: Ref<string>): {
                 maxWidth?: number | null | undefined;
                 order: number;
                 target: import("../model/dashboard.types.js").DashboardWidgetTarget;
+                dataSource?: {
+                    type: "resource";
+                    resourceId: string;
+                    columns?: string[] | undefined;
+                    sort?: unknown;
+                    filters?: unknown;
+                } | {
+                    type: "aggregate";
+                    resourceId: string;
+                    aggregations: Record<string, import("../model/dashboard.types.js").AggregationRule>;
+                    groupBy?: {
+                        type: "field";
+                        field: string;
+                    } | {
+                        type: "date_trunc";
+                        field: string;
+                        truncation: "day" | "week" | "month" | "year";
+                        timezone?: string | undefined;
+                    } | undefined;
+                    filters?: unknown;
+                } | undefined;
                 chart?: {
                     type: import("../widgets/chart/chart.types.js").ChartWidgetType;
                     title?: string | undefined;
@@ -101,7 +142,6 @@ export declare function useDashboardConfig(slug: Ref<string>): {
                 kpi_card?: unknown;
                 pivot_table?: unknown;
                 gauge_card?: unknown;
-                query?: unknown;
             }[];
         };
     } | null>;

package/dist/custom/queries/useWidgetData.d.ts

@@ -1,5 +1,6 @@
 import { type Ref } from 'vue';
-export declare function useWidgetData(slug: Ref<string>, widgetId: Ref<string>): {
+import { type DashboardWidgetDataRequest } from '../api/dashboardApi.js';
+export declare function useWidgetData(slug: Ref<string>, widgetId: Ref<string>, request?: Ref<DashboardWidgetDataRequest>): {
     data: Ref<{
         widget: {
             id: string;
@@ -12,6 +13,27 @@ export declare function useWidgetData(slug: Ref<string>, widgetId: Ref<string>):
             maxWidth?: number | null | undefined;
             order: number;
             target: import("../model/dashboard.types.js").DashboardWidgetTarget;
+            dataSource?: {
+                type: "resource";
+                resourceId: string;
+                columns?: string[] | undefined;
+                sort?: unknown;
+                filters?: unknown;
+            } | {
+                type: "aggregate";
+                resourceId: string;
+                aggregations: Record<string, import("../model/dashboard.types.js").AggregationRule>;
+                groupBy?: {
+                    type: "field";
+                    field: string;
+                } | {
+                    type: "date_trunc";
+                    field: string;
+                    truncation: "day" | "week" | "month" | "year";
+                    timezone?: string | undefined;
+                } | undefined;
+                filters?: unknown;
+            } | undefined;
             chart?: {
                 type: import("../widgets/chart/chart.types.js").ChartWidgetType;
                 title?: string | undefined;
@@ -38,7 +60,6 @@ export declare function useWidgetData(slug: Ref<string>, widgetId: Ref<string>):
             kpi_card?: unknown;
             pivot_table?: unknown;
             gauge_card?: unknown;
-            query?: unknown;
         };
         data: unknown;
     } | null, import("../api/dashboardApi.js").DashboardWidgetDataResponse | {
@@ -53,6 +74,27 @@ export declare function useWidgetData(slug: Ref<string>, widgetId: Ref<string>):
             maxWidth?: number | null | undefined;
             order: number;
             target: import("../model/dashboard.types.js").DashboardWidgetTarget;
+            dataSource?: {
+                type: "resource";
+                resourceId: string;
+                columns?: string[] | undefined;
+                sort?: unknown;
+                filters?: unknown;
+            } | {
+                type: "aggregate";
+                resourceId: string;
+                aggregations: Record<string, import("../model/dashboard.types.js").AggregationRule>;
+                groupBy?: {
+                    type: "field";
+                    field: string;
+                } | {
+                    type: "date_trunc";
+                    field: string;
+                    truncation: "day" | "week" | "month" | "year";
+                    timezone?: string | undefined;
+                } | undefined;
+                filters?: unknown;
+            } | undefined;
             chart?: {
                 type: import("../widgets/chart/chart.types.js").ChartWidgetType;
                 title?: string | undefined;
@@ -79,7 +121,6 @@ export declare function useWidgetData(slug: Ref<string>, widgetId: Ref<string>):
             kpi_card?: unknown;
             pivot_table?: unknown;
             gauge_card?: unknown;
-            query?: unknown;
         };
         data: unknown;
     } | null>;

package/dist/custom/queries/useWidgetData.js

@@ -12,7 +12,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useWidgetData = useWidgetData;
 const vue_1 = require("vue");
 const dashboardApi_js_1 = require("../api/dashboardApi.js");
-function useWidgetData(slug, widgetId) {
+function useWidgetData(slug, widgetId, request) {
     const data = (0, vue_1.ref)(null);
     const isLoading = (0, vue_1.ref)(false);
     const isFetching = (0, vue_1.ref)(false);
@@ -29,7 +29,7 @@ function useWidgetData(slug, widgetId) {
                 isLoading.value = true;
             }
             try {
-                const response = yield dashboardApi_js_1.dashboardApi.getDashboardWidgetData(slug.value, widgetId.value);
+                const response = yield dashboardApi_js_1.dashboardApi.getDashboardWidgetData(slug.value, widgetId.value, request === null || request === void 0 ? void 0 : request.value);
                 data.value = response;
                 error.value = null;
                 return response;
@@ -44,7 +44,7 @@ function useWidgetData(slug, widgetId) {
             }
         });
     }
-    (0, vue_1.watch)([slug, widgetId], () => {
+    (0, vue_1.watch)(request ? [slug, widgetId, request] : [slug, widgetId], () => {
         void refetch();
     }, { immediate: true });
     return {

package/dist/custom/queries/useWidgetData.ts

@@ -1,7 +1,11 @@
 import { ref, watch, type Ref } from 'vue'
-import { dashboardApi } from '../api/dashboardApi.js'
+import { dashboardApi, type DashboardWidgetDataRequest } from '../api/dashboardApi.js'
 
-export function useWidgetData(slug: Ref<string>, widgetId: Ref<string>) {
+export function useWidgetData(
+  slug: Ref<string>,
+  widgetId: Ref<string>,
+  request?: Ref<DashboardWidgetDataRequest>,
+) {
   const data = ref<Awaited<ReturnType<typeof dashboardApi.getDashboardWidgetData>> | null>(null)
   const isLoading = ref(false)
   const isFetching = ref(false)
@@ -20,7 +24,7 @@ export function useWidgetData(slug: Ref<string>, widgetId: Ref<string>) {
     }
 
     try {
-      const response = await dashboardApi.getDashboardWidgetData(slug.value, widgetId.value)
+      const response = await dashboardApi.getDashboardWidgetData(slug.value, widgetId.value, request?.value)
       data.value = response
       error.value = null
       return response
@@ -34,7 +38,7 @@ export function useWidgetData(slug: Ref<string>, widgetId: Ref<string>) {
   }
 
   watch(
-    [slug, widgetId],
+    request ? [slug, widgetId, request] : [slug, widgetId],
     () => {
       void refetch()
     },

package/dist/custom/runtime/DashboardRuntime.vue

@@ -211,6 +211,7 @@ import type {
   DashboardWidgetConfig,
   DashboardWidgetMoveDirection,
 } from '../model/dashboard.types.js'
+import { serializeDashboardWidgetConfigForEditor } from '../model/dashboard.types.js'
 
 const props = defineProps<{
   dashboardSlug: string
@@ -388,7 +389,7 @@ async function removeWidget(widgetId: string) {
 
 function editWidget(widget: DashboardWidgetConfig) {
   editingWidgetId.value = widget.id
-  widgetConfigCode.value = stringifyYaml(widget)
+  widgetConfigCode.value = stringifyYaml(serializeDashboardWidgetConfigForEditor(widget))
   widgetConfigError.value = ''
   widgetConfigFieldErrors.value = []
 }

package/dist/custom/runtime/WidgetRenderer.vue

@@ -26,6 +26,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import type { DashboardWidgetConfig } from '../model/dashboard.types.js'
+import { normalizeChartWidgetConfig } from '../widgets/chart/chart.types.js'
 import { getWidgetLabel, getWidgetRegistration } from '../widgets/registry.js'
 
 const props = defineProps<{
@@ -52,7 +53,7 @@ const widgetTitle = computed(() => {
   }
 
   if (props.widget.target === 'chart') {
-    return props.widget.chart?.title || 'Untitled chart'
+    return normalizeChartWidgetConfig(props.widget.chart)?.title || 'Untitled chart'
   }
 
   return getWidgetLabel(props.widget.target)

package/dist/custom/runtime/WidgetShell.vue

@@ -135,11 +135,11 @@ const widgetLayoutVars = computed<CSSProperties>(() => {
   const fixedWidth = formatWidth(props.layout?.width)
 
   return {
-    '--widget-basis': fixedWidth ?? basis,
-    '--widget-min-width': fixedWidth ?? formatWidth(props.layout?.minWidth) ?? basis,
+    '--widget-basis': clampToContainerWidth(fixedWidth ?? basis),
+    '--widget-min-width': clampToContainerWidth(fixedWidth ?? formatWidth(props.layout?.minWidth) ?? basis),
     '--widget-max-width': props.layout?.maxWidth === null
-      ? 'none'
-      : fixedWidth ?? formatWidth(props.layout?.maxWidth) ?? 'none',
+      ? '100%'
+      : clampToContainerWidth(fixedWidth ?? formatWidth(props.layout?.maxWidth) ?? '100%'),
     height: formatWidth(props.layout?.height ?? DEFAULT_WIDGET_HEIGHT),
   }
 })
@@ -149,4 +149,8 @@ function formatWidth(value: number | undefined) {
     return `${value}px`
   }
 }
+
+function clampToContainerWidth(value: string) {
+  return `min(${value}, 100%)`
+}
 </script>

package/dist/custom/skills/adminforth-dashboard/SKILL.md

@@ -119,7 +119,7 @@ Use the current schema keys exactly:
 
 - Use `target`, not `type`.
 - Use `label`, not `title`.
-- Use `query.resource`, not `resourceId`.
-- Use `query.select`, not `columns`.
-- Use `query.order`, not `sort`.
-- Use `query.limit` for row count.
+- Use `data_source`, not `dataSource`.
+- Use `resource_id`, not `resourceId`.
+- Use `group_by`, not `groupBy`.
+- Use `page_size`, not `pageSize`.

package/dist/custom/widgets/chart/ChartWidget.vue

@@ -26,7 +26,7 @@
       :rows="rows"
       :x-field="xField"
       :y-field="yField"
-      :series-name="chartConfig.series_name"
+      :series-name="chartConfig.seriesName"
       :color="chartConfig.color"
       :height="chartHeight"
     />
@@ -91,6 +91,7 @@
 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'
@@ -126,13 +127,45 @@ 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 chartConfig = computed(() => normalizeChartWidgetConfig(props.widget.chart))
+const aggregateGroupField = computed(() => {
+  const dataSource = props.widget.dataSource
+
+  if (dataSource?.type !== 'aggregate' || !dataSource.groupBy) {
+    return undefined
+  }
+
+  return dataSource.groupBy.field
+})
+
+function resolveChartDimensionField(field: string | undefined, fallbackField: string | undefined) {
+  const resolvedField = field ?? fallbackField
+
+  if (!resolvedField) {
+    return ''
+  }
+
+  if (columns.value.includes(resolvedField)) {
+    return resolvedField
+  }
+
+  if (
+    aggregateGroupField.value
+    && resolvedField === aggregateGroupField.value
+    && columns.value.includes('group')
+  ) {
+    return 'group'
+  }
+
+  return resolvedField
+}
+
+const xField = computed(() => resolveChartDimensionField(chartConfig.value?.xField, columns.value[0]))
+const yField = computed(() => chartConfig.value?.yField || columns.value[1])
+const labelField = computed(() => resolveChartDimensionField(chartConfig.value?.labelField, columns.value[0]))
+const valueField = computed(() => chartConfig.value?.valueField || columns.value[1])
 const pieRows = computed(() => {
-  if (chartConfig.value?.value_field) {
+  if (chartConfig.value?.valueField) {
     return rows.value
   }
 
@@ -147,10 +180,10 @@ const pieRows = computed(() => {
 
   return Array.from(groupedRows.values())
 })
-const pieLabelField = computed(() => chartConfig.value?.value_field ? labelField.value : 'label')
-const pieValueField = computed(() => chartConfig.value?.value_field ? valueField.value : 'value')
+const pieLabelField = computed(() => chartConfig.value?.valueField ? labelField.value : 'label')
+const pieValueField = computed(() => chartConfig.value?.valueField ? valueField.value : 'value')
 const barRows = computed(() => {
-  const bucketField = chartConfig.value?.bucket_field
+  const bucketField = chartConfig.value?.bucketField
 
   if (!bucketField) {
     return rows.value
@@ -167,8 +200,8 @@ 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 barLabelField = computed(() => chartConfig.value?.bucketField ? 'label' : labelField.value)
+const barValueField = computed(() => chartConfig.value?.bucketField ? 'count' : valueField.value)
 const stackedBarSeries = computed(() => {
   if (chartConfig.value?.series?.length) {
     return chartConfig.value.series

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

@@ -23,3 +23,18 @@ export type ChartWidgetConfig = {
     color?: string;
     colors?: string[];
 };
+export type NormalizedChartWidgetConfig = {
+    type: ChartWidgetType;
+    title?: string;
+    xField?: string;
+    yField?: string;
+    labelField?: string;
+    valueField?: string;
+    bucketField?: string;
+    buckets?: ChartWidgetBucketConfig[];
+    series?: ChartWidgetSeriesConfig[];
+    seriesName?: string;
+    color?: string;
+    colors?: string[];
+};
+export declare function normalizeChartWidgetConfig(value: unknown): NormalizedChartWidgetConfig | undefined;

package/dist/custom/widgets/chart/chart.types.js

@@ -1,2 +1,48 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.normalizeChartWidgetConfig = normalizeChartWidgetConfig;
+function normalizeChartWidgetConfig(value) {
+    const config = asChartWidgetConfigRecord(value);
+    if (!config) {
+        return undefined;
+    }
+    const type = normalizeChartWidgetType(config.type);
+    if (!type) {
+        return undefined;
+    }
+    const xField = getStringField(config, 'x_field');
+    const yField = getStringField(config, 'y_field');
+    const labelField = getStringField(config, 'label_field');
+    const valueField = getStringField(config, 'value_field');
+    const bucketField = getStringField(config, 'bucket_field');
+    const seriesName = getStringField(config, 'series_name');
+    const title = getStringField(config, 'title');
+    const color = getStringField(config, 'color');
+    const colors = Array.isArray(config.colors) ? config.colors : undefined;
+    const buckets = Array.isArray(config.buckets) ? config.buckets : undefined;
+    const series = Array.isArray(config.series) ? config.series : undefined;
+    return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ type }, (title !== undefined ? { title } : {})), (xField !== undefined ? { xField } : {})), (yField !== undefined ? { yField } : {})), (labelField !== undefined ? { labelField } : {})), (valueField !== undefined ? { valueField } : {})), (bucketField !== undefined ? { bucketField } : {})), (buckets !== undefined ? { buckets } : {})), (series !== undefined ? { series } : {})), (seriesName !== undefined ? { seriesName } : {})), (color !== undefined ? { color } : {})), (colors !== undefined ? { colors } : {}));
+}
+function normalizeChartWidgetType(value) {
+    switch (value) {
+        case 'line':
+        case 'pie':
+        case 'bar':
+        case 'stacked_bar':
+        case 'funnel':
+        case 'histogram':
+            return value;
+        default:
+            return undefined;
+    }
+}
+function asChartWidgetConfigRecord(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;
+}

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

@@ -32,3 +32,86 @@ export type ChartWidgetConfig = {
   color?: string
   colors?: string[]
 }
+
+export type NormalizedChartWidgetConfig = {
+  type: ChartWidgetType
+  title?: string
+  xField?: string
+  yField?: string
+  labelField?: string
+  valueField?: string
+  bucketField?: string
+  buckets?: ChartWidgetBucketConfig[]
+  series?: ChartWidgetSeriesConfig[]
+  seriesName?: string
+  color?: string
+  colors?: string[]
+}
+
+export function normalizeChartWidgetConfig(value: unknown): NormalizedChartWidgetConfig | undefined {
+  const config = asChartWidgetConfigRecord(value)
+
+  if (!config) {
+    return undefined
+  }
+
+  const type = normalizeChartWidgetType(config.type)
+
+  if (!type) {
+    return undefined
+  }
+
+  const xField = getStringField(config, 'x_field')
+  const yField = getStringField(config, 'y_field')
+  const labelField = getStringField(config, 'label_field')
+  const valueField = getStringField(config, 'value_field')
+  const bucketField = getStringField(config, 'bucket_field')
+  const seriesName = getStringField(config, 'series_name')
+  const title = getStringField(config, 'title')
+  const color = getStringField(config, 'color')
+  const colors = Array.isArray(config.colors) ? config.colors as string[] : undefined
+  const buckets = Array.isArray(config.buckets) ? config.buckets as ChartWidgetBucketConfig[] : undefined
+  const series = Array.isArray(config.series) ? config.series as ChartWidgetSeriesConfig[] : undefined
+
+  return {
+    type,
+    ...(title !== undefined ? { title } : {}),
+    ...(xField !== undefined ? { xField } : {}),
+    ...(yField !== undefined ? { yField } : {}),
+    ...(labelField !== undefined ? { labelField } : {}),
+    ...(valueField !== undefined ? { valueField } : {}),
+    ...(bucketField !== undefined ? { bucketField } : {}),
+    ...(buckets !== undefined ? { buckets } : {}),
+    ...(series !== undefined ? { series } : {}),
+    ...(seriesName !== undefined ? { seriesName } : {}),
+    ...(color !== undefined ? { color } : {}),
+    ...(colors !== undefined ? { colors } : {}),
+  }
+}
+
+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 asChartWidgetConfigRecord(value: unknown): Record<string, unknown> | undefined {
+  return isRecord(value) ? value : undefined
+}
+
+function getStringField(record: Record<string, unknown>, key: string) {
+  const value = record[key]
+  return typeof value === 'string' ? value : undefined
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null
+}

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

@@ -1,5 +1,5 @@
 export declare const CHART_COLORS: string[];
 export declare function toFiniteNumber(value: unknown): number;
-export declare function formatChartValue(value: number): string;
+export declare function formatChartValue(value: number, options?: Intl.NumberFormatOptions): string;
 export declare function formatChartLabel(value: unknown): string;
 export declare function formatChartAxisLabel(value: unknown, maxLength?: number): string;

package/dist/custom/widgets/chart/chart.utils.js

@@ -19,8 +19,8 @@ function toFiniteNumber(value) {
     const numberValue = typeof value === 'number' ? value : Number(value);
     return Number.isFinite(numberValue) ? numberValue : 0;
 }
-function formatChartValue(value) {
-    return new Intl.NumberFormat().format(value);
+function formatChartValue(value, options = {}) {
+    return new Intl.NumberFormat(undefined, options).format(value);
 }
 function formatChartLabel(value) {
     if (typeof value !== 'string') {

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

@@ -14,8 +14,8 @@ export function toFiniteNumber(value: unknown) {
   return Number.isFinite(numberValue) ? numberValue : 0
 }
 
-export function formatChartValue(value: number) {
-  return new Intl.NumberFormat().format(value)
+export function formatChartValue(value: number, options: Intl.NumberFormatOptions = {}) {
+  return new Intl.NumberFormat(undefined, options).format(value)
 }
 
 export function formatChartLabel(value: unknown) {