@adminforth/dashboard 1.4.0 → 1.4.2

package/{dist/custom/widgets/chart/line → 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/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/{dist/custom/widgets/chart/stacked-bar → 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/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/api/dashboardApi.d.ts

@@ -1,8 +1,4 @@
-import type { DashboardConfig, DashboardGroupConfig, DashboardGroupMoveDirection, DashboardWidgetConfig, DashboardWidgetMoveDirection } from '../model/dashboard.types.js';
-export type DashboardWidgetConfigValidationError = {
-    field: string;
-    message: string;
-};
+import type { DashboardConfig, EditableDashboardGroupConfig, DashboardGroupMoveDirection, DashboardWidgetConfig, DashboardWidgetConfigValidationError, DashboardWidgetMoveDirection } from '../model/dashboard.types.js';
 export type DashboardResponse = {
     id: string;
     slug: string;
@@ -26,14 +22,14 @@ export declare class DashboardApiError extends Error {
 }
 export declare const dashboardApi: {
     getDashboardConfig(slug: string): Promise<DashboardResponse>;
-    setDashboardConfig(slug: string, config: DashboardConfig): Promise<DashboardResponse>;
+    setDashboardConfig(slug: string, config: unknown): Promise<DashboardResponse>;
     addDashboardGroup(slug: string): Promise<DashboardResponse>;
     moveDashboardGroup(slug: string, groupId: string, direction: DashboardGroupMoveDirection): Promise<DashboardResponse>;
     removeDashboardGroup(slug: string, groupId: string): Promise<DashboardResponse>;
-    setDashboardGroupConfig(slug: string, groupId: string, config: DashboardGroupConfig): Promise<DashboardResponse>;
+    setDashboardGroupConfig(slug: string, groupId: string, config: EditableDashboardGroupConfig): Promise<DashboardResponse>;
     addDashboardWidget(slug: string, groupId: string): Promise<DashboardResponse>;
     moveDashboardWidget(slug: string, widgetId: string, direction: DashboardWidgetMoveDirection): Promise<DashboardResponse>;
     removeDashboardWidget(slug: string, widgetId: string): Promise<DashboardResponse>;
-    setWidgetConfig(slug: string, widgetId: string, config: DashboardWidgetConfig): Promise<DashboardResponse>;
+    setWidgetConfig(slug: string, widgetId: string, config: unknown): Promise<DashboardResponse>;
     getDashboardWidgetData(slug: string, widgetId: string, request?: DashboardWidgetDataRequest): Promise<DashboardWidgetDataResponse>;
 };

package/dist/custom/api/dashboardApi.js

@@ -1,4 +1,3 @@
-"use strict";
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -8,16 +7,13 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.dashboardApi = exports.DashboardApiError = void 0;
-class DashboardApiError extends Error {
+export class DashboardApiError extends Error {
     constructor(message, validationErrors = []) {
         super(message);
         this.name = 'DashboardApiError';
         this.validationErrors = validationErrors;
     }
 }
-exports.DashboardApiError = DashboardApiError;
 function normalizeValidationErrors(response) {
     if (Array.isArray(response === null || response === void 0 ? void 0 : response.validationErrors)) {
         return response.validationErrors;
@@ -97,7 +93,7 @@ function callDashboardWidgetDataApi(path, body) {
         };
     });
 }
-exports.dashboardApi = {
+export const dashboardApi = {
     getDashboardConfig(slug) {
         return __awaiter(this, void 0, void 0, function* () {
             return callDashboardApi('/adminapi/v1/dashboard/get-config', { slug });

package/dist/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/dist/custom/composables/useElementSize.js

@@ -1,14 +1,11 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useElementSize = useElementSize;
-const vue_1 = require("vue");
-function useElementSize() {
-    const el = (0, vue_1.shallowRef)(null);
-    const width = (0, vue_1.ref)(0);
-    const height = (0, vue_1.ref)(0);
+import { onBeforeUnmount, onMounted, ref, shallowRef } from 'vue';
+export function useElementSize() {
+    const el = shallowRef(null);
+    const width = ref(0);
+    const height = ref(0);
     let observer;
     let frameId;
-    (0, vue_1.onMounted)(() => {
+    onMounted(() => {
         observer = new ResizeObserver(([entry]) => {
             if (!entry) {
                 return;
@@ -28,7 +25,7 @@ function useElementSize() {
             observer.observe(el.value);
         }
     });
-    (0, vue_1.onBeforeUnmount)(() => {
+    onBeforeUnmount(() => {
         if (frameId !== undefined) {
             cancelAnimationFrame(frameId);
         }

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

@@ -4,24 +4,32 @@ export type DashboardConfig = {
     groups: DashboardGroupConfig[];
     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;
     label: string;
     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' | 'currency' | 'percent' | 'percent_delta' | 'number_delta' | 'currency_delta';
 export type WidgetLayout = {
     size?: DashboardWidgetSize;
     width?: number;
-    minWidth?: number;
-    maxWidth?: number | null;
+    min_width?: number;
+    max_width?: number | null;
     height?: number;
 };
 export type WidgetBaseConfig = {
@@ -32,8 +40,8 @@ export type WidgetBaseConfig = {
     size?: DashboardWidgetSize;
     width?: number;
     height?: number;
-    minWidth?: number;
-    maxWidth?: number | null;
+    min_width?: number;
+    max_width?: number | null;
     order: number;
 };
 export type FilterExpression = {
@@ -42,16 +50,16 @@ export type FilterExpression = {
     or: 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 = {
     field: string;
@@ -83,19 +91,19 @@ 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;
@@ -106,7 +114,7 @@ export type QueryConfig = {
         }>;
     };
     calcs?: QueryCalcSelectItem[];
-    formatting?: Record<string, unknown>;
+    formatting?: Record<string, JsonValue>;
 };
 export type FunnelQueryConfig = {
     steps: FunnelQueryStep[];
@@ -126,7 +134,7 @@ export type FieldRef = string | {
 export type TableViewConfig = {
     columns?: FieldRef[];
     pagination?: boolean;
-    pageSize?: number;
+    page_size?: number;
 };
 export type KpiCardViewConfig = {
     title?: string;
@@ -140,8 +148,8 @@ export type KpiCardViewConfig = {
         text?: string;
         field?: string;
     };
-    comparison?: unknown;
-    sparkline?: unknown;
+    comparison?: JsonValue;
+    sparkline?: JsonValue;
 };
 export type GaugeCardViewConfig = {
     title?: string;
@@ -157,9 +165,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;
@@ -203,6 +211,7 @@ export type PivotTableWidgetConfig = WidgetBaseConfig & {
     query: QueryConfig;
 };
 export type DashboardWidgetConfig = EmptyWidgetConfig | TableWidgetConfig | ChartDashboardWidgetConfig | KpiCardWidgetConfig | 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[];
@@ -227,8 +236,5 @@ export type DashboardWidgetAggregateData = {
     };
 };
 export type DashboardWidgetData = DashboardWidgetTableData | DashboardWidgetAggregateData;
-export declare function normalizeDashboardConfig(config: unknown): DashboardConfig;
-export declare function normalizeDashboardWidgetConfig(config: unknown): unknown;
-export declare function serializeDashboardWidgetConfigForEditor(widget: DashboardWidgetConfig): Record<string, unknown>;
+export declare function serializeDashboardWidgetConfigForEditor(widget: DashboardWidgetConfig): unknown;
 export declare function getFieldRefField(value: FieldRef | undefined): string | undefined;
-export declare function getFieldRefLabel(value: FieldRef | undefined): string | undefined;