@hitachivantara/uikit-react-viz 4.0.1-next.2 → 4.0.1-next.5

package/dist/Chart/Chart.d.ts

@@ -3,11 +3,30 @@ import { HvPlotProps } from "./Plot";
 
 export type HvChartClassKey = "root";
 
+export type TooltipElementObject = {
+  color: string;
+  name: string;
+  value: number | string;
+};
+
+export type TooltipDataObject = {
+  title: string;
+  elements: TooltipElementObject[];
+};
+
 export interface HvChartProps extends StandardProps<HvPlotProps, HvChartClassKey> {
+  /**
+   * An Id passed on to the component
+   */
+  id?: string;
   /**
    * Defines if should use a single or multiline tooltip.
    */
   tooltipType?: "single" | "multiple";
+  /**
+   * Custom tooltip element to be displayed
+   */
+  tooltip?: (data: TooltipDataObject) => Element;
   /**
    * Defines the X axis title.
    */

package/dist/Chart/Chart.js

@@ -57,7 +57,7 @@ var _styles2 = _interopRequireDefault(require("./styles"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-var _excluded = ["id", "classes", "data", "layout", "config", "tooltipType", "afterPlot", "xAxisTitle", "yAxisTitle"];
+var _excluded = ["id", "classes", "data", "layout", "config", "tooltipType", "tooltip", "afterPlot", "xAxisTitle", "yAxisTitle"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -75,6 +75,7 @@ var Chart = function Chart(_ref) {
       config = _ref.config,
       _ref$tooltipType = _ref.tooltipType,
       tooltipType = _ref$tooltipType === void 0 ? "multiple" : _ref$tooltipType,
+      tooltip = _ref.tooltip,
       afterPlot = _ref.afterPlot,
       xAxisTitle = _ref.xAxisTitle,
       yAxisTitle = _ref.yAxisTitle,
@@ -152,7 +153,8 @@ var Chart = function Chart(_ref) {
     children: [isHover && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
       coordinates: coordinates,
       data: dataTooltip,
-      useSingle: useSingle
+      useSingle: useSingle,
+      tooltip: tooltip
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       id: id,
       className: classes.root,
@@ -204,6 +206,11 @@ process.env.NODE_ENV !== "production" ? Chart.propTypes = {
    */
   tooltipType: _propTypes.default.oneOf(["single", "multiple"]),
 
+  /**
+   * Custom tooltip element to be displayed
+   */
+  tooltip: _propTypes.default.func,
+
   /**
    * Function to be called after plot render.
    */

package/dist/Chart/Chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chart.js","names":["Chart","id","classes","data","layout","config","tooltipType","afterPlot","xAxisTitle","yAxisTitle","others","theme","useTheme","isHorizontal","useMemo","isNil","orientation","toUpperCase","chartLayout","applyLayoutDefaults","chartConfig","applyConfigDefaults","useSingle","useState","isHover","setIsHover","x","y","coordinates","setCoordinates","dataTooltip","setDataTooltip","onHover","useCallback","event","points","dataFromPoints","title","elements","forEach","p","i","fData","fullData","pNumber","pointNumber","name","push","color","marker","line","labels","value","onUnHover","onMouseMove","clientX","clientY","root","propTypes","PropTypes","string","shape","arrayOf","instanceOf","Object","isRequired","oneOf","func","subtitle","withStyles","styles"],"sources":["../../src/Chart/Chart.js"],"sourcesContent":["import React, { useState, useMemo, useCallback } from \"react\";\nimport PropTypes from \"prop-types\";\nimport isNil from \"lodash/isNil\";\nimport { withStyles, useTheme } from \"@mui/styles\";\n\nimport Tooltip from \"./Tooltip\";\nimport { applyLayoutDefaults, applyConfigDefaults } from \"./chartPlotlyOverrides\";\n\nimport Plot from \"./Plot\";\nimport styles from \"./styles\";\n\nconst Chart = ({\n  id,\n  classes,\n  data,\n  layout,\n  config,\n  tooltipType = \"multiple\",\n  afterPlot,\n  xAxisTitle,\n  yAxisTitle,\n  ...others\n}) => {\n  const theme = useTheme();\n\n  /* Values derived from props */\n\n  // Check if the barchart is horizontal or vertical.\n  const isHorizontal = useMemo(\n    () => (!isNil(data[0]?.orientation) ? data[0].orientation.toUpperCase() === \"H\" : false),\n    [data]\n  );\n\n  const chartLayout = useMemo(\n    () => applyLayoutDefaults(layout, theme, isHorizontal, xAxisTitle, yAxisTitle),\n    [isHorizontal, layout, theme, xAxisTitle, yAxisTitle]\n  );\n\n  const chartConfig = useMemo(() => applyConfigDefaults(config), [config]);\n\n  const useSingle = tooltipType === \"single\";\n\n  /* State */\n\n  const [isHover, setIsHover] = useState(false);\n  const [coordinates, setCoordinates] = useState({ x: 0, y: 0 });\n  const [dataTooltip, setDataTooltip] = useState();\n\n  /* Callbacks */\n\n  // Extract data from the plotly onHover event to be used to create the tooltip.\n  const onHover = useCallback(\n    (event) => {\n      const { points } = event;\n\n      const dataFromPoints = {\n        title: \"\",\n        elements: [],\n      };\n\n      points.forEach((p, i) => {\n        const fData = p.fullData;\n        const pNumber = p.pointNumber;\n\n        if (i === 0) dataFromPoints.title = isHorizontal ? p.y : p.x || fData.name;\n\n        dataFromPoints.elements.push({\n          color: fData.marker?.color || fData.line?.color || p.color,\n          name: fData.labels?.[pNumber] || fData.name,\n          value: isHorizontal ? p.x : p.y || p.value,\n        });\n      });\n\n      setDataTooltip(dataFromPoints);\n      setIsHover(true);\n    },\n    [isHorizontal]\n  );\n\n  const onUnHover = useCallback(() => {\n    setIsHover(false);\n  }, []);\n\n  const onMouseMove = useCallback((event) => {\n    setCoordinates({\n      x: event.clientX,\n      y: event.clientY,\n    });\n  }, []);\n\n  return (\n    <>\n      {isHover && <Tooltip coordinates={coordinates} data={dataTooltip} useSingle={useSingle} />}\n      <div id={id} className={classes.root}>\n        <div onMouseMove={onMouseMove}>\n          <Plot\n            data={data}\n            layout={chartLayout}\n            config={chartConfig}\n            onHover={onHover}\n            onUnHover={onUnHover}\n            afterPlot={afterPlot}\n            {...others}\n          />\n        </div>\n      </div>\n    </>\n  );\n};\n\nChart.propTypes = {\n  /**\n   * An Id passed on to the component\n   */\n  id: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    root: PropTypes.string,\n  }),\n\n  /**\n   * Plotly data object (see https://plot.ly/javascript/reference/).\n   */\n  data: PropTypes.arrayOf(PropTypes.instanceOf(Object)).isRequired,\n  /**\n   * Plotly layout object (see https://plot.ly/javascript/reference/#layout).\n   */\n  layout: PropTypes.instanceOf(Object).isRequired,\n  /**\n   * Plotly config object (see https://plot.ly/javascript/configuration-options/).\n   */\n  config: PropTypes.instanceOf(Object),\n  /**\n   * Defines if should use a single or multiline tooltip.\n   */\n  tooltipType: PropTypes.oneOf([\"single\", \"multiple\"]),\n  /**\n   * Function to be called after plot render.\n   */\n  afterPlot: PropTypes.func,\n  /**\n   * Defines the X axis title.\n   */\n  xAxisTitle: PropTypes.string,\n  /**\n   * Defines the Y axis title.\n   */\n  yAxisTitle: PropTypes.string,\n  /**\n   * Defines the chart subtitle.\n   */\n  subtitle: PropTypes.string,\n};\n\nexport default withStyles(styles, { name: \"HvChart\" })(Chart);\n"],"mappings":"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"}
+{"version":3,"file":"Chart.js","names":["Chart","id","classes","data","layout","config","tooltipType","tooltip","afterPlot","xAxisTitle","yAxisTitle","others","theme","useTheme","isHorizontal","useMemo","isNil","orientation","toUpperCase","chartLayout","applyLayoutDefaults","chartConfig","applyConfigDefaults","useSingle","useState","isHover","setIsHover","x","y","coordinates","setCoordinates","dataTooltip","setDataTooltip","onHover","useCallback","event","points","dataFromPoints","title","elements","forEach","p","i","fData","fullData","pNumber","pointNumber","name","push","color","marker","line","labels","value","onUnHover","onMouseMove","clientX","clientY","root","propTypes","PropTypes","string","shape","arrayOf","instanceOf","Object","isRequired","oneOf","func","subtitle","withStyles","styles"],"sources":["../../src/Chart/Chart.js"],"sourcesContent":["import React, { useState, useMemo, useCallback } from \"react\";\nimport PropTypes from \"prop-types\";\nimport isNil from \"lodash/isNil\";\nimport { withStyles, useTheme } from \"@mui/styles\";\n\nimport Tooltip from \"./Tooltip\";\nimport { applyLayoutDefaults, applyConfigDefaults } from \"./chartPlotlyOverrides\";\n\nimport Plot from \"./Plot\";\nimport styles from \"./styles\";\n\nconst Chart = ({\n  id,\n  classes,\n  data,\n  layout,\n  config,\n  tooltipType = \"multiple\",\n  tooltip,\n  afterPlot,\n  xAxisTitle,\n  yAxisTitle,\n  ...others\n}) => {\n  const theme = useTheme();\n\n  /* Values derived from props */\n\n  // Check if the barchart is horizontal or vertical.\n  const isHorizontal = useMemo(\n    () => (!isNil(data[0]?.orientation) ? data[0].orientation.toUpperCase() === \"H\" : false),\n    [data]\n  );\n\n  const chartLayout = useMemo(\n    () => applyLayoutDefaults(layout, theme, isHorizontal, xAxisTitle, yAxisTitle),\n    [isHorizontal, layout, theme, xAxisTitle, yAxisTitle]\n  );\n\n  const chartConfig = useMemo(() => applyConfigDefaults(config), [config]);\n\n  const useSingle = tooltipType === \"single\";\n\n  /* State */\n\n  const [isHover, setIsHover] = useState(false);\n  const [coordinates, setCoordinates] = useState({ x: 0, y: 0 });\n  const [dataTooltip, setDataTooltip] = useState();\n\n  /* Callbacks */\n\n  // Extract data from the plotly onHover event to be used to create the tooltip.\n  const onHover = useCallback(\n    (event) => {\n      const { points } = event;\n\n      const dataFromPoints = {\n        title: \"\",\n        elements: [],\n      };\n\n      points.forEach((p, i) => {\n        const fData = p.fullData;\n        const pNumber = p.pointNumber;\n\n        if (i === 0) dataFromPoints.title = isHorizontal ? p.y : p.x || fData.name;\n\n        dataFromPoints.elements.push({\n          color: fData.marker?.color || fData.line?.color || p.color,\n          name: fData.labels?.[pNumber] || fData.name,\n          value: isHorizontal ? p.x : p.y || p.value,\n        });\n      });\n\n      setDataTooltip(dataFromPoints);\n      setIsHover(true);\n    },\n    [isHorizontal]\n  );\n\n  const onUnHover = useCallback(() => {\n    setIsHover(false);\n  }, []);\n\n  const onMouseMove = useCallback((event) => {\n    setCoordinates({\n      x: event.clientX,\n      y: event.clientY,\n    });\n  }, []);\n\n  return (\n    <>\n      {isHover && (\n        <Tooltip\n          coordinates={coordinates}\n          data={dataTooltip}\n          useSingle={useSingle}\n          tooltip={tooltip}\n        />\n      )}\n      <div id={id} className={classes.root}>\n        <div onMouseMove={onMouseMove}>\n          <Plot\n            data={data}\n            layout={chartLayout}\n            config={chartConfig}\n            onHover={onHover}\n            onUnHover={onUnHover}\n            afterPlot={afterPlot}\n            {...others}\n          />\n        </div>\n      </div>\n    </>\n  );\n};\n\nChart.propTypes = {\n  /**\n   * An Id passed on to the component\n   */\n  id: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    root: PropTypes.string,\n  }),\n\n  /**\n   * Plotly data object (see https://plot.ly/javascript/reference/).\n   */\n  data: PropTypes.arrayOf(PropTypes.instanceOf(Object)).isRequired,\n  /**\n   * Plotly layout object (see https://plot.ly/javascript/reference/#layout).\n   */\n  layout: PropTypes.instanceOf(Object).isRequired,\n  /**\n   * Plotly config object (see https://plot.ly/javascript/configuration-options/).\n   */\n  config: PropTypes.instanceOf(Object),\n  /**\n   * Defines if should use a single or multiline tooltip.\n   */\n  tooltipType: PropTypes.oneOf([\"single\", \"multiple\"]),\n  /**\n   * Custom tooltip element to be displayed\n   */\n  tooltip: PropTypes.func,\n  /**\n   * Function to be called after plot render.\n   */\n  afterPlot: PropTypes.func,\n  /**\n   * Defines the X axis title.\n   */\n  xAxisTitle: PropTypes.string,\n  /**\n   * Defines the Y axis title.\n   */\n  yAxisTitle: PropTypes.string,\n  /**\n   * Defines the chart subtitle.\n   */\n  subtitle: PropTypes.string,\n};\n\nexport default withStyles(styles, { name: \"HvChart\" })(Chart);\n"],"mappings":"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"}

package/dist/Chart/Tooltip/Tooltip.js

@@ -48,10 +48,13 @@ var offset = 20;
  */
 
 var MainToolTip = function MainToolTip(_ref) {
+  var _MultipleTooltip;
+
   var classes = _ref.classes,
       coordinates = _ref.coordinates,
       data = _ref.data,
-      useSingle = _ref.useSingle;
+      useSingle = _ref.useSingle,
+      tooltip = _ref.tooltip;
   var x = coordinates.x,
       y = coordinates.y;
 
@@ -82,16 +85,21 @@ var MainToolTip = function MainToolTip(_ref) {
       top: y - height - offset
     });
   }, [x, y]);
+  var renderTooltip = (0, _react.useCallback)(function (CustomTooltip) {
+    if (CustomTooltip) return CustomTooltip(data);
+    if (useSingle) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SingleTooltip.default, {
+      title: data.title,
+      value: data.elements[0].value
+    });
+    return _MultipleTooltip || (_MultipleTooltip = /*#__PURE__*/(0, _jsxRuntime.jsx)(_MultiTooltip.default, {
+      data: data
+    }));
+  }, [data, useSingle]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     ref: ref,
     className: classes.root,
     style: style,
-    children: useSingle && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SingleTooltip.default, {
-      title: data.title,
-      value: data.elements[0].value
-    }) || /*#__PURE__*/(0, _jsxRuntime.jsx)(_MultiTooltip.default, {
-      data: data
-    })
+    children: renderTooltip(tooltip)
   });
 };
 
