From 8072bc85c35a3d46b39f1cb85cb3ad473d31cfc4 Mon Sep 17 00:00:00 2001 From: Brenda Sukh Date: Mon, 23 Nov 2020 18:45:02 -0500 Subject: [PATCH 01/15] Update daily cost data to return groupedCosts --- plugins/cost-insights/src/client.ts | 6 ++++-- plugins/cost-insights/src/types/Cost.ts | 5 +++-- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/plugins/cost-insights/src/client.ts b/plugins/cost-insights/src/client.ts index 2180385424..c78a3dc2dc 100644 --- a/plugins/cost-insights/src/client.ts +++ b/plugins/cost-insights/src/client.ts @@ -35,7 +35,7 @@ import { UnlabeledDataflowAlert, } from '../src/utils/alerts'; import { inclusiveStartDateOf } from '../src/utils/duration'; -import { trendlineOf, changeOf } from './utils/mockData'; +import { trendlineOf, changeOf, getGroupedProducts } from './utils/mockData'; type IntervalFields = { duration: Duration; @@ -56,7 +56,7 @@ function parseIntervals(intervals: string): IntervalFields { }; } -function aggregationFor( +export function aggregationFor( intervals: string, baseline: number, ): DateAggregation[] { @@ -140,6 +140,7 @@ export class ExampleCostInsightsClient implements CostInsightsApi { aggregation: aggregation, change: changeOf(aggregation), trendline: trendlineOf(aggregation), + groupedCosts: getGroupedProducts(intervals), }, ); @@ -155,6 +156,7 @@ export class ExampleCostInsightsClient implements CostInsightsApi { aggregation: aggregation, change: changeOf(aggregation), trendline: trendlineOf(aggregation), + groupedCosts: getGroupedProducts(intervals), }, ); diff --git a/plugins/cost-insights/src/types/Cost.ts b/plugins/cost-insights/src/types/Cost.ts index 84a8bfae51..dd28bba6b0 100644 --- a/plugins/cost-insights/src/types/Cost.ts +++ b/plugins/cost-insights/src/types/Cost.ts @@ -21,6 +21,7 @@ import { Trendline } from './Trendline'; export interface Cost { id: string; aggregation: DateAggregation[]; - change: ChangeStatistic; - trendline: Trendline; + change?: ChangeStatistic; + trendline?: Trendline; + groupedCosts?: Cost[]; } From f1272644191124975c9e00c0b5e25d701ceaed6d Mon Sep 17 00:00:00 2001 From: Brenda Sukh Date: Mon, 23 Nov 2020 18:45:40 -0500 Subject: [PATCH 02/15] Add aggregation sum util --- plugins/cost-insights/src/utils/change.ts | 9 +++++---- plugins/cost-insights/src/utils/sum.ts | 20 ++++++++++++++++++++ 2 files changed, 25 insertions(+), 4 deletions(-) create mode 100644 plugins/cost-insights/src/utils/sum.ts diff --git a/plugins/cost-insights/src/utils/change.ts b/plugins/cost-insights/src/utils/change.ts index 1718462948..fc50439aad 100644 --- a/plugins/cost-insights/src/utils/change.ts +++ b/plugins/cost-insights/src/utils/change.ts @@ -23,6 +23,7 @@ import { MetricData, Duration, DEFAULT_DATE_FORMAT, + DateAggregation, } from '../types'; import dayjs, { OpUnitType } from 'dayjs'; import duration from 'dayjs/plugin/duration'; @@ -54,9 +55,9 @@ export function getComparedChange( duration: Duration, lastCompleteBillingDate: string, // YYYY-MM-DD, ): ChangeStatistic { - const ratio = dailyCost.change.ratio - metricData.change.ratio; + const ratio = dailyCost.change!.ratio - metricData.change.ratio; const previousPeriodTotal = getPreviousPeriodTotalCost( - dailyCost, + dailyCost.aggregation, duration, lastCompleteBillingDate, ); @@ -67,7 +68,7 @@ export function getComparedChange( } export function getPreviousPeriodTotalCost( - dailyCost: Cost, + aggregation: DateAggregation[], duration: Duration, inclusiveEndDate: string, ): number { @@ -83,7 +84,7 @@ export function getPreviousPeriodTotalCost( const nextPeriodStart = dayjs(startDate).add(amount, type); // Add up costs that incurred before the start of the next period. - return dailyCost.aggregation.reduce((acc, costByDate) => { + return aggregation.reduce((acc, costByDate) => { return dayjs(costByDate.date).isBefore(nextPeriodStart) ? acc + costByDate.amount : acc; diff --git a/plugins/cost-insights/src/utils/sum.ts b/plugins/cost-insights/src/utils/sum.ts new file mode 100644 index 0000000000..6fc181fea5 --- /dev/null +++ b/plugins/cost-insights/src/utils/sum.ts @@ -0,0 +1,20 @@ +/* + * Copyright 2020 Spotify AB + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { DateAggregation } from '../types'; + +export const aggregationSum = (aggregation: DateAggregation[]) => + aggregation.reduce((total, curAgg) => total + curAgg.amount, 0); From b9705638e969278c5bb9d456d177288b9f7c20cc Mon Sep 17 00:00:00 2001 From: Brenda Sukh Date: Mon, 23 Nov 2020 18:46:20 -0500 Subject: [PATCH 03/15] Add top panel breakdown view --- .../CostOverviewByProduct.tsx | 211 ++++++++++++++++++ .../CostOverviewCard/CostOverviewChart.tsx | 2 +- .../CostOverviewCard/CostOverviewHeader.tsx | 4 +- .../cost-insights/src/utils/change.test.ts | 2 +- 4 files changed, 216 insertions(+), 3 deletions(-) create mode 100644 plugins/cost-insights/src/components/CostOverviewCard/CostOverviewByProduct.tsx diff --git a/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewByProduct.tsx b/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewByProduct.tsx new file mode 100644 index 0000000000..1496fcdaf8 --- /dev/null +++ b/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewByProduct.tsx @@ -0,0 +1,211 @@ +/* + * Copyright 2020 Spotify AB + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import React from 'react'; +import dayjs from 'dayjs'; +import utc from 'dayjs/plugin/utc'; +import { useTheme, Box } from '@material-ui/core'; +import { + AreaChart, + ContentRenderer, + TooltipProps, + XAxis, + YAxis, + Tooltip as RechartsTooltip, + Area, + ResponsiveContainer, + CartesianGrid, +} from 'recharts'; +import { Cost, DEFAULT_DATE_FORMAT, CostInsightsTheme } from '../../types'; +import { + BarChartTooltip as Tooltip, + BarChartTooltipItem as TooltipItem, +} from '../BarChart'; +import { + overviewGraphTickFormatter, + formatGraphValue, + isInvalid, +} from '../../utils/graphs'; +import { + useCostOverviewStyles as useStyles, + DataVizColors, +} from '../../utils/styles'; +import { useFilters, useLastCompleteBillingDate } from '../../hooks'; +import { mapFiltersToProps } from './selector'; +import { getPreviousPeriodTotalCost } from '../../utils/change'; +import { LegendItem } from '../LegendItem'; +import { currencyFormatter } from '../../utils/formatters'; +import { aggregationSum } from '../../utils/sum'; + +dayjs.extend(utc); + +export type CostOverviewByProductProps = { + dailyCostData: Cost; +}; + +const LOW_COST_THRESHOLD = 0.01; + +export const CostOverviewByProduct = ({ + dailyCostData, +}: CostOverviewByProductProps) => { + const theme = useTheme(); + const styles = useStyles(theme); + const lastCompleteBillingDate = useLastCompleteBillingDate(); + const { duration } = useFilters(mapFiltersToProps); + const groupedCosts = dailyCostData.groupedCosts; + + if (!groupedCosts) { + return null; + } + + const flattenedAggregation = groupedCosts + .map(cost => cost.aggregation) + .flat(); + const totalCost = flattenedAggregation.reduce( + (acc, agg) => acc + agg.amount, + 0, + ); + + const productsByDate = groupedCosts.reduce((prodByDate, group) => { + const product = group.id; + group.aggregation.forEach(curAggregation => { + const productCostsForDate = prodByDate[curAggregation.date] || {}; + // Group products with less than 10% of the total cost into "Other" category + if (aggregationSum(group.aggregation) < totalCost * LOW_COST_THRESHOLD) { + prodByDate[curAggregation.date] = { + ...productCostsForDate, + Other: + (prodByDate[curAggregation.date].Other || 0) + + curAggregation.amount, + }; + } else { + prodByDate[curAggregation.date] = { + ...productCostsForDate, + [product]: curAggregation.amount, + }; + } + }); + + return prodByDate; + }, {} as Record>); + + const chartData: any[] = Object.keys(productsByDate).map(date => { + return { + ...productsByDate[date], + date: Date.parse(date), + }; + }); + + const tooltipRenderer: ContentRenderer = ({ + label, + payload = [], + }) => { + if (isInvalid({ label, payload })) return null; + + const title = dayjs(label).utc().format(DEFAULT_DATE_FORMAT); + const items = payload.map(p => ({ + label: p.dataKey as string, + value: formatGraphValue(p.value as number), + fill: p.fill!, + })); + + return ( + + {items.reverse().map((item, index) => ( + + ))} + + ); + }; + + const previousPeriodTotal = getPreviousPeriodTotalCost( + flattenedAggregation, + duration, + lastCompleteBillingDate, + ); + const currentPeriodTotal = totalCost - previousPeriodTotal; + + const renderAreas = () => { + const highCostGroups = groupedCosts.filter( + group => + aggregationSum(group.aggregation) >= totalCost * LOW_COST_THRESHOLD, + ); + const sortedCostGroups = highCostGroups + .sort( + (a, b) => aggregationSum(a.aggregation) - aggregationSum(b.aggregation), + ) + .map(group => group.id); + // Keep 'Other' category at the bottom of the stack + return ['Other', ...sortedCostGroups].map((group, i) => ( + + )); + }; + + return ( + + + + + {currencyFormatter.format(previousPeriodTotal)} + + + + + {currencyFormatter.format(currentPeriodTotal)} + + + + + + + + 0, 'dataMax']} + tick={{ fill: styles.axis.fill }} + tickFormatter={formatGraphValue} + width={styles.yAxis.width} + /> + {renderAreas()} + + + + + + ); +}; diff --git a/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewChart.tsx b/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewChart.tsx index 1910013581..4311081f20 100644 --- a/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewChart.tsx +++ b/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewChart.tsx @@ -93,7 +93,7 @@ export const CostOverviewChart = ({ .sort(aggregationSort) .map(entry => ({ date: Date.parse(entry.date), - trend: trendFrom(data.dailyCost.data.trendline, Date.parse(entry.date)), + trend: trendFrom(data.dailyCost.data.trendline!, Date.parse(entry.date)), dailyCost: entry.amount, ...(metric && data.metric.data ? { [data.metric.dataKey]: metricsByDate[`${entry.date}`] } diff --git a/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewHeader.tsx b/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewHeader.tsx index e46b0c3a78..b23dd2041d 100644 --- a/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewHeader.tsx +++ b/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewHeader.tsx @@ -27,7 +27,9 @@ export const CostOverviewHeader = ({ children, }: PropsWithChildren) => ( { const exclusiveEndDate = '2020-09-30'; expect( getPreviousPeriodTotalCost( - mockGroupDailyCost, + mockGroupDailyCost.aggregation, Duration.P1M, exclusiveEndDate, ), From 2ca1cc32aa7158fb17e1e113a391968fd3ebe3e3 Mon Sep 17 00:00:00 2001 From: Brenda Sukh Date: Mon, 23 Nov 2020 18:47:32 -0500 Subject: [PATCH 04/15] Add top panel tabs --- .../CostOverviewCard/CostOverviewCard.tsx | 128 ++++++++++++------ plugins/cost-insights/src/utils/styles.ts | 26 ++++ 2 files changed, 115 insertions(+), 39 deletions(-) diff --git a/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewCard.tsx b/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewCard.tsx index 81dc118ea9..742b89af7a 100644 --- a/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewCard.tsx +++ b/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewCard.tsx @@ -14,10 +14,19 @@ * limitations under the License. */ -import React from 'react'; -import { Box, Card, CardContent, Divider, useTheme } from '@material-ui/core'; +import React, { useState } from 'react'; +import { + Box, + Card, + CardContent, + Divider, + useTheme, + Tab, + Tabs, +} from '@material-ui/core'; import { CostGrowth } from '../CostGrowth'; import { CostOverviewChart } from './CostOverviewChart'; +import { CostOverviewByProduct } from './CostOverviewByProduct'; import { CostOverviewHeader } from './CostOverviewHeader'; import { LegendItem } from '../LegendItem'; import { MetricSelect } from '../MetricSelect'; @@ -34,6 +43,7 @@ import { formatPercent } from '../../utils/formatters'; import { findAlways } from '../../utils/assert'; import { getComparedChange } from '../../utils/change'; import { Cost, CostInsightsTheme, MetricData } from '../../types'; +import { useOverviewTabsStyles } from '../../utils/styles'; export type CostOverviewCardProps = { dailyCostData: Cost; @@ -47,6 +57,8 @@ export const CostOverviewCard = ({ const theme = useTheme(); const config = useConfig(); const lastCompleteBillingDate = useLastCompleteBillingDate(); + const [tabIndex, setTabIndex] = useState(0); + const { ScrollAnchor } = useScroll(DefaultNavigation.CostOverviewCard); const { setDuration, setProject, setMetric, ...filters } = useFilters( mapFiltersToProps, @@ -63,53 +75,91 @@ export const CostOverviewCard = ({ lastCompleteBillingDate, ) : null; + const styles = useOverviewTabsStyles(theme); + + const tabs = [ + { id: 'overview', label: 'OVERVIEW' }, + { id: 'breakdown', label: 'BREAKDOWN BY PRODUCT' }, + ]; + + const OverviewTabs = () => { + return ( + <> + setTabIndex(index)} + value={tabIndex} + > + {tabs.map((tab, index) => ( + + ))} + + + ); + }; + + const OverviewLegend = () => { + return ( + + + + {formatPercent(dailyCostData.change!.ratio)} + + + {metric && metricData && comparedChange && ( + <> + + + {formatPercent(metricData.change.ratio)} + + + + + + + )} + + ); + }; return ( - + {dailyCostData.groupedCosts && } + - - - - - {formatPercent(dailyCostData.change.ratio)} - - - {metric && metricData && comparedChange && ( - <> - - - {formatPercent(metricData.change.ratio)} - - - - - - - )} - - + + {tabIndex === 0 ? ( + <> + + + + ) : ( + + )} - {config.metrics.length && ( + {config.metrics.length && tabIndex === 0 && ( ({ }, }); +export const useOverviewTabsStyles = makeStyles( + (theme: CostInsightsTheme) => ({ + default: { + padding: theme.spacing(2, 2), + fontWeight: 'bold', + color: theme.palette.text.secondary, + }, + selected: { + color: theme.palette.text.primary, + }, + }), +); + export const useBarChartStyles = (theme: CostInsightsTheme) => ({ axis: { fill: theme.palette.text.primary, From bed5c128da786022c83dec58e8af0ba347f23870 Mon Sep 17 00:00:00 2001 From: Brenda Sukh Date: Mon, 23 Nov 2020 18:48:10 -0500 Subject: [PATCH 05/15] Add mock data for grouped Costs --- plugins/cost-insights/src/utils/mockData.ts | 36 +++++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/plugins/cost-insights/src/utils/mockData.ts b/plugins/cost-insights/src/utils/mockData.ts index 708ce733dd..4432753c32 100644 --- a/plugins/cost-insights/src/utils/mockData.ts +++ b/plugins/cost-insights/src/utils/mockData.ts @@ -34,6 +34,7 @@ import { getDefaultState as getDefaultLoadingState, } from '../utils/loading'; import { findAlways } from '../utils/assert'; +import { aggregationFor } from '../client'; type mockAlertRenderer = (alert: T) => T; type mockEntityRenderer = (entity: T) => T; @@ -462,3 +463,38 @@ export const MockAggregatedDailyCosts: DateAggregation[] = [ amount: 5500, }, ]; + +export const getGroupedProducts = (intervals: string) => [ + { + id: 'Cloud Dataflow', + aggregation: aggregationFor(intervals, 1_000), + }, + { + id: 'Compute Engine', + aggregation: aggregationFor(intervals, 100), + }, + { + id: 'Cloud Storage', + aggregation: aggregationFor(intervals, 500), + }, + { + id: 'BigQuery', + aggregation: aggregationFor(intervals, 2_000), + }, + { + id: 'Cloud SQL', + aggregation: aggregationFor(intervals, 10), + }, + { + id: 'Cloud Spanner', + aggregation: aggregationFor(intervals, 50), + }, + { + id: 'Cloud Pub/Sub', + aggregation: aggregationFor(intervals, 30), + }, + { + id: 'Cloud Bigtable', + aggregation: aggregationFor(intervals, 250), + }, +]; From da82e823a4241dc08ae515d93c899b5cc2a46283 Mon Sep 17 00:00:00 2001 From: Brenda Sukh Date: Mon, 23 Nov 2020 19:11:04 -0500 Subject: [PATCH 06/15] Add comments on groupedCosts --- plugins/cost-insights/src/client.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/plugins/cost-insights/src/client.ts b/plugins/cost-insights/src/client.ts index c78a3dc2dc..96e9025f5d 100644 --- a/plugins/cost-insights/src/client.ts +++ b/plugins/cost-insights/src/client.ts @@ -140,6 +140,8 @@ export class ExampleCostInsightsClient implements CostInsightsApi { aggregation: aggregation, change: changeOf(aggregation), trendline: trendlineOf(aggregation), + // Optional field on Cost which needs to be supplied in order to see + // the product breakdown view in the top panel. groupedCosts: getGroupedProducts(intervals), }, ); @@ -156,6 +158,8 @@ export class ExampleCostInsightsClient implements CostInsightsApi { aggregation: aggregation, change: changeOf(aggregation), trendline: trendlineOf(aggregation), + // Optional field on Cost which needs to be supplied in order to see + // the product breakdown view in the top panel. groupedCosts: getGroupedProducts(intervals), }, ); From 86ab16244a01b0183648c9e818179836e1f1c45e Mon Sep 17 00:00:00 2001 From: Brenda Sukh Date: Tue, 24 Nov 2020 16:55:41 -0500 Subject: [PATCH 07/15] Update wording to product in cost by product component --- ...uct.tsx => CostOverviewByProductChart.tsx} | 161 +++++++++--------- 1 file changed, 82 insertions(+), 79 deletions(-) rename plugins/cost-insights/src/components/CostOverviewCard/{CostOverviewByProduct.tsx => CostOverviewByProductChart.tsx} (63%) diff --git a/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewByProduct.tsx b/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewByProductChart.tsx similarity index 63% rename from plugins/cost-insights/src/components/CostOverviewCard/CostOverviewByProduct.tsx rename to plugins/cost-insights/src/components/CostOverviewCard/CostOverviewByProductChart.tsx index 1496fcdaf8..710c085b48 100644 --- a/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewByProduct.tsx +++ b/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewByProductChart.tsx @@ -32,6 +32,7 @@ import { Cost, DEFAULT_DATE_FORMAT, CostInsightsTheme } from '../../types'; import { BarChartTooltip as Tooltip, BarChartTooltipItem as TooltipItem, + BarChartLegend, } from '../BarChart'; import { overviewGraphTickFormatter, @@ -45,68 +46,100 @@ import { import { useFilters, useLastCompleteBillingDate } from '../../hooks'; import { mapFiltersToProps } from './selector'; import { getPreviousPeriodTotalCost } from '../../utils/change'; -import { LegendItem } from '../LegendItem'; -import { currencyFormatter } from '../../utils/formatters'; +import { formatPeriod } from '../../utils/formatters'; import { aggregationSum } from '../../utils/sum'; +import { BarChartLegendOptions } from '../BarChart/BarChartLegend'; dayjs.extend(utc); -export type CostOverviewByProductProps = { - dailyCostData: Cost; +export type CostOverviewByProductChartProps = { + costsByProduct: Cost[]; }; -const LOW_COST_THRESHOLD = 0.01; +const LOW_COST_THRESHOLD = 0.1; -export const CostOverviewByProduct = ({ - dailyCostData, -}: CostOverviewByProductProps) => { +export const CostOverviewByProductChart = ({ + costsByProduct, +}: CostOverviewByProductChartProps) => { const theme = useTheme(); const styles = useStyles(theme); const lastCompleteBillingDate = useLastCompleteBillingDate(); const { duration } = useFilters(mapFiltersToProps); - const groupedCosts = dailyCostData.groupedCosts; - if (!groupedCosts) { + if (!costsByProduct) { return null; } - const flattenedAggregation = groupedCosts + const flattenedAggregation = costsByProduct .map(cost => cost.aggregation) .flat(); - const totalCost = flattenedAggregation.reduce( - (acc, agg) => acc + agg.amount, - 0, - ); - const productsByDate = groupedCosts.reduce((prodByDate, group) => { - const product = group.id; - group.aggregation.forEach(curAggregation => { - const productCostsForDate = prodByDate[curAggregation.date] || {}; - // Group products with less than 10% of the total cost into "Other" category - if (aggregationSum(group.aggregation) < totalCost * LOW_COST_THRESHOLD) { - prodByDate[curAggregation.date] = { - ...productCostsForDate, - Other: - (prodByDate[curAggregation.date].Other || 0) + - curAggregation.amount, - }; - } else { - prodByDate[curAggregation.date] = { - ...productCostsForDate, - [product]: curAggregation.amount, - }; - } + const totalCost = aggregationSum(flattenedAggregation); + + const previousPeriodTotal = getPreviousPeriodTotalCost( + flattenedAggregation, + duration, + lastCompleteBillingDate, + ); + const currentPeriodTotal = totalCost - previousPeriodTotal; + const productsByDate = costsByProduct.reduce((prodByDate, product) => { + const productTotal = aggregationSum(product.aggregation); + // Group products with less than 10% of the total cost into "Other" category + // when there we have >= 5 products. + const isOtherProduct = + costsByProduct.length >= 5 && + productTotal < totalCost * LOW_COST_THRESHOLD; + const productName = isOtherProduct ? 'Other' : product.id; + const updatedProdByDate = { ...prodByDate }; + + product.aggregation.forEach(curAggregation => { + const productCostsForDate = updatedProdByDate[curAggregation.date] || {}; + + updatedProdByDate[curAggregation.date] = { + ...productCostsForDate, + [productName]: + (productCostsForDate[productName] || 0) + curAggregation.amount, + }; }); - return prodByDate; + return updatedProdByDate; }, {} as Record>); - const chartData: any[] = Object.keys(productsByDate).map(date => { - return { - ...productsByDate[date], - date: Date.parse(date), - }; - }); + const chartData: Record[] = Object.keys(productsByDate).map( + date => { + return { + ...productsByDate[date], + date: Date.parse(date), + }; + }, + ); + + const renderAreas = () => { + const productGroupNames = new Set( + Object.values(productsByDate) + .map(d => Object.keys(d)) + .flat(), + ); + const sortedProducts = costsByProduct + // Check that product is a separate group and hasn't been added to 'Other' + .filter( + product => product.id !== 'Other' && productGroupNames.has(product.id), + ) + .sort( + (a, b) => aggregationSum(a.aggregation) - aggregationSum(b.aggregation), + ) + .map(product => product.id); + // Keep 'Other' category at the bottom of the stack + return ['Other', ...sortedProducts].map((product, i) => ( + + )); + }; const tooltipRenderer: ContentRenderer = ({ label, @@ -130,53 +163,24 @@ export const CostOverviewByProduct = ({ ); }; - const previousPeriodTotal = getPreviousPeriodTotalCost( - flattenedAggregation, - duration, - lastCompleteBillingDate, - ); - const currentPeriodTotal = totalCost - previousPeriodTotal; - - const renderAreas = () => { - const highCostGroups = groupedCosts.filter( - group => - aggregationSum(group.aggregation) >= totalCost * LOW_COST_THRESHOLD, - ); - const sortedCostGroups = highCostGroups - .sort( - (a, b) => aggregationSum(a.aggregation) - aggregationSum(b.aggregation), - ) - .map(group => group.id); - // Keep 'Other' category at the bottom of the stack - return ['Other', ...sortedCostGroups].map((group, i) => ( - - )); + const options: Partial = { + previousName: formatPeriod(duration, lastCompleteBillingDate, false), + currentName: formatPeriod(duration, lastCompleteBillingDate, true), + hideMarker: true, }; return ( - - - {currencyFormatter.format(previousPeriodTotal)} - - - - - {currencyFormatter.format(currentPeriodTotal)} - - + {renderAreas()} - From bf9d87dc16336cfe83f1c0855f46239ff026557d Mon Sep 17 00:00:00 2001 From: Brenda Sukh Date: Tue, 24 Nov 2020 16:56:20 -0500 Subject: [PATCH 08/15] Move cost overview chart legend to separate component --- .../CostOverviewCard/CostOverviewCard.tsx | 75 +++-------- .../CostOverviewCard/CostOverviewChart.tsx | 120 ++++++++++-------- .../CostOverviewCard/CostOverviewLegend.tsx | 84 ++++++++++++ 3 files changed, 163 insertions(+), 116 deletions(-) create mode 100644 plugins/cost-insights/src/components/CostOverviewCard/CostOverviewLegend.tsx diff --git a/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewCard.tsx b/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewCard.tsx index 742b89af7a..c385d5d424 100644 --- a/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewCard.tsx +++ b/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewCard.tsx @@ -24,24 +24,15 @@ import { Tab, Tabs, } from '@material-ui/core'; -import { CostGrowth } from '../CostGrowth'; import { CostOverviewChart } from './CostOverviewChart'; -import { CostOverviewByProduct } from './CostOverviewByProduct'; +import { CostOverviewByProductChart } from './CostOverviewByProductChart'; import { CostOverviewHeader } from './CostOverviewHeader'; -import { LegendItem } from '../LegendItem'; import { MetricSelect } from '../MetricSelect'; import { PeriodSelect } from '../PeriodSelect'; -import { - useScroll, - useFilters, - useConfig, - useLastCompleteBillingDate, -} from '../../hooks'; +import { useScroll, useFilters, useConfig } from '../../hooks'; import { mapFiltersToProps } from './selector'; import { DefaultNavigation } from '../../utils/navigation'; -import { formatPercent } from '../../utils/formatters'; import { findAlways } from '../../utils/assert'; -import { getComparedChange } from '../../utils/change'; import { Cost, CostInsightsTheme, MetricData } from '../../types'; import { useOverviewTabsStyles } from '../../utils/styles'; @@ -56,7 +47,6 @@ export const CostOverviewCard = ({ }: CostOverviewCardProps) => { const theme = useTheme(); const config = useConfig(); - const lastCompleteBillingDate = useLastCompleteBillingDate(); const [tabIndex, setTabIndex] = useState(0); const { ScrollAnchor } = useScroll(DefaultNavigation.CostOverviewCard); @@ -67,19 +57,11 @@ export const CostOverviewCard = ({ const metric = filters.metric ? findAlways(config.metrics, m => m.kind === filters.metric) : null; - const comparedChange = metricData - ? getComparedChange( - dailyCostData, - metricData, - filters.duration, - lastCompleteBillingDate, - ) - : null; const styles = useOverviewTabsStyles(theme); const tabs = [ - { id: 'overview', label: 'OVERVIEW' }, - { id: 'breakdown', label: 'BREAKDOWN BY PRODUCT' }, + { id: 'overview', label: 'Total cost' }, + { id: 'breakdown', label: 'Breakdown by product' }, ]; const OverviewTabs = () => { @@ -104,34 +86,8 @@ export const CostOverviewCard = ({ ); }; - const OverviewLegend = () => { - return ( - - - - {formatPercent(dailyCostData.change!.ratio)} - - - {metric && metricData && comparedChange && ( - <> - - - {formatPercent(metricData.change.ratio)} - - - - - - - )} - - ); - }; + // Metrics can only be selected on the total cost graph + const showMetricSelect = config.metrics.length && tabIndex === 0; return ( @@ -146,20 +102,19 @@ export const CostOverviewCard = ({ {tabIndex === 0 ? ( - <> - - - + ) : ( - + )} - {config.metrics.length && tabIndex === 0 && ( + {showMetricSelect && ( - - - - 0, 'dataMax']} - tick={{ fill: styles.axis.fill }} - tickFormatter={formatGraphValue} - width={styles.yAxis.width} - yAxisId={data.dailyCost.dataKey} - /> - {metric && ( - 0, toDataMax(data.metric.dataKey, chartData)]} - width={styles.yAxis.width} - yAxisId={data.metric.dataKey} + + + + + + + 0, 'dataMax']} + tick={{ fill: styles.axis.fill }} + tickFormatter={formatGraphValue} + width={styles.yAxis.width} + yAxisId={data.dailyCost.dataKey} + /> + {metric && ( + 0, toDataMax(data.metric.dataKey, chartData)]} + width={styles.yAxis.width} + yAxisId={data.metric.dataKey} + /> + )} + - )} - - - {metric && ( - )} - - - + {metric && ( + + )} + + + + ); }; diff --git a/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewLegend.tsx b/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewLegend.tsx new file mode 100644 index 0000000000..ebba5173a9 --- /dev/null +++ b/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewLegend.tsx @@ -0,0 +1,84 @@ +/* + * Copyright 2020 Spotify AB + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React, { PropsWithChildren } from 'react'; +import { Box, useTheme } from '@material-ui/core'; +import { LegendItem } from '../LegendItem'; +import { + CostInsightsTheme, + MetricData, + Maybe, + Cost, + Metric, +} from '../../types'; +import { useLastCompleteBillingDate, useFilters } from '../../hooks'; +import { getComparedChange } from '../../utils/change'; +import { mapFiltersToProps } from './selector'; +import { formatPercent } from '../../utils/formatters'; +import { CostGrowth } from '../CostGrowth'; + +type CostOverviewLegendProps = { + metric: Maybe; + metricData: Maybe; + dailyCostData: Cost; +}; + +export const CostOverviewLegend = ({ + dailyCostData, + metric, + metricData, +}: PropsWithChildren) => { + const theme = useTheme(); + + const lastCompleteBillingDate = useLastCompleteBillingDate(); + const { duration } = useFilters(mapFiltersToProps); + + const comparedChange = metricData + ? getComparedChange( + dailyCostData, + metricData, + duration, + lastCompleteBillingDate, + ) + : null; + + return ( + + + + {formatPercent(dailyCostData.change!.ratio)} + + + {metric && metricData && comparedChange && ( + <> + + + {formatPercent(metricData.change.ratio)} + + + + + + + )} + + ); +}; From 62f1c825cf2fd0630b160e876bb412ae8c0e9a50 Mon Sep 17 00:00:00 2001 From: Brenda Sukh Date: Tue, 24 Nov 2020 16:56:43 -0500 Subject: [PATCH 09/15] Move mock data utils --- plugins/cost-insights/src/client.ts | 54 +++---------------- .../components/BarChart/BarChartLegend.tsx | 13 +++-- plugins/cost-insights/src/utils/styles.ts | 5 +- 3 files changed, 19 insertions(+), 53 deletions(-) diff --git a/plugins/cost-insights/src/client.ts b/plugins/cost-insights/src/client.ts index 96e9025f5d..a20344ffb3 100644 --- a/plugins/cost-insights/src/client.ts +++ b/plugins/cost-insights/src/client.ts @@ -20,9 +20,7 @@ import { CostInsightsApi, ProductInsightsOptions } from '../src/api'; import { Alert, Cost, - DateAggregation, DEFAULT_DATE_FORMAT, - Duration, Entity, Group, MetricData, @@ -34,52 +32,12 @@ import { ProjectGrowthAlert, UnlabeledDataflowAlert, } from '../src/utils/alerts'; -import { inclusiveStartDateOf } from '../src/utils/duration'; -import { trendlineOf, changeOf, getGroupedProducts } from './utils/mockData'; - -type IntervalFields = { - duration: Duration; - endDate: string; -}; - -function parseIntervals(intervals: string): IntervalFields { - const match = intervals.match( - /\/(?P\d+[DM])\/(?\d{4}-\d{2}-\d{2})/, - ); - if (Object.keys(match?.groups || {}).length !== 2) { - throw new Error(`Invalid intervals: ${intervals}`); - } - const { duration, date } = match!.groups!; - return { - duration: duration as Duration, - endDate: date, - }; -} - -export function aggregationFor( - intervals: string, - baseline: number, -): DateAggregation[] { - const { duration, endDate } = parseIntervals(intervals); - const days = dayjs(endDate).diff( - inclusiveStartDateOf(duration, endDate), - 'day', - ); - - return [...Array(days).keys()].reduce( - (values: DateAggregation[], i: number): DateAggregation[] => { - const last = values.length ? values[values.length - 1].amount : baseline; - values.push({ - date: dayjs(inclusiveStartDateOf(duration, endDate)) - .add(i, 'day') - .format(DEFAULT_DATE_FORMAT), - amount: Math.max(0, last + (baseline / 20) * (Math.random() * 2 - 1)), - }); - return values; - }, - [], - ); -} +import { + trendlineOf, + changeOf, + getGroupedProducts, + aggregationFor, +} from './utils/mockData'; export class ExampleCostInsightsClient implements CostInsightsApi { private request(_: any, res: any): Promise { diff --git a/plugins/cost-insights/src/components/BarChart/BarChartLegend.tsx b/plugins/cost-insights/src/components/BarChart/BarChartLegend.tsx index 6db0e13572..7ed6854d35 100644 --- a/plugins/cost-insights/src/components/BarChart/BarChartLegend.tsx +++ b/plugins/cost-insights/src/components/BarChart/BarChartLegend.tsx @@ -21,11 +21,12 @@ import { currencyFormatter } from '../../utils/formatters'; import { CostInsightsTheme } from '../../types'; import { useBarChartLayoutStyles as useStyles } from '../../utils/styles'; -type BarChartLegendOptions = { +export type BarChartLegendOptions = { previousName: string; previousFill: string; currentName: string; currentFill: string; + hideMarker?: boolean; }; export type BarChartLegendProps = { @@ -56,12 +57,18 @@ export const BarChartLegend = ({ return ( - + {currencyFormatter.format(costStart)} - + {currencyFormatter.format(costEnd)} diff --git a/plugins/cost-insights/src/utils/styles.ts b/plugins/cost-insights/src/utils/styles.ts index f149ac9be7..b0378b6c98 100644 --- a/plugins/cost-insights/src/utils/styles.ts +++ b/plugins/cost-insights/src/utils/styles.ts @@ -103,9 +103,10 @@ export const useCostOverviewStyles = (theme: CostInsightsTheme) => ({ export const useOverviewTabsStyles = makeStyles( (theme: CostInsightsTheme) => ({ default: { - padding: theme.spacing(2, 2), - fontWeight: 'bold', + padding: theme.spacing(2), + fontWeight: theme.typography.fontWeightBold, color: theme.palette.text.secondary, + textTransform: 'uppercase', }, selected: { color: theme.palette.text.primary, From 1b5e8fbae61dff3e0b6ced8f8b103242b1c7ef4e Mon Sep 17 00:00:00 2001 From: Brenda Sukh Date: Tue, 24 Nov 2020 17:48:01 -0500 Subject: [PATCH 10/15] Add data viz colors for both themes --- .../CostOverviewByProductChart.tsx | 9 ++--- .../CostOverviewCard/CostOverviewCard.tsx | 12 +++--- plugins/cost-insights/src/types/Theme.ts | 1 + plugins/cost-insights/src/utils/styles.ts | 37 ++++++++++++------- 4 files changed, 35 insertions(+), 24 deletions(-) diff --git a/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewByProductChart.tsx b/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewByProductChart.tsx index 710c085b48..1a466fb4d7 100644 --- a/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewByProductChart.tsx +++ b/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewByProductChart.tsx @@ -39,10 +39,7 @@ import { formatGraphValue, isInvalid, } from '../../utils/graphs'; -import { - useCostOverviewStyles as useStyles, - DataVizColors, -} from '../../utils/styles'; +import { useCostOverviewStyles as useStyles } from '../../utils/styles'; import { useFilters, useLastCompleteBillingDate } from '../../hooks'; import { mapFiltersToProps } from './selector'; import { getPreviousPeriodTotalCost } from '../../utils/change'; @@ -135,8 +132,8 @@ export const CostOverviewByProductChart = ({ dataKey={product} stackId="1" fillOpacity="1" - stroke={DataVizColors[i]} - fill={DataVizColors[i]} + stroke={theme.palette.dataViz[i]} + fill={theme.palette.dataViz[i]} /> )); }; diff --git a/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewCard.tsx b/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewCard.tsx index c385d5d424..39adc4bbf1 100644 --- a/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewCard.tsx +++ b/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewCard.tsx @@ -60,8 +60,12 @@ export const CostOverviewCard = ({ const styles = useOverviewTabsStyles(theme); const tabs = [ - { id: 'overview', label: 'Total cost' }, - { id: 'breakdown', label: 'Breakdown by product' }, + { id: 'overview', label: 'Total cost', title: 'Cloud Cost' }, + { + id: 'breakdown', + label: 'Breakdown by product', + title: 'Cloud Cost By Product', + }, ]; const OverviewTabs = () => { @@ -94,9 +98,7 @@ export const CostOverviewCard = ({ {dailyCostData.groupedCosts && } - + diff --git a/plugins/cost-insights/src/types/Theme.ts b/plugins/cost-insights/src/types/Theme.ts index 9053283351..0f4096adc3 100644 --- a/plugins/cost-insights/src/types/Theme.ts +++ b/plugins/cost-insights/src/types/Theme.ts @@ -30,6 +30,7 @@ type CostInsightsPaletteAdditions = { tooltip: CostInsightsTooltipOptions; navigationText: string; alertBackground: string; + dataViz: string[]; }; export type CostInsightsPalette = BackstagePalette & diff --git a/plugins/cost-insights/src/utils/styles.ts b/plugins/cost-insights/src/utils/styles.ts index b0378b6c98..f318f347f9 100644 --- a/plugins/cost-insights/src/utils/styles.ts +++ b/plugins/cost-insights/src/utils/styles.ts @@ -24,19 +24,6 @@ import { import { BackstageTheme } from '@backstage/theme'; import { CostInsightsTheme, CostInsightsThemeOptions } from '../types'; -export const DataVizColors = [ - '#509BF5', - '#FF6437', - '#4B917D', - '#F573A0', - '#F59B23', - '#B49BC8', - '#C39687', - '#A0C3D2', - '#FFC864', - '#BABABA', -]; - export const costInsightsLightTheme = { palette: { blue: '#509AF5', @@ -50,6 +37,18 @@ export const costInsightsLightTheme = { }, navigationText: '#b5b5b5', alertBackground: 'rgba(219, 219, 219, 0.13)', + dataViz: [ + '#509BF5', + '#FF6437', + '#4B917D', + '#F573A0', + '#F59B23', + '#B49BC8', + '#C39687', + '#A0C3D2', + '#FFC864', + '#BABABA', + ], }, } as CostInsightsThemeOptions; @@ -68,6 +67,18 @@ export const costInsightsDarkTheme = { }, navigationText: '#b5b5b5', alertBackground: 'rgba(32, 32, 32, 0.13)', + dataViz: [ + '#B9D6FB', + '#FFC1AF', + '#B7D3CB', + '#FBC7D9', + '#FBD6A7', + '#E1D7E9', + '#E7D5CF', + '#D9E7ED', + '#FFE9C1', + '#E3E3E3', + ], }, } as CostInsightsThemeOptions; From fa5ce266dbbfd98011e967e5202695a8ca080af9 Mon Sep 17 00:00:00 2001 From: Brenda Sukh Date: Tue, 24 Nov 2020 17:49:49 -0500 Subject: [PATCH 11/15] Move mock data utils --- plugins/cost-insights/src/utils/mockData.ts | 58 ++++++++++++++++++--- 1 file changed, 52 insertions(+), 6 deletions(-) diff --git a/plugins/cost-insights/src/utils/mockData.ts b/plugins/cost-insights/src/utils/mockData.ts index 4432753c32..cf9f13daa7 100644 --- a/plugins/cost-insights/src/utils/mockData.ts +++ b/plugins/cost-insights/src/utils/mockData.ts @@ -14,6 +14,7 @@ * limitations under the License. */ +import dayjs from 'dayjs'; import regression, { DataPoint } from 'regression'; import { Config } from '@backstage/config'; import { ConfigApi } from '@backstage/core'; @@ -28,17 +29,23 @@ import { UnlabeledDataflowAlertProject, UnlabeledDataflowData, DateAggregation, + DEFAULT_DATE_FORMAT, } from '../types'; import { DefaultLoadingAction, getDefaultState as getDefaultLoadingState, } from '../utils/loading'; import { findAlways } from '../utils/assert'; -import { aggregationFor } from '../client'; +import { inclusiveStartDateOf } from './duration'; type mockAlertRenderer = (alert: T) => T; type mockEntityRenderer = (entity: T) => T; +type IntervalFields = { + duration: Duration; + endDate: string; +}; + export const createMockEntity = ( callback?: mockEntityRenderer, ): Entity => { @@ -217,6 +224,45 @@ export function changeOf(aggregation: DateAggregation[]): ChangeStatistic { }; } +export function aggregationFor( + intervals: string, + baseline: number, +): DateAggregation[] { + const { duration, endDate } = parseIntervals(intervals); + const days = dayjs(endDate).diff( + inclusiveStartDateOf(duration, endDate), + 'day', + ); + + return [...Array(days).keys()].reduce( + (values: DateAggregation[], i: number): DateAggregation[] => { + const last = values.length ? values[values.length - 1].amount : baseline; + values.push({ + date: dayjs(inclusiveStartDateOf(duration, endDate)) + .add(i, 'day') + .format(DEFAULT_DATE_FORMAT), + amount: Math.max(0, last + (baseline / 20) * (Math.random() * 2 - 1)), + }); + return values; + }, + [], + ); +} + +function parseIntervals(intervals: string): IntervalFields { + const match = intervals.match( + /\/(?P\d+[DM])\/(?\d{4}-\d{2}-\d{2})/, + ); + if (Object.keys(match?.groups || {}).length !== 2) { + throw new Error(`Invalid intervals: ${intervals}`); + } + const { duration, date } = match!.groups!; + return { + duration: duration as Duration, + endDate: date, + }; +} + export const MockAggregatedDailyCosts: DateAggregation[] = [ { date: '2020-08-07', @@ -467,15 +513,15 @@ export const MockAggregatedDailyCosts: DateAggregation[] = [ export const getGroupedProducts = (intervals: string) => [ { id: 'Cloud Dataflow', - aggregation: aggregationFor(intervals, 1_000), + aggregation: aggregationFor(intervals, 1_700), }, { id: 'Compute Engine', - aggregation: aggregationFor(intervals, 100), + aggregation: aggregationFor(intervals, 350), }, { id: 'Cloud Storage', - aggregation: aggregationFor(intervals, 500), + aggregation: aggregationFor(intervals, 1_300), }, { id: 'BigQuery', @@ -483,7 +529,7 @@ export const getGroupedProducts = (intervals: string) => [ }, { id: 'Cloud SQL', - aggregation: aggregationFor(intervals, 10), + aggregation: aggregationFor(intervals, 750), }, { id: 'Cloud Spanner', @@ -491,7 +537,7 @@ export const getGroupedProducts = (intervals: string) => [ }, { id: 'Cloud Pub/Sub', - aggregation: aggregationFor(intervals, 30), + aggregation: aggregationFor(intervals, 1_000), }, { id: 'Cloud Bigtable', From 8972be02324e8d9546ae104a6b1033d6b5e536c6 Mon Sep 17 00:00:00 2001 From: Brenda Sukh Date: Tue, 24 Nov 2020 18:08:50 -0500 Subject: [PATCH 12/15] Update data viz dark theme colors --- .../CostOverviewByProductChart.tsx | 4 ++-- plugins/cost-insights/src/utils/styles.ts | 22 +++++++++---------- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewByProductChart.tsx b/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewByProductChart.tsx index 1a466fb4d7..6cc576c04f 100644 --- a/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewByProductChart.tsx +++ b/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewByProductChart.tsx @@ -132,8 +132,8 @@ export const CostOverviewByProductChart = ({ dataKey={product} stackId="1" fillOpacity="1" - stroke={theme.palette.dataViz[i]} - fill={theme.palette.dataViz[i]} + stroke={theme.palette.dataViz[sortedProducts.length - i]} + fill={theme.palette.dataViz[sortedProducts.length - i]} /> )); }; diff --git a/plugins/cost-insights/src/utils/styles.ts b/plugins/cost-insights/src/utils/styles.ts index f318f347f9..3f762491e1 100644 --- a/plugins/cost-insights/src/utils/styles.ts +++ b/plugins/cost-insights/src/utils/styles.ts @@ -39,8 +39,8 @@ export const costInsightsLightTheme = { alertBackground: 'rgba(219, 219, 219, 0.13)', dataViz: [ '#509BF5', - '#FF6437', '#4B917D', + '#FF6437', '#F573A0', '#F59B23', '#B49BC8', @@ -68,16 +68,16 @@ export const costInsightsDarkTheme = { navigationText: '#b5b5b5', alertBackground: 'rgba(32, 32, 32, 0.13)', dataViz: [ - '#B9D6FB', - '#FFC1AF', - '#B7D3CB', - '#FBC7D9', - '#FBD6A7', - '#E1D7E9', - '#E7D5CF', - '#D9E7ED', - '#FFE9C1', - '#E3E3E3', + '#c1dffd', + '#baddd5', + '#ff9664', + '#ffa5d1', + '#ffcc57', + '#e6ccfb', + '#f7c7b7', + '#d2f6ff', + '#fffb94', + '#ececec', ], }, } as CostInsightsThemeOptions; From a2cfa311ab48a69b6bbdd3e2dfadefe4a5e6dc52 Mon Sep 17 00:00:00 2001 From: Brenda Sukh Date: Tue, 24 Nov 2020 18:46:05 -0500 Subject: [PATCH 13/15] 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 = { + const options: Partial = { 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 = { + const options: Partial = { previousName: moment(alert.periodStart, 'YYYY-[Q]Q').format('[Q]Q YYYY'), currentName: moment(alert.periodEnd, 'YYYY-[Q]Q').format('[Q]Q YYYY'), }; From ca71d125d8e5027fb7a692a5bd6cfb3307ecf0ca Mon Sep 17 00:00:00 2001 From: Brenda Sukh Date: Mon, 30 Nov 2020 14:49:08 -0500 Subject: [PATCH 14/15] Drop fill opacity for lighter colors --- .../components/CostOverviewCard/CostOverviewByProductChart.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewByProductChart.tsx b/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewByProductChart.tsx index 6cc576c04f..44b7497754 100644 --- a/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewByProductChart.tsx +++ b/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewByProductChart.tsx @@ -131,7 +131,6 @@ export const CostOverviewByProductChart = ({ From d151d22b955faa22c90f0ce88dac97c72fa72934 Mon Sep 17 00:00:00 2001 From: Brenda Sukh Date: Mon, 30 Nov 2020 15:11:33 -0500 Subject: [PATCH 15/15] Update dark theme colors --- plugins/cost-insights/src/utils/styles.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/plugins/cost-insights/src/utils/styles.ts b/plugins/cost-insights/src/utils/styles.ts index 3f762491e1..1d398fe84b 100644 --- a/plugins/cost-insights/src/utils/styles.ts +++ b/plugins/cost-insights/src/utils/styles.ts @@ -68,8 +68,8 @@ export const costInsightsDarkTheme = { navigationText: '#b5b5b5', alertBackground: 'rgba(32, 32, 32, 0.13)', dataViz: [ - '#c1dffd', - '#baddd5', + '#8accff', + '#7bc2ac', '#ff9664', '#ffa5d1', '#ffcc57',