@razorpay/blade 12.111.0 → 12.119.1

package/build/lib/web/development/components/Charts/CommonChartComponents/CommonChartComponents.web.js

@@ -6,7 +6,7 @@ import React__default from 'react';
 import styled from 'styled-components';
 import '../../../node_modules/recharts/es6/index.js';
 import '../utils/index.js';
-import { X_AXIS_TICK_LINE_HEIGHT, X_AXIS_TICK_START_DY, X_AXIS_LABEL_GAP, X_AXIS_LABEL_OFFSET, X_AXIS_LABEL_HEIGHT, X_OFFSET, componentId, LEGEND_MARGIN_TOP, TEXT_BASELINE, PADDING_HORIZONTAL, PADDING_VERTICAL, RECT_HEIGHT } from './tokens.js';
+import { X_AXIS_TICK_LINE_HEIGHT, X_AXIS_TICK_START_DY, X_AXIS_LABEL_GAP, X_AXIS_LABEL_OFFSET, X_AXIS_LABEL_HEIGHT, X_OFFSET, componentId, LEGEND_MARGIN_TOP, TEXT_BASELINE, PADDING_HORIZONTAL, PADDING_VERTICAL, RECT_HEIGHT, REFERENCE_BAND_LOWER_CLASS, REFERENCE_BAND_UPPER_CLASS } from './tokens.js';
 import { calculateTextWidth } from './utils.js';
 import { useCommonChartComponentsContext } from './CommonChartComponentsContext.js';
 import getIn from '../../../utils/lodashButBetter/get.js';
@@ -15,7 +15,7 @@ import '../../Box/index.js';
 import '../../BladeProvider/index.js';
 import '../../../utils/assignWithoutSideEffects/index.js';
 import { useControllableState } from '../../../utils/useControllable.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { sanitizeString } from '../utils/sanitizeString/sanitizeString.js';
 import { isSequentialColor } from '../utils/isSequentialColor.js';
 import { getHighestColorInRange } from '../utils/getHighestColorInRange.js';
@@ -31,6 +31,7 @@ import { Tooltip } from '../../../node_modules/recharts/es6/component/Tooltip.js
 import { Heading } from '../../Typography/Heading/Heading.js';
 import { Legend } from '../../../node_modules/recharts/es6/component/Legend.js';
 import { ReferenceLine } from '../../../node_modules/recharts/es6/cartesian/ReferenceLine.js';
+import { Line } from '../../../node_modules/recharts/es6/cartesian/Line.js';
 
 var _excluded = ["interval", "tickLine", "label", "dataKey", "height", "tickFormatter"],
   _excluded2 = ["secondaryDataKey"],
