Generalize SKU specific verbiage

plugins/cost-insights/src/components/ProductInsightsCard/ProductEntityDialog.tsx

@@ -29,7 +29,7 @@ function createRenderer(col: keyof RowData, classes: Record<string, string>) {
     const row = rowData as RowData;
     const rowStyles = classnames(classes.row, {
       [classes.rowTotal]: row.id === 'total',
-      [classes.colFirst]: col === 'sku',
+      [classes.colFirst]: col === 'label',
       [classes.colLast]: col === 'ratio',
     });
 
@@ -50,7 +50,7 @@ function createRenderer(col: keyof RowData, classes: Record<string, string>) {
           />
         );
       default:
-        return <Typography className={rowStyles}>{row.sku}</Typography>;
+        return <Typography className={rowStyles}>{row.label}</Typography>;
     }
   };
 }
@@ -63,7 +63,7 @@ function createSorter(field?: keyof Omit<RowData, 'id'>) {
     const b = data2 as RowData;
     if (a.id === 'total') return 1;
     if (b.id === 'total') return 1;
-    if (field === 'sku') return a.sku.localeCompare(b.sku);
+    if (field === 'label') return a.label.localeCompare(b.label);
 
     return field
       ? a[field] - b[field]
@@ -80,7 +80,7 @@ const defaultEntity: Entity = {
 
 type RowData = {
   id: string;
-  sku: string;
+  label: string;
   previous: number;
   current: number;
   ratio: number;
@@ -118,10 +118,12 @@ export const ProductEntityDialog = ({
 
   const columns: TableColumn[] = [
     {
-      field: 'sku',
-      title: <Typography className={firstColClasses}>SKU</Typography>,
-      render: createRenderer('sku', classes),
-      customSort: createSorter('sku'),
+      field: 'label',
+      title: (
+        <Typography className={firstColClasses}>{entitiesLabel}</Typography>
+      ),
+      render: createRenderer('label', classes),
+      customSort: createSorter('label'),
       width: '33.33%',
     },
     {
@@ -154,14 +156,14 @@ export const ProductEntityDialog = ({
   const rowData: RowData[] = entity.entities
     .map(e => ({
       id: e.id || 'Unknown',
-      sku: e.id || 'Unknown',
+      label: e.id || 'Unknown',
       previous: e.aggregation[0],
       current: e.aggregation[1],
       ratio: e.change.ratio,
     }))
     .concat({
       id: 'total',
-      sku: 'Total',
+      label: 'Total',
       previous: entity.aggregation[0],
       current: entity.aggregation[1],
       ratio: entity.change.ratio,

plugins/cost-insights/src/components/ProductInsightsCard/ProductInsightsChart.tsx

@@ -66,9 +66,9 @@ export const ProductInsightsChart = ({
   const [selectLabel, setSelected] = useState<Maybe<string>>();
   const isSelected = useMemo(() => !isUndefined(selectLabel), [selectLabel]);
   const isClickable = useMemo(() => {
-    const skus =
+    const breakdownEntities =
       entity.entities.find(e => e.id === activeLabel)?.entities ?? [];
-    return skus.length > 0;
+    return breakdownEntities.length > 0;
   }, [entity, activeLabel]);
 
   const legendTitle = `Cost ${entity.change.ratio <= 0 ? 'Savings' : 'Growth'}`;
@@ -122,10 +122,13 @@ export const ProductInsightsChart = ({
 
     const activeEntity = findAlways(entity.entities, e => e.id === id);
     const ratio = activeEntity.change.ratio;
-    const skus = activeEntity.entities;
-    const subtitle = `${skus.length} ${pluralOf(skus.length, 'SKU')}`;
+    const breakdownEntities = activeEntity.entities;
+    const subtitle = `${breakdownEntities.length} ${pluralOf(
+      breakdownEntities.length,
+      entity.entitiesLabel || 'SKU',
+    )}`;
 
-    if (skus.length) {
+    if (breakdownEntities.length) {
       return (
         <BarChartTooltip
           title={title}
@@ -151,7 +154,7 @@ export const ProductInsightsChart = ({
       );
     }
 
-    // If an entity doesn't have any skus, there aren't any costs to break down.
+    // If an entity doesn't have any sub-entities, there aren't any costs to break down.
     return (
       <BarChartTooltip
         title={title}