@mui/x-charts-premium 9.0.0-beta.0 → 9.0.0

package/CandlestickChart/CandlestickChart.js

@@ -21,6 +21,7 @@ var _ChartsAxisHighlight = require("@mui/x-charts/ChartsAxisHighlight");
 var _ChartsLayerContainer = require("@mui/x-charts/ChartsLayerContainer");
 var _ChartsSvgLayer = require("@mui/x-charts/ChartsSvgLayer");
 var _ChartsToolbarPro = require("@mui/x-charts-pro/ChartsToolbarPro");
+var _ChartsZoomSlider = require("@mui/x-charts-pro/ChartsZoomSlider");
 var _ChartsLegend = require("@mui/x-charts/ChartsLegend");
 var _ChartsWebGLLayer = require("../ChartsWebGLLayer");
 var _ChartsDataProviderPremium = require("../ChartsDataProviderPremium");
@@ -81,7 +82,7 @@ const CandlestickChart = exports.CandlestickChart = /*#__PURE__*/React.forwardRe
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSvgLayer.ChartsSvgLayer, (0, _extends2.default)({}, chartsSvgLayerProps, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("g", (0, _extends2.default)({}, clipPathGroupProps, {
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps))]
-          })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, (0, _extends2.default)({}, clipPathProps)), children]
+          })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsZoomSlider.ChartsZoomSlider, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, (0, _extends2.default)({}, clipPathProps)), children]
         }))]
       }), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, props.slotProps?.tooltip))]
     }))
@@ -445,7 +446,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
-        preview: _propTypes.default.bool,
+        preview: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.bool]),
         showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
@@ -519,7 +520,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
-        preview: _propTypes.default.bool,
+        preview: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.bool]),
         showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
@@ -580,7 +581,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
-        preview: _propTypes.default.bool,
+        preview: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.bool]),
         showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
@@ -642,7 +643,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
-        preview: _propTypes.default.bool,
+        preview: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.bool]),
         showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
@@ -703,7 +704,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
-        preview: _propTypes.default.bool,
+        preview: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.bool]),
         showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
@@ -764,7 +765,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
-        preview: _propTypes.default.bool,
+        preview: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.bool]),
         showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
@@ -829,7 +830,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
-        preview: _propTypes.default.bool,
+        preview: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.bool]),
         showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
@@ -894,7 +895,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
-        preview: _propTypes.default.bool,
+        preview: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.bool]),
         showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
@@ -955,7 +956,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
-        preview: _propTypes.default.bool,
+        preview: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.bool]),
         showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
@@ -1036,7 +1037,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
-        preview: _propTypes.default.bool,
+        preview: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.bool]),
         showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
@@ -1109,7 +1110,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
-        preview: _propTypes.default.bool,
+        preview: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.bool]),
         showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
@@ -1169,7 +1170,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
-        preview: _propTypes.default.bool,
+        preview: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.bool]),
         showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
@@ -1230,7 +1231,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
-        preview: _propTypes.default.bool,
+        preview: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.bool]),
         showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
@@ -1290,7 +1291,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
-        preview: _propTypes.default.bool,
+        preview: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.bool]),
         showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
@@ -1350,7 +1351,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
-        preview: _propTypes.default.bool,
+        preview: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.bool]),
         showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
@@ -1414,7 +1415,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
-        preview: _propTypes.default.bool,
+        preview: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.bool]),
         showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
@@ -1478,7 +1479,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
-        preview: _propTypes.default.bool,
+        preview: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.bool]),
         showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
@@ -1538,7 +1539,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
-        preview: _propTypes.default.bool,
+        preview: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.bool]),
         showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),

package/CandlestickChart/CandlestickChart.mjs

@@ -14,6 +14,7 @@ import { ChartsAxisHighlight } from '@mui/x-charts/ChartsAxisHighlight';
 import { ChartsLayerContainer } from '@mui/x-charts/ChartsLayerContainer';
 import { ChartsSvgLayer } from '@mui/x-charts/ChartsSvgLayer';
 import { ChartsToolbarPro } from '@mui/x-charts-pro/ChartsToolbarPro';
