@adminforth/dashboard 1.4.0 → 1.4.2

package/{custom/widgets/chart/funnel → dist/custom/widgets/chart}/FunnelChart.vue

@@ -1,13 +1,91 @@
+<template>
+  <div
+    ref="rootEl"
+    class="grid h-full min-h-0 w-full gap-4 overflow-hidden"
+    :class="isCompact ? 'grid-rows-[minmax(0,1fr)_auto]' : 'grid-cols-[minmax(0,1fr)_200px]'"
+  >
+    <div
+      ref="svgEl"
+      class="min-h-0 w-full overflow-hidden"
+    >
+      <svg
+        v-if="chartWidth > 0 && chartHeight > 0"
+        class="block h-full w-full"
+        :viewBox="`0 0 ${chartWidth} ${chartHeight}`"
+        role="img"
+        :aria-label="valueField"
+      >
+        <path
+          v-for="segment in segments"
+          :key="segment.id"
+          :d="segment.path"
+          :fill="segment.color"
+          fill-opacity="0.9"
+        >
+          <title>
+            {{ segment.label }}: {{ formatChartValue(segment.value) }} ({{ segment.percentLabel }})
+          </title>
+        </path>
+
+        <text
+          v-for="segment in segments"
+          v-show="segment.labelVisible"
+          :key="`value-${segment.id}`"
+          :x="chartWidth / 2"
+          :y="segment.centerY + 4"
+          fill="#ffffff"
+          font-size="12"
+          font-weight="600"
+          text-anchor="middle"
+        >
+          {{ formatChartValue(segment.value) }}
+        </text>
+      </svg>
+    </div>
+
+    <div class="grid min-w-0 gap-2 text-sm">
+      <div
+        v-for="segment in segments"
+        :key="`legend-${segment.id}`"
+        class="grid min-h-[34px] min-w-0 grid-cols-[1fr_auto] items-center gap-3"
+      >
+        <div class="flex min-w-0 items-center gap-2">
+          <span
+            class="h-2.5 w-2.5 shrink-0 rounded-full"
+            :style="{ backgroundColor: segment.color }"
+          />
+
+          <span class="truncate text-lightNavbarText dark:text-darkNavbarText">
+            {{ segment.shortLabel }}
+          </span>
+        </div>
+
+        <div class="text-right">
+          <div class="font-semibold text-lightNavbarText dark:text-darkNavbarText">
+            {{ formatChartValue(segment.value) }}
+          </div>
+
+          <div class="text-xs text-lightListTableText dark:text-darkListTableText">
+            {{ segment.percentLabel }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+
+
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useElementSize } from '../../../composables/useElementSize.js'
+import { useElementSize } from '../../composables/useElementSize.js'
 import {
   CHART_COLORS,
   formatChartAxisLabel,
   formatChartLabel,
   formatChartValue,
   toFiniteNumber,
-} from '../chart.utils.js'
+} from './chart.utils.js'
 
 const props = withDefaults(defineProps<{
   rows: Record<string, unknown>[]
@@ -121,79 +199,3 @@ const segments = computed(() => funnelRows.value.map((row, index) => {
   }
 }))
 </script>
-
-<template>
-  <div
-    ref="rootEl"
-    class="grid h-full min-h-0 w-full gap-4 overflow-hidden"
-    :class="isCompact ? 'grid-rows-[minmax(0,1fr)_auto]' : 'grid-cols-[minmax(0,1fr)_200px]'"
-  >
-    <div
-      ref="svgEl"
-      class="min-h-0 w-full overflow-hidden"
-    >
-      <svg
-        v-if="chartWidth > 0 && chartHeight > 0"
-        class="block h-full w-full"
-        :viewBox="`0 0 ${chartWidth} ${chartHeight}`"
-        role="img"
-        :aria-label="valueField"
-      >
-        <path
-          v-for="segment in segments"
-          :key="segment.id"
-          :d="segment.path"
-          :fill="segment.color"
-          fill-opacity="0.9"
-        >
-          <title>
-            {{ segment.label }}: {{ formatChartValue(segment.value) }} ({{ segment.percentLabel }})
-          </title>
-        </path>
-
-        <text
-          v-for="segment in segments"
-          v-show="segment.labelVisible"
-          :key="`value-${segment.id}`"
-          :x="chartWidth / 2"
-          :y="segment.centerY + 4"
-          fill="#ffffff"
-          font-size="12"
-          font-weight="600"
-          text-anchor="middle"
-        >
-          {{ formatChartValue(segment.value) }}
-        </text>
-      </svg>
-    </div>
-
-    <div class="grid min-w-0 gap-2 text-sm">
-      <div
-        v-for="segment in segments"
-        :key="`legend-${segment.id}`"
-        class="grid min-h-[34px] min-w-0 grid-cols-[1fr_auto] items-center gap-3"
-      >
-        <div class="flex min-w-0 items-center gap-2">
-          <span
-            class="h-2.5 w-2.5 shrink-0 rounded-full"
-            :style="{ backgroundColor: segment.color }"
-          />
-
-          <span class="truncate text-lightNavbarText dark:text-darkNavbarText">
-            {{ segment.shortLabel }}
-          </span>
-        </div>
-
-        <div class="text-right">
-          <div class="font-semibold text-lightNavbarText dark:text-darkNavbarText">
-            {{ formatChartValue(segment.value) }}
-          </div>
-
-          <div class="text-xs text-lightListTableText dark:text-darkListTableText">
-            {{ segment.percentLabel }}
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>

package/{custom/widgets/chart/line → dist/custom/widgets/chart}/LineChart.vue

@@ -84,7 +84,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,
@@ -92,7 +92,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/{pie/PieChart.vue → PieChart.vue}

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

package/{custom/widgets/chart/stacked-bar → dist/custom/widgets/chart}/StackedBarChart.vue

@@ -1,6 +1,101 @@
+<template>
+  <div
+    ref="rootEl"
+    class="grid h-full min-h-0 w-full grid-rows-[auto_minmax(0,1fr)] gap-3 overflow-hidden"
+  >
+    <div
+      v-if="showLegend"
+      class="flex flex-wrap items-center gap-3 text-xs text-lightListTableText dark:text-darkListTableText"
+      :class="isCompact ? 'justify-start' : 'justify-end'"
+    >
+      <div
+        v-for="series in normalizedSeries"
+        :key="series.name"
+        class="flex items-center gap-1.5"
+      >
+        <span
+          class="h-2.5 w-2.5 rounded-full"
+          :style="{ backgroundColor: series.color }"
+        />
+        <span>{{ series.name }}</span>
+      </div>
+    </div>
+
+    <div
+      ref="svgEl"
+      class="min-h-0 overflow-hidden"
+    >
+      <svg
+        v-if="chartWidth > 0 && chartHeight > 0"
+        class="block h-full w-full"
+        :viewBox="`0 0 ${chartWidth} ${chartHeight}`"
+        role="img"
+        :aria-label="xField"
+      >
+        <g class="text-lightListTableText dark:text-darkListTableText">
+          <line
+            v-for="tick in yTicks"
+            :key="tick.y"
+            :x1="padding.left"
+            :x2="chartWidth - padding.right"
+            :y1="tick.y"
+            :y2="tick.y"
+            stroke="currentColor"
+            stroke-opacity="0.14"
+          />
+          <text
+            v-for="tick in yTicks"
+            :key="`label-${tick.y}`"
+            :x="padding.left - 8"
+            :y="tick.y + 4"
+            fill="currentColor"
+            font-size="11"
+            text-anchor="end"
+          >
+            {{ formatChartValue(tick.value) }}
+          </text>
+        </g>
+
+        <g
+          v-for="(bar, barIndex) in bars"
+          :key="bar.label"
+        >
+          <rect
+            v-for="segment in bar.segments"
+            :key="segment.id"
+            v-show="segment.height > 0"
+            :x="bar.x"
+            :y="segment.y"
+            :width="barWidth"
+            :height="segment.height"
+            :fill="segment.color"
+            rx="3"
+          >
+            <title>{{ getBarTooltip(bar) }}</title>
+          </rect>
+
+          <text
+            v-if="visibleLabelIndexes.has(barIndex)"
+            :x="bar.x + barWidth / 2"
+            :y="padding.top + innerHeight + 24"
+            fill="currentColor"
+            font-size="11"
+            text-anchor="middle"
+            class="text-lightListTableText dark:text-darkListTableText"
+          >
+            {{ bar.axisLabel }}
+          </text>
+        </g>
+      </svg>
+    </div>
+  </div>
+</template>
+
+
+
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useElementSize } from '../../../composables/useElementSize.js'
+import { useElementSize } from '../../composables/useElementSize.js'
 import {
   CHART_COLORS,
   formatChartAxisLabel,
@@ -8,7 +103,7 @@ import {
   formatChartValue,
   getChartYAxisWidth,
   toFiniteNumber,
-} from '../chart.utils.js'
+} from './chart.utils.js'
 
 const props = withDefaults(defineProps<{
   rows: Record<string, unknown>[]
@@ -146,96 +241,3 @@ function getBarTooltip(bar: { label: string, total: number, segments: Array<{ na
   ].join('\n')
 }
 </script>
-
-<template>
-  <div
-    ref="rootEl"
-    class="grid h-full min-h-0 w-full grid-rows-[auto_minmax(0,1fr)] gap-3 overflow-hidden"
-  >
-    <div
-      v-if="showLegend"
-      class="flex flex-wrap items-center gap-3 text-xs text-lightListTableText dark:text-darkListTableText"
-      :class="isCompact ? 'justify-start' : 'justify-end'"
-    >
-      <div
-        v-for="series in normalizedSeries"
-        :key="series.name"
-        class="flex items-center gap-1.5"
-      >
-        <span
-          class="h-2.5 w-2.5 rounded-full"
-          :style="{ backgroundColor: series.color }"
-        />
-        <span>{{ series.name }}</span>
-      </div>
-    </div>
-
-    <div
-      ref="svgEl"
-      class="min-h-0 overflow-hidden"
-    >
-      <svg
-        v-if="chartWidth > 0 && chartHeight > 0"
-        class="block h-full w-full"
-        :viewBox="`0 0 ${chartWidth} ${chartHeight}`"
-        role="img"
-        :aria-label="xField"
-      >
-        <g class="text-lightListTableText dark:text-darkListTableText">
-          <line
-            v-for="tick in yTicks"
-            :key="tick.y"
-            :x1="padding.left"
-            :x2="chartWidth - padding.right"
-            :y1="tick.y"
-            :y2="tick.y"
-            stroke="currentColor"
-            stroke-opacity="0.14"
-          />
-          <text
-            v-for="tick in yTicks"
-            :key="`label-${tick.y}`"
-            :x="padding.left - 8"
-            :y="tick.y + 4"
-            fill="currentColor"
-            font-size="11"
-            text-anchor="end"
-          >
-            {{ formatChartValue(tick.value) }}
-          </text>
-        </g>
-
-        <g
-          v-for="(bar, barIndex) in bars"
-          :key="bar.label"
-        >
-          <rect
-            v-for="segment in bar.segments"
-            :key="segment.id"
-            v-show="segment.height > 0"
-            :x="bar.x"
-            :y="segment.y"
-            :width="barWidth"
-            :height="segment.height"
-            :fill="segment.color"
-            rx="3"
-          >
-            <title>{{ getBarTooltip(bar) }}</title>
-          </rect>
-
-          <text
-            v-if="visibleLabelIndexes.has(barIndex)"
-            :x="bar.x + barWidth / 2"
-            :y="padding.top + innerHeight + 24"
-            fill="currentColor"
-            font-size="11"
-            text-anchor="middle"
-            class="text-lightListTableText dark:text-darkListTableText"
-          >
-            {{ bar.axisLabel }}
-          </text>
-        </g>
-      </svg>
-    </div>
-  </div>
-</template>

package/dist/custom/widgets/chart/chart.types.d.ts

@@ -27,5 +27,3 @@ export type ChartWidgetConfig = {
     color?: string;
     colors?: string[];
 };
-export type NormalizedChartWidgetConfig = ChartWidgetConfig;
-export declare function normalizeChartWidgetConfig(value: unknown): NormalizedChartWidgetConfig | undefined;

package/dist/custom/widgets/chart/chart.types.js

@@ -1,25 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.normalizeChartWidgetConfig = normalizeChartWidgetConfig;
-function normalizeChartWidgetConfig(value) {
-    if (!isRecord(value) || !normalizeChartWidgetType(value.type)) {
-        return undefined;
-    }
-    return value;
-}
-function normalizeChartWidgetType(value) {
-    switch (value) {
-        case 'line':
-        case 'pie':
-        case 'bar':
-        case 'stacked_bar':
-        case 'funnel':
-        case 'histogram':
-            return value;
-        default:
-            return undefined;
-    }
-}
-function isRecord(value) {
-    return typeof value === 'object' && value !== null;
-}
+export {};

package/dist/custom/widgets/chart/chart.types.ts

@@ -38,31 +38,3 @@ export type ChartWidgetConfig = {
   color?: string
   colors?: string[]
 }
-
-export type NormalizedChartWidgetConfig = ChartWidgetConfig
-
-export function normalizeChartWidgetConfig(value: unknown): NormalizedChartWidgetConfig | undefined {
-  if (!isRecord(value) || !normalizeChartWidgetType(value.type)) {
-    return undefined
-  }
-
-  return value as ChartWidgetConfig
-}
-
-function normalizeChartWidgetType(value: unknown): ChartWidgetType | undefined {
-  switch (value) {
-    case 'line':
-    case 'pie':
-    case 'bar':
-    case 'stacked_bar':
-    case 'funnel':
-    case 'histogram':
-      return value
-    default:
-      return undefined
-  }
-}
-
-function isRecord(value: unknown): value is Record<string, unknown> {
-  return typeof value === 'object' && value !== null
-}

package/dist/custom/widgets/chart/chart.utils.js

@@ -1,12 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CHART_COLORS = void 0;
-exports.toFiniteNumber = toFiniteNumber;
-exports.formatChartValue = formatChartValue;
-exports.getChartYAxisWidth = getChartYAxisWidth;
-exports.formatChartLabel = formatChartLabel;
-exports.formatChartAxisLabel = formatChartAxisLabel;
-exports.CHART_COLORS = [
+export const CHART_COLORS = [
     '#2563eb',
     '#16a34a',
     '#f97316',
@@ -16,20 +8,20 @@ exports.CHART_COLORS = [
     '#ca8a04',
     '#db2777',
 ];
-function toFiniteNumber(value) {
+export function toFiniteNumber(value) {
     const numberValue = typeof value === 'number' ? value : Number(value);
     return Number.isFinite(numberValue) ? numberValue : 0;
 }
-function formatChartValue(value, options = {}) {
+export function formatChartValue(value, options = {}) {
     return new Intl.NumberFormat(undefined, options).format(value);
 }
-function getChartYAxisWidth(values, chartWidth) {
+export function getChartYAxisWidth(values, chartWidth) {
     const maxLabelLength = Math.max(...values.map((value) => formatChartValue(value).length), 1);
     const estimatedWidth = Math.ceil(maxLabelLength * 6.5) + 18;
     const responsiveMaxWidth = Math.max(Math.floor(chartWidth * 0.36), 38);
     return Math.min(Math.max(estimatedWidth, 38), responsiveMaxWidth, 120);
 }
-function formatChartLabel(value) {
+export function formatChartLabel(value) {
     if (typeof value !== 'string') {
         return String(value);
     }
@@ -43,7 +35,7 @@ function formatChartLabel(value) {
         day: '2-digit',
     }).format(new Date(timestamp));
 }
-function formatChartAxisLabel(value, maxLength = 12) {
+export function formatChartAxisLabel(value, maxLength = 12) {
     const rawLabel = typeof value === 'string' ? value : String(value);
     const timestamp = Date.parse(rawLabel);
     const label = Number.isFinite(timestamp)

package/dist/custom/widgets/registry.js

@@ -1,47 +1,39 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.widgetRegistry = void 0;
-exports.getWidgetRegistration = getWidgetRegistration;
-exports.getWidgetLabel = getWidgetLabel;
-const ChartWidget_vue_1 = __importDefault(require("./chart/ChartWidget.vue"));
-const GaugeCardWidget_vue_1 = __importDefault(require("./gauge-card/GaugeCardWidget.vue"));
-const KpiCardWidget_vue_1 = __importDefault(require("./kpi-card/KpiCardWidget.vue"));
-const PivotTableWidget_vue_1 = __importDefault(require("./pivot-table/PivotTableWidget.vue"));
-const TableWidget_vue_1 = __importDefault(require("./table/TableWidget.vue"));
-exports.widgetRegistry = [
+import ChartWidget from './chart/ChartWidget.vue';
+import GaugeCardWidget from './gauge-card/GaugeCardWidget.vue';
+import KpiCardWidget from './kpi-card/KpiCardWidget.vue';
+import PivotTableWidget from './pivot-table/PivotTableWidget.vue';
+import TableWidget from './table/TableWidget.vue';
+export const widgetRegistry = [
     {
         type: 'table',
         label: 'Table',
-        component: TableWidget_vue_1.default,
+        component: TableWidget,
     },
     {
         type: 'chart',
         label: 'Chart',
-        component: ChartWidget_vue_1.default,
+        component: ChartWidget,
     },
     {
         type: 'kpi_card',
         label: 'KPI Card',
-        component: KpiCardWidget_vue_1.default,
+        component: KpiCardWidget,
     },
     {
         type: 'pivot_table',
         label: 'Pivot Table',
-        component: PivotTableWidget_vue_1.default,
+        component: PivotTableWidget,
     },
     {
         type: 'gauge_card',
         label: 'Gauge Card',
-        component: GaugeCardWidget_vue_1.default,
+        component: GaugeCardWidget,
     },
 ];
-function getWidgetRegistration(type) {
-    return exports.widgetRegistry.find((widget) => widget.type === type);
+export function getWidgetRegistration(type) {
+    return widgetRegistry.find((widget) => widget.type === type);
 }
-function getWidgetLabel(type) {
+export function getWidgetLabel(type) {
     var _a;
     return ((_a = getWidgetRegistration(type)) === null || _a === void 0 ? void 0 : _a.label) || type.replaceAll('_', ' ');
 }

package/dist/endpoint/dashboard.d.ts

@@ -1,12 +1,11 @@
 import type { AdminUser, IHttpServer } from 'adminforth';
-import type { DashboardConfig, DashboardWidgetConfig } from '../custom/model/dashboard.types.js';
-import type { DashboardWidgetConfigValidationError } from '../schema/widget.js';
+import type { DashboardConfig } from '../custom/model/dashboard.types.js';
 import type { DashboardRecord, PersistedDashboardResponse } from '../services/dashboardConfigService.js';
 type DashboardEndpointsContext = {
     canEditDashboard: (adminUser: AdminUser) => boolean;
     getDashboardRecord: (slug: string) => Promise<DashboardRecord | null>;
+    parseStoredDashboardConfig: (config: unknown) => DashboardConfig;
     persistDashboardConfig: (dashboard: DashboardRecord, config: DashboardConfig) => Promise<PersistedDashboardResponse>;
-    validateDashboardWidgetApiConfig: (widget: DashboardWidgetConfig) => DashboardWidgetConfigValidationError[];
 };
 export declare function registerDashboardEndpoints(server: IHttpServer, ctx: DashboardEndpointsContext): void;
 export {};

package/dist/endpoint/dashboard.js

@@ -7,15 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { normalizeDashboardConfig } from '../custom/model/dashboard.types.js';
-import { DashboardApiResponseSchema, DashboardConfigZodSchema, SetDashboardConfigRequestSchema, SlugRequestSchema, } from '../schema/api.js';
-import { buildDashboardResponse } from '../services/dashboardConfigService.js';
-function formatDashboardConfigValidationErrors(error) {
-    return error.issues.map((issue) => ({
-        field: issue.path.length ? issue.path.map(String).join('.') : 'config',
-        message: issue.message,
-    }));
-}
+import { DashboardApiResponseSchema, SetDashboardConfigRequestSchema, SlugRequestSchema, } from '../schema/api.js';
 export function registerDashboardEndpoints(server, ctx) {
     server.endpoint({
         method: 'POST',
@@ -24,13 +16,18 @@ export function registerDashboardEndpoints(server, ctx) {
         request_schema: SlugRequestSchema,
         response_schema: DashboardApiResponseSchema,
         handler: (_a) => __awaiter(this, [_a], void 0, function* ({ body, response }) {
-            const slug = String((body === null || body === void 0 ? void 0 : body.slug) || 'default');
-            const dashboard = yield ctx.getDashboardRecord(slug);
+            const dashboard = yield ctx.getDashboardRecord(body.slug);
             if (!dashboard) {
                 response.setStatus(404);
                 return { error: 'Dashboard not found' };
             }
-            return buildDashboardResponse(dashboard);
+            return {
+                id: dashboard.id,
+                slug: dashboard.slug,
+                label: dashboard.label,
+                revision: dashboard.revision,
+                config: ctx.parseStoredDashboardConfig(dashboard.config),
+            };
         }),
     });
     server.endpoint({
@@ -44,30 +41,13 @@ export function registerDashboardEndpoints(server, ctx) {
                 response.setStatus(403);
                 return { error: 'Dashboard edit is not allowed' };
             }
-            const slug = String((body === null || body === void 0 ? void 0 : body.slug) || 'default');
-            const dashboard = yield ctx.getDashboardRecord(slug);
+            const dashboard = yield ctx.getDashboardRecord(body.slug);
             if (!dashboard) {
                 response.setStatus(404);
                 return { error: 'Dashboard not found' };
             }
-            const normalizedConfig = normalizeDashboardConfig(body === null || body === void 0 ? void 0 : body.config);
-            const parsedConfig = DashboardConfigZodSchema.safeParse(normalizedConfig);
-            if (!parsedConfig.success) {
-                response.setStatus(422);
-                return {
-                    error: 'Invalid dashboard config',
-                    validationErrors: formatDashboardConfigValidationErrors(parsedConfig.error),
-                };
-            }
-            const widgetValidationErrors = parsedConfig.data.widgets.flatMap((widget, index) => (ctx.validateDashboardWidgetApiConfig(widget).map((error) => (Object.assign(Object.assign({}, error), { field: `widgets.${index}.${error.field}` })))));
-            if (widgetValidationErrors.length) {
-                response.setStatus(422);
-                return {
-                    error: 'Invalid dashboard config',
-                    validationErrors: widgetValidationErrors,
-                };
-            }
-            return ctx.persistDashboardConfig(dashboard, parsedConfig.data);
+            const config = body.config;
+            return ctx.persistDashboardConfig(dashboard, config);
         }),
     });
 }