@@ -154,7 +162,12 @@ process.env.NODE_ENV !== "production" ? MainToolTip.propTypes = {
   /**
    * Defines if should use a single or multiline tooltip.
    */
-  useSingle: _propTypes.default.bool
+  useSingle: _propTypes.default.bool,
+
+  /**
+   * Custom tooltip element to be displayed
+   */
+  tooltip: _propTypes.default.func
 } : void 0;
 MainToolTip.defaultProps = {
   useSingle: false

package/dist/Chart/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","names":["offset","MainToolTip","classes","coordinates","data","useSingle","x","y","useState","left","top","visibility","style","setStyle","ref","useRef","useEffect","current","getBoundingClientRect","width","height","root","title","elements","value","propTypes","PropTypes","shape","string","isRequired","arrayOf","color","name","number","bool","defaultProps","withStyles","styles"],"sources":["../../../src/Chart/Tooltip/Tooltip.js"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { withStyles } from \"@mui/styles\";\nimport SingleTooltip from \"./SingleTooltip\";\nimport MultipleTooltip from \"./MultiTooltip\";\nimport styles from \"./styles\";\n\nconst offset = 20;\n\n/**\n * Component responsible for deciding which tooltip should be use and to calculate\n * the exact position where it should be render.\n */\nconst MainToolTip = ({ classes, coordinates, data, useSingle }) => {\n  const { x, y } = coordinates;\n  const [style, setStyle] = useState({ left: x, top: y, visibility: \"hidden\" });\n  const ref = useRef(null);\n\n  /**\n   * Calculate the position where the tooltip has to render, having in account\n   * the dimensions.\n   */\n  useEffect(() => {\n    if (!ref.current || !ref.current.getBoundingClientRect().width) return;\n\n    const { width, height } = ref.current.getBoundingClientRect();\n\n    setStyle({ left: x - width / 2, top: y - height - offset });\n  }, [x, y]);\n\n  return (\n    <div ref={ref} className={classes.root} style={style}>\n      {(useSingle && <SingleTooltip title={data.title} value={data.elements[0].value} />) || (\n        <MultipleTooltip data={data} />\n      )}\n    </div>\n  );\n};\n\nMainToolTip.propTypes = {\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the barchart root class.\n     */\n    root: PropTypes.string,\n  }).isRequired,\n  /**\n   * Data of the tooltip.\n   */\n  data: PropTypes.shape({\n    /**\n     * Title.\n     */\n    title: PropTypes.string,\n    /**\n     * Values of the tooltip.\n     */\n    elements: PropTypes.arrayOf(\n      PropTypes.shape({\n        /**\n         * Color of the bar.\n         */\n        color: PropTypes.string,\n        /**\n         * Name.\n         */\n        name: PropTypes.string,\n        /**\n         * Value.\n         */\n        value: PropTypes.number,\n      })\n    ),\n  }).isRequired,\n  /**\n   * Coordinates.\n   */\n  coordinates: PropTypes.shape({\n    /**\n     * xx's coordinate.\n     */\n    x: PropTypes.number.isRequired,\n    /**\n     * yy's coordinate.\n     */\n    y: PropTypes.number.isRequired,\n  }).isRequired,\n  /**\n   * Defines if should use a single or multiline tooltip.\n   */\n  useSingle: PropTypes.bool,\n};\n\nMainToolTip.defaultProps = {\n  useSingle: false,\n};\n\nexport default withStyles(styles, { name: \"HvChartTooltip\" })(MainToolTip);\n"],"mappings":"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"}
+{"version":3,"file":"Tooltip.js","names":["offset","MainToolTip","classes","coordinates","data","useSingle","tooltip","x","y","useState","left","top","visibility","style","setStyle","ref","useRef","useEffect","current","getBoundingClientRect","width","height","renderTooltip","useCallback","CustomTooltip","title","elements","value","root","propTypes","PropTypes","shape","string","isRequired","arrayOf","color","name","number","bool","func","defaultProps","withStyles","styles"],"sources":["../../../src/Chart/Tooltip/Tooltip.js"],"sourcesContent":["import React, { useEffect, useRef, useState, useCallback } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { withStyles } from \"@mui/styles\";\nimport SingleTooltip from \"./SingleTooltip\";\nimport MultipleTooltip from \"./MultiTooltip\";\nimport styles from \"./styles\";\n\nconst offset = 20;\n\n/**\n * Component responsible for deciding which tooltip should be use and to calculate\n * the exact position where it should be render.\n */\nconst MainToolTip = ({ classes, coordinates, data, useSingle, tooltip }) => {\n  const { x, y } = coordinates;\n  const [style, setStyle] = useState({ left: x, top: y, visibility: \"hidden\" });\n  const ref = useRef(null);\n\n  /**\n   * Calculate the position where the tooltip has to render, having in account\n   * the dimensions.\n   */\n  useEffect(() => {\n    if (!ref.current || !ref.current.getBoundingClientRect().width) return;\n\n    const { width, height } = ref.current.getBoundingClientRect();\n\n    setStyle({ left: x - width / 2, top: y - height - offset });\n  }, [x, y]);\n\n  const renderTooltip = useCallback(\n    (CustomTooltip) => {\n      if (CustomTooltip) return CustomTooltip(data);\n      if (useSingle) return <SingleTooltip title={data.title} value={data.elements[0].value} />;\n      return <MultipleTooltip data={data} />;\n    },\n    [data, useSingle]\n  );\n\n  return (\n    <div ref={ref} className={classes.root} style={style}>\n      {renderTooltip(tooltip)}\n    </div>\n  );\n};\n\nMainToolTip.propTypes = {\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the barchart root class.\n     */\n    root: PropTypes.string,\n  }).isRequired,\n  /**\n   * Data of the tooltip.\n   */\n  data: PropTypes.shape({\n    /**\n     * Title.\n     */\n    title: PropTypes.string,\n    /**\n     * Values of the tooltip.\n     */\n    elements: PropTypes.arrayOf(\n      PropTypes.shape({\n        /**\n         * Color of the bar.\n         */\n        color: PropTypes.string,\n        /**\n         * Name.\n         */\n        name: PropTypes.string,\n        /**\n         * Value.\n         */\n        value: PropTypes.number,\n      })\n    ),\n  }).isRequired,\n  /**\n   * Coordinates.\n   */\n  coordinates: PropTypes.shape({\n    /**\n     * xx's coordinate.\n     */\n    x: PropTypes.number.isRequired,\n    /**\n     * yy's coordinate.\n     */\n    y: PropTypes.number.isRequired,\n  }).isRequired,\n  /**\n   * Defines if should use a single or multiline tooltip.\n   */\n  useSingle: PropTypes.bool,\n  /**\n   * Custom tooltip element to be displayed\n   */\n  tooltip: PropTypes.func,\n};\n\nMainToolTip.defaultProps = {\n  useSingle: false,\n};\n\nexport default withStyles(styles, { name: \"HvChartTooltip\" })(MainToolTip);\n"],"mappings":"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"}

