Utilities

chartUtils

Collection of utitlities used in charts.

GitHub

Components using chartUtils:

  • LineChart
  • AreaChart

chartColors

You can use the chartColors utility to ensure that all chart components have the same colors. This approach lets you set the colors once. Note, that you could define different colors for dark mode too.

Because we use Tailwind CSS to define the colors, make sure the path to this file is inlcuded in the tailwind.config content section.

Installation

  1. 1

    Add the following code to your chartUtils.ts file.

    // Tremor Raw chartColors [v0.0.0]
export type ColorUtility = "bg" | "stroke" | "fill" | "text"
export const chartColors = {  blue: {    bg: "bg-blue-500",    stroke: "stroke-blue-500",    fill: "fill-blue-500",    text: "text-blue-500",  },  emerald: {    bg: "bg-emerald-500",    stroke: "stroke-emerald-500",    fill: "fill-emerald-500",    text: "text-emerald-500",  },  violet: {    bg: "bg-violet-500",    stroke: "stroke-violet-500",    fill: "fill-violet-500",    text: "text-violet-500",  },  amber: {    bg: "bg-amber-500",    stroke: "stroke-amber-500",    fill: "fill-amber-500",    text: "text-amber-500",  },  gray: {    bg: "bg-gray-500",    stroke: "stroke-gray-500",    fill: "fill-gray-500",    text: "text-gray-500",  },  cyan: {    bg: "bg-cyan-500",    stroke: "stroke-cyan-500",    fill: "fill-cyan-500",    text: "text-cyan-500",  },  pink: {    bg: "bg-pink-500",    stroke: "stroke-pink-500",    fill: "fill-pink-500",    text: "text-pink-500",  },} as const satisfies {  [color: string]: {    [key in ColorUtility]: string  }}
export type AvailableChartColorsKeys = keyof typeof chartColors
export const AvailableChartColors: AvailableChartColorsKeys[] = Object.keys(  chartColors,) as Array<AvailableChartColorsKeys>
export const constructCategoryColors = (  categories: string[],  colors: AvailableChartColorsKeys[],): Map<string, AvailableChartColorsKeys> => {  const categoryColors = new Map<string, AvailableChartColorsKeys>()  categories.forEach((category, index) => {    categoryColors.set(category, colors[index % colors.length])  })  return categoryColors}
export const getColorClassName = (  color: AvailableChartColorsKeys,  type: ColorUtility,): string => {  const fallbackColor = {    bg: "bg-gray-500",    stroke: "stroke-gray-500",    fill: "fill-gray-500",    text: "text-gray-500",  }  return chartColors[color]?.[type] ?? fallbackColor[type]}

getYAxisDomain

The getYAxisDomain utility is used to manage the y-axis formatting in charts, when minValue, maxValue, or autoMinValue are passed to the props.

Installation

  1. 1

    Add the following code to your chartUtils.ts file.

    // Tremor Raw getYAxisDomain [v0.0.0]
export const getYAxisDomain = (  autoMinValue: boolean,  minValue: number | undefined,  maxValue: number | undefined,) => {  const minDomain = autoMinValue ? "auto" : minValue ?? 0  const maxDomain = maxValue ?? "auto"  return [minDomain, maxDomain]}

hasOnlyOneValueForKey

The hasOnlyOneValueForKey utility checks if all objects in an array have the same value for a specified key. If all objects have the same value for the given key, it returns true; otherwise, it returns false.

Installation

  1. 1

    Add the following code to your chartUtils.ts file.

    // Tremor Raw hasOnlyOneValueForKey [v0.1.0]
export function hasOnlyOneValueForKey(  array: any[],  keyToCheck: string,): boolean {  const val: any[] = []
  for (const obj of array) {    if (Object.prototype.hasOwnProperty.call(obj, keyToCheck)) {      val.push(obj[keyToCheck])      if (val.length > 1) {        return false      }    }  }
  return true}