@hitachivantara/uikit-react-viz 3.1.22 → 3.2.1

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

@@ -47,7 +47,7 @@ var _Plot = _interopRequireDefault(require("./Plot"));
 
 var _styles = _interopRequireDefault(require("./styles"));
 
-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); }
 
@@ -61,6 +61,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,
@@ -137,7 +138,8 @@ var Chart = function Chart(_ref) {
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isHover && /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
     coordinates: coordinates,
     data: dataTooltip,
-    useSingle: useSingle
+    useSingle: useSingle,
+    tooltip: tooltip
   }), /*#__PURE__*/_react.default.createElement("div", {
     id: id,
     className: classes.root
@@ -186,6 +188,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 { useTheme, withStyles } from \"@material-ui/core\";\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 { useTheme, withStyles } from \"@material-ui/core\";\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AACA;;;;;;;;AAEA,IAAMA,KAAK,GAAG,SAARA,KAAQ,OAYR;EAAA,IAXJC,EAWI,QAXJA,EAWI;EAAA,IAVJC,OAUI,QAVJA,OAUI;EAAA,IATJC,IASI,QATJA,IASI;EAAA,IARJC,MAQI,QARJA,MAQI;EAAA,IAPJC,MAOI,QAPJA,MAOI;EAAA,4BANJC,WAMI;EAAA,IANJA,WAMI,iCANU,UAMV;EAAA,IALJC,OAKI,QALJA,OAKI;EAAA,IAJJC,SAII,QAJJA,SAII;EAAA,IAHJC,UAGI,QAHJA,UAGI;EAAA,IAFJC,UAEI,QAFJA,UAEI;EAAA,IADDC,MACC;EACJ,IAAMC,KAAK,GAAG,IAAAC,cAAA,GAAd;EAEA;EAEA;;EACA,IAAMC,YAAY,GAAG,IAAAC,cAAA,EACnB;IAAA;;IAAA,OAAO,CAAC,IAAAC,cAAA,YAAMb,IAAI,CAAC,CAAD,CAAV,2CAAM,OAASc,WAAf,CAAD,GAA+Bd,IAAI,CAAC,CAAD,CAAJ,CAAQc,WAAR,CAAoBC,WAApB,OAAsC,GAArE,GAA2E,KAAlF;EAAA,CADmB,EAEnB,CAACf,IAAD,CAFmB,CAArB;EAKA,IAAMgB,WAAW,GAAG,IAAAJ,cAAA,EAClB;IAAA,OAAM,IAAAK,yCAAA,EAAoBhB,MAApB,EAA4BQ,KAA5B,EAAmCE,YAAnC,EAAiDL,UAAjD,EAA6DC,UAA7D,CAAN;EAAA,CADkB,EAElB,CAACI,YAAD,EAAeV,MAAf,EAAuBQ,KAAvB,EAA8BH,UAA9B,EAA0CC,UAA1C,CAFkB,CAApB;EAKA,IAAMW,WAAW,GAAG,IAAAN,cAAA,EAAQ;IAAA,OAAM,IAAAO,yCAAA,EAAoBjB,MAApB,CAAN;EAAA,CAAR,EAA2C,CAACA,MAAD,CAA3C,CAApB;EAEA,IAAMkB,SAAS,GAAGjB,WAAW,KAAK,QAAlC;EAEA;;EAEA,gBAA8B,IAAAkB,eAAA,EAAS,KAAT,CAA9B;EAAA;EAAA,IAAOC,OAAP;EAAA,IAAgBC,UAAhB;;EACA,iBAAsC,IAAAF,eAAA,EAAS;IAAEG,CAAC,EAAE,CAAL;IAAQC,CAAC,EAAE;EAAX,CAAT,CAAtC;EAAA;EAAA,IAAOC,WAAP;EAAA,IAAoBC,cAApB;;EACA,iBAAsC,IAAAN,eAAA,GAAtC;EAAA;EAAA,IAAOO,WAAP;EAAA,IAAoBC,cAApB;EAEA;EAEA;;;EACA,IAAMC,OAAO,GAAG,IAAAC,kBAAA,EACd,UAACC,KAAD,EAAW;IACT,IAAQC,MAAR,GAAmBD,KAAnB,CAAQC,MAAR;IAEA,IAAMC,cAAc,GAAG;MACrBC,KAAK,EAAE,EADc;MAErBC,QAAQ,EAAE;IAFW,CAAvB;IAKAH,MAAM,CAACI,OAAP,CAAe,UAACC,CAAD,EAAIC,CAAJ,EAAU;MAAA;;MACvB,IAAMC,KAAK,GAAGF,CAAC,CAACG,QAAhB;MACA,IAAMC,OAAO,GAAGJ,CAAC,CAACK,WAAlB;MAEA,IAAIJ,CAAC,KAAK,CAAV,EAAaL,cAAc,CAACC,KAAf,GAAuBxB,YAAY,GAAG2B,CAAC,CAACb,CAAL,GAASa,CAAC,CAACd,CAAF,IAAOgB,KAAK,CAACI,IAAzD;MAEbV,cAAc,CAACE,QAAf,CAAwBS,IAAxB,CAA6B;QAC3BC,KAAK,EAAE,kBAAAN,KAAK,CAACO,MAAN,gEAAcD,KAAd,qBAAuBN,KAAK,CAACQ,IAA7B,gDAAuB,YAAYF,KAAnC,KAA4CR,CAAC,CAACQ,KAD1B;QAE3BF,IAAI,EAAE,kBAAAJ,KAAK,CAACS,MAAN,gEAAeP,OAAf,MAA2BF,KAAK,CAACI,IAFZ;QAG3BM,KAAK,EAAEvC,YAAY,GAAG2B,CAAC,CAACd,CAAL,GAASc,CAAC,CAACb,CAAF,IAAOa,CAAC,CAACY;MAHV,CAA7B;IAKD,CAXD;IAaArB,cAAc,CAACK,cAAD,CAAd;IACAX,UAAU,CAAC,IAAD,CAAV;EACD,CAxBa,EAyBd,CAACZ,YAAD,CAzBc,CAAhB;EA4BA,IAAMwC,SAAS,GAAG,IAAApB,kBAAA,EAAY,YAAM;IAClCR,UAAU,CAAC,KAAD,CAAV;EACD,CAFiB,EAEf,EAFe,CAAlB;EAIA,IAAM6B,WAAW,GAAG,IAAArB,kBAAA,EAAY,UAACC,KAAD,EAAW;IACzCL,cAAc,CAAC;MACbH,CAAC,EAAEQ,KAAK,CAACqB,OADI;MAEb5B,CAAC,EAAEO,KAAK,CAACsB;IAFI,CAAD,CAAd;EAID,CALmB,EAKjB,EALiB,CAApB;EAOA,oBACE,4DACGhC,OAAO,iBACN,6BAAC,gBAAD;IACE,WAAW,EAAEI,WADf;IAEE,IAAI,EAAEE,WAFR;IAGE,SAAS,EAAER,SAHb;IAIE,OAAO,EAAEhB;EAJX,EAFJ,eASE;IAAK,EAAE,EAAEN,EAAT;IAAa,SAAS,EAAEC,OAAO,CAACwD;EAAhC,gBACE;IAAK,WAAW,EAAEH;EAAlB,gBACE,6BAAC,aAAD;IACE,IAAI,EAAEpD,IADR;IAEE,MAAM,EAAEgB,WAFV;IAGE,MAAM,EAAEE,WAHV;IAIE,OAAO,EAAEY,OAJX;IAKE,SAAS,EAAEqB,SALb;IAME,SAAS,EAAE9C;EANb,GAOMG,MAPN,EADF,CADF,CATF,CADF;AAyBD,CAzGD;;AA2GA,wCAAAX,KAAK,CAAC2D,SAAN,GAAkB;EAChB;AACF;AACA;EACE1D,EAAE,EAAE2D,kBAAA,CAAUC,MAJE;;EAKhB;AACF;AACA;EACE3D,OAAO,EAAE0D,kBAAA,CAAUE,KAAV,CAAgB;IACvBJ,IAAI,EAAEE,kBAAA,CAAUC;EADO,CAAhB,CARO;;EAYhB;AACF;AACA;EACE1D,IAAI,EAAEyD,kBAAA,CAAUG,OAAV,CAAkBH,kBAAA,CAAUI,UAAV,CAAqBC,MAArB,CAAlB,EAAgDC,UAftC;;EAgBhB;AACF;AACA;EACE9D,MAAM,EAAEwD,kBAAA,CAAUI,UAAV,CAAqBC,MAArB,EAA6BC,UAnBrB;;EAoBhB;AACF;AACA;EACE7D,MAAM,EAAEuD,kBAAA,CAAUI,UAAV,CAAqBC,MAArB,CAvBQ;;EAwBhB;AACF;AACA;EACE3D,WAAW,EAAEsD,kBAAA,CAAUO,KAAV,CAAgB,CAAC,QAAD,EAAW,UAAX,CAAhB,CA3BG;;EA4BhB;AACF;AACA;EACE5D,OAAO,EAAEqD,kBAAA,CAAUQ,IA/BH;;EAgChB;AACF;AACA;EACE5D,SAAS,EAAEoD,kBAAA,CAAUQ,IAnCL;;EAoChB;AACF;AACA;EACE3D,UAAU,EAAEmD,kBAAA,CAAUC,MAvCN;;EAwChB;AACF;AACA;EACEnD,UAAU,EAAEkD,kBAAA,CAAUC,MA3CN;;EA4ChB;AACF;AACA;EACEQ,QAAQ,EAAET,kBAAA,CAAUC;AA/CJ,CAAlB;;eAkDe,IAAAS,gBAAA,EAAWC,eAAX,EAAmB;EAAExB,IAAI,EAAE;AAAR,CAAnB,EAAwC/C,KAAxC,C"}

package/dist/Chart/Tooltip/Tooltip.js

@@ -46,10 +46,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;
 
@@ -80,16 +83,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__*/_react.default.createElement(_SingleTooltip.default, {
+      title: data.title,
+      value: data.elements[0].value
+    });
+    return _MultipleTooltip || (_MultipleTooltip = /*#__PURE__*/_react.default.createElement(_MultiTooltip.default, {
+      data: data
+    }));
+  }, [data, useSingle]);
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: ref,
     className: classes.root,
     style: style