@@ -356,42 +357,70 @@ var ChartCartesianGrid = function ChartCartesianGrid(props) {
   }, props));
 };
 var CustomTooltip = function CustomTooltip(_ref5) {
+  var _item$payload, _item$payload2, _range$rangeName;
   var item = _ref5.item;
   var _useTheme4 = useTheme(),
     theme = _useTheme4.theme;
   var _useCommonChartCompon2 = useCommonChartComponentsContext(),
     dataColorMapping = _useCommonChartCompon2.dataColorMapping,
-    chartName = _useCommonChartCompon2.chartName;
+    chartName = _useCommonChartCompon2.chartName,
+    rangeMap = _useCommonChartCompon2.rangeMap;
   var toolTipColor = getChartColor(item.dataKey, item.name, dataColorMapping !== null && dataColorMapping !== void 0 ? dataColorMapping : {}, chartName);
+
+  // If this series has a reference band, show its industry range (low–high) beneath the value.
+  var range = rangeMap === null || rangeMap === void 0 ? void 0 : rangeMap[item.dataKey];
+  var lowerValue = range ? (_item$payload = item.payload) === null || _item$payload === void 0 ? void 0 : _item$payload[range.rangeLowerDataKey] : undefined;
+  var upperValue = range ? (_item$payload2 = item.payload) === null || _item$payload2 === void 0 ? void 0 : _item$payload2[range.rangeUpperDataKey] : undefined;
+  var hasRange = range && lowerValue !== undefined && lowerValue !== null && upperValue !== undefined && upperValue !== null;
   return /*#__PURE__*/jsxs(Box, {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    gap: "spacing.4",
+    paddingY: "spacing.1",
     children: [/*#__PURE__*/jsxs(Box, {
       display: "flex",
-      gap: "spacing.3",
       alignItems: "center",
-      justifyContent: "center",
-      children: [/*#__PURE__*/jsx("div", {
-        style: {
-          width: theme.spacing[4],
-          height: theme.spacing[4],
-          backgroundColor: getIn(theme.colors, toolTipColor),
-          borderRadius: theme.border.radius.small
-        }
+      justifyContent: "space-between",
+      gap: "spacing.4",
+      children: [/*#__PURE__*/jsxs(Box, {
+        display: "flex",
+        gap: "spacing.3",
+        alignItems: "center",
+        justifyContent: "center",
+        children: [/*#__PURE__*/jsx("div", {
+          style: {
+            width: theme.spacing[4],
+            height: theme.spacing[4],
+            backgroundColor: getIn(theme.colors, toolTipColor),
+            borderRadius: theme.border.radius.small
+          }
+        }), /*#__PURE__*/jsx(Text, {
+          size: "small",
+          weight: "regular",
+          color: "surface.text.staticWhite.normal",
+          children: item.name
+        })]
       }), /*#__PURE__*/jsx(Text, {
         size: "small",
         weight: "regular",
         color: "surface.text.staticWhite.normal",
-        children: item.name
+        children: item.value
       })]
-    }), /*#__PURE__*/jsx(Text, {
-      size: "small",
-      weight: "regular",
-      color: "surface.text.staticWhite.normal",
-      children: item.value
-    })]
+    }), hasRange ? /*#__PURE__*/jsxs(Box, {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      gap: "spacing.4",
+      paddingLeft: "spacing.5",
+      children: [/*#__PURE__*/jsx(Text, {
+        size: "xsmall",
+        weight: "regular",
+        color: "surface.text.staticWhite.muted",
+        children: (_range$rangeName = range === null || range === void 0 ? void 0 : range.rangeName) !== null && _range$rangeName !== void 0 ? _range$rangeName : 'Industry'
+      }), /*#__PURE__*/jsx(Text, {
+        size: "xsmall",
+        weight: "regular",
+        color: "surface.text.staticWhite.muted",
+        children: "".concat(String(lowerValue), "\u2013").concat(String(upperValue))
+      })]
+    }) : null]
   }, "tooltip-".concat(item.name));
 };
 var ChartTooltip = function ChartTooltip(props) {
@@ -501,14 +530,57 @@ var LegendItem = function LegendItem(_ref8) {
     })
   }, "item-".concat(index));
 };
