Merge pull request #3604 from afreen23/data-consumption-labels-fix

Bug 1772565: Egress legend color mismatch with bars
openshift · Dec 3, 2019 · 0c2442c · 0c2442c
2 parents ba9ed49 + 166d7b6
commit 0c2442c
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 11 deletions.
diff --git a/...noobaa-storage-plugin/src/components/data-consumption-card/data-consumption-card-utils.ts b/...noobaa-storage-plugin/src/components/data-consumption-card/data-consumption-card-utils.ts
@@ -84,6 +84,7 @@ export const getDataConsumptionChartData: GetDataConsumptionChartData = (
   let max: HumanizeResult;
   let firstBarMax: HumanizeResult;
   let secondBarMax: HumanizeResult;
+  let nonFormattedData: ChartDataPoint[];
   switch (dropdownValue) {
     case 'PROVIDERS_BY_IOPS':
     case 'ACCOUNTS_BY_IOPS':
@@ -156,9 +157,13 @@ export const getDataConsumptionChartData: GetDataConsumptionChartData = (
       break;
     case 'PROVIDERS_BY_EGRESS':
       max = getMaxVal(result.egress, humanizeBinaryBytes);
-      chartData = [getChartData(result.egress, metric, humanizeBinaryBytes, max.unit)];
-      legendData = chartData[0].map((dataPoint) => ({
-        name: `${dataPoint.x} ${dataPoint.y} ${max.unit}`,
+      nonFormattedData = getChartData(result.egress, metric, humanizeBinaryBytes, max.unit);
+      chartData = nonFormattedData.length ? nonFormattedData.map((dataPoint) => [dataPoint]) : [[]];
+      legendData = nonFormattedData.map((dataPoint) => ({
+        name: `${dataPoint.x.replace(
+          /(^[A-Z]|_[A-Z])([A-Z]+)/g,
+          (_g, g1, g2) => g1 + g2.toLowerCase(),
+        )} ${dataPoint.y} ${max.unit}`,
       }));
       break;
     default:
@@ -174,7 +179,7 @@ export type ChartDataPoint = {
   name: string;
 };
 
-type ChartData = [ChartDataPoint[]] | [ChartDataPoint[], ChartDataPoint[]];
+type ChartData = ChartDataPoint[][];
 
 type LegendData = { name: string }[];
 

diff --git a/...ages/noobaa-storage-plugin/src/components/data-consumption-card/data-consumption-card.tsx b/...ages/noobaa-storage-plugin/src/components/data-consumption-card/data-consumption-card.tsx
@@ -20,7 +20,7 @@ import {
 } from '@console/internal/components/dashboard/with-dashboard-resources';
 import { GraphEmpty } from '@console/internal/components/graphs/graph-empty';
 import { PrometheusResponse } from '@console/internal/components/graphs';
-import { BY_IOPS, CHART_LABELS, PROVIDERS } from '../../constants';
+import { BY_IOPS, CHART_LABELS, PROVIDERS, BY_EGRESS } from '../../constants';
 import {
   DataConsumersValue,
   DataConsumersSortByValue,
@@ -67,9 +67,10 @@ const DataConsumptionCard: React.FC<DashboardItemProps> = ({
     curentDropdown,
   );
 
-  // chartData = [[]] or [[],[]]
+  // chartData = [[],[],[],[],[],[]] or []
   if (!chartData.some(_.isEmpty)) {
-    padding = chartData[0].length === 2 ? 125 : 30; // FIX: for making the bars closeby in case of two datapoints, should be removed once victory charts support this adjustment
+    padding =
+      chartData[0].length === 2 || (sortByKpi === BY_EGRESS && chartData.length === 2) ? 125 : 25; // Adjusts spacing between each BarGroup
     maxVal = max.value;
     maxUnit = max.unit;
     suffixLabel = maxUnit;
@@ -113,9 +114,9 @@ const DataConsumptionCard: React.FC<DashboardItemProps> = ({
                   themeColor={ChartThemeColor.purple}
                   data={legendData}
                   orientation="horizontal"
-                  symbolSpacer={7}
+                  symbolSpacer={5}
+                  gutter={2}
                   height={30}
-                  gutter={10}
                   padding={{ top: 50, bottom: 0 }}
                   style={{ labels: { fontSize: 8 } }}
                 />
@@ -124,7 +125,7 @@ const DataConsumptionCard: React.FC<DashboardItemProps> = ({
               padding={{
                 bottom: 50,
                 left: 30,
-                right: 30,
+                right: 20,
                 top: 30,
               }}
               themeColor={ChartThemeColor.purple}
@@ -138,7 +139,7 @@ const DataConsumptionCard: React.FC<DashboardItemProps> = ({
                   tickLabels: { fontSize: 8, padding: 0 },
                 }}
               />
-              <ChartGroup offset={11}>
+              <ChartGroup offset={sortByKpi === BY_EGRESS ? 0 : 11}>
                 {chartData.map((data, i) => (
                   <ChartBar key={i} data={data} /> // eslint-disable-line react/no-array-index-key
                 ))}