@carbon/charts 0.30.21 → 0.30.25

package/components/essentials/threshold.js

@@ -0,0 +1,171 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import { Component } from "../component";
+import { Tools } from "../../tools";
+import { DOMUtils } from "../../services";
+import { AxisPositions, Events, ScaleTypes } from "../../interfaces";
+import { select, mouse } from "d3-selection";
+// Carbon position service
+import Position, { PLACEMENTS } from "@carbon/utils-position";
+// import the settings for the css prefix
+import settings from "carbon-components/es/globals/js/settings";
+import { formatTick, computeTimeIntervalName } from "../../services/time-series";
+var Threshold = /** @class */ (function (_super) {
+    __extends(Threshold, _super);
+    function Threshold(model, services, configs) {
+        var _this = _super.call(this, model, services, configs) || this;
+        _this.type = "threshold";
+        _this.positionService = new Position();
+        return _this;
+    }
+    Threshold.prototype.render = function (animate) {
+        var _this = this;
+        if (animate === void 0) { animate = false; }
+        var _a = this.configs, value = _a.value, fillColor = _a.fillColor, axisPosition = _a.axisPosition, index = _a.index;
+        var chartprefix = Tools.getProperty(this.model.getOptions(), "style", "prefix");
+        this.thresholdClass = settings.prefix + "--" + chartprefix + "--threshold";
+        // We can have multiple thresholds, set an unique identifier
+        this.thresholdIdentifierClass = axisPosition + "-" + index;
+        this.threshold = DOMUtils.appendOrSelect(this.parent, "g." + this.thresholdClass + "." + this.thresholdIdentifierClass).raise();
+        // Append threshold hoverable area
+        var thresholdRect = DOMUtils.appendOrSelect(this.threshold, "rect.threshold-hoverable-area");
+        // Append threshold line
+        var thresholdLine = DOMUtils.appendOrSelect(this.threshold, "line.threshold-line");
+        // Set threshold line color from configs options
+        // If not defined, the line takes the defined CSS color
+        thresholdLine.style("stroke", fillColor);
+        var scale = this.services.cartesianScales.getScaleByPosition(axisPosition);
+        var isVertical = [AxisPositions.LEFT, AxisPositions.RIGHT].includes(axisPosition);
+        var scaleType = this.services.cartesianScales.getScaleTypeByPosition(axisPosition);
+        var mainXScale = this.services.cartesianScales.getMainXScale();
+        var mainYScale = this.services.cartesianScales.getMainYScale();
+        var isScaleTypeLabels = scaleType === ScaleTypes.LABELS;
+        var _b = mainXScale.range(), xScaleStart = _b[0], xScaleEnd = _b[1];
+        var _c = mainYScale.range(), yScaleEnd = _c[0], yScaleStart = _c[1];
+        if (isVertical) {
+            // Position the threshold on the y scale value
+            var y = scale(value) + (isScaleTypeLabels ? scale.step() / 2 : 0);
+            this.threshold
+                .transition(this.services.transitions.getTransition("threshold-update", animate))
+                .attr("transform", "translate(" + xScaleStart + ", " + y + ")");
+            // Set line end point on the x-axis
+            thresholdLine.attr("x2", xScaleEnd - xScaleStart);
+            // Set hoverable area width
+            thresholdRect.attr("width", xScaleEnd - xScaleStart);
+        }
+        else {
+            // Position the threshold on the x scale value
+            var x = scale(value) + (isScaleTypeLabels ? scale.step() / 2 : 0);
+            this.threshold
+                .transition(this.services.transitions.getTransition("threshold-update", animate))
+                .attr("transform", "translate(" + x + ", " + yScaleStart + ")");
+            // Set line end point on the y-axis
+            thresholdLine.attr("y2", yScaleEnd - yScaleStart);
+            // Set hoverable area width and rotate it
+            thresholdRect.attr("width", yScaleEnd - yScaleStart);
+            thresholdRect.classed("rotate", true);
+        }
+        var self = this;
+        this.services.events.addEventListener(Events.Threshold.SHOW, function (e) {
+            var hovered = e.detail.hoveredElement.node();
+            // If is this threshold
+            if (hovered === self.threshold) {
+                // Set label position and show it
+                _this.setThresholdLabelPosition();
+                _this.label.classed("hidden", false);
+            }
+        });
+        this.services.events.addEventListener(Events.Threshold.HIDE, function (e) {
+            _this.label.classed("hidden", true);
+        });
+        this.appendThresholdLabel();
+        this.addEventListeners();
+    };
+    Threshold.prototype.getFormattedValue = function () {
+        var _a = this.configs, value = _a.value, axisPosition = _a.axisPosition;
+        var options = this.model.getOptions();
+        var scaleType = this.services.cartesianScales.getScaleTypeByPosition(axisPosition);
+        // If scale is time, format the threshold date as the ticks format
+        if (scaleType === ScaleTypes.TIME) {
+            var isVertical = [
+                AxisPositions.LEFT,
+                AxisPositions.RIGHT
+            ].includes(axisPosition);
+            var mainXScale = this.services.cartesianScales.getMainXScale();
+            var mainYScale = this.services.cartesianScales.getMainYScale();
+            var scale = isVertical ? mainYScale : mainXScale;
+            var timeScaleOptions = Tools.getProperty(options, "timeScale");
+            var timeInterval = computeTimeIntervalName(scale.ticks());
+            return formatTick(value, 0, timeInterval, timeScaleOptions);
+        }
+        return value.toLocaleString("en");
+    };
+    Threshold.prototype.appendThresholdLabel = function () {
+        var _a = this.configs, value = _a.value, valueFormatter = _a.valueFormatter, fillColor = _a.fillColor, _b = _a.label, label = _b === void 0 ? "Threshold" : _b;
+        var holder = select(this.services.domUtils.getHolder());
+        // Format the threshold value using valueFormatter if defined in user-provided options
+        var formattedValue = valueFormatter
+            ? valueFormatter(value)
+            : this.getFormattedValue();
+        this.label = DOMUtils.appendOrSelect(holder, "div." + this.thresholdClass + "--label." + this.thresholdIdentifierClass);
+        this.label
+            .html(label + ": " + formattedValue)
+            .classed("hidden", true)
+            .style("background-color", fillColor);
+    };
+    Threshold.prototype.setThresholdLabelPosition = function () {
+        var holder = this.services.domUtils.getHolder();
+        var target = this.label.node();
+        var mouseRelativePos = mouse(holder);
+        // Find out whether threshold label should be shown on the left or right side
+        var bestPlacementOption = this.positionService.findBestPlacementAt({
+            left: mouseRelativePos[0],
+            top: mouseRelativePos[1]
+        }, target, [
+            PLACEMENTS.RIGHT,
+            PLACEMENTS.LEFT,
+            PLACEMENTS.TOP,
+            PLACEMENTS.BOTTOM
+        ], function () { return ({
+            width: holder.offsetWidth,
+            height: holder.offsetHeight
+        }); });
+        // Get coordinates to where label should be positioned
+        var pos = this.positionService.findPositionAt({
+            left: mouseRelativePos[0],
+            top: mouseRelativePos[1]
+        }, target, bestPlacementOption);
+        this.positionService.setElement(target, pos);
+    };
+    Threshold.prototype.addEventListeners = function () {
+        var self = this;
+        // Add events to the threshold hoverable area
+        DOMUtils.appendOrSelect(this.threshold, "rect")
+            .on("mouseover mousemove", function () {
+            self.threshold.classed("active", true);
+            self.services.events.dispatchEvent(Events.Threshold.SHOW, {
+                hoveredElement: select(self.threshold)
+            });
+        })
+            .on("mouseout", function () {
+            self.threshold.classed("active", false);
+            self.services.events.dispatchEvent(Events.Threshold.HIDE, {
+                hoveredElement: select(self.threshold)
+            });
+        });
+    };
+    return Threshold;
+}(Component));
+export { Threshold };
+//# sourceMappingURL=../../../src/components/essentials/threshold.js.map

