@adminforth/dashboard 1.4.0 → 1.4.1

package/dist/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/dist/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/dist/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),
   }
 })

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

@@ -139,8 +139,8 @@ Use the current schema keys exactly:
 
 - Use `target`, not `type`.
 - Use `label`, not `title`.
-- Use `query`, not `data_source`.
-- Use `resource`, not `resource_id`.
+- Use `query`, not `dataSource`.
+- Use `resource`, not `resourceId`.
 - Use `group_by`, not `groupBy`.
 - Use `order_by`, not `orderBy`.
 - Use `page_size`, not `pageSize`.

package/dist/custom/widgets/{gauge-card/GaugeCardWidget.vue → GaugeCardWidget.vue}

@@ -1,8 +1,66 @@
+<template>
+  <div class="mt-3 rounded-lg border border-lightListBorder bg-lightTableBackground p-4 dark:border-darkListBorder dark:bg-darkTableBackground">
+    <div
+      v-if="isLoading"
+      class="text-sm text-lightListTableText dark:text-darkListTableText"
+    >
+      Loading...
+    </div>
+
+    <div
+      v-else-if="error"
+      class="text-sm text-lightInputErrorColor"
+    >
+      Failed to load gauge data
+    </div>
+
+    <div
+      v-else
+      class="flex flex-col items-center gap-2"
+    >
+      <svg
+        width="180"
+        height="104"
+        viewBox="0 0 180 104"
+        role="img"
+        :aria-label="valueField"
+      >
+        <path
+          d="M18 90a72 72 0 0 1 144 0"
+          class="text-lightListBorder dark:text-darkListBorder"
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-width="18"
+        />
+        <path
+          d="M18 90a72 72 0 0 1 144 0"
+          fill="none"
+          :stroke="gaugeColor"
+          stroke-linecap="round"
+          stroke-width="18"
+          :stroke-dasharray="circumference"
+          :stroke-dashoffset="strokeDashoffset"
+        />
+      </svg>
+
+      <div class="text-3xl font-bold text-lightNavbarText dark:text-darkNavbarText">
+        {{ gaugeConfig?.value.prefix ?? '' }}{{ formattedValue }}{{ gaugeConfig?.value.suffix ?? '' }}
+      </div>
+      <div class="text-sm text-lightListTableText dark:text-darkListTableText">
+        {{ formattedMinValue }} - {{ formattedMaxValue }}
+      </div>
+    </div>
+  </div>
+</template>
+
+
+
 <script setup lang="ts">
 import { computed, watch } from 'vue'
