From 9d792a435b09a38cc4a4ea6437f7ac5219af50c4 Mon Sep 17 00:00:00 2001 From: Ryan Vazquez Date: Wed, 18 Nov 2020 15:05:21 -0500 Subject: [PATCH 1/3] pretty print subdollar values for sku costs --- .../components/ProductInsightsCard/ProductEntityDialog.tsx | 4 ++-- plugins/cost-insights/src/utils/formatters.ts | 5 +++++ 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/plugins/cost-insights/src/components/ProductInsightsCard/ProductEntityDialog.tsx b/plugins/cost-insights/src/components/ProductInsightsCard/ProductEntityDialog.tsx index 764a18d305..dfa33d15f6 100644 --- a/plugins/cost-insights/src/components/ProductInsightsCard/ProductEntityDialog.tsx +++ b/plugins/cost-insights/src/components/ProductInsightsCard/ProductEntityDialog.tsx @@ -20,7 +20,7 @@ import { Table, TableColumn } from '@backstage/core'; import { Dialog, IconButton, Typography } from '@material-ui/core'; import { default as CloseButton } from '@material-ui/icons/Close'; import { CostGrowthIndicator } from '../CostGrowth'; -import { currencyFormatter, formatPercent } from '../../utils/formatters'; +import { costFormatter, formatPercent } from '../../utils/formatters'; import { useEntityDialogStyles as useStyles } from '../../utils/styles'; import { BarChartOptions, Entity } from '../../types'; @@ -38,7 +38,7 @@ function createRenderer(col: keyof RowData, classes: Record) { case 'current': return ( - {currencyFormatter.format(row[col])} + {costFormatter.format(row[col])} ); case 'ratio': diff --git a/plugins/cost-insights/src/utils/formatters.ts b/plugins/cost-insights/src/utils/formatters.ts index e81fc1f7c9..42505e7072 100644 --- a/plugins/cost-insights/src/utils/formatters.ts +++ b/plugins/cost-insights/src/utils/formatters.ts @@ -24,6 +24,11 @@ export type Period = { periodEnd: string; }; +export const costFormatter = new Intl.NumberFormat('en-US', { + style: 'currency', + currency: 'USD', +}); + export const currencyFormatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', From c645ea174ac2e1a624c90e51bca6f57da3de9635 Mon Sep 17 00:00:00 2001 From: Ryan Vazquez Date: Wed, 18 Nov 2020 15:21:09 -0500 Subject: [PATCH 2/3] widen first column of entity dialog table --- .../src/components/ProductInsightsCard/ProductEntityDialog.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/plugins/cost-insights/src/components/ProductInsightsCard/ProductEntityDialog.tsx b/plugins/cost-insights/src/components/ProductInsightsCard/ProductEntityDialog.tsx index dfa33d15f6..4cccd638cb 100644 --- a/plugins/cost-insights/src/components/ProductInsightsCard/ProductEntityDialog.tsx +++ b/plugins/cost-insights/src/components/ProductInsightsCard/ProductEntityDialog.tsx @@ -122,6 +122,7 @@ export const ProductEntityDialog = ({ title: SKU, render: createRenderer('sku', classes), customSort: createSorter('sku'), + width: '33.33%', }, { field: 'previous', From f360395d00eaf6d0c9318fa1ed9e39d391d024f7 Mon Sep 17 00:00:00 2001 From: Ryan Vazquez Date: Wed, 18 Nov 2020 15:41:46 -0500 Subject: [PATCH 3/3] changeset --- .changeset/cost-insights-wet-plants-glow.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/cost-insights-wet-plants-glow.md diff --git a/.changeset/cost-insights-wet-plants-glow.md b/.changeset/cost-insights-wet-plants-glow.md new file mode 100644 index 0000000000..3d2be289d4 --- /dev/null +++ b/.changeset/cost-insights-wet-plants-glow.md @@ -0,0 +1,6 @@ +--- +'@backstage/plugin-cost-insights': patch +--- + +UI improvements: Increase width of first column in product entity dialog table +UI improvement: Display full cost amount in product entity dialog table