package/components/essentials/threshold.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"threshold.js","sourceRoot":"","sources":["threshold.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component } from \"../component\";\nimport { Tools } from \"../../tools\";\nimport { DOMUtils } from \"../../services\";\nimport { ChartModel } from \"../../model\";\nimport { AxisPositions, Events, ScaleTypes } from \"../../interfaces\";\nimport { select, mouse } from \"d3-selection\";\n\n// Carbon position service\nimport Position, { PLACEMENTS } from \"@carbon/utils-position\";\n\n// import the settings for the css prefix\nimport settings from \"carbon-components/es/globals/js/settings\";\nimport {\n\tformatTick,\n\tcomputeTimeIntervalName\n} from \"../../services/time-series\";\n\nexport class Threshold extends Component {\n\ttype = \"threshold\";\n\n\tthreshold: any;\n\tthresholdClass: string;\n\tthresholdIdentifierClass: string;\n\n\tlabel: any;\n\n\tpositionService = new Position();\n\n\tconstructor(model: ChartModel, services: any, configs: any) {\n\t\tsuper(model, services, configs);\n\t}\n\n\trender(animate = false) {\n\t\tconst { value, fillColor, axisPosition, index } = this.configs;\n\t\tconst chartprefix = Tools.getProperty(\n\t\t\tthis.model.getOptions(),\n\t\t\t\"style\",\n\t\t\t\"prefix\"\n\t\t);\n\t\tthis.thresholdClass = `${settings.prefix}--${chartprefix}--threshold`;\n\t\t// We can have multiple thresholds, set an unique identifier\n\t\tthis.thresholdIdentifierClass = `${axisPosition}-${index}`;\n\n\t\tthis.threshold = DOMUtils.appendOrSelect(\n\t\t\tthis.parent,\n\t\t\t`g.${this.thresholdClass}.${this.thresholdIdentifierClass}`\n\t\t).raise();\n\t\t// Append threshold hoverable area\n\t\tconst thresholdRect = DOMUtils.appendOrSelect(\n\t\t\tthis.threshold,\n\t\t\t`rect.threshold-hoverable-area`\n\t\t);\n\t\t// Append threshold line\n\t\tconst thresholdLine = DOMUtils.appendOrSelect(\n\t\t\tthis.threshold,\n\t\t\t`line.threshold-line`\n\t\t);\n\n\t\t// Set threshold line color from configs options\n\t\t// If not defined, the line takes the defined CSS color\n\t\tthresholdLine.style(\"stroke\", fillColor);\n\n\t\tconst scale = this.services.cartesianScales.getScaleByPosition(\n\t\t\taxisPosition\n\t\t);\n\t\tconst isVertical = [AxisPositions.LEFT, AxisPositions.RIGHT].includes(\n\t\t\taxisPosition\n\t\t);\n\t\tconst scaleType = this.services.cartesianScales.getScaleTypeByPosition(\n\t\t\taxisPosition\n\t\t);\n\t\tconst mainXScale = this.services.cartesianScales.getMainXScale();\n\t\tconst mainYScale = this.services.cartesianScales.getMainYScale();\n\t\tconst isScaleTypeLabels = scaleType === ScaleTypes.LABELS;\n\t\tconst [xScaleStart, xScaleEnd] = mainXScale.range();\n\t\tconst [yScaleEnd, yScaleStart] = mainYScale.range();\n\n\t\tif (isVertical) {\n\t\t\t// Position the threshold on the y scale value\n\t\t\tconst y = scale(value) + (isScaleTypeLabels ? scale.step() / 2 : 0);\n\t\t\tthis.threshold\n\t\t\t\t.transition(\n\t\t\t\t\tthis.services.transitions.getTransition(\n\t\t\t\t\t\t\"threshold-update\",\n\t\t\t\t\t\tanimate\n\t\t\t\t\t)\n\t\t\t\t)\n\t\t\t\t.attr(\"transform\", `translate(${xScaleStart}, ${y})`);\n\t\t\t// Set line end point on the x-axis\n\t\t\tthresholdLine.attr(\"x2\", xScaleEnd - xScaleStart);\n\t\t\t// Set hoverable area width\n\t\t\tthresholdRect.attr(\"width\", xScaleEnd - xScaleStart);\n\t\t} else {\n\t\t\t// Position the threshold on the x scale value\n\t\t\tconst x = scale(value) + (isScaleTypeLabels ? scale.step() / 2 : 0);\n\t\t\tthis.threshold\n\t\t\t\t.transition(\n\t\t\t\t\tthis.services.transitions.getTransition(\n\t\t\t\t\t\t\"threshold-update\",\n\t\t\t\t\t\tanimate\n\t\t\t\t\t)\n\t\t\t\t)\n\t\t\t\t.attr(\"transform\", `translate(${x}, ${yScaleStart})`);\n\t\t\t// Set line end point on the y-axis\n\t\t\tthresholdLine.attr(\"y2\", yScaleEnd - yScaleStart);\n\t\t\t// Set hoverable area width and rotate it\n\t\t\tthresholdRect.attr(\"width\", yScaleEnd - yScaleStart);\n\t\t\tthresholdRect.classed(\"rotate\", true);\n\t\t}\n\n\t\tconst self = this;\n\t\tthis.services.events.addEventListener(Events.Threshold.SHOW, e => {\n\t\t\tconst hovered = e.detail.hoveredElement.node();\n\t\t\t// If is this threshold\n\t\t\tif (hovered === self.threshold) {\n\t\t\t\t// Set label position and show it\n\t\t\t\tthis.setThresholdLabelPosition();\n\t\t\t\tthis.label.classed(\"hidden\", false);\n\t\t\t}\n\t\t});\n\n\t\tthis.services.events.addEventListener(Events.Threshold.HIDE, e => {\n\t\t\tthis.label.classed(\"hidden\", true);\n\t\t});\n\n\t\tthis.appendThresholdLabel();\n\n\t\tthis.addEventListeners();\n\t}\n\n\tgetFormattedValue() {\n\t\tconst { value, axisPosition } = this.configs;\n\t\tconst options = this.model.getOptions();\n\t\tconst scaleType = this.services.cartesianScales.getScaleTypeByPosition(\n\t\t\taxisPosition\n\t\t);\n\n\t\t// If scale is time, format the threshold date as the ticks format\n\t\tif (scaleType === ScaleTypes.TIME) {\n\t\t\tconst isVertical = [\n\t\t\t\tAxisPositions.LEFT,\n\t\t\t\tAxisPositions.RIGHT\n\t\t\t].includes(axisPosition);\n\t\t\tconst mainXScale = this.services.cartesianScales.getMainXScale();\n\t\t\tconst mainYScale = this.services.cartesianScales.getMainYScale();\n\t\t\tconst scale = isVertical ? mainYScale : mainXScale;\n\n\t\t\tconst timeScaleOptions = Tools.getProperty(options, \"timeScale\");\n\t\t\tconst timeInterval = computeTimeIntervalName(scale.ticks());\n\t\t\treturn formatTick(value, 0, timeInterval, timeScaleOptions);\n\t\t}\n\n\t\treturn value.toLocaleString(\"en\");\n\t}\n\n\tappendThresholdLabel() {\n\t\tconst {\n\t\t\tvalue,\n\t\t\tvalueFormatter,\n\t\t\tfillColor,\n\t\t\tlabel = \"Threshold\"\n\t\t} = this.configs;\n\t\tconst holder = select(this.services.domUtils.getHolder());\n\t\t// Format the threshold value using valueFormatter if defined in user-provided options\n\t\tconst formattedValue = valueFormatter\n\t\t\t? valueFormatter(value)\n\t\t\t: this.getFormattedValue();\n\n\t\tthis.label = DOMUtils.appendOrSelect(\n\t\t\tholder,\n\t\t\t`div.${this.thresholdClass}--label.${this.thresholdIdentifierClass}`\n\t\t);\n\t\tthis.label\n\t\t\t.html(`${label}: ${formattedValue}`)\n\t\t\t.classed(\"hidden\", true)\n\t\t\t.style(\"background-color\", fillColor);\n\t}\n\n\tsetThresholdLabelPosition() {\n\t\tconst holder = this.services.domUtils.getHolder();\n\t\tconst target = this.label.node();\n\t\tconst mouseRelativePos = mouse(holder);\n\n\t\t// Find out whether threshold label should be shown on the left or right side\n\t\tconst bestPlacementOption = this.positionService.findBestPlacementAt(\n\t\t\t{\n\t\t\t\tleft: mouseRelativePos[0],\n\t\t\t\ttop: mouseRelativePos[1]\n\t\t\t},\n\t\t\ttarget,\n\t\t\t[\n\t\t\t\tPLACEMENTS.RIGHT,\n\t\t\t\tPLACEMENTS.LEFT,\n\t\t\t\tPLACEMENTS.TOP,\n\t\t\t\tPLACEMENTS.BOTTOM\n\t\t\t],\n\t\t\t() => ({\n\t\t\t\twidth: holder.offsetWidth,\n\t\t\t\theight: holder.offsetHeight\n\t\t\t})\n\t\t);\n\n\t\t// Get coordinates to where label should be positioned\n\t\tconst pos = this.positionService.findPositionAt(\n\t\t\t{\n\t\t\t\tleft: mouseRelativePos[0],\n\t\t\t\ttop: mouseRelativePos[1]\n\t\t\t},\n\t\t\ttarget,\n\t\t\tbestPlacementOption\n\t\t);\n\n\t\tthis.positionService.setElement(target, pos);\n\t}\n\n\taddEventListeners() {\n\t\tconst self = this;\n\n\t\t// Add events to the threshold hoverable area\n\t\tDOMUtils.appendOrSelect(this.threshold, \"rect\")\n\t\t\t.on(\"mouseover mousemove\", function() {\n\t\t\t\tself.threshold.classed(\"active\", true);\n\t\t\t\tself.services.events.dispatchEvent(Events.Threshold.SHOW, {\n\t\t\t\t\thoveredElement: select(self.threshold)\n\t\t\t\t});\n\t\t\t})\n\t\t\t.on(\"mouseout\", function() {\n\t\t\t\tself.threshold.classed(\"active\", false);\n\t\t\t\tself.services.events.dispatchEvent(Events.Threshold.HIDE, {\n\t\t\t\t\thoveredElement: select(self.threshold)\n\t\t\t\t});\n\t\t\t});\n\t}\n}\n"]}

package/components/essentials/title.js

