0
# Common Props & Type Definitions
1
2
This document contains shared interfaces and types used across multiple Tremor components. Reference this to avoid duplication.
3
4
## Core Types
5
6
```typescript { .api }
7
// Value formatting
8
type ValueFormatter = (value: number) => string;
9
10
// Colors
11
type Color = "slate" | "gray" | "zinc" | "neutral" | "stone" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
12
type CustomColor = Color | string;
13
14
// Sizing
15
type Size = "xs" | "sm" | "md" | "lg" | "xl";
16
17
// Chart curves
18
type CurveType = "linear" | "natural" | "monotone" | "step";
19
type IntervalType = "preserveStartEnd" | "equidistantPreserveStart";
20
21
// Delta/change indicators
22
type DeltaType = "increase" | "moderateIncrease" | "decrease" | "moderateDecrease" | "unchanged";
23
24
// Button & Icon variants
25
type ButtonVariant = "primary" | "secondary" | "light";
26
type IconVariant = "simple" | "light" | "shadow" | "solid" | "outlined";
27
28
// Layout
29
type FlexDirection = "row" | "col" | "row-reverse" | "col-reverse";
30
type JustifyContent = "start" | "end" | "center" | "between" | "around" | "evenly";
31
type AlignItems = "start" | "end" | "center" | "baseline" | "stretch";
32
```
33
34
## Chart Event Props
35
36
```typescript { .api }
37
// Event payload for chart interactions
38
type EventProps = {
39
eventType: "dot" | "category" | "bar" | "slice" | "bubble";
40
categoryClicked: string;
41
[key: string]: number | string;
42
} | null | undefined;
43
44
// Custom tooltip props
45
type CustomTooltipProps = {
46
payload: any[] | undefined;
47
active: boolean | undefined;
48
label: any | undefined;
49
};
50
```
51
52
## Base Chart Props
53
54
All full-size chart components (AreaChart, BarChart, LineChart) share these base props:
55
56
```typescript { .api }
57
interface BaseChartProps {
58
// Data (required)
59
data: any[];
60
categories: string[];
61
index: string;
62
63
// Styling
64
colors?: (Color | string)[];
65
valueFormatter?: ValueFormatter;
66
67
// Axes
68
startEndOnly?: boolean;
69
showXAxis?: boolean;
70
showYAxis?: boolean;
71
yAxisWidth?: number;
72
intervalType?: IntervalType;
73
rotateLabelX?: { angle: number; verticalShift?: number; xAxisHeight?: number };
74
tickGap?: number;
75
xAxisLabel?: string;
76
yAxisLabel?: string;
77
78
// Display
79
showTooltip?: boolean;
80
showLegend?: boolean;
81
showGridLines?: boolean;
82
showAnimation?: boolean;
83
animationDuration?: number;
84
85
// Scale
86
autoMinValue?: boolean;
87
minValue?: number;
88
maxValue?: number;
89
allowDecimals?: boolean;
90
91
// Interactions
92
onValueChange?: (value: EventProps) => void;
93
customTooltip?: React.ComponentType<CustomTooltipProps>;
94
enableLegendSlider?: boolean;
95
96
// Misc
97
noDataText?: string;
98
padding?: { left?: number; right?: number };
99
}
100
```
101
102
## Common Input Props
103
104
Shared by TextInput, NumberInput, Select, etc:
105
106
```typescript { .api }
107
interface CommonInputProps {
108
error?: boolean;
109
errorMessage?: string;
110
disabled?: boolean;
111
placeholder?: string;
112
icon?: React.ElementType | React.JSXElementConstructor<any>;
113
}
114
```
115
116
## Utility Functions
117
118
```typescript { .api }
119
function getIsBaseColor(color: Color | string): boolean;
120
```
121
122
## Common Formatters
123
124
```typescript
125
// Currency
126
const currencyFormatter: ValueFormatter = (v) => `$${v.toLocaleString()}`;
127
128
// Percentage
129
const percentFormatter: ValueFormatter = (v) => `${v.toFixed(1)}%`;
130
131
// Compact
132
const compactFormatter: ValueFormatter = (v) => {
133
if (v >= 1000000) return `${(v / 1000000).toFixed(1)}M`;
134
if (v >= 1000) return `${(v / 1000).toFixed(1)}K`;
135
return v.toString();
136
};
137
```
138