@adminforth/dashboard 1.4.0 → 1.4.2

package/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/custom/skills/adminforth-dashboard/SKILL.md

@@ -139,8 +139,8 @@ 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`.

package/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/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/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>

package/custom/widgets/{table/TableWidget.vue → TableWidget.vue}

@@ -112,14 +112,14 @@
 
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
-import { useWidgetData } from '../../queries/useWidgetData.js'
-import { getFieldRefField } from '../../model/dashboard.types.js'
-import type { DashboardWidgetConfig, DashboardWidgetTableData, FieldRef } from '../../model/dashboard.types.js'
+import { useWidgetData } from '../queries/useWidgetData.js'
+import { getFieldRefField } from '../model/dashboard.types.js'
+import type { DashboardWidgetConfig, DashboardWidgetTableData, FieldRef } from '../model/dashboard.types.js'
 
 type TableWidgetConfig = {
   columns?: FieldRef[]
   pagination?: boolean
-  pageSize?: number
+  page_size?: number
 }
 
 const DEFAULT_PAGE_SIZE = 10
@@ -133,7 +133,7 @@ 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 ?? DEFAULT_PAGE_SIZE)
+const pageSize = computed(() => tableConfig.value?.page_size ?? DEFAULT_PAGE_SIZE)
 const dashboardSlugRef = computed(() => props.dashboardSlug)
 const widgetIdRef = computed(() => props.widget.id)
 const widgetDataRequest = computed(() => (

package/custom/widgets/chart/{bar/BarChart.vue → BarChart.vue}

@@ -82,7 +82,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useElementSize } from '../../../composables/useElementSize.js'
+import { useElementSize } from '../../composables/useElementSize.js'
 import {
   CHART_COLORS,
   formatChartAxisLabel,
@@ -90,7 +90,7 @@ import {
   formatChartValue,
   getChartYAxisWidth,
   toFiniteNumber,
-} from '../chart.utils.js'
+} from './chart.utils.js'
 
 const props = withDefaults(defineProps<{
   rows: Record<string, unknown>[]

package/custom/widgets/chart/ChartWidget.vue

@@ -41,16 +41,7 @@
     />
 
     <BarChart
-      v-else-if="chartConfig?.type === 'bar'"
-      :rows="barRows"
-      :label-field="barLabelField"
-      :value-field="barValueField"
-      :color="chartConfig.color"
-      :height="chartHeight"
-    />
-
-    <HistogramChart
-      v-else-if="chartConfig?.type === 'histogram'"
+      v-else-if="chartConfig?.type === 'bar' || chartConfig?.type === 'histogram'"
       :rows="barRows"
       :label-field="barLabelField"
       :value-field="barValueField"
@@ -91,11 +82,9 @@
 <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 { normalizeChartWidgetConfig } from './chart.types.js'
+import type { ChartDashboardWidgetConfig, DashboardWidgetTableData } from '../../model/dashboard.types.js'
 import BarChart from './bar/BarChart.vue'
 import FunnelChart from './funnel/FunnelChart.vue'
-import HistogramChart from './histogram/HistogramChart.vue'
 import LineChart from './line/LineChart.vue'
 import PieChart from './pie/PieChart.vue'
 import StackedBarChart from './stacked-bar/StackedBarChart.vue'
@@ -105,7 +94,7 @@ const DEFAULT_WIDGET_HEIGHT = 500
 
 const props = defineProps<{
   dashboardSlug: string
-  widget: DashboardWidgetConfig
+  widget: ChartDashboardWidgetConfig
 }>()
 
 const dashboardSlugRef = computed(() => props.dashboardSlug)
@@ -128,7 +117,7 @@ watch(
 const chartData = computed(() => data.value?.data as DashboardWidgetTableData | null)
 const rows = computed(() => chartData.value?.rows ?? [])
 const columns = computed(() => chartData.value?.columns ?? [])
-const chartConfig = computed(() => normalizeChartWidgetConfig(props.widget.chart))
+const chartConfig = computed(() => props.widget.chart)
 
 function resolveChartDimensionField(field: string | undefined, fallbackField: string | undefined) {
   const resolvedField = field ?? fallbackField

package/{dist/custom/widgets/chart/funnel → custom/widgets/chart}/FunnelChart.vue

@@ -1,13 +1,91 @@
+<template>
+  <div
+    ref="rootEl"
+    class="grid h-full min-h-0 w-full gap-4 overflow-hidden"
+    :class="isCompact ? 'grid-rows-[minmax(0,1fr)_auto]' : 'grid-cols-[minmax(0,1fr)_200px]'"
+  >
+    <div
+      ref="svgEl"
+      class="min-h-0 w-full overflow-hidden"
+    >
+      <svg
+        v-if="chartWidth > 0 && chartHeight > 0"
+        class="block h-full w-full"
+        :viewBox="`0 0 ${chartWidth} ${chartHeight}`"
+        role="img"
+        :aria-label="valueField"
+      >
+        <path
+          v-for="segment in segments"
+          :key="segment.id"
+          :d="segment.path"
+          :fill="segment.color"
+          fill-opacity="0.9"
+        >
+          <title>
+            {{ segment.label }}: {{ formatChartValue(segment.value) }} ({{ segment.percentLabel }})
+          </title>
+        </path>
+
+        <text
+          v-for="segment in segments"
+          v-show="segment.labelVisible"
+          :key="`value-${segment.id}`"
+          :x="chartWidth / 2"
+          :y="segment.centerY + 4"
+          fill="#ffffff"
+          font-size="12"
+          font-weight="600"
+          text-anchor="middle"
+        >
+          {{ formatChartValue(segment.value) }}
+        </text>
+      </svg>
+    </div>
+
+    <div class="grid min-w-0 gap-2 text-sm">
+      <div
+        v-for="segment in segments"
+        :key="`legend-${segment.id}`"
+        class="grid min-h-[34px] min-w-0 grid-cols-[1fr_auto] items-center gap-3"
+      >
+        <div class="flex min-w-0 items-center gap-2">
+          <span
+            class="h-2.5 w-2.5 shrink-0 rounded-full"
+            :style="{ backgroundColor: segment.color }"
+          />
+
+          <span class="truncate text-lightNavbarText dark:text-darkNavbarText">
+            {{ segment.shortLabel }}
+          </span>
+        </div>
+
+        <div class="text-right">
+          <div class="font-semibold text-lightNavbarText dark:text-darkNavbarText">
+            {{ formatChartValue(segment.value) }}
+          </div>
+
+          <div class="text-xs text-lightListTableText dark:text-darkListTableText">
+            {{ segment.percentLabel }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+
+
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useElementSize } from '../../../composables/useElementSize.js'
+import { useElementSize } from '../../composables/useElementSize.js'
 import {
   CHART_COLORS,
   formatChartAxisLabel,
   formatChartLabel,
   formatChartValue,
   toFiniteNumber,
-} from '../chart.utils.js'
+} from './chart.utils.js'
 
 const props = withDefaults(defineProps<{
   rows: Record<string, unknown>[]
@@ -121,79 +199,3 @@ const segments = computed(() => funnelRows.value.map((row, index) => {
   }
 }))
 </script>
-
-<template>
-  <div
-    ref="rootEl"
-    class="grid h-full min-h-0 w-full gap-4 overflow-hidden"
-    :class="isCompact ? 'grid-rows-[minmax(0,1fr)_auto]' : 'grid-cols-[minmax(0,1fr)_200px]'"
-  >
-    <div
-      ref="svgEl"
-      class="min-h-0 w-full overflow-hidden"
-    >
-      <svg
-        v-if="chartWidth > 0 && chartHeight > 0"
-        class="block h-full w-full"
-        :viewBox="`0 0 ${chartWidth} ${chartHeight}`"
-        role="img"
-        :aria-label="valueField"
-      >
-        <path
-          v-for="segment in segments"
-          :key="segment.id"
-          :d="segment.path"
-          :fill="segment.color"
-          fill-opacity="0.9"
-        >
-          <title>
-            {{ segment.label }}: {{ formatChartValue(segment.value) }} ({{ segment.percentLabel }})
-          </title>
-        </path>
-
-        <text
-          v-for="segment in segments"
-          v-show="segment.labelVisible"
-          :key="`value-${segment.id}`"
-          :x="chartWidth / 2"
-          :y="segment.centerY + 4"
-          fill="#ffffff"
-          font-size="12"
-          font-weight="600"
-          text-anchor="middle"
-        >
-          {{ formatChartValue(segment.value) }}
-        </text>
-      </svg>
-    </div>
-
-    <div class="grid min-w-0 gap-2 text-sm">
-      <div
-        v-for="segment in segments"
-        :key="`legend-${segment.id}`"
-        class="grid min-h-[34px] min-w-0 grid-cols-[1fr_auto] items-center gap-3"
-      >
-        <div class="flex min-w-0 items-center gap-2">
-          <span
-            class="h-2.5 w-2.5 shrink-0 rounded-full"
-            :style="{ backgroundColor: segment.color }"
-          />
-
-          <span class="truncate text-lightNavbarText dark:text-darkNavbarText">
-            {{ segment.shortLabel }}
-          </span>
-        </div>
-
-        <div class="text-right">
-          <div class="font-semibold text-lightNavbarText dark:text-darkNavbarText">
-            {{ formatChartValue(segment.value) }}
-          </div>
-
-          <div class="text-xs text-lightListTableText dark:text-darkListTableText">
-            {{ segment.percentLabel }}
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>