@adminforth/dashboard 1.2.0 → 1.4.0

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

@@ -1,9 +1,6 @@
 <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'
 
@@ -55,20 +52,18 @@ watch(
   { deep: true },
 )
 
-const gaugeConfig = computed(() => normalizeGaugeCardWidgetConfig(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?.valueField || columns.value[0])
-const minField = computed(() => gaugeConfig.value?.minField)
-const maxField = computed(() => 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([
@@ -148,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

@@ -1,9 +1,6 @@
 <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'
 
@@ -29,15 +26,16 @@ watch(
   { deep: true },
 )
 
-const kpiConfig = computed(() => normalizeKpiCardWidgetConfig(props.widget.kpi_card))
+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?.valueField || columns.value[0])
-const labelField = computed(() => kpiConfig.value?.labelField)
+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

@@ -2,7 +2,7 @@
 import { computed, watch } from 'vue'
 import { useWidgetData } from '../../queries/useWidgetData.js'
 import {
-  normalizePivotTableWidgetConfig,
+  getFieldRefField,
 } from '../../model/dashboard.types.js'
 import type { DashboardWidgetConfig, DashboardWidgetData } from '../../model/dashboard.types.js'
 import { formatChartLabel, formatChartValue, toFiniteNumber } from '../chart/chart.utils.js'
@@ -29,16 +29,17 @@ watch(
   { deep: true },
 )
 
-const pivotConfig = computed(() => normalizePivotTableWidgetConfig(props.widget.pivot_table))
+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?.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 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/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
 }
@@ -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/api/dashboardApi.d.ts

@@ -26,6 +26,7 @@ export declare class DashboardApiError extends Error {
 }
 export declare const dashboardApi: {
     getDashboardConfig(slug: string): Promise<DashboardResponse>;
+    setDashboardConfig(slug: string, config: DashboardConfig): Promise<DashboardResponse>;
     addDashboardGroup(slug: string): Promise<DashboardResponse>;
     moveDashboardGroup(slug: string, groupId: string, direction: DashboardGroupMoveDirection): Promise<DashboardResponse>;
     removeDashboardGroup(slug: string, groupId: string): Promise<DashboardResponse>;

package/dist/custom/api/dashboardApi.js

@@ -103,6 +103,11 @@ exports.dashboardApi = {
             return callDashboardApi('/adminapi/v1/dashboard/get-config', { slug });
         });
     },
+    setDashboardConfig(slug, config) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return callDashboardApi('/adminapi/v1/dashboard/set_dashboard_config', { slug, config });
+        });
+    },
     addDashboardGroup(slug) {
         return __awaiter(this, void 0, void 0, function* () {
             return callDashboardApi('/adminapi/v1/dashboard/add_dashboard_group', { slug });

package/dist/custom/api/dashboardApi.ts

@@ -143,6 +143,10 @@ export const dashboardApi = {
     return callDashboardApi('/adminapi/v1/dashboard/get-config', { slug })
   },
 
+  async setDashboardConfig(slug: string, config: DashboardConfig): Promise<DashboardResponse> {
+    return callDashboardApi('/adminapi/v1/dashboard/set_dashboard_config', { slug, config })
+  },
+
   async addDashboardGroup(slug: string): Promise<DashboardResponse> {
     return callDashboardApi('/adminapi/v1/dashboard/add_dashboard_group', { slug })
   },

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,38 +1,10 @@
 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[];
     widgets: DashboardWidgetConfig[];
 };
+export type DashboardVariables = Record<string, unknown>;
 export type DashboardGroupConfig = {
     id: string;
     label: string;
@@ -42,6 +14,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,24 +24,185 @@ export type WidgetLayout = {
     maxWidth?: number | null;
     height?: number;
 };
-export type DashboardWidgetConfig = {
+export type WidgetBaseConfig = {
     id: string;
     group_id: string;
     label?: string;
+    variables?: DashboardVariables;
     size?: DashboardWidgetSize;
     width?: number;
     height?: number;
     minWidth?: number;
     maxWidth?: number | null;
     order: number;
-    target: DashboardWidgetTarget;
-    dataSource?: WidgetDataSource;
-    chart?: ChartWidgetConfig;
-    table?: unknown;
-    kpi_card?: unknown;
-    pivot_table?: unknown;
-    gauge_card?: 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[];
+    calcs?: QueryCalcSelectItem[];
+};
+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[];
@@ -83,32 +219,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 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;
+export declare function getFieldRefField(value: FieldRef | undefined): string | undefined;
+export declare function getFieldRefLabel(value: FieldRef | undefined): string | undefined;