@adminforth/dashboard 1.0.0

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

@@ -0,0 +1,73 @@
+import type { ChartWidgetConfig } from '../widgets/chart/chart.types.js'
+
+export type DashboardConfig = {
+  version: number
+  groups: DashboardGroupConfig[]
+  widgets: DashboardWidgetConfig[]
+}
+
+export type DashboardGroupConfig = {
+  id: string
+  label: string
+  order: number
+}
+
+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 WidgetLayout = {
+  size?: DashboardWidgetSize
+  width?: number
+  minWidth?: number
+  maxWidth?: number | null
+  height?: number
+}
+
+export type DashboardWidgetConfig = {
+  id: string
+  group_id: string
+  label?: string
+  size?: DashboardWidgetSize
+  width?: number
+  height?: number
+  minWidth?: number
+  maxWidth?: number | null
+  order: number
+  target: DashboardWidgetTarget
+  chart?: ChartWidgetConfig
+  table?: unknown
+  kpi_card?: unknown
+  pivot_table?: unknown
+  gauge_card?: unknown
+  query?: unknown
+}
+
+export type DashboardWidgetTableData = {
+  columns: string[]
+  rows: Record<string, unknown>[]
+}
+
+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[]) : [],
+  }
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null
+}

package/dist/custom/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "custom",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "dependencies": {
+    "yaml": "^2.9.0"
+  }
+}

package/dist/custom/pnpm-lock.yaml

@@ -0,0 +1,24 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+importers:
+
+  .:
+    dependencies:
+      yaml:
+        specifier: ^2.9.0
+        version: 2.9.0
+
+packages:
+
+  yaml@2.9.0:
+    resolution: {integrity: sha512-2AvhNX3mb8zd6Zy7INTtSpl1F15HW6Wnqj0srWlkKLcpYl/gMIMJiyuGq2KeI2YFxUPjdlB+3Lc10seMLtL4cA==}
+    engines: {node: '>= 14.6'}
+    hasBin: true
+
+snapshots:
+
+  yaml@2.9.0: {}

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

@@ -0,0 +1,112 @@
+import { type Ref } from 'vue';
+export declare function useDashboardConfig(slug: Ref<string>): {
+    data: Ref<{
+        id: string;
+        slug: string;
+        label: string;
+        revision: number;
+        config: {
+            version: number;
+            groups: {
+                id: string;
+                label: string;
+                order: number;
+            }[];
+            widgets: {
+                id: string;
+                group_id: string;
+                label?: string | undefined;
+                size?: import("../model/dashboard.types.js").DashboardWidgetSize | undefined;
+                width?: number | undefined;
+                height?: number | undefined;
+                minWidth?: number | undefined;
+                maxWidth?: number | null | undefined;
+                order: number;
+                target: import("../model/dashboard.types.js").DashboardWidgetTarget;
+                chart?: {
+                    type: import("../widgets/chart/chart.types.js").ChartWidgetType;
+                    title?: string | undefined;
+                    x_field?: string | undefined;
+                    y_field?: string | undefined;
+                    label_field?: string | undefined;
+                    value_field?: string | undefined;
+                    bucket_field?: string | undefined;
+                    buckets?: {
+                        label: string;
+                        min?: number | undefined;
+                        max?: number | undefined;
+                    }[] | undefined;
+                    series?: {
+                        name: string;
+                        field: string;
+                        color?: string | undefined;
+                    }[] | undefined;
+                    series_name?: string | undefined;
+                    color?: string | undefined;
+                    colors?: string[] | undefined;
+                } | undefined;
+                table?: unknown;
+                kpi_card?: unknown;
+                pivot_table?: unknown;
+                gauge_card?: unknown;
+                query?: unknown;
+            }[];
+        };
+    } | null, import("../api/dashboardApi.js").DashboardResponse | {
+        id: string;
+        slug: string;
+        label: string;
+        revision: number;
+        config: {
+            version: number;
+            groups: {
+                id: string;
+                label: string;
+                order: number;
+            }[];
+            widgets: {
+                id: string;
+                group_id: string;
+                label?: string | undefined;
+                size?: import("../model/dashboard.types.js").DashboardWidgetSize | undefined;
+                width?: number | undefined;
+                height?: number | undefined;
+                minWidth?: number | undefined;
+                maxWidth?: number | null | undefined;
+                order: number;
+                target: import("../model/dashboard.types.js").DashboardWidgetTarget;
+                chart?: {
+                    type: import("../widgets/chart/chart.types.js").ChartWidgetType;
+                    title?: string | undefined;
+                    x_field?: string | undefined;
+                    y_field?: string | undefined;
+                    label_field?: string | undefined;
+                    value_field?: string | undefined;
+                    bucket_field?: string | undefined;
+                    buckets?: {
+                        label: string;
+                        min?: number | undefined;
+                        max?: number | undefined;
+                    }[] | undefined;
+                    series?: {
+                        name: string;
+                        field: string;
+                        color?: string | undefined;
+                    }[] | undefined;
+                    series_name?: string | undefined;
+                    color?: string | undefined;
+                    colors?: string[] | undefined;
+                } | undefined;
+                table?: unknown;
+                kpi_card?: unknown;
+                pivot_table?: unknown;
+                gauge_card?: unknown;
+                query?: unknown;
+            }[];
+        };
+    } | null>;
+    isLoading: Ref<boolean, boolean>;
+    isFetching: Ref<boolean, boolean>;
+    error: Ref<unknown, unknown>;
+    refetch: () => Promise<import("../api/dashboardApi.js").DashboardResponse | null>;
+};