-  }, useSingle && /*#__PURE__*/_react.default.createElement(_SingleTooltip.default, {
-    title: data.title,
-    value: data.elements[0].value
-  }) || /*#__PURE__*/_react.default.createElement(_MultiTooltip.default, {
-    data: data
-  }));
+  }, renderTooltip(tooltip));
 };
 
 process.env.NODE_ENV !== "production" ? MainToolTip.propTypes = {
@@ -151,7 +159,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 \"@material-ui/core\";\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 \"@material-ui/core\";\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 _extends from "@babel/runtime/helpers/esm/extends";
 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"];
 import "core-js/modules/es.object.to-string.js";
 import "core-js/modules/web.dom-collections.for-each.js";
 import "core-js/modules/es.function.name.js";
@@ -22,6 +22,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,
@@ -99,7 +100,8 @@ var Chart = function Chart(_ref) {
   return /*#__PURE__*/React.createElement(React.Fragment, null, isHover && /*#__PURE__*/React.createElement(Tooltip, {
     coordinates: coordinates,
     data: dataTooltip,
-    useSingle: useSingle
+    useSingle: useSingle,
+    tooltip: tooltip
   }), /*#__PURE__*/React.createElement("div", {
     id: id,
     className: classes.root
@@ -148,6 +150,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","useTheme","withStyles","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 { useTheme, withStyles } from \"@material-ui/core\";\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","useTheme","withStyles","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 { useTheme, withStyles } from \"@material-ui/core\";\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 "@material-ui/core";
 import SingleTooltip from "./SingleTooltip";
@@ -12,10 +12,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;
 
@@ -46,16 +49,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__*/React.createElement(SingleTooltip, {
+      title: data.title,
+      value: data.elements[0].value
+    });
+    return _MultipleTooltip || (_MultipleTooltip = /*#__PURE__*/React.createElement(MultipleTooltip, {
+      data: data
+    }));
+  }, [data, useSingle]);
   return /*#__PURE__*/React.createElement("div", {
     ref: ref,
     className: classes.root,
     style: style
-  }, useSingle && /*#__PURE__*/React.createElement(SingleTooltip, {
-    title: data.title,
-    value: data.elements[0].value
-  }) || /*#__PURE__*/React.createElement(MultipleTooltip, {
-    data: data
-  }));
+  }, renderTooltip(tooltip));
 };
 
 process.env.NODE_ENV !== "production" ? MainToolTip.propTypes = {
@@ -117,7 +125,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 \"@material-ui/core\";\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 \"@material-ui/core\";\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 _extends from "@babel/runtime/helpers/esm/extends";
 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"];
 import "core-js/modules/web.dom-collections.iterator.js";
 import React, { useState, useMemo, useCallback } from "react";
 import PropTypes from "prop-types";
@@ -19,6 +19,7 @@ const Chart = _ref => {
     layout,
     config,
     tooltipType = "multiple",
+    tooltip,
     afterPlot,
     xAxisTitle,
     yAxisTitle
@@ -83,7 +84,8 @@ const Chart = _ref => {
   return /*#__PURE__*/React.createElement(React.Fragment, null, isHover && /*#__PURE__*/React.createElement(Tooltip, {
     coordinates: coordinates,
     data: dataTooltip,
-    useSingle: useSingle
+    useSingle: useSingle,
+    tooltip: tooltip
   }), /*#__PURE__*/React.createElement("div", {
     id: id,
     className: classes.root
@@ -132,6 +134,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","useTheme","withStyles","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 { useTheme, withStyles } from \"@material-ui/core\";\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","useTheme","withStyles","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 { useTheme, withStyles } from \"@material-ui/core\";\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 "@material-ui/core";
 import SingleTooltip from "./SingleTooltip";
@@ -15,8 +15,11 @@ const MainToolTip = ({
   classes,
   coordinates,
   data,
-  useSingle
+  useSingle,
+  tooltip
 }) => {
+  var _MultipleTooltip;
+
   const {
     x,
     y
@@ -43,16 +46,21 @@ const MainToolTip = ({
       top: y - height - offset
     });
   }, [x, y]);
+  const renderTooltip = useCallback(CustomTooltip => {
+    if (CustomTooltip) return CustomTooltip(data);
+    if (useSingle) return /*#__PURE__*/React.createElement(SingleTooltip, {
+      title: data.title,
+      value: data.elements[0].value
+    });
+    return _MultipleTooltip || (_MultipleTooltip = /*#__PURE__*/React.createElement(MultipleTooltip, {
+      data: data
+    }));
+  }, [data, useSingle]);
   return /*#__PURE__*/React.createElement("div", {
     ref: ref,
     className: classes.root,
     style: style
-  }, useSingle && /*#__PURE__*/React.createElement(SingleTooltip, {
-    title: data.title,
-    value: data.elements[0].value
-  }) || /*#__PURE__*/React.createElement(MultipleTooltip, {
-    data: data
-  }));
+  }, renderTooltip(tooltip));
 };
 
 process.env.NODE_ENV !== "production" ? MainToolTip.propTypes = {
@@ -114,7 +122,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 \"@material-ui/core\";\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 \"@material-ui/core\";\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": "3.1.22",
+  "version": "3.2.1",
   "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",
@@ -42,7 +42,7 @@
     "react-dom": "^16.13.1 || ^17.0.2"
   },
   "dependencies": {
-    "@hitachivantara/uikit-react-core": "^3.74.1",
+    "@hitachivantara/uikit-react-core": "^3.75.0",
     "clsx": "^1.2.1",
     "lodash": "^4.17.21",
     "prop-types": "^15.8.1",
@@ -59,5 +59,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "909e69f98cf2f7dabb0585f00d29bebd005fba83"
+  "gitHead": "973d5eadb8648e739d0f8b3b8e1e46491a5ad336"
 }