package/dist/legacy/Chart/Chart.d.ts

@@ -3,11 +3,30 @@ import { HvPlotProps } from "./Plot";
 
 export type HvChartClassKey = "root";
 
+export type TooltipElementObject = {
+  color: string;
+  name: string;
+  value: number | string;
+};
+
+export type TooltipDataObject = {
+  title: string;
+  elements: TooltipElementObject[];
+};
+
 export interface HvChartProps extends StandardProps<HvPlotProps, HvChartClassKey> {
+  /**
+   * An Id passed on to the component
+   */
+  id?: string;
   /**
    * Defines if should use a single or multiline tooltip.
    */
   tooltipType?: "single" | "multiple";
+  /**
+   * Custom tooltip element to be displayed
+   */
+  tooltip?: (data: TooltipDataObject) => Element;
   /**
    * Defines the X axis title.
    */

package/dist/legacy/Chart/Chart.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["id", "classes", "data", "layout", "config", "tooltipType", "afterPlot", "xAxisTitle", "yAxisTitle"];
+var _excluded = ["id", "classes", "data", "layout", "config", "tooltipType", "tooltip", "afterPlot", "xAxisTitle", "yAxisTitle"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -35,6 +35,7 @@ var Chart = function Chart(_ref) {
       config = _ref.config,
       _ref$tooltipType = _ref.tooltipType,
       tooltipType = _ref$tooltipType === void 0 ? "multiple" : _ref$tooltipType,
+      tooltip = _ref.tooltip,
       afterPlot = _ref.afterPlot,
       xAxisTitle = _ref.xAxisTitle,
       yAxisTitle = _ref.yAxisTitle,
@@ -113,7 +114,8 @@ var Chart = function Chart(_ref) {
     children: [isHover && /*#__PURE__*/_jsx(Tooltip, {
       coordinates: coordinates,
       data: dataTooltip,
-      useSingle: useSingle
+      useSingle: useSingle,
+      tooltip: tooltip
     }), /*#__PURE__*/_jsx("div", {
       id: id,
       className: classes.root,
@@ -165,6 +167,11 @@ process.env.NODE_ENV !== "production" ? Chart.propTypes = {
    */
   tooltipType: PropTypes.oneOf(["single", "multiple"]),
 
+  /**
+   * Custom tooltip element to be displayed
+   */
+  tooltip: PropTypes.func,
+
   /**
    * Function to be called after plot render.
    */

package/dist/legacy/Chart/Chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chart.js","names":["React","useState","useMemo","useCallback","PropTypes","isNil","withStyles","useTheme","Tooltip","applyLayoutDefaults","applyConfigDefaults","Plot","styles","Chart","id","classes","data","layout","config","tooltipType","afterPlot","xAxisTitle","yAxisTitle","others","theme","isHorizontal","orientation","toUpperCase","chartLayout","chartConfig","useSingle","isHover","setIsHover","x","y","coordinates","setCoordinates","dataTooltip","setDataTooltip","onHover","event","points","dataFromPoints","title","elements","forEach","p","i","fData","fullData","pNumber","pointNumber","name","push","color","marker","line","labels","value","onUnHover","onMouseMove","clientX","clientY","root","propTypes","string","shape","arrayOf","instanceOf","Object","isRequired","oneOf","func","subtitle"],"sources":["../../../src/Chart/Chart.js"],"sourcesContent":["import React, { useState, useMemo, useCallback } from \"react\";\nimport PropTypes from \"prop-types\";\nimport isNil from \"lodash/isNil\";\nimport { withStyles, useTheme } from \"@mui/styles\";\n\nimport Tooltip from \"./Tooltip\";\nimport { applyLayoutDefaults, applyConfigDefaults } from \"./chartPlotlyOverrides\";\n\nimport Plot from \"./Plot\";\nimport styles from \"./styles\";\n\nconst Chart = ({\n  id,\n  classes,\n  data,\n  layout,\n  config,\n  tooltipType = \"multiple\",\n  afterPlot,\n  xAxisTitle,\n  yAxisTitle,\n  ...others\n}) => {\n  const theme = useTheme();\n\n  /* Values derived from props */\n\n  // Check if the barchart is horizontal or vertical.\n  const isHorizontal = useMemo(\n    () => (!isNil(data[0]?.orientation) ? data[0].orientation.toUpperCase() === \"H\" : false),\n    [data]\n  );\n\n  const chartLayout = useMemo(\n    () => applyLayoutDefaults(layout, theme, isHorizontal, xAxisTitle, yAxisTitle),\n    [isHorizontal, layout, theme, xAxisTitle, yAxisTitle]\n  );\n\n  const chartConfig = useMemo(() => applyConfigDefaults(config), [config]);\n\n  const useSingle = tooltipType === \"single\";\n\n  /* State */\n\n  const [isHover, setIsHover] = useState(false);\n  const [coordinates, setCoordinates] = useState({ x: 0, y: 0 });\n  const [dataTooltip, setDataTooltip] = useState();\n\n  /* Callbacks */\n\n  // Extract data from the plotly onHover event to be used to create the tooltip.\n  const onHover = useCallback(\n    (event) => {\n      const { points } = event;\n\n      const dataFromPoints = {\n        title: \"\",\n        elements: [],\n      };\n\n      points.forEach((p, i) => {\n        const fData = p.fullData;\n        const pNumber = p.pointNumber;\n\n        if (i === 0) dataFromPoints.title = isHorizontal ? p.y : p.x || fData.name;\n\n        dataFromPoints.elements.push({\n          color: fData.marker?.color || fData.line?.color || p.color,\n          name: fData.labels?.[pNumber] || fData.name,\n          value: isHorizontal ? p.x : p.y || p.value,\n        });\n      });\n\n      setDataTooltip(dataFromPoints);\n      setIsHover(true);\n    },\n    [isHorizontal]\n  );\n\n  const onUnHover = useCallback(() => {\n    setIsHover(false);\n  }, []);\n\n  const onMouseMove = useCallback((event) => {\n    setCoordinates({\n      x: event.clientX,\n      y: event.clientY,\n    });\n  }, []);\n\n  return (\n    <>\n      {isHover && <Tooltip coordinates={coordinates} data={dataTooltip} useSingle={useSingle} />}\n      <div id={id} className={classes.root}>\n        <div onMouseMove={onMouseMove}>\n          <Plot\n            data={data}\n            layout={chartLayout}\n            config={chartConfig}\n            onHover={onHover}\n            onUnHover={onUnHover}\n            afterPlot={afterPlot}\n            {...others}\n          />\n        </div>\n      </div>\n    </>\n  );\n};\n\nChart.propTypes = {\n  /**\n   * An Id passed on to the component\n   */\n  id: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    root: PropTypes.string,\n  }),\n\n  /**\n   * Plotly data object (see https://plot.ly/javascript/reference/).\n   */\n  data: PropTypes.arrayOf(PropTypes.instanceOf(Object)).isRequired,\n  /**\n   * Plotly layout object (see https://plot.ly/javascript/reference/#layout).\n   */\n  layout: PropTypes.instanceOf(Object).isRequired,\n  /**\n   * Plotly config object (see https://plot.ly/javascript/configuration-options/).\n   */\n  config: PropTypes.instanceOf(Object),\n  /**\n   * Defines if should use a single or multiline tooltip.\n   */\n  tooltipType: PropTypes.oneOf([\"single\", \"multiple\"]),\n  /**\n   * Function to be called after plot render.\n   */\n  afterPlot: PropTypes.func,\n  /**\n   * Defines the X axis title.\n   */\n  xAxisTitle: PropTypes.string,\n  /**\n   * Defines the Y axis title.\n   */\n  yAxisTitle: PropTypes.string,\n  /**\n   * Defines the chart subtitle.\n   */\n  subtitle: PropTypes.string,\n};\n\nexport default withStyles(styles, { name: \"HvChart\" })(Chart);\n"],"mappings":"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"}
+{"version":3,"file":"Chart.js","names":["React","useState","useMemo","useCallback","PropTypes","isNil","withStyles","useTheme","Tooltip","applyLayoutDefaults","applyConfigDefaults","Plot","styles","Chart","id","classes","data","layout","config","tooltipType","tooltip","afterPlot","xAxisTitle","yAxisTitle","others","theme","isHorizontal","orientation","toUpperCase","chartLayout","chartConfig","useSingle","isHover","setIsHover","x","y","coordinates","setCoordinates","dataTooltip","setDataTooltip","onHover","event","points","dataFromPoints","title","elements","forEach","p","i","fData","fullData","pNumber","pointNumber","name","push","color","marker","line","labels","value","onUnHover","onMouseMove","clientX","clientY","root","propTypes","string","shape","arrayOf","instanceOf","Object","isRequired","oneOf","func","subtitle"],"sources":["../../../src/Chart/Chart.js"],"sourcesContent":["import React, { useState, useMemo, useCallback } from \"react\";\nimport PropTypes from \"prop-types\";\nimport isNil from \"lodash/isNil\";\nimport { withStyles, useTheme } from \"@mui/styles\";\n\nimport Tooltip from \"./Tooltip\";\nimport { applyLayoutDefaults, applyConfigDefaults } from \"./chartPlotlyOverrides\";\n\nimport Plot from \"./Plot\";\nimport styles from \"./styles\";\n\nconst Chart = ({\n  id,\n  classes,\n  data,\n  layout,\n  config,\n  tooltipType = \"multiple\",\n  tooltip,\n  afterPlot,\n  xAxisTitle,\n  yAxisTitle,\n  ...others\n}) => {\n  const theme = useTheme();\n\n  /* Values derived from props */\n\n  // Check if the barchart is horizontal or vertical.\n  const isHorizontal = useMemo(\n    () => (!isNil(data[0]?.orientation) ? data[0].orientation.toUpperCase() === \"H\" : false),\n    [data]\n  );\n\n  const chartLayout = useMemo(\n    () => applyLayoutDefaults(layout, theme, isHorizontal, xAxisTitle, yAxisTitle),\n    [isHorizontal, layout, theme, xAxisTitle, yAxisTitle]\n  );\n\n  const chartConfig = useMemo(() => applyConfigDefaults(config), [config]);\n\n  const useSingle = tooltipType === \"single\";\n\n  /* State */\n\n  const [isHover, setIsHover] = useState(false);\n  const [coordinates, setCoordinates] = useState({ x: 0, y: 0 });\n  const [dataTooltip, setDataTooltip] = useState();\n\n  /* Callbacks */\n\n  // Extract data from the plotly onHover event to be used to create the tooltip.\n  const onHover = useCallback(\n    (event) => {\n      const { points } = event;\n\n      const dataFromPoints = {\n        title: \"\",\n        elements: [],\n      };\n\n      points.forEach((p, i) => {\n        const fData = p.fullData;\n        const pNumber = p.pointNumber;\n\n        if (i === 0) dataFromPoints.title = isHorizontal ? p.y : p.x || fData.name;\n\n        dataFromPoints.elements.push({\n          color: fData.marker?.color || fData.line?.color || p.color,\n          name: fData.labels?.[pNumber] || fData.name,\n          value: isHorizontal ? p.x : p.y || p.value,\n        });\n      });\n\n      setDataTooltip(dataFromPoints);\n      setIsHover(true);\n    },\n    [isHorizontal]\n  );\n\n  const onUnHover = useCallback(() => {\n    setIsHover(false);\n  }, []);\n\n  const onMouseMove = useCallback((event) => {\n    setCoordinates({\n      x: event.clientX,\n      y: event.clientY,\n    });\n  }, []);\n\n  return (\n    <>\n      {isHover && (\n        <Tooltip\n          coordinates={coordinates}\n          data={dataTooltip}\n          useSingle={useSingle}\n          tooltip={tooltip}\n        />\n      )}\n      <div id={id} className={classes.root}>\n        <div onMouseMove={onMouseMove}>\n          <Plot\n            data={data}\n            layout={chartLayout}\n            config={chartConfig}\n            onHover={onHover}\n            onUnHover={onUnHover}\n            afterPlot={afterPlot}\n            {...others}\n          />\n        </div>\n      </div>\n    </>\n  );\n};\n\nChart.propTypes = {\n  /**\n   * An Id passed on to the component\n   */\n  id: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    root: PropTypes.string,\n  }),\n\n  /**\n   * Plotly data object (see https://plot.ly/javascript/reference/).\n   */\n  data: PropTypes.arrayOf(PropTypes.instanceOf(Object)).isRequired,\n  /**\n   * Plotly layout object (see https://plot.ly/javascript/reference/#layout).\n   */\n  layout: PropTypes.instanceOf(Object).isRequired,\n  /**\n   * Plotly config object (see https://plot.ly/javascript/configuration-options/).\n   */\n  config: PropTypes.instanceOf(Object),\n  /**\n   * Defines if should use a single or multiline tooltip.\n   */\n  tooltipType: PropTypes.oneOf([\"single\", \"multiple\"]),\n  /**\n   * Custom tooltip element to be displayed\n   */\n  tooltip: PropTypes.func,\n  /**\n   * Function to be called after plot render.\n   */\n  afterPlot: PropTypes.func,\n  /**\n   * Defines the X axis title.\n   */\n  xAxisTitle: PropTypes.string,\n  /**\n   * Defines the Y axis title.\n   */\n  yAxisTitle: PropTypes.string,\n  /**\n   * Defines the chart subtitle.\n   */\n  subtitle: PropTypes.string,\n};\n\nexport default withStyles(styles, { name: \"HvChart\" })(Chart);\n"],"mappings":"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"}

package/dist/legacy/Chart/Tooltip/Tooltip.js

@@ -1,5 +1,5 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState, useCallback } from "react";
 import PropTypes from "prop-types";
 import { withStyles } from "@mui/styles";
 import SingleTooltip from "./SingleTooltip";
@@ -13,10 +13,13 @@ var offset = 20;
  */
 
 var MainToolTip = function MainToolTip(_ref) {
+  var _MultipleTooltip;
+
   var classes = _ref.classes,
       coordinates = _ref.coordinates,
       data = _ref.data,
-      useSingle = _ref.useSingle;
+      useSingle = _ref.useSingle,
+      tooltip = _ref.tooltip;
   var x = coordinates.x,
       y = coordinates.y;
 
@@ -47,16 +50,21 @@ var MainToolTip = function MainToolTip(_ref) {
       top: y - height - offset
     });
   }, [x, y]);
+  var renderTooltip = useCallback(function (CustomTooltip) {
+    if (CustomTooltip) return CustomTooltip(data);
+    if (useSingle) return /*#__PURE__*/_jsx(SingleTooltip, {
+      title: data.title,
+      value: data.elements[0].value
+    });
+    return _MultipleTooltip || (_MultipleTooltip = /*#__PURE__*/_jsx(MultipleTooltip, {
+      data: data
+    }));
+  }, [data, useSingle]);
   return /*#__PURE__*/_jsx("div", {
     ref: ref,
     className: classes.root,
     style: style,
-    children: useSingle && /*#__PURE__*/_jsx(SingleTooltip, {
-      title: data.title,
-      value: data.elements[0].value
-    }) || /*#__PURE__*/_jsx(MultipleTooltip, {
-      data: data
-    })
+    children: renderTooltip(tooltip)
   });
 };
 
@@ -119,7 +127,12 @@ process.env.NODE_ENV !== "production" ? MainToolTip.propTypes = {
   /**
    * Defines if should use a single or multiline tooltip.
    */
-  useSingle: PropTypes.bool
+  useSingle: PropTypes.bool,
+
+  /**
+   * Custom tooltip element to be displayed
+   */
+  tooltip: PropTypes.func
 } : void 0;
 MainToolTip.defaultProps = {
   useSingle: false

package/dist/legacy/Chart/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","names":["React","useEffect","useRef","useState","PropTypes","withStyles","SingleTooltip","MultipleTooltip","styles","offset","MainToolTip","classes","coordinates","data","useSingle","x","y","left","top","visibility","style","setStyle","ref","current","getBoundingClientRect","width","height","root","title","elements","value","propTypes","shape","string","isRequired","arrayOf","color","name","number","bool","defaultProps"],"sources":["../../../../src/Chart/Tooltip/Tooltip.js"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { withStyles } from \"@mui/styles\";\nimport SingleTooltip from \"./SingleTooltip\";\nimport MultipleTooltip from \"./MultiTooltip\";\nimport styles from \"./styles\";\n\nconst offset = 20;\n\n/**\n * Component responsible for deciding which tooltip should be use and to calculate\n * the exact position where it should be render.\n */\nconst MainToolTip = ({ classes, coordinates, data, useSingle }) => {\n  const { x, y } = coordinates;\n  const [style, setStyle] = useState({ left: x, top: y, visibility: \"hidden\" });\n  const ref = useRef(null);\n\n  /**\n   * Calculate the position where the tooltip has to render, having in account\n   * the dimensions.\n   */\n  useEffect(() => {\n    if (!ref.current || !ref.current.getBoundingClientRect().width) return;\n\n    const { width, height } = ref.current.getBoundingClientRect();\n\n    setStyle({ left: x - width / 2, top: y - height - offset });\n  }, [x, y]);\n\n  return (\n    <div ref={ref} className={classes.root} style={style}>\n      {(useSingle && <SingleTooltip title={data.title} value={data.elements[0].value} />) || (\n        <MultipleTooltip data={data} />\n      )}\n    </div>\n  );\n};\n\nMainToolTip.propTypes = {\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the barchart root class.\n     */\n    root: PropTypes.string,\n  }).isRequired,\n  /**\n   * Data of the tooltip.\n   */\n  data: PropTypes.shape({\n    /**\n     * Title.\n     */\n    title: PropTypes.string,\n    /**\n     * Values of the tooltip.\n     */\n    elements: PropTypes.arrayOf(\n      PropTypes.shape({\n        /**\n         * Color of the bar.\n         */\n        color: PropTypes.string,\n        /**\n         * Name.\n         */\n        name: PropTypes.string,\n        /**\n         * Value.\n         */\n        value: PropTypes.number,\n      })\n    ),\n  }).isRequired,\n  /**\n   * Coordinates.\n   */\n  coordinates: PropTypes.shape({\n    /**\n     * xx's coordinate.\n     */\n    x: PropTypes.number.isRequired,\n    /**\n     * yy's coordinate.\n     */\n    y: PropTypes.number.isRequired,\n  }).isRequired,\n  /**\n   * Defines if should use a single or multiline tooltip.\n   */\n  useSingle: PropTypes.bool,\n};\n\nMainToolTip.defaultProps = {\n  useSingle: false,\n};\n\nexport default withStyles(styles, { name: \"HvChartTooltip\" })(MainToolTip);\n"],"mappings":"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"}
+{"version":3,"file":"Tooltip.js","names":["React","useEffect","useRef","useState","useCallback","PropTypes","withStyles","SingleTooltip","MultipleTooltip","styles","offset","MainToolTip","classes","coordinates","data","useSingle","tooltip","x","y","left","top","visibility","style","setStyle","ref","current","getBoundingClientRect","width","height","renderTooltip","CustomTooltip","title","elements","value","root","propTypes","shape","string","isRequired","arrayOf","color","name","number","bool","func","defaultProps"],"sources":["../../../../src/Chart/Tooltip/Tooltip.js"],"sourcesContent":["import React, { useEffect, useRef, useState, useCallback } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { withStyles } from \"@mui/styles\";\nimport SingleTooltip from \"./SingleTooltip\";\nimport MultipleTooltip from \"./MultiTooltip\";\nimport styles from \"./styles\";\n\nconst offset = 20;\n\n/**\n * Component responsible for deciding which tooltip should be use and to calculate\n * the exact position where it should be render.\n */\nconst MainToolTip = ({ classes, coordinates, data, useSingle, tooltip }) => {\n  const { x, y } = coordinates;\n  const [style, setStyle] = useState({ left: x, top: y, visibility: \"hidden\" });\n  const ref = useRef(null);\n\n  /**\n   * Calculate the position where the tooltip has to render, having in account\n   * the dimensions.\n   */\n  useEffect(() => {\n    if (!ref.current || !ref.current.getBoundingClientRect().width) return;\n\n    const { width, height } = ref.current.getBoundingClientRect();\n\n    setStyle({ left: x - width / 2, top: y - height - offset });\n  }, [x, y]);\n\n  const renderTooltip = useCallback(\n    (CustomTooltip) => {\n      if (CustomTooltip) return CustomTooltip(data);\n      if (useSingle) return <SingleTooltip title={data.title} value={data.elements[0].value} />;\n      return <MultipleTooltip data={data} />;\n    },\n    [data, useSingle]\n  );\n\n  return (\n    <div ref={ref} className={classes.root} style={style}>\n      {renderTooltip(tooltip)}\n    </div>\n  );\n};\n\nMainToolTip.propTypes = {\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the barchart root class.\n     */\n    root: PropTypes.string,\n  }).isRequired,\n  /**\n   * Data of the tooltip.\n   */\n  data: PropTypes.shape({\n    /**\n     * Title.\n     */\n    title: PropTypes.string,\n    /**\n     * Values of the tooltip.\n     */\n    elements: PropTypes.arrayOf(\n      PropTypes.shape({\n        /**\n         * Color of the bar.\n         */\n        color: PropTypes.string,\n        /**\n         * Name.\n         */\n        name: PropTypes.string,\n        /**\n         * Value.\n         */\n        value: PropTypes.number,\n      })\n    ),\n  }).isRequired,\n  /**\n   * Coordinates.\n   */\n  coordinates: PropTypes.shape({\n    /**\n     * xx's coordinate.\n     */\n    x: PropTypes.number.isRequired,\n    /**\n     * yy's coordinate.\n     */\n    y: PropTypes.number.isRequired,\n  }).isRequired,\n  /**\n   * Defines if should use a single or multiline tooltip.\n   */\n  useSingle: PropTypes.bool,\n  /**\n   * Custom tooltip element to be displayed\n   */\n  tooltip: PropTypes.func,\n};\n\nMainToolTip.defaultProps = {\n  useSingle: false,\n};\n\nexport default withStyles(styles, { name: \"HvChartTooltip\" })(MainToolTip);\n"],"mappings":"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"}

package/dist/modern/Chart/Chart.d.ts

@@ -3,11 +3,30 @@ import { HvPlotProps } from "./Plot";
 
 export type HvChartClassKey = "root";
 
+export type TooltipElementObject = {
+  color: string;
+  name: string;
+  value: number | string;
+};
+
+export type TooltipDataObject = {
+  title: string;
+  elements: TooltipElementObject[];
+};
+
 export interface HvChartProps extends StandardProps<HvPlotProps, HvChartClassKey> {
+  /**
+   * An Id passed on to the component
+   */
+  id?: string;
   /**
    * Defines if should use a single or multiline tooltip.
    */
   tooltipType?: "single" | "multiple";
+  /**
+   * Custom tooltip element to be displayed
+   */
+  tooltip?: (data: TooltipDataObject) => Element;
   /**
    * Defines the X axis title.
    */

package/dist/modern/Chart/Chart.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["id", "classes", "data", "layout", "config", "tooltipType", "afterPlot", "xAxisTitle", "yAxisTitle"];
+const _excluded = ["id", "classes", "data", "layout", "config", "tooltipType", "tooltip", "afterPlot", "xAxisTitle", "yAxisTitle"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -27,6 +27,7 @@ const Chart = _ref => {
     layout,
     config,
     tooltipType = "multiple",
+    tooltip,
     afterPlot,
     xAxisTitle,
     yAxisTitle
@@ -92,7 +93,8 @@ const Chart = _ref => {
     children: [isHover && /*#__PURE__*/_jsx(Tooltip, {
       coordinates: coordinates,
       data: dataTooltip,
-      useSingle: useSingle
+      useSingle: useSingle,
+      tooltip: tooltip
     }), /*#__PURE__*/_jsx("div", {
       id: id,
       className: classes.root,
@@ -144,6 +146,11 @@ process.env.NODE_ENV !== "production" ? Chart.propTypes = {
    */
   tooltipType: PropTypes.oneOf(["single", "multiple"]),
 
+  /**
+   * Custom tooltip element to be displayed
+   */
+  tooltip: PropTypes.func,
+
   /**
    * Function to be called after plot render.
    */

package/dist/modern/Chart/Chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chart.js","names":["React","useState","useMemo","useCallback","PropTypes","isNil","withStyles","useTheme","Tooltip","applyLayoutDefaults","applyConfigDefaults","Plot","styles","Chart","id","classes","data","layout","config","tooltipType","afterPlot","xAxisTitle","yAxisTitle","others","theme","isHorizontal","orientation","toUpperCase","chartLayout","chartConfig","useSingle","isHover","setIsHover","coordinates","setCoordinates","x","y","dataTooltip","setDataTooltip","onHover","event","points","dataFromPoints","title","elements","forEach","p","i","fData","fullData","pNumber","pointNumber","name","push","color","marker","line","labels","value","onUnHover","onMouseMove","clientX","clientY","root","propTypes","string","shape","arrayOf","instanceOf","Object","isRequired","oneOf","func","subtitle"],"sources":["../../../src/Chart/Chart.js"],"sourcesContent":["import React, { useState, useMemo, useCallback } from \"react\";\nimport PropTypes from \"prop-types\";\nimport isNil from \"lodash/isNil\";\nimport { withStyles, useTheme } from \"@mui/styles\";\n\nimport Tooltip from \"./Tooltip\";\nimport { applyLayoutDefaults, applyConfigDefaults } from \"./chartPlotlyOverrides\";\n\nimport Plot from \"./Plot\";\nimport styles from \"./styles\";\n\nconst Chart = ({\n  id,\n  classes,\n  data,\n  layout,\n  config,\n  tooltipType = \"multiple\",\n  afterPlot,\n  xAxisTitle,\n  yAxisTitle,\n  ...others\n}) => {\n  const theme = useTheme();\n\n  /* Values derived from props */\n\n  // Check if the barchart is horizontal or vertical.\n  const isHorizontal = useMemo(\n    () => (!isNil(data[0]?.orientation) ? data[0].orientation.toUpperCase() === \"H\" : false),\n    [data]\n  );\n\n  const chartLayout = useMemo(\n    () => applyLayoutDefaults(layout, theme, isHorizontal, xAxisTitle, yAxisTitle),\n    [isHorizontal, layout, theme, xAxisTitle, yAxisTitle]\n  );\n\n  const chartConfig = useMemo(() => applyConfigDefaults(config), [config]);\n\n  const useSingle = tooltipType === \"single\";\n\n  /* State */\n\n  const [isHover, setIsHover] = useState(false);\n  const [coordinates, setCoordinates] = useState({ x: 0, y: 0 });\n  const [dataTooltip, setDataTooltip] = useState();\n\n  /* Callbacks */\n\n  // Extract data from the plotly onHover event to be used to create the tooltip.\n  const onHover = useCallback(\n    (event) => {\n      const { points } = event;\n\n      const dataFromPoints = {\n        title: \"\",\n        elements: [],\n      };\n\n      points.forEach((p, i) => {\n        const fData = p.fullData;\n        const pNumber = p.pointNumber;\n\n        if (i === 0) dataFromPoints.title = isHorizontal ? p.y : p.x || fData.name;\n\n        dataFromPoints.elements.push({\n          color: fData.marker?.color || fData.line?.color || p.color,\n          name: fData.labels?.[pNumber] || fData.name,\n          value: isHorizontal ? p.x : p.y || p.value,\n        });\n      });\n\n      setDataTooltip(dataFromPoints);\n      setIsHover(true);\n    },\n    [isHorizontal]\n  );\n\n  const onUnHover = useCallback(() => {\n    setIsHover(false);\n  }, []);\n\n  const onMouseMove = useCallback((event) => {\n    setCoordinates({\n      x: event.clientX,\n      y: event.clientY,\n    });\n  }, []);\n\n  return (\n    <>\n      {isHover && <Tooltip coordinates={coordinates} data={dataTooltip} useSingle={useSingle} />}\n      <div id={id} className={classes.root}>\n        <div onMouseMove={onMouseMove}>\n          <Plot\n            data={data}\n            layout={chartLayout}\n            config={chartConfig}\n            onHover={onHover}\n            onUnHover={onUnHover}\n            afterPlot={afterPlot}\n            {...others}\n          />\n        </div>\n      </div>\n    </>\n  );\n};\n\nChart.propTypes = {\n  /**\n   * An Id passed on to the component\n   */\n  id: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    root: PropTypes.string,\n  }),\n\n  /**\n   * Plotly data object (see https://plot.ly/javascript/reference/).\n   */\n  data: PropTypes.arrayOf(PropTypes.instanceOf(Object)).isRequired,\n  /**\n   * Plotly layout object (see https://plot.ly/javascript/reference/#layout).\n   */\n  layout: PropTypes.instanceOf(Object).isRequired,\n  /**\n   * Plotly config object (see https://plot.ly/javascript/configuration-options/).\n   */\n  config: PropTypes.instanceOf(Object),\n  /**\n   * Defines if should use a single or multiline tooltip.\n   */\n  tooltipType: PropTypes.oneOf([\"single\", \"multiple\"]),\n  /**\n   * Function to be called after plot render.\n   */\n  afterPlot: PropTypes.func,\n  /**\n   * Defines the X axis title.\n   */\n  xAxisTitle: PropTypes.string,\n  /**\n   * Defines the Y axis title.\n   */\n  yAxisTitle: PropTypes.string,\n  /**\n   * Defines the chart subtitle.\n   */\n  subtitle: PropTypes.string,\n};\n\nexport default withStyles(styles, { name: \"HvChart\" })(Chart);\n"],"mappings":"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"}
+{"version":3,"file":"Chart.js","names":["React","useState","useMemo","useCallback","PropTypes","isNil","withStyles","useTheme","Tooltip","applyLayoutDefaults","applyConfigDefaults","Plot","styles","Chart","id","classes","data","layout","config","tooltipType","tooltip","afterPlot","xAxisTitle","yAxisTitle","others","theme","isHorizontal","orientation","toUpperCase","chartLayout","chartConfig","useSingle","isHover","setIsHover","coordinates","setCoordinates","x","y","dataTooltip","setDataTooltip","onHover","event","points","dataFromPoints","title","elements","forEach","p","i","fData","fullData","pNumber","pointNumber","name","push","color","marker","line","labels","value","onUnHover","onMouseMove","clientX","clientY","root","propTypes","string","shape","arrayOf","instanceOf","Object","isRequired","oneOf","func","subtitle"],"sources":["../../../src/Chart/Chart.js"],"sourcesContent":["import React, { useState, useMemo, useCallback } from \"react\";\nimport PropTypes from \"prop-types\";\nimport isNil from \"lodash/isNil\";\nimport { withStyles, useTheme } from \"@mui/styles\";\n\nimport Tooltip from \"./Tooltip\";\nimport { applyLayoutDefaults, applyConfigDefaults } from \"./chartPlotlyOverrides\";\n\nimport Plot from \"./Plot\";\nimport styles from \"./styles\";\n\nconst Chart = ({\n  id,\n  classes,\n  data,\n  layout,\n  config,\n  tooltipType = \"multiple\",\n  tooltip,\n  afterPlot,\n  xAxisTitle,\n  yAxisTitle,\n  ...others\n}) => {\n  const theme = useTheme();\n\n  /* Values derived from props */\n\n  // Check if the barchart is horizontal or vertical.\n  const isHorizontal = useMemo(\n    () => (!isNil(data[0]?.orientation) ? data[0].orientation.toUpperCase() === \"H\" : false),\n    [data]\n  );\n\n  const chartLayout = useMemo(\n    () => applyLayoutDefaults(layout, theme, isHorizontal, xAxisTitle, yAxisTitle),\n    [isHorizontal, layout, theme, xAxisTitle, yAxisTitle]\n  );\n\n  const chartConfig = useMemo(() => applyConfigDefaults(config), [config]);\n\n  const useSingle = tooltipType === \"single\";\n\n  /* State */\n\n  const [isHover, setIsHover] = useState(false);\n  const [coordinates, setCoordinates] = useState({ x: 0, y: 0 });\n  const [dataTooltip, setDataTooltip] = useState();\n\n  /* Callbacks */\n\n  // Extract data from the plotly onHover event to be used to create the tooltip.\n  const onHover = useCallback(\n    (event) => {\n      const { points } = event;\n\n      const dataFromPoints = {\n        title: \"\",\n        elements: [],\n      };\n\n      points.forEach((p, i) => {\n        const fData = p.fullData;\n        const pNumber = p.pointNumber;\n\n        if (i === 0) dataFromPoints.title = isHorizontal ? p.y : p.x || fData.name;\n\n        dataFromPoints.elements.push({\n          color: fData.marker?.color || fData.line?.color || p.color,\n          name: fData.labels?.[pNumber] || fData.name,\n          value: isHorizontal ? p.x : p.y || p.value,\n        });\n      });\n\n      setDataTooltip(dataFromPoints);\n      setIsHover(true);\n    },\n    [isHorizontal]\n  );\n\n  const onUnHover = useCallback(() => {\n    setIsHover(false);\n  }, []);\n\n  const onMouseMove = useCallback((event) => {\n    setCoordinates({\n      x: event.clientX,\n      y: event.clientY,\n    });\n  }, []);\n\n  return (\n    <>\n      {isHover && (\n        <Tooltip\n          coordinates={coordinates}\n          data={dataTooltip}\n          useSingle={useSingle}\n          tooltip={tooltip}\n        />\n      )}\n      <div id={id} className={classes.root}>\n        <div onMouseMove={onMouseMove}>\n          <Plot\n            data={data}\n            layout={chartLayout}\n            config={chartConfig}\n            onHover={onHover}\n            onUnHover={onUnHover}\n            afterPlot={afterPlot}\n            {...others}\n          />\n        </div>\n      </div>\n    </>\n  );\n};\n\nChart.propTypes = {\n  /**\n   * An Id passed on to the component\n   */\n  id: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    root: PropTypes.string,\n  }),\n\n  /**\n   * Plotly data object (see https://plot.ly/javascript/reference/).\n   */\n  data: PropTypes.arrayOf(PropTypes.instanceOf(Object)).isRequired,\n  /**\n   * Plotly layout object (see https://plot.ly/javascript/reference/#layout).\n   */\n  layout: PropTypes.instanceOf(Object).isRequired,\n  /**\n   * Plotly config object (see https://plot.ly/javascript/configuration-options/).\n   */\n  config: PropTypes.instanceOf(Object),\n  /**\n   * Defines if should use a single or multiline tooltip.\n   */\n  tooltipType: PropTypes.oneOf([\"single\", \"multiple\"]),\n  /**\n   * Custom tooltip element to be displayed\n   */\n  tooltip: PropTypes.func,\n  /**\n   * Function to be called after plot render.\n   */\n  afterPlot: PropTypes.func,\n  /**\n   * Defines the X axis title.\n   */\n  xAxisTitle: PropTypes.string,\n  /**\n   * Defines the Y axis title.\n   */\n  yAxisTitle: PropTypes.string,\n  /**\n   * Defines the chart subtitle.\n   */\n  subtitle: PropTypes.string,\n};\n\nexport default withStyles(styles, { name: \"HvChart\" })(Chart);\n"],"mappings":"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"}

package/dist/modern/Chart/Tooltip/Tooltip.js

@@ -1,5 +1,5 @@
 import "core-js/modules/web.dom-collections.iterator.js";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState, useCallback } from "react";
 import PropTypes from "prop-types";
 import { withStyles } from "@mui/styles";
 import SingleTooltip from "./SingleTooltip";
@@ -16,8 +16,11 @@ const MainToolTip = ({
   classes,
   coordinates,
   data,
-  useSingle
+  useSingle,
+  tooltip
 }) => {
+  var _MultipleTooltip;
+
   const {
     x,
     y
@@ -44,16 +47,21 @@ const MainToolTip = ({
       top: y - height - offset
     });
   }, [x, y]);
+  const renderTooltip = useCallback(CustomTooltip => {
+    if (CustomTooltip) return CustomTooltip(data);
+    if (useSingle) return /*#__PURE__*/_jsx(SingleTooltip, {
+      title: data.title,
+      value: data.elements[0].value
+    });
+    return _MultipleTooltip || (_MultipleTooltip = /*#__PURE__*/_jsx(MultipleTooltip, {
+      data: data
+    }));
+  }, [data, useSingle]);
   return /*#__PURE__*/_jsx("div", {
     ref: ref,
     className: classes.root,
     style: style,
-    children: useSingle && /*#__PURE__*/_jsx(SingleTooltip, {
-      title: data.title,
-      value: data.elements[0].value
-    }) || /*#__PURE__*/_jsx(MultipleTooltip, {
-      data: data
-    })
+    children: renderTooltip(tooltip)
   });
 };
 
@@ -116,7 +124,12 @@ process.env.NODE_ENV !== "production" ? MainToolTip.propTypes = {
   /**
    * Defines if should use a single or multiline tooltip.
    */
-  useSingle: PropTypes.bool
+  useSingle: PropTypes.bool,
+
+  /**
+   * Custom tooltip element to be displayed
+   */
+  tooltip: PropTypes.func
 } : void 0;
 MainToolTip.defaultProps = {
   useSingle: false

package/dist/modern/Chart/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","names":["React","useEffect","useRef","useState","PropTypes","withStyles","SingleTooltip","MultipleTooltip","styles","offset","MainToolTip","classes","coordinates","data","useSingle","x","y","style","setStyle","left","top","visibility","ref","current","getBoundingClientRect","width","height","root","title","elements","value","propTypes","shape","string","isRequired","arrayOf","color","name","number","bool","defaultProps"],"sources":["../../../../src/Chart/Tooltip/Tooltip.js"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { withStyles } from \"@mui/styles\";\nimport SingleTooltip from \"./SingleTooltip\";\nimport MultipleTooltip from \"./MultiTooltip\";\nimport styles from \"./styles\";\n\nconst offset = 20;\n\n/**\n * Component responsible for deciding which tooltip should be use and to calculate\n * the exact position where it should be render.\n */\nconst MainToolTip = ({ classes, coordinates, data, useSingle }) => {\n  const { x, y } = coordinates;\n  const [style, setStyle] = useState({ left: x, top: y, visibility: \"hidden\" });\n  const ref = useRef(null);\n\n  /**\n   * Calculate the position where the tooltip has to render, having in account\n   * the dimensions.\n   */\n  useEffect(() => {\n    if (!ref.current || !ref.current.getBoundingClientRect().width) return;\n\n    const { width, height } = ref.current.getBoundingClientRect();\n\n    setStyle({ left: x - width / 2, top: y - height - offset });\n  }, [x, y]);\n\n  return (\n    <div ref={ref} className={classes.root} style={style}>\n      {(useSingle && <SingleTooltip title={data.title} value={data.elements[0].value} />) || (\n        <MultipleTooltip data={data} />\n      )}\n    </div>\n  );\n};\n\nMainToolTip.propTypes = {\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the barchart root class.\n     */\n    root: PropTypes.string,\n  }).isRequired,\n  /**\n   * Data of the tooltip.\n   */\n  data: PropTypes.shape({\n    /**\n     * Title.\n     */\n    title: PropTypes.string,\n    /**\n     * Values of the tooltip.\n     */\n    elements: PropTypes.arrayOf(\n      PropTypes.shape({\n        /**\n         * Color of the bar.\n         */\n        color: PropTypes.string,\n        /**\n         * Name.\n         */\n        name: PropTypes.string,\n        /**\n         * Value.\n         */\n        value: PropTypes.number,\n      })\n    ),\n  }).isRequired,\n  /**\n   * Coordinates.\n   */\n  coordinates: PropTypes.shape({\n    /**\n     * xx's coordinate.\n     */\n    x: PropTypes.number.isRequired,\n    /**\n     * yy's coordinate.\n     */\n    y: PropTypes.number.isRequired,\n  }).isRequired,\n  /**\n   * Defines if should use a single or multiline tooltip.\n   */\n  useSingle: PropTypes.bool,\n};\n\nMainToolTip.defaultProps = {\n  useSingle: false,\n};\n\nexport default withStyles(styles, { name: \"HvChartTooltip\" })(MainToolTip);\n"],"mappings":"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"}
+{"version":3,"file":"Tooltip.js","names":["React","useEffect","useRef","useState","useCallback","PropTypes","withStyles","SingleTooltip","MultipleTooltip","styles","offset","MainToolTip","classes","coordinates","data","useSingle","tooltip","x","y","style","setStyle","left","top","visibility","ref","current","getBoundingClientRect","width","height","renderTooltip","CustomTooltip","title","elements","value","root","propTypes","shape","string","isRequired","arrayOf","color","name","number","bool","func","defaultProps"],"sources":["../../../../src/Chart/Tooltip/Tooltip.js"],"sourcesContent":["import React, { useEffect, useRef, useState, useCallback } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { withStyles } from \"@mui/styles\";\nimport SingleTooltip from \"./SingleTooltip\";\nimport MultipleTooltip from \"./MultiTooltip\";\nimport styles from \"./styles\";\n\nconst offset = 20;\n\n/**\n * Component responsible for deciding which tooltip should be use and to calculate\n * the exact position where it should be render.\n */\nconst MainToolTip = ({ classes, coordinates, data, useSingle, tooltip }) => {\n  const { x, y } = coordinates;\n  const [style, setStyle] = useState({ left: x, top: y, visibility: \"hidden\" });\n  const ref = useRef(null);\n\n  /**\n   * Calculate the position where the tooltip has to render, having in account\n   * the dimensions.\n   */\n  useEffect(() => {\n    if (!ref.current || !ref.current.getBoundingClientRect().width) return;\n\n    const { width, height } = ref.current.getBoundingClientRect();\n\n    setStyle({ left: x - width / 2, top: y - height - offset });\n  }, [x, y]);\n\n  const renderTooltip = useCallback(\n    (CustomTooltip) => {\n      if (CustomTooltip) return CustomTooltip(data);\n      if (useSingle) return <SingleTooltip title={data.title} value={data.elements[0].value} />;\n      return <MultipleTooltip data={data} />;\n    },\n    [data, useSingle]\n  );\n\n  return (\n    <div ref={ref} className={classes.root} style={style}>\n      {renderTooltip(tooltip)}\n    </div>\n  );\n};\n\nMainToolTip.propTypes = {\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the barchart root class.\n     */\n    root: PropTypes.string,\n  }).isRequired,\n  /**\n   * Data of the tooltip.\n   */\n  data: PropTypes.shape({\n    /**\n     * Title.\n     */\n    title: PropTypes.string,\n    /**\n     * Values of the tooltip.\n     */\n    elements: PropTypes.arrayOf(\n      PropTypes.shape({\n        /**\n         * Color of the bar.\n         */\n        color: PropTypes.string,\n        /**\n         * Name.\n         */\n        name: PropTypes.string,\n        /**\n         * Value.\n         */\n        value: PropTypes.number,\n      })\n    ),\n  }).isRequired,\n  /**\n   * Coordinates.\n   */\n  coordinates: PropTypes.shape({\n    /**\n     * xx's coordinate.\n     */\n    x: PropTypes.number.isRequired,\n    /**\n     * yy's coordinate.\n     */\n    y: PropTypes.number.isRequired,\n  }).isRequired,\n  /**\n   * Defines if should use a single or multiline tooltip.\n   */\n  useSingle: PropTypes.bool,\n  /**\n   * Custom tooltip element to be displayed\n   */\n  tooltip: PropTypes.func,\n};\n\nMainToolTip.defaultProps = {\n  useSingle: false,\n};\n\nexport default withStyles(styles, { name: \"HvChartTooltip\" })(MainToolTip);\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-viz",
-  "version": "4.0.1-next.2",
+  "version": "4.0.1-next.5",
   "description": "A collection of React visualizations for the Hitachi Vantara's Design System.",
   "homepage": "https://github.com/lumada-design/hv-uikit-react",
   "license": "Apache-2.0",
@@ -45,7 +45,7 @@
     "react-dom": "^16.13.1 || ^17.0.2"
   },
   "dependencies": {
-    "@hitachivantara/uikit-react-core": "^4.0.1-next.2",
+    "@hitachivantara/uikit-react-core": "^4.0.1-next.5",
     "clsx": "^1.2.1",
     "lodash": "^4.17.21",
     "prop-types": "^15.8.1",
@@ -63,5 +63,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "524058aa88c941ba8eabdd8cf0fe467cb091ef05"
+  "gitHead": "fe888b15f863a60ee54f0ba4084568a3a44feed2"
 }