feat: use colored product icons in chart tooltips for SKU groups

Replace the colored ● dot with the actual product Octicon (filled
with the series color) in tooltip rows across all three chart types:
TimeSeriesChart, CostBreakdownChart, and ModelBreakdownChart.

Author: austenstone

src/components/charts/CostBreakdownChart.tsx

@@ -52,13 +52,28 @@ export function CostBreakdownChart({ stackField = 'model', metricOptions }: Cost
       });
 
       const seriesColor = colorMap.get(groupInfo.group) ?? '#808fa3';
+      const displayName = formatDisplayValue(groupInfo.group, stackField) || ' ';
+      const isSku = stackField === 'sku';
+      const iconHtml = isSku ? getSkuIconSvg(groupInfo.group, seriesColor) : '';
       return {
         type: 'column' as const,
-        name: stackField === 'sku'
-          ? `<span style="display:flex;align-items:center;gap:4px">${getSkuIconSvg(groupInfo.group, seriesColor)}${formatDisplayValue(groupInfo.group, stackField) || ' '}</span>`
-          : formatDisplayValue(groupInfo.group, stackField) || ' ',
+        name: iconHtml
+          ? `<span style="display:flex;align-items:center;gap:4px">${iconHtml}${displayName}</span>`
+          : displayName,
         data,
         color: seriesColor,
+        ...(isSku && {
+          tooltip: {
+            pointFormatter: function (this: Highcharts.Point) {
+              const val = this.y ?? 0;
+              const icon = getSkuIconSvg(groupInfo.group, String(this.color));
+              const formatted = activeMetric.isCurrency
+                ? `$${val.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`
+                : formatCompact(val);
+              return `<tr><td>${icon} ${displayName}:&nbsp;</td><td style="text-align:right;"><b>${formatted}</b></td></tr>`;
+            },
+          },
+        }),
       };
     });
 

src/components/charts/ModelBreakdownChart.tsx

@@ -92,14 +92,29 @@ export function GroupBreakdownChart({ stackField = 'model', metricOptions }: Gro
       });
 
       const seriesColor = colorMap.get(stackInfo.stack) ?? '#808fa3';
+      const displayName = formatDisplayValue(stackInfo.stack, stackField) || ' ';
+      const isSku = stackField === 'sku';
+      const iconHtml = isSku ? getSkuIconSvg(stackInfo.stack, seriesColor) : '';
       return {
         type: 'bar' as const,
-        name: stackField === 'sku'
-          ? `<span style="display:flex;align-items:center;gap:4px">${getSkuIconSvg(stackInfo.stack, seriesColor)}${formatDisplayValue(stackInfo.stack, stackField) || ' '}</span>`
-          : formatDisplayValue(stackInfo.stack, stackField) || ' ',
+        name: iconHtml
+          ? `<span style="display:flex;align-items:center;gap:4px">${iconHtml}${displayName}</span>`
+          : displayName,
         data,
         color: seriesColor,
         visible: !isHidden,
+        ...(isSku && {
+          tooltip: {
+            pointFormatter: function (this: Highcharts.Point) {
+              const val = this.y ?? 0;
+              const icon = getSkuIconSvg(stackInfo.stack, String(this.color));
+              const formatted = activeMetric.isCurrency
+                ? `$${val.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`
+                : formatCompact(val);
+              return `<tr><td>${icon} ${displayName}:&nbsp;</td><td style="text-align:right;"><b>${formatted}</b></td></tr>`;
+            },
+          },
+        }),
         events: {
           legendItemClick: function () {
             toggleGroup(stackInfo.stack);

src/components/charts/TimeSeriesChart.tsx

@@ -154,7 +154,9 @@ export function TimeSeriesChart({ metricOptions }: { metricOptions?: MetricOptio
             const formatted = activeMetric.isCurrency
               ? `$${val.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`
               : formatCompact(val);
-            return `<span style="color:${this.color}">●</span> ${displayName}: <b>${formatted}</b><br/>`;
+            return isSku
+              ? `${getSkuIconSvg(group.key, String(this.color))} ${displayName}: <b>${formatted}</b><br/>`
+              : `<span style="color:${this.color}">●</span> ${displayName}: <b>${formatted}</b><br/>`;
           },
         },
       });