@@ -36,17 +36,19 @@ var Title = /** @class */ (function (_super) {
         // check if the title is too big for the containing svg
         if (title.node().getComputedTextLength() > containerWidth) {
             // append the ellipses to their own tspan to calculate the text length
-            title.append("tspan")
-                .text("...");
+            title.append("tspan").text("...");
             // get the bounding width including the elipses '...'
-            var tspanLength = DOMUtils.appendOrSelect(title, "tspan").node().getComputedTextLength();
+            var tspanLength = DOMUtils.appendOrSelect(title, "tspan")
+                .node()
+                .getComputedTextLength();
             var truncatedSize = Math.floor(containerWidth - tspanLength);
             var titleString = this.model.getOptions().title;
             // get the index for creating the max length substring that fit within the svg
             // use one less than the index to avoid crowding (the elipsis)
             var substringIndex = this.getSubstringIndex(title.node(), 0, titleString.length - 1, truncatedSize);
             // use the substring as the title
-            title.html(titleString.substring(0, substringIndex - 1))
+            title
+                .html(titleString.substring(0, substringIndex - 1))
                 .append("tspan")
                 .text("...");
             // add events for displaying the tooltip with the title

package/components/essentials/title.js.map

@@ -1 +1 @@
-{"version":3,"file":"title.js","sourceRoot":"","sources":["title.ts"],"names":[],"mappings":"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","sourcesContent":["// Internal Imports\nimport { Component } from \"../component\";\nimport { DOMUtils } from \"../../services\";\nimport { TooltipTypes, Events } from \"./../../interfaces\";\n\nexport class Title extends Component {\n\ttype = \"title\";\n\n\t/**\n\t * Truncates title creating ellipses and attaching tooltip for exposing full title.\n\t */\n\ttruncateTitle() {\n\t\t// get a reference to the title elements to calculate the size the title can be\n\t\tconst containerWidth = DOMUtils.getSVGElementSize(this.services.domUtils.getMainSVG(), { useAttr: true }).width;\n\t\tconst title = DOMUtils.appendOrSelect(this.parent, \"text.title\");\n\n\t\t// sanity check to prevent stack overflow on binary search\n\t\tif (containerWidth <= 0) {\n\t\t\treturn;\n\t\t}\n\n\t\t// check if the title is too big for the containing svg\n\t\tif (title.node().getComputedTextLength() > containerWidth) {\n\t\t\t// append the ellipses to their own tspan to calculate the text length\n\t\t\ttitle.append(\"tspan\")\n\t\t\t\t.text(\"...\");\n\n\t\t\t// get the bounding width including the elipses '...'\n\t\t\tconst tspanLength = DOMUtils.appendOrSelect(title, \"tspan\").node().getComputedTextLength();\n\t\t\tconst truncatedSize = Math.floor(containerWidth - tspanLength);\n\t\t\tconst titleString = this.model.getOptions().title;\n\n\t\t\t// get the index for creating the max length substring that fit within the svg\n\t\t\t// use one less than the index to avoid crowding (the elipsis)\n\t\t\tconst substringIndex = this.getSubstringIndex(title.node(), 0, titleString.length - 1, truncatedSize);\n\n\t\t\t// use the substring as the title\n\t\t\ttitle.html(titleString.substring(0, substringIndex - 1))\n\t\t\t\t.append(\"tspan\")\n\t\t\t\t.text(\"...\");\n\n\t\t\t// add events for displaying the tooltip with the title\n\t\t\tconst self = this;\n\t\t\ttitle\n\t\t\t\t.on(\"mouseenter\", function() {\n\t\t\t\t\tself.services.events.dispatchEvent(Events.Tooltip.SHOW, {\n\t\t\t\t\t\thoveredElement: title,\n\t\t\t\t\t\ttype: TooltipTypes.TITLE\n\t\t\t\t\t});\n\t\t\t\t})\n\t\t\t\t.on(\"mouseout\", function() {\n\t\t\t\t\tself.services.events.dispatchEvent(Events.Tooltip.HIDE, {\n\t\t\t\t\t\thoveredElement: title\n\t\t\t\t\t});\n\t\t\t\t});\n\t\t}\n\t}\n\n\trender() {\n\t\tconst svg = this.getContainerSVG();\n\n\t\tconst text = DOMUtils.appendOrSelect(svg, \"text.title\");\n\t\ttext.attr(\"x\", 0)\n\t\t\t.attr(\"y\", 20)\n\t\t\t.html(this.model.getOptions().title);\n\n\t\t// title needs to first render so that we can check for overflow\n\t\tthis.truncateTitle();\n\t}\n\n\t/**\n\t * Returns the index for a maximum length substring that is less than the width parameter.\n\t * @param title the title node used for getting the text lengths of substrings\n\t * @param start the start index for the binary search\n\t * @param end the end index for the binary search\n\t * @param width the width of the svg container that holds the title\n\t */\n\tprotected getSubstringIndex(title, start, end, width) {\n\t\tconst mid = Math.floor((end + start) / 2);\n\t\tif (title.getSubStringLength(0, mid) > width) {\n\t\t\treturn this.getSubstringIndex(title, start, mid, width);\n\t\t} else if (title.getSubStringLength(0, mid) < width) {\n\t\t\tif (title.getSubStringLength(0, mid + 1) > width) {\n\t\t\t\treturn mid;\n\t\t\t}\n\t\t\treturn this.getSubstringIndex(title, mid, end, width);\n\t\t} else {\n\t\t\treturn mid;\n\t\t}\n\t}\n}\n"]}
+{"version":3,"file":"title.js","sourceRoot":"","sources":["title.ts"],"names":[],"mappings":"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","sourcesContent":["// Internal Imports\nimport { Component } from \"../component\";\nimport { DOMUtils } from \"../../services\";\nimport { TooltipTypes, Events } from \"./../../interfaces\";\n\nexport class Title extends Component {\n\ttype = \"title\";\n\n\t/**\n\t * Truncates title creating ellipses and attaching tooltip for exposing full title.\n\t */\n\ttruncateTitle() {\n\t\t// get a reference to the title elements to calculate the size the title can be\n\t\tconst containerWidth = DOMUtils.getSVGElementSize(\n\t\t\tthis.services.domUtils.getMainSVG(),\n\t\t\t{ useAttr: true }\n\t\t).width;\n\t\tconst title = DOMUtils.appendOrSelect(this.parent, \"text.title\");\n\n\t\t// sanity check to prevent stack overflow on binary search\n\t\tif (containerWidth <= 0) {\n\t\t\treturn;\n\t\t}\n\n\t\t// check if the title is too big for the containing svg\n\t\tif (title.node().getComputedTextLength() > containerWidth) {\n\t\t\t// append the ellipses to their own tspan to calculate the text length\n\t\t\ttitle.append(\"tspan\").text(\"...\");\n\n\t\t\t// get the bounding width including the elipses '...'\n\t\t\tconst tspanLength = DOMUtils.appendOrSelect(title, \"tspan\")\n\t\t\t\t.node()\n\t\t\t\t.getComputedTextLength();\n\t\t\tconst truncatedSize = Math.floor(containerWidth - tspanLength);\n\t\t\tconst titleString = this.model.getOptions().title;\n\n\t\t\t// get the index for creating the max length substring that fit within the svg\n\t\t\t// use one less than the index to avoid crowding (the elipsis)\n\t\t\tconst substringIndex = this.getSubstringIndex(\n\t\t\t\ttitle.node(),\n\t\t\t\t0,\n\t\t\t\ttitleString.length - 1,\n\t\t\t\ttruncatedSize\n\t\t\t);\n\n\t\t\t// use the substring as the title\n\t\t\ttitle\n\t\t\t\t.html(titleString.substring(0, substringIndex - 1))\n\t\t\t\t.append(\"tspan\")\n\t\t\t\t.text(\"...\");\n\n\t\t\t// add events for displaying the tooltip with the title\n\t\t\tconst self = this;\n\t\t\ttitle\n\t\t\t\t.on(\"mouseenter\", function() {\n\t\t\t\t\tself.services.events.dispatchEvent(Events.Tooltip.SHOW, {\n\t\t\t\t\t\thoveredElement: title,\n\t\t\t\t\t\ttype: TooltipTypes.TITLE\n\t\t\t\t\t});\n\t\t\t\t})\n\t\t\t\t.on(\"mouseout\", function() {\n\t\t\t\t\tself.services.events.dispatchEvent(Events.Tooltip.HIDE, {\n\t\t\t\t\t\thoveredElement: title\n\t\t\t\t\t});\n\t\t\t\t});\n\t\t}\n\t}\n\n\trender() {\n\t\tconst svg = this.getContainerSVG();\n\n\t\tconst text = DOMUtils.appendOrSelect(svg, \"text.title\");\n\t\ttext.attr(\"x\", 0)\n\t\t\t.attr(\"y\", 20)\n\t\t\t.html(this.model.getOptions().title);\n\n\t\t// title needs to first render so that we can check for overflow\n\t\tthis.truncateTitle();\n\t}\n\n\t/**\n\t * Returns the index for a maximum length substring that is less than the width parameter.\n\t * @param title the title node used for getting the text lengths of substrings\n\t * @param start the start index for the binary search\n\t * @param end the end index for the binary search\n\t * @param width the width of the svg container that holds the title\n\t */\n\tprotected getSubstringIndex(title, start, end, width) {\n\t\tconst mid = Math.floor((end + start) / 2);\n\t\tif (title.getSubStringLength(0, mid) > width) {\n\t\t\treturn this.getSubstringIndex(title, start, mid, width);\n\t\t} else if (title.getSubStringLength(0, mid) < width) {\n\t\t\tif (title.getSubStringLength(0, mid + 1) > width) {\n\t\t\t\treturn mid;\n\t\t\t}\n\t\t\treturn this.getSubstringIndex(title, mid, end, width);\n\t\t} else {\n\t\t\treturn mid;\n\t\t}\n\t}\n}\n"]}

package/components/essentials/tooltip-bar.js

@@ -36,8 +36,10 @@ var TooltipBar = /** @class */ (function (_super) {
         // listen to show-tooltip Custom Events to render the tooltip
         this.services.events.addEventListener(Events.Tooltip.SHOW, function (e) {
             // check the type of tooltip and that it is enabled
-            if ((e.detail.type === TooltipTypes.DATAPOINT && Tools.getProperty(_this.model.getOptions(), "tooltip", "datapoint", "enabled"))
-                || (e.detail.type === TooltipTypes.GRIDLINE && Tools.getProperty(_this.model.getOptions(), "tooltip", "gridline", "enabled"))) {
+            if ((e.detail.type === TooltipTypes.DATAPOINT &&
+                Tools.getProperty(_this.model.getOptions(), "tooltip", "datapoint", "enabled")) ||
+                (e.detail.type === TooltipTypes.GRIDLINE &&
+                    Tools.getProperty(_this.model.getOptions(), "tooltip", "gridline", "enabled"))) {
                 var data = e.detail.hoveredElement.datum();
                 var hoveredElement = e.detail.hoveredElement.node();
                 var defaultHTML = void 0;
@@ -57,7 +59,9 @@ var TooltipBar = /** @class */ (function (_super) {
                 }
                 // if there is a provided tooltip HTML function call it and pass the defaultHTML
                 if (Tools.getProperty(_this.model.getOptions(), "tooltip", "customHTML")) {
-                    tooltipTextContainer.html(_this.model.getOptions().tooltip.customHTML(data, defaultHTML));
+                    tooltipTextContainer.html(_this.model
+                        .getOptions()
+                        .tooltip.customHTML(data, defaultHTML));
                 }
                 else {
                     // default tooltip
@@ -71,7 +75,8 @@ var TooltipBar = /** @class */ (function (_super) {
                 // use the chart size to enforce a max width on the tooltip
                 var chart = DOMUtils.appendOrSelect(holder, "svg." + settings.prefix + "--" + chartprefix + "--chart-svg");
                 // use the configs to determine how large the tooltip should be
-                var tooltipMax = DOMUtils.getSVGElementSize(chart).width * Tools.getProperty(_this.model.getOptions(), "tooltip", "title", "width");
+                var tooltipMax = DOMUtils.getSVGElementSize(chart).width *
+                    Tools.getProperty(_this.model.getOptions(), "tooltip", "title", "width");
                 _this.tooltip.style("max-width", tooltipMax);
                 // use tooltip.ts to get the tooltip html for titles
                 tooltipTextContainer.html(_super.prototype.getTooltipHTML.call(_this, e.detail.hoveredElement, TooltipTypes.TITLE));
@@ -96,23 +101,29 @@ var TooltipBar = /** @class */ (function (_super) {
         if (data === undefined) {
             data = select(hoveredElement).datum();
         }
-        var holderPosition = select(this.services.domUtils.getHolder()).node().getBoundingClientRect();
+        var holderPosition = select(this.services.domUtils.getHolder())
+            .node()
+            .getBoundingClientRect();
         var barPosition = hoveredElement.getBoundingClientRect();
         var verticalOffset = this.model.getOptions().tooltip.datapoint.verticalOffset;
         // if there is a negative value bar chart, need to place the tooltip below the bar
         if (data.value <= 0) {
             // negative bars
             var tooltipPos = {
-                left: (barPosition.left - holderPosition.left) + barPosition.width / 2,
-                top: (barPosition.bottom - holderPosition.top) + verticalOffset
+                left: barPosition.left -
+                    holderPosition.left +
+                    barPosition.width / 2,
+                top: barPosition.bottom - holderPosition.top + verticalOffset
             };
             return { placement: TooltipPosition.BOTTOM, position: tooltipPos };
         }
         else {
             // positive bars
             var tooltipPos = {
-                left: (barPosition.left - holderPosition.left) + barPosition.width / 2,
-                top: (barPosition.top - holderPosition.top) - verticalOffset
+                left: barPosition.left -
+                    holderPosition.left +
+                    barPosition.width / 2,
+                top: barPosition.top - holderPosition.top - verticalOffset
             };
             return { placement: TooltipPosition.TOP, position: tooltipPos };
         }
@@ -122,8 +133,9 @@ var TooltipBar = /** @class */ (function (_super) {
      * @param data associated values for the hovered bar
      */
     TooltipBar.prototype.getTooltipHTML = function (data) {
-        var formattedValue = Tools.getProperty(this.model.getOptions(), "tooltip", "valueFormatter") ?
-            this.model.getOptions().tooltip.valueFormatter(data.value) : data.value.toLocaleString("en");
+        var formattedValue = Tools.getProperty(this.model.getOptions(), "tooltip", "valueFormatter")
+            ? this.model.getOptions().tooltip.valueFormatter(data.value)
+            : data.value.toLocaleString("en");
         return "<div class=\"datapoint-tooltip\"><p class=\"value\">" + formattedValue + "</p></div>";
     };
     /**
@@ -136,23 +148,30 @@ var TooltipBar = /** @class */ (function (_super) {
         points.reverse();
         // in a vertical bar chart the tooltip should display in order of the drawn bars
         // in horizontal stacked bar, the order of the segments from Left to Right are displayed top down in tooltip
-        if (this.services.cartesianScales.getOrientation() === CartesianOrientations.VERTICAL) {
+        if (this.services.cartesianScales.getOrientation() ===
+            CartesianOrientations.VERTICAL) {
             points.reverse();
         }
         // get the total for the stacked tooltip
         var total = points.reduce(function (sum, item) { return sum + item.value; }, 0);
         // format the total value
-        total = Tools.getProperty(this.model.getOptions(), "tooltip", "valueFormatter") ?
-            this.model.getOptions().tooltip.valueFormatter(total) : total.toLocaleString("en");
-        return "<ul class='multi-tooltip'>" +
-            points.map(function (datapoint) {
-                var formattedValue = Tools.getProperty(_this.model.getOptions(), "tooltip", "valueFormatter") ?
-                    _this.model.getOptions().tooltip.valueFormatter(datapoint.value) : datapoint.value.toLocaleString("en");
+        total = Tools.getProperty(this.model.getOptions(), "tooltip", "valueFormatter")
+            ? this.model.getOptions().tooltip.valueFormatter(total)
+            : total.toLocaleString("en");
+        return ("<ul class='multi-tooltip'>" +
+            points
+                .map(function (datapoint) {
+                var formattedValue = Tools.getProperty(_this.model.getOptions(), "tooltip", "valueFormatter")
+                    ? _this.model
+                        .getOptions()
+                        .tooltip.valueFormatter(datapoint.value)
+                    : datapoint.value.toLocaleString("en");
                 // For the tooltip color, we always want the normal stroke color, not dynamically determined by data value.
                 var indicatorColor = _this.model.getStrokeColor(datapoint.datasetLabel, datapoint.label);
                 return "\n\t\t\t\t<li>\n\t\t\t\t\t<div class=\"datapoint-tooltip\">\n\t\t\t\t\t\t<a style=\"background-color:" + indicatorColor + "\" class=\"tooltip-color\"></a>\n\t\t\t\t\t\t<p class=\"label\">" + datapoint.datasetLabel + "</p>\n\t\t\t\t\t\t<p class=\"value\">" + formattedValue + "</p>\n\t\t\t\t\t</div>\n\t\t\t\t</li>";
-            }).join("") +
-            ("<li>\n\t\t\t\t\t<div class='total-val'>\n\t\t\t\t\t\t<p class='label'>Total</p>\n\t\t\t\t\t\t<p class='value'>" + total + "</p>\n\t\t\t\t\t</div>\n\t\t\t\t</li>\n\t\t\t</ul>");
+            })
+                .join("") +
+            ("<li>\n\t\t\t\t\t<div class='total-val'>\n\t\t\t\t\t\t<p class='label'>Total</p>\n\t\t\t\t\t\t<p class='value'>" + total + "</p>\n\t\t\t\t\t</div>\n\t\t\t\t</li>\n\t\t\t</ul>"));
     };
     return TooltipBar;
 }(Tooltip));

package/components/essentials/tooltip-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip-bar.js","sourceRoot":"","sources":["tooltip-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import { Tooltip } from \"./tooltip\";\nimport { Tools } from \"../../tools\";\nimport { DOMUtils } from \"../../services\";\nimport {\n\tTooltipPosition,\n\tTooltipTypes,\n\tCartesianOrientations,\n\tEvents\n} from \"./../../interfaces\";\n\n// import the settings for the css prefix\nimport settings from \"carbon-components/es/globals/js/settings\";\n\n// D3 Imports\nimport { select } from \"d3-selection\";\n\nexport class TooltipBar extends Tooltip {\n\tinit() {\n\t\t// Grab the tooltip element\n\t\tconst holder = select(this.services.domUtils.getHolder());\n\t\tconst chartprefix = Tools.getProperty(this.model.getOptions(), \"style\", \"prefix\");\n\t\tthis.tooltip = DOMUtils.appendOrSelect(holder, `div.${settings.prefix}--${chartprefix}--tooltip`);\n\n\t\t// Apply html content to the tooltip\n\t\tconst tooltipTextContainer = DOMUtils.appendOrSelect(this.tooltip, \"div.content-box\");\n\t\tthis.tooltip.style(\"max-width\", null);\n\n\t\t// listen to show-tooltip Custom Events to render the tooltip\n\t\tthis.services.events.addEventListener(Events.Tooltip.SHOW, e => {\n\t\t\t// check the type of tooltip and that it is enabled\n\t\t\tif ((e.detail.type === TooltipTypes.DATAPOINT && Tools.getProperty(this.model.getOptions(), \"tooltip\", \"datapoint\", \"enabled\"))\n\t\t\t\t|| (e.detail.type === TooltipTypes.GRIDLINE && Tools.getProperty(this.model.getOptions(), \"tooltip\", \"gridline\", \"enabled\")) ) {\n\n\t\t\t\tlet data = e.detail.hoveredElement.datum() as any;\n\t\t\t\tconst hoveredElement = e.detail.hoveredElement.node();\n\n\t\t\t\tlet defaultHTML;\n\t\t\t\tif (e.detail.multidata) {\n\t\t\t\t\t// multi tooltip\n\t\t\t\t\tdata = e.detail.multidata;\n\t\t\t\t\tdefaultHTML = this.getMultilineTooltipHTML(data);\n\t\t\t\t} else {\n\t\t\t\t\tif (e.detail.data) {\n\t\t\t\t\t\tdata = e.detail.data;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tdata = e.detail.hoveredElement.datum();\n\t\t\t\t\t}\n\n\t\t\t\t\tdefaultHTML = this.getTooltipHTML(data);\n\t\t\t\t}\n\n\t\t\t\t// if there is a provided tooltip HTML function call it and pass the defaultHTML\n\t\t\t\tif (Tools.getProperty(this.model.getOptions(), \"tooltip\", \"customHTML\")) {\n\t\t\t\t\ttooltipTextContainer.html(this.model.getOptions().tooltip.customHTML(data, defaultHTML));\n\t\t\t\t} else {\n\t\t\t\t\t// default tooltip\n\t\t\t\t\ttooltipTextContainer.html(defaultHTML);\n\t\t\t\t}\n\n\t\t\t\tconst position = this.getTooltipPosition(hoveredElement, data);\n\t\t\t\t// Position the tooltip relative to the bars\n\t\t\t\tthis.positionTooltip(e.detail.multidata ? undefined : position );\n\n\t\t\t} else if (e.detail.type === TooltipTypes.TITLE) {\n\t\t\t\t// use the chart size to enforce a max width on the tooltip\n\t\t\t\tconst chart = DOMUtils.appendOrSelect(holder, `svg.${settings.prefix}--${chartprefix}--chart-svg`);\n\t\t\t\t// use the configs to determine how large the tooltip should be\n\t\t\t\tconst tooltipMax =  DOMUtils.getSVGElementSize(chart).width * Tools.getProperty(this.model.getOptions(), \"tooltip\", \"title\", \"width\");\n\t\t\t\tthis.tooltip.style(\"max-width\", tooltipMax);\n\n\t\t\t\t// use tooltip.ts to get the tooltip html for titles\n\t\t\t\ttooltipTextContainer.html(super.getTooltipHTML(e.detail.hoveredElement, TooltipTypes.TITLE));\n\n\t\t\t\t// get the position based on the title positioning (static)\n\t\t\t\tconst position = super.getTooltipPosition(e.detail.hoveredElement.node());\n\t\t\t\tthis.positionTooltip(position);\n\t\t\t}\n\n\t\t\t// Fade in\n\t\t\tthis.tooltip.classed(\"hidden\", false);\n\t\t});\n\n\t\t// listen to hide-tooltip Custom Events to hide the tooltip\n\t\tthis.services.events.addEventListener(Events.Tooltip.HIDE, () => {\n\t\t\tthis.tooltip.classed(\"hidden\", true);\n\t\t});\n\t}\n\n\t/**\n\t * Get the position of the tooltip relative to the active hovered bar. Tooltip should appear above\n\t * positive valued data and below negative value data.\n\t * @param hoveredElement\n\t */\n\tgetTooltipPosition(hoveredElement, data?: any) {\n\t\tif (data === undefined) {\n\t\t\tdata = select(hoveredElement).datum() as any;\n\t\t}\n\n\t\tconst holderPosition = select(this.services.domUtils.getHolder()).node().getBoundingClientRect();\n\t\tconst barPosition = hoveredElement.getBoundingClientRect();\n\n\t\tconst { verticalOffset } = this.model.getOptions().tooltip.datapoint;\n\t\t// if there is a negative value bar chart, need to place the tooltip below the bar\n\t\tif (data.value <= 0) {\n\t\t\t// negative bars\n\t\t\tconst tooltipPos = {\n\t\t\t\tleft: (barPosition.left - holderPosition.left) + barPosition.width / 2,\n\t\t\t\ttop: (barPosition.bottom - holderPosition.top) + verticalOffset\n\t\t\t};\n\n\t\t\treturn {placement: TooltipPosition.BOTTOM, position: tooltipPos};\n\t\t} else {\n\t\t\t// positive bars\n\t\t\tconst tooltipPos = {\n\t\t\t\tleft: (barPosition.left - holderPosition.left) + barPosition.width / 2,\n\t\t\t\ttop: (barPosition.top - holderPosition.top) - verticalOffset\n\t\t\t};\n\n\t\t\treturn {placement: TooltipPosition.TOP, position: tooltipPos};\n\t\t}\n\t}\n\n\t/**\n\t * Returns the html for the bar single point tooltip\n\t * @param data associated values for the hovered bar\n\t */\n\tgetTooltipHTML(data: any) {\n\t\tconst formattedValue = Tools.getProperty(this.model.getOptions(), \"tooltip\", \"valueFormatter\") ?\n\t\tthis.model.getOptions().tooltip.valueFormatter(data.value) : data.value.toLocaleString(\"en\");\n\n\t\treturn `<div class=\"datapoint-tooltip\"><p class=\"value\">${formattedValue}</p></div>`;\n\t}\n\n\t/**\n\t * Multip tooltips for bar charts include totals for each stack\n\t * @param data\n\t */\n\tgetMultilineTooltipHTML(data: any) {\n\t\tconst points = data;\n\n\t\tpoints.reverse();\n\t\t// in a vertical bar chart the tooltip should display in order of the drawn bars\n\t\t// in horizontal stacked bar, the order of the segments from Left to Right are displayed top down in tooltip\n\t\tif (this.services.cartesianScales.getOrientation() === CartesianOrientations.VERTICAL) {\n\t\t\tpoints.reverse();\n\t\t}\n\n\t\t// get the total for the stacked tooltip\n\t\tlet total = points.reduce((sum, item) => sum + item.value, 0);\n\n\t\t// format the total value\n\t\ttotal = Tools.getProperty(this.model.getOptions(), \"tooltip\", \"valueFormatter\") ?\n\t\tthis.model.getOptions().tooltip.valueFormatter(total) : total.toLocaleString(\"en\");\n\n\t\treturn  \"<ul class='multi-tooltip'>\" +\n\t\t\tpoints.map(datapoint => {\n\t\t\t\tconst formattedValue = Tools.getProperty(this.model.getOptions(), \"tooltip\", \"valueFormatter\") ?\n\t\t\t\tthis.model.getOptions().tooltip.valueFormatter(datapoint.value) : datapoint.value.toLocaleString(\"en\");\n\n\t\t\t\t// For the tooltip color, we always want the normal stroke color, not dynamically determined by data value.\n\t\t\t\tconst indicatorColor = this.model.getStrokeColor(datapoint.datasetLabel, datapoint.label);\n\n\t\t\t\treturn `\n\t\t\t\t<li>\n\t\t\t\t\t<div class=\"datapoint-tooltip\">\n\t\t\t\t\t\t<a style=\"background-color:${indicatorColor}\" class=\"tooltip-color\"></a>\n\t\t\t\t\t\t<p class=\"label\">${datapoint.datasetLabel}</p>\n\t\t\t\t\t\t<p class=\"value\">${formattedValue}</p>\n\t\t\t\t\t</div>\n\t\t\t\t</li>`;\n\t\t\t}).join(\"\") +\n\t\t\t\t`<li>\n\t\t\t\t\t<div class='total-val'>\n\t\t\t\t\t\t<p class='label'>Total</p>\n\t\t\t\t\t\t<p class='value'>${total}</p>\n\t\t\t\t\t</div>\n\t\t\t\t</li>\n\t\t\t</ul>`;\n\t}\n}\n"]}
+{"version":3,"file":"tooltip-bar.js","sourceRoot":"","sources":["tooltip-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import { Tooltip } from \"./tooltip\";\nimport { Tools } from \"../../tools\";\nimport { DOMUtils } from \"../../services\";\nimport {\n\tTooltipPosition,\n\tTooltipTypes,\n\tCartesianOrientations,\n\tEvents\n} from \"./../../interfaces\";\n\n// import the settings for the css prefix\nimport settings from \"carbon-components/es/globals/js/settings\";\n\n// D3 Imports\nimport { select } from \"d3-selection\";\n\nexport class TooltipBar extends Tooltip {\n\tinit() {\n\t\t// Grab the tooltip element\n\t\tconst holder = select(this.services.domUtils.getHolder());\n\t\tconst chartprefix = Tools.getProperty(\n\t\t\tthis.model.getOptions(),\n\t\t\t\"style\",\n\t\t\t\"prefix\"\n\t\t);\n\t\tthis.tooltip = DOMUtils.appendOrSelect(\n\t\t\tholder,\n\t\t\t`div.${settings.prefix}--${chartprefix}--tooltip`\n\t\t);\n\n\t\t// Apply html content to the tooltip\n\t\tconst tooltipTextContainer = DOMUtils.appendOrSelect(\n\t\t\tthis.tooltip,\n\t\t\t\"div.content-box\"\n\t\t);\n\t\tthis.tooltip.style(\"max-width\", null);\n\n\t\t// listen to show-tooltip Custom Events to render the tooltip\n\t\tthis.services.events.addEventListener(Events.Tooltip.SHOW, e => {\n\t\t\t// check the type of tooltip and that it is enabled\n\t\t\tif (\n\t\t\t\t(e.detail.type === TooltipTypes.DATAPOINT &&\n\t\t\t\t\tTools.getProperty(\n\t\t\t\t\t\tthis.model.getOptions(),\n\t\t\t\t\t\t\"tooltip\",\n\t\t\t\t\t\t\"datapoint\",\n\t\t\t\t\t\t\"enabled\"\n\t\t\t\t\t)) ||\n\t\t\t\t(e.detail.type === TooltipTypes.GRIDLINE &&\n\t\t\t\t\tTools.getProperty(\n\t\t\t\t\t\tthis.model.getOptions(),\n\t\t\t\t\t\t\"tooltip\",\n\t\t\t\t\t\t\"gridline\",\n\t\t\t\t\t\t\"enabled\"\n\t\t\t\t\t))\n\t\t\t) {\n\t\t\t\tlet data = e.detail.hoveredElement.datum() as any;\n\t\t\t\tconst hoveredElement = e.detail.hoveredElement.node();\n\n\t\t\t\tlet defaultHTML;\n\t\t\t\tif (e.detail.multidata) {\n\t\t\t\t\t// multi tooltip\n\t\t\t\t\tdata = e.detail.multidata;\n\t\t\t\t\tdefaultHTML = this.getMultilineTooltipHTML(data);\n\t\t\t\t} else {\n\t\t\t\t\tif (e.detail.data) {\n\t\t\t\t\t\tdata = e.detail.data;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tdata = e.detail.hoveredElement.datum();\n\t\t\t\t\t}\n\n\t\t\t\t\tdefaultHTML = this.getTooltipHTML(data);\n\t\t\t\t}\n\n\t\t\t\t// if there is a provided tooltip HTML function call it and pass the defaultHTML\n\t\t\t\tif (\n\t\t\t\t\tTools.getProperty(\n\t\t\t\t\t\tthis.model.getOptions(),\n\t\t\t\t\t\t\"tooltip\",\n\t\t\t\t\t\t\"customHTML\"\n\t\t\t\t\t)\n\t\t\t\t) {\n\t\t\t\t\ttooltipTextContainer.html(\n\t\t\t\t\t\tthis.model\n\t\t\t\t\t\t\t.getOptions()\n\t\t\t\t\t\t\t.tooltip.customHTML(data, defaultHTML)\n\t\t\t\t\t);\n\t\t\t\t} else {\n\t\t\t\t\t// default tooltip\n\t\t\t\t\ttooltipTextContainer.html(defaultHTML);\n\t\t\t\t}\n\n\t\t\t\tconst position = this.getTooltipPosition(hoveredElement, data);\n\t\t\t\t// Position the tooltip relative to the bars\n\t\t\t\tthis.positionTooltip(e.detail.multidata ? undefined : position);\n\t\t\t} else if (e.detail.type === TooltipTypes.TITLE) {\n\t\t\t\t// use the chart size to enforce a max width on the tooltip\n\t\t\t\tconst chart = DOMUtils.appendOrSelect(\n\t\t\t\t\tholder,\n\t\t\t\t\t`svg.${settings.prefix}--${chartprefix}--chart-svg`\n\t\t\t\t);\n\t\t\t\t// use the configs to determine how large the tooltip should be\n\t\t\t\tconst tooltipMax =\n\t\t\t\t\tDOMUtils.getSVGElementSize(chart).width *\n\t\t\t\t\tTools.getProperty(\n\t\t\t\t\t\tthis.model.getOptions(),\n\t\t\t\t\t\t\"tooltip\",\n\t\t\t\t\t\t\"title\",\n\t\t\t\t\t\t\"width\"\n\t\t\t\t\t);\n\t\t\t\tthis.tooltip.style(\"max-width\", tooltipMax);\n\n\t\t\t\t// use tooltip.ts to get the tooltip html for titles\n\t\t\t\ttooltipTextContainer.html(\n\t\t\t\t\tsuper.getTooltipHTML(\n\t\t\t\t\t\te.detail.hoveredElement,\n\t\t\t\t\t\tTooltipTypes.TITLE\n\t\t\t\t\t)\n\t\t\t\t);\n\n\t\t\t\t// get the position based on the title positioning (static)\n\t\t\t\tconst position = super.getTooltipPosition(\n\t\t\t\t\te.detail.hoveredElement.node()\n\t\t\t\t);\n\t\t\t\tthis.positionTooltip(position);\n\t\t\t}\n\n\t\t\t// Fade in\n\t\t\tthis.tooltip.classed(\"hidden\", false);\n\t\t});\n\n\t\t// listen to hide-tooltip Custom Events to hide the tooltip\n\t\tthis.services.events.addEventListener(Events.Tooltip.HIDE, () => {\n\t\t\tthis.tooltip.classed(\"hidden\", true);\n\t\t});\n\t}\n\n\t/**\n\t * Get the position of the tooltip relative to the active hovered bar. Tooltip should appear above\n\t * positive valued data and below negative value data.\n\t * @param hoveredElement\n\t */\n\tgetTooltipPosition(hoveredElement, data?: any) {\n\t\tif (data === undefined) {\n\t\t\tdata = select(hoveredElement).datum() as any;\n\t\t}\n\n\t\tconst holderPosition = select(this.services.domUtils.getHolder())\n\t\t\t.node()\n\t\t\t.getBoundingClientRect();\n\t\tconst barPosition = hoveredElement.getBoundingClientRect();\n\n\t\tconst { verticalOffset } = this.model.getOptions().tooltip.datapoint;\n\t\t// if there is a negative value bar chart, need to place the tooltip below the bar\n\t\tif (data.value <= 0) {\n\t\t\t// negative bars\n\t\t\tconst tooltipPos = {\n\t\t\t\tleft:\n\t\t\t\t\tbarPosition.left -\n\t\t\t\t\tholderPosition.left +\n\t\t\t\t\tbarPosition.width / 2,\n\t\t\t\ttop: barPosition.bottom - holderPosition.top + verticalOffset\n\t\t\t};\n\n\t\t\treturn { placement: TooltipPosition.BOTTOM, position: tooltipPos };\n\t\t} else {\n\t\t\t// positive bars\n\t\t\tconst tooltipPos = {\n\t\t\t\tleft:\n\t\t\t\t\tbarPosition.left -\n\t\t\t\t\tholderPosition.left +\n\t\t\t\t\tbarPosition.width / 2,\n\t\t\t\ttop: barPosition.top - holderPosition.top - verticalOffset\n\t\t\t};\n\n\t\t\treturn { placement: TooltipPosition.TOP, position: tooltipPos };\n\t\t}\n\t}\n\n\t/**\n\t * Returns the html for the bar single point tooltip\n\t * @param data associated values for the hovered bar\n\t */\n\tgetTooltipHTML(data: any) {\n\t\tconst formattedValue = Tools.getProperty(\n\t\t\tthis.model.getOptions(),\n\t\t\t\"tooltip\",\n\t\t\t\"valueFormatter\"\n\t\t)\n\t\t\t? this.model.getOptions().tooltip.valueFormatter(data.value)\n\t\t\t: data.value.toLocaleString(\"en\");\n\n\t\treturn `<div class=\"datapoint-tooltip\"><p class=\"value\">${formattedValue}</p></div>`;\n\t}\n\n\t/**\n\t * Multip tooltips for bar charts include totals for each stack\n\t * @param data\n\t */\n\tgetMultilineTooltipHTML(data: any) {\n\t\tconst points = data;\n\n\t\tpoints.reverse();\n\t\t// in a vertical bar chart the tooltip should display in order of the drawn bars\n\t\t// in horizontal stacked bar, the order of the segments from Left to Right are displayed top down in tooltip\n\t\tif (\n\t\t\tthis.services.cartesianScales.getOrientation() ===\n\t\t\tCartesianOrientations.VERTICAL\n\t\t) {\n\t\t\tpoints.reverse();\n\t\t}\n\n\t\t// get the total for the stacked tooltip\n\t\tlet total = points.reduce((sum, item) => sum + item.value, 0);\n\n\t\t// format the total value\n\t\ttotal = Tools.getProperty(\n\t\t\tthis.model.getOptions(),\n\t\t\t\"tooltip\",\n\t\t\t\"valueFormatter\"\n\t\t)\n\t\t\t? this.model.getOptions().tooltip.valueFormatter(total)\n\t\t\t: total.toLocaleString(\"en\");\n\n\t\treturn (\n\t\t\t\"<ul class='multi-tooltip'>\" +\n\t\t\tpoints\n\t\t\t\t.map(datapoint => {\n\t\t\t\t\tconst formattedValue = Tools.getProperty(\n\t\t\t\t\t\tthis.model.getOptions(),\n\t\t\t\t\t\t\"tooltip\",\n\t\t\t\t\t\t\"valueFormatter\"\n\t\t\t\t\t)\n\t\t\t\t\t\t? this.model\n\t\t\t\t\t\t\t\t.getOptions()\n\t\t\t\t\t\t\t\t.tooltip.valueFormatter(datapoint.value)\n\t\t\t\t\t\t: datapoint.value.toLocaleString(\"en\");\n\n\t\t\t\t\t// For the tooltip color, we always want the normal stroke color, not dynamically determined by data value.\n\t\t\t\t\tconst indicatorColor = this.model.getStrokeColor(\n\t\t\t\t\t\tdatapoint.datasetLabel,\n\t\t\t\t\t\tdatapoint.label\n\t\t\t\t\t);\n\n\t\t\t\t\treturn `\n\t\t\t\t<li>\n\t\t\t\t\t<div class=\"datapoint-tooltip\">\n\t\t\t\t\t\t<a style=\"background-color:${indicatorColor}\" class=\"tooltip-color\"></a>\n\t\t\t\t\t\t<p class=\"label\">${datapoint.datasetLabel}</p>\n\t\t\t\t\t\t<p class=\"value\">${formattedValue}</p>\n\t\t\t\t\t</div>\n\t\t\t\t</li>`;\n\t\t\t\t})\n\t\t\t\t.join(\"\") +\n\t\t\t`<li>\n\t\t\t\t\t<div class='total-val'>\n\t\t\t\t\t\t<p class='label'>Total</p>\n\t\t\t\t\t\t<p class='value'>${total}</p>\n\t\t\t\t\t</div>\n\t\t\t\t</li>\n\t\t\t</ul>`\n\t\t);\n\t}\n}\n"]}

package/components/essentials/tooltip-pie.js

@@ -28,11 +28,12 @@ var TooltipPie = /** @class */ (function (_super) {
         var dataVal = d.data;
         var groupMapsTo = this.model.getOptions().data.groupMapsTo;
         // format the value if needed
-        var formattedValue = Tools.getProperty(this.model.getOptions(), "tooltip", "valueFormatter") ?
-            this.model.getOptions().tooltip.valueFormatter(dataVal.value) : dataVal.value.toLocaleString("en");
+        var formattedValue = Tools.getProperty(this.model.getOptions(), "tooltip", "valueFormatter")
+            ? this.model.getOptions().tooltip.valueFormatter(dataVal.value)
+            : dataVal.value.toLocaleString("en");
         // pie charts don't have a dataset label since they only support one dataset
         var label = dataVal[groupMapsTo];
-        return ("<div class=\"datapoint-tooltip\">\n\t\t\t\t<p class=\"label\">" + label + "</p>\n\t\t\t\t<p class=\"value\">" + formattedValue + "</p>\n\t\t\t</div>");
+        return "<div class=\"datapoint-tooltip\">\n\t\t\t\t<p class=\"label\">" + label + "</p>\n\t\t\t\t<p class=\"value\">" + formattedValue + "</p>\n\t\t\t</div>";
     };
     return TooltipPie;
 }(Tooltip));

package/components/essentials/tooltip-pie.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip-pie.js","sourceRoot":"","sources":["tooltip-pie.ts"],"names":[],"mappings":";;;;;;;;;;;;;AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD;IAAgC,8BAAO;IAAvC;;IAyBA,CAAC;IAxBA,mCAAc,GAAd,UAAe,CAAM,EAAE,IAAkB;QACxC,mDAAmD;QACnD,IAAI,IAAI,KAAK,YAAY,CAAC,KAAK,EAAE;YAChC,IAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC,KAAK,CAAC;YAC5C,OAAO,wCAAoC,KAAK,kBAAe,CAAC;SAChE;QAED,IAAM,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC;QACf,IAAA,sDAAW,CAAkC;QAErD,6BAA6B;QAC7B,IAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,EAAE,SAAS,EAAE,gBAAgB,CAAC,CAAC,CAAC;YAChG,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC,OAAO,CAAC,cAAc,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;QAEnG,4EAA4E;QAC5E,IAAM,KAAK,GAAG,OAAO,CAAC,WAAW,CAAC,CAAC;QAEnC,OAAO,CACN,mEACoB,KAAK,yCACL,cAAc,uBAC3B,CACP,CAAC;IACH,CAAC;IACF,iBAAC;AAAD,CAAC,AAzBD,CAAgC,OAAO,GAyBtC","sourcesContent":["import { Tooltip } from \"./tooltip\";\nimport { Tools } from \"../../tools\";\nimport { TooltipTypes } from \"../../interfaces\";\n\nexport class TooltipPie extends Tooltip {\n\tgetTooltipHTML(d: any, type: TooltipTypes) {\n\t\t// check if it is getting styles for a tooltip type\n\t\tif (type === TooltipTypes.TITLE) {\n\t\t\tconst title = this.model.getOptions().title;\n\t\t\treturn `<div class=\"title-tooltip\"><text>${title}</text></div>`;\n\t\t}\n\n\t\tconst dataVal = d.data;\n\t\tconst { groupMapsTo } = this.model.getOptions().data;\n\n\t\t// format the value if needed\n\t\tconst formattedValue = Tools.getProperty(this.model.getOptions(), \"tooltip\", \"valueFormatter\") ?\n\t\tthis.model.getOptions().tooltip.valueFormatter(dataVal.value) : dataVal.value.toLocaleString(\"en\");\n\n\t\t// pie charts don't have a dataset label since they only support one dataset\n\t\tconst label = dataVal[groupMapsTo];\n\n\t\treturn (\n\t\t\t`<div class=\"datapoint-tooltip\">\n\t\t\t\t<p class=\"label\">${label}</p>\n\t\t\t\t<p class=\"value\">${formattedValue}</p>\n\t\t\t</div>`\n\t\t);\n\t}\n}\n"]}
+{"version":3,"file":"tooltip-pie.js","sourceRoot":"","sources":["tooltip-pie.ts"],"names":[],"mappings":";;;;;;;;;;;;;AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD;IAAgC,8BAAO;IAAvC;;IA4BA,CAAC;IA3BA,mCAAc,GAAd,UAAe,CAAM,EAAE,IAAkB;QACxC,mDAAmD;QACnD,IAAI,IAAI,KAAK,YAAY,CAAC,KAAK,EAAE;YAChC,IAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC,KAAK,CAAC;YAC5C,OAAO,wCAAoC,KAAK,kBAAe,CAAC;SAChE;QAED,IAAM,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC;QACf,IAAA,sDAAW,CAAkC;QAErD,6BAA6B;QAC7B,IAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CACvC,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,EACvB,SAAS,EACT,gBAAgB,CAChB;YACA,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC,OAAO,CAAC,cAAc,CAAC,OAAO,CAAC,KAAK,CAAC;YAC/D,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;QAEtC,4EAA4E;QAC5E,IAAM,KAAK,GAAG,OAAO,CAAC,WAAW,CAAC,CAAC;QAEnC,OAAO,mEACc,KAAK,yCACL,cAAc,uBAC3B,CAAC;IACV,CAAC;IACF,iBAAC;AAAD,CAAC,AA5BD,CAAgC,OAAO,GA4BtC","sourcesContent":["import { Tooltip } from \"./tooltip\";\nimport { Tools } from \"../../tools\";\nimport { TooltipTypes } from \"../../interfaces\";\n\nexport class TooltipPie extends Tooltip {\n\tgetTooltipHTML(d: any, type: TooltipTypes) {\n\t\t// check if it is getting styles for a tooltip type\n\t\tif (type === TooltipTypes.TITLE) {\n\t\t\tconst title = this.model.getOptions().title;\n\t\t\treturn `<div class=\"title-tooltip\"><text>${title}</text></div>`;\n\t\t}\n\n\t\tconst dataVal = d.data;\n\t\tconst { groupMapsTo } = this.model.getOptions().data;\n\n\t\t// format the value if needed\n\t\tconst formattedValue = Tools.getProperty(\n\t\t\tthis.model.getOptions(),\n\t\t\t\"tooltip\",\n\t\t\t\"valueFormatter\"\n\t\t)\n\t\t\t? this.model.getOptions().tooltip.valueFormatter(dataVal.value)\n\t\t\t: dataVal.value.toLocaleString(\"en\");\n\n\t\t// pie charts don't have a dataset label since they only support one dataset\n\t\tconst label = dataVal[groupMapsTo];\n\n\t\treturn `<div class=\"datapoint-tooltip\">\n\t\t\t\t<p class=\"label\">${label}</p>\n\t\t\t\t<p class=\"value\">${formattedValue}</p>\n\t\t\t</div>`;\n\t}\n}\n"]}

package/components/essentials/tooltip-radar.js

@@ -25,8 +25,9 @@ var TooltipRadar = /** @class */ (function (_super) {
         var _a = options.radar.axes, angle = _a.angle, value = _a.value;
         // sort them so they are in the same order as the graph
         data.sort(function (a, b) { return b[value] - a[value]; });
-        return "<ul class='multi-tooltip'>" +
-            data.map(function (datum) {
+        return ("<ul class='multi-tooltip'>" +
+            data
+                .map(function (datum) {
                 var userProvidedValueFormatter = Tools.getProperty(options, "tooltip", "valueFormatter");
                 var formattedValue = userProvidedValueFormatter
                     ? userProvidedValueFormatter(datum[value])
@@ -34,7 +35,9 @@ var TooltipRadar = /** @class */ (function (_super) {
                 // For the tooltip color, we always want the normal stroke color, not dynamically determined by data value.
                 var indicatorColor = _this.model.getStrokeColor(datum[groupMapsTo]);
                 return "\n\t\t\t\t<li>\n\t\t\t\t\t<div class=\"datapoint-tooltip\">\n\t\t\t\t\t\t<a style=\"background-color:" + indicatorColor + "\" class=\"tooltip-color\"></a>\n\t\t\t\t\t\t<p class=\"label\">" + datum[groupMapsTo] + "</p>\n\t\t\t\t\t\t<p class=\"value\">" + formattedValue + "</p>\n\t\t\t\t\t</div>\n\t\t\t\t</li>";
-            }).join("") + "</ul>";
+            })
+                .join("") +
+            "</ul>");
     };
     return TooltipRadar;
 }(Tooltip));

package/components/essentials/tooltip-radar.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip-radar.js","sourceRoot":"","sources":["tooltip-radar.ts"],"names":[],"mappings":";;;;;;;;;;;;;AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC;IAAkC,gCAAO;IAAzC;;IA6BA,CAAC;IA5BA,8CAAuB,GAAvB,UAAwB,IAAS;QAAjC,iBA2BC;QA1BA,IAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;QAChC,IAAA,sCAAW,CAAkB;QAC/B,IAAA,uBAAqC,EAAnC,gBAAK,EAAE,gBAA4B,CAAC;QAE5C,uDAAuD;QACvD,IAAI,CAAC,IAAI,CAAC,UAAC,CAAC,EAAE,CAAC,IAAK,OAAA,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,EAAnB,CAAmB,CAAC,CAAC;QAEzC,OAAQ,4BAA4B;YACnC,IAAI,CAAC,GAAG,CAAC,UAAA,KAAK;gBACb,IAAM,0BAA0B,GAAG,KAAK,CAAC,WAAW,CAAC,OAAO,EAAE,SAAS,EAAE,gBAAgB,CAAC,CAAC;gBAC3F,IAAM,cAAc,GAAG,0BAA0B;oBAChD,CAAC,CAAC,0BAA0B,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;oBAC1C,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;gBAEhB,2GAA2G;gBAC3G,IAAM,cAAc,GAAG,KAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;gBAErE,OAAO,0GAGwB,cAAc,wEACxB,KAAK,CAAC,WAAW,CAAC,6CAClB,cAAc,0CAE7B,CAAC;YACR,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,OAAO,CAAC;IACxB,CAAC;IACF,mBAAC;AAAD,CAAC,AA7BD,CAAkC,OAAO,GA6BxC","sourcesContent":["import { Tooltip } from \"./tooltip\";\nimport { Tools } from \"../../tools\";\n\nexport class TooltipRadar extends Tooltip {\n\tgetMultilineTooltipHTML(data: any) {\n\t\tconst options = this.model.getOptions();\n\t\tconst { groupMapsTo } = options.data;\n\t\tconst { angle, value } = options.radar.axes;\n\n\t\t// sort them so they are in the same order as the graph\n\t\tdata.sort((a, b) => b[value] - a[value]);\n\n\t\treturn  \"<ul class='multi-tooltip'>\" +\n\t\t\tdata.map(datum => {\n\t\t\t\tconst userProvidedValueFormatter = Tools.getProperty(options, \"tooltip\", \"valueFormatter\");\n\t\t\t\tconst formattedValue = userProvidedValueFormatter\n\t\t\t\t\t? userProvidedValueFormatter(datum[value])\n\t\t\t\t\t: datum[value];\n\n\t\t\t\t// For the tooltip color, we always want the normal stroke color, not dynamically determined by data value.\n\t\t\t\tconst indicatorColor = this.model.getStrokeColor(datum[groupMapsTo]);\n\n\t\t\t\treturn `\n\t\t\t\t<li>\n\t\t\t\t\t<div class=\"datapoint-tooltip\">\n\t\t\t\t\t\t<a style=\"background-color:${indicatorColor}\" class=\"tooltip-color\"></a>\n\t\t\t\t\t\t<p class=\"label\">${datum[groupMapsTo]}</p>\n\t\t\t\t\t\t<p class=\"value\">${formattedValue}</p>\n\t\t\t\t\t</div>\n\t\t\t\t</li>`;\n\t\t\t}).join(\"\") + \"</ul>\";\n\t}\n}\n"]}
+{"version":3,"file":"tooltip-radar.js","sourceRoot":"","sources":["tooltip-radar.ts"],"names":[],"mappings":";;;;;;;;;;;;;AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC;IAAkC,gCAAO;IAAzC;;IAwCA,CAAC;IAvCA,8CAAuB,GAAvB,UAAwB,IAAS;QAAjC,iBAsCC;QArCA,IAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;QAChC,IAAA,sCAAW,CAAkB;QAC/B,IAAA,uBAAqC,EAAnC,gBAAK,EAAE,gBAA4B,CAAC;QAE5C,uDAAuD;QACvD,IAAI,CAAC,IAAI,CAAC,UAAC,CAAC,EAAE,CAAC,IAAK,OAAA,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,EAAnB,CAAmB,CAAC,CAAC;QAEzC,OAAO,CACN,4BAA4B;YAC5B,IAAI;iBACF,GAAG,CAAC,UAAA,KAAK;gBACT,IAAM,0BAA0B,GAAG,KAAK,CAAC,WAAW,CACnD,OAAO,EACP,SAAS,EACT,gBAAgB,CAChB,CAAC;gBACF,IAAM,cAAc,GAAG,0BAA0B;oBAChD,CAAC,CAAC,0BAA0B,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;oBAC1C,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;gBAEhB,2GAA2G;gBAC3G,IAAM,cAAc,GAAG,KAAI,CAAC,KAAK,CAAC,cAAc,CAC/C,KAAK,CAAC,WAAW,CAAC,CAClB,CAAC;gBAEF,OAAO,0GAGuB,cAAc,wEACxB,KAAK,CAAC,WAAW,CAAC,6CAClB,cAAc,0CAE7B,CAAC;YACP,CAAC,CAAC;iBACD,IAAI,CAAC,EAAE,CAAC;YACV,OAAO,CACP,CAAC;IACH,CAAC;IACF,mBAAC;AAAD,CAAC,AAxCD,CAAkC,OAAO,GAwCxC","sourcesContent":["import { Tooltip } from \"./tooltip\";\nimport { Tools } from \"../../tools\";\n\nexport class TooltipRadar extends Tooltip {\n\tgetMultilineTooltipHTML(data: any) {\n\t\tconst options = this.model.getOptions();\n\t\tconst { groupMapsTo } = options.data;\n\t\tconst { angle, value } = options.radar.axes;\n\n\t\t// sort them so they are in the same order as the graph\n\t\tdata.sort((a, b) => b[value] - a[value]);\n\n\t\treturn (\n\t\t\t\"<ul class='multi-tooltip'>\" +\n\t\t\tdata\n\t\t\t\t.map(datum => {\n\t\t\t\t\tconst userProvidedValueFormatter = Tools.getProperty(\n\t\t\t\t\t\toptions,\n\t\t\t\t\t\t\"tooltip\",\n\t\t\t\t\t\t\"valueFormatter\"\n\t\t\t\t\t);\n\t\t\t\t\tconst formattedValue = userProvidedValueFormatter\n\t\t\t\t\t\t? userProvidedValueFormatter(datum[value])\n\t\t\t\t\t\t: datum[value];\n\n\t\t\t\t\t// For the tooltip color, we always want the normal stroke color, not dynamically determined by data value.\n\t\t\t\t\tconst indicatorColor = this.model.getStrokeColor(\n\t\t\t\t\t\tdatum[groupMapsTo]\n\t\t\t\t\t);\n\n\t\t\t\t\treturn `\n\t\t\t\t<li>\n\t\t\t\t\t<div class=\"datapoint-tooltip\">\n\t\t\t\t\t\t<a style=\"background-color:${indicatorColor}\" class=\"tooltip-color\"></a>\n\t\t\t\t\t\t<p class=\"label\">${datum[groupMapsTo]}</p>\n\t\t\t\t\t\t<p class=\"value\">${formattedValue}</p>\n\t\t\t\t\t</div>\n\t\t\t\t</li>`;\n\t\t\t\t})\n\t\t\t\t.join(\"\") +\n\t\t\t\"</ul>\"\n\t\t);\n\t}\n}\n"]}

package/components/essentials/tooltip-scatter.js

@@ -27,7 +27,9 @@ var TooltipScatter = /** @class */ (function (_super) {
         var groupMapsTo = this.model.getOptions().data.groupMapsTo;
         var rangeIdentifier = this.services.cartesianScales.getRangeIdentifier();
         var userProvidedValueFormatter = Tools.getProperty(this.model.getOptions(), "tooltip", "valueFormatter");
-        var formattedValue = userProvidedValueFormatter ? userProvidedValueFormatter(datum[rangeIdentifier]) : datum[rangeIdentifier].toLocaleString("en");
+        var formattedValue = userProvidedValueFormatter
+            ? userProvidedValueFormatter(datum[rangeIdentifier])
+            : datum[rangeIdentifier].toLocaleString("en");
         // For the tooltip color, we always want the normal stroke color, not dynamically determined by data value.
         var indicatorColor = this.model.getStrokeColor(datum[groupMapsTo]);
         return "\n\t\t\t<div class=\"datapoint-tooltip\">\n\t\t\t\t<a style=\"background-color:" + indicatorColor + "\" class=\"tooltip-color\"></a>\n\t\t\t\t<p class=\"label\">" + datum[groupMapsTo] + "</p>\n\t\t\t\t<p class=\"value\">" + formattedValue + "</p>\n\t\t\t</div>";

package/components/essentials/tooltip-scatter.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip-scatter.js","sourceRoot":"","sources":["tooltip-scatter.ts"],"names":[],"mappings":";;;;;;;;;;;;;AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAElD;IAAoC,kCAAO;IAA3C;;IAuBA,CAAC;IAtBA,uCAAc,GAAd,UAAe,KAAU,EAAE,IAAkB;QAC5C,IAAI,IAAI,KAAK,YAAY,CAAC,KAAK,EAAE;YAChC,kDAAkD;YAClD,OAAO,iBAAM,cAAc,YAAC,KAAK,EAAE,IAAI,CAAC,CAAC;SACzC;QAEO,IAAA,sDAAW,CAAkC;QACrD,IAAM,eAAe,GAAG,IAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,kBAAkB,EAAE,CAAC;QAE3E,IAAM,0BAA0B,GAAG,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,EAAE,SAAS,EAAE,gBAAgB,CAAC,CAAC;QAC3G,IAAM,cAAc,GAAG,0BAA0B,CAAC,CAAC,CAAC,0BAA0B,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;QAErJ,2GAA2G;QAC3G,IAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;QAErE,OAAO,oFAEwB,cAAc,oEACxB,KAAK,CAAC,WAAW,CAAC,yCAClB,cAAc,uBAC3B,CAAC;IACV,CAAC;IACF,qBAAC;AAAD,CAAC,AAvBD,CAAoC,OAAO,GAuB1C","sourcesContent":["import { Tooltip } from \"./tooltip\";\nimport { Tools } from \"../../tools\";\nimport { TooltipTypes } from \"./../../interfaces\";\n\nexport class TooltipScatter extends Tooltip {\n\tgetTooltipHTML(datum: any, type: TooltipTypes) {\n\t\tif (type === TooltipTypes.TITLE) {\n\t\t\t// the main tooltip component handles title styles\n\t\t\treturn super.getTooltipHTML(datum, type);\n\t\t}\n\n\t\tconst { groupMapsTo } = this.model.getOptions().data;\n\t\tconst rangeIdentifier = this.services.cartesianScales.getRangeIdentifier();\n\n\t\tconst userProvidedValueFormatter = Tools.getProperty(this.model.getOptions(), \"tooltip\", \"valueFormatter\");\n\t\tconst formattedValue = userProvidedValueFormatter ? userProvidedValueFormatter(datum[rangeIdentifier]) : datum[rangeIdentifier].toLocaleString(\"en\");\n\n\t\t// For the tooltip color, we always want the normal stroke color, not dynamically determined by data value.\n\t\tconst indicatorColor = this.model.getStrokeColor(datum[groupMapsTo]);\n\n\t\treturn `\n\t\t\t<div class=\"datapoint-tooltip\">\n\t\t\t\t<a style=\"background-color:${indicatorColor}\" class=\"tooltip-color\"></a>\n\t\t\t\t<p class=\"label\">${datum[groupMapsTo]}</p>\n\t\t\t\t<p class=\"value\">${formattedValue}</p>\n\t\t\t</div>`;\n\t}\n}\n"]}
+{"version":3,"file":"tooltip-scatter.js","sourceRoot":"","sources":["tooltip-scatter.ts"],"names":[],"mappings":";;;;;;;;;;;;;AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAElD;IAAoC,kCAAO;IAA3C;;IA6BA,CAAC;IA5BA,uCAAc,GAAd,UAAe,KAAU,EAAE,IAAkB;QAC5C,IAAI,IAAI,KAAK,YAAY,CAAC,KAAK,EAAE;YAChC,kDAAkD;YAClD,OAAO,iBAAM,cAAc,YAAC,KAAK,EAAE,IAAI,CAAC,CAAC;SACzC;QAEO,IAAA,sDAAW,CAAkC;QACrD,IAAM,eAAe,GAAG,IAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,kBAAkB,EAAE,CAAC;QAE3E,IAAM,0BAA0B,GAAG,KAAK,CAAC,WAAW,CACnD,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,EACvB,SAAS,EACT,gBAAgB,CAChB,CAAC;QACF,IAAM,cAAc,GAAG,0BAA0B;YAChD,CAAC,CAAC,0BAA0B,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;YACpD,CAAC,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;QAE/C,2GAA2G;QAC3G,IAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;QAErE,OAAO,oFAEwB,cAAc,oEACxB,KAAK,CAAC,WAAW,CAAC,yCAClB,cAAc,uBAC3B,CAAC;IACV,CAAC;IACF,qBAAC;AAAD,CAAC,AA7BD,CAAoC,OAAO,GA6B1C","sourcesContent":["import { Tooltip } from \"./tooltip\";\nimport { Tools } from \"../../tools\";\nimport { TooltipTypes } from \"./../../interfaces\";\n\nexport class TooltipScatter extends Tooltip {\n\tgetTooltipHTML(datum: any, type: TooltipTypes) {\n\t\tif (type === TooltipTypes.TITLE) {\n\t\t\t// the main tooltip component handles title styles\n\t\t\treturn super.getTooltipHTML(datum, type);\n\t\t}\n\n\t\tconst { groupMapsTo } = this.model.getOptions().data;\n\t\tconst rangeIdentifier = this.services.cartesianScales.getRangeIdentifier();\n\n\t\tconst userProvidedValueFormatter = Tools.getProperty(\n\t\t\tthis.model.getOptions(),\n\t\t\t\"tooltip\",\n\t\t\t\"valueFormatter\"\n\t\t);\n\t\tconst formattedValue = userProvidedValueFormatter\n\t\t\t? userProvidedValueFormatter(datum[rangeIdentifier])\n\t\t\t: datum[rangeIdentifier].toLocaleString(\"en\");\n\n\t\t// For the tooltip color, we always want the normal stroke color, not dynamically determined by data value.\n\t\tconst indicatorColor = this.model.getStrokeColor(datum[groupMapsTo]);\n\n\t\treturn `\n\t\t\t<div class=\"datapoint-tooltip\">\n\t\t\t\t<a style=\"background-color:${indicatorColor}\" class=\"tooltip-color\"></a>\n\t\t\t\t<p class=\"label\">${datum[groupMapsTo]}</p>\n\t\t\t\t<p class=\"value\">${formattedValue}</p>\n\t\t\t</div>`;\n\t}\n}\n"]}