@adminforth/dashboard 1.3.0 → 1.4.1

package/README.md

@@ -29,6 +29,7 @@ Each widget has common fields:
 | `label` | Optional widget title. |
 | `target` | Widget type: `table`, `chart`, `kpi_card`, `pivot_table`, or `gauge_card`. |
 | `order` | Widget order inside its group. |
+| `variables` | Optional static maps/constants available inside widget `query.calcs` via `lookup($variables.path, field, default)`. |
 | `size` | Preset width: `small`, `medium`, `large`, `wide`, or `full`. |
 | `width`, `height`, `min_width`, `max_width` | Optional explicit layout constraints. |
 | `query` | Data query definition. |
@@ -38,7 +39,7 @@ Each widget has common fields:
 | Widget target | Config field | Main settings | Data usage |
 | --- | --- | --- | --- |
 | `table` | `table` | `pagination`, `page_size`, `columns` | Uses `query` to display raw or aggregate rows. |
-| `chart` | `chart` | `type`, `x`, `y`, `label`, `value`, `series`, `buckets`, `color`, `colors` | Uses `query`; funnel charts use `query.steps`. |
+| `chart` | `chart` | `type`, `x`, `y`, `label`, `value`, `series`, `buckets`, `color`, `colors` | Uses `query`; step-based charts may use `query.steps` with optional `calcs`. |
 | `kpi_card` | `card` | `value`, `subtitle`, `comparison`, `sparkline` | Reads the first returned query row. |
 | `gauge_card` | `card` | `value`, `target`, `progress`, `color` | Reads the first returned query row. |
 | `pivot_table` | `pivot` | `rows`, `columns`, `values` | Uses query rows to build a pivot table. |
@@ -60,38 +61,125 @@ Chart widget types:
 type QueryConfig = {
   resource: string
   select?: Array<
-    | { field: string; as?: string; grain?: 'hour' | 'day' | 'week' | 'month' | 'quarter' | 'year' }
-    | { agg: 'sum' | 'count' | 'count_distinct' | 'avg' | 'min' | 'max' | 'median'; field?: string; as: string; filters?: unknown }
+    | { field: string; as?: string; grain?: 'day' | 'week' | 'month' | 'year' }
+    | { agg: 'sum' | 'count' | 'count_distinct' | 'avg' | 'min' | 'max' | 'median'; field?: string; as: string; filters?: DashboardFilter | DashboardFilter[] }
     | { calc: string; as: string }
   >
-  filters?: unknown
-  group_by?: Array<string | { field: string; as?: string; grain?: 'hour' | 'day' | 'week' | 'month' | 'quarter' | 'year'; timezone?: string }>
+  filters?: DashboardFilter | DashboardFilter[]
+  group_by?: Array<string | { field: string; as?: string; grain?: 'day' | 'week' | 'month' | 'year'; timezone?: string }>
   order_by?: Array<{ field: string; direction?: 'asc' | 'desc' }>
   limit?: number
   offset?: number
 }
+
+type DashboardFilter =
+  | { and: DashboardFilter[] }
+  | { or: DashboardFilter[] }
+  | {
+      field: string
+      eq?: JsonValue
+      neq?: JsonValue
+      gt?: JsonValue
+      gte?: JsonValue
+      lt?: JsonValue
+      lte?: JsonValue
+      in?: JsonValue[]
+      not_in?: JsonValue[]
+      like?: JsonValue
+      ilike?: JsonValue
+    }
+
+type JsonValue = string | number | boolean | null | JsonValue[] | { [key: string]: JsonValue }
 ```
 
-Funnel charts use a steps query:
+Step-based chart queries use `steps` and may include `calcs`:
 
 ```yaml
 target: chart
+label: Average price by database
+variables:
+  price_multipliers:
+    cars_sl: 0.84
+    cars_mysql: 1.12
+    cars_pg: 0.91
+    cars_mongo: 1.07
+    cars_ch: 0.76
 chart:
