@adminforth/dashboard 1.6.0 → 1.8.0

package/custom/model/dashboard.types.ts

@@ -117,7 +117,8 @@ export type QueryOrderByItem = {
   direction?: 'asc' | 'desc'
 }
 
-export type QueryConfig = {
+export type ResourceQueryConfig = {
+  source?: 'resource'
   resource: string
   select?: QuerySelectItem[]
   sparkline?: {
@@ -139,17 +140,31 @@ export type QueryConfig = {
   formatting?: Record<string, JsonValue>
 }
 
-export type FunnelQueryConfig = {
-  steps: FunnelQueryStep[]
+export type StepsQueryStepConfig =
+  | {
+      name: string
+      resource: string
+      metric: QueryAggregateSelectItem
+      filters?: FilterExpression
+    }
+  | {
+      name: string
+      resource: string
+      select: QueryAggregateSelectItem[]
+      filters?: FilterExpression
+    }
+
+export type StepsQueryConfig = {
+  source: 'steps'
+  steps: StepsQueryStepConfig[]
   calcs?: QueryCalcSelectItem[]
+  order_by?: QueryOrderByItem[]
+  limit?: number
+  offset?: number
+  formatting?: Record<string, JsonValue>
 }
 
-export type FunnelQueryStep = {
-  name: string
-  resource: string
-  metric: QueryAggregateSelectItem
-  filters?: FilterExpression
-}
+export type QueryConfig = ResourceQueryConfig | StepsQueryConfig
 
 export type FieldRef = string | {
   field: string
@@ -246,7 +261,7 @@ export type TableWidgetConfig = WidgetBaseConfig & {
 export type ChartDashboardWidgetConfig = WidgetBaseConfig & {
   target: 'chart'
   chart: ChartWidgetConfig
-  query: QueryConfig | FunnelQueryConfig
+  query: QueryConfig
 }
 
 export type KpiCardWidgetConfig = WidgetBaseConfig & {

package/custom/package.json

@@ -5,6 +5,7 @@
   "type": "module",
   "license": "MIT",
   "dependencies": {
+    "monaco-editor": "^0.55.1",
     "yaml": "^2.9.0"
   }
 }

package/custom/pnpm-lock.yaml

@@ -8,12 +8,29 @@ importers:
 
   .:
     dependencies:
+      monaco-editor:
+        specifier: ^0.55.1
+        version: 0.55.1
       yaml:
         specifier: ^2.9.0
         version: 2.9.0
 
 packages:
 
+  '@types/trusted-types@2.0.7':
+    resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
+
+  dompurify@3.2.7:
+    resolution: {integrity: sha512-WhL/YuveyGXJaerVlMYGWhvQswa7myDG17P7Vu65EWC05o8vfeNbvNf4d/BOvH99+ZW+LlQsc1GDKMa1vNK6dw==}
+
+  marked@14.0.0:
+    resolution: {integrity: sha512-uIj4+faQ+MgHgwUW1l2PsPglZLOLOT1uErt06dAPtx2kjteLAkbsd/0FiYg/MGS+i7ZKLb7w2WClxHkzOOuryQ==}
+    engines: {node: '>= 18'}
+    hasBin: true
+
+  monaco-editor@0.55.1:
+    resolution: {integrity: sha512-jz4x+TJNFHwHtwuV9vA9rMujcZRb0CEilTEwG2rRSpe/A7Jdkuj8xPKttCgOh+v/lkHy7HsZ64oj+q3xoAFl9A==}
+
   yaml@2.9.0:
     resolution: {integrity: sha512-2AvhNX3mb8zd6Zy7INTtSpl1F15HW6Wnqj0srWlkKLcpYl/gMIMJiyuGq2KeI2YFxUPjdlB+3Lc10seMLtL4cA==}
     engines: {node: '>= 14.6'}
@@ -21,4 +38,18 @@ packages:
 
 snapshots:
 
+  '@types/trusted-types@2.0.7':
+    optional: true
+
+  dompurify@3.2.7:
+    optionalDependencies:
+      '@types/trusted-types': 2.0.7
+
+  marked@14.0.0: {}
+
+  monaco-editor@0.55.1:
+    dependencies:
+      dompurify: 3.2.7
+      marked: 14.0.0
+
   yaml@2.9.0: {}

package/custom/runtime/DashboardRuntime.vue

@@ -54,7 +54,7 @@
       class="fixed inset-0 z-50 flex items-center justify-center bg-black/35 p-4"
       @click.self="closeGroupConfigEditor"
     >
-      <section class="w-full max-w-2xl rounded-lg border border-lightListBorder bg-lightDropdownOptionsBackground p-4 shadow-xl dark:border-darkListBorder dark:bg-darkDropdownOptionsBackground">
+      <section class="w-full max-w-5xl rounded-lg border border-lightListBorder bg-lightDropdownOptionsBackground p-4 shadow-xl dark:border-darkListBorder dark:bg-darkDropdownOptionsBackground">
         <header class="mb-3 flex items-center justify-between gap-3">
           <h2 class="m-0 text-base font-bold text-lightNavbarText dark:text-darkNavbarText">
             Group JSON
@@ -81,12 +81,9 @@
           </button>
         </header>
 
-        <textarea
+        <YamlConfigEditor
           v-model="groupConfigCode"
-          class="min-h-[500px] w-full resize-y rounded-lg border border-lightListBorder bg-lightListTable p-3 font-mono text-sm text-lightNavbarText outline-none focus:border-lightPrimaryButtonBackground dark:border-darkListBorder dark:bg-darkListTable dark:text-darkNavbarText dark:focus:border-darkPrimaryButtonBackground"
-          spellcheck="false"
-          @keydown.ctrl.enter.prevent="saveGroupConfig"
-          @keydown.meta.enter.prevent="saveGroupConfig"
+          @save="saveGroupConfig"
         />
 
         <div
@@ -120,7 +117,7 @@
       class="fixed inset-0 z-50 flex items-center justify-center bg-black/35 p-4"
       @click.self="closeWidgetConfigEditor"
     >
-      <section class="w-full max-w-2xl rounded-lg border border-lightListBorder bg-lightDropdownOptionsBackground p-4 shadow-xl dark:border-darkListBorder dark:bg-darkDropdownOptionsBackground">
+      <section class="w-full max-w-5xl rounded-lg border border-lightListBorder bg-lightDropdownOptionsBackground p-4 shadow-xl dark:border-darkListBorder dark:bg-darkDropdownOptionsBackground">
         <header class="mb-3 flex items-center justify-between gap-3">
           <h2 class="m-0 text-base font-bold text-lightNavbarText dark:text-darkNavbarText">
             Widget JSON
@@ -147,12 +144,9 @@
           </button>
         </header>
 
-        <textarea
+        <YamlConfigEditor
           v-model="widgetConfigCode"
-          class="min-h-[500px] w-full resize-y rounded-lg border border-lightListBorder bg-lightListTable p-3 font-mono text-sm text-lightNavbarText outline-none focus:border-lightPrimaryButtonBackground dark:border-darkListBorder dark:bg-darkListTable dark:text-darkNavbarText dark:focus:border-darkPrimaryButtonBackground"
-          spellcheck="false"
-          @keydown.ctrl.enter.prevent="saveWidgetConfig"
-          @keydown.meta.enter.prevent="saveWidgetConfig"
+          @save="saveWidgetConfig"
         />
 
         <div
@@ -203,6 +197,7 @@ import { computed, ref, watch } from 'vue'
 import { parse as parseYaml, stringify as stringifyYaml } from 'yaml'
 import { Button } from '@/afcl'
 import DashboardGroup from './DashboardGroup.vue'
+import YamlConfigEditor from './YamlConfigEditor.vue'
 import { DashboardApiError, dashboardApi, type DashboardResponse } from '../api/dashboardApi.js'
 import type {
   DashboardConfig,

package/custom/runtime/YamlConfigEditor.vue

@@ -0,0 +1,109 @@
+<template>
+  <div
+    ref="editorEl"
+    class="min-h-[500px] w-full overflow-hidden rounded-lg border border-lightListBorder bg-lightListTable text-sm dark:border-darkListBorder dark:bg-darkListTable"
+  />
+</template>
+
+<script setup lang="ts">
+import 'monaco-editor/min/vs/editor/editor.main.css'
+import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import type * as Monaco from 'monaco-editor'
+
+declare global {
+  interface Window {
+    MonacoEnvironment?: {
+      getWorker: () => Worker
+    }
+  }
+}
+
+if (typeof window !== 'undefined' && !window.MonacoEnvironment) {
+  window.MonacoEnvironment = {
+    getWorker: () => new EditorWorker(),
+  }
+}
+
+const props = defineProps<{
+  modelValue: string
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+  save: []
+}>()
+
+const editorEl = ref<HTMLElement | null>(null)
+let monaco: typeof Monaco | null = null
+let editor: Monaco.editor.IStandaloneCodeEditor | null = null
+let resizeObserver: ResizeObserver | null = null
+let applyingExternalValue = false
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    if (!editor || value === editor.getValue()) {
+      return
+    }
+
+    applyingExternalValue = true
+    editor.setValue(value)
+    applyingExternalValue = false
+  },
+)
+
+onMounted(async () => {
+  const [loadedMonaco] = await Promise.all([
+    import('monaco-editor'),
+    import('monaco-editor/esm/vs/basic-languages/yaml/yaml.contribution'),
+  ])
+
+  monaco = loadedMonaco
+  await nextTick()
+
+  if (!editorEl.value) {
+    return
+  }
+
+  editor = monaco.editor.create(editorEl.value, {
+    value: props.modelValue,
+    language: 'yaml',
+    automaticLayout: true,
+    minimap: { enabled: false },
+    fontSize: 13,
+    lineNumbersMinChars: 3,
+    padding: { top: 12, bottom: 12 },
+    scrollBeyondLastLine: false,
+    tabSize: 2,
+    insertSpaces: true,
+    wordWrap: 'on',
+    wrappingIndent: 'same',
+    theme: document.documentElement.classList.contains('dark') ? 'vs-dark' : 'vs',
+  })
+
+  editor.onDidChangeModelContent(() => {
+    if (!editor || applyingExternalValue) {
+      return
+    }
+
+    emit('update:modelValue', editor.getValue())
+  })
+
+  editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, () => {
+    emit('save')
+  })
+
+  resizeObserver = new ResizeObserver(() => {
+    editor?.layout()
+  })
+  resizeObserver.observe(editorEl.value)
+})
+
+onBeforeUnmount(() => {
+  resizeObserver?.disconnect()
+  resizeObserver = null
+  editor?.dispose()
+  editor = null
+})
+</script>

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

@@ -151,8 +151,8 @@ Use resource, not resourceId.
 
 ## Query shape rules
 
-Use dashboard_configure_funnel_chart_widget for funnel charts and set query.steps.
-Do not use query.steps for kpi_card, gauge_card, table, pivot_table, line, bar, stacked bar, pie, or histogram charts.
+All chart widgets, including funnel charts, use the same query shape.
+Use a single-resource query by default.
 
 For kpi_card and normal charts, use:
 - query.resource
@@ -162,6 +162,29 @@ For kpi_card and normal charts, use:
 - optional query.order_by
 - optional query.calcs
 
+For multi-resource charts or widgets, use the general steps source:
+
+query:
+  source: steps
+  steps:
+    - name: Leads
+      resource: leads
+      metric:
+        agg: count
+        as: value
+    - name: Customers
+      resource: orders
+      metric:
+        agg: count_distinct
+        field: customer_id
+        as: value
+
+Each step may use either:
+- metric for one aggregate
+- select for multiple aggregate fields
+
+Do not use bare query.steps without source: steps.
+
 ## Date range rules
 
 Use only query.filters for time ranges.
@@ -203,7 +226,7 @@ select raw token totals:
 then query.calcs:
 - calculate total_spend from those aliases and lookup variables
 
-For today vs yesterday KPI, use multiple aggregate select items with filters and distinct aliases, then calcs. Do not use query.steps.
+For today vs yesterday KPI, use multiple aggregate select items with filters and distinct aliases, then calcs.
 
 ## Calc variables
 

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

@@ -87,7 +87,8 @@ export type QueryOrderByItem = {
     field: string;
     direction?: 'asc' | 'desc';
 };
-export type QueryConfig = {
+export type ResourceQueryConfig = {
+    source?: 'resource';
     resource: string;
     select?: QuerySelectItem[];
     sparkline?: {
@@ -112,16 +113,27 @@ export type QueryConfig = {
     calcs?: QueryCalcSelectItem[];
     formatting?: Record<string, JsonValue>;
 };
-export type FunnelQueryConfig = {
-    steps: FunnelQueryStep[];
-    calcs?: QueryCalcSelectItem[];
-};
-export type FunnelQueryStep = {
+export type StepsQueryStepConfig = {
     name: string;
     resource: string;
     metric: QueryAggregateSelectItem;
     filters?: FilterExpression;
+} | {
+    name: string;
+    resource: string;
+    select: QueryAggregateSelectItem[];
+    filters?: FilterExpression;
 };
+export type StepsQueryConfig = {
+    source: 'steps';
+    steps: StepsQueryStepConfig[];
+    calcs?: QueryCalcSelectItem[];
+    order_by?: QueryOrderByItem[];
+    limit?: number;
+    offset?: number;
+    formatting?: Record<string, JsonValue>;
+};
+export type QueryConfig = ResourceQueryConfig | StepsQueryConfig;
 export type FieldRef = string | {
     field: string;
     label?: string;
@@ -210,7 +222,7 @@ export type TableWidgetConfig = WidgetBaseConfig & {
 export type ChartDashboardWidgetConfig = WidgetBaseConfig & {
     target: 'chart';
     chart: ChartWidgetConfig;
-    query: QueryConfig | FunnelQueryConfig;
+    query: QueryConfig;
 };
 export type KpiCardWidgetConfig = WidgetBaseConfig & {
     target: 'kpi_card';

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

@@ -117,7 +117,8 @@ export type QueryOrderByItem = {
   direction?: 'asc' | 'desc'
 }
 
-export type QueryConfig = {
+export type ResourceQueryConfig = {
+  source?: 'resource'
   resource: string
   select?: QuerySelectItem[]
   sparkline?: {
@@ -139,17 +140,31 @@ export type QueryConfig = {
   formatting?: Record<string, JsonValue>
 }
 
-export type FunnelQueryConfig = {
-  steps: FunnelQueryStep[]
+export type StepsQueryStepConfig =
+  | {
+      name: string
+      resource: string
+      metric: QueryAggregateSelectItem
+      filters?: FilterExpression
+    }
+  | {
+      name: string
+      resource: string
+      select: QueryAggregateSelectItem[]
+      filters?: FilterExpression
+    }
+
+export type StepsQueryConfig = {
+  source: 'steps'
+  steps: StepsQueryStepConfig[]
   calcs?: QueryCalcSelectItem[]
+  order_by?: QueryOrderByItem[]
+  limit?: number
+  offset?: number
+  formatting?: Record<string, JsonValue>
 }
 
-export type FunnelQueryStep = {
-  name: string
-  resource: string
-  metric: QueryAggregateSelectItem
-  filters?: FilterExpression
-}
+export type QueryConfig = ResourceQueryConfig | StepsQueryConfig
 
 export type FieldRef = string | {
   field: string
@@ -246,7 +261,7 @@ export type TableWidgetConfig = WidgetBaseConfig & {
 export type ChartDashboardWidgetConfig = WidgetBaseConfig & {
   target: 'chart'
   chart: ChartWidgetConfig
-  query: QueryConfig | FunnelQueryConfig
+  query: QueryConfig
 }
 
 export type KpiCardWidgetConfig = WidgetBaseConfig & {

package/dist/custom/package.json

@@ -5,6 +5,7 @@
   "type": "module",
   "license": "MIT",
   "dependencies": {
+    "monaco-editor": "^0.55.1",
     "yaml": "^2.9.0"
   }
 }

package/dist/custom/pnpm-lock.yaml

@@ -8,12 +8,29 @@ importers:
 
   .:
     dependencies:
+      monaco-editor:
+        specifier: ^0.55.1
+        version: 0.55.1
       yaml:
         specifier: ^2.9.0
         version: 2.9.0
 
 packages:
 
+  '@types/trusted-types@2.0.7':
+    resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
+
+  dompurify@3.2.7:
+    resolution: {integrity: sha512-WhL/YuveyGXJaerVlMYGWhvQswa7myDG17P7Vu65EWC05o8vfeNbvNf4d/BOvH99+ZW+LlQsc1GDKMa1vNK6dw==}
+
+  marked@14.0.0:
+    resolution: {integrity: sha512-uIj4+faQ+MgHgwUW1l2PsPglZLOLOT1uErt06dAPtx2kjteLAkbsd/0FiYg/MGS+i7ZKLb7w2WClxHkzOOuryQ==}
+    engines: {node: '>= 18'}
+    hasBin: true
+
+  monaco-editor@0.55.1:
+    resolution: {integrity: sha512-jz4x+TJNFHwHtwuV9vA9rMujcZRb0CEilTEwG2rRSpe/A7Jdkuj8xPKttCgOh+v/lkHy7HsZ64oj+q3xoAFl9A==}
+
   yaml@2.9.0:
     resolution: {integrity: sha512-2AvhNX3mb8zd6Zy7INTtSpl1F15HW6Wnqj0srWlkKLcpYl/gMIMJiyuGq2KeI2YFxUPjdlB+3Lc10seMLtL4cA==}
     engines: {node: '>= 14.6'}
@@ -21,4 +38,18 @@ packages:
 
 snapshots:
 
+  '@types/trusted-types@2.0.7':
+    optional: true
+
+  dompurify@3.2.7:
+    optionalDependencies:
+      '@types/trusted-types': 2.0.7
+
+  marked@14.0.0: {}
+
+  monaco-editor@0.55.1:
+    dependencies:
+      dompurify: 3.2.7
+      marked: 14.0.0
+
   yaml@2.9.0: {}