From a2cfa311ab48a69b6bbdd3e2dfadefe4a5e6dc52 Mon Sep 17 00:00:00 2001
From: Brenda Sukh <brendasukh@gmail.com>
Date: Tue, 24 Nov 2020 18:46:05 -0500
Subject: [PATCH] Update bar chart legend type usage

---
 .changeset/cost-insights-cyan-nails-film.md                 | 5 +++++
 plugins/cost-insights/src/components/BarChart/index.ts      | 5 ++++-
 .../components/ProductInsightsCard/ProductInsightsChart.tsx | 5 +++--
 .../ProjectGrowthAlertCard/ProjectGrowthAlertChart.tsx      | 6 +++---
 4 files changed, 15 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/cost-insights-cyan-nails-film.md

diff --git a/.changeset/cost-insights-cyan-nails-film.md b/.changeset/cost-insights-cyan-nails-film.md
new file mode 100644
index 0000000000..69e21d87fe
--- /dev/null
+++ b/.changeset/cost-insights-cyan-nails-film.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-cost-insights': patch
+---
+
+Add breakdown view to the Cost Overview panel
diff --git a/plugins/cost-insights/src/components/BarChart/index.ts b/plugins/cost-insights/src/components/BarChart/index.ts
index 76f859636a..73676dfa81 100644
--- a/plugins/cost-insights/src/components/BarChart/index.ts
+++ b/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';
diff --git a/plugins/cost-insights/src/components/ProductInsightsCard/ProductInsightsChart.tsx b/plugins/cost-insights/src/components/ProductInsightsCard/ProductInsightsChart.tsx
index 6050dae9c7..1209493e0a 100644
--- a/plugins/cost-insights/src/components/ProductInsightsCard/ProductInsightsChart.tsx
+++ b/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),
   };
diff --git a/plugins/cost-insights/src/components/ProjectGrowthAlertCard/ProjectGrowthAlertChart.tsx b/plugins/cost-insights/src/components/ProjectGrowthAlertCard/ProjectGrowthAlertChart.tsx
index 53e52f18e8..f541719e4a 100644
--- a/plugins/cost-insights/src/components/ProjectGrowthAlertCard/ProjectGrowthAlertChart.tsx
+++ b/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'),
   };