-  type: funnel
-  title: Sales funnel
+  type: bar
+  title: Average price by database
+  x:
+    field: name
+  y:
+    field: adjusted_value
 query:
   steps:
-    - name: Leads
-      resource: leads
+    - name: SQLite
+      resource: cars_sl
       metric:
-        agg: count
+        agg: avg
+        field: price
         as: value
-    - name: Customers
-      resource: orders
+    - name: MySQL
+      resource: cars_mysql
       metric:
-        agg: count_distinct
-        field: customer_id
+        agg: avg
+        field: price
         as: value
+  calcs:
+    - calc: value * lookup($variables.price_multipliers, resource, 1)
+      as: adjusted_value
+```
+
+Widget-level variables example:
+
+```yaml
+target: chart
+label: Model costs
+variables:
+  token_prices_per_1m:
+    input:
+      gpt-4.1: 2.00
+      gpt-4.1-mini: 0.40
+      gpt-4o-mini: 0.15
+    output:
+      gpt-4.1: 8.00
+      gpt-4.1-mini: 1.60
+      gpt-4o-mini: 0.60
+    cached:
+      gpt-4.1: 0.50
+      gpt-4.1-mini: 0.10
+      gpt-4o-mini: 0.075
+chart:
+  type: stacked_bar
+  title: LLM costs by model
+  x:
+    field: model
+  y:
+    - field: input_cost
+    - field: output_cost
+    - field: cached_cost
+query:
+  resource: model_usage
+  select:
+    - field: model
+    - agg: sum
+      field: input_tokens
+      as: input_tokens
+    - agg: sum
+      field: output_tokens
+      as: output_tokens
+    - agg: sum
+      field: cached_tokens
+      as: cached_tokens
+  group_by:
+    - model
+  calcs:
+    - calc: input_tokens / 1000000 * lookup($variables.token_prices_per_1m.input, model, 0)
+      as: input_cost
+    - calc: output_tokens / 1000000 * lookup($variables.token_prices_per_1m.output, model, 0)
+      as: output_cost
+    - calc: cached_tokens / 1000000 * lookup($variables.token_prices_per_1m.cached, model, 0)
+      as: cached_cost
 ```
 
 ## Runtime Structure

package/custom/api/dashboardApi.ts

@@ -1,16 +1,13 @@
 import type {
   DashboardConfig,
-  DashboardGroupConfig,
+  EditableDashboardGroupConfig,
+  EditableDashboardWidgetConfig,
   DashboardGroupMoveDirection,
   DashboardWidgetConfig,
+  DashboardWidgetConfigValidationError,
   DashboardWidgetMoveDirection,
 } from '../model/dashboard.types.js'
 
-export type DashboardWidgetConfigValidationError = {
-  field: string
-  message: string
-}
-
 export type DashboardResponse = {
   id: string
   slug: string
@@ -143,6 +140,10 @@ export const dashboardApi = {
     return callDashboardApi('/adminapi/v1/dashboard/get-config', { slug })
   },
 
+  async setDashboardConfig(slug: string, config: unknown): 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 })
   },
@@ -166,7 +167,7 @@ export const dashboardApi = {
     })
   },
 
-  async setDashboardGroupConfig(slug: string, groupId: string, config: DashboardGroupConfig): Promise<DashboardResponse> {
+  async setDashboardGroupConfig(slug: string, groupId: string, config: EditableDashboardGroupConfig): Promise<DashboardResponse> {
     return callDashboardApi('/adminapi/v1/dashboard/set_dashboard_group_config', {
       slug,
       groupId,
@@ -200,7 +201,7 @@ export const dashboardApi = {
     })
   },
 
-  async setWidgetConfig(slug: string, widgetId: string, config: DashboardWidgetConfig): Promise<DashboardResponse> {
+  async setWidgetConfig(slug: string, widgetId: string, config: unknown): Promise<DashboardResponse> {
     return callDashboardApi('/adminapi/v1/dashboard/set_widget_config', {
       slug,
       widgetId,

package/custom/model/dashboard.types.ts

@@ -6,18 +6,34 @@ export type DashboardConfig = {
   widgets: DashboardWidgetConfig[]
 }
 
+export type JsonValue =
+  | string
+  | number
+  | boolean
+  | null
+  | JsonValue[]
+  | { [key: string]: JsonValue }
+
+export type DashboardVariables = Record<string, JsonValue>
+
 export type DashboardGroupConfig = {
   id: string
   label: string
   order: number
 }
 
+export type EditableDashboardGroupConfig = Pick<DashboardGroupConfig, 'label'>
+
 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 DashboardWidgetConfigValidationError = {
+  field: string
+  message: string
+}
 export type QueryAggregateOperation = 'sum' | 'count' | 'count_distinct' | 'avg' | 'min' | 'max' | 'median'
-export type TimeGrain = 'hour' | 'day' | 'week' | 'month' | 'quarter' | 'year'
+export type TimeGrain = 'day' | 'week' | 'month' | 'year'
 export type ValueFormat =
   | 'number'
   | 'compact_number'
@@ -30,8 +46,8 @@ export type ValueFormat =
 export type WidgetLayout = {
   size?: DashboardWidgetSize
   width?: number
-  minWidth?: number
-  maxWidth?: number | null
+  min_width?: number
+  max_width?: number | null
   height?: number
 }
 
@@ -39,11 +55,12 @@ export type WidgetBaseConfig = {
   id: string
   group_id: string
   label?: string
+  variables?: DashboardVariables
   size?: DashboardWidgetSize
   width?: number
   height?: number
-  minWidth?: number
-  maxWidth?: number | null
+  min_width?: number
+  max_width?: number | null
   order: number
 }
 
@@ -53,16 +70,16 @@ export type 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
+      eq?: JsonValue
+      neq?: JsonValue
+      gt?: JsonValue
+      gte?: JsonValue
+      lt?: JsonValue
+      lte?: JsonValue
+      in?: JsonValue[]
+      not_in?: JsonValue[]
+      like?: JsonValue
+      ilike?: JsonValue
     }
 
 export type QueryFieldSelectItem = {
@@ -103,30 +120,31 @@ export type QueryConfig = {
   resource: string
   select?: QuerySelectItem[]
   filters?: FilterExpression
-  groupBy?: QueryGroupByItem[]
-  orderBy?: QueryOrderByItem[]
+  group_by?: QueryGroupByItem[]
+  order_by?: QueryOrderByItem[]
   limit?: number
   offset?: number
-  timeSeries?: {
+  time_series?: {
     field: string
     grain: TimeGrain
     timezone?: string
   }
   period?: {
     field: string
-    gte?: unknown
-    lt?: unknown
+    gte?: JsonValue
+    lt?: JsonValue
   }
   bucket?: {
     field: string
     buckets: Array<{ label: string, min?: number, max?: number }>
   }
   calcs?: QueryCalcSelectItem[]
-  formatting?: Record<string, unknown>
+  formatting?: Record<string, JsonValue>
 }
 
 export type FunnelQueryConfig = {
   steps: FunnelQueryStep[]
+  calcs?: QueryCalcSelectItem[]
 }
 
 export type FunnelQueryStep = {
@@ -145,7 +163,7 @@ export type FieldRef = string | {
 export type TableViewConfig = {
   columns?: FieldRef[]
   pagination?: boolean
-  pageSize?: number
+  page_size?: number
 }
 
 export type KpiCardViewConfig = {
@@ -160,8 +178,8 @@ export type KpiCardViewConfig = {
     text?: string
     field?: string
   }
-  comparison?: unknown
-  sparkline?: unknown
+  comparison?: JsonValue
+  sparkline?: JsonValue
 }
 
 export type GaugeCardViewConfig = {
@@ -178,9 +196,9 @@ export type GaugeCardViewConfig = {
     label?: string
   }
   progress?: {
-    valueField: string
-    targetValue?: number
-    targetField?: string
+    value_field: string
+    target_value?: number
+    target_field?: string
     format?: ValueFormat
   }
   color?: string
@@ -239,6 +257,14 @@ export type DashboardWidgetConfig =
   | GaugeCardWidgetConfig
   | PivotTableWidgetConfig
 
+export type EditableDashboardWidgetConfig =
+  | Omit<EmptyWidgetConfig, 'id' | 'group_id' | 'order'>
+  | Omit<TableWidgetConfig, 'id' | 'group_id' | 'order'>
+  | Omit<ChartDashboardWidgetConfig, 'id' | 'group_id' | 'order'>
+  | Omit<KpiCardWidgetConfig, 'id' | 'group_id' | 'order'>
+  | Omit<GaugeCardWidgetConfig, 'id' | 'group_id' | 'order'>
+  | Omit<PivotTableWidgetConfig, 'id' | 'group_id' | 'order'>
+
 export type DashboardWidgetTableData = {
   kind?: 'table'
   columns: string[]
@@ -266,252 +292,19 @@ export type DashboardWidgetAggregateData = {
 
 export type DashboardWidgetData = DashboardWidgetTableData | DashboardWidgetAggregateData
 
-export function normalizeDashboardConfig(config: unknown): DashboardConfig {
-  const value = isRecord(config) ? config : {}
-
-  return {
-    version: typeof value.version === 'number' ? value.version : 1,
-    groups: Array.isArray(value.groups) ? (value.groups as DashboardGroupConfig[]) : [],
-    widgets: Array.isArray(value.widgets)
-      ? value.widgets.map((widget) => normalizeDashboardWidgetConfig(widget) as DashboardWidgetConfig)
-      : [],
-  }
-}
-
-export function normalizeDashboardWidgetConfig(config: unknown) {
-  if (!isRecord(config)) {
-    return config
-  }
-
-  const normalized: Record<string, unknown> = { ...config }
-  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 (normalized.pivot !== undefined) {
-    normalized.pivot = normalizePivotConfig(normalized.pivot)
-  }
-
-  const target = normalizeDashboardWidgetTarget(normalized.target)
-
-  if (target !== undefined) {
-    normalized.target = target
-  }
-
-  return normalized
-}
-
-export function serializeDashboardWidgetConfigForEditor(widget: DashboardWidgetConfig) {
-  const serialized: Record<string, unknown> = { ...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)
-  }
+export function serializeDashboardWidgetConfigForEditor(
+  widget: DashboardWidgetConfig,
+): unknown {
+  const {
+    id: _id,
+    group_id: _groupId,
+    order: _order,
+    ...editableWidget
+  } = widget
 
-  if ('pivot' in widget && widget.pivot !== undefined) {
-    serialized.pivot = serializePivotConfigForEditor(widget.pivot)
-  }
-
-  return serialized
+  return editableWidget
 }
 
 export function getFieldRefField(value: FieldRef | undefined) {
   return typeof value === 'string' ? value : value?.field
 }
-
-export function getFieldRefLabel(value: FieldRef | undefined) {
-  return typeof value === 'string' ? value : value?.label
-}
-
-function normalizeDashboardWidgetTarget(value: unknown): DashboardWidgetTarget | undefined {
-  switch (value) {
-    case 'empty':
-    case 'table':
-    case 'chart':
-    case 'kpi_card':
-    case 'pivot_table':
-    case 'gauge_card':
-      return value
-    default:
-      return undefined
-  }
-}
-
-function normalizeWidgetLayoutConfig(value: Record<string, unknown>) {
-  if (value.min_width !== undefined) {
-    value.minWidth = value.min_width
-  }
-
-  if (value.max_width !== undefined) {
-    value.maxWidth = value.max_width
-  }
-}
-
-function normalizeQueryConfig(value: unknown): unknown {
-  if (!isRecord(value)) {
-    return value
-  }
-
-  if (Array.isArray(value.steps)) {
-    return {
-      steps: value.steps.map((step) => normalizeFunnelQueryStep(step)),
-    }
-  }
-
-  return {
-    ...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: unknown) {
-  if (!isRecord(value)) {
-    return value
-  }
-
-  return {
-    ...value,
-    ...(typeof value.resource_id === 'string' ? { resource: value.resource_id } : {}),
-  }
-}
-
-function normalizeTableConfig(value: unknown) {
-  if (!isRecord(value)) {
-    return value
-  }
-
-  return {
-    ...value,
-    ...(value.page_size !== undefined ? { pageSize: value.page_size } : {}),
-  }
-}
-
-function normalizeCardConfig(value: unknown): unknown {
-  if (!isRecord(value)) {
-    return value
-  }
-
-  const normalized = { ...value }
-
-  if (isRecord(normalized.progress)) {
-    normalized.progress = {
-      ...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 (isRecord(normalized.comparison)) {
-    normalized.comparison = {
-      ...normalized.comparison,
-      ...(normalized.comparison.positive_is_good !== undefined ? { positiveIsGood: normalized.comparison.positive_is_good } : {}),
-    }
-  }
-
-  return normalized
-}
-
-function normalizePivotConfig(value: unknown): unknown {
-  return value
-}
-
-function serializeQueryConfigForEditor(value: QueryConfig | FunnelQueryConfig) {
-  if ('steps' in value) {
-    return {
-      steps: value.steps.map((step) => ({
-        ...step,
-        resource_id: step.resource,
-        resource: undefined,
-      })).map((step) => removeUndefinedFields(step)),
-    }
-  }
-
-  return removeUndefinedFields({
-    ...value,
-    group_by: value.groupBy,
-    groupBy: undefined,
-    order_by: value.orderBy,
-    orderBy: undefined,
-    time_series: value.timeSeries,
-    timeSeries: undefined,
-  })
-}
-
-function serializeTableConfigForEditor(value: TableViewConfig) {
-  return removeUndefinedFields({
-    ...value,
-    page_size: value.pageSize,
-    pageSize: undefined,
-  })
-}
-
-function serializeCardConfigForEditor(value: KpiCardViewConfig | GaugeCardViewConfig) {
-  const serialized: Record<string, unknown> = { ...value }
-
-  if (isRecord(serialized.progress)) {
-    serialized.progress = removeUndefinedFields({
-      ...serialized.progress,
-      value_field: serialized.progress.valueField,
-      valueField: undefined,
-      target_value: serialized.progress.targetValue,
-      targetValue: undefined,
-      target_field: serialized.progress.targetField,
-      targetField: undefined,
-    })
-  }
-
-  if (isRecord(serialized.comparison)) {
-    serialized.comparison = removeUndefinedFields({
-      ...serialized.comparison,
-      positive_is_good: serialized.comparison.positiveIsGood,
-      positiveIsGood: undefined,
-    })
-  }
-
-  return removeUndefinedFields(serialized)
-}
-
-function serializePivotConfigForEditor(value: PivotTableViewConfig) {
-  return value
-}
-
-function removeUndefinedFields<T extends Record<string, unknown>>(value: T) {
-  return Object.fromEntries(
-    Object.entries(value).filter(([, item]) => item !== undefined),
-  )
-}
-
-function isRecord(value: unknown): value is Record<string, any> {
-  return typeof value === 'object' && value !== null
-}

package/custom/model/dashboardTopics.ts

@@ -0,0 +1,5 @@
+export const DASHBOARD_CONFIG_UPDATED_TOPIC_PREFIX = '/opentopic/dashboard-config-updated'
+
+export function getDashboardConfigUpdatedTopic(slug: string) {
+  return `${DASHBOARD_CONFIG_UPDATED_TOPIC_PREFIX}/${slug}`
+}

package/custom/runtime/DashboardGroup.vue

@@ -112,8 +112,8 @@
         :layout="{
           size: widget.size,
           width: widget.width,
-          minWidth: widget.minWidth,
-          maxWidth: widget.maxWidth,
+          min_width: widget.min_width,
+          max_width: widget.max_width,
           height: widget.height,
         }"
         @edit="emit('edit-widget', widget)"