package/dist/custom/queries/useDashboardConfig.js

@@ -0,0 +1,57 @@
+"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) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDashboardConfig = useDashboardConfig;
+const vue_1 = require("vue");
+const dashboardApi_js_1 = require("../api/dashboardApi.js");
+function useDashboardConfig(slug) {
+    const data = (0, vue_1.ref)(null);
+    const isLoading = (0, vue_1.ref)(false);
+    const isFetching = (0, vue_1.ref)(false);
+    const error = (0, vue_1.ref)(null);
+    function refetch() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!slug.value) {
+                data.value = null;
+                error.value = null;
+                return null;
+            }
+            isFetching.value = true;
+            if (data.value === null) {
+                isLoading.value = true;
+            }
+            try {
+                const response = yield dashboardApi_js_1.dashboardApi.getDashboardConfig(slug.value);
+                data.value = response;
+                error.value = null;
+                return response;
+            }
+            catch (e) {
+                error.value = e;
+                throw e;
+            }
+            finally {
+                isFetching.value = false;
+                isLoading.value = false;
+            }
+        });
+    }
+    (0, vue_1.watch)(slug, () => {
+        void refetch();
+    }, { immediate: true });
+    return {
+        data,
+        isLoading,
+        isFetching,
+        error,
+        refetch,
+    };
+}

package/dist/custom/queries/useDashboardConfig.ts

@@ -0,0 +1,51 @@
+import { ref, watch, type Ref } from 'vue'
+import { dashboardApi } from '../api/dashboardApi.js'
+
+export function useDashboardConfig(slug: Ref<string>) {
+  const data = ref<Awaited<ReturnType<typeof dashboardApi.getDashboardConfig>> | null>(null)
+  const isLoading = ref(false)
+  const isFetching = ref(false)
+  const error = ref<unknown>(null)
+
+  async function refetch() {
+    if (!slug.value) {
+      data.value = null
+      error.value = null
+      return null
+    }
+
+    isFetching.value = true
+    if (data.value === null) {
+      isLoading.value = true
+    }
+
+    try {
+      const response = await dashboardApi.getDashboardConfig(slug.value)
+      data.value = response
+      error.value = null
+      return response
+    } catch (e) {
+      error.value = e
+      throw e
+    } finally {
+      isFetching.value = false
+      isLoading.value = false
+    }
+  }
+
+  watch(
+    slug,
+    () => {
+      void refetch()
+    },
+    { immediate: true },
+  )
+
+  return {
+    data,
+    isLoading,
+    isFetching,
+    error,
+    refetch,
+  }
+}

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

