Category Bar

1'use client'
2 
3import React from 'react'
4 
5import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
6 
7import { cn } from '@/lib/utils'
8 
9const DEFAULT_BAR_COLOR = 'bg-muted'
10 
11const getMarkerBgColor = (marker: number | undefined, values: number[], colors: string[]): string => {
12  if (marker === undefined) return ''
13 
14  if (marker === 0) {
15    for (let index = 0; index < values.length; index++) {
16      if (values[index] > 0) {
17        return colors[index] ?? DEFAULT_BAR_COLOR
18      }
19    }
20  }
21 
22  let prefixSum = 0
23 
24  for (let index = 0; index < values.length; index++) {
25    prefixSum += values[index]
26 
27    if (prefixSum >= marker) {
28      return colors[index] ?? DEFAULT_BAR_COLOR
29    }
30  }
31 
32  return colors[values.length - 1] ?? DEFAULT_BAR_COLOR
33}
34 
35const getPositionLeft = (value: number | undefined, maxValue: number): number => (value ? (value / maxValue) * 100 : 0)
36 
37const sumNumericArray = (arr: number[]) => arr.reduce((prefixSum, num) => prefixSum + num, 0)
38 
39const formatNumber = (num: number): string => {
40  if (Number.isInteger(num)) {
41    return num.toString()
42  }
43 
44  return num.toFixed(1)
45}
46 
47const BarLabels = ({ values }: { values: number[] }) => {
48  const sumValues = React.useMemo(() => sumNumericArray(values), [values])
49 
50  const labels = React.useMemo(() => {
51    type Label = { showLabel: boolean; prefixSum: number; widthPositionLeft: number }
52 
53    return values.reduce<{ prefixSum: number; hidden: number; items: Label[] }>(
54      (state, widthPercentage) => {
55        const prefixSum = state.prefixSum + widthPercentage
56 
57        const showLabel =
58          (widthPercentage >= 0.1 * sumValues || state.hidden >= 0.09 * sumValues) &&
59          sumValues - prefixSum >= 0.1 * sumValues &&
60          prefixSum >= 0.1 * sumValues &&
61          prefixSum < 0.9 * sumValues
62 
63        return {
64          prefixSum,
65          hidden: showLabel ? 0 : state.hidden + widthPercentage,
66          items: [...state.items, { showLabel, prefixSum, widthPositionLeft: getPositionLeft(widthPercentage, sumValues) }]
67        }
68      },
69      { prefixSum: 0, hidden: 0, items: [] }
70    ).items
71  }, [values, sumValues])
72 
73  return (
74    <div
75      className={cn(
76        'relative mb-2 flex h-5 w-full text-sm font-medium',
77 
78        // text color
79        'text-muted-foreground'
80      )}
81    >
82      <div className='absolute bottom-0 left-0 flex items-center'>0</div>
83      {labels.map((label, index) => (
84        <div
85          key={`item-${index}`}
86// … truncated