@adminforth/dashboard 1.0.0

package/custom/widgets/chart/stacked-bar/StackedBarChart.vue

@@ -0,0 +1,256 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useElementSize } from '../../../composables/useElementSize.js'
+import type { ChartWidgetSeriesConfig } from '../chart.types.js'
+import { CHART_COLORS, formatChartAxisLabel, formatChartLabel, formatChartValue, toFiniteNumber } from '../chart.utils.js'
+
+const props = withDefaults(defineProps<{
+  rows: Record<string, unknown>[]
+  xField: string
+  series: ChartWidgetSeriesConfig[]
+  colors?: string[]
+  height?: number
+}>(), {
+  height: 280,
+})
+
+const { el: rootEl, width: rootWidth } = useElementSize<HTMLDivElement>()
+const { el: svgEl, width: svgWidth, height: svgHeight } = useElementSize<HTMLDivElement>()
+
+const padding = {
+  top: 24,
+  right: 6,
+  bottom: 34,
+  left: 38,
+}
+const barGap = 10
+const normalizedSeries = computed(() => props.series.map((series, index) => ({
+  ...series,
+  color: series.color || props.colors?.[index] || CHART_COLORS[index % CHART_COLORS.length],
+})))
+const showLegend = computed(() => normalizedSeries.value.length > 0)
+const isCompact = computed(() => rootWidth.value > 0 && rootWidth.value < 420)
+const chartWidth = computed(() => Math.max(svgWidth.value, 1))
+const chartHeight = computed(() => {
+  if (svgHeight.value > 0) {
+    return Math.max(svgHeight.value, 1)
+  }
+
+  return Math.max(props.height - (showLegend.value ? 28 : 0), 96)
+})
+const innerWidth = computed(() => Math.max(chartWidth.value - padding.left - padding.right, 1))
+const innerHeight = computed(() => Math.max(chartHeight.value - padding.top - padding.bottom, 1))
+const groupedRows = computed(() => {
+  const grouped = new Map<string, Record<string, unknown>>()
+
+  for (const row of props.rows) {
+    const label = formatChartLabel(row[props.xField])
+    const item = grouped.get(label) ?? { [props.xField]: label }
+
+    for (const series of normalizedSeries.value) {
+      item[series.name] = toFiniteNumber(item[series.name])
+        + getSeriesContribution(row[series.field], series.name)
+    }
+
+    grouped.set(label, item)
+  }
+
+  return Array.from(grouped.values())
+})
+const barWidth = computed(() => {
+  const count = Math.max(groupedRows.value.length, 1)
+  return Math.max(Math.min((innerWidth.value - barGap * (count - 1)) / count, 80), 4)
+})
+const totalChartWidth = computed(() => {
+  const count = Math.max(groupedRows.value.length, 1)
+  return count * barWidth.value + (count - 1) * barGap
+})
+const chartStartX = computed(() => padding.left + Math.max((innerWidth.value - totalChartWidth.value) / 2, 0))
+const totals = computed(() => groupedRows.value.map((row) => normalizedSeries.value.reduce(
+  (sum, series) => sum + toFiniteNumber(row[series.name]),
+  0,
+)))
+const maxTotal = computed(() => Math.max(...totals.value, 1))
+
+const bars = computed(() => groupedRows.value.map((row, rowIndex) => {
+  let y = padding.top + innerHeight.value
+
+  return {
+    label: String(row[props.xField]),
+    axisLabel: formatChartAxisLabel(row[props.xField]),
+    x: chartStartX.value + rowIndex * (barWidth.value + barGap),
+    total: totals.value[rowIndex],
+    segments: normalizedSeries.value.map((series) => {
+      const value = toFiniteNumber(row[series.name])
+      const height = (value / maxTotal.value) * innerHeight.value
+      y -= height
+
+      return {
+        id: `${rowIndex}-${series.name}`,
+        name: series.name,
+        value,
+        color: series.color,
+        y,
+        height,
+      }
+    }),
+  }
+}))
+
+const visibleLabelIndexes = computed(() => {
+  const count = bars.value.length
+  const approxLabelWidth = 52
+  const maxLabels = Math.max(2, Math.floor(innerWidth.value / approxLabelWidth))
+
+  if (count <= maxLabels || barWidth.value >= 44) {
+    return new Set(bars.value.map((_, index) => index))
+  }
+
+  const indexes = new Set<number>()
+  const step = (count - 1) / (maxLabels - 1)
+
+  for (let index = 0; index < maxLabels; index += 1) {
+    indexes.add(Math.round(index * step))
+  }
+
+  return indexes
+})
+
+const yTicks = computed(() => [0, 0.5, 1].map((ratio) => ({
+  value: maxTotal.value * (1 - ratio),
+  y: padding.top + innerHeight.value * ratio,
+})))
+
+function getSeriesContribution(value: unknown, seriesName: string) {
+  if (typeof value === 'boolean') {
+    return value === getBooleanSeriesValue(seriesName) ? 1 : 0
+  }
+
+  if (typeof value === 'string' && ['true', 'false'].includes(value.toLowerCase())) {
+    return (value.toLowerCase() === 'true') === getBooleanSeriesValue(seriesName) ? 1 : 0
+  }
+
+  return toFiniteNumber(value)
+}
+
+function getBooleanSeriesValue(seriesName: string) {
+  const normalizedName = seriesName.toLowerCase()
+
+  if (normalizedName.includes('unlisted') || normalizedName.includes('false')) {
+    return false
+  }
+
+  return true
+}
+
+function getBarTooltip(bar: { label: string, total: number, segments: Array<{ name: string, value: number }> }) {
+  const percentFormatter = new Intl.NumberFormat(undefined, { maximumFractionDigits: 1 })
+
+  const segmentLines = bar.segments.map((segment) => {
+    const share = bar.total > 0
+      ? (segment.value / bar.total) * 100
+      : 0
+
+    return `${segment.name}: ${formatChartValue(segment.value)} (${percentFormatter.format(share)}%)`
+  })
+
+  return [
+    `${bar.label}`,
+    `Total: ${formatChartValue(bar.total)}`,
+    ...segmentLines,
+  ].join('\n')
+}
+</script>
+
+<template>
+  <div
+    ref="rootEl"
+    class="grid h-full min-h-0 w-full grid-rows-[auto_minmax(0,1fr)] gap-3 overflow-hidden"
+  >
+    <div
+      v-if="showLegend"
+      class="flex flex-wrap items-center gap-3 text-xs text-lightListTableText dark:text-darkListTableText"
+      :class="isCompact ? 'justify-start' : 'justify-end'"
+    >
+      <div
+        v-for="series in normalizedSeries"
+        :key="series.name"
+        class="flex items-center gap-1.5"
+      >
+        <span
+          class="h-2.5 w-2.5 rounded-full"
+          :style="{ backgroundColor: series.color }"
+        />
+        <span>{{ series.name }}</span>
+      </div>
+    </div>
+
+    <div
+      ref="svgEl"
+      class="min-h-0 overflow-hidden"
+    >
+      <svg
+        v-if="chartWidth > 0 && chartHeight > 0"
+        class="block h-full w-full"
+        :viewBox="`0 0 ${chartWidth} ${chartHeight}`"
+        role="img"
+        :aria-label="xField"
+      >
+        <g class="text-lightListTableText dark:text-darkListTableText">
+          <line
+            v-for="tick in yTicks"
+            :key="tick.y"
+            :x1="padding.left"
+            :x2="chartWidth - padding.right"
+            :y1="tick.y"
+            :y2="tick.y"
+            stroke="currentColor"
+            stroke-opacity="0.14"
+          />
+          <text
+            v-for="tick in yTicks"
+            :key="`label-${tick.y}`"
+            :x="padding.left - 8"
+            :y="tick.y + 4"
+            fill="currentColor"
+            font-size="11"
+            text-anchor="end"
+          >
+            {{ formatChartValue(tick.value) }}
+          </text>
+        </g>
+
+        <g
+          v-for="(bar, barIndex) in bars"
+          :key="bar.label"
+        >
+          <rect
+            v-for="segment in bar.segments"
+            :key="segment.id"
+            v-show="segment.height > 0"
+            :x="bar.x"
+            :y="segment.y"
+            :width="barWidth"
+            :height="segment.height"
+            :fill="segment.color"
+            rx="3"
+          >
+            <title>{{ getBarTooltip(bar) }}</title>
+          </rect>
+
+          <text
+            v-if="visibleLabelIndexes.has(barIndex)"
+            :x="bar.x + barWidth / 2"
+            :y="padding.top + innerHeight + 24"
+            fill="currentColor"
+            font-size="11"
+            text-anchor="middle"
+            class="text-lightListTableText dark:text-darkListTableText"
+          >
+            {{ bar.axisLabel }}
+          </text>
+        </g>
+      </svg>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,107 @@
+<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 { CHART_COLORS, formatChartValue, toFiniteNumber } from '../chart/chart.utils.js'
+
+const props = defineProps<{
+  dashboardSlug: string
+  widget: DashboardWidgetConfig
+}>()
+
+const dashboardSlugRef = computed(() => props.dashboardSlug)
+const widgetIdRef = computed(() => props.widget.id)
+const {
+  data,
+  isLoading,
+  error,
+  refetch,
+} = useWidgetData(dashboardSlugRef, widgetIdRef)
+
+watch(
+  () => props.widget,
+  () => {
+    void refetch()
+  },
+  { deep: true },
+)
+
+const gaugeConfig = computed(() => props.widget.gauge_card as {
+  value_field?: string
+  min?: number
+  max?: number
+  suffix?: string
+  color?: string
+} | undefined)
+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 value = computed(() => toFiniteNumber(firstRow.value[valueField.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
+})
+const radius = 72
+const circumference = Math.PI * radius
+const strokeDashoffset = computed(() => circumference * (1 - progress.value))
+const gaugeColor = computed(() => gaugeConfig.value?.color || CHART_COLORS[0])
+</script>
+
+<template>
+  <div class="mt-3 rounded-lg border border-lightListBorder bg-lightTableBackground p-4 dark:border-darkListBorder dark:bg-darkTableBackground">
+    <div
+      v-if="isLoading"
+      class="text-sm text-lightListTableText dark:text-darkListTableText"
+    >
+      Loading...
+    </div>
+
+    <div
+      v-else-if="error"
+      class="text-sm text-lightInputErrorColor"
+    >
+      Failed to load gauge data
+    </div>
+
+    <div
+      v-else
+      class="flex flex-col items-center gap-2"
+    >
+      <svg
+        width="180"
+        height="104"
+        viewBox="0 0 180 104"
+        role="img"
+        :aria-label="valueField"
+      >
+        <path
+          d="M18 90a72 72 0 0 1 144 0"
+          class="text-lightListBorder dark:text-darkListBorder"
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-width="18"
+        />
+        <path
+          d="M18 90a72 72 0 0 1 144 0"
+          fill="none"
+          :stroke="gaugeColor"
+          stroke-linecap="round"
+          stroke-width="18"
+          :stroke-dasharray="circumference"
+          :stroke-dashoffset="strokeDashoffset"
+        />
+      </svg>
+
+      <div class="text-3xl font-bold text-lightNavbarText dark:text-darkNavbarText">
+        {{ formatChartValue(value) }}{{ gaugeConfig?.suffix ?? '' }}
+      </div>
+      <div class="text-sm text-lightListTableText dark:text-darkListTableText">
+        {{ formatChartValue(minValue) }} - {{ formatChartValue(maxValue) }}
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,73 @@
+<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 { formatChartValue, toFiniteNumber } from '../chart/chart.utils.js'
+
+const props = defineProps<{
+  dashboardSlug: string
+  widget: DashboardWidgetConfig
+}>()
+
+const dashboardSlugRef = computed(() => props.dashboardSlug)
+const widgetIdRef = computed(() => props.widget.id)
+const {
+  data,
+  isLoading,
+  error,
+  refetch,
+} = useWidgetData(dashboardSlugRef, widgetIdRef)
+
+watch(
+  () => props.widget,
+  () => {
+    void refetch()
+  },
+  { deep: true },
+)
+
+const kpiConfig = computed(() => props.widget.kpi_card as {
+  value_field?: string
+  label_field?: string
+  prefix?: string
+  suffix?: string
+} | undefined)
+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 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 ?? ''}`)
+</script>
+
+<template>
+  <div class="mt-3 rounded-lg border border-lightListBorder bg-lightTableBackground p-4 dark:border-darkListBorder dark:bg-darkTableBackground">
+    <div
+      v-if="isLoading"
+      class="text-sm text-lightListTableText dark:text-darkListTableText"
+    >
+      Loading...
+    </div>
+
+    <div
+      v-else-if="error"
+      class="text-sm text-lightInputErrorColor"
+    >
+      Failed to load KPI data
+    </div>
+
+    <div
+      v-else
+      class="grid gap-1"
+    >
+      <div class="text-3xl font-bold text-lightNavbarText dark:text-darkNavbarText">
+        {{ formattedValue }}
+      </div>
+      <div class="text-sm text-lightListTableText dark:text-darkListTableText">
+        {{ label }}
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,122 @@
+<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 { formatChartLabel, formatChartValue, toFiniteNumber } from '../chart/chart.utils.js'
+
+const props = defineProps<{
+  dashboardSlug: string
+  widget: DashboardWidgetConfig
+}>()
+
+const dashboardSlugRef = computed(() => props.dashboardSlug)
+const widgetIdRef = computed(() => props.widget.id)
+const {
+  data,
+  isLoading,
+  error,
+  refetch,
+} = useWidgetData(dashboardSlugRef, widgetIdRef)
+
+watch(
+  () => props.widget,
+  () => {
+    void refetch()
+  },
+  { 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 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 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 pivotRows = computed(() => {
+  const rowMap = new Map<string, Record<string, number | string>>()
+
+  for (const row of rows.value) {
+    const rowLabel = formatChartLabel(row[rowField.value])
+    const columnLabel = formatChartLabel(row[columnField.value])
+    const item = rowMap.get(rowLabel) ?? { label: rowLabel }
+    const currentValue = typeof item[columnLabel] === 'number' ? item[columnLabel] : 0
+    item[columnLabel] = currentValue + (aggregation.value === 'count' ? 1 : toFiniteNumber(row[valueField.value]))
+    rowMap.set(rowLabel, item)
+  }
+
+  return Array.from(rowMap.values())
+})
+</script>
+
+<template>
+  <div class="mt-3 flex h-full min-h-0 flex-col overflow-hidden rounded-lg border border-lightListBorder bg-lightTableBackground dark:border-darkListBorder dark:bg-darkTableBackground">
+    <div
+      v-if="isLoading"
+      class="p-4 text-sm text-lightListTableText dark:text-darkListTableText"
+    >
+      Loading...
+    </div>
+
+    <div
+      v-else-if="error"
+      class="p-4 text-sm text-lightInputErrorColor"
+    >
+      Failed to load pivot data
+    </div>
+
+    <div
+      v-else-if="!pivotRows.length"
+      class="p-4 text-sm text-lightListTableText dark:text-darkListTableText"
+    >
+      No data available
+    </div>
+
+    <div
+      v-else
+      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 class="px-3 py-2 font-semibold">
+              {{ rowField }}
+            </th>
+            <th
+              v-for="column in pivotColumnLabels"
+              :key="column"
+              class="px-3 py-2 text-right font-semibold"
+            >
+              {{ column }}
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="row in pivotRows"
+            :key="String(row.label)"
+            class="border-t border-lightListBorder odd:bg-lightTableOddBackground even:bg-lightTableEvenBackground dark:border-darkListBorder odd:dark:bg-darkTableOddBackground even:dark:bg-darkTableEvenBackground"
+          >
+            <td class="px-3 py-2 font-medium text-lightNavbarText dark:text-darkNavbarText">
+              {{ row.label }}
+            </td>
+            <td
+              v-for="column in pivotColumnLabels"
+              :key="column"
+              class="px-3 py-2 text-right text-lightListTableText dark:text-darkListTableText"
+            >
+              {{ formatChartValue(typeof row[column] === 'number' ? row[column] : 0) }}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>

package/custom/widgets/registry.ts

@@ -0,0 +1,51 @@
+import type { Component } from 'vue'
+import type { DashboardWidgetTarget } from '../model/dashboard.types.js'
+import ChartWidget from './chart/ChartWidget.vue'
+import GaugeCardWidget from './gauge-card/GaugeCardWidget.vue'
+import KpiCardWidget from './kpi-card/KpiCardWidget.vue'
+import PivotTableWidget from './pivot-table/PivotTableWidget.vue'
+import TableWidget from './table/TableWidget.vue'
+
+export type DashboardWidgetType = DashboardWidgetTarget
+
+export type DashboardWidgetRegistration = {
+  type: DashboardWidgetType
+  label: string
+  component?: Component
+}
+
+export const widgetRegistry: DashboardWidgetRegistration[] = [
+  {
+    type: 'table',
+    label: 'Table',
+    component: TableWidget,
+  },
+  {
+    type: 'chart',
+    label: 'Chart',
+    component: ChartWidget,
+  },
+  {
+    type: 'kpi_card',
+    label: 'KPI Card',
+    component: KpiCardWidget,
+  },
+  {
+    type: 'pivot_table',
+    label: 'Pivot Table',
+    component: PivotTableWidget,
+  },
+  {
+    type: 'gauge_card',
+    label: 'Gauge Card',
+    component: GaugeCardWidget,
+  },
+]
+
+export function getWidgetRegistration(type: DashboardWidgetType) {
+  return widgetRegistry.find((widget) => widget.type === type)
+}
+
+export function getWidgetLabel(type: DashboardWidgetType) {
+  return getWidgetRegistration(type)?.label || type.replaceAll('_', ' ')
+}