@adminforth/dashboard 1.0.0

package/dist/custom/widgets/chart/funnel/FunnelChart.vue

@@ -0,0 +1,197 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useElementSize } from '../../../composables/useElementSize.js'
+import {
+  CHART_COLORS,
+  formatChartAxisLabel,
+  formatChartLabel,
+  formatChartValue,
+  toFiniteNumber,
+} from '../chart.utils.js'
+
+const props = withDefaults(defineProps<{
+  rows: Record<string, unknown>[]
+  labelField: string
+  valueField: string
+  colors?: string[]
+  height?: number
+}>(), {
+  height: 260,
+})
+
+const { el: rootEl, width: rootWidth } = useElementSize<HTMLDivElement>()
+const { el: svgEl, width: svgWidth, height: svgHeight } = useElementSize<HTMLDivElement>()
+
+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, 96)
+})
+const isCompact = computed(() => rootWidth.value > 0 && rootWidth.value < 420)
+
+const shouldCountRows = computed(() => /(^|_)id$/i.test(props.valueField))
+
+const funnelRows = computed(() => {
+  const groupedRows = new Map<string, { label: string, value: number }>()
+
+  for (const row of props.rows) {
+    const label = formatChartLabel(row[props.labelField])
+    const item = groupedRows.get(label) ?? { label, value: 0 }
+
+    item.value += shouldCountRows.value
+      ? 1
+      : toFiniteNumber(row[props.valueField])
+
+    groupedRows.set(label, item)
+  }
+
+  return Array.from(groupedRows.values())
+    .filter((row) => row.value > 0)
+    .sort((left, right) => right.value - left.value)
+})
+
+const maxValue = computed(() => {
+  return Math.max(...funnelRows.value.map((row) => row.value), 1)
+})
+
+const totalValue = computed(() => {
+  return funnelRows.value.reduce((sum, row) => sum + row.value, 0)
+})
+
+const segmentGap = computed(() => {
+  return Math.max(Math.min(Math.floor(chartHeight.value * 0.03), 10), 4)
+})
+
+const segmentHeight = computed(() => {
+  const count = Math.max(funnelRows.value.length, 1)
+
+  return Math.max((chartHeight.value - (count - 1) * segmentGap.value) / count, 1)
+})
+
+const minSegmentWidth = computed(() => {
+  return Math.max(Math.floor(chartWidth.value * 0.14), 36)
+})
+
+const segments = computed(() => funnelRows.value.map((row, index) => {
+  const nextRow = funnelRows.value[index + 1]
+
+  const topWidth = Math.max(
+    (row.value / maxValue.value) * chartWidth.value,
+    minSegmentWidth.value,
+  )
+
+  const bottomWidth = Math.max(
+    nextRow ? (nextRow.value / maxValue.value) * chartWidth.value : topWidth * 0.5,
+    minSegmentWidth.value,
+  )
+
+  const yTop = index * (segmentHeight.value + segmentGap.value)
+  const yBottom = yTop + segmentHeight.value
+
+  const xTop = (chartWidth.value - topWidth) / 2
+  const xBottom = (chartWidth.value - bottomWidth) / 2
+
+  const percent = totalValue.value > 0
+    ? (row.value / totalValue.value) * 100
+    : 0
+
+  return {
+    id: `${row.label}-${index}`,
+    label: row.label,
+    shortLabel: formatChartAxisLabel(row.label, 22),
+    value: row.value,
+    percentLabel: `${new Intl.NumberFormat(undefined, {
+      maximumFractionDigits: 1,
+    }).format(percent)}%`,
+    color: props.colors?.[index] || CHART_COLORS[index % CHART_COLORS.length],
+    path: [
+      `M ${xTop} ${yTop}`,
+      `L ${xTop + topWidth} ${yTop}`,
+      `L ${xBottom + bottomWidth} ${yBottom}`,
+      `L ${xBottom} ${yBottom}`,
+      'Z',
+    ].join(' '),
+    centerY: yTop + segmentHeight.value / 2,
+    labelVisible: segmentHeight.value >= 24 && Math.min(topWidth, bottomWidth) >= Math.max(chartWidth.value * 0.22, 96),
+  }
+}))
+</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>

package/dist/custom/widgets/chart/histogram/HistogramChart.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import BarChart from '../bar/BarChart.vue'
+
+defineProps<{
+  rows: Record<string, unknown>[]
+  labelField: string
+  valueField: string
+  color?: string
+  height?: number
+}>()
+</script>
+
+<template>
+  <BarChart
+    :rows="rows"
+    :label-field="labelField"
+    :value-field="valueField"
+    :color="color"
+    :height="height"
+  />
+</template>

package/dist/custom/widgets/chart/line/LineChart.vue

