@adminforth/dashboard 1.11.2 → 1.12.1

package/custom/widgets/chart/StackedBarChart.vue

@@ -1,7 +1,8 @@
 <template>
   <div
     ref="rootEl"
-    class="grid h-full min-h-0 w-full grid-rows-[auto_minmax(0,1fr)] gap-3 overflow-hidden"
+    class="relative grid h-full min-h-0 w-full grid-rows-[auto_minmax(0,1fr)] gap-3 overflow-hidden"
+    @mouseleave="hideTooltip"
   >
     <div
       v-if="showLegend"
@@ -70,9 +71,9 @@
             :height="segment.height"
             :fill="segment.color"
             rx="3"
-          >
-            <title>{{ getBarTooltip(bar) }}</title>
-          </rect>
+            @mouseenter="showTooltip($event, bar)"
+            @mousemove="moveTooltip($event)"
+          />
 
           <text
             v-if="visibleLabelIndexes.has(barIndex)"
@@ -88,13 +89,29 @@
         </g>
       </svg>
     </div>
+
+    <Teleport to="body">
+      <div
+        v-if="tooltip"
+        class="pointer-events-none fixed z-[1000] min-w-44 rounded border border-lightTableBorder bg-lightTableBackground px-3 py-2 text-xs leading-5 text-lightListTableText shadow-lg dark:border-darkTableBorder dark:bg-darkTableBackground dark:text-darkListTableText"
+        :style="{ left: `${tooltip.x}px`, top: `${tooltip.y}px` }"
+      >
+        <div
+          v-for="line in tooltip.lines"
+          :key="line"
+          class="whitespace-nowrap"
+        >
+          {{ line }}
+        </div>
+      </div>
+    </Teleport>
   </div>
 </template>
 
 
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { useElementSize } from '../../composables/useElementSize.js'
 import {
   CHART_COLORS,
@@ -120,6 +137,17 @@ const { el: rootEl, width: rootWidth } = useElementSize<HTMLDivElement>()
 const { el: svgEl, width: svgWidth, height: svgHeight } = useElementSize<HTMLDivElement>()
 
 const barGap = 10
+type StackedBarTooltipBar = {
+  label: string
+  total: number
+  segments: Array<{ name: string, value: number }>
+}
+
+const tooltip = ref<{
+  x: number
+  y: number
+  lines: string[]
+} | null>(null)
 const seriesNames = computed(() => Array.from(new Set(props.rows.map((row) => formatSeriesLabel(row[props.seriesField])))))
 const normalizedSeries = computed(() => seriesNames.value.map((name, index) => ({
   name,
@@ -223,7 +251,36 @@ const yTicks = computed(() => [0, 0.5, 1].map((ratio) => ({
   y: padding.value.top + innerHeight.value * ratio,
 })))
 
-function getBarTooltip(bar: { label: string, total: number, segments: Array<{ name: string, value: number }> }) {
+function showTooltip(event: MouseEvent, bar: StackedBarTooltipBar) {
+  tooltip.value = {
+    ...getTooltipPosition(event),
+    lines: getBarTooltipLines(bar),
+  }
+}
+
+function moveTooltip(event: MouseEvent) {
+  if (!tooltip.value) {
+    return
+  }
+
+  tooltip.value = {
+    ...tooltip.value,
+    ...getTooltipPosition(event),
+  }
+}
+
+function hideTooltip() {
+  tooltip.value = null
+}
+
+function getTooltipPosition(event: MouseEvent) {
+  return {
+    x: event.clientX + 12,
+    y: event.clientY + 12,
+  }
+}
+
+function getBarTooltipLines(bar: StackedBarTooltipBar) {
   const percentFormatter = new Intl.NumberFormat(undefined, { maximumFractionDigits: 1 })
 
   const segmentLines = bar.segments.map((segment) => {
@@ -238,7 +295,7 @@ function getBarTooltip(bar: { label: string, total: number, segments: Array<{ na
     `${bar.label}`,
     `Total: ${formatChartValue(bar.total)}`,
     ...segmentLines,
-  ].join('\n')
+  ]
 }
 
 function formatSeriesLabel(value: unknown) {

package/dist/custom/api/dashboardApi.js

@@ -15,18 +15,67 @@ export class DashboardApiError extends Error {
     }
 }
 function normalizeValidationErrors(response) {
-    if (Array.isArray(response === null || response === void 0 ? void 0 : response.validationErrors)) {
-        return response.validationErrors;
+    const errors = Array.isArray(response === null || response === void 0 ? void 0 : response.validationErrors)
+        ? response.validationErrors
+        : Array.isArray(response === null || response === void 0 ? void 0 : response.details)
+            ? response.details.map((detail) => ({
+                field: getValidationErrorField(detail),
+                message: String(detail.message || 'Invalid value'),
+            }))
+            : [];
+    return simplifyValidationErrors(errors);
+}
+function getValidationErrorField(detail) {
+    return Array.isArray(detail.instancePath)
+        ? detail.instancePath.join('.')
+        : String(detail.instancePath || detail.path || 'config').replace(/^\//, '').replaceAll('/', '.');
+}
+function simplifyValidationErrors(errors) {
+    const collapsed = new Map();
+    for (const error of errors) {
+        const selectItemMatch = error.field.match(/^config\.query\.select\.(\d+)$/);
+        if (selectItemMatch) {
+            const field = error.field;
+            collapsed.set(field, {
+                field,
+                message: 'must be a valid select item: field, aggregate, or calc',
+            });
+            continue;
+        }
+        if (isUnionBranchNoise(error)) {
+            continue;
+        }
+        const key = `${error.field}:${error.message}`;
+        collapsed.set(key, error);
     }
-    if (Array.isArray(response === null || response === void 0 ? void 0 : response.details)) {
-        return response.details.map((detail) => ({
-            field: Array.isArray(detail.instancePath)
-                ? detail.instancePath.join('.')
-                : String(detail.instancePath || detail.path || 'config').replace(/^\//, '').replaceAll('/', '.'),
-            message: String(detail.message || 'Invalid value'),
-        }));
+    const simplifiedErrors = Array.from(collapsed.values());
+    if (simplifiedErrors.length) {
+        return simplifiedErrors;
+    }
+    return dedupeValidationErrors(errors).filter((error) => error.message !== 'must match a schema in anyOf').slice(0, 5);
+}
+function dedupeValidationErrors(errors) {
+    const deduped = new Map();
+    for (const error of errors) {
+        deduped.set(`${error.field}:${error.message}`, error);
+    }
+    return Array.from(deduped.values());
+}
+function isUnionBranchNoise(error) {
+    if (error.field !== 'config') {
+        return false;
     }
-    return [];
+    return error.message === 'must NOT have additional properties'
+        || error.message === 'must match a schema in anyOf'
+        || error.message === 'must match exactly one schema in oneOf'
+        || error.message === 'must have required property \'chart\''
+        || error.message === 'must have required property "chart"'
+        || error.message === 'must have required property \'card\''
+        || error.message === 'must have required property "card"'
+        || error.message === 'must have required property \'table\''
+        || error.message === 'must have required property "table"'
+        || error.message === 'must have required property \'pivot\''
+        || error.message === 'must have required property "pivot"';
 }
 function parseDashboardResponse(rawResponse) {
     return __awaiter(this, void 0, void 0, function* () {

package/dist/custom/api/dashboardApi.ts

@@ -62,20 +62,82 @@ export class DashboardApiError extends Error {
 }
 
 function normalizeValidationErrors(response: any): DashboardWidgetConfigValidationError[] {
-  if (Array.isArray(response?.validationErrors)) {
-    return response.validationErrors
+  const errors = Array.isArray(response?.validationErrors)
+    ? response.validationErrors
+    : Array.isArray(response?.details)
+      ? response.details.map((detail: any) => ({
+        field: getValidationErrorField(detail),
+        message: String(detail.message || 'Invalid value'),
+      }))
+      : []
+
+  return simplifyValidationErrors(errors)
+}
+
+function getValidationErrorField(detail: any) {
+  return Array.isArray(detail.instancePath)
+    ? detail.instancePath.join('.')
+    : String(detail.instancePath || detail.path || 'config').replace(/^\//, '').replaceAll('/', '.')
+}
+
+function simplifyValidationErrors(errors: DashboardWidgetConfigValidationError[]) {
+  const collapsed = new Map<string, DashboardWidgetConfigValidationError>()
+
+  for (const error of errors) {
+    const selectItemMatch = error.field.match(/^config\.query\.select\.(\d+)$/)
+
+    if (selectItemMatch) {
+      const field = error.field
+      collapsed.set(field, {
+        field,
+        message: 'must be a valid select item: field, aggregate, or calc',
+      })
+      continue
+    }
+
+    if (isUnionBranchNoise(error)) {
+      continue
+    }
+
+    const key = `${error.field}:${error.message}`
+    collapsed.set(key, error)
   }
 
-  if (Array.isArray(response?.details)) {
-    return response.details.map((detail: any) => ({
-      field: Array.isArray(detail.instancePath)
-        ? detail.instancePath.join('.')
-        : String(detail.instancePath || detail.path || 'config').replace(/^\//, '').replaceAll('/', '.'),
-      message: String(detail.message || 'Invalid value'),
-    }))
+  const simplifiedErrors = Array.from(collapsed.values())
+
+  if (simplifiedErrors.length) {
+    return simplifiedErrors
+  }
+
+  return dedupeValidationErrors(errors).filter((error) => error.message !== 'must match a schema in anyOf').slice(0, 5)
+}
+
+function dedupeValidationErrors(errors: DashboardWidgetConfigValidationError[]) {
+  const deduped = new Map<string, DashboardWidgetConfigValidationError>()
+
+  for (const error of errors) {
+    deduped.set(`${error.field}:${error.message}`, error)
+  }
+
+  return Array.from(deduped.values())
+}
+
+function isUnionBranchNoise(error: DashboardWidgetConfigValidationError) {
+  if (error.field !== 'config') {
+    return false
   }
 
-  return []
+  return error.message === 'must NOT have additional properties'
+    || error.message === 'must match a schema in anyOf'
+    || error.message === 'must match exactly one schema in oneOf'
+    || error.message === 'must have required property \'chart\''
+    || error.message === 'must have required property "chart"'
+    || error.message === 'must have required property \'card\''
+    || error.message === 'must have required property "card"'
+    || error.message === 'must have required property \'table\''
+    || error.message === 'must have required property "table"'
+    || error.message === 'must have required property \'pivot\''
+    || error.message === 'must have required property "pivot"'
 }
 
 async function parseDashboardResponse(rawResponse: Response) {

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

@@ -113,6 +113,14 @@ export type ResourceQueryConfig = {
     calcs?: QueryCalcSelectItem[];
     formatting?: Record<string, JsonValue>;
 };
+export type QueryBucketConfig = {
+    field: string;
+    buckets: Array<{
+        label: string;
+        min?: number;
+        max?: number;
+    }>;
+};
 export type StepsQueryStepConfig = {
     name: string;
     resource: string;
@@ -122,6 +130,7 @@ export type StepsQueryStepConfig = {
 export type StepsQueryConfig = {
     source: 'steps';
     steps: StepsQueryStepConfig[];
+    bucket?: QueryBucketConfig;
     calcs?: QueryCalcSelectItem[];
     order_by?: QueryOrderByItem[];
     limit?: number;

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

@@ -140,6 +140,11 @@ export type ResourceQueryConfig = {
   formatting?: Record<string, JsonValue>
 }
 
+export type QueryBucketConfig = {
+  field: string
+  buckets: Array<{ label: string, min?: number, max?: number }>
+}
+
 export type StepsQueryStepConfig = {
   name: string
   resource: string
@@ -150,6 +155,7 @@ export type StepsQueryStepConfig = {
 export type StepsQueryConfig = {
   source: 'steps'
   steps: StepsQueryStepConfig[]
+  bucket?: QueryBucketConfig
   calcs?: QueryCalcSelectItem[]
   order_by?: QueryOrderByItem[]
   limit?: number

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

@@ -106,6 +106,14 @@ export declare function useDashboardConfig(slug: Ref<string>): {
                         }[];
                         filters?: any;
                     }[];
+                    bucket?: {
+                        field: string;
+                        buckets: {
+                            label: string;
+                            min?: number | undefined;
+                            max?: number | undefined;
+                        }[];
+                    } | undefined;
                     calcs?: {
                         calc: string;
                         as: string;
@@ -231,6 +239,14 @@ export declare function useDashboardConfig(slug: Ref<string>): {
                         }[];
                         filters?: any;
                     }[];
+                    bucket?: {
+                        field: string;
+                        buckets: {
+                            label: string;
+                            min?: number | undefined;
+                            max?: number | undefined;
+                        }[];
+                    } | undefined;
                     calcs?: {
                         calc: string;
                         as: string;
@@ -352,6 +368,14 @@ export declare function useDashboardConfig(slug: Ref<string>): {
                         }[];
                         filters?: any;
                     }[];
+                    bucket?: {
+                        field: string;
+                        buckets: {
+                            label: string;
+                            min?: number | undefined;
+                            max?: number | undefined;
+                        }[];
+                    } | undefined;
                     calcs?: {
                         calc: string;
                         as: string;
@@ -458,6 +482,14 @@ export declare function useDashboardConfig(slug: Ref<string>): {
                         }[];
                         filters?: any;
                     }[];
+                    bucket?: {
+                        field: string;
+                        buckets: {
+                            label: string;
+                            min?: number | undefined;
+                            max?: number | undefined;
+                        }[];
+                    } | undefined;
                     calcs?: {
                         calc: string;
                         as: string;
@@ -561,6 +593,14 @@ export declare function useDashboardConfig(slug: Ref<string>): {
                         }[];
                         filters?: any;
                     }[];
+                    bucket?: {
+                        field: string;
+                        buckets: {
+                            label: string;
+                            min?: number | undefined;
+                            max?: number | undefined;
+                        }[];
+                    } | undefined;
                     calcs?: {
                         calc: string;
                         as: string;
@@ -681,6 +721,14 @@ export declare function useDashboardConfig(slug: Ref<string>): {
                         }[];
                         filters?: any;
                     }[];
+                    bucket?: {
+                        field: string;
+                        buckets: {
+                            label: string;
+                            min?: number | undefined;
+                            max?: number | undefined;
+                        }[];
+                    } | undefined;
                     calcs?: {
                         calc: string;
                         as: string;
@@ -806,6 +854,14 @@ export declare function useDashboardConfig(slug: Ref<string>): {
                         }[];
                         filters?: any;
                     }[];
+                    bucket?: {
+                        field: string;
+                        buckets: {
+                            label: string;
+                            min?: number | undefined;
+                            max?: number | undefined;
+                        }[];
+                    } | undefined;
                     calcs?: {
                         calc: string;
                         as: string;
@@ -927,6 +983,14 @@ export declare function useDashboardConfig(slug: Ref<string>): {
                         }[];
                         filters?: any;
                     }[];
+                    bucket?: {
+                        field: string;
+                        buckets: {
+                            label: string;
+                            min?: number | undefined;
+                            max?: number | undefined;
+                        }[];
+                    } | undefined;
                     calcs?: {
                         calc: string;
                         as: string;
@@ -1033,6 +1097,14 @@ export declare function useDashboardConfig(slug: Ref<string>): {
                         }[];
                         filters?: any;
                     }[];
+                    bucket?: {
+                        field: string;
+                        buckets: {
+                            label: string;
+                            min?: number | undefined;
+                            max?: number | undefined;
+                        }[];
+                    } | undefined;
                     calcs?: {
                         calc: string;
                         as: string;
@@ -1136,6 +1208,14 @@ export declare function useDashboardConfig(slug: Ref<string>): {
                         }[];
                         filters?: any;
                     }[];
+                    bucket?: {
+                        field: string;
+                        buckets: {
+                            label: string;
+                            min?: number | undefined;
+                            max?: number | undefined;
+                        }[];
+                    } | undefined;
                     calcs?: {
                         calc: string;
                         as: string;

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

@@ -96,6 +96,14 @@ export declare function useWidgetData(slug: Ref<string>, widgetId: Ref<string>,
                     }[];
                     filters?: any;
                 }[];
+                bucket?: {
+                    field: string;
+                    buckets: {
+                        label: string;
+                        min?: number | undefined;
+                        max?: number | undefined;
+                    }[];
+                } | undefined;
                 calcs?: {
                     calc: string;
                     as: string;
@@ -221,6 +229,14 @@ export declare function useWidgetData(slug: Ref<string>, widgetId: Ref<string>,
                     }[];
                     filters?: any;
                 }[];
+                bucket?: {
+                    field: string;
+                    buckets: {
+                        label: string;
+                        min?: number | undefined;
+                        max?: number | undefined;
+                    }[];
+                } | undefined;
                 calcs?: {
                     calc: string;
                     as: string;
@@ -342,6 +358,14 @@ export declare function useWidgetData(slug: Ref<string>, widgetId: Ref<string>,
                     }[];
                     filters?: any;
                 }[];
+                bucket?: {
+                    field: string;
+                    buckets: {
+                        label: string;
+                        min?: number | undefined;
+                        max?: number | undefined;
+                    }[];
+                } | undefined;
                 calcs?: {
                     calc: string;
                     as: string;
@@ -448,6 +472,14 @@ export declare function useWidgetData(slug: Ref<string>, widgetId: Ref<string>,
                     }[];
                     filters?: any;
                 }[];
+                bucket?: {
+                    field: string;
+                    buckets: {
+                        label: string;
+                        min?: number | undefined;
+                        max?: number | undefined;
+                    }[];
+                } | undefined;
                 calcs?: {
                     calc: string;
                     as: string;
@@ -551,6 +583,14 @@ export declare function useWidgetData(slug: Ref<string>, widgetId: Ref<string>,
                     }[];
                     filters?: any;
                 }[];
+                bucket?: {
+                    field: string;
+                    buckets: {
+                        label: string;
+                        min?: number | undefined;
+                        max?: number | undefined;
+                    }[];
+                } | undefined;
                 calcs?: {
                     calc: string;
                     as: string;
@@ -660,6 +700,14 @@ export declare function useWidgetData(slug: Ref<string>, widgetId: Ref<string>,
                     }[];
                     filters?: any;
                 }[];
+                bucket?: {
+                    field: string;
+                    buckets: {
+                        label: string;
+                        min?: number | undefined;
+                        max?: number | undefined;
+                    }[];
+                } | undefined;
                 calcs?: {
                     calc: string;
                     as: string;
@@ -785,6 +833,14 @@ export declare function useWidgetData(slug: Ref<string>, widgetId: Ref<string>,
                     }[];
                     filters?: any;
                 }[];
+                bucket?: {
+                    field: string;
+                    buckets: {
+                        label: string;
+                        min?: number | undefined;
+                        max?: number | undefined;
+                    }[];
+                } | undefined;
                 calcs?: {
                     calc: string;
                     as: string;
@@ -906,6 +962,14 @@ export declare function useWidgetData(slug: Ref<string>, widgetId: Ref<string>,
                     }[];
                     filters?: any;
                 }[];
+                bucket?: {
+                    field: string;
+                    buckets: {
+                        label: string;
+                        min?: number | undefined;
+                        max?: number | undefined;
+                    }[];
+                } | undefined;
                 calcs?: {
                     calc: string;
                     as: string;
@@ -1012,6 +1076,14 @@ export declare function useWidgetData(slug: Ref<string>, widgetId: Ref<string>,
                     }[];
                     filters?: any;
                 }[];
+                bucket?: {
+                    field: string;
+                    buckets: {
+                        label: string;
+                        min?: number | undefined;
+                        max?: number | undefined;
+                    }[];
+                } | undefined;
                 calcs?: {
                     calc: string;
                     as: string;
@@ -1115,6 +1187,14 @@ export declare function useWidgetData(slug: Ref<string>, widgetId: Ref<string>,
                     }[];
                     filters?: any;
                 }[];
+                bucket?: {
+                    field: string;
+                    buckets: {
+                        label: string;
+                        min?: number | undefined;
+                        max?: number | undefined;
+                    }[];
+                } | undefined;
                 calcs?: {
                     calc: string;
                     as: string;