+
+/**
+ * Informational (non-toggleable) legend entries for the reference band(s). Bands aren't selectable
+ * series, so each renders a static square swatch in the band's fill colour + its label. One entry
+ * per band (a per-line band or the standalone band).
+ */
+var ReferenceBandLegendSwatch = function ReferenceBandLegendSwatch() {
+  var _useTheme7 = useTheme(),
+    theme = _useTheme7.theme;
+  var _useCommonChartCompon4 = useCommonChartComponentsContext(),
+    referenceBands = _useCommonChartCompon4.referenceBands;
+  if (!referenceBands || referenceBands.length === 0) return null;
+  return /*#__PURE__*/jsx(Fragment, {
+    children: referenceBands.map(function (band, index) {
+      return /*#__PURE__*/jsx(Box, {
+        display: "flex",
+        alignItems: "center",
+        padding: "spacing.2",
+        children: /*#__PURE__*/jsxs(Box, {
+          display: "flex",
+          gap: "spacing.3",
+          justifyContent: "center",
+          alignItems: "center",
+          children: [/*#__PURE__*/jsx("span", {
+            style: {
+              backgroundColor: getIn(theme.colors, band.color),
+              opacity: band.fillOpacity,
+              width: theme.spacing[4],
+              height: theme.spacing[4],
+              display: 'inline-block',
+              borderRadius: theme.border.radius['2xsmall']
+            }
+          }), /*#__PURE__*/jsx(Text, {
+            size: "medium",
+            color: "surface.text.gray.muted",
+            children: band.name
+          })]
+        })
+      }, "reference-band-".concat(index));
+    })
+  });
+};
 var CustomSquareLegend = function CustomSquareLegend(props) {
   var payload = props.payload,
     layout = props.layout,
     selectedDataKeys = props.selectedDataKeys,
     onClick = props.onClick;
-  var _useCommonChartCompon4 = useCommonChartComponentsContext(),
-    chartName = _useCommonChartCompon4.chartName,
-    dataColorMapping = _useCommonChartCompon4.dataColorMapping;
+  var _useCommonChartCompon5 = useCommonChartComponentsContext(),
+    chartName = _useCommonChartCompon5.chartName,
+    dataColorMapping = _useCommonChartCompon5.dataColorMapping,
+    referenceBands = _useCommonChartCompon5.referenceBands;
 
   /*
   This is a custom legend component that is used to display the legend for the chart.
@@ -557,21 +629,23 @@ var CustomSquareLegend = function CustomSquareLegend(props) {
   }
 
   // For other chart types, use the payload from recharts
-  if (!payload || payload.length === 0) {
-    return null;
-  }
-  var filteredPayload = payload.filter(function (entry) {
+  var filteredPayload = (payload !== null && payload !== void 0 ? payload : []).filter(function (entry) {
     var _entry$payload;
     return (entry === null || entry === void 0 || (_entry$payload = entry.payload) === null || _entry$payload === void 0 ? void 0 : _entry$payload.legendType) !== 'none' && (entry === null || entry === void 0 ? void 0 : entry.type) !== 'none';
   });
-  return /*#__PURE__*/jsx(Box, {
+
+  // Nothing to render — no real series and no reference band(s).
+  if (filteredPayload.length === 0 && (!referenceBands || referenceBands.length === 0)) {
+    return null;
+  }
+  return /*#__PURE__*/jsxs(Box, {
     display: "flex",
     justifyContent: "center",
     gap: "spacing.5",
     flexDirection: isVerticalLayout ? 'column' : 'row',
     width: isVerticalLayout ? '100%' : 'auto',
     flexWrap: "wrap",
-    children: filteredPayload.map(function (entry, index) {
+    children: [filteredPayload.map(function (entry, index) {
       return /*#__PURE__*/jsx(LegendItem, {
         entry: entry,
         index: index,
@@ -579,7 +653,7 @@ var CustomSquareLegend = function CustomSquareLegend(props) {
         onClick: onClick,
         isClickable: isClickable
       }, "item-".concat(index));
-    })
+    }), /*#__PURE__*/jsx(ReferenceBandLegendSwatch, {})]
   });
 };
 var _ChartLegend = function _ChartLegend(_ref9) {
@@ -588,11 +662,11 @@ var _ChartLegend = function _ChartLegend(_ref9) {
     defaultSelectedDataKeys = _ref9.defaultSelectedDataKeys,
     onSelectedDataKeysChange = _ref9.onSelectedDataKeysChange,
     props = _objectWithoutProperties(_ref9, _excluded3);
-  var _useTheme7 = useTheme(),
-    theme = _useTheme7.theme;
-  var _useCommonChartCompon5 = useCommonChartComponentsContext(),
-    dataColorMapping = _useCommonChartCompon5.dataColorMapping,
-    setSelectedDataKeys = _useCommonChartCompon5.setSelectedDataKeys;
+  var _useTheme8 = useTheme(),
+    theme = _useTheme8.theme;
+  var _useCommonChartCompon6 = useCommonChartComponentsContext(),
+    dataColorMapping = _useCommonChartCompon6.dataColorMapping,
+    setSelectedDataKeys = _useCommonChartCompon6.setSelectedDataKeys;
   var hasUserInteractedRef = React__default.useRef(false);
   var isControlled = selectedDataKeysProp !== undefined;
   var shouldAutoSelectAllDataKeys = !isControlled && defaultSelectedDataKeys === undefined;
@@ -692,8 +766,8 @@ var CustomReferenceLabel = function CustomReferenceLabel(_ref0) {
     x = _ref1.x,
     y = _ref1.y,
     width = _ref1.width;
-  var _useTheme8 = useTheme(),
-    theme = _useTheme8.theme;
+  var _useTheme9 = useTheme(),
+    theme = _useTheme9.theme;
 
   // Calculate dynamic text width to ensure the background rectangle fits the text perfectly.
   // This prevents text overflow for long labels and avoids unnecessarily large rectangles for short text.
@@ -737,8 +811,8 @@ var ChartReferenceLine = function ChartReferenceLine(_ref11) {
   var label = _ref11.label,
     x = _ref11.x,
     y = _ref11.y;
-  var _useTheme9 = useTheme(),
-    theme = _useTheme9.theme;
+  var _useTheme0 = useTheme(),
+    theme = _useTheme0.theme;
   return /*#__PURE__*/jsx(ReferenceLine, {
     stroke: theme.colors.data.background.categorical.gray.intense,
     strokeWidth: 2,
@@ -752,5 +826,47 @@ var ChartReferenceLine = function ChartReferenceLine(_ref11) {
   });
 };
 
-export { ChartCartesianGrid, ChartLegend, ChartReferenceLine, ChartTooltip, ChartXAxis, ChartYAxis };
+/**
+ * Reference band. Renders two invisible bound lines (`lowerDataKey` / `upperDataKey`) so
+ * Recharts computes their geometry and folds them into the y-domain; ChartLineWrapper then reads
+ * those curves and paints the shaded band between them (a data-driven range that varies per point,
+ * unlike Recharts' fixed-rectangle `ReferenceArea`). The band's fill + legend swatch are handled by
+ * the wrapper and the shared legend via context.
+ */
+var _ChartReferenceBand = function _ChartReferenceBand(_ref12) {
+  var lowerDataKey = _ref12.lowerDataKey,
+    upperDataKey = _ref12.upperDataKey;
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(Line, {
+      className: REFERENCE_BAND_LOWER_CLASS,
+      type: "monotone",
+      dataKey: lowerDataKey,
+      stroke: "transparent",
+      strokeWidth: 1,
+      dot: false,
+      activeDot: false,
+      connectNulls: true,
+      legendType: "none",
+      tooltipType: "none",
+      isAnimationActive: false
+    }), /*#__PURE__*/jsx(Line, {
+      className: REFERENCE_BAND_UPPER_CLASS,
+      type: "monotone",
+      dataKey: upperDataKey,
+      stroke: "transparent",
+      strokeWidth: 1,
+      dot: false,
+      activeDot: false,
+      connectNulls: true,
+      legendType: "none",
+      tooltipType: "none",
+      isAnimationActive: false
+    })]
+  });
+};
+var ChartReferenceBand = /*#__PURE__*/assignWithoutSideEffects(_ChartReferenceBand, {
+  componentId: componentId.chartReferenceBand
+});
+
+export { ChartCartesianGrid, ChartLegend, ChartReferenceBand, ChartReferenceLine, ChartTooltip, ChartXAxis, ChartYAxis };
 //# sourceMappingURL=CommonChartComponents.web.js.map