@adminforth/dashboard 1.0.0 → 1.2.0

package/dist/custom/widgets/gauge-card/GaugeCardWidget.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { computed, watch } from 'vue'
 import { useWidgetData } from '../../queries/useWidgetData.js'
+import {
+  normalizeGaugeCardWidgetConfig,
+} from '../../model/dashboard.types.js'
 import type { DashboardWidgetConfig, DashboardWidgetTableData } from '../../model/dashboard.types.js'
 import { CHART_COLORS, formatChartValue, toFiniteNumber } from '../chart/chart.utils.js'
 
@@ -18,6 +21,32 @@ const {
   refetch,
 } = useWidgetData(dashboardSlugRef, widgetIdRef)
 
+function parseOptionalNumber(value: unknown): number | undefined {
+  if (value === null || value === undefined || value === '') {
+    return undefined
+  }
+
+  const parsed = typeof value === 'number' ? value : Number(value)
+  return Number.isFinite(parsed) ? parsed : undefined
+}
+
+function countFractionDigits(value: number) {
+  if (!Number.isFinite(value)) {
+    return 0
+  }
+
+  const normalizedValue = value.toString().toLowerCase()
+  const [coefficient, exponentValue] = normalizedValue.split('e')
+  const exponent = exponentValue ? Number(exponentValue) : 0
+  const decimalDigits = coefficient.split('.')[1]?.length ?? 0
+
+  return Math.max(decimalDigits - exponent, 0)
+}
+
+function normalizeDisplayValue(value: number, useWholeNumbers: boolean) {
+  return useWholeNumbers ? Math.trunc(value) : value
+}
+
 watch(
   () => props.widget,
   () => {
@@ -26,20 +55,42 @@ watch(
   { deep: true },
 )
 
-const gaugeConfig = computed(() => props.widget.gauge_card as {
-  value_field?: string
-  min?: number
-  max?: number
-  suffix?: string
-  color?: string
-} | undefined)
+const gaugeConfig = computed(() => normalizeGaugeCardWidgetConfig(props.widget.gauge_card))
 const widgetData = computed(() => data.value?.data as DashboardWidgetTableData | null)
 const columns = computed(() => widgetData.value?.columns ?? [])
 const firstRow = computed(() => widgetData.value?.rows[0] ?? {})
-const valueField = computed(() => gaugeConfig.value?.value_field || columns.value[0])
-const minValue = computed(() => gaugeConfig.value?.min ?? 0)
-const maxValue = computed(() => gaugeConfig.value?.max ?? 100)
+const valueField = computed(() => gaugeConfig.value?.valueField || columns.value[0])
+const minField = computed(() => gaugeConfig.value?.minField)
+const maxField = computed(() => gaugeConfig.value?.maxField)
+const minValue = computed(() => {
+  const dynamicMin = minField.value ? parseOptionalNumber(firstRow.value[minField.value]) : undefined
+  return dynamicMin ?? parseOptionalNumber(gaugeConfig.value?.min) ?? 0
+})
+const maxValue = computed(() => {
+  const dynamicMax = maxField.value ? parseOptionalNumber(firstRow.value[maxField.value]) : undefined
+  return dynamicMax ?? parseOptionalNumber(gaugeConfig.value?.max) ?? 100
+})
 const value = computed(() => toFiniteNumber(firstRow.value[valueField.value]))
+const fractionDigits = computed(() => Math.min([
+  value.value,
+  minValue.value,
+  maxValue.value,
+].reduce((maxDigits, currentValue) => Math.max(maxDigits, countFractionDigits(currentValue)), 0), 3))
+const shouldUseWholeNumbers = computed(() => Math.abs(maxValue.value) >= 1000)
+const formattedValue = computed(() => formatChartValue(normalizeDisplayValue(value.value, shouldUseWholeNumbers.value), {
+  minimumFractionDigits: shouldUseWholeNumbers.value ? 0 : fractionDigits.value,
+  maximumFractionDigits: shouldUseWholeNumbers.value ? 0 : fractionDigits.value,
+}))
+const formattedMinValue = computed(() => formatChartValue(normalizeDisplayValue(minValue.value, shouldUseWholeNumbers.value), {
+  minimumFractionDigits: shouldUseWholeNumbers.value ? 0 : fractionDigits.value,
+  maximumFractionDigits: shouldUseWholeNumbers.value ? 0 : fractionDigits.value,
+}))
+const formattedMaxValue = computed(() => {
+  return formatChartValue(normalizeDisplayValue(maxValue.value, shouldUseWholeNumbers.value), {
+    minimumFractionDigits: shouldUseWholeNumbers.value ? 0 : fractionDigits.value,
+    maximumFractionDigits: shouldUseWholeNumbers.value ? 0 : fractionDigits.value,
+  })
+})
 const progress = computed(() => {
   const range = maxValue.value - minValue.value
   return range > 0 ? Math.min(Math.max((value.value - minValue.value) / range, 0), 1) : 0
@@ -97,10 +148,10 @@ const gaugeColor = computed(() => gaugeConfig.value?.color || CHART_COLORS[0])
       </svg>
 
       <div class="text-3xl font-bold text-lightNavbarText dark:text-darkNavbarText">
-        {{ formatChartValue(value) }}{{ gaugeConfig?.suffix ?? '' }}
+        {{ formattedValue }}{{ gaugeConfig?.suffix ?? '' }}
       </div>
       <div class="text-sm text-lightListTableText dark:text-darkListTableText">
-        {{ formatChartValue(minValue) }} - {{ formatChartValue(maxValue) }}
+        {{ formattedMinValue }} - {{ formattedMaxValue }}
       </div>
     </div>
   </div>

package/dist/custom/widgets/kpi-card/KpiCardWidget.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { computed, watch } from 'vue'
 import { useWidgetData } from '../../queries/useWidgetData.js'
+import {
+  normalizeKpiCardWidgetConfig,
+} from '../../model/dashboard.types.js'
 import type { DashboardWidgetConfig, DashboardWidgetTableData } from '../../model/dashboard.types.js'
 import { formatChartValue, toFiniteNumber } from '../chart/chart.utils.js'
 
@@ -26,17 +29,12 @@ watch(
   { deep: true },
 )
 
-const kpiConfig = computed(() => props.widget.kpi_card as {
-  value_field?: string
-  label_field?: string
-  prefix?: string
-  suffix?: string
-} | undefined)
+const kpiConfig = computed(() => normalizeKpiCardWidgetConfig(props.widget.kpi_card))
 const widgetData = computed(() => data.value?.data as DashboardWidgetTableData | null)
 const columns = computed(() => widgetData.value?.columns ?? [])
 const firstRow = computed(() => widgetData.value?.rows[0] ?? {})
-const valueField = computed(() => kpiConfig.value?.value_field || columns.value[0])
-const labelField = computed(() => kpiConfig.value?.label_field)
+const valueField = computed(() => kpiConfig.value?.valueField || columns.value[0])
+const labelField = computed(() => kpiConfig.value?.labelField)
 const value = computed(() => toFiniteNumber(firstRow.value[valueField.value]))
 const label = computed(() => labelField.value ? String(firstRow.value[labelField.value]) : props.widget.label)
 const formattedValue = computed(() => `${kpiConfig.value?.prefix ?? ''}${formatChartValue(value.value)}${kpiConfig.value?.suffix ?? ''}`)

package/dist/custom/widgets/pivot-table/PivotTableWidget.vue

@@ -1,7 +1,10 @@
 <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 {
+  normalizePivotTableWidgetConfig,
+} 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<{
@@ -26,21 +29,38 @@ watch(
   { deep: true },
 )
 
-const pivotConfig = computed(() => props.widget.pivot_table as {
-  row_field?: string
-  column_field?: string
-  value_field?: string
-  aggregation?: 'count' | 'sum'
-} | undefined)
-const widgetData = computed(() => data.value?.data as DashboardWidgetTableData | null)
+const pivotConfig = computed(() => normalizePivotTableWidgetConfig(props.widget.pivot_table))
+const widgetData = computed(() => data.value?.data as DashboardWidgetData | null)
 const rows = computed(() => widgetData.value?.rows ?? [])
 const columns = computed(() => widgetData.value?.columns ?? [])
-const rowField = computed(() => pivotConfig.value?.row_field || columns.value[0])
-const columnField = computed(() => pivotConfig.value?.column_field || columns.value[1])
-const valueField = computed(() => pivotConfig.value?.value_field || columns.value[2])
+const isAggregateData = computed(() => widgetData.value?.kind === 'aggregate')
+const shouldRenderAggregateMatrix = computed(() => isAggregateData.value && !pivotConfig.value?.columnField)
+const rowField = computed(() => pivotConfig.value?.rowField || (isAggregateData.value ? 'group' : columns.value[0]))
+const columnField = computed(() => pivotConfig.value?.columnField || columns.value[1])
+const valueField = computed(() => pivotConfig.value?.valueField || columns.value[2] || columns.value[1])
 const aggregation = computed(() => pivotConfig.value?.aggregation || (valueField.value ? 'sum' : 'count'))
-const pivotColumnLabels = computed(() => Array.from(new Set(rows.value.map((row) => formatChartLabel(row[columnField.value])))))
+const pivotColumnLabels = computed(() => {
+  if (shouldRenderAggregateMatrix.value) {
+    return columns.value.filter((column) => column !== rowField.value)
+  }
+
+  return Array.from(new Set(rows.value.map((row) => formatChartLabel(row[columnField.value]))))
+})
 const pivotRows = computed(() => {
+  if (shouldRenderAggregateMatrix.value) {
+    return rows.value.map((row) => {
+      const item: Record<string, number | string> = {
+        label: formatChartLabel(row[rowField.value]),
+      }
+
+      for (const column of pivotColumnLabels.value) {
+        item[column] = toFiniteNumber(row[column])
+      }
+
+      return item
+    })
+  }
+
   const rowMap = new Map<string, Record<string, number | string>>()
 
   for (const row of rows.value) {

package/dist/custom/widgets/table/TableWidget.vue

@@ -23,37 +23,87 @@
 
     <div
       v-else
-      class="min-h-0 flex-1 overflow-auto"
+      class="flex min-h-0 flex-1 flex-col"
     >
-      <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
-              v-for="column in columns"
-              :key="column"
-              class="px-3 py-2 font-semibold"
+      <div 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
+                v-for="column in columns"
+                :key="column"
+                class="px-3 py-2 font-semibold"
+              >
+                {{ column }}
+              </th>
+            </tr>
+          </thead>
+
+          <tbody>
+            <tr
+              v-for="(row, index) in tableData.rows"
+              :key="`${currentPage}-${index}`"
+              class="border-t border-lightListBorder odd:bg-lightTableOddBackground even:bg-lightTableEvenBackground dark:border-darkListBorder odd:dark:bg-darkTableOddBackground even:dark:bg-darkTableEvenBackground"
             >
-              {{ column }}
-            </th>
-          </tr>
-        </thead>
-
-        <tbody>
-          <tr
-            v-for="(row, index) in tableData.rows"
-            :key="index"
-            class="border-t border-lightListBorder odd:bg-lightTableOddBackground even:bg-lightTableEvenBackground dark:border-darkListBorder odd:dark:bg-darkTableOddBackground even:dark:bg-darkTableEvenBackground"
+              <td
+                v-for="column in columns"
+                :key="column"
+                class="px-3 py-2 text-lightListTableText dark:text-darkListTableText"
+              >
+                {{ formatCell(row[column]) }}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div
+        v-if="pagination"
+        class="flex flex-wrap items-center justify-between gap-2 border-t border-lightListBorder px-3 py-2 text-sm text-lightListTableText dark:border-darkListBorder dark:text-darkListTableText"
+      >
+        <div>
+          {{ pageStart }}-{{ pageEnd }} of {{ pagination.total }}
+        </div>
+
+        <div class="flex items-center gap-2">
+          <button
+            type="button"
+            class="flex h-8 w-8 items-center justify-center rounded border border-lightListBorder text-sm disabled:opacity-45 dark:border-darkListBorder"
+            :disabled="currentPage <= 1 || isFetching"
+            @click="currentPage -= 1"
+            aria-label="Previous page"
           >
-            <td
-              v-for="column in columns"
-              :key="column"
-              class="px-3 py-2 text-lightListTableText dark:text-darkListTableText"
+            &lt;
+          </button>
+
+          <span class="flex items-center gap-1">
+            <span>Page</span>
+            <input
+              v-model.number="currentPageInput"
+              type="number"
+              min="1"
+              :max="pagination.totalPages"
+              class="dashboard-table-page-input h-8 min-w-8 rounded border border-lightListBorder bg-lightTableBackground px-2 text-center text-sm text-lightListTableText dark:border-darkListBorder dark:bg-darkTableBackground dark:text-darkListTableText"
+              :style="{ width: `${currentPageInputWidth}ch` }"
+              :disabled="isFetching"
+              aria-label="Current page"
+              @blur="applyCurrentPageInput"
+              @keydown.enter="applyCurrentPageInput"
             >
-              {{ formatCell(row[column]) }}
-            </td>
-          </tr>
-        </tbody>
-      </table>
+            <span>of {{ pagination.totalPages }}</span>
+          </span>
+
+          <button
+            type="button"
+            class="flex h-8 w-8 items-center justify-center rounded border border-lightListBorder text-sm disabled:opacity-45 dark:border-darkListBorder"
+            :disabled="currentPage >= pagination.totalPages || isFetching"
+            @click="currentPage += 1"
+            aria-label="Next page"
+          >
+            &gt;
+          </button>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -61,27 +111,52 @@
 
 
 <script setup lang="ts">
-import { computed, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useWidgetData } from '../../queries/useWidgetData.js'
 import type { DashboardWidgetConfig, DashboardWidgetTableData } from '../../model/dashboard.types.js'
 
+type TableWidgetConfig = {
+  columns?: string[]
+  pagination?: boolean
+  pageSize?: number
+}
+
+const DEFAULT_PAGE_SIZE = 10
+
 const props = defineProps<{
   dashboardSlug: string
   widget: DashboardWidgetConfig
 }>()
 
+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 dashboardSlugRef = computed(() => props.dashboardSlug)
 const widgetIdRef = computed(() => props.widget.id)
+const widgetDataRequest = computed(() => (
+  isPaginationEnabled.value
+    ? {
+        pagination: {
+          page: currentPage.value,
+          pageSize: pageSize.value,
+        },
+      }
+    : {}
+))
 const {
   data,
   isLoading,
+  isFetching,
   error,
   refetch,
-} = useWidgetData(dashboardSlugRef, widgetIdRef)
+} = useWidgetData(dashboardSlugRef, widgetIdRef, widgetDataRequest)
 
 watch(
   () => props.widget,
   () => {
+    currentPage.value = 1
     void refetch()
   },
   { deep: true },
@@ -92,10 +167,47 @@ const tableData = computed(() => {
 })
 
 const columns = computed(() => {
-  const configuredColumns = (props.widget.table as { columns?: string[] } | undefined)?.columns
+  const configuredColumns = tableConfig.value?.columns
   return configuredColumns ?? tableData.value?.columns ?? []
 })
 
+const pagination = computed(() => tableData.value?.pagination)
+const pageStart = computed(() => {
+  if (!pagination.value || pagination.value.total === 0) {
+    return 0
+  }
+
+  return (pagination.value.page - 1) * pagination.value.pageSize + 1
+})
+const pageEnd = computed(() => {
+  if (!pagination.value) {
+    return 0
+  }
+
+  return Math.min(pagination.value.page * pagination.value.pageSize, pagination.value.total)
+})
+const currentPageInputWidth = computed(() => {
+  const digits = String(currentPageInput.value || currentPage.value).length
+  return Math.max(digits + 3, 4)
+})
+
+watch(pagination, (nextPagination) => {
+  if (nextPagination && currentPage.value > nextPagination.totalPages) {
+    currentPage.value = nextPagination.totalPages
+  }
+})
+
+watch(currentPage, (nextPage) => {
+  currentPageInput.value = nextPage
+})
+
+function applyCurrentPageInput() {
+  const totalPages = pagination.value?.totalPages ?? 1
+  const page = Number.isFinite(currentPageInput.value) ? currentPageInput.value : currentPage.value
+  currentPage.value = Math.min(Math.max(Math.trunc(page), 1), totalPages)
+  currentPageInput.value = currentPage.value
+}
+
 function formatCell(value: unknown) {
   if (value === null || value === undefined) {
     return ''
@@ -108,3 +220,16 @@ function formatCell(value: unknown) {
   return String(value)
 }
 </script>
+
+<style scoped>
+.dashboard-table-page-input::-webkit-outer-spin-button,
+.dashboard-table-page-input::-webkit-inner-spin-button {
+  margin: 0;
+  appearance: none;
+}
+
+.dashboard-table-page-input {
+  appearance: textfield;
+  -moz-appearance: textfield;
+}
+</style>

package/dist/endpoint/widgets.d.ts

@@ -9,7 +9,12 @@ type WidgetEndpointsContext = {
     persistDashboardConfig: (dashboard: DashboardRecord, config: DashboardConfig) => Promise<PersistedDashboardResponse>;
     buildDashboardResponse: (dashboard: DashboardRecord) => PersistedDashboardResponse;
     validateDashboardWidgetApiConfig: (widget: DashboardWidgetConfig) => DashboardWidgetConfigValidationError[];
-    getWidgetData: (widget: DashboardWidgetConfig) => Promise<unknown>;
+    getWidgetData: (widget: DashboardWidgetConfig, options?: {
+        pagination?: {
+            page: number;
+            pageSize: number;
+        };
+    }) => Promise<unknown>;
 };
 export declare function registerWidgetEndpoints(server: IHttpServer, ctx: WidgetEndpointsContext): void;
 export {};

package/dist/endpoint/widgets.js

@@ -8,7 +8,32 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { randomUUID } from 'crypto';
-import { DashboardApiResponseSchema, DashboardWidgetDataResponseSchema, GroupIdRequestSchema, MoveWidgetRequestSchema, SetWidgetConfigRequestSchema, WidgetIdRequestSchema, } from '../schema/api.js';
+import { normalizeDashboardWidgetConfig, } from '../custom/model/dashboard.types.js';
+import { DashboardApiResponseSchema, DashboardWidgetDataResponseSchema, GroupIdRequestSchema, MoveWidgetRequestSchema, SetWidgetConfigRequestSchema, WidgetDataRequestSchema, WidgetIdRequestSchema, } from '../schema/api.js';
+import { StoredWidgetConfigSchema } from '../schema/widget.js';
+function formatWidgetConfigValidationErrors(error) {
+    return error.issues.map((issue) => ({
+        field: issue.path.length ? formatWidgetConfigFieldPath(issue.path.map(String).join('.')) : 'config',
+        message: issue.message,
+    }));
+}
+function formatWidgetConfigApiValidationErrors(errors) {
+    return errors.map((error) => (Object.assign(Object.assign({}, error), { field: formatWidgetConfigFieldPath(error.field) })));
+}
+function formatWidgetConfigFieldPath(field) {
+    const fieldAliases = new Map([
+        ['minWidth', 'min_width'],
+        ['maxWidth', 'max_width'],
+        ['dataSource', 'data_source'],
+        ['resourceId', 'resource_id'],
+        ['groupBy', 'group_by'],
+        ['pageSize', 'page_size'],
+    ]);
+    return field
+        .split('.')
+        .map((segment) => { var _a; return (_a = fieldAliases.get(segment)) !== null && _a !== void 0 ? _a : segment; })
+        .join('.');
+}
 export function registerWidgetEndpoints(server, ctx) {
     server.endpoint({
         method: 'POST',
@@ -140,13 +165,21 @@ export function registerWidgetEndpoints(server, ctx) {
                 response.setStatus(404);
                 return { error: 'Dashboard widget not found' };
             }
-            const typedWidgetConfig = body.config;
+            const parsedWidgetConfig = StoredWidgetConfigSchema.safeParse(normalizeDashboardWidgetConfig(body.config));
+            if (!parsedWidgetConfig.success) {
+                response.setStatus(422);
+                return {
+                    error: 'Invalid widget config',
+                    validationErrors: formatWidgetConfigValidationErrors(parsedWidgetConfig.error),
+                };
+            }
+            const typedWidgetConfig = parsedWidgetConfig.data;
             const apiValidationErrors = ctx.validateDashboardWidgetApiConfig(typedWidgetConfig);
             if (apiValidationErrors.length) {
                 response.setStatus(422);
                 return {
                     error: 'Invalid widget config',
-                    validationErrors: apiValidationErrors,
+                    validationErrors: formatWidgetConfigApiValidationErrors(apiValidationErrors),
                 };
             }
             return ctx.persistDashboardConfig(dashboard, Object.assign(Object.assign({}, config), { widgets: config.widgets.map((item) => item.id === widgetId
@@ -156,8 +189,8 @@ export function registerWidgetEndpoints(server, ctx) {
     server.endpoint({
         method: 'POST',
         path: '/dashboard/get_dashboard_widget_data',
-        description: 'Loads query result data for one dashboard widget by dashboard slug and widget id.',
-        request_schema: WidgetIdRequestSchema,
+        description: 'Loads widget data for one dashboard widget by dashboard slug and widget id.',
+        request_schema: WidgetDataRequestSchema,
         response_schema: DashboardWidgetDataResponseSchema,
         handler: (_a) => __awaiter(this, [_a], void 0, function* ({ body, response }) {
             const slug = String((body === null || body === void 0 ? void 0 : body.slug) || 'default');
@@ -175,7 +208,9 @@ export function registerWidgetEndpoints(server, ctx) {
             }
             return {
                 widget,
-                data: yield ctx.getWidgetData(widget),
+                data: yield ctx.getWidgetData(widget, {
+                    pagination: body === null || body === void 0 ? void 0 : body.pagination,
+                }),
             };
         }),
     });