From 3a66a8a6773b55f9d1d54dc716d3d948673c125c Mon Sep 17 00:00:00 2001 From: yuda Date: Tue, 7 May 2024 11:45:54 +0900 Subject: [PATCH 1/2] fix: fix data formatter of metric data table Signed-off-by: yuda --- .../metric-explorer-data-table-helper.ts | 22 ++++++++++--------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/apps/web/src/services/asset-inventory/helpers/metric-explorer-data-table-helper.ts b/apps/web/src/services/asset-inventory/helpers/metric-explorer-data-table-helper.ts index 1cba58bfd2..4f8b90c81f 100644 --- a/apps/web/src/services/asset-inventory/helpers/metric-explorer-data-table-helper.ts +++ b/apps/web/src/services/asset-inventory/helpers/metric-explorer-data-table-helper.ts @@ -61,17 +61,19 @@ export const getRefinedMetricExplorerTableData = (results: MetricDataAnalyzeResu const refinedTableData: MetricDataAnalyzeResult[] = []; if (realtimeDate) { - _results.forEach((d) => { - refinedTableData.push({ - ...d, - count: [ - { - date: realtimeDate, - value: d.count, - }, - ], + _results + .filter((d) => d.date === realtimeDate) + .forEach((d) => { + refinedTableData.push({ + ...d, + count: [ + { + date: realtimeDate, + value: d.count, + }, + ], + }); }); - }); return refinedTableData; } const today = dayjs.utc(); From 001ac350b3f18c8a7019ed18a96d6f92e1c02b62 Mon Sep 17 00:00:00 2001 From: yuda Date: Tue, 7 May 2024 11:46:42 +0900 Subject: [PATCH 2/2] chore: use `valueFormatter` argument for chart tooltip helper Signed-off-by: yuda --- .../src/common/composables/amcharts5/tree-map-helper.ts | 8 +++----- .../components/MetricExplorerHorizontalColumnChart.vue | 5 +---- .../widgets/cost-widgets/cost-map/CostMapWidget.vue | 4 +++- 3 files changed, 7 insertions(+), 10 deletions(-) diff --git a/apps/web/src/common/composables/amcharts5/tree-map-helper.ts b/apps/web/src/common/composables/amcharts5/tree-map-helper.ts index e22a41735c..83fe41c362 100644 --- a/apps/web/src/common/composables/amcharts5/tree-map-helper.ts +++ b/apps/web/src/common/composables/amcharts5/tree-map-helper.ts @@ -2,8 +2,6 @@ import type * as am5 from '@amcharts/amcharts5'; import { Percent } from '@amcharts/amcharts5'; import * as am5hierarchy from '@amcharts/amcharts5/hierarchy'; -import { numberFormatter } from '@cloudforet/utils'; - export const createTreeMapSeries = ( root: am5.Root, @@ -15,7 +13,7 @@ export const createTreeMapSeries = ( ...settings, })); -export const setTreemapTooltipText = (series: am5hierarchy.Treemap, tooltip: am5.Tooltip): void => { +export const setTreemapTooltipText = (series: am5hierarchy.Treemap, tooltip: am5.Tooltip, valueFormatter?: (value: any, data?: any) => string): void => { tooltip.label.setAll({ fontSize: 14, }); @@ -24,8 +22,8 @@ export const setTreemapTooltipText = (series: am5hierarchy.Treemap, tooltip: am5 tooltip.label.adapters.add('text', (_, target) => { const colorValue = target.dataItem?.dataContext?.[colorFieldName] || 'black'; - const value = target.dataItem?.dataContext?.[valueFieldName] || '-'; - const formatted = numberFormatter(value, { minimumFractionDigits: 2 }); + const value = target.dataItem?.dataContext?.[valueFieldName] || '--'; + const formatted = valueFormatter ? valueFormatter(value, target.dataItem?.dataContext) : value; return `[${colorValue}; fontSize: 10px]●[/] {category}: [bold]${formatted}[/] ({valuePercentTotal.formatNumber("0.00")}%)`; }); }; diff --git a/apps/web/src/services/asset-inventory/components/MetricExplorerHorizontalColumnChart.vue b/apps/web/src/services/asset-inventory/components/MetricExplorerHorizontalColumnChart.vue index f7a82c592e..83ccbc4b24 100644 --- a/apps/web/src/services/asset-inventory/components/MetricExplorerHorizontalColumnChart.vue +++ b/apps/web/src/services/asset-inventory/components/MetricExplorerHorizontalColumnChart.vue @@ -6,8 +6,6 @@ import { import type * as am5xy from '@amcharts/amcharts5/xy'; import { cloneDeep } from 'lodash'; -import { numberFormatter } from '@cloudforet/utils'; - import { useAmcharts5 } from '@/common/composables/amcharts5'; import { setXYSharedTooltipText, @@ -60,8 +58,7 @@ const drawChart = () => { // set tooltip if showPassFindings is true const tooltip = chartHelper.createTooltip(); - const _tooltipValueFormatter = (value?: number): string => numberFormatter(value, { minimumFractionDigits: 2 }) ?? ''; - setXYSharedTooltipText(chart, tooltip, _tooltipValueFormatter); + setXYSharedTooltipText(chart, tooltip); series.set('tooltip', tooltip); // add series to chart diff --git a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-map/CostMapWidget.vue b/apps/web/src/services/dashboards/widgets/cost-widgets/cost-map/CostMapWidget.vue index 047805a961..26bb219a2d 100644 --- a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-map/CostMapWidget.vue +++ b/apps/web/src/services/dashboards/widgets/cost-widgets/cost-map/CostMapWidget.vue @@ -10,6 +10,7 @@ import { PDataLoader } from '@spaceone/design-system'; import { SpaceConnector } from '@cloudforet/core-lib/space-connector'; import { getCancellableFetcher } from '@cloudforet/core-lib/space-connector/cancallable-fetcher'; import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper'; +import { numberFormatter } from '@cloudforet/utils'; import { WIDGET_SIZE } from '@/schema/dashboard/_constants/widget-constant'; import type { CostDataField } from '@/schema/dashboard/_types/widget-type'; @@ -102,7 +103,8 @@ const drawChart = (chartData: TreemapChartData[]) => { const tooltip = chartHelper.createTooltip(); series.set('tooltip', tooltip); - chartHelper.setTreemapTooltipText(series, tooltip); + const valueFormatter = (val) => numberFormatter(val, { minimumFractionDigits: 2 }) as string; + chartHelper.setTreemapTooltipText(series, tooltip, valueFormatter); chartHelper.setTreemapLabelText(series, { oversizedBehavior: 'truncate', });