@adminforth/dashboard 1.0.0

package/.woodpecker/buildRelease.sh

@@ -0,0 +1,13 @@
+
+#!/bin/bash
+
+# write npm run output both to console and to build.log
+npm run build 2>&1 | tee build.log
+build_status=${PIPESTATUS[0]}
+
+# if exist status from the npm run build is not 0
+# then exit with the status code from the npm run build
+if [ $build_status -ne 0 ]; then
+  echo "Build failed. Exiting with status code $build_status"
+  exit $build_status
+fi

package/.woodpecker/buildSlackNotify.sh

@@ -0,0 +1,46 @@
+#!/bin/sh
+
+set -x
+
+COMMIT_SHORT_SHA=$(echo $CI_COMMIT_SHA | cut -c1-8)
+
+STATUS=${1}
+
+
+if [ "$STATUS" = "success" ]; then
+  MESSAGE="Did a build without issues on \`$CI_REPO_NAME/$CI_COMMIT_BRANCH\`. Commit: _${CI_COMMIT_MESSAGE}_ (<$CI_COMMIT_URL|$COMMIT_SHORT_SHA>)"
+
+  curl  -s -X POST -H "Content-Type: application/json" -d '{
+    "username": "'"$CI_COMMIT_AUTHOR"'",
+    "icon_url": "'"$CI_COMMIT_AUTHOR_AVATAR"'",
+    "attachments": [
+      {
+          "mrkdwn_in": ["text", "pretext"],
+          "color": "#36a64f",
+          "text": "'"$MESSAGE"'"
+      }
+    ]
+  }' "$DEVELOPERS_SLACK_WEBHOOK"
+  exit 0
+fi
+export BUILD_LOG=$(cat ./build.log)
+
+BUILD_LOG=$(echo $BUILD_LOG | sed 's/"/\\"/g')
+
+MESSAGE="Broke \`$CI_REPO_NAME/$CI_COMMIT_BRANCH\` with commit _${CI_COMMIT_MESSAGE}_ (<$CI_COMMIT_URL|$COMMIT_SHORT_SHA>)"
+CODE_BLOCK="\`\`\`$BUILD_LOG\n\`\`\`"
+
+echo "Sending slack message to developers $MESSAGE"
+# Send the message
+curl -sS -X POST -H "Content-Type: application/json" -d '{
+  "username": "'"$CI_COMMIT_AUTHOR"'",
+  "icon_url": "'"$CI_COMMIT_AUTHOR_AVATAR"'",
+  "attachments": [
+    {
+        "mrkdwn_in": ["text", "pretext"],
+        "color": "#8A1C12",
+        "text": "'"$CODE_BLOCK"'",
+        "pretext": "'"$MESSAGE"'"
+    }
+  ]
+}' "$DEVELOPERS_SLACK_WEBHOOK" 2>&1

package/.woodpecker/release.yml

@@ -0,0 +1,57 @@
+clone:
+  git:
+    image: woodpeckerci/plugin-git
+    settings:
+      partial: false
+      depth: 5
+
+steps:
+  init-secrets:
+    when:
+      - event: push
+    image: infisical/cli
+    environment:
+      INFISICAL_TOKEN:
+        from_secret: VAULT_TOKEN
+    commands:
+      - infisical export --domain https://vault.devforth.io/api --format=dotenv-export --env="prod" > /woodpecker/deploy.vault.env
+
+  build:
+    image: devforth/node20-pnpm:latest
+    when:
+      - event: push
+    commands:
+      - apt update && apt install -y rsync
+      - . /woodpecker/deploy.vault.env
+      - pnpm install
+      - /bin/bash ./.woodpecker/buildRelease.sh
+      - npm audit signatures
+
+  release:
+    image: devforth/node20-pnpm:latest
+    when:
+      - event:
+          - push
+        branch:
+          - main
+    commands:
+      - . /woodpecker/deploy.vault.env
+      - pnpm exec semantic-release
+
+  slack-on-failure:
+    image: curlimages/curl
+    when:
+      - event: push
+        status: [failure]
+    commands:
+      - . /woodpecker/deploy.vault.env
+      - /bin/sh ./.woodpecker/buildSlackNotify.sh failure
+
+  slack-on-success:
+    image: curlimages/curl
+    when:
+      - event: push
+        status: [success]
+    commands:
+      - . /woodpecker/deploy.vault.env
+      - /bin/sh ./.woodpecker/buildSlackNotify.sh success

package/README.md

