@adminforth/dashboard 1.0.0 → 1.1.0

package/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 ?? props.widget.query?.limit ?? 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/custom/api/dashboardApi.d.ts

@@ -14,6 +14,12 @@ export type DashboardWidgetDataResponse = {
     widget: DashboardWidgetConfig;
     data: unknown;
 };
+export type DashboardWidgetDataRequest = {
+    pagination?: {
+        page: number;
+        pageSize: number;
+    };
+};
 export declare class DashboardApiError extends Error {
     validationErrors: DashboardWidgetConfigValidationError[];
     constructor(message: string, validationErrors?: DashboardWidgetConfigValidationError[]);
@@ -28,5 +34,5 @@ export declare const dashboardApi: {
     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>;
-    getDashboardWidgetData(slug: string, widgetId: string): Promise<DashboardWidgetDataResponse>;
+    getDashboardWidgetData(slug: string, widgetId: string, request?: DashboardWidgetDataRequest): Promise<DashboardWidgetDataResponse>;
 };

package/dist/custom/api/dashboardApi.js

@@ -168,12 +168,10 @@ exports.dashboardApi = {
             });
         });
     },
-    getDashboardWidgetData(slug, widgetId) {
-        return __awaiter(this, void 0, void 0, function* () {
-            return callDashboardWidgetDataApi('/adminapi/v1/dashboard/get_dashboard_widget_data', {
-                slug,
-                widgetId,
-            });
+    getDashboardWidgetData(slug_1, widgetId_1) {
+        return __awaiter(this, arguments, void 0, function* (slug, widgetId, request = {}) {
+            return callDashboardWidgetDataApi('/adminapi/v1/dashboard/get_dashboard_widget_data', Object.assign({ slug,
+                widgetId }, request));
         });
     },
 };

package/dist/custom/api/dashboardApi.ts

@@ -24,6 +24,13 @@ export type DashboardWidgetDataResponse = {
   data: unknown
 }
 
+export type DashboardWidgetDataRequest = {
+  pagination?: {
+    page: number
+    pageSize: number
+  }
+}
+
 export class DashboardApiError extends Error {
   validationErrors: DashboardWidgetConfigValidationError[]
 
@@ -204,10 +211,12 @@ export const dashboardApi = {
   async getDashboardWidgetData(
     slug: string,
     widgetId: string,
+    request: DashboardWidgetDataRequest = {},
   ): Promise<DashboardWidgetDataResponse> {
     return callDashboardWidgetDataApi('/adminapi/v1/dashboard/get_dashboard_widget_data', {
       slug,
       widgetId,
+      ...request,
     })
   },
 }

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

@@ -1,4 +1,33 @@
 import type { ChartWidgetConfig } from '../widgets/chart/chart.types.js';
+export type AggregationOperation = 'sum' | 'count' | 'avg' | 'min' | 'max' | 'median';
+export type AggregationRule = {
+    operation: AggregationOperation;
+    field?: string;
+};
+export type GroupByRule = {
+    type: 'field';
+    field: string;
+} | {
+    type: 'date_trunc';
+    field: string;
+    truncation: 'day' | 'week' | 'month' | 'year';
+    timezone?: string;
+};
+export type ResourceWidgetDataSource = {
+    type: 'resource';
+    resourceId: string;
+    columns?: string[];
+    sort?: unknown;
+    filters?: unknown;
+};
+export type AggregateWidgetDataSource = {
+    type: 'aggregate';
+    resourceId: string;
+    aggregations: Record<string, AggregationRule>;
+    groupBy?: GroupByRule;
+    filters?: unknown;
+};
+export type WidgetDataSource = ResourceWidgetDataSource | AggregateWidgetDataSource;
 export type DashboardConfig = {
     version: number;
     groups: DashboardGroupConfig[];
@@ -31,6 +60,7 @@ export type DashboardWidgetConfig = {
     maxWidth?: number | null;
     order: number;
     target: DashboardWidgetTarget;
+    dataSource?: WidgetDataSource;
     chart?: ChartWidgetConfig;
     table?: unknown;
     kpi_card?: unknown;
@@ -39,7 +69,22 @@ export type DashboardWidgetConfig = {
     query?: unknown;
 };
 export type DashboardWidgetTableData = {
+    kind?: 'table';
+    columns: string[];
+    rows: Record<string, unknown>[];
+    pagination?: {
+        page: number;
+        pageSize: number;
+        total: number;
+        totalPages: number;
+    };
+};
+export type DashboardWidgetAggregateData = {
+    kind: 'aggregate';
     columns: string[];
     rows: Record<string, unknown>[];
+    values?: Record<string, unknown>;
 };
+export type DashboardWidgetData = DashboardWidgetTableData | DashboardWidgetAggregateData;
 export declare function normalizeDashboardConfig(config: unknown): DashboardConfig;
+export declare function normalizeDashboardWidgetConfig(config: unknown): unknown;

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

@@ -1,14 +1,95 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.normalizeDashboardConfig = normalizeDashboardConfig;
+exports.normalizeDashboardWidgetConfig = normalizeDashboardWidgetConfig;
 function normalizeDashboardConfig(config) {
     const value = isRecord(config) ? config : {};
     return {
         version: typeof value.version === 'number' ? value.version : 1,
         groups: Array.isArray(value.groups) ? value.groups : [],
-        widgets: Array.isArray(value.widgets) ? value.widgets : [],
+        widgets: Array.isArray(value.widgets)
+            ? value.widgets.map((widget) => normalizeDashboardWidgetConfig(widget))
+            : [],
     };
 }
+function normalizeDashboardWidgetConfig(config) {
+    var _a;
+    if (!isRecord(config)) {
+        return config;
+    }
+    const normalized = Object.assign({}, config);
+    const target = normalizeDashboardWidgetTarget((_a = normalized.target) !== null && _a !== void 0 ? _a : normalized.type);
+    if (target && normalized.target === undefined) {
+        normalized.target = target;
+    }
+    if (target === 'kpi_card') {
+        const kpiCardConfig = normalizeKpiCardConfig(normalized);
+        if (kpiCardConfig !== undefined) {
+            normalized.kpi_card = kpiCardConfig;
+        }
+    }
+    if (target === 'gauge_card') {
+        const gaugeCardConfig = normalizeGaugeCardConfig(normalized);
+        if (gaugeCardConfig !== undefined) {
+            normalized.gauge_card = gaugeCardConfig;
+        }
+    }
+    return normalized;
+}
+function normalizeDashboardWidgetTarget(value) {
+    switch (value) {
+        case 'empty':
+        case 'table':
+        case 'chart':
+        case 'kpi_card':
+        case 'pivot_table':
+        case 'gauge_card':
+            return value;
+        default:
+            return undefined;
+    }
+}
+function normalizeKpiCardConfig(value) {
+    const config = isRecord(value.kpi_card) ? Object.assign({}, value.kpi_card) : {};
+    if (typeof value.valueField === 'string' && config.value_field === undefined) {
+        config.value_field = value.valueField;
+    }
+    if (typeof value.labelField === 'string' && config.label_field === undefined) {
+        config.label_field = value.labelField;
+    }
+    if (typeof value.prefix === 'string' && config.prefix === undefined) {
+        config.prefix = value.prefix;
+    }
+    if (typeof value.suffix === 'string' && config.suffix === undefined) {
+        config.suffix = value.suffix;
+    }
+    return Object.keys(config).length ? config : value.kpi_card;
+}
+function normalizeGaugeCardConfig(value) {
+    const config = isRecord(value.gauge_card) ? Object.assign({}, value.gauge_card) : {};
+    if (typeof value.valueField === 'string' && config.value_field === undefined) {
+        config.value_field = value.valueField;
+    }
+    if (value.min !== undefined && config.min === undefined) {
+        config.min = value.min;
+    }
+    if (value.max !== undefined && config.max === undefined) {
+        config.max = value.max;
+    }
+    if (typeof value.minField === 'string' && config.min_field === undefined) {
+        config.min_field = value.minField;
+    }
+    if (typeof value.maxField === 'string' && config.max_field === undefined) {
+        config.max_field = value.maxField;
+    }
+    if (typeof value.suffix === 'string' && config.suffix === undefined) {
+        config.suffix = value.suffix;
+    }
+    if (typeof value.color === 'string' && config.color === undefined) {
+        config.color = value.color;
+    }
+    return Object.keys(config).length ? config : value.gauge_card;
+}
 function isRecord(value) {
     return typeof value === 'object' && value !== null;
 }

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

@@ -1,5 +1,42 @@
 import type { ChartWidgetConfig } from '../widgets/chart/chart.types.js'
 
+export type AggregationOperation = 'sum' | 'count' | 'avg' | 'min' | 'max' | 'median'
+
+export type AggregationRule = {
+  operation: AggregationOperation
+  field?: string
+}
+
+export type GroupByRule =
+  | {
+      type: 'field'
+      field: string
+    }
+  | {
+      type: 'date_trunc'
+      field: string
+      truncation: 'day' | 'week' | 'month' | 'year'
+      timezone?: string
+    }
+
+export type ResourceWidgetDataSource = {
+  type: 'resource'
+  resourceId: string
+  columns?: string[]
+  sort?: unknown
+  filters?: unknown
+}
+
+export type AggregateWidgetDataSource = {
+  type: 'aggregate'
+  resourceId: string
+  aggregations: Record<string, AggregationRule>
+  groupBy?: GroupByRule
+  filters?: unknown
+}
+
+export type WidgetDataSource = ResourceWidgetDataSource | AggregateWidgetDataSource
+
 export type DashboardConfig = {
   version: number
   groups: DashboardGroupConfig[]
@@ -45,6 +82,7 @@ export type DashboardWidgetConfig = {
   maxWidth?: number | null
   order: number
   target: DashboardWidgetTarget
+  dataSource?: WidgetDataSource
   chart?: ChartWidgetConfig
   table?: unknown
   kpi_card?: unknown
@@ -54,20 +92,139 @@ export type DashboardWidgetConfig = {
 }
 
 export type DashboardWidgetTableData = {
+  kind?: 'table'
   columns: string[]
   rows: Record<string, unknown>[]
+  pagination?: {
+    page: number
+    pageSize: number
+    total: number
+    totalPages: number
+  }
 }
 
+export type DashboardWidgetAggregateData = {
+  kind: 'aggregate'
+  columns: string[]
+  rows: Record<string, unknown>[]
+  values?: Record<string, unknown>
+}
+
+export type DashboardWidgetData = DashboardWidgetTableData | DashboardWidgetAggregateData
+
 export function normalizeDashboardConfig(config: unknown): DashboardConfig {
   const value = isRecord(config) ? config : {}
 
   return {
     version: typeof value.version === 'number' ? value.version : 1,
     groups: Array.isArray(value.groups) ? (value.groups as DashboardGroupConfig[]) : [],
-    widgets: Array.isArray(value.widgets) ? (value.widgets as DashboardWidgetConfig[]) : [],
+    widgets: Array.isArray(value.widgets)
+      ? value.widgets.map((widget) => normalizeDashboardWidgetConfig(widget) as DashboardWidgetConfig)
+      : [],
   }
 }
 
+export function normalizeDashboardWidgetConfig(config: unknown) {
+  if (!isRecord(config)) {
+    return config
+  }
+
+  const normalized: Record<string, unknown> = { ...config }
+  const target = normalizeDashboardWidgetTarget(normalized.target ?? normalized.type)
+
+  if (target && normalized.target === undefined) {
+    normalized.target = target
+  }
+
+  if (target === 'kpi_card') {
+    const kpiCardConfig = normalizeKpiCardConfig(normalized)
+
+    if (kpiCardConfig !== undefined) {
+      normalized.kpi_card = kpiCardConfig
+    }
+  }
+
+  if (target === 'gauge_card') {
+    const gaugeCardConfig = normalizeGaugeCardConfig(normalized)
+
+    if (gaugeCardConfig !== undefined) {
+      normalized.gauge_card = gaugeCardConfig
+    }
+  }
+
+  return normalized
+}
+
+function normalizeDashboardWidgetTarget(value: unknown): DashboardWidgetTarget | undefined {
+  switch (value) {
+    case 'empty':
+    case 'table':
+    case 'chart':
+    case 'kpi_card':
+    case 'pivot_table':
+    case 'gauge_card':
+      return value
+    default:
+      return undefined
+  }
+}
+
+function normalizeKpiCardConfig(value: Record<string, unknown>) {
+  const config = isRecord(value.kpi_card) ? { ...value.kpi_card } : {}
+
+  if (typeof value.valueField === 'string' && config.value_field === undefined) {
+    config.value_field = value.valueField
+  }
+
+  if (typeof value.labelField === 'string' && config.label_field === undefined) {
+    config.label_field = value.labelField
+  }
+
+  if (typeof value.prefix === 'string' && config.prefix === undefined) {
+    config.prefix = value.prefix
+  }
+
+  if (typeof value.suffix === 'string' && config.suffix === undefined) {
+    config.suffix = value.suffix
+  }
+
+  return Object.keys(config).length ? config : value.kpi_card
+}
+
+function normalizeGaugeCardConfig(value: Record<string, unknown>) {
+  const config = isRecord(value.gauge_card) ? { ...value.gauge_card } : {}
+
+  if (typeof value.valueField === 'string' && config.value_field === undefined) {
+    config.value_field = value.valueField
+  }
+
+  if (value.min !== undefined && config.min === undefined) {
+    config.min = value.min
+  }
+
+  if (value.max !== undefined && config.max === undefined) {
+    config.max = value.max
+  }
+
+  if (typeof value.minField === 'string' && config.min_field === undefined) {
+    config.min_field = value.minField
+  }
+
+  if (typeof value.maxField === 'string' && config.max_field === undefined) {
+    config.max_field = value.maxField
+  }
+
+  if (typeof value.suffix === 'string' && config.suffix === undefined) {
+    config.suffix = value.suffix
+  }
+
+  if (typeof value.color === 'string' && config.color === undefined) {
+    config.color = value.color
+  }
+
+  return Object.keys(config).length ? config : value.gauge_card
+}
+
 function isRecord(value: unknown): value is Record<string, unknown> {
   return typeof value === 'object' && value !== null
 }