Function useChart

packages/charts/src/use-chart.ts:34–173

(props: UseChartProps<T>)

  | ((props: { min: number; max: number }) => [number, number])

export function useChart<T = any>(props: UseChartProps<T>) {
  const { data, series = [], sort } = props

  const id = React.useId()

  const [highlightedSeries, setHighlightedSeries] = React.useState<
    string | null
  >(null)
  const isHighlightedSeries = (name: string | undefined) =>
    highlightedSeries === name

  const env = useLocaleContext()
  const sys = useChakraContext()

  const color = (key: ChartColor | undefined) => sys.token(`colors.${key}`, key)
  const size = (key: ChartSize | undefined) => sys.token(`sizes.${key}`, key)
  const spacing = (key: ChartSpacing | undefined) =>
    sys.token(`spacing.${key}`, key)

  const key = <K extends ItemDataKey<T>>(prop: K | undefined): K =>
    prop ?? ("value" as K)

  const formatNumber = React.useCallback(
    (options?: Intl.NumberFormatOptions) => {
      const formatter = new Intl.NumberFormat(env.locale, options)
      return (value: number) => formatter.format(value)
    },
    [env.locale],
  )

  const formatDate = React.useCallback(
    (options?: Intl.DateTimeFormatOptions) => {
      return (value: string) =>
        new Date(value).toLocaleDateString(env.locale, options)
    },
    [env.locale],
  )

  const getSeries = (item: unknown) => {
    if (!isObject(item)) return
    const result = series.find((s) => {
      return (
        s.name === item.name ||
        s.name === getProp(item.payload, "name") ||
        s.name === item.dataKey ||
        s.name === getProp(item.payload, "dataKey")
      )
    }) || { color: undefined }

    result.color ||= getProp(item.payload, "color")
    result.label ||=
      result.name?.toLocaleString() || getProp(item.payload, "name")

    return result
  }

  const getTotal = (key: keyof T) => {
    return data.reduce((acc, d) => acc + Number(d[key]), 0)