GUI Billing enhancements (issue #3080): highlight selected layer (axi…

…s). Selected layer close button

client/src/components/billing/reports/charts/extensions/highlight-axis-plugin.js

@@ -0,0 +1,63 @@
+/*
+ * Copyright 2017-2023 EPAM Systems, Inc. (https://www.epam.com/)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const id = 'highlight-axis-plugin';
+
+const plugin = {
+  id,
+  beforeDraw: function (chart, e, configuration = {}) {
+    const {highlightAxis} = configuration;
+    if (!chart || highlightAxis === undefined || !configuration.backgroundColor) {
+      return;
+    }
+    const getSegmentBounds = () => {
+      const xAxisId = (chart.options.scales.xAxes[0] || {}).id;
+      const yAxisId = (chart.options.scales.yAxes[0] || {}).id;
+      const globalBounds = {
+        top: (chart.scales[yAxisId] || {}).top || 0,
+        bottom: (chart.scales[yAxisId] || {}).bottom || 0,
+        left: (chart.scales[xAxisId] || {}).left || 0,
+        right: (chart.scales[xAxisId] || {}).right || 0
+      };
+      const ticks = chart.scales[xAxisId].ticks
+        .map((tick, index) => chart.scales[xAxisId].getPixelForTick(index));
+      const tickCenter = ticks[highlightAxis];
+      const width = highlightAxis > 0
+        ? tickCenter - ticks[highlightAxis - 1]
+        : (ticks[highlightAxis] - globalBounds.left) * 2;
+      return {
+        xFrom: tickCenter - width / 2,
+        yFrom: globalBounds.top,
+        height: globalBounds.bottom,
+        width
+      };
+    };
+    this.highlightTick(
+      chart.ctx,
+      configuration,
+      getSegmentBounds()
+    );
+  },
+  highlightTick: function (ctx, configuration, bounds) {
+    ctx.save();
+    ctx.globalCompositeOperation = 'destination-over';
+    ctx.fillStyle = configuration.backgroundColor;
+    ctx.fillRect(bounds.xFrom, bounds.yFrom, bounds.width, bounds.height);
+    ctx.restore();
+  }
+};
+
+export {id, plugin};

client/src/components/billing/reports/charts/extensions/index.js

@@ -25,6 +25,7 @@ import * as PieChartDataLabelPlugin from './pie-chart-data-label-plugin';
 import * as PointDataLabelPlugin from './point-data-label-plugin';
 import * as VerticalLinePlugin from './vertical-line-plugin';
 import * as HighlightTicksPlugin from './highlight-ticks-plugin';
+import * as HighlightAxisPlugin from './highlight-axis-plugin';
 
 export {
   BarchartDataLabelPlugin,
@@ -35,5 +36,6 @@ export {
   PointDataLabelPlugin,
   VerticalLinePlugin,
   SummaryChart,
-  HighlightTicksPlugin
+  HighlightTicksPlugin,
+  HighlightAxisPlugin
 };

client/src/components/billing/reports/charts/storage-layers.js

@@ -20,7 +20,8 @@ import Chart from './base';
 import {
   BarchartDataLabelPlugin,
   ChartClickPlugin,
-  HighlightTicksPlugin
+  HighlightTicksPlugin,
+  HighlightAxisPlugin
 } from './extensions';
 import Export from '../export';
 import {costTickFormatter} from '../utilities';
@@ -51,6 +52,7 @@ function StorageLayers (
     reportThemes,
     highlightTickFn,
     highlightTickStyle = {},
+    highlightAxisStyle = {},
     loading,
     discounts = ((o) => o)
   }
@@ -188,6 +190,10 @@ function StorageLayers (
         highlightTickFn,
         axis: 'x-axis'
       },
+      [HighlightAxisPlugin.id]: {
+        highlightAxis: highlightedLabel,
+        backgroundColor: highlightAxisStyle.backgroundColor
+      },
       [BarchartDataLabelPlugin.id]: {
         valueFormatter
       },
@@ -241,7 +247,8 @@ function StorageLayers (
           plugins={[
             BarchartDataLabelPlugin.plugin,
             ChartClickPlugin.plugin,
-            HighlightTicksPlugin.plugin
+            HighlightTicksPlugin.plugin,
+            HighlightAxisPlugin.plugin
           ]}
           useChartImageGenerator={useImageConsumer}
           onImageDataReceived={onImageDataReceived}

client/src/components/billing/reports/storage-report.js

@@ -17,6 +17,7 @@
 import React from 'react';
 import {inject, observer} from 'mobx-react';
 import {computed} from 'mobx';
+import {Icon, Button} from 'antd';
 import {
   BarChart,
   BillingTable,
@@ -28,6 +29,7 @@ import {
   numberFormatter,
   ResizableContainer
 } from './utilities';
+import {fadeout} from '../../../themes/utilities/color-utilities';
 import BillingNavigation, {RUNNER_SEPARATOR, REGION_SEPARATOR} from '../navigation';
 import {
   getBillingGroupingSortField,
@@ -197,7 +199,7 @@ class StorageReports extends React.Component {
     } = filters;
     if (typeof storageAggregateNavigation === 'function') {
       storageAggregateNavigation(
-        storageAggregate === key
+        !key || storageAggregate === key
           ? StorageAggregate.default
           : key
       );
@@ -363,6 +365,28 @@ class StorageReports extends React.Component {
     return (dataItem) => getItemDetailsByMetrics(dataItem, metrics);
   }
 
+  renderSelectedLayerButton = () => {
+    const {filters} = this.props;
+    const {storageAggregate} = filters;
+    const layer = this.tiersData.labels[this.tiersData.aggregates.indexOf(storageAggregate)];
+    if (layer) {
+      return (
+        <Button
+          size="small"
+          onClick={() => this.onSelectLayer({})}
+          style={{
+            position: 'absolute',
+            top: 5,
+            right: 5
+          }}
+        >
+          <Icon type="close" /> {layer}
+        </Button>
+      );
+    }
+    return null;
+  };
+
   render () {
     const {
       storages,
@@ -461,10 +485,12 @@ class StorageReports extends React.Component {
                                   flexDirection: 'row',
                                   justifyContent: 'center',
                                   alignItems: 'center',
-                                  height: costsUsageSelectorHeight
+                                  height: costsUsageSelectorHeight,
+                                  position: 'relative'
                                 }}
                               >
                                 <StorageFilter />
+                                {this.renderSelectedLayerButton()}
                               </div>
                               <StorageLayers
                                 highlightedLabel={selectedIndex}
@@ -481,6 +507,9 @@ class StorageReports extends React.Component {
                                   fontColor: reportThemes.textColor,
                                   fontSize: 14
                                 }}
+                                highlightAxisStyle={{
+                                  backgroundColor: fadeout(reportThemes.lightBlue, 0.90)
+                                }}
                                 discounts={isVolumeMetrics ? undefined : storageDiscounts}
                               />
                             </div>