@razorpay/blade
Version:
The Design System that powers Razorpay
262 lines (253 loc) • 13.1 kB
JavaScript
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import React__default, { useState, useMemo } from 'react';
import '../../../node_modules/recharts/es6/index.js';
import '../utils/index.js';
import '../CommonChartComponents/index.js';
import { componentId } from '../CommonChartComponents/tokens.js';
import { componentIds } from './componentIds.js';
import '../../../utils/makeAnalyticsAttribute/index.js';
import '../../BladeProvider/index.js';
import '../../../utils/metaAttribute/index.js';
import '../../Box/BaseBox/index.js';
import getIn from '../../../utils/lodashButBetter/get.js';
import '../../../utils/assignWithoutSideEffects/index.js';
import '../../../utils/isValidAllowedChildren/index.js';
import { jsx, jsxs } from 'react/jsx-runtime';
import useTheme from '../../BladeProvider/useTheme.js';
import useChartsColorTheme from '../utils/useColorTheme.js';
import { getHighestColorInRange } from '../utils/getHighestColorInRange.js';
import { Area as Area$1 } from '../../../node_modules/recharts/es6/cartesian/Area.js';
import { assignWithoutSideEffects } from '../../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
import { getComponentId } from '../../../utils/isValidAllowedChildren/isValidAllowedChildren.js';
import { assignDataColorMapping } from '../utils/assignDataColorMapping/assignDataColorMapping.js';
import { CommonChartComponentsContext } from '../CommonChartComponents/CommonChartComponentsContext.js';
import { BaseBox } from '../../Box/BaseBox/BaseBox.web.js';
import { metaAttribute } from '../../../utils/metaAttribute/metaAttribute.web.js';
import { makeAnalyticsAttribute } from '../../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
import { ResponsiveContainer } from '../../../node_modules/recharts/es6/component/ResponsiveContainer.js';
import { AreaChart } from '../../../node_modules/recharts/es6/chart/AreaChart.js';
var _excluded = ["color", "type", "connectNulls", "showLegend", "stackId", "dot", "activeDot", "_index", "_colorTheme", "_totalAreas", "dataKey", "name", "hide"],
_excluded2 = ["data", "children", "testID", "colorTheme"];
function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Area = function Area(_ref) {
var color = _ref.color,
_ref$type = _ref.type,
type = _ref$type === void 0 ? 'monotone' : _ref$type,
_ref$connectNulls = _ref.connectNulls,
connectNulls = _ref$connectNulls === void 0 ? false : _ref$connectNulls,
_ref$showLegend = _ref.showLegend,
showLegend = _ref$showLegend === void 0 ? true : _ref$showLegend,
_ref$stackId = _ref.stackId,
stackId = _ref$stackId === void 0 ? 1 : _ref$stackId,
_ref$dot = _ref.dot,
dot = _ref$dot === void 0 ? false : _ref$dot,
_ref$activeDot = _ref.activeDot,
activeDot = _ref$activeDot === void 0 ? true : _ref$activeDot,
_index = _ref._index,
_colorTheme = _ref._colorTheme,
_totalAreas = _ref._totalAreas,
dataKey = _ref.dataKey,
name = _ref.name,
hide = _ref.hide,
props = _objectWithoutProperties(_ref, _excluded);
var _useTheme = useTheme(),
theme = _useTheme.theme;
var themeColors = useChartsColorTheme({
colorTheme: _colorTheme,
chartName: 'area',
chartDataIndicators: _totalAreas
});
var colorToken = getIn(theme.colors, color ? getHighestColorInRange({
colorToken: color
}) : themeColors[_index !== null && _index !== void 0 ? _index : 0]);
var animationBegin = theme.motion.delay.gentle;
var animationDuration = theme.motion.duration.xgentle;
return /*#__PURE__*/jsx(Area$1, _objectSpread(_objectSpread({}, props), {}, {
fill: "url(#color-".concat(_index, "-").concat(dataKey, ")"),
dataKey: dataKey,
name: name,
stroke: colorToken,
fillOpacity: 0.5,
type: type,
connectNulls: connectNulls,
legendType: showLegend ? 'rect' : 'none',
strokeWidth: 1.5,
dot: dot,
stackId: stackId,
activeDot: activeDot,
animationBegin: animationBegin,
animationDuration: animationDuration,
hide: hide
}));
};
var ChartArea = /*#__PURE__*/assignWithoutSideEffects(Area, {
componentId: componentIds.ChartArea
});
var ChartColorGradient = function ChartColorGradient(_ref2) {
var index = _ref2.index,
color = _ref2.color,
totalAreaChartChildren = _ref2.totalAreaChartChildren,
id = _ref2.id;
var _useTheme2 = useTheme(),
colorScheme = _useTheme2.colorScheme,
theme = _useTheme2.theme;
var isDarkMode = colorScheme === 'dark';
var themeColors = useChartsColorTheme({
colorTheme: 'categorical',
chartName: 'area',
chartDataIndicators: totalAreaChartChildren
});
var colorToken = getIn(theme.colors, getHighestColorInRange({
colorToken: color !== null && color !== void 0 ? color : themeColors[index],
followIntensityMapping: true
}));
return /*#__PURE__*/jsxs("linearGradient", {
id: id,
x1: "0",
y1: "0",
x2: "0",
y2: "1",
children: [/*#__PURE__*/jsx("stop", {
offset: "5%",
stopColor: colorToken,
stopOpacity: isDarkMode ? 0.28 : 1
}), /*#__PURE__*/jsx("stop", {
offset: "95%",
stopColor: colorToken,
stopOpacity: isDarkMode ? 0.12 : 0.32
})]
}, id);
};
// Main components
var ChartAreaWrapper = function ChartAreaWrapper(_ref3) {
var data = _ref3.data,
children = _ref3.children,
testID = _ref3.testID,
_ref3$colorTheme = _ref3.colorTheme,
colorTheme = _ref3$colorTheme === void 0 ? 'categorical' : _ref3$colorTheme,
restProps = _objectWithoutProperties(_ref3, _excluded2);
var themeColors = useChartsColorTheme({
colorTheme: colorTheme,
chartName: 'area'
});
// State to track which areas are currently selected (visible)
var _useState = useState(undefined),
_useState2 = _slicedToArray(_useState, 2),
selectedDataKeys = _useState2[0],
setSelectedDataKeys = _useState2[1];
var _useMemo = useMemo(function () {
var childrenArray = React__default.Children.toArray(children);
var dataColorMapping = {};
// Count ChartArea components
var totalAreas = childrenArray.filter(function (child) {
return /*#__PURE__*/React__default.isValidElement(child) && getComponentId(child) === componentIds.ChartArea;
}).length;
// Find ChartXAxis and extract secondaryDataKey
var secondaryDataKey;
var _iterator = _createForOfIteratorHelper(childrenArray),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var child = _step.value;
if (/*#__PURE__*/React__default.isValidElement(child) && getComponentId(child) === componentId.chartXAxis) {
var _child$props3;
secondaryDataKey = (_child$props3 = child.props) === null || _child$props3 === void 0 ? void 0 : _child$props3.secondaryDataKey;
break;
}
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
var AreaChartIndex = 0;
/**
* We need to check child of ChartAreaWrapper. if they have any custom color we store that.
* We need these mapping because colors of tooltip & legend is determine based on this
* recharts do provide a color but it is hex code and we need blade color token .
*/
var modifiedChildren = React__default.Children.map(children, function (child) {
if (/*#__PURE__*/React__default.isValidElement(child) && getComponentId(child) === componentIds.ChartArea) {
var _child$props, _child$props2;
var childColor = child === null || child === void 0 || (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.color;
var dataKey = child === null || child === void 0 || (_child$props2 = child.props) === null || _child$props2 === void 0 ? void 0 : _child$props2.dataKey;
if (dataKey) {
// assign colors to the dataColorMapping, if no color is assigned we assign color in `assignDataColorMapping`
dataColorMapping[dataKey] = {
colorToken: childColor,
isCustomColor: Boolean(childColor)
};
}
// Pass hide prop based on whether this area's dataKey is NOT in selectedDataKeys
// If selectedDataKeys is undefined, show all areas (default behavior)
return /*#__PURE__*/React__default.cloneElement(child, {
_index: AreaChartIndex++,
_colorTheme: colorTheme,
_totalAreas: totalAreas,
hide: selectedDataKeys ? !selectedDataKeys.includes(dataKey) : false
});
}
return child;
});
assignDataColorMapping(dataColorMapping, themeColors);
return {
modifiedChildren: modifiedChildren,
totalAreaChartChildren: AreaChartIndex,
dataColorMapping: dataColorMapping,
secondaryDataKey: secondaryDataKey
};
}, [children, colorTheme, themeColors, selectedDataKeys]),
modifiedChildren = _useMemo.modifiedChildren,
totalAreaChartChildren = _useMemo.totalAreaChartChildren,
dataColorMapping = _useMemo.dataColorMapping,
secondaryDataKey = _useMemo.secondaryDataKey;
// Build secondary label map internally from ChartXAxis's secondaryDataKey prop
var secondaryLabelMap = React__default.useMemo(function () {
if (!secondaryDataKey || !data) return undefined;
var map = {};
data.forEach(function (item, index) {
map[index] = item[secondaryDataKey];
});
return map;
}, [data, secondaryDataKey]);
return /*#__PURE__*/jsx(CommonChartComponentsContext.Provider, {
value: {
chartName: 'area',
dataColorMapping: dataColorMapping,
secondaryLabelMap: secondaryLabelMap,
dataLength: data === null || data === void 0 ? void 0 : data.length,
selectedDataKeys: selectedDataKeys,
setSelectedDataKeys: setSelectedDataKeys
},
children: /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, metaAttribute({
name: 'chart-area-container',
testID: testID
})), makeAnalyticsAttribute(restProps)), restProps), {}, {
width: "100%",
height: "100%",
children: /*#__PURE__*/jsx(ResponsiveContainer, {
children: /*#__PURE__*/jsxs(AreaChart, {
data: data,
children: [/*#__PURE__*/jsx("defs", {
children: Object.keys(dataColorMapping).map(function (dataKey, index) {
return /*#__PURE__*/jsx(ChartColorGradient, {
id: "color-".concat(index, "-").concat(dataKey),
index: index,
color: dataColorMapping[dataKey].colorToken,
totalAreaChartChildren: totalAreaChartChildren
}, "color-".concat(index, "-").concat(dataKey));
})
}), modifiedChildren]
})
})
}))
});
};
export { ChartArea, ChartAreaWrapper };
//# sourceMappingURL=AreaChart.web.js.map