-import { useWidgetData } from '../../queries/useWidgetData.js'
-import type { DashboardWidgetConfig, DashboardWidgetTableData } from '../../model/dashboard.types.js'
-import { CHART_COLORS, formatChartValue, toFiniteNumber } from '../chart/chart.utils.js'
+import { useWidgetData } from '../queries/useWidgetData.js'
+import type { DashboardWidgetConfig, DashboardWidgetTableData } from '../model/dashboard.types.js'
+import { CHART_COLORS, formatChartValue, toFiniteNumber } from './chart/chart.utils.js'
 
 const props = defineProps<{
   dashboardSlug: string
@@ -57,13 +115,13 @@ const widgetData = computed(() => data.value?.data as DashboardWidgetTableData |
 const columns = computed(() => widgetData.value?.columns ?? [])
 const firstRow = computed(() => widgetData.value?.rows[0] ?? {})
 const valueField = computed(() => gaugeConfig.value?.value.field || columns.value[0])
-const targetField = computed(() => gaugeConfig.value?.target?.field ?? gaugeConfig.value?.progress?.targetField)
+const targetField = computed(() => gaugeConfig.value?.target?.field ?? gaugeConfig.value?.progress?.target_field)
 const minValue = computed(() => {
   return 0
 })
 const maxValue = computed(() => {
   const dynamicMax = targetField.value ? parseOptionalNumber(firstRow.value[targetField.value]) : undefined
-  return dynamicMax ?? parseOptionalNumber(gaugeConfig.value?.target?.value ?? gaugeConfig.value?.progress?.targetValue) ?? 100
+  return dynamicMax ?? parseOptionalNumber(gaugeConfig.value?.target?.value ?? gaugeConfig.value?.progress?.target_value) ?? 100
 })
 const value = computed(() => toFiniteNumber(firstRow.value[valueField.value]))
 const fractionDigits = computed(() => Math.min([
@@ -95,59 +153,3 @@ const circumference = Math.PI * radius
 const strokeDashoffset = computed(() => circumference * (1 - progress.value))
 const gaugeColor = computed(() => gaugeConfig.value?.color || CHART_COLORS[0])
 </script>
-
-<template>
-  <div class="mt-3 rounded-lg border border-lightListBorder bg-lightTableBackground p-4 dark:border-darkListBorder dark:bg-darkTableBackground">
-    <div
-      v-if="isLoading"
-      class="text-sm text-lightListTableText dark:text-darkListTableText"
-    >
-      Loading...
-    </div>
-
-    <div
-      v-else-if="error"
-      class="text-sm text-lightInputErrorColor"
-    >
-      Failed to load gauge data
-    </div>
-
-    <div
-      v-else
-      class="flex flex-col items-center gap-2"
-    >
-      <svg
-        width="180"
-        height="104"
-        viewBox="0 0 180 104"
-        role="img"
-        :aria-label="valueField"
-      >
-        <path
-          d="M18 90a72 72 0 0 1 144 0"
-          class="text-lightListBorder dark:text-darkListBorder"
-          fill="none"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-width="18"
-        />
-        <path
-          d="M18 90a72 72 0 0 1 144 0"
-          fill="none"
-          :stroke="gaugeColor"
-          stroke-linecap="round"
-          stroke-width="18"
-          :stroke-dasharray="circumference"
-          :stroke-dashoffset="strokeDashoffset"
-        />
-      </svg>
-
-      <div class="text-3xl font-bold text-lightNavbarText dark:text-darkNavbarText">
-        {{ gaugeConfig?.value.prefix ?? '' }}{{ formattedValue }}{{ gaugeConfig?.value.suffix ?? '' }}
-      </div>
-      <div class="text-sm text-lightListTableText dark:text-darkListTableText">
-        {{ formattedMinValue }} - {{ formattedMaxValue }}
-      </div>
-    </div>
-  </div>
-</template>

package/dist/custom/widgets/{kpi-card/KpiCardWidget.vue → KpiCardWidget.vue}

@@ -1,8 +1,40 @@
+<template>
+  <div class="mt-3 rounded-lg border border-lightListBorder bg-lightTableBackground p-4 dark:border-darkListBorder dark:bg-darkTableBackground">
+    <div
+      v-if="isLoading"
+      class="text-sm text-lightListTableText dark:text-darkListTableText"
+    >
+      Loading...
+    </div>
+
+    <div
+      v-else-if="error"
+      class="text-sm text-lightInputErrorColor"
+    >
+      Failed to load KPI data
+    </div>
+
+    <div
+      v-else
+      class="grid gap-1"
+    >
+      <div class="text-3xl font-bold text-lightNavbarText dark:text-darkNavbarText">
+        {{ formattedValue }}
+      </div>
+      <div class="text-sm text-lightListTableText dark:text-darkListTableText">
+        {{ label }}
+      </div>
+    </div>
+  </div>
+</template>
+
+
+
 <script setup lang="ts">
 import { computed, watch } from 'vue'
-import { useWidgetData } from '../../queries/useWidgetData.js'
-import type { DashboardWidgetConfig, DashboardWidgetTableData } from '../../model/dashboard.types.js'
-import { formatChartValue, toFiniteNumber } from '../chart/chart.utils.js'
+import { useWidgetData } from '../queries/useWidgetData.js'
+import type { DashboardWidgetConfig, DashboardWidgetTableData } from '../model/dashboard.types.js'
+import { formatChartValue, toFiniteNumber } from './chart/chart.utils.js'
 
 const props = defineProps<{
   dashboardSlug: string
@@ -37,33 +69,3 @@ const label = computed(() => 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>
-  <div class="mt-3 rounded-lg border border-lightListBorder bg-lightTableBackground p-4 dark:border-darkListBorder dark:bg-darkTableBackground">
-    <div
-      v-if="isLoading"
-      class="text-sm text-lightListTableText dark:text-darkListTableText"
-    >
-      Loading...
-    </div>
-
-    <div
-      v-else-if="error"
-      class="text-sm text-lightInputErrorColor"
-    >
-      Failed to load KPI data
-    </div>
-
-    <div
-      v-else
-      class="grid gap-1"
-    >
-      <div class="text-3xl font-bold text-lightNavbarText dark:text-darkNavbarText">
-        {{ formattedValue }}
-      </div>
-      <div class="text-sm text-lightListTableText dark:text-darkListTableText">
-        {{ label }}
-      </div>
-    </div>
-  </div>
-</template>

package/dist/custom/widgets/{pivot-table/PivotTableWidget.vue → PivotTableWidget.vue}

@@ -1,11 +1,78 @@
+<template>
+  <div class="mt-3 flex h-full min-h-0 flex-col overflow-hidden rounded-lg border border-lightListBorder bg-lightTableBackground dark:border-darkListBorder dark:bg-darkTableBackground">
+    <div
+      v-if="isLoading"
+      class="p-4 text-sm text-lightListTableText dark:text-darkListTableText"
+    >
+      Loading...
+    </div>
+
+    <div
+      v-else-if="error"
+      class="p-4 text-sm text-lightInputErrorColor"
+    >
+      Failed to load pivot data
+    </div>
+
+    <div
+      v-else-if="!pivotRows.length"
+      class="p-4 text-sm text-lightListTableText dark:text-darkListTableText"
+    >
+      No data available
+    </div>
+
+    <div
+      v-else
+      class="min-h-0 flex-1 overflow-auto"
+    >
+      <table class="min-w-max w-full border-collapse text-left text-sm">
+        <thead class="bg-lightTableHeadingBackground text-xs uppercase text-lightTableHeadingText dark:bg-darkTableHeadingBackground dark:text-darkTableHeadingText">
+          <tr>
+            <th class="px-3 py-2 font-semibold">
+              {{ rowField }}
+            </th>
+            <th
+              v-for="column in pivotColumnLabels"
+              :key="column"
+              class="px-3 py-2 text-right font-semibold"
+            >
+              {{ column }}
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="row in pivotRows"
+            :key="String(row.label)"
+            class="border-t border-lightListBorder odd:bg-lightTableOddBackground even:bg-lightTableEvenBackground dark:border-darkListBorder odd:dark:bg-darkTableOddBackground even:dark:bg-darkTableEvenBackground"
+          >
+            <td class="px-3 py-2 font-medium text-lightNavbarText dark:text-darkNavbarText">
+              {{ row.label }}
+            </td>
+            <td
+              v-for="column in pivotColumnLabels"
+              :key="column"
+              class="px-3 py-2 text-right text-lightListTableText dark:text-darkListTableText"
+            >
+              {{ formatChartValue(typeof row[column] === 'number' ? row[column] : 0) }}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+
+
 <script setup lang="ts">
 import { computed, watch } from 'vue'
-import { useWidgetData } from '../../queries/useWidgetData.js'
+import { useWidgetData } from '../queries/useWidgetData.js'
 import {
   getFieldRefField,
-} from '../../model/dashboard.types.js'
-import type { DashboardWidgetConfig, DashboardWidgetData } from '../../model/dashboard.types.js'
-import { formatChartLabel, formatChartValue, toFiniteNumber } from '../chart/chart.utils.js'
+} from '../model/dashboard.types.js'
+import type { DashboardWidgetConfig, DashboardWidgetData } from '../model/dashboard.types.js'
+import { formatChartLabel, formatChartValue, toFiniteNumber } from './chart/chart.utils.js'
 
 const props = defineProps<{
   dashboardSlug: string
@@ -77,67 +144,3 @@ const pivotRows = computed(() => {
 })
 </script>
 
-<template>
-  <div class="mt-3 flex h-full min-h-0 flex-col overflow-hidden rounded-lg border border-lightListBorder bg-lightTableBackground dark:border-darkListBorder dark:bg-darkTableBackground">
-    <div
-      v-if="isLoading"
-      class="p-4 text-sm text-lightListTableText dark:text-darkListTableText"
-    >
-      Loading...
-    </div>
-
-    <div
-      v-else-if="error"
-      class="p-4 text-sm text-lightInputErrorColor"
-    >
-      Failed to load pivot data
-    </div>
-
-    <div
-      v-else-if="!pivotRows.length"
-      class="p-4 text-sm text-lightListTableText dark:text-darkListTableText"
-    >
-      No data available
-    </div>
-
-    <div
-      v-else
-      class="min-h-0 flex-1 overflow-auto"
-    >
-      <table class="min-w-max w-full border-collapse text-left text-sm">
-        <thead class="bg-lightTableHeadingBackground text-xs uppercase text-lightTableHeadingText dark:bg-darkTableHeadingBackground dark:text-darkTableHeadingText">
-          <tr>
-            <th class="px-3 py-2 font-semibold">
-              {{ rowField }}
-            </th>
-            <th
-              v-for="column in pivotColumnLabels"
-              :key="column"
-              class="px-3 py-2 text-right font-semibold"
-            >
-              {{ column }}
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr
-            v-for="row in pivotRows"
-            :key="String(row.label)"
-            class="border-t border-lightListBorder odd:bg-lightTableOddBackground even:bg-lightTableEvenBackground dark:border-darkListBorder odd:dark:bg-darkTableOddBackground even:dark:bg-darkTableEvenBackground"
-          >
-            <td class="px-3 py-2 font-medium text-lightNavbarText dark:text-darkNavbarText">
-              {{ row.label }}
-            </td>
-            <td
-              v-for="column in pivotColumnLabels"
-              :key="column"
-              class="px-3 py-2 text-right text-lightListTableText dark:text-darkListTableText"
-            >
-              {{ formatChartValue(typeof row[column] === 'number' ? row[column] : 0) }}
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </div>
-</template>

package/dist/custom/widgets/{table/TableWidget.vue → TableWidget.vue}

@@ -112,14 +112,14 @@
 
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
-import { useWidgetData } from '../../queries/useWidgetData.js'
-import { getFieldRefField } from '../../model/dashboard.types.js'
-import type { DashboardWidgetConfig, DashboardWidgetTableData, FieldRef } from '../../model/dashboard.types.js'
+import { useWidgetData } from '../queries/useWidgetData.js'
+import { getFieldRefField } from '../model/dashboard.types.js'
+import type { DashboardWidgetConfig, DashboardWidgetTableData, FieldRef } from '../model/dashboard.types.js'
 
 type TableWidgetConfig = {
   columns?: FieldRef[]
   pagination?: boolean
-  pageSize?: number
+  page_size?: number
 }
 
 const DEFAULT_PAGE_SIZE = 10
@@ -133,7 +133,7 @@ const currentPage = ref(1)
 const currentPageInput = ref(1)
 const tableConfig = computed(() => props.widget.table as TableWidgetConfig | undefined)
 const isPaginationEnabled = computed(() => tableConfig.value?.pagination !== false)
-const pageSize = computed(() => tableConfig.value?.pageSize ?? DEFAULT_PAGE_SIZE)
+const pageSize = computed(() => tableConfig.value?.page_size ?? DEFAULT_PAGE_SIZE)
 const dashboardSlugRef = computed(() => props.dashboardSlug)
 const widgetIdRef = computed(() => props.widget.id)
 const widgetDataRequest = computed(() => (

package/dist/custom/widgets/chart/{bar/BarChart.vue → BarChart.vue}

@@ -82,7 +82,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useElementSize } from '../../../composables/useElementSize.js'
+import { useElementSize } from '../../composables/useElementSize.js'
 import {
   CHART_COLORS,
   formatChartAxisLabel,
@@ -90,7 +90,7 @@ import {
   formatChartValue,
   getChartYAxisWidth,
   toFiniteNumber,
-} from '../chart.utils.js'
+} from './chart.utils.js'
 
 const props = withDefaults(defineProps<{
   rows: Record<string, unknown>[]

package/dist/custom/widgets/chart/ChartWidget.vue

@@ -41,16 +41,7 @@
     />
 
     <BarChart
-      v-else-if="chartConfig?.type === 'bar'"
-      :rows="barRows"
-      :label-field="barLabelField"
-      :value-field="barValueField"
-      :color="chartConfig.color"
-      :height="chartHeight"
-    />
-
-    <HistogramChart
-      v-else-if="chartConfig?.type === 'histogram'"
+      v-else-if="chartConfig?.type === 'bar' || chartConfig?.type === 'histogram'"
       :rows="barRows"
       :label-field="barLabelField"
       :value-field="barValueField"
@@ -91,11 +82,9 @@
 <script setup lang="ts">
 import { computed, watch } from 'vue'
 import { useWidgetData } from '../../queries/useWidgetData.js'
-import type { DashboardWidgetConfig, DashboardWidgetTableData } from '../../model/dashboard.types.js'
-import { normalizeChartWidgetConfig } from './chart.types.js'
+import type { ChartDashboardWidgetConfig, DashboardWidgetTableData } from '../../model/dashboard.types.js'
 import BarChart from './bar/BarChart.vue'
 import FunnelChart from './funnel/FunnelChart.vue'
-import HistogramChart from './histogram/HistogramChart.vue'
 import LineChart from './line/LineChart.vue'
 import PieChart from './pie/PieChart.vue'
 import StackedBarChart from './stacked-bar/StackedBarChart.vue'
@@ -105,7 +94,7 @@ const DEFAULT_WIDGET_HEIGHT = 500
 
 const props = defineProps<{
   dashboardSlug: string
-  widget: DashboardWidgetConfig
+  widget: ChartDashboardWidgetConfig
 }>()
 
 const dashboardSlugRef = computed(() => props.dashboardSlug)
@@ -128,7 +117,7 @@ watch(
 const chartData = computed(() => data.value?.data as DashboardWidgetTableData | null)
 const rows = computed(() => chartData.value?.rows ?? [])
 const columns = computed(() => chartData.value?.columns ?? [])
-const chartConfig = computed(() => normalizeChartWidgetConfig(props.widget.chart))
+const chartConfig = computed(() => props.widget.chart)
 
 function resolveChartDimensionField(field: string | undefined, fallbackField: string | undefined) {
   const resolvedField = field ?? fallbackField