tessl/npm-tremor--react

Tremor React is a comprehensive React component library built on Tailwind CSS providing 60+ components for building data visualizations, charts, and analytical dashboards.

Overview

Eval results

Files

Common Props & Type Definitions

Name: tessl/npm-tremor--react
Author: tessl

This document contains shared interfaces and types used across multiple Tremor components. Reference this to avoid duplication.

Core Types

// Value formatting
type ValueFormatter = (value: number) => string;

// Colors
type Color = "slate" | "gray" | "zinc" | "neutral" | "stone" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
type CustomColor = Color | string;

// Sizing
type Size = "xs" | "sm" | "md" | "lg" | "xl";

// Chart curves
type CurveType = "linear" | "natural" | "monotone" | "step";
type IntervalType = "preserveStartEnd" | "equidistantPreserveStart";

// Delta/change indicators
type DeltaType = "increase" | "moderateIncrease" | "decrease" | "moderateDecrease" | "unchanged";

// Button & Icon variants
type ButtonVariant = "primary" | "secondary" | "light";
type IconVariant = "simple" | "light" | "shadow" | "solid" | "outlined";

// Layout
type FlexDirection = "row" | "col" | "row-reverse" | "col-reverse";
type JustifyContent = "start" | "end" | "center" | "between" | "around" | "evenly";
type AlignItems = "start" | "end" | "center" | "baseline" | "stretch";

Chart Event Props

// Event payload for chart interactions
type EventProps = {
  eventType: "dot" | "category" | "bar" | "slice" | "bubble";
  categoryClicked: string;
  [key: string]: number | string;
} | null | undefined;

// Custom tooltip props
type CustomTooltipProps = {
  payload: any[] | undefined;
  active: boolean | undefined;
  label: any | undefined;
};

Base Chart Props

All full-size chart components (AreaChart, BarChart, LineChart) share these base props:

interface BaseChartProps {
  // Data (required)
  data: any[];
  categories: string[];
  index: string;

  // Styling
  colors?: (Color | string)[];
  valueFormatter?: ValueFormatter;

  // Axes
  startEndOnly?: boolean;
  showXAxis?: boolean;
  showYAxis?: boolean;
  yAxisWidth?: number;
  intervalType?: IntervalType;
  rotateLabelX?: { angle: number; verticalShift?: number; xAxisHeight?: number };
  tickGap?: number;
  xAxisLabel?: string;
  yAxisLabel?: string;

  // Display
  showTooltip?: boolean;
  showLegend?: boolean;
  showGridLines?: boolean;
  showAnimation?: boolean;
  animationDuration?: number;

  // Scale
  autoMinValue?: boolean;
  minValue?: number;
  maxValue?: number;
  allowDecimals?: boolean;

  // Interactions
  onValueChange?: (value: EventProps) => void;
  customTooltip?: React.ComponentType<CustomTooltipProps>;
  enableLegendSlider?: boolean;

  // Misc
  noDataText?: string;
  padding?: { left?: number; right?: number };
}

Common Input Props

Shared by TextInput, NumberInput, Select, etc:

interface CommonInputProps {
  error?: boolean;
  errorMessage?: string;
  disabled?: boolean;
  placeholder?: string;
  icon?: React.ElementType | React.JSXElementConstructor<any>;
}

Utility Functions

function getIsBaseColor(color: Color | string): boolean;

Common Formatters

// Currency
const currencyFormatter: ValueFormatter = (v) => `$${v.toLocaleString()}`;

// Percentage
const percentFormatter: ValueFormatter = (v) => `${v.toFixed(1)}%`;

// Compact
const compactFormatter: ValueFormatter = (v) => {
  if (v >= 1000000) return `${(v / 1000000).toFixed(1)}M`;
  if (v >= 1000) return `${(v / 1000).toFixed(1)}K`;
  return v.toString();
};

Install with Tessl CLI