@@ -0,0 +1,175 @@
+<template>
+  <div
+    ref="rootEl"
+    class="h-full 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="seriesName || yField"
+    >
+      <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>
+
+      <path
+        v-if="fillPath"
+        :d="fillPath"
+        :fill="chartColor"
+        fill-opacity="0.12"
+      />
+      <path
+        v-if="linePath"
+        :d="linePath"
+        fill="none"
+        :stroke="chartColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="5"
+      />
+
+      <g>
+        <circle
+          v-for="point in points"
+          :key="`${point.label}-${point.x}`"
+          :cx="point.x"
+          :cy="point.y"
+          :fill="chartColor"
+          r="4"
+        >
+          <title>{{ point.label }}: {{ formatChartValue(point.value) }}</title>
+        </circle>
+      </g>
+
+      <g class="text-lightListTableText dark:text-darkListTableText">
+        <text
+          v-for="point in xLabels"
+          :key="`x-${point.x}`"
+          :x="point.x"
+          :y="chartHeight - 10"
+          fill="currentColor"
+          font-size="11"
+          text-anchor="middle"
+        >
+          {{ point.axisLabel }}
+        </text>
+      </g>
+    </svg>
+  </div>
+</template>
+
+
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useElementSize } from '../../../composables/useElementSize.js'
+import { CHART_COLORS, formatChartAxisLabel, formatChartLabel, formatChartValue, toFiniteNumber } from '../chart.utils.js'
+
+const props = withDefaults(defineProps<{
+  rows: Record<string, unknown>[]
+  xField: string
+  yField: string
+  seriesName?: string
+  color?: string
+  height?: number
+}>(), {
+  height: 240,
+})
+
+const { el: rootEl, width: rootWidth, height: rootHeight } = useElementSize<HTMLDivElement>()
+
+const padding = {
+  top: 12,
+  right: 6,
+  bottom: 24,
+  left: 38,
+}
+const chartWidth = computed(() => Math.max(rootWidth.value, 1))
+const chartHeight = computed(() => {
+  if (rootHeight.value > 0) {
+    return Math.max(rootHeight.value, 1)
+  }
+
+  return Math.max(props.height, 1)
+})
+
+const chartColor = computed(() => props.color || CHART_COLORS[0])
+const values = computed(() => props.rows.map((row) => toFiniteNumber(row[props.yField])))
+const maxValue = computed(() => Math.max(...values.value, 1))
+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 points = computed(() => {
+  if (props.rows.length === 1) {
+    return [{
+      x: padding.left + innerWidth.value / 2,
+      y: padding.top + innerHeight.value - (values.value[0] / maxValue.value) * innerHeight.value,
+      label: formatChartLabel(props.rows[0][props.xField]),
+      axisLabel: formatChartAxisLabel(props.rows[0][props.xField]),
+      value: values.value[0],
+    }]
+  }
+
+  return props.rows.map((row, index) => ({
+    x: padding.left + (index / (props.rows.length - 1)) * innerWidth.value,
+    y: padding.top + innerHeight.value - (values.value[index] / maxValue.value) * innerHeight.value,
+    label: formatChartLabel(row[props.xField]),
+    axisLabel: formatChartAxisLabel(row[props.xField]),
+    value: values.value[index],
+  }))
+})
+
+const linePath = computed(() => points.value
+  .map((point, index) => `${index === 0 ? 'M' : 'L'} ${point.x} ${point.y}`)
+  .join(' '))
+
+const fillPath = computed(() => {
+  if (!points.value.length) {
+    return ''
+  }
+
+  const first = points.value[0]
+  const last = points.value[points.value.length - 1]
+  return `${linePath.value} L ${last.x} ${padding.top + innerHeight.value} L ${first.x} ${padding.top + innerHeight.value} Z`
+})
+
+const yTicks = computed(() => [0, 0.5, 1].map((ratio) => ({
+  value: maxValue.value * (1 - ratio),
+  y: padding.top + innerHeight.value * ratio,
+})))
+
+const xLabels = computed(() => {
+  if (points.value.length <= 4) {
+    return points.value
+  }
+
+  return [
+    points.value[0],
+    points.value[Math.floor(points.value.length / 3)],
+    points.value[Math.floor((points.value.length * 2) / 3)],
+    points.value[points.value.length - 1],
+  ]
+})
+</script>

package/dist/custom/widgets/chart/pie/PieChart.vue