+import { ChartsZoomSlider } from '@mui/x-charts-pro/ChartsZoomSlider';
 import { ChartsLegend } from '@mui/x-charts/ChartsLegend';
 import { ChartsWebGLLayer } from "../ChartsWebGLLayer/index.mjs";
 import { ChartsDataProviderPremium } from "../ChartsDataProviderPremium/index.mjs";
@@ -73,7 +74,7 @@ const CandlestickChart = /*#__PURE__*/React.forwardRef(function CandlestickChart
         }), /*#__PURE__*/_jsxs(ChartsSvgLayer, _extends({}, chartsSvgLayerProps, {
           children: [/*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
             children: [/*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps))]
-          })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
+          })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartsZoomSlider, {}), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
         }))]
       }), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, props.slotProps?.tooltip))]
     }))
@@ -437,7 +438,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
-        preview: PropTypes.bool,
+        preview: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -511,7 +512,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
-        preview: PropTypes.bool,
+        preview: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -572,7 +573,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
-        preview: PropTypes.bool,
+        preview: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -634,7 +635,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
-        preview: PropTypes.bool,
+        preview: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -695,7 +696,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
-        preview: PropTypes.bool,
+        preview: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -756,7 +757,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
-        preview: PropTypes.bool,
+        preview: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -821,7 +822,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
-        preview: PropTypes.bool,
+        preview: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -886,7 +887,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
-        preview: PropTypes.bool,
+        preview: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -947,7 +948,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
-        preview: PropTypes.bool,
+        preview: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -1028,7 +1029,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
-        preview: PropTypes.bool,
+        preview: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -1101,7 +1102,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
-        preview: PropTypes.bool,
+        preview: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -1161,7 +1162,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
-        preview: PropTypes.bool,
+        preview: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -1222,7 +1223,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
-        preview: PropTypes.bool,
+        preview: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -1282,7 +1283,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
-        preview: PropTypes.bool,
+        preview: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -1342,7 +1343,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
-        preview: PropTypes.bool,
+        preview: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -1406,7 +1407,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
-        preview: PropTypes.bool,
+        preview: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -1470,7 +1471,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
-        preview: PropTypes.bool,
+        preview: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),
@@ -1530,7 +1531,7 @@ process.env.NODE_ENV !== "production" ? CandlestickChart.propTypes = {
       panning: PropTypes.bool,
       slider: PropTypes.shape({
         enabled: PropTypes.bool,
-        preview: PropTypes.bool,
+        preview: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
         showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
         size: PropTypes.number
       }),

package/CandlestickChart/CandlestickPlot.js

@@ -23,7 +23,14 @@ function CandlestickWebGLPlot() {
   const gl = (0, _ChartsWebGLLayer.useWebGLContext)();
   const series = (0, _useOHLCSeries.useOHLCSeriesContext)();
   const seriesToDisplay = series?.series[series.seriesOrder[0]];
-  if (!gl || !seriesToDisplay) {
+  const isHidden = !seriesToDisplay || seriesToDisplay.hidden;
+  React.useEffect(() => {
+    if (gl && isHidden) {
+      gl.clearColor(0, 0, 0, 0);
+      gl.clear(gl.COLOR_BUFFER_BIT);
+    }
+  }, [gl, isHidden]);
+  if (!gl || isHidden) {
     return null;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(CandlestickWebGLPlotImpl, {

package/CandlestickChart/CandlestickPlot.mjs

@@ -17,7 +17,14 @@ function CandlestickWebGLPlot() {
   const gl = useWebGLContext();
   const series = useOHLCSeriesContext();
   const seriesToDisplay = series?.series[series.seriesOrder[0]];
-  if (!gl || !seriesToDisplay) {
+  const isHidden = !seriesToDisplay || seriesToDisplay.hidden;
+  React.useEffect(() => {
+    if (gl && isHidden) {
+      gl.clearColor(0, 0, 0, 0);
+      gl.clear(gl.COLOR_BUFFER_BIT);
+    }
+  }, [gl, isHidden]);
+  if (!gl || isHidden) {
     return null;
   }
   return /*#__PURE__*/_jsx(CandlestickWebGLPlotImpl, {

package/CandlestickChart/seriesConfig/OHLCTooltipContent.js

@@ -12,6 +12,7 @@ var _ChartsTooltip = require("@mui/x-charts/ChartsTooltip");
 var _hooks = require("@mui/x-charts/hooks");
 var _internals = require("@mui/x-charts/internals");
 var _jsxRuntime = require("react/jsx-runtime");
+const OHLC_FIELDS = ['open', 'high', 'low', 'close'];
 function OHLCTooltipContent(props) {
   const {
     item
@@ -31,52 +32,22 @@ function OHLCTooltipContent(props) {
   if (item.value == null) {
     return null;
   }
-  const [open, high, low, close] = item.value;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltip.ChartsTooltipRow, {
-      className: classes.row,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltipCell, {
-        className: (0, _clsx.default)(classes.labelCell, classes.cell),
-        component: "th",
-        children: localeText.open
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltipCell, {
-        className: (0, _clsx.default)(classes.valueCell, classes.cell),
-        component: "td",
-        children: open
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltip.ChartsTooltipRow, {
-      className: classes.row,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltipCell, {
-        className: (0, _clsx.default)(classes.labelCell, classes.cell),
-        component: "th",
-        children: localeText.high
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltipCell, {
-        className: (0, _clsx.default)(classes.valueCell, classes.cell),
-        component: "td",
-        children: high
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltip.ChartsTooltipRow, {
-      className: classes.row,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltipCell, {
-        className: (0, _clsx.default)(classes.labelCell, classes.cell),
-        component: "th",
-        children: localeText.low
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltipCell, {
-        className: (0, _clsx.default)(classes.valueCell, classes.cell),
-        component: "td",
-        children: low
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltip.ChartsTooltipRow, {
+  const {
+    value,
+    formattedValue
+  } = item;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
+    children: OHLC_FIELDS.map(field => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltip.ChartsTooltipRow, {
       className: classes.row,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltipCell, {
         className: (0, _clsx.default)(classes.labelCell, classes.cell),
         component: "th",
-        children: localeText.close
+        children: localeText[field]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltipCell, {
         className: (0, _clsx.default)(classes.valueCell, classes.cell),
         component: "td",
-        children: close
+        children: formattedValue[field] ?? value[field]
       })]
-    })]
+    }, field))
   });
 }

package/CandlestickChart/seriesConfig/OHLCTooltipContent.mjs

@@ -4,6 +4,7 @@ import { ChartsTooltipCell, ChartsTooltipRow } from '@mui/x-charts/ChartsTooltip
 import { useChartsLocalization } from '@mui/x-charts/hooks';
 import { useChartsTooltipUtilityClasses } from '@mui/x-charts/internals';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const OHLC_FIELDS = ['open', 'high', 'low', 'close'];
 export function OHLCTooltipContent(props) {
   const {
     item
@@ -23,52 +24,22 @@ export function OHLCTooltipContent(props) {
   if (item.value == null) {
     return null;
   }
-  const [open, high, low, close] = item.value;
-  return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [/*#__PURE__*/_jsxs(ChartsTooltipRow, {
-      className: classes.row,
-      children: [/*#__PURE__*/_jsx(ChartsTooltipCell, {
-        className: clsx(classes.labelCell, classes.cell),
-        component: "th",
-        children: localeText.open
-      }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
-        className: clsx(classes.valueCell, classes.cell),
-        component: "td",
-        children: open
-      })]
-    }), /*#__PURE__*/_jsxs(ChartsTooltipRow, {
-      className: classes.row,
-      children: [/*#__PURE__*/_jsx(ChartsTooltipCell, {
-        className: clsx(classes.labelCell, classes.cell),
-        component: "th",
-        children: localeText.high
-      }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
-        className: clsx(classes.valueCell, classes.cell),
-        component: "td",
-        children: high
-      })]
-    }), /*#__PURE__*/_jsxs(ChartsTooltipRow, {
-      className: classes.row,
-      children: [/*#__PURE__*/_jsx(ChartsTooltipCell, {
-        className: clsx(classes.labelCell, classes.cell),
-        component: "th",
-        children: localeText.low
-      }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
-        className: clsx(classes.valueCell, classes.cell),
-        component: "td",
-        children: low
-      })]
-    }), /*#__PURE__*/_jsxs(ChartsTooltipRow, {
+  const {
+    value,
+    formattedValue
+  } = item;
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: OHLC_FIELDS.map(field => /*#__PURE__*/_jsxs(ChartsTooltipRow, {
       className: classes.row,
       children: [/*#__PURE__*/_jsx(ChartsTooltipCell, {
         className: clsx(classes.labelCell, classes.cell),
         component: "th",
-        children: localeText.close
+        children: localeText[field]
       }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
         className: clsx(classes.valueCell, classes.cell),
         component: "td",
-        children: close
+        children: formattedValue[field] ?? value[field]
       })]
-    })]
+    }, field))
   });
 }

package/CandlestickChart/seriesConfig/descriptionGetter.js

@@ -19,11 +19,30 @@ const descriptionGetter = params => {
     location: 'tooltip',
     scale: xAxis.scale
   }) ?? '';
+  const {
+    dataIndex
+  } = identifier;
   return localeText.ohlcDescription({
     open: value?.[0] ?? null,
     high: value?.[1] ?? null,
     low: value?.[2] ?? null,
     close: value?.[3] ?? null,
+    formattedOpen: value ? series.valueFormatter(value[0], {
+      dataIndex,
+      field: 'open'
+    }) : null,
+    formattedHigh: value ? series.valueFormatter(value[1], {
+      dataIndex,
+      field: 'high'
+    }) : null,
+    formattedLow: value ? series.valueFormatter(value[2], {
+      dataIndex,
+      field: 'low'
+    }) : null,
+    formattedClose: value ? series.valueFormatter(value[3], {
+      dataIndex,
+      field: 'close'
+    }) : null,
     date,
     formattedDate,
     seriesLabel: label

package/CandlestickChart/seriesConfig/descriptionGetter.mjs

@@ -13,11 +13,30 @@ const descriptionGetter = params => {
     location: 'tooltip',
     scale: xAxis.scale
   }) ?? '';
+  const {
+    dataIndex
+  } = identifier;
   return localeText.ohlcDescription({
     open: value?.[0] ?? null,
     high: value?.[1] ?? null,
     low: value?.[2] ?? null,
     close: value?.[3] ?? null,
+    formattedOpen: value ? series.valueFormatter(value[0], {
+      dataIndex,
+      field: 'open'
+    }) : null,
+    formattedHigh: value ? series.valueFormatter(value[1], {
+      dataIndex,
+      field: 'high'
+    }) : null,
+    formattedLow: value ? series.valueFormatter(value[2], {
+      dataIndex,
+      field: 'low'
+    }) : null,
+    formattedClose: value ? series.valueFormatter(value[3], {
+      dataIndex,
+      field: 'close'
+    }) : null,
     date,
     formattedDate,
     seriesLabel: label

package/CandlestickChart/seriesConfig/getColor.js

@@ -28,15 +28,32 @@ const getColor = (series, xAxis) => {
       return color;
     };
   }
+  if (series.colorGetter) {
+    return dataIndex => {
+      if (dataIndex === undefined) {
+        return series.color;
+      }
+      const value = series.data[dataIndex];
+      return getSeriesColor({
+        value,
+        dataIndex
+      });
+    };
+  }
+  const {
+    upColor,
+    downColor
+  } = series;
   return dataIndex => {
     if (dataIndex === undefined) {
       return series.color;
     }
     const value = series.data[dataIndex];
-    return getSeriesColor({
-      value,
-      dataIndex
-    });
+    if (value === null) {
+      return series.color;
+    }
+    const [open,,, close] = value;
+    return close >= open ? upColor : downColor;
   };
 };
 var _default = exports.default = getColor;

package/CandlestickChart/seriesConfig/getColor.mjs

@@ -22,15 +22,32 @@ const getColor = (series, xAxis) => {
       return color;
     };
   }
+  if (series.colorGetter) {
+    return dataIndex => {
+      if (dataIndex === undefined) {
+        return series.color;
+      }
+      const value = series.data[dataIndex];
+      return getSeriesColor({
+        value,
+        dataIndex
+      });
+    };
+  }
+  const {
+    upColor,
+    downColor
+  } = series;
   return dataIndex => {
     if (dataIndex === undefined) {
       return series.color;
     }
     const value = series.data[dataIndex];
-    return getSeriesColor({
-      value,
-      dataIndex
-    });
+    if (value === null) {
+      return series.color;
+    }
+    const [open,,, close] = value;
+    return close >= open ? upColor : downColor;
   };
 };
 export default getColor;