Update colors

Author: alrocar

dashboard/ai-analytics/src/app/components/CostPredictionModal.tsx

@@ -54,7 +54,13 @@ interface DateAggregatedData {
 }
 
 // Add default colors constant at the top level
-const defaultColors = ['#27F795', '#3CCC70', '#40A25F', '#34836E', '#2B6D5C'];
+const defaultColors = [
+  '#27F795',  // 100% opacity
+  '#27F795CC', // 80% opacity
+  '#27F79599', // 60% opacity
+  '#27F79566', // 40% opacity
+  '#27F79533'  // 20% opacity
+];
 
 export default function CostPredictionModal({ 
   isOpen, 

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

@@ -10,7 +10,13 @@ import {
 import CustomTooltip from './CustomTooltip';
 
   // Default colors for all categories
-  const defaultColors = ['#27F795', '#3CCC70', '#40A25F', '#34836E', '#2B6D5C'];
+  const defaultColors = [
+    '#27F795',  // 100% opacity
+    '#27F795CC', // 80% opacity
+    '#27F79599', // 60% opacity
+    '#27F79566', // 40% opacity
+    '#27F79533'  // 20% opacity
+  ];
 
   type ChartType = 'area' | 'line' | 'bar' | 'stacked-bar' | 'stacked-area';
 

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

@@ -57,7 +57,13 @@ export default function TimeseriesChart({ data, filters, onFiltersChange }: Time
   const models = [...new Set(data.data.map(d => d.category))];
 
   // Default colors for unknown models
-  const defaultColors = ['#27F795', '#3CCC70', '#40A25F', '#34836E', '#2B6D5C'];
+  const defaultColors = [
+    '#27F795',  // 100% opacity
+    '#27F795CC', // 80% opacity
+    '#27F79599', // 60% opacity
+    '#27F79566', // 40% opacity
+    '#27F79533'  // 20% opacity
+  ];
 
   // Use the same approach for all tabs - just use default colors in sequence
   const transformedData = dates.map(date => {

dashboard/ai-analytics/tailwind.config.js

@@ -118,7 +118,7 @@ module.exports = {
         /^(fill-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
     },
     // Add custom colors to safelist using flatMap
-    ...['#27F795', '#3CCC70', '#40A25F', '#34836E', '#2B6D5C'].flatMap((customColor) => [
+    ...['#27F795', '#27F795CC', '#27F79599', '#27F79566', '#27F79533'].flatMap((customColor) => [
       `bg-[${customColor}]`,
       `border-[${customColor}]`,
       `hover:bg-[${customColor}]`,

tinybird/endpoints/llm_usage.pipe

@@ -54,6 +54,6 @@ SQL >
     category,
     {% end %} 
     date
-    order by date ASC
+    order by total_cost desc
 
 TYPE endpoint