@@ -0,0 +1,161 @@
+<template>
+  <div
+    ref="rootEl"
+    class="grid h-full min-h-0 w-full gap-5 overflow-hidden"
+    :class="isCompact ? 'grid-rows-[minmax(0,1fr)_auto]' : 'grid-cols-[minmax(160px,260px)_minmax(0,1fr)] items-center'"
+  >
+    <div
+      ref="chartEl"
+      class="relative mx-auto grid min-h-0 w-full place-items-center overflow-hidden"
+    >
+      <svg
+        v-if="size > 0"
+        class="shrink-0 -rotate-90 drop-shadow-sm"
+        :width="size"
+        :height="size"
+        :viewBox="`0 0 ${size} ${size}`"
+        role="img"
+        :aria-label="valueField"
+      >
+        <circle
+          :cx="center"
+          :cy="center"
+          :r="radius"
+          class="text-lightListBorder dark:text-darkListBorder"
+          fill="none"
+          stroke="currentColor"
+          :stroke-width="strokeWidth"
+        />
+        <circle
+          v-for="slice in slices"
+          :key="slice.id"
+          :cx="center"
+          :cy="center"
+          :r="radius"
+          :stroke="slice.color"
+          :stroke-dasharray="slice.dashArray"
+          :stroke-dashoffset="slice.dashOffset"
+          fill="none"
+          pathLength="100"
+          stroke-linecap="butt"
+          :stroke-width="strokeWidth"
+        >
+          <title>{{ slice.label }}: {{ formatChartValue(slice.value) }} ({{ slice.percentLabel }})</title>
+        </circle>
+      </svg>
+
+      <div class="absolute inset-0 grid place-items-center text-center">
+        <div>
+          <div class="text-2xl font-bold text-lightNavbarText dark:text-darkNavbarText">
+            {{ formatChartValue(total) }}
+          </div>
+          <div class="text-xs uppercase tracking-wide text-lightListTableText dark:text-darkListTableText">
+            Total
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="grid min-w-0 gap-3">
+      <div
+        v-for="slice in slices"
+        :key="`legend-${slice.id}`"
+        class="grid min-w-0 grid-cols-[1fr_auto] items-center gap-3 text-sm"
+      >
+        <div class="flex min-w-0 items-center gap-2">
+          <span
+            class="h-3 w-3 shrink-0 rounded-full"
+            :style="{ backgroundColor: slice.color }"
+          />
+          <span class="truncate font-medium text-lightNavbarText dark:text-darkNavbarText">
+            {{ slice.label }}
+          </span>
+        </div>
+
+        <div class="text-right">
+          <div class="font-semibold text-lightNavbarText dark:text-darkNavbarText">
+            {{ slice.percentLabel }}
+          </div>
+          <div class="text-xs text-lightListTableText dark:text-darkListTableText">
+            {{ formatChartValue(slice.value) }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useElementSize } from '../../../composables/useElementSize.js'
+import { CHART_COLORS, formatChartLabel, formatChartValue, toFiniteNumber } from '../chart.utils.js'
+
+const props = withDefaults(defineProps<{
+  rows: Record<string, unknown>[]
+  labelField: string
+  valueField: string
+  colors?: string[]
+  height?: number
+}>(), {
+  height: 240,
+})
+
+const { el: rootEl, width: rootWidth } = useElementSize<HTMLDivElement>()
+const { el: chartEl, width: chartWidth, height: chartHeight } = useElementSize<HTMLDivElement>()
+
+const isCompact = computed(() => rootWidth.value > 0 && rootWidth.value < 420)
+
+const size = computed(() => {
+  const measured = Math.min(chartWidth.value, chartHeight.value)
+
+  if (measured > 0) {
+    return Math.min(Math.max(measured, 1), 320)
+  }
+
+  return Math.min(Math.max(props.height, 96), 320)
+})
+const center = computed(() => size.value / 2)
+const strokeWidth = computed(() => Math.max(Math.round(size.value * 0.12), 18))
+const radius = computed(() => Math.max(size.value / 2 - strokeWidth.value / 2 - 4, 1))
+const shouldCountRows = computed(() => /(^|_)id$/i.test(props.valueField))
+
+const pieRows = computed(() => {
+  const groupedRows = new Map<string, { label: string, value: number }>()
+
+  for (const row of props.rows) {
+    const label = formatChartLabel(row[props.labelField])
+    const item = groupedRows.get(label) ?? { label, value: 0 }
+    item.value += shouldCountRows.value ? 1 : toFiniteNumber(row[props.valueField])
+    groupedRows.set(label, item)
+  }
+
+  return Array.from(groupedRows.values())
+})
+
+const total = computed(() => pieRows.value.reduce((sum, row) => sum + row.value, 0))
+
+const slices = computed(() => {
+  let offset = 0
+
+  return pieRows.value.map((row, index) => {
+    const value = row.value
+    const share = total.value > 0 ? value / total.value : 0
+    const percent = share * 100
+    const slice = {
+      id: `${row.label}-${index}`,
+      label: row.label,
+      value,
+      share,
+      percentLabel: `${new Intl.NumberFormat(undefined, { maximumFractionDigits: 1 }).format(percent)}%`,
+      dashArray: `${Math.max(percent - 0.6, 0)} ${100 - Math.max(percent - 0.6, 0)}`,
+      dashOffset: -offset,
+      color: props.colors?.[index] || CHART_COLORS[index % CHART_COLORS.length],
+    }
+
+    offset += percent
+    return slice
+  })
+})
+</script>