diff --git a/client/src/components/billing/reports/charts/extensions/barchart-data-label-plugin.js b/client/src/components/billing/reports/charts/extensions/barchart-data-label-plugin.js index 9dc7b792b5..bd8b413d77 100644 --- a/client/src/components/billing/reports/charts/extensions/barchart-data-label-plugin.js +++ b/client/src/components/billing/reports/charts/extensions/barchart-data-label-plugin.js @@ -28,22 +28,65 @@ const plugin = { afterDatasetsDraw: function (chart, ease, pluginOptions) { const {valueFormatter = costTickFormatter} = pluginOptions || {}; const ctx = chart.chart.ctx; + const { + scales = {} + } = chart; const datasetLabels = chart.data.datasets .map((dataset, i) => { const meta = chart.getDatasetMeta(i); + const { + yAxisID + } = meta; + const yAxis = scales[yAxisID]; const { hidden = false, - showDataLabel = !hidden + showDataLabel: showLabel = !hidden, + data: items = [] } = dataset; - if (meta && showDataLabel) { - return meta.data.map((element, index) => this.getInitialLabelConfig( - dataset, - element, - index, - meta, - chart, - valueFormatter - )); + const showDatasetLabel = (index) => { + if (typeof showLabel === 'function') { + const allData = chart.data.datasets.map((aDataset) => ({ + dataset: aDataset, + value: (aDataset.data || [])[index] + })); + return showLabel( + items[index], + allData, + { + yAxis, + getPxValue (aValue) { + return yAxis + ? yAxis.getPixelForValue(aValue) + : undefined; + }, + getPxSize (aValue) { + return yAxis + ? (yAxis.bottom - yAxis.getPixelForValue(aValue)) + : undefined; + }, + pxValue: yAxis ? yAxis.getPixelForValue(items[index]) : undefined, + minPxValue: yAxis ? yAxis.getPixelForValue(yAxis.min) : undefined, + pxSize: yAxis ? (yAxis.bottom - yAxis.getPixelForValue(items[index])) : undefined + } + ); + } + return showLabel; + }; + if (meta) { + return meta.data.map((element, index) => { + const show = showDatasetLabel(index); + if (show) { + return this.getInitialLabelConfig( + dataset, + element, + index, + meta, + chart, + valueFormatter + ); + } + return undefined; + }).filter(Boolean); } return []; }); @@ -179,15 +222,10 @@ const plugin = { ) { const { data, - hidden, textBold = false, - showDataLabel = !hidden, dataItemTitle = '' } = dataset; const {xAxisID, yAxisID} = meta; - if (hidden && !showDataLabel) { - return null; - } const xAxis = chart.scales[xAxisID]; const yAxis = chart.scales[yAxisID]; const dataItem = data && data.length > index ? data[index] : null; diff --git a/client/src/components/billing/reports/charts/object-storage/get-datasets-by-storage-class.js b/client/src/components/billing/reports/charts/object-storage/get-datasets-by-storage-class.js index 1ef826a9ac..d77dfd7aca 100644 --- a/client/src/components/billing/reports/charts/object-storage/get-datasets-by-storage-class.js +++ b/client/src/components/billing/reports/charts/object-storage/get-datasets-by-storage-class.js @@ -257,17 +257,20 @@ export function getDetailsDatasetsByStorageClassAndMetrics (storageClass, metric const currentDataSample = `costDetails.tiers.${storageClass}.${metricsName}`; const currentOldVersionDataSample = `costDetails.tiers.${storageClass}.${oldVersionMetricsName}`; const previousDataSample = `previousCostDetails.tiers.${storageClass}.${metricsName}`; + const showDetailsDataLabel = (value, datasetValues, options) => { + const { + getPxSize = (() => 0) + } = options || {}; + const detailsDatasets = datasetValues + .filter((value) => value.dataset.details && + (value.value > 0 && getPxSize(value.value) > 5.0) + ); + return detailsDatasets.length > 1; + }; return [ - { - sample: [currentDataSample, currentOldVersionDataSample], - main: true, - stack: 'current-total', - hidden: true, - showDataLabel: true - }, { sample: currentDataSample, - main: true, + details: true, stack: 'current', flagColor: undefined, tooltipValue (value, item) { @@ -288,15 +291,24 @@ export function getDetailsDatasetsByStorageClassAndMetrics (storageClass, metric return `${total} (current: ${current}; old versions: ${oldVersion})`; } return value; - } + }, + showDataLabel: showDetailsDataLabel }, { sample: currentOldVersionDataSample, - main: true, + details: true, stack: 'current', backgroundColor: 'transparent', flagColor: undefined, - showTooltip: false + showTooltip: false, + showDataLabel: showDetailsDataLabel + }, + { + sample: [currentDataSample, currentOldVersionDataSample], + main: true, + stack: 'current-total', + hidden: true, + showDataLabel: true }, { sample: previousDataSample, diff --git a/client/src/components/billing/reports/charts/storage-layers.js b/client/src/components/billing/reports/charts/storage-layers.js index 7e7a50aab8..ca87b0c145 100644 --- a/client/src/components/billing/reports/charts/storage-layers.js +++ b/client/src/components/billing/reports/charts/storage-layers.js @@ -80,7 +80,6 @@ function StorageLayers ( return { showFlag: false, borderWidth: 2, - borderDash: [4, 4], borderColor: baseColors, backgroundColor: backgroundColors, flagColor: baseColors[index], diff --git a/client/src/components/billing/reports/storage-report.js b/client/src/components/billing/reports/storage-report.js index 3293d85bc0..547a172db9 100644 --- a/client/src/components/billing/reports/storage-report.js +++ b/client/src/components/billing/reports/storage-report.js @@ -275,9 +275,20 @@ class StorageReports extends React.Component { .map(key => { return { stack: 'details', + details: true, label: LAYERS_LABELS[key] || key, data: getData(key, labels), - isOldVersions: [LAYERS_KEYS.oldVersionCost, LAYERS_KEYS.oldVersionAvgSize].includes(key) + isOldVersions: [LAYERS_KEYS.oldVersionCost, LAYERS_KEYS.oldVersionAvgSize].includes(key), + showDataLabel: (value, datasetValues, options) => { + const { + getPxSize = (() => 0) + } = options || {}; + const detailsDatasets = datasetValues + .filter((value) => value.dataset.details && + (value.value > 0 && getPxSize(value.value) > 5.0) + ); + return detailsDatasets.length > 1; + } }; }); const totalDataset = (datasets || []).reduce((acc, current) => {