Billing enhancements: storage layers (#3080) - bar charts labels enha…

…ncements
epam · Mar 2, 2023 · 2cd73fa · 2cd73fa
1 parent 8dd1549
commit 2cd73fa
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 28 deletions.
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
@@ -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
@@ -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
@@ -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
@@ -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) => {