Update bar chart legend type usage

.changeset/cost-insights-cyan-nails-film.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-cost-insights': patch
+---
+
+Add breakdown view to the Cost Overview panel

plugins/cost-insights/src/components/BarChart/index.ts

@@ -17,7 +17,10 @@
 export { BarChart } from './BarChart';
 export type { BarChartProps } from './BarChart';
 export { BarChartLegend } from './BarChartLegend';
-export type { BarChartLegendProps } from './BarChartLegend';
+export type {
+  BarChartLegendProps,
+  BarChartLegendOptions,
+} from './BarChartLegend';
 export { BarChartTooltip } from './BarChartTooltip';
 export type { BarChartTooltipProps } from './BarChartTooltip';
 export { BarChartTooltipItem } from './BarChartTooltipItem';

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

@@ -30,6 +30,7 @@ import {
   BarChartLegend,
   BarChartTooltip,
   BarChartTooltipItem,
+  BarChartLegendOptions,
 } from '../BarChart';
 import { pluralOf } from '../../utils/grammar';
 import { findAlways, notEmpty } from '../../utils/assert';
@@ -45,7 +46,7 @@ import {
   useProductInsightsChartStyles as useStyles,
   useBarChartLayoutStyles as useLayoutStyles,
 } from '../../utils/styles';
-import { BarChartOptions, Duration, Entity, Maybe } from '../../types';
+import { Duration, Entity, Maybe } from '../../types';
 
 export type ProductInsightsChartProps = {
   billingDate: string;
@@ -70,7 +71,7 @@ export const ProductInsightsChart = ({
   const costEnd = entity.aggregation[1];
   const resources = entity.entities.map(resourceOf);
 
-  const options: Partial<BarChartOptions> = {
+  const options: Partial<BarChartLegendOptions> = {
     previousName: formatPeriod(duration, billingDate, false),
     currentName: formatPeriod(duration, billingDate, true),
   };

plugins/cost-insights/src/components/ProjectGrowthAlertCard/ProjectGrowthAlertChart.tsx

@@ -17,10 +17,10 @@
 import React from 'react';
 import moment from 'moment';
 import { Box } from '@material-ui/core';
-import { BarChart, BarChartLegend } from '../BarChart';
+import { BarChart, BarChartLegend, BarChartLegendOptions } from '../BarChart';
 import { LegendItem } from '../LegendItem';
 import { CostGrowth } from '../CostGrowth';
-import { BarChartOptions, Duration, ProjectGrowthData } from '../../types';
+import { Duration, ProjectGrowthData } from '../../types';
 import { useBarChartLayoutStyles as useStyles } from '../../utils/styles';
 import { resourceOf } from '../../utils/graphs';
 
@@ -37,7 +37,7 @@ export const ProjectGrowthAlertChart = ({
   const costEnd = alert.aggregation[1];
   const resourceData = alert.products.map(resourceOf);
 
-  const options: Partial<BarChartOptions> = {
+  const options: Partial<BarChartLegendOptions> = {
     previousName: moment(alert.periodStart, 'YYYY-[Q]Q').format('[Q]Q YYYY'),
     currentName: moment(alert.periodEnd, 'YYYY-[Q]Q').format('[Q]Q YYYY'),
   };