Skip to content

Commit 165838a

Browse files
alrocaralrocar
committed
style fixes
1 parent 6bbfa30 commit 165838a

File tree

2 files changed

+24
-39
lines changed

2 files changed

+24
-39
lines changed

‎dashboard/ai-analytics/src/app/components/SparkChart.tsx‎

Lines changed: 4 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,7 @@ import {
88
AreaChart,
99
} from '@tremor/react';
1010

11-
12-
// Create consistent color mapping with divergent colors
13-
const colorMap = {
14-
'gpt-4': 'orange',
15-
'gpt-3.5-turbo': 'cyan',
16-
'gpt-4-turbo': 'amber',
17-
'claude-2': 'teal',
18-
// Add more models as needed
19-
};
20-
21-
// Default colors for unknown models
11+
// Default colors for all categories
2212
const defaultColors = ['orange', 'cyan', 'amber', 'teal', 'lime', 'pink'];
2313

2414
type ChartType = 'area' | 'line' | 'bar' | 'stacked-bar' | 'stacked-area';
@@ -52,10 +42,9 @@ import {
5242

5343
const isStacked = chartType.startsWith('stacked-');
5444

55-
// Map colors consistently with TimeseriesChart
56-
const colors = categories.map(category =>
57-
colorMap[category as keyof typeof colorMap] ||
58-
defaultColors[categories.indexOf(category) % defaultColors.length]
45+
// Assign colors based on index in the categories array
46+
const colors = categories.map((_, index) =>
47+
defaultColors[index % defaultColors.length]
5948
);
6049

6150
return (

‎dashboard/ai-analytics/src/app/components/TimeseriesChart.tsx‎

Lines changed: 20 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -53,18 +53,10 @@ export default function TimeseriesChart({ data, filters, onFiltersChange }: Time
5353
const dates = [...new Set(data.data.map(d => d.date))].sort();
5454
const models = [...new Set(data.data.map(d => d.category))];
5555

56-
// Create consistent color mapping with divergent colors
57-
const colorMap = {
58-
'gpt-4': 'orange',
59-
'gpt-3.5-turbo': 'cyan',
60-
'gpt-4-turbo': 'amber',
61-
'claude-2': 'teal',
62-
// Add more models as needed
63-
};
64-
6556
// Default colors for unknown models
6657
const defaultColors = ['orange', 'cyan', 'amber', 'teal', 'lime', 'pink'];
6758

59+
// Use the same approach for all tabs - just use default colors in sequence
6860
const transformedData = dates.map(date => {
6961
const dayData = data.data.filter(d => d.date === date);
7062
return {
@@ -85,41 +77,41 @@ export default function TimeseriesChart({ data, filters, onFiltersChange }: Time
8577
key: 'model',
8678
data: transformedData,
8779
categories: models,
88-
colors: models.map(model => colorMap[model as keyof typeof colorMap] || defaultColors[models.indexOf(model) % defaultColors.length]),
89-
summary: models.map(model => ({
80+
colors: models.map((_, index) => defaultColors[index % defaultColors.length]),
81+
summary: models.map((model, index) => ({
9082
name: model,
9183
total: data.data
9284
.filter(d => d.category === model)
9385
.reduce((sum, item) => sum + item.total_cost, 0),
94-
color: `bg-${colorMap[model as keyof typeof colorMap] || defaultColors[models.indexOf(model) % defaultColors.length]}-500`,
86+
color: `bg-${defaultColors[index % defaultColors.length]}-500`,
9587
})),
9688
},
9789
{
9890
name: 'Provider',
9991
key: 'provider',
10092
data: transformedData,
10193
categories: models,
102-
colors: defaultColors,
103-
summary: models.map(model => ({
94+
colors: models.map((_, index) => defaultColors[index % defaultColors.length]),
95+
summary: models.map((model, index) => ({
10496
name: model,
10597
total: data.data
10698
.filter(d => d.category === model)
10799
.reduce((sum, item) => sum + item.total_cost, 0),
108-
color: `bg-${defaultColors[models.indexOf(model) % defaultColors.length]}-500`,
100+
color: `bg-${defaultColors[index % defaultColors.length]}-500`,
109101
})),
110102
},
111103
{
112104
name: 'Environment',
113105
key: 'environment',
114106
data: transformedData,
115107
categories: models,
116-
colors: defaultColors,
117-
summary: models.map(model => ({
108+
colors: models.map((_, index) => defaultColors[index % defaultColors.length]),
109+
summary: models.map((model, index) => ({
118110
name: model,
119111
total: data.data
120112
.filter(d => d.category === model)
121113
.reduce((sum, item) => sum + item.total_cost, 0),
122-
color: `bg-${defaultColors[models.indexOf(model) % defaultColors.length]}-500`,
114+
color: `bg-${defaultColors[index % defaultColors.length]}-500`,
123115
})),
124116
}
125117
];
@@ -130,13 +122,13 @@ export default function TimeseriesChart({ data, filters, onFiltersChange }: Time
130122
key: 'organization',
131123
data: transformedData,
132124
categories: models,
133-
colors: defaultColors,
134-
summary: models.map(model => ({
125+
colors: models.map((_, index) => defaultColors[index % defaultColors.length]),
126+
summary: models.map((model, index) => ({
135127
name: model,
136128
total: data.data
137129
.filter(d => d.category === model)
138130
.reduce((sum, item) => sum + item.total_cost, 0),
139-
color: `bg-${defaultColors[models.indexOf(model) % defaultColors.length]}-500`,
131+
color: `bg-${defaultColors[index % defaultColors.length]}-500`,
140132
})),
141133
})
142134
}
@@ -157,6 +149,10 @@ export default function TimeseriesChart({ data, filters, onFiltersChange }: Time
157149
// Determine the default index - use 'model' if no column_name is specified
158150
const defaultIndex = tabs.findIndex(t => t.key === (searchParams.get('column_name') || 'model'));
159151

152+
// Add $ sign to the value formatter for costs
153+
const costValueFormatter = (number: number) =>
154+
`$${Intl.NumberFormat('us').format(number).toString()}`;
155+
160156
return (
161157
<Card className="h-full p-0 rounded-none border-0" style={{ boxShadow: '-1px 0 0 0 rgb(55 65 81)' }}>
162158
<div className="flex h-full flex-col">
@@ -207,7 +203,7 @@ export default function TimeseriesChart({ data, filters, onFiltersChange }: Time
207203
aria-hidden={true}
208204
/>
209205
<p className="font-semibold text-tremor-content-strong dark:text-dark-tremor-content-strong">
210-
{valueFormatter(item.total)}
206+
${valueFormatter(item.total)}
211207
</p>
212208
</div>
213209
<p className="whitespace-nowrap text-tremor-default text-tremor-content dark:text-dark-tremor-content">
@@ -225,7 +221,7 @@ export default function TimeseriesChart({ data, filters, onFiltersChange }: Time
225221
stack={true}
226222
showLegend={false}
227223
yAxisWidth={45}
228-
valueFormatter={valueFormatter}
224+
valueFormatter={costValueFormatter}
229225
className="h-[calc(100%-24px)] mt-10 hidden md:block"
230226
showTooltip={true}
231227
showAnimation={true}
@@ -239,7 +235,7 @@ export default function TimeseriesChart({ data, filters, onFiltersChange }: Time
239235
stack={true}
240236
showLegend={false}
241237
showYAxis={false}
242-
valueFormatter={valueFormatter}
238+
valueFormatter={costValueFormatter}
243239
className="h-[calc(100%-24px)] mt-6 md:hidden"
244240
showTooltip={true}
245241
showAnimation={true}

0 commit comments

Comments
 (0)