diff --git a/plugins/cost-insights/src/components/ProductInsightsCard/ProductEntityDialog.tsx b/plugins/cost-insights/src/components/ProductInsightsCard/ProductEntityDialog.tsx index c01ab67ecc..df980fe16c 100644 --- a/plugins/cost-insights/src/components/ProductInsightsCard/ProductEntityDialog.tsx +++ b/plugins/cost-insights/src/components/ProductInsightsCard/ProductEntityDialog.tsx @@ -29,7 +29,7 @@ function createRenderer(col: keyof RowData, classes: Record) { 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) { /> ); default: - return {row.sku}; + return {row.label}; } }; } @@ -63,7 +63,7 @@ function createSorter(field?: keyof Omit) { 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: SKU, - render: createRenderer('sku', classes), - customSort: createSorter('sku'), + field: 'label', + title: ( + {entitiesLabel} + ), + 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, diff --git a/plugins/cost-insights/src/components/ProductInsightsCard/ProductInsightsChart.tsx b/plugins/cost-insights/src/components/ProductInsightsCard/ProductInsightsChart.tsx index 221a99708b..69f49991ed 100644 --- a/plugins/cost-insights/src/components/ProductInsightsCard/ProductInsightsChart.tsx +++ b/plugins/cost-insights/src/components/ProductInsightsCard/ProductInsightsChart.tsx @@ -66,9 +66,9 @@ export const ProductInsightsChart = ({ const [selectLabel, setSelected] = useState>(); 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 (