@@ -0,0 +1,59 @@
+# @adminforth/dashboard
+
+Dashboard plugin for AdminForth.
+
+DashboardPage.vue
+  └── DashboardRuntime.vue
+        ├── DashboardGroup.vue
+        │     └── WidgetShell.vue
+        │           └── WidgetRenderer.vue
+        │                 ├── TableWidget.vue
+        │                 ├── ChartWidget.vue
+        │                 ├── KpiCardWidget.vue
+        │                 ├── PivotTableWidget.vue
+        │                 └── GaugeCardWidget.vue
+        └── DashboardEditorPanel.vue
+
+src/features/dashboards/
+
+  runtime/
+    DashboardPage.vue
+    DashboardRuntime.vue
+    DashboardGroup.vue
+    WidgetShell.vue
+    WidgetRenderer.vue
+
+  widgets/
+    registry.ts
+
+    table/
+      TableWidget.vue
+      TableWidgetEditor.vue
+      table.adapter.ts
+
+    chart/
+      ChartWidget.vue
+      ChartWidgetEditor.vue
+      chart.adapter.ts
+      charts/
+        PieChart.vue
+        LineChart.vue
+        BarChart.vue
+        StackedBarChart.vue
+        FunnelChart.vue
+        HistogramChart.vue
+
+    kpi-card/
+      KpiCardWidget.vue
+      KpiCardWidgetEditor.vue
+      kpi.adapter.ts
+
+    pivot-table/
+      PivotTableWidget.vue
+      PivotTableWidgetEditor.vue
+      pivot.adapter.ts
+
+    gauge-card/
+      GaugeCardWidget.vue
+      GaugeCardWidgetEditor.vue
+      gauge.adapter.ts

package/custom/api/dashboardApi.ts

