@adminforth/dashboard 1.3.0 → 1.4.1

package/dist/custom/runtime/DashboardPage.vue

@@ -50,20 +50,31 @@ import { useRoute } from 'vue-router'
 import { Button } from '@/afcl'
 import { useCoreStore } from '@/stores/core'
 import websocket from '@/websocket'
+import { getDashboardConfigUpdatedTopic } from '../model/dashboardTopics.js'
 import DashboardRuntime from './DashboardRuntime.vue'
 import { useDashboardConfig } from '../queries/useDashboardConfig.js'
 
 const route = useRoute()
 const coreStore = useCoreStore()
 
-const dashboardSlug = computed(() => {
-  const slug = route.params.slug
+function getDashboardSlugFromRouteParam(value: string | string[] | undefined) {
+  if (Array.isArray(value)) {
+    if (!value[0]) {
+      throw new Error('Dashboard slug route param is required')
+    }
+
+    return value[0]
+  }
 
-  if (Array.isArray(slug)) {
-    return slug[0] || 'default'
+  if (!value) {
+    throw new Error('Dashboard slug route param is required')
   }
 
-  return (slug as string) || 'default'
+  return value
+}
+
+const dashboardSlug = computed(() => {
+  return getDashboardSlugFromRouteParam(route.params.slug as string | string[] | undefined)
 })
 
 const {
@@ -78,11 +89,10 @@ const isAdmin = computed(() => {
   return coreStore.adminUser?.dbUser.role === 'superadmin'
 })
 
-const DASHBOARD_CONFIG_UPDATED_TOPIC_PREFIX = '/opentopic/dashboard-config-updated'
 const subscribedTopic = ref<string | null>(null)
 
 const dashboardConfigUpdatedTopic = computed(() => {
-  return `${DASHBOARD_CONFIG_UPDATED_TOPIC_PREFIX}/${dashboardSlug.value}`
+  return getDashboardConfigUpdatedTopic(dashboardSlug.value)
 })
 
 function handleDashboardConfigUpdated(data: { slug?: string; revision?: number }) {

package/dist/custom/runtime/DashboardRuntime.vue

@@ -207,6 +207,8 @@ import { DashboardApiError, dashboardApi, type DashboardResponse } from '../api/
 import type {
   DashboardConfig,
   DashboardGroupConfig,
+  EditableDashboardGroupConfig,
+  EditableDashboardWidgetConfig,
   DashboardGroupMoveDirection,
   DashboardWidgetConfig,
   DashboardWidgetMoveDirection,
@@ -252,13 +254,15 @@ const sortedGroups = computed(() => {
   return [...draftConfig.value.groups].sort((a, b) => a.order - b.order)
 })
 
-const widgetsByGroupId = computed<Map<string, DashboardWidgetConfig[]>>(() => {
+function groupWidgetsByGroupId(widgets: DashboardWidgetConfig[]) {
   const result = new Map<string, DashboardWidgetConfig[]>()
 
-  for (const widget of draftConfig.value.widgets) {
-    const widgets = result.get(widget.group_id) ?? []
-    widgets.push(widget)
-    result.set(widget.group_id, widgets)
+  for (const widget of widgets) {
+    const nextWidgets = result.get(widget.group_id)
+      ? [...result.get(widget.group_id)!, widget]
+      : [widget]
+
+    result.set(widget.group_id, nextWidgets)
   }
 
   for (const [groupId, widgets] of result.entries()) {
@@ -266,6 +270,10 @@ const widgetsByGroupId = computed<Map<string, DashboardWidgetConfig[]>>(() => {
   }
 
   return result
+}
+
+const widgetsByGroupId = computed<Map<string, DashboardWidgetConfig[]>>(() => {
+  return groupWidgetsByGroupId(draftConfig.value.widgets as DashboardWidgetConfig[])
 })
 
 const visibleGroups = computed(() => {
@@ -329,8 +337,12 @@ async function removeGroup(groupId: string) {
 }
 
 function editGroup(group: DashboardGroupConfig) {
+  const editableGroupConfig: EditableDashboardGroupConfig = {
+    label: group.label,
+  }
+
   editingGroupId.value = group.id
-  groupConfigCode.value = stringifyYaml(group)
+  groupConfigCode.value = stringifyYaml(editableGroupConfig)
   groupConfigError.value = ''
 }
 
@@ -340,7 +352,7 @@ async function saveGroupConfig() {
   }
 
   try {
-    const groupConfig = parseYaml(groupConfigCode.value) as DashboardGroupConfig
+    const groupConfig = parseYaml(groupConfigCode.value) as EditableDashboardGroupConfig
 
     applyDashboardResponse(
       await dashboardApi.setDashboardGroupConfig(
@@ -402,7 +414,7 @@ async function saveWidgetConfig() {
   try {
     widgetConfigError.value = ''
     widgetConfigFieldErrors.value = []
-    const widgetConfig = parseYaml(widgetConfigCode.value) as DashboardWidgetConfig
+    const widgetConfig = parseYaml(widgetConfigCode.value) as EditableDashboardWidgetConfig
 
     applyDashboardResponse(
       await dashboardApi.setWidgetConfig(

package/dist/custom/runtime/WidgetRenderer.vue

@@ -26,7 +26,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import type { DashboardWidgetConfig } from '../model/dashboard.types.js'
-import { normalizeChartWidgetConfig } from '../widgets/chart/chart.types.js'
 import { getWidgetLabel, getWidgetRegistration } from '../widgets/registry.js'
 
 const props = defineProps<{
@@ -53,7 +52,7 @@ const widgetTitle = computed(() => {
   }
 
   if (props.widget.target === 'chart') {
-    return normalizeChartWidgetConfig(props.widget.chart)?.title || 'Untitled chart'
+    return props.widget.chart.title || 'Untitled chart'
   }
 
   return getWidgetLabel(props.widget.target)

package/dist/custom/runtime/WidgetShell.vue

@@ -136,10 +136,10 @@ const widgetLayoutVars = computed<CSSProperties>(() => {
 
   return {
     '--widget-basis': clampToContainerWidth(fixedWidth ?? basis),
-    '--widget-min-width': clampToContainerWidth(fixedWidth ?? formatWidth(props.layout?.minWidth) ?? basis),
-    '--widget-max-width': props.layout?.maxWidth === null
+    '--widget-min-width': clampToContainerWidth(fixedWidth ?? formatWidth(props.layout?.min_width) ?? basis),
+    '--widget-max-width': props.layout?.max_width === null
       ? '100%'
-      : clampToContainerWidth(fixedWidth ?? formatWidth(props.layout?.maxWidth) ?? '100%'),
+      : clampToContainerWidth(fixedWidth ?? formatWidth(props.layout?.max_width) ?? '100%'),
     height: formatWidth(props.layout?.height ?? DEFAULT_WIDGET_HEIGHT),
   }
 })

package/dist/custom/skills/adminforth-dashboard/SKILL.md

@@ -41,6 +41,7 @@ If the user asks how the schema works, how to implement the API, or how to chang
 Use these tools whenever available:
 
 - `dashboard_get_config`
+- `dashboard_set_dashboard_config`
 - `dashboard_add_dashboard_group`
 - `dashboard_set_dashboard_group_config`
 - `dashboard_move_dashboard_group`
@@ -58,6 +59,7 @@ If a dashboard tool is known by name but its argument schema is not loaded, call
 Do not pass fields between dashboard tools by analogy. Use each tool's schema.
 
 - `dashboard_add_dashboard_group` creates a new group. It accepts the dashboard slug only. Never pass `groupId` to this tool.
+- `dashboard_set_dashboard_config` replaces the full dashboard config. Use it when the user explicitly asks to edit the whole dashboard config.
 - `dashboard_add_dashboard_widget` creates a widget inside an existing group. Use it when you already have a `groupId`.
 - `dashboard_set_dashboard_group_config`, `dashboard_move_dashboard_group`, and `dashboard_remove_dashboard_group` operate on an existing group and need `groupId`.
 - `dashboard_set_widget_config`, `dashboard_move_dashboard_widget`, `dashboard_remove_dashboard_widget`, and `dashboard_get_dashboard_widget_data` operate on an existing widget and need `widgetId`.
@@ -113,17 +115,122 @@ For group requests:
 
 If slug is missing, use `default`.
 
+## Dashboard Config Workflow
+
+Use `dashboard_set_dashboard_config` only when the user explicitly asks to edit the whole dashboard root config.
+
+For requests like:
+
+- "update root dashboard config"
+- "replace the whole dashboard config"
+
+do this:
+
+1. Call `dashboard_get_config`.
+2. Modify the returned root config, preserving existing `version`, `groups`, and `widgets` unless the user asked to change them.
+3. Call `dashboard_set_dashboard_config` with the full updated config.
+4. Return a short summary of the root-level fields changed.
+
+Do not use `dashboard_set_dashboard_config` to store reusable widget variables.
+
 ## Widget Config Rules
 
 Use the current schema keys exactly:
 
 - Use `target`, not `type`.
 - Use `label`, not `title`.
-- Use `query`, not `data_source`.
-- Use `resource`, not `resource_id`.
+- Use `query`, not `dataSource`.
+- Use `resource`, not `resourceId`.
 - Use `group_by`, not `groupBy`.
 - Use `order_by`, not `orderBy`.
 - Use `page_size`, not `pageSize`.
-- For funnel charts, use `query.steps` as an ordered array of `{ name, resource, metric, filters }` steps.
+- For step-based chart queries, use `query.steps` as an ordered array of `{ name, resource, metric, filters }` steps and add `query.calcs` when derived fields are needed.
 - Use `card` for KPI and gauge widget view config.
 - Use `pivot` for pivot table view config.
+- Use `variables` for reusable static maps or constants at widget level.
+- In `query.calcs`, use `lookup($variables.some.map, row_field, default_number)` to read a numeric value from a variable map by the current row/group field.
+
+## Variables And Lookup Calcs
+
+Widget config can define variables:
+
+```yaml
+variables:
+  token_prices_per_1m:
+    input:
+      gpt-4.1: 2.00
+      gpt-4.1-mini: 0.40
+      gpt-4o-mini: 0.15
+    output:
+      gpt-4.1: 8.00
+      gpt-4.1-mini: 1.60
+      gpt-4o-mini: 0.60
+    cached:
+      gpt-4.1: 0.50
+      gpt-4.1-mini: 0.10
+      gpt-4o-mini: 0.075
+```
+
+Use variables when a calculation needs a static rate table, threshold table, coefficient map, or other reusable constants. In calcs, `lookup($variables.path.to.map, field_name, 0)` returns the value from the map using `field_name` from the current row/group. The third argument is the numeric fallback when the key is missing.
+
+Example widget:
+
+```yaml
+target: chart
+label: Model costs
+size: large
+variables:
+  token_prices_per_1m:
+    input:
+      gpt-4.1: 2.00
+      gpt-4.1-mini: 0.40
+      gpt-4o-mini: 0.15
+    output:
+      gpt-4.1: 8.00
+      gpt-4.1-mini: 1.60
+      gpt-4o-mini: 0.60
+    cached:
+      gpt-4.1: 0.50
+      gpt-4.1-mini: 0.10
+      gpt-4o-mini: 0.075
+
+chart:
+  type: stacked_bar
+  title: LLM costs by model
+  x:
+    field: model
+    label: Model
+  y:
+    - field: input_cost
+      label: Input
+      format: currency
+    - field: output_cost
+      label: Output
+      format: currency
+    - field: cached_cost
+      label: Cached
+      format: currency
+
+query:
+  resource: model_usage
+  select:
+    - field: model
+    - agg: sum
+      field: input_tokens
+      as: input_tokens
+    - agg: sum
+      field: output_tokens
+      as: output_tokens
+    - agg: sum
+      field: cached_tokens
+      as: cached_tokens
+  group_by:
+    - model
+  calcs:
+    - calc: input_tokens / 1000000 * lookup($variables.token_prices_per_1m.input, model, 0)
+      as: input_cost
+    - calc: output_tokens / 1000000 * lookup($variables.token_prices_per_1m.output, model, 0)
+      as: output_cost
+    - calc: cached_tokens / 1000000 * lookup($variables.token_prices_per_1m.cached, model, 0)
+      as: cached_cost
+```

package/dist/custom/widgets/{gauge-card/GaugeCardWidget.vue → GaugeCardWidget.vue}

@@ -1,8 +1,66 @@
+<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">
+        {{ gaugeConfig?.value.prefix ?? '' }}{{ formattedValue }}{{ gaugeConfig?.value.suffix ?? '' }}
+      </div>
+      <div class="text-sm text-lightListTableText dark:text-darkListTableText">
+        {{ formattedMinValue }} - {{ formattedMaxValue }}
+      </div>
+    </div>
+  </div>
+</template>
+
+
+
 <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'
+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
@@ -57,13 +115,13 @@ const widgetData = computed(() => data.value?.data as DashboardWidgetTableData |
 const columns = computed(() => widgetData.value?.columns ?? [])
 const firstRow = computed(() => widgetData.value?.rows[0] ?? {})
 const valueField = computed(() => gaugeConfig.value?.value.field || columns.value[0])
-const targetField = computed(() => gaugeConfig.value?.target?.field ?? gaugeConfig.value?.progress?.targetField)
+const targetField = computed(() => gaugeConfig.value?.target?.field ?? gaugeConfig.value?.progress?.target_field)
 const minValue = computed(() => {
   return 0
 })
 const maxValue = computed(() => {
   const dynamicMax = targetField.value ? parseOptionalNumber(firstRow.value[targetField.value]) : undefined
-  return dynamicMax ?? parseOptionalNumber(gaugeConfig.value?.target?.value ?? gaugeConfig.value?.progress?.targetValue) ?? 100
+  return dynamicMax ?? parseOptionalNumber(gaugeConfig.value?.target?.value ?? gaugeConfig.value?.progress?.target_value) ?? 100
 })
 const value = computed(() => toFiniteNumber(firstRow.value[valueField.value]))
 const fractionDigits = computed(() => Math.min([
@@ -95,59 +153,3 @@ 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">
-        {{ gaugeConfig?.value.prefix ?? '' }}{{ formattedValue }}{{ gaugeConfig?.value.suffix ?? '' }}
-      </div>
-      <div class="text-sm text-lightListTableText dark:text-darkListTableText">
-        {{ formattedMinValue }} - {{ formattedMaxValue }}
-      </div>
-    </div>
-  </div>
-</template>

package/dist/custom/widgets/{kpi-card/KpiCardWidget.vue → KpiCardWidget.vue}

@@ -1,8 +1,40 @@
+<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>
+
+
+
 <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'
+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
@@ -37,33 +69,3 @@ const label = computed(() => kpiConfig.value?.subtitle?.field
   : kpiConfig.value?.subtitle?.text ?? kpiConfig.value?.title ?? props.widget.label)
 const formattedValue = computed(() => `${kpiConfig.value?.value.prefix ?? ''}${formatChartValue(value.value)}${kpiConfig.value?.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/dist/custom/widgets/{pivot-table/PivotTableWidget.vue → PivotTableWidget.vue}

@@ -1,11 +1,78 @@
+<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>
+
+
+
 <script setup lang="ts">
 import { computed, watch } from 'vue'
-import { useWidgetData } from '../../queries/useWidgetData.js'
+import { useWidgetData } from '../queries/useWidgetData.js'
 import {
   getFieldRefField,
-} from '../../model/dashboard.types.js'
-import type { DashboardWidgetConfig, DashboardWidgetData } from '../../model/dashboard.types.js'
-import { formatChartLabel, formatChartValue, toFiniteNumber } from '../chart/chart.utils.js'
+} 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<{
   dashboardSlug: string
@@ -77,67 +144,3 @@ const pivotRows = computed(() => {
 })
 </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>