@adminforth/dashboard 1.5.0 → 1.7.0

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

@@ -50,6 +50,12 @@ export declare function useWidgetData(slug: Ref<string>, widgetId: Ref<string>,
                     calc: string;
                     as: string;
                 })[] | undefined;
+                sparkline?: {
+                    field: string;
+                    grain: import("../model/dashboard.types.js").TimeGrain;
+                    as: string;
+                    fill_missing?: Record<string, import("../model/dashboard.types.js").JsonValue> | undefined;
+                } | undefined;
                 filters?: any;
                 group_by?: (string | {
                     field: string;
@@ -63,16 +69,6 @@ export declare function useWidgetData(slug: Ref<string>, widgetId: Ref<string>,
                 }[] | undefined;
                 limit?: number | undefined;
                 offset?: number | undefined;
-                time_series?: {
-                    field: string;
-                    grain: import("../model/dashboard.types.js").TimeGrain;
-                    timezone?: string | undefined;
-                } | undefined;
-                period?: {
-                    field: string;
-                    gte?: any;
-                    lt?: any;
-                } | undefined;
                 bucket?: {
                     field: string;
                     buckets: {
@@ -154,6 +150,12 @@ export declare function useWidgetData(slug: Ref<string>, widgetId: Ref<string>,
                     calc: string;
                     as: string;
                 })[] | undefined;
+                sparkline?: {
+                    field: string;
+                    grain: import("../model/dashboard.types.js").TimeGrain;
+                    as: string;
+                    fill_missing?: Record<string, import("../model/dashboard.types.js").JsonValue> | undefined;
+                } | undefined;
                 filters?: any;
                 group_by?: (string | {
                     field: string;
@@ -167,16 +169,6 @@ export declare function useWidgetData(slug: Ref<string>, widgetId: Ref<string>,
                 }[] | undefined;
                 limit?: number | undefined;
                 offset?: number | undefined;
-                time_series?: {
-                    field: string;
-                    grain: import("../model/dashboard.types.js").TimeGrain;
-                    timezone?: string | undefined;
-                } | undefined;
-                period?: {
-                    field: string;
-                    gte?: any;
-                    lt?: any;
-                } | undefined;
                 bucket?: {
                     field: string;
                     buckets: {
@@ -231,8 +223,29 @@ export declare function useWidgetData(slug: Ref<string>, widgetId: Ref<string>,
                     text?: string | undefined;
                     field?: string | undefined;
                 } | undefined;
-                comparison?: any;
-                sparkline?: any;
+                comparison?: {
+                    field: string;
+                    format?: import("../model/dashboard.types.js").ValueFormat | undefined;
+                    positive_is_good?: boolean | undefined;
+                    compact?: {
+                        show?: boolean | undefined;
+                        template?: string | undefined;
+                    } | undefined;
+                    tooltip?: {
+                        label?: string | undefined;
+                        template?: string | undefined;
+                    } | undefined;
+                } | undefined;
+                sparkline?: {
+                    type?: "line" | undefined;
+                    field: string;
+                    x: string;
+                    show_axes?: boolean | undefined;
+                    show_labels?: boolean | undefined;
+                    fill?: {
+                        type?: "gradient" | "solid" | undefined;
+                    } | undefined;
+                } | undefined;
             };
             query: {
                 resource: string;
@@ -249,6 +262,12 @@ export declare function useWidgetData(slug: Ref<string>, widgetId: Ref<string>,
                     calc: string;
                     as: string;
                 })[] | undefined;
+                sparkline?: {
+                    field: string;
+                    grain: import("../model/dashboard.types.js").TimeGrain;
+                    as: string;
+                    fill_missing?: Record<string, import("../model/dashboard.types.js").JsonValue> | undefined;
+                } | undefined;
                 filters?: any;
                 group_by?: (string | {
                     field: string;
@@ -262,16 +281,6 @@ export declare function useWidgetData(slug: Ref<string>, widgetId: Ref<string>,
                 }[] | undefined;
                 limit?: number | undefined;
                 offset?: number | undefined;
-                time_series?: {
-                    field: string;
-                    grain: import("../model/dashboard.types.js").TimeGrain;
-                    timezone?: string | undefined;
-                } | undefined;
-                period?: {
-                    field: string;
-                    gte?: any;
-                    lt?: any;
-                } | undefined;
                 bucket?: {
                     field: string;
                     buckets: {
@@ -334,6 +343,12 @@ export declare function useWidgetData(slug: Ref<string>, widgetId: Ref<string>,
                     calc: string;
                     as: string;
                 })[] | undefined;
+                sparkline?: {
+                    field: string;
+                    grain: import("../model/dashboard.types.js").TimeGrain;
+                    as: string;
+                    fill_missing?: Record<string, import("../model/dashboard.types.js").JsonValue> | undefined;
+                } | undefined;
                 filters?: any;
                 group_by?: (string | {
                     field: string;
@@ -347,16 +362,6 @@ export declare function useWidgetData(slug: Ref<string>, widgetId: Ref<string>,
                 }[] | undefined;
                 limit?: number | undefined;
                 offset?: number | undefined;
-                time_series?: {
-                    field: string;
-                    grain: import("../model/dashboard.types.js").TimeGrain;
-                    timezone?: string | undefined;
-                } | undefined;
-                period?: {
-                    field: string;
-                    gte?: any;
-                    lt?: any;
-                } | undefined;
                 bucket?: {
                     field: string;
                     buckets: {
@@ -416,6 +421,12 @@ export declare function useWidgetData(slug: Ref<string>, widgetId: Ref<string>,
                     calc: string;
                     as: string;
                 })[] | undefined;
+                sparkline?: {
+                    field: string;
+                    grain: import("../model/dashboard.types.js").TimeGrain;
+                    as: string;
+                    fill_missing?: Record<string, import("../model/dashboard.types.js").JsonValue> | undefined;
+                } | undefined;
                 filters?: any;
                 group_by?: (string | {
                     field: string;
@@ -429,16 +440,6 @@ export declare function useWidgetData(slug: Ref<string>, widgetId: Ref<string>,
                 }[] | undefined;
                 limit?: number | undefined;
                 offset?: number | undefined;
-                time_series?: {
-                    field: string;
-                    grain: import("../model/dashboard.types.js").TimeGrain;
-                    timezone?: string | undefined;
-                } | undefined;
-                period?: {
-                    field: string;
-                    gte?: any;
-                    lt?: any;
-                } | undefined;
                 bucket?: {
                     field: string;
                     buckets: {
@@ -504,6 +505,12 @@ export declare function useWidgetData(slug: Ref<string>, widgetId: Ref<string>,
                     calc: string;
                     as: string;
                 })[] | undefined;
+                sparkline?: {
+                    field: string;
+                    grain: import("../model/dashboard.types.js").TimeGrain;
+                    as: string;
+                    fill_missing?: Record<string, import("../model/dashboard.types.js").JsonValue> | undefined;
+                } | undefined;
                 filters?: any;
                 group_by?: (string | {
                     field: string;
@@ -517,16 +524,6 @@ export declare function useWidgetData(slug: Ref<string>, widgetId: Ref<string>,
                 }[] | undefined;
                 limit?: number | undefined;
                 offset?: number | undefined;
-                time_series?: {
-                    field: string;
-                    grain: import("../model/dashboard.types.js").TimeGrain;
-                    timezone?: string | undefined;
-                } | undefined;
-                period?: {
-                    field: string;
-                    gte?: any;
-                    lt?: any;
-                } | undefined;
                 bucket?: {
                     field: string;
                     buckets: {
@@ -608,6 +605,12 @@ export declare function useWidgetData(slug: Ref<string>, widgetId: Ref<string>,
                     calc: string;
                     as: string;
                 })[] | undefined;
+                sparkline?: {
+                    field: string;
+                    grain: import("../model/dashboard.types.js").TimeGrain;
+                    as: string;
+                    fill_missing?: Record<string, import("../model/dashboard.types.js").JsonValue> | undefined;
+                } | undefined;
                 filters?: any;
                 group_by?: (string | {
                     field: string;
@@ -621,16 +624,6 @@ export declare function useWidgetData(slug: Ref<string>, widgetId: Ref<string>,
                 }[] | undefined;
                 limit?: number | undefined;
                 offset?: number | undefined;
-                time_series?: {
-                    field: string;
-                    grain: import("../model/dashboard.types.js").TimeGrain;
-                    timezone?: string | undefined;
-                } | undefined;
-                period?: {
-                    field: string;
-                    gte?: any;
-                    lt?: any;
-                } | undefined;
                 bucket?: {
                     field: string;
                     buckets: {
@@ -685,8 +678,29 @@ export declare function useWidgetData(slug: Ref<string>, widgetId: Ref<string>,
                     text?: string | undefined;
                     field?: string | undefined;
                 } | undefined;
-                comparison?: any;
-                sparkline?: any;
+                comparison?: {
+                    field: string;
+                    format?: import("../model/dashboard.types.js").ValueFormat | undefined;
+                    positive_is_good?: boolean | undefined;
+                    compact?: {
+                        show?: boolean | undefined;
+                        template?: string | undefined;
+                    } | undefined;
+                    tooltip?: {
+                        label?: string | undefined;
+                        template?: string | undefined;
+                    } | undefined;
+                } | undefined;
+                sparkline?: {
+                    type?: "line" | undefined;
+                    field: string;
+                    x: string;
+                    show_axes?: boolean | undefined;
+                    show_labels?: boolean | undefined;
+                    fill?: {
+                        type?: "gradient" | "solid" | undefined;
+                    } | undefined;
+                } | undefined;
             };
             query: {
                 resource: string;
@@ -703,6 +717,12 @@ export declare function useWidgetData(slug: Ref<string>, widgetId: Ref<string>,
                     calc: string;
                     as: string;
                 })[] | undefined;
+                sparkline?: {
+                    field: string;
+                    grain: import("../model/dashboard.types.js").TimeGrain;
+                    as: string;
+                    fill_missing?: Record<string, import("../model/dashboard.types.js").JsonValue> | undefined;
+                } | undefined;
                 filters?: any;
                 group_by?: (string | {
                     field: string;
@@ -716,16 +736,6 @@ export declare function useWidgetData(slug: Ref<string>, widgetId: Ref<string>,
                 }[] | undefined;
                 limit?: number | undefined;
                 offset?: number | undefined;
-                time_series?: {
-                    field: string;
-                    grain: import("../model/dashboard.types.js").TimeGrain;
-                    timezone?: string | undefined;
-                } | undefined;
-                period?: {
-                    field: string;
-                    gte?: any;
-                    lt?: any;
-                } | undefined;
                 bucket?: {
                     field: string;
                     buckets: {
@@ -788,6 +798,12 @@ export declare function useWidgetData(slug: Ref<string>, widgetId: Ref<string>,
                     calc: string;
                     as: string;
                 })[] | undefined;
+                sparkline?: {
+                    field: string;
+                    grain: import("../model/dashboard.types.js").TimeGrain;
+                    as: string;
+                    fill_missing?: Record<string, import("../model/dashboard.types.js").JsonValue> | undefined;
+                } | undefined;
                 filters?: any;
                 group_by?: (string | {
                     field: string;
@@ -801,16 +817,6 @@ export declare function useWidgetData(slug: Ref<string>, widgetId: Ref<string>,
                 }[] | undefined;
                 limit?: number | undefined;
                 offset?: number | undefined;
-                time_series?: {
-                    field: string;
-                    grain: import("../model/dashboard.types.js").TimeGrain;
-                    timezone?: string | undefined;
-                } | undefined;
-                period?: {
-                    field: string;
-                    gte?: any;
-                    lt?: any;
-                } | undefined;
                 bucket?: {
                     field: string;
                     buckets: {
@@ -870,6 +876,12 @@ export declare function useWidgetData(slug: Ref<string>, widgetId: Ref<string>,
                     calc: string;
                     as: string;
                 })[] | undefined;
+                sparkline?: {
+                    field: string;
+                    grain: import("../model/dashboard.types.js").TimeGrain;
+                    as: string;
+                    fill_missing?: Record<string, import("../model/dashboard.types.js").JsonValue> | undefined;
+                } | undefined;
                 filters?: any;
                 group_by?: (string | {
                     field: string;
@@ -883,16 +895,6 @@ export declare function useWidgetData(slug: Ref<string>, widgetId: Ref<string>,
                 }[] | undefined;
                 limit?: number | undefined;
                 offset?: number | undefined;
-                time_series?: {
-                    field: string;
-                    grain: import("../model/dashboard.types.js").TimeGrain;
-                    timezone?: string | undefined;
-                } | undefined;
-                period?: {
-                    field: string;
-                    gte?: any;
-                    lt?: any;
-                } | undefined;
                 bucket?: {
                     field: string;
                     buckets: {

package/dist/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,12 +197,12 @@ 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,
   DashboardGroupConfig,
   EditableDashboardGroupConfig,
-  EditableDashboardWidgetConfig,
   DashboardGroupMoveDirection,
   DashboardWidgetConfig,
   DashboardWidgetMoveDirection,
@@ -414,13 +408,13 @@ async function saveWidgetConfig() {
   try {
     widgetConfigError.value = ''
     widgetConfigFieldErrors.value = []
-    const widgetConfig = parseYaml(widgetConfigCode.value) as EditableDashboardWidgetConfig
+    const widgetConfig = parseYaml(widgetConfigCode.value) as DashboardWidgetConfig
 
     applyDashboardResponse(
       await dashboardApi.setWidgetConfig(
         props.dashboardSlug,
         editingWidgetId.value,
-        widgetConfig,
+        serializeDashboardWidgetConfigForEditor(widgetConfig),
       ),
     )
     closeWidgetConfigEditor()

package/dist/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>