@adminforth/dashboard 1.4.0 → 1.4.1

package/README.md

@@ -61,16 +61,35 @@ 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 }
 ```
 
 Step-based chart queries use `steps` and may include `calcs`:

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,7 +140,7 @@ export const dashboardApi = {
     return callDashboardApi('/adminapi/v1/dashboard/get-config', { slug })
   },
 
-  async setDashboardConfig(slug: string, config: DashboardConfig): Promise<DashboardResponse> {
+  async setDashboardConfig(slug: string, config: unknown): Promise<DashboardResponse> {
     return callDashboardApi('/adminapi/v1/dashboard/set_dashboard_config', { slug, config })
   },
 
@@ -170,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,
@@ -204,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,7 +6,15 @@ export type DashboardConfig = {
   widgets: DashboardWidgetConfig[]
 }
 
-export type DashboardVariables = Record<string, unknown>
+export type JsonValue =
+  | string
+  | number
+  | boolean
+  | null
+  | JsonValue[]
+  | { [key: string]: JsonValue }
+
+export type DashboardVariables = Record<string, JsonValue>
 
 export type DashboardGroupConfig = {
   id: string
@@ -14,12 +22,18 @@ export type DashboardGroupConfig = {
   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'
@@ -32,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
 }
 
@@ -45,8 +59,8 @@ export type WidgetBaseConfig = {
   size?: DashboardWidgetSize
   width?: number
   height?: number
-  minWidth?: number
-  maxWidth?: number | null
+  min_width?: number
+  max_width?: number | null
   order: number
 }
 
@@ -56,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 = {
@@ -106,26 +120,26 @@ 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 = {
@@ -149,7 +163,7 @@ export type FieldRef = string | {
 export type TableViewConfig = {
   columns?: FieldRef[]
   pagination?: boolean
-  pageSize?: number
+  page_size?: number
 }
 
 export type KpiCardViewConfig = {
@@ -164,8 +178,8 @@ export type KpiCardViewConfig = {
     text?: string
     field?: string
   }
-  comparison?: unknown
-  sparkline?: unknown
+  comparison?: JsonValue
+  sparkline?: JsonValue
 }
 
 export type GaugeCardViewConfig = {
@@ -182,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
@@ -243,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[]
@@ -270,256 +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 removeUndefinedFields({
-      steps: value.steps.map((step) => normalizeFunnelQueryStep(step)),
-      calcs: Array.isArray(value.calcs) ? value.calcs as QueryCalcSelectItem[] : undefined,
-    })
-  }
-
-  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
-  }
-
-  const { resource_id, ...rest } = value
-
-  return removeUndefinedFields({
-    ...rest,
-    resource: typeof resource_id === 'string' ? resource_id : rest.resource,
-  })
-}
-
-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 removeUndefinedFields({
-      steps: value.steps.map((step) => ({
-        ...step,
-        resource_id: step.resource,
-        resource: undefined,
-      })).map((step) => removeUndefinedFields(step)),
-      calcs: value.calcs,
-    })
-  }
-
-  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)"

package/custom/runtime/DashboardPage.vue

@@ -50,20 +50,31 @@ import { useRoute } from 'vue-router'
 import { Button } from '@/afcl'
 import { useCoreStore } from '@/stores/core'
 import websocket from '@/websocket'
+import { getDashboardConfigUpdatedTopic } from '../model/dashboardTopics.js'
 import DashboardRuntime from './DashboardRuntime.vue'
 import { useDashboardConfig } from '../queries/useDashboardConfig.js'
 
 const route = useRoute()
 const coreStore = useCoreStore()
 
-const dashboardSlug = computed(() => {
-  const slug = route.params.slug
+function getDashboardSlugFromRouteParam(value: string | string[] | undefined) {
+  if (Array.isArray(value)) {
+    if (!value[0]) {
+      throw new Error('Dashboard slug route param is required')
+    }
+
+    return value[0]
+  }
 
-  if (Array.isArray(slug)) {
-    return slug[0] || 'default'
+  if (!value) {
+    throw new Error('Dashboard slug route param is required')
   }
 
-  return (slug as string) || 'default'
+  return value
+}
+
+const dashboardSlug = computed(() => {
+  return getDashboardSlugFromRouteParam(route.params.slug as string | string[] | undefined)
 })
 
 const {
@@ -78,11 +89,10 @@ const isAdmin = computed(() => {
   return coreStore.adminUser?.dbUser.role === 'superadmin'
 })
 
-const DASHBOARD_CONFIG_UPDATED_TOPIC_PREFIX = '/opentopic/dashboard-config-updated'
 const subscribedTopic = ref<string | null>(null)
 
 const dashboardConfigUpdatedTopic = computed(() => {
-  return `${DASHBOARD_CONFIG_UPDATED_TOPIC_PREFIX}/${dashboardSlug.value}`
+  return getDashboardConfigUpdatedTopic(dashboardSlug.value)
 })
 
 function handleDashboardConfigUpdated(data: { slug?: string; revision?: number }) {

package/custom/runtime/DashboardRuntime.vue

@@ -207,6 +207,8 @@ import { DashboardApiError, dashboardApi, type DashboardResponse } from '../api/
 import type {
   DashboardConfig,
   DashboardGroupConfig,
+  EditableDashboardGroupConfig,
+  EditableDashboardWidgetConfig,
   DashboardGroupMoveDirection,
   DashboardWidgetConfig,
   DashboardWidgetMoveDirection,
@@ -252,13 +254,15 @@ const sortedGroups = computed(() => {
   return [...draftConfig.value.groups].sort((a, b) => a.order - b.order)
 })
 
-const widgetsByGroupId = computed<Map<string, DashboardWidgetConfig[]>>(() => {
+function groupWidgetsByGroupId(widgets: DashboardWidgetConfig[]) {
   const result = new Map<string, DashboardWidgetConfig[]>()
 
-  for (const widget of draftConfig.value.widgets) {
-    const widgets = result.get(widget.group_id) ?? []
-    widgets.push(widget)
-    result.set(widget.group_id, widgets)
+  for (const widget of widgets) {
+    const nextWidgets = result.get(widget.group_id)
+      ? [...result.get(widget.group_id)!, widget]
+      : [widget]
+
+    result.set(widget.group_id, nextWidgets)
   }
 
   for (const [groupId, widgets] of result.entries()) {
@@ -266,6 +270,10 @@ const widgetsByGroupId = computed<Map<string, DashboardWidgetConfig[]>>(() => {
   }
 
   return result
+}
+
+const widgetsByGroupId = computed<Map<string, DashboardWidgetConfig[]>>(() => {
+  return groupWidgetsByGroupId(draftConfig.value.widgets as DashboardWidgetConfig[])
 })
 
 const visibleGroups = computed(() => {
@@ -329,8 +337,12 @@ async function removeGroup(groupId: string) {
 }
 
 function editGroup(group: DashboardGroupConfig) {
+  const editableGroupConfig: EditableDashboardGroupConfig = {
+    label: group.label,
+  }
+
   editingGroupId.value = group.id
-  groupConfigCode.value = stringifyYaml(group)
+  groupConfigCode.value = stringifyYaml(editableGroupConfig)
   groupConfigError.value = ''
 }
 
@@ -340,7 +352,7 @@ async function saveGroupConfig() {
   }
 
   try {
-    const groupConfig = parseYaml(groupConfigCode.value) as DashboardGroupConfig
+    const groupConfig = parseYaml(groupConfigCode.value) as EditableDashboardGroupConfig
 
     applyDashboardResponse(
       await dashboardApi.setDashboardGroupConfig(
@@ -402,7 +414,7 @@ async function saveWidgetConfig() {
   try {
     widgetConfigError.value = ''
     widgetConfigFieldErrors.value = []
-    const widgetConfig = parseYaml(widgetConfigCode.value) as DashboardWidgetConfig
+    const widgetConfig = parseYaml(widgetConfigCode.value) as EditableDashboardWidgetConfig
 
     applyDashboardResponse(
       await dashboardApi.setWidgetConfig(

package/custom/runtime/WidgetRenderer.vue

@@ -26,7 +26,6 @@
 <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<{
@@ -53,7 +52,7 @@ const widgetTitle = computed(() => {
   }
 
   if (props.widget.target === 'chart') {
-    return normalizeChartWidgetConfig(props.widget.chart)?.title || 'Untitled chart'
+    return props.widget.chart.title || 'Untitled chart'
   }
 
   return getWidgetLabel(props.widget.target)

package/custom/runtime/WidgetShell.vue

@@ -136,10 +136,10 @@ const widgetLayoutVars = computed<CSSProperties>(() => {
 
   return {
     '--widget-basis': clampToContainerWidth(fixedWidth ?? basis),
-    '--widget-min-width': clampToContainerWidth(fixedWidth ?? formatWidth(props.layout?.minWidth) ?? basis),
-    '--widget-max-width': props.layout?.maxWidth === null
+    '--widget-min-width': clampToContainerWidth(fixedWidth ?? formatWidth(props.layout?.min_width) ?? basis),
+    '--widget-max-width': props.layout?.max_width === null
       ? '100%'
-      : clampToContainerWidth(fixedWidth ?? formatWidth(props.layout?.maxWidth) ?? '100%'),
+      : clampToContainerWidth(fixedWidth ?? formatWidth(props.layout?.max_width) ?? '100%'),
     height: formatWidth(props.layout?.height ?? DEFAULT_WIDGET_HEIGHT),
   }
 })