@@ -0,0 +1,90 @@
+import { type Ref } from 'vue';
+export declare function useWidgetData(slug: Ref<string>, widgetId: Ref<string>): {
+    data: Ref<{
+        widget: {
+            id: string;
+            group_id: string;
+            label?: string | undefined;
+            size?: import("../model/dashboard.types.js").DashboardWidgetSize | undefined;
+            width?: number | undefined;
+            height?: number | undefined;
+            minWidth?: number | undefined;
+            maxWidth?: number | null | undefined;
+            order: number;
+            target: import("../model/dashboard.types.js").DashboardWidgetTarget;
+            chart?: {
+                type: import("../widgets/chart/chart.types.js").ChartWidgetType;
+                title?: string | undefined;
+                x_field?: string | undefined;
+                y_field?: string | undefined;
+                label_field?: string | undefined;
+                value_field?: string | undefined;
+                bucket_field?: string | undefined;
+                buckets?: {
+                    label: string;
+                    min?: number | undefined;
+                    max?: number | undefined;
+                }[] | undefined;
+                series?: {
+                    name: string;
+                    field: string;
+                    color?: string | undefined;
+                }[] | undefined;
+                series_name?: string | undefined;
+                color?: string | undefined;
+                colors?: string[] | undefined;
+            } | undefined;
+            table?: unknown;
+            kpi_card?: unknown;
+            pivot_table?: unknown;
+            gauge_card?: unknown;
+            query?: unknown;
+        };
+        data: unknown;
+    } | null, import("../api/dashboardApi.js").DashboardWidgetDataResponse | {
+        widget: {
+            id: string;
+            group_id: string;
+            label?: string | undefined;
+            size?: import("../model/dashboard.types.js").DashboardWidgetSize | undefined;
+            width?: number | undefined;
+            height?: number | undefined;
+            minWidth?: number | undefined;
+            maxWidth?: number | null | undefined;
+            order: number;
+            target: import("../model/dashboard.types.js").DashboardWidgetTarget;
+            chart?: {
+                type: import("../widgets/chart/chart.types.js").ChartWidgetType;
+                title?: string | undefined;
+                x_field?: string | undefined;
+                y_field?: string | undefined;
+                label_field?: string | undefined;
+                value_field?: string | undefined;
+                bucket_field?: string | undefined;
+                buckets?: {
+                    label: string;
+                    min?: number | undefined;
+                    max?: number | undefined;
+                }[] | undefined;
+                series?: {
+                    name: string;
+                    field: string;
+                    color?: string | undefined;
+                }[] | undefined;
+                series_name?: string | undefined;
+                color?: string | undefined;
+                colors?: string[] | undefined;
+            } | undefined;
+            table?: unknown;
+            kpi_card?: unknown;
+            pivot_table?: unknown;
+            gauge_card?: unknown;
+            query?: unknown;
+        };
+        data: unknown;
+    } | null>;
+    isLoading: Ref<boolean, boolean>;
+    isFetching: Ref<boolean, boolean>;
+    error: Ref<unknown, unknown>;
+    refetch: () => Promise<import("../api/dashboardApi.js").DashboardWidgetDataResponse | null>;
+};

package/dist/custom/queries/useWidgetData.js

@@ -0,0 +1,57 @@
+"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) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useWidgetData = useWidgetData;
+const vue_1 = require("vue");
+const dashboardApi_js_1 = require("../api/dashboardApi.js");
+function useWidgetData(slug, widgetId) {
+    const data = (0, vue_1.ref)(null);
+    const isLoading = (0, vue_1.ref)(false);
+    const isFetching = (0, vue_1.ref)(false);
+    const error = (0, vue_1.ref)(null);
+    function refetch() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!slug.value || !widgetId.value) {
+                data.value = null;
+                error.value = null;
+                return null;
+            }
+            isFetching.value = true;
+            if (data.value === null) {
+                isLoading.value = true;
+            }
+            try {
+                const response = yield dashboardApi_js_1.dashboardApi.getDashboardWidgetData(slug.value, widgetId.value);
+                data.value = response;
+                error.value = null;
+                return response;
+            }
+            catch (e) {
+                error.value = e;
+                throw e;
+            }
+            finally {
+                isFetching.value = false;
+                isLoading.value = false;
+            }
+        });
+    }
+    (0, vue_1.watch)([slug, widgetId], () => {
+        void refetch();
+    }, { immediate: true });
+    return {
+        data,
+        isLoading,
+        isFetching,
+        error,
+        refetch,
+    };
+}

package/dist/custom/queries/useWidgetData.ts

@@ -0,0 +1,51 @@
+import { ref, watch, type Ref } from 'vue'
+import { dashboardApi } from '../api/dashboardApi.js'
+
+export function useWidgetData(slug: Ref<string>, widgetId: Ref<string>) {
+  const data = ref<Awaited<ReturnType<typeof dashboardApi.getDashboardWidgetData>> | null>(null)
+  const isLoading = ref(false)
+  const isFetching = ref(false)
+  const error = ref<unknown>(null)
+
+  async function refetch() {
+    if (!slug.value || !widgetId.value) {
+      data.value = null
+      error.value = null
+      return null
+    }
+
+    isFetching.value = true
+    if (data.value === null) {
+      isLoading.value = true
+    }
+
+    try {
+      const response = await dashboardApi.getDashboardWidgetData(slug.value, widgetId.value)
+      data.value = response
+      error.value = null
+      return response
+    } catch (e) {
+      error.value = e
+      throw e
+    } finally {
+      isFetching.value = false
+      isLoading.value = false
+    }
+  }
+
+  watch(
+    [slug, widgetId],
+    () => {
+      void refetch()
+    },
+    { immediate: true },
+  )
+
+  return {
+    data,
+    isLoading,
+    isFetching,
+    error,
+    refetch,
+  }
+}