@@ -0,0 +1,213 @@
+import type {
+  DashboardConfig,
+  DashboardGroupConfig,
+  DashboardGroupMoveDirection,
+  DashboardWidgetConfig,
+  DashboardWidgetMoveDirection,
+} from '../model/dashboard.types.js'
+
+export type DashboardWidgetConfigValidationError = {
+  field: string
+  message: string
+}
+
+export type DashboardResponse = {
+  id: string
+  slug: string
+  label: string
+  revision: number
+  config: DashboardConfig
+}
+
+export type DashboardWidgetDataResponse = {
+  widget: DashboardWidgetConfig
+  data: unknown
+}
+
+export class DashboardApiError extends Error {
+  validationErrors: DashboardWidgetConfigValidationError[]
+
+  constructor(message: string, validationErrors: DashboardWidgetConfigValidationError[] = []) {
+    super(message)
+    this.name = 'DashboardApiError'
+    this.validationErrors = validationErrors
+  }
+}
+
+function normalizeValidationErrors(response: any): DashboardWidgetConfigValidationError[] {
+  if (Array.isArray(response?.validationErrors)) {
+    return response.validationErrors
+  }
+
+  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'),
+    }))
+  }
+
+  return []
+}
+
+async function parseDashboardResponse(rawResponse: Response) {
+  const responseText = await rawResponse.text()
+
+  if (!responseText) {
+    return null
+  }
+
+  try {
+    return JSON.parse(responseText)
+  } catch {
+    return {
+      error: responseText,
+    }
+  }
+}
+
+async function callDashboardApi(path: string, body: Record<string, unknown>): Promise<DashboardResponse> {
+  const rawResponse = await fetch(path, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'accept-language': localStorage.getItem('af_lang') || 'en',
+    },
+    body: JSON.stringify(body),
+  })
+
+  const response = await parseDashboardResponse(rawResponse)
+
+  if (!rawResponse.ok) {
+    throw new DashboardApiError(
+      response?.error || rawResponse.statusText || `Dashboard request failed (${rawResponse.status})`,
+      normalizeValidationErrors(response),
+    )
+  }
+
+  if (!response || response.error) {
+    throw new DashboardApiError(response?.error || 'Dashboard request failed', normalizeValidationErrors(response))
+  }
+
+  return {
+    id: response.id,
+    slug: response.slug,
+    label: response.label,
+    revision: response.revision,
+    config: response.config,
+  }
+}
+
+async function callDashboardWidgetDataApi(
+  path: string,
+  body: Record<string, unknown>,
+): Promise<DashboardWidgetDataResponse> {
+  const rawResponse = await fetch(path, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'accept-language': localStorage.getItem('af_lang') || 'en',
+    },
+    body: JSON.stringify(body),
+  })
+
+  const response = await parseDashboardResponse(rawResponse)
+
+  if (!rawResponse.ok) {
+    throw new DashboardApiError(
+      response?.error || rawResponse.statusText || `Dashboard request failed (${rawResponse.status})`,
+      normalizeValidationErrors(response),
+    )
+  }
+
+  if (!response || response.error) {
+    throw new DashboardApiError(response?.error || 'Dashboard request failed', normalizeValidationErrors(response))
+  }
+
+  return {
+    widget: response.widget,
+    data: response.data,
+  }
+}
+
+export const dashboardApi = {
+  async getDashboardConfig(slug: string): Promise<DashboardResponse> {
+    return callDashboardApi('/adminapi/v1/dashboard/get-config', { slug })
+  },
+
+  async addDashboardGroup(slug: string): Promise<DashboardResponse> {
+    return callDashboardApi('/adminapi/v1/dashboard/add_dashboard_group', { slug })
+  },
+
+  async moveDashboardGroup(
+    slug: string,
+    groupId: string,
+    direction: DashboardGroupMoveDirection,
+  ): Promise<DashboardResponse> {
+    return callDashboardApi('/adminapi/v1/dashboard/move_dashboard_group', {
+      slug,
+      groupId,
+      direction,
+    })
+  },
+
+  async removeDashboardGroup(slug: string, groupId: string): Promise<DashboardResponse> {
+    return callDashboardApi('/adminapi/v1/dashboard/remove_dashboard_group', {
+      slug,
+      groupId,
+    })
+  },
+
+  async setDashboardGroupConfig(slug: string, groupId: string, config: DashboardGroupConfig): Promise<DashboardResponse> {
+    return callDashboardApi('/adminapi/v1/dashboard/set_dashboard_group_config', {
+      slug,
+      groupId,
+      config,
+    })
+  },
+
+  async addDashboardWidget(slug: string, groupId: string): Promise<DashboardResponse> {
+    return callDashboardApi('/adminapi/v1/dashboard/add_dashboard_widget', {
+      slug,
+      groupId,
+    })
+  },
+
+  async moveDashboardWidget(
+    slug: string,
+    widgetId: string,
+    direction: DashboardWidgetMoveDirection,
+  ): Promise<DashboardResponse> {
+    return callDashboardApi('/adminapi/v1/dashboard/move_dashboard_widget', {
+      slug,
+      widgetId,
+      direction,
+    })
+  },
+
+  async removeDashboardWidget(slug: string, widgetId: string): Promise<DashboardResponse> {
+    return callDashboardApi('/adminapi/v1/dashboard/remove_dashboard_widget', {
+      slug,
+      widgetId,
+    })
+  },
+
+  async setWidgetConfig(slug: string, widgetId: string, config: DashboardWidgetConfig): Promise<DashboardResponse> {
+    return callDashboardApi('/adminapi/v1/dashboard/set_widget_config', {
+      slug,
+      widgetId,
+      config,
+    })
+  },
+
+  async getDashboardWidgetData(
+    slug: string,
+    widgetId: string,
+  ): Promise<DashboardWidgetDataResponse> {
+    return callDashboardWidgetDataApi('/adminapi/v1/dashboard/get_dashboard_widget_data', {
+      slug,
+      widgetId,
+    })
+  },
+}

package/custom/composables/useElementSize.ts

@@ -0,0 +1,41 @@
+import { onBeforeUnmount, onMounted, ref, shallowRef } from 'vue'
+import type { Ref, ShallowRef } from 'vue'
+
+type ElementSizeState<T extends HTMLElement> = {
+  el: ShallowRef<T | null>
+  width: Ref<number>
+  height: Ref<number>
+}
+
+export function useElementSize<T extends HTMLElement>(): ElementSizeState<T> {
+  const el = shallowRef<T | null>(null)
+  const width = ref(0)
+  const height = ref(0)
+
+  let observer: ResizeObserver | undefined
+
+  onMounted(() => {
+    observer = new ResizeObserver(([entry]) => {
+      if (!entry) {
+        return
+      }
+
+      width.value = Math.floor(entry.contentRect.width)
+      height.value = Math.floor(entry.contentRect.height)
+    })
+
+    if (el.value) {
+      observer.observe(el.value)
+    }
+  })
+
+  onBeforeUnmount(() => {
+    observer?.disconnect()
+  })
+
+  return {
+    el: el as ShallowRef<T | null>,
+    width,
+    height,
+  }
+}

package/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/custom/package.json

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

package/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/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/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,
+  }
+}