@carbon/charts 1.7.6 → 1.9.0-rc.0

package/components/essentials/threshold.js

@@ -1,306 +0,0 @@
-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 * as Tools from '../../tools';
-import { DOMUtils } from '../../services';
-import { AxisPositions, Events, RenderTypes, ScaleTypes, } from '../../interfaces';
-// D3 Imports
-// @ts-ignore
-// ts-ignore is needed because `@types/d3`
-// is missing the `pointer` function
-import { select, pointer } from 'd3-selection';
-// Carbon position service
-import Position, { PLACEMENTS } from '@carbon/utils-position';
-// import the settings for the css prefix
-import { carbonPrefix } from '../../configuration-non-customizable';
-import { formatTick, computeTimeIntervalName, } from '../../services/time-series';
-var Threshold = /** @class */ (function (_super) {
-    __extends(Threshold, _super);
-    function Threshold(model, services) {
-        var _this = _super.call(this, model, services) || this;
-        _this.type = 'threshold';
-        _this.renderType = RenderTypes.SVG;
-        _this.positionService = new Position();
-        return _this;
-    }
-    Threshold.prototype.render = function (animate) {
-        var _this = this;
-        if (animate === void 0) { animate = false; }
-        var axesOptions = Tools.getProperty(this.getOptions(), 'axes');
-        var thresholdData = [];
-        Object.keys(axesOptions).forEach(function (axisPosition) {
-            var _a, _b;
-            if (Object.values(AxisPositions).includes(axisPosition)) {
-                var axisOptions = axesOptions[axisPosition];
-                if (axisOptions.thresholds &&
-                    axisOptions.thresholds.length > 0) {
-                    thresholdData.push({
-                        axisPosition: axisPosition,
-                        thresholds: axisOptions.thresholds,
-                        correspondingDatasets: (_a = axisOptions) === null || _a === void 0 ? void 0 : _a.correspondingDatasets,
-                        mapsTo: (_b = axisOptions) === null || _b === void 0 ? void 0 : _b.mapsTo,
-                    });
-                }
-            }
-        });
-        // Grab container SVG
-        var svg = this.getComponentContainer({ withinChartClip: true });
-        // Update data on all axis threshold groups
-        var thresholdAxisGroups = svg
-            .selectAll('g.axis-thresholds')
-            .data(thresholdData, function (thresholdData) { return thresholdData.axisPosition; });
-        // Remove axis threshold groups that are no longer needed
-        thresholdAxisGroups.exit().attr('opacity', 0).remove();
-        // Add the axis threshold groups that need to be introduced
-        var thresholdAxisGroupsEnter = thresholdAxisGroups
-            .enter()
-            .append('g');
-        var thresholdAxisGroupsMerge = thresholdAxisGroupsEnter.merge(thresholdAxisGroups);
-        thresholdAxisGroupsMerge.attr('class', function (d) { return "axis-thresholds " + d.axisPosition; });
-        var thresholdGroups = thresholdAxisGroupsMerge
-            .selectAll('g.threshold-group')
-            .data(function (d) {
-            return d.thresholds.map(function (threshold) {
-                // Merge relevant keys into the threshold object
-                threshold.axisPosition = d.axisPosition;
-                threshold.datum = _this.constructDatumObj(d, threshold);
-                return threshold;
-            });
-        });
-        // Remove threshold groups that are no longer needed
-        thresholdGroups.exit().attr('opacity', 0).remove();
-        // Add the threshold groups that need to be introduced
-        var thresholdGroupsEnter = thresholdGroups.enter().append('g');
-        thresholdGroupsEnter.append('line').attr('class', 'threshold-line');
-        thresholdGroupsEnter
-            .append('rect')
-            .attr('class', 'threshold-hoverable-area');
-        var thresholdGroupsMerge = thresholdGroupsEnter.merge(thresholdGroups);
-        thresholdGroupsMerge.attr('class', 'threshold-group');
-        var self = this;
-        thresholdAxisGroupsMerge.each(function (_a) {
-            var axisPosition = _a.axisPosition;
-            var scale = self.services.cartesianScales.getScaleByPosition(axisPosition);
-            var scaleType = self.services.cartesianScales.getScaleTypeByPosition(axisPosition);
-            var xScale = null;
-            var yScale = null;
-            // Depending on type of axis position, assign scale and main perpendicular axis
-            if (axisPosition === AxisPositions.LEFT ||
-                axisPosition === AxisPositions.RIGHT) {
-                yScale = scale;
-                xScale = self.services.cartesianScales.getMainXScale();
-            }
-            else {
-                xScale = scale;
-                yScale = self.services.cartesianScales.getMainYScale();
-            }
-            var isScaleTypeLabels = scaleType === ScaleTypes.LABELS;
-            var _b = xScale.range(), xScaleStart = _b[0], xScaleEnd = _b[1];
-            var _c = yScale.range(), yScaleEnd = _c[0], yScaleStart = _c[1];
-            var cartesianScales = self.services.cartesianScales;
-            var orientation = cartesianScales.getOrientation();
-            var getDomainValue = function (d) { return cartesianScales.getDomainValue(d); };
-            var getRangeValue = function (d) { return cartesianScales.getRangeValue(d); };
-            var _d = Tools.flipDomainAndRangeBasedOnOrientation(getDomainValue, getRangeValue, orientation), getXValue = _d[0], getYValue = _d[1];
-            var group = select(this);
-            if (axisPosition === AxisPositions.TOP ||
-                axisPosition === AxisPositions.BOTTOM) {
-                group
-                    .selectAll('line.threshold-line')
-                    .transition()
-                    .call(function (t) {
-                    return self.services.transitions.setupTransition({
-                        transition: t,
-                        name: 'threshold-line-update',
-                        animate: animate,
-                    });
-                })
-                    .attr('y1', yScaleStart)
-                    .attr('y2', yScaleEnd)
-                    .attr('x1', function (_a) {
-                    var datum = _a.datum;
-                    return getXValue(datum) +
-                        (isScaleTypeLabels ? scale.step() / 2 : 0);
-                })
-                    .attr('x2', function (_a) {
-                    var datum = _a.datum;
-                    return getXValue(datum) +
-                        (isScaleTypeLabels ? scale.step() / 2 : 0);
-                })
-                    .style('stroke', function (_a) {
-                    var fillColor = _a.fillColor;
-                    return fillColor;
-                });
-                // Set hoverable area width and rotate it
-                group
-                    .selectAll('rect.threshold-hoverable-area')
-                    .attr('x', 0)
-                    .attr('y', function (_a) {
-                    var datum = _a.datum;
-                    return -getXValue(datum);
-                })
-                    .attr('width', Math.abs(yScaleEnd - yScaleStart))
-                    .classed('rotate', true);
-            }
-            else {
-                group
-                    .selectAll('line.threshold-line')
-                    .transition()
-                    .call(function (t) {
-                    return self.services.transitions.setupTransition({
-                        transition: t,
-                        name: 'threshold-line-update',
-                        animate: animate,
-                    });
-                })
-                    .attr('x1', xScaleStart)
-                    .attr('x2', xScaleEnd)
-                    .attr('y1', function (_a) {
-                    var datum = _a.datum;
-                    return getYValue(datum) +
-                        (isScaleTypeLabels ? scale.step() / 2 : 0);
-                })
-                    .attr('y2', function (_a) {
-                    var datum = _a.datum;
-                    return getYValue(datum) +
-                        (isScaleTypeLabels ? scale.step() / 2 : 0);
-                })
-                    .style('stroke', function (_a) {
-                    var fillColor = _a.fillColor;
-                    return fillColor;
-                });
-                // Set hoverable area width
-                group
-                    .selectAll('rect.threshold-hoverable-area')
-                    .attr('x', xScaleStart)
-                    .attr('y', function (_a) {
-                    var datum = _a.datum;
-                    return getYValue(datum);
-                })
-                    .attr('width', Math.abs(xScaleEnd - xScaleStart))
-                    .classed('rotate', false);
-            }
-        });
-        // Add event listener for showing the threshold tooltip
-        this.services.events.addEventListener(Events.Threshold.SHOW, function (e) {
-            _this.setThresholdLabelPosition(e.detail);
-            _this.label.classed('hidden', false);
-        });
-        // Add event listener for hiding the threshold tooltip
-        this.services.events.addEventListener(Events.Threshold.HIDE, function (e) {
-            _this.label.classed('hidden', true);
-        });
-        this.appendThresholdLabel();
-        this.addEventListeners();
-    };
-    Threshold.prototype.getFormattedValue = function (datum) {
-        var value = datum.value, axisPosition = datum.axisPosition;
-        var options = this.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, scale.ticks(), timeInterval, timeScaleOptions);
-        }
-        return value.toLocaleString('en');
-    };
-    Threshold.prototype.appendThresholdLabel = function () {
-        var holder = select(this.services.domUtils.getHolder());
-        var chartprefix = Tools.getProperty(this.getOptions(), 'style', 'prefix');
-        this.label = DOMUtils.appendOrSelect(holder, "div." + carbonPrefix + "--" + chartprefix + "--threshold--label").classed('hidden', true);
-    };
-    Threshold.prototype.setThresholdLabelPosition = function (_a) {
-        var event = _a.event, datum = _a.datum;
-        var holder = this.services.domUtils.getHolder();
-        var mouseRelativePos = pointer(event, holder);
-        // Format the threshold value using valueFormatter if defined in user-provided options
-        var formattedValue = datum.valueFormatter
-            ? datum.valueFormatter(datum.value)
-            : this.getFormattedValue(datum);
-        this.label
-            .html((datum.label || 'Threshold') + ": " + formattedValue)
-            .style('background-color', datum.fillColor);
-        var target = this.label.node();
-        // 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 ({
-            top: undefined,
-            left: undefined,
-            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);
-    };
-    // Constructs object to pass in scale functions
-    Threshold.prototype.constructDatumObj = function (d, element) {
-        var datum = {};
-        // We only need to specify group only if correpsonding dataset is defined
-        if (d.correspondingDatasets) {
-            datum['group'] = Tools.getProperty(d, 'correspondingDatasets', 0);
-        }
-        // Add attribute with the mapsTo value as key
-        datum[d['mapsTo']] = element.value;
-        return datum;
-    };
-    Threshold.prototype.addEventListeners = function () {
-        var self = this;
-        // Grab container SVG
-        var svg = this.getComponentContainer({ withinChartClip: true });
-        // Add events to the threshold hoverable area
-        svg.selectAll('rect.threshold-hoverable-area')
-            .on('mouseover mousemove', function (event) {
-            select(this.parentNode)
-                .select('line.threshold-line')
-                .classed('active', true);
-            self.services.events.dispatchEvent(Events.Threshold.SHOW, {
-                event: event,
-                hoveredElement: select(this),
-                datum: select(this).datum(),
-            });
-        })
-            .on('mouseout', function (event) {
-            select(this.parentNode)
-                .select('line.threshold-line')
-                .classed('active', false);
-            self.services.events.dispatchEvent(Events.Threshold.HIDE, {
-                event: event,
-                hoveredElement: select(this),
-                datum: select(this).datum(),
-            });
-        });
-    };
-    return Threshold;
-}(Component));
-export { Threshold };
-//# sourceMappingURL=../../../src/components/essentials/threshold.js.map

package/components/essentials/threshold.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"threshold.js","sourceRoot":"","sources":["threshold.ts"],"names":[],"mappings":";;;;;;;;;;;;;AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,KAAK,KAAK,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,OAAO,EACN,aAAa,EACb,MAAM,EACN,WAAW,EACX,UAAU,GACV,MAAM,kBAAkB,CAAC;AAE1B,aAAa;AACb,aAAa;AACb,0CAA0C;AAC1C,oCAAoC;AACpC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAE/C,0BAA0B;AAC1B,OAAO,QAAQ,EAAE,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAE9D,yCAAyC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AACpE,OAAO,EACN,UAAU,EACV,uBAAuB,GACvB,MAAM,4BAA4B,CAAC;AAEpC;IAA+B,6BAAS;IAQvC,mBAAY,KAAiB,EAAE,QAAa;QAA5C,YACC,kBAAM,KAAK,EAAE,QAAQ,CAAC,SACtB;QATD,UAAI,GAAG,WAAW,CAAC;QACnB,gBAAU,GAAG,WAAW,CAAC,GAAG,CAAC;QAI7B,qBAAe,GAAG,IAAI,QAAQ,EAAE,CAAC;;IAIjC,CAAC;IAED,0BAAM,GAAN,UAAO,OAAe;QAAtB,iBA8MC;QA9MM,wBAAA,EAAA,eAAe;QACrB,IAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,EAAE,EAAE,MAAM,CAAC,CAAC;QAEjE,IAAM,aAAa,GAAG,EAAE,CAAC;QAEzB,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC,UAAC,YAAY;;YAC7C,IAAI,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,QAAQ,CAAC,YAAmB,CAAC,EAAE;gBAC/D,IAAM,WAAW,GAAG,WAAW,CAAC,YAAY,CAAC,CAAC;gBAE9C,IACC,WAAW,CAAC,UAAU;oBACtB,WAAW,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,EAChC;oBACD,aAAa,CAAC,IAAI,CAAC;wBAClB,YAAY,cAAA;wBACZ,UAAU,EAAE,WAAW,CAAC,UAAU;wBAClC,qBAAqB,QACpB,WAAW,0CAAE,qBAAqB;wBACnC,MAAM,QAAE,WAAW,0CAAE,MAAM;qBAC3B,CAAC,CAAC;iBACH;aACD;QACF,CAAC,CAAC,CAAC;QAEH,qBAAqB;QACrB,IAAM,GAAG,GAAG,IAAI,CAAC,qBAAqB,CAAC,EAAE,eAAe,EAAE,IAAI,EAAE,CAAC,CAAC;QAElE,2CAA2C;QAC3C,IAAM,mBAAmB,GAAG,GAAG;aAC7B,SAAS,CAAC,mBAAmB,CAAC;aAC9B,IAAI,CAAC,aAAa,EAAE,UAAC,aAAa,IAAK,OAAA,aAAa,CAAC,YAAY,EAA1B,CAA0B,CAAC,CAAC;QAErE,yDAAyD;QACzD,mBAAmB,CAAC,IAAI,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC;QAEvD,2DAA2D;QAC3D,IAAM,wBAAwB,GAAG,mBAAmB;aAClD,KAAK,EAAE;aACP,MAAM,CAAC,GAAG,CAAC,CAAC;QAEd,IAAM,wBAAwB,GAAG,wBAAwB,CAAC,KAAK,CAC9D,mBAAmB,CACnB,CAAC;QACF,wBAAwB,CAAC,IAAI,CAC5B,OAAO,EACP,UAAC,CAAC,IAAK,OAAA,qBAAmB,CAAC,CAAC,YAAc,EAAnC,CAAmC,CAC1C,CAAC;QAEF,IAAM,eAAe,GAAG,wBAAwB;aAC9C,SAAS,CAAC,mBAAmB,CAAC;aAC9B,IAAI,CAAC,UAAC,CAAC;YACP,OAAA,CAAC,CAAC,UAAU,CAAC,GAAG,CAAC,UAAC,SAAS;gBAC1B,gDAAgD;gBAChD,SAAS,CAAC,YAAY,GAAG,CAAC,CAAC,YAAY,CAAC;gBACxC,SAAS,CAAC,KAAK,GAAG,KAAI,CAAC,iBAAiB,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC;gBACvD,OAAO,SAAS,CAAC;YAClB,CAAC,CAAC;QALF,CAKE,CACF,CAAC;QAEH,oDAAoD;QACpD,eAAe,CAAC,IAAI,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC;QAEnD,sDAAsD;QACtD,IAAM,oBAAoB,GAAG,eAAe,CAAC,KAAK,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;QAEjE,oBAAoB,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,OAAO,EAAE,gBAAgB,CAAC,CAAC;QACpE,oBAAoB;aAClB,MAAM,CAAC,MAAM,CAAC;aACd,IAAI,CAAC,OAAO,EAAE,0BAA0B,CAAC,CAAC;QAE5C,IAAM,oBAAoB,GAAG,oBAAoB,CAAC,KAAK,CACtD,eAAe,CACf,CAAC;QACF,oBAAoB,CAAC,IAAI,CAAC,OAAO,EAAE,iBAAiB,CAAC,CAAC;QAEtD,IAAM,IAAI,GAAG,IAAI,CAAC;QAClB,wBAAwB,CAAC,IAAI,CAAC,UAAU,EAAgB;gBAAd,8BAAY;YACrD,IAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,kBAAkB,CAC7D,YAAY,CACZ,CAAC;YACF,IAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,sBAAsB,CACrE,YAAY,CACZ,CAAC;YAEF,IAAI,MAAM,GAAG,IAAI,CAAC;YAClB,IAAI,MAAM,GAAG,IAAI,CAAC;YAElB,+EAA+E;YAC/E,IACC,YAAY,KAAK,aAAa,CAAC,IAAI;gBACnC,YAAY,KAAK,aAAa,CAAC,KAAK,EACnC;gBACD,MAAM,GAAG,KAAK,CAAC;gBACf,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,aAAa,EAAE,CAAC;aACvD;iBAAM;gBACN,MAAM,GAAG,KAAK,CAAC;gBACf,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,aAAa,EAAE,CAAC;aACvD;YAED,IAAM,iBAAiB,GAAG,SAAS,KAAK,UAAU,CAAC,MAAM,CAAC;YACpD,IAAA,mBAAyC,EAAxC,mBAAW,EAAE,iBAA2B,CAAC;YAC1C,IAAA,mBAAyC,EAAxC,iBAAS,EAAE,mBAA6B,CAAC;YAExC,IAAA,+CAAe,CAAmB;YAC1C,IAAM,WAAW,GAAG,eAAe,CAAC,cAAc,EAAE,CAAC;YACrD,IAAM,cAAc,GAAG,UAAC,CAAC,IAAK,OAAA,eAAe,CAAC,cAAc,CAAC,CAAC,CAAC,EAAjC,CAAiC,CAAC;YAChE,IAAM,aAAa,GAAG,UAAC,CAAC,IAAK,OAAA,eAAe,CAAC,aAAa,CAAC,CAAC,CAAC,EAAhC,CAAgC,CAAC;YACxD,IAAA,2FAOL,EANA,iBAAS,EACT,iBAKA,CAAC;YAEF,IAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;YAC3B,IACC,YAAY,KAAK,aAAa,CAAC,GAAG;gBAClC,YAAY,KAAK,aAAa,CAAC,MAAM,EACpC;gBACD,KAAK;qBACH,SAAS,CAAC,qBAAqB,CAAC;qBAChC,UAAU,EAAE;qBACZ,IAAI,CAAC,UAAC,CAAC;oBACP,OAAA,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,eAAe,CAAC;wBACzC,UAAU,EAAE,CAAC;wBACb,IAAI,EAAE,uBAAuB;wBAC7B,OAAO,SAAA;qBACP,CAAC;gBAJF,CAIE,CACF;qBACA,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC;qBACvB,IAAI,CAAC,IAAI,EAAE,SAAS,CAAC;qBACrB,IAAI,CACJ,IAAI,EACJ,UAAC,EAAS;wBAAP,gBAAK;oBACP,OAAA,SAAS,CAAC,KAAK,CAAC;wBAChB,CAAC,iBAAiB,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBAD1C,CAC0C,CAC3C;qBACA,IAAI,CACJ,IAAI,EACJ,UAAC,EAAS;wBAAP,gBAAK;oBACP,OAAA,SAAS,CAAC,KAAK,CAAC;wBAChB,CAAC,iBAAiB,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBAD1C,CAC0C,CAC3C;qBACA,KAAK,CAAC,QAAQ,EAAE,UAAC,EAAa;wBAAX,wBAAS;oBAAO,OAAA,SAAS;gBAAT,CAAS,CAAC,CAAC;gBAEhD,yCAAyC;gBACzC,KAAK;qBACH,SAAS,CAAC,+BAA+B,CAAC;qBAC1C,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;qBACZ,IAAI,CAAC,GAAG,EAAE,UAAC,EAAS;wBAAP,gBAAK;oBAAO,OAAA,CAAC,SAAS,CAAC,KAAK,CAAC;gBAAjB,CAAiB,CAAC;qBAC3C,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,GAAG,CAAC,SAAS,GAAG,WAAW,CAAC,CAAC;qBAChD,OAAO,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;aAC1B;iBAAM;gBACN,KAAK;qBACH,SAAS,CAAC,qBAAqB,CAAC;qBAChC,UAAU,EAAE;qBACZ,IAAI,CAAC,UAAC,CAAC;oBACP,OAAA,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,eAAe,CAAC;wBACzC,UAAU,EAAE,CAAC;wBACb,IAAI,EAAE,uBAAuB;wBAC7B,OAAO,SAAA;qBACP,CAAC;gBAJF,CAIE,CACF;qBACA,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC;qBACvB,IAAI,CAAC,IAAI,EAAE,SAAS,CAAC;qBACrB,IAAI,CACJ,IAAI,EACJ,UAAC,EAAS;wBAAP,gBAAK;oBACP,OAAA,SAAS,CAAC,KAAK,CAAC;wBAChB,CAAC,iBAAiB,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBAD1C,CAC0C,CAC3C;qBACA,IAAI,CACJ,IAAI,EACJ,UAAC,EAAS;wBAAP,gBAAK;oBACP,OAAA,SAAS,CAAC,KAAK,CAAC;wBAChB,CAAC,iBAAiB,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBAD1C,CAC0C,CAC3C;qBACA,KAAK,CAAC,QAAQ,EAAE,UAAC,EAAa;wBAAX,wBAAS;oBAAO,OAAA,SAAS;gBAAT,CAAS,CAAC,CAAC;gBAEhD,2BAA2B;gBAC3B,KAAK;qBACH,SAAS,CAAC,+BAA+B,CAAC;qBAC1C,IAAI,CAAC,GAAG,EAAE,WAAW,CAAC;qBACtB,IAAI,CAAC,GAAG,EAAE,UAAC,EAAS;wBAAP,gBAAK;oBAAO,OAAA,SAAS,CAAC,KAAK,CAAC;gBAAhB,CAAgB,CAAC;qBAC1C,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,GAAG,CAAC,SAAS,GAAG,WAAW,CAAC,CAAC;qBAChD,OAAO,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;aAC3B;QACF,CAAC,CAAC,CAAC;QAEH,uDAAuD;QACvD,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,gBAAgB,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,UAAC,CAAC;YAC9D,KAAI,CAAC,yBAAyB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;YAEzC,KAAI,CAAC,KAAK,CAAC,OAAO,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;QACrC,CAAC,CAAC,CAAC;QAEH,sDAAsD;QACtD,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,gBAAgB,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,UAAC,CAAC;YAC9D,KAAI,CAAC,KAAK,CAAC,OAAO,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;QACpC,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAE5B,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC1B,CAAC;IAED,qCAAiB,GAAjB,UAAkB,KAAK;QACd,IAAA,mBAAK,EAAE,iCAAY,CAAW;QACtC,IAAM,OAAO,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;QAClC,IAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,sBAAsB,CACrE,YAAY,CACZ,CAAC;QAEF,kEAAkE;QAClE,IAAI,SAAS,KAAK,UAAU,CAAC,IAAI,EAAE;YAClC,IAAM,UAAU,GAAG;gBAClB,aAAa,CAAC,IAAI;gBAClB,aAAa,CAAC,KAAK;aACnB,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC;YACzB,IAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,aAAa,EAAE,CAAC;YACjE,IAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,aAAa,EAAE,CAAC;YACjE,IAAM,KAAK,GAAG,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC;YAEnD,IAAM,gBAAgB,GAAG,KAAK,CAAC,WAAW,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;YACjE,IAAM,YAAY,GAAG,uBAAuB,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC;YAC5D,OAAO,UAAU,CAChB,KAAK,EACL,CAAC,EACD,KAAK,CAAC,KAAK,EAAE,EACb,YAAY,EACZ,gBAAgB,CAChB,CAAC;SACF;QAED,OAAO,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;IACnC,CAAC;IAED,wCAAoB,GAApB;QACC,IAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,SAAS,EAAE,CAAC,CAAC;QAE1D,IAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CACpC,IAAI,CAAC,UAAU,EAAE,EACjB,OAAO,EACP,QAAQ,CACR,CAAC;QAEF,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,cAAc,CACnC,MAAM,EACN,SAAO,YAAY,UAAK,WAAW,uBAAoB,CACvD,CAAC,OAAO,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;IAC3B,CAAC;IAED,6CAAyB,GAAzB,UAA0B,EAAgB;YAAd,gBAAK,EAAE,gBAAK;QACvC,IAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,SAAS,EAAE,CAAC;QAClD,IAAM,gBAAgB,GAAG,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;QAEhD,sFAAsF;QACtF,IAAM,cAAc,GAAG,KAAK,CAAC,cAAc;YAC1C,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,KAAK,CAAC;YACnC,CAAC,CAAC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;QAEjC,IAAI,CAAC,KAAK;aACR,IAAI,CAAC,CAAG,KAAK,CAAC,KAAK,IAAI,WAAW,WAAK,cAAgB,CAAC;aACxD,KAAK,CAAC,kBAAkB,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;QAE7C,IAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;QACjC,6EAA6E;QAC7E,IAAM,mBAAmB,GAAG,IAAI,CAAC,eAAe,CAAC,mBAAmB,CACnE;YACC,IAAI,EAAE,gBAAgB,CAAC,CAAC,CAAC;YACzB,GAAG,EAAE,gBAAgB,CAAC,CAAC,CAAC;SACxB,EACD,MAAM,EACN;YACC,UAAU,CAAC,KAAK;YAChB,UAAU,CAAC,IAAI;YACf,UAAU,CAAC,GAAG;YACd,UAAU,CAAC,MAAM;SACjB,EACD,cAAM,OAAA,CAAC;YACN,GAAG,EAAE,SAAS;YACd,IAAI,EAAE,SAAS;YACf,KAAK,EAAE,MAAM,CAAC,WAAW;YACzB,MAAM,EAAE,MAAM,CAAC,YAAY;SAC3B,CAAC,EALI,CAKJ,CACF,CAAC;QAEF,sDAAsD;QACtD,IAAM,GAAG,GAAG,IAAI,CAAC,eAAe,CAAC,cAAc,CAC9C;YACC,IAAI,EAAE,gBAAgB,CAAC,CAAC,CAAC;YACzB,GAAG,EAAE,gBAAgB,CAAC,CAAC,CAAC;SACxB,EACD,MAAM,EACN,mBAAmB,CACnB,CAAC;QAEF,IAAI,CAAC,eAAe,CAAC,UAAU,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC9C,CAAC;IAED,+CAA+C;IAC/C,qCAAiB,GAAjB,UAAkB,CAAC,EAAE,OAAO;QAC3B,IAAM,KAAK,GAAG,EAAE,CAAC;QAEjB,yEAAyE;QACzE,IAAI,CAAC,CAAC,qBAAqB,EAAE;YAC5B,KAAK,CAAC,OAAO,CAAC,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,EAAE,uBAAuB,EAAE,CAAC,CAAC,CAAC;SAClE;QAED,6CAA6C;QAC7C,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,GAAG,OAAO,CAAC,KAAK,CAAC;QAEnC,OAAO,KAAK,CAAC;IACd,CAAC;IAED,qCAAiB,GAAjB;QACC,IAAM,IAAI,GAAG,IAAI,CAAC;QAElB,qBAAqB;QACrB,IAAM,GAAG,GAAG,IAAI,CAAC,qBAAqB,CAAC,EAAE,eAAe,EAAE,IAAI,EAAE,CAAC,CAAC;QAElE,6CAA6C;QAC7C,GAAG,CAAC,SAAS,CAAC,+BAA+B,CAAC;aAC5C,EAAE,CAAC,qBAAqB,EAAE,UAAU,KAAK;YACzC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC;iBACrB,MAAM,CAAC,qBAAqB,CAAC;iBAC7B,OAAO,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;YAE1B,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,aAAa,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE;gBACzD,KAAK,OAAA;gBACL,cAAc,EAAE,MAAM,CAAC,IAAI,CAAC;gBAC5B,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE;aAC3B,CAAC,CAAC;QACJ,CAAC,CAAC;aACD,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK;YAC9B,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC;iBACrB,MAAM,CAAC,qBAAqB,CAAC;iBAC7B,OAAO,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;YAE3B,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,aAAa,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE;gBACzD,KAAK,OAAA;gBACL,cAAc,EAAE,MAAM,CAAC,IAAI,CAAC;gBAC5B,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE;aAC3B,CAAC,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC;IACF,gBAAC;AAAD,CAAC,AAxWD,CAA+B,SAAS,GAwWvC","sourcesContent":["import { Component } from '../component';\nimport * as Tools from '../../tools';\nimport { DOMUtils } from '../../services';\nimport { ChartModel } from '../../model/model';\nimport {\n\tAxisPositions,\n\tEvents,\n\tRenderTypes,\n\tScaleTypes,\n} from '../../interfaces';\n\n// D3 Imports\n// @ts-ignore\n// ts-ignore is needed because `@types/d3`\n// is missing the `pointer` function\nimport { select, pointer } 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 { carbonPrefix } from '../../configuration-non-customizable';\nimport {\n\tformatTick,\n\tcomputeTimeIntervalName,\n} from '../../services/time-series';\n\nexport class Threshold extends Component {\n\ttype = 'threshold';\n\trenderType = RenderTypes.SVG;\n\n\tlabel: any;\n\n\tpositionService = new Position();\n\n\tconstructor(model: ChartModel, services: any) {\n\t\tsuper(model, services);\n\t}\n\n\trender(animate = false) {\n\t\tconst axesOptions = Tools.getProperty(this.getOptions(), 'axes');\n\n\t\tconst thresholdData = [];\n\n\t\tObject.keys(axesOptions).forEach((axisPosition) => {\n\t\t\tif (Object.values(AxisPositions).includes(axisPosition as any)) {\n\t\t\t\tconst axisOptions = axesOptions[axisPosition];\n\n\t\t\t\tif (\n\t\t\t\t\taxisOptions.thresholds &&\n\t\t\t\t\taxisOptions.thresholds.length > 0\n\t\t\t\t) {\n\t\t\t\t\tthresholdData.push({\n\t\t\t\t\t\taxisPosition,\n\t\t\t\t\t\tthresholds: axisOptions.thresholds,\n\t\t\t\t\t\tcorrespondingDatasets:\n\t\t\t\t\t\t\taxisOptions?.correspondingDatasets,\n\t\t\t\t\t\tmapsTo: axisOptions?.mapsTo,\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\n\t\t// Grab container SVG\n\t\tconst svg = this.getComponentContainer({ withinChartClip: true });\n\n\t\t// Update data on all axis threshold groups\n\t\tconst thresholdAxisGroups = svg\n\t\t\t.selectAll('g.axis-thresholds')\n\t\t\t.data(thresholdData, (thresholdData) => thresholdData.axisPosition);\n\n\t\t// Remove axis threshold groups that are no longer needed\n\t\tthresholdAxisGroups.exit().attr('opacity', 0).remove();\n\n\t\t// Add the axis threshold groups that need to be introduced\n\t\tconst thresholdAxisGroupsEnter = thresholdAxisGroups\n\t\t\t.enter()\n\t\t\t.append('g');\n\n\t\tconst thresholdAxisGroupsMerge = thresholdAxisGroupsEnter.merge(\n\t\t\tthresholdAxisGroups\n\t\t);\n\t\tthresholdAxisGroupsMerge.attr(\n\t\t\t'class',\n\t\t\t(d) => `axis-thresholds ${d.axisPosition}`\n\t\t);\n\n\t\tconst thresholdGroups = thresholdAxisGroupsMerge\n\t\t\t.selectAll('g.threshold-group')\n\t\t\t.data((d) =>\n\t\t\t\td.thresholds.map((threshold) => {\n\t\t\t\t\t// Merge relevant keys into the threshold object\n\t\t\t\t\tthreshold.axisPosition = d.axisPosition;\n\t\t\t\t\tthreshold.datum = this.constructDatumObj(d, threshold);\n\t\t\t\t\treturn threshold;\n\t\t\t\t})\n\t\t\t);\n\n\t\t// Remove threshold groups that are no longer needed\n\t\tthresholdGroups.exit().attr('opacity', 0).remove();\n\n\t\t// Add the threshold groups that need to be introduced\n\t\tconst thresholdGroupsEnter = thresholdGroups.enter().append('g');\n\n\t\tthresholdGroupsEnter.append('line').attr('class', 'threshold-line');\n\t\tthresholdGroupsEnter\n\t\t\t.append('rect')\n\t\t\t.attr('class', 'threshold-hoverable-area');\n\n\t\tconst thresholdGroupsMerge = thresholdGroupsEnter.merge(\n\t\t\tthresholdGroups\n\t\t);\n\t\tthresholdGroupsMerge.attr('class', 'threshold-group');\n\n\t\tconst self = this;\n\t\tthresholdAxisGroupsMerge.each(function ({ axisPosition }) {\n\t\t\tconst scale = self.services.cartesianScales.getScaleByPosition(\n\t\t\t\taxisPosition\n\t\t\t);\n\t\t\tconst scaleType = self.services.cartesianScales.getScaleTypeByPosition(\n\t\t\t\taxisPosition\n\t\t\t);\n\n\t\t\tlet xScale = null;\n\t\t\tlet yScale = null;\n\n\t\t\t// Depending on type of axis position, assign scale and main perpendicular axis\n\t\t\tif (\n\t\t\t\taxisPosition === AxisPositions.LEFT ||\n\t\t\t\taxisPosition === AxisPositions.RIGHT\n\t\t\t) {\n\t\t\t\tyScale = scale;\n\t\t\t\txScale = self.services.cartesianScales.getMainXScale();\n\t\t\t} else {\n\t\t\t\txScale = scale;\n\t\t\t\tyScale = self.services.cartesianScales.getMainYScale();\n\t\t\t}\n\n\t\t\tconst isScaleTypeLabels = scaleType === ScaleTypes.LABELS;\n\t\t\tconst [xScaleStart, xScaleEnd] = xScale.range();\n\t\t\tconst [yScaleEnd, yScaleStart] = yScale.range();\n\n\t\t\tconst { cartesianScales } = self.services;\n\t\t\tconst orientation = cartesianScales.getOrientation();\n\t\t\tconst getDomainValue = (d) => cartesianScales.getDomainValue(d);\n\t\t\tconst getRangeValue = (d) => cartesianScales.getRangeValue(d);\n\t\t\tconst [\n\t\t\t\tgetXValue,\n\t\t\t\tgetYValue,\n\t\t\t] = Tools.flipDomainAndRangeBasedOnOrientation(\n\t\t\t\tgetDomainValue,\n\t\t\t\tgetRangeValue,\n\t\t\t\torientation\n\t\t\t);\n\n\t\t\tconst group = select(this);\n\t\t\tif (\n\t\t\t\taxisPosition === AxisPositions.TOP ||\n\t\t\t\taxisPosition === AxisPositions.BOTTOM\n\t\t\t) {\n\t\t\t\tgroup\n\t\t\t\t\t.selectAll('line.threshold-line')\n\t\t\t\t\t.transition()\n\t\t\t\t\t.call((t) =>\n\t\t\t\t\t\tself.services.transitions.setupTransition({\n\t\t\t\t\t\t\ttransition: t,\n\t\t\t\t\t\t\tname: 'threshold-line-update',\n\t\t\t\t\t\t\tanimate,\n\t\t\t\t\t\t})\n\t\t\t\t\t)\n\t\t\t\t\t.attr('y1', yScaleStart)\n\t\t\t\t\t.attr('y2', yScaleEnd)\n\t\t\t\t\t.attr(\n\t\t\t\t\t\t'x1',\n\t\t\t\t\t\t({ datum }) =>\n\t\t\t\t\t\t\tgetXValue(datum) +\n\t\t\t\t\t\t\t(isScaleTypeLabels ? scale.step() / 2 : 0)\n\t\t\t\t\t)\n\t\t\t\t\t.attr(\n\t\t\t\t\t\t'x2',\n\t\t\t\t\t\t({ datum }) =>\n\t\t\t\t\t\t\tgetXValue(datum) +\n\t\t\t\t\t\t\t(isScaleTypeLabels ? scale.step() / 2 : 0)\n\t\t\t\t\t)\n\t\t\t\t\t.style('stroke', ({ fillColor }) => fillColor);\n\n\t\t\t\t// Set hoverable area width and rotate it\n\t\t\t\tgroup\n\t\t\t\t\t.selectAll('rect.threshold-hoverable-area')\n\t\t\t\t\t.attr('x', 0)\n\t\t\t\t\t.attr('y', ({ datum }) => -getXValue(datum))\n\t\t\t\t\t.attr('width', Math.abs(yScaleEnd - yScaleStart))\n\t\t\t\t\t.classed('rotate', true);\n\t\t\t} else {\n\t\t\t\tgroup\n\t\t\t\t\t.selectAll('line.threshold-line')\n\t\t\t\t\t.transition()\n\t\t\t\t\t.call((t) =>\n\t\t\t\t\t\tself.services.transitions.setupTransition({\n\t\t\t\t\t\t\ttransition: t,\n\t\t\t\t\t\t\tname: 'threshold-line-update',\n\t\t\t\t\t\t\tanimate,\n\t\t\t\t\t\t})\n\t\t\t\t\t)\n\t\t\t\t\t.attr('x1', xScaleStart)\n\t\t\t\t\t.attr('x2', xScaleEnd)\n\t\t\t\t\t.attr(\n\t\t\t\t\t\t'y1',\n\t\t\t\t\t\t({ datum }) =>\n\t\t\t\t\t\t\tgetYValue(datum) +\n\t\t\t\t\t\t\t(isScaleTypeLabels ? scale.step() / 2 : 0)\n\t\t\t\t\t)\n\t\t\t\t\t.attr(\n\t\t\t\t\t\t'y2',\n\t\t\t\t\t\t({ datum }) =>\n\t\t\t\t\t\t\tgetYValue(datum) +\n\t\t\t\t\t\t\t(isScaleTypeLabels ? scale.step() / 2 : 0)\n\t\t\t\t\t)\n\t\t\t\t\t.style('stroke', ({ fillColor }) => fillColor);\n\n\t\t\t\t// Set hoverable area width\n\t\t\t\tgroup\n\t\t\t\t\t.selectAll('rect.threshold-hoverable-area')\n\t\t\t\t\t.attr('x', xScaleStart)\n\t\t\t\t\t.attr('y', ({ datum }) => getYValue(datum))\n\t\t\t\t\t.attr('width', Math.abs(xScaleEnd - xScaleStart))\n\t\t\t\t\t.classed('rotate', false);\n\t\t\t}\n\t\t});\n\n\t\t// Add event listener for showing the threshold tooltip\n\t\tthis.services.events.addEventListener(Events.Threshold.SHOW, (e) => {\n\t\t\tthis.setThresholdLabelPosition(e.detail);\n\n\t\t\tthis.label.classed('hidden', false);\n\t\t});\n\n\t\t// Add event listener for hiding the threshold tooltip\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(datum) {\n\t\tconst { value, axisPosition } = datum;\n\t\tconst options = this.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(\n\t\t\t\tvalue,\n\t\t\t\t0,\n\t\t\t\tscale.ticks(),\n\t\t\t\ttimeInterval,\n\t\t\t\ttimeScaleOptions\n\t\t\t);\n\t\t}\n\n\t\treturn value.toLocaleString('en');\n\t}\n\n\tappendThresholdLabel() {\n\t\tconst holder = select(this.services.domUtils.getHolder());\n\n\t\tconst chartprefix = Tools.getProperty(\n\t\t\tthis.getOptions(),\n\t\t\t'style',\n\t\t\t'prefix'\n\t\t);\n\n\t\tthis.label = DOMUtils.appendOrSelect(\n\t\t\tholder,\n\t\t\t`div.${carbonPrefix}--${chartprefix}--threshold--label`\n\t\t).classed('hidden', true);\n\t}\n\n\tsetThresholdLabelPosition({ event, datum }) {\n\t\tconst holder = this.services.domUtils.getHolder();\n\t\tconst mouseRelativePos = pointer(event, holder);\n\n\t\t// Format the threshold value using valueFormatter if defined in user-provided options\n\t\tconst formattedValue = datum.valueFormatter\n\t\t\t? datum.valueFormatter(datum.value)\n\t\t\t: this.getFormattedValue(datum);\n\n\t\tthis.label\n\t\t\t.html(`${datum.label || 'Threshold'}: ${formattedValue}`)\n\t\t\t.style('background-color', datum.fillColor);\n\n\t\tconst target = this.label.node();\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\ttop: undefined, // other package lists this as non-optional\n\t\t\t\tleft: undefined, // ditto\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\t// Constructs object to pass in scale functions\n\tconstructDatumObj(d, element) {\n\t\tconst datum = {};\n\n\t\t// We only need to specify group only if correpsonding dataset is defined\n\t\tif (d.correspondingDatasets) {\n\t\t\tdatum['group'] = Tools.getProperty(d, 'correspondingDatasets', 0);\n\t\t}\n\n\t\t// Add attribute with the mapsTo value as key\n\t\tdatum[d['mapsTo']] = element.value;\n\n\t\treturn datum;\n\t}\n\n\taddEventListeners() {\n\t\tconst self = this;\n\n\t\t// Grab container SVG\n\t\tconst svg = this.getComponentContainer({ withinChartClip: true });\n\n\t\t// Add events to the threshold hoverable area\n\t\tsvg.selectAll('rect.threshold-hoverable-area')\n\t\t\t.on('mouseover mousemove', function (event) {\n\t\t\t\tselect(this.parentNode)\n\t\t\t\t\t.select('line.threshold-line')\n\t\t\t\t\t.classed('active', true);\n\n\t\t\t\tself.services.events.dispatchEvent(Events.Threshold.SHOW, {\n\t\t\t\t\tevent,\n\t\t\t\t\thoveredElement: select(this),\n\t\t\t\t\tdatum: select(this).datum(),\n\t\t\t\t});\n\t\t\t})\n\t\t\t.on('mouseout', function (event) {\n\t\t\t\tselect(this.parentNode)\n\t\t\t\t\t.select('line.threshold-line')\n\t\t\t\t\t.classed('active', false);\n\n\t\t\t\tself.services.events.dispatchEvent(Events.Threshold.HIDE, {\n\t\t\t\t\tevent,\n\t\t\t\t\thoveredElement: select(this),\n\t\t\t\t\tdatum: select(this).datum(),\n\t\t\t\t});\n\t\t\t});\n\t}\n}\n"]}

package/components/essentials/title-meter.d.ts

@@ -1,30 +0,0 @@
-import { Title } from './title';
-import { RenderTypes } from './../../interfaces/enums';
-export declare class MeterTitle extends Title {
-    type: string;
-    renderType: RenderTypes;
-    render(): void;
-    displayBreakdownTitle(): void;
-    displayTotal(): void;
-    /**
-     * Appends the corresponding status based on the value and the peak.
-     */
-    displayStatus(): void;
-    /**
-     * Appends the associated percentage to the end of the title
-     */
-    appendPercentage(): void;
-    /**
-     * Uses the parent class truncate logic
-     * @param title d3 selection of title element that will be truncated
-     * @param titlestring the original string that needs truncation
-     * @param maxWidth the max width the title can take
-     */
-    truncateTitle(title: any, maxWidth: any): void;
-    protected getMaxTitleWidth(): number;
-    /**
-     * Get the associated status icon for the data
-     * @param status the active status for the meter chart
-     */
-    protected getStatusIconPathString(status: any): "M6.875 11.3125 3.75 8.1875 4.74375 7.25 6.875 9.34375 11.50625 4.75 12.5 5.7375 Z" | "M10.7 11.5 4.5 5.3 5.3 4.5 11.5 10.7 Z" | "M7.9375,11.125 C7.41973305,11.125 7,11.544733 7,12.0625 C7,12.580267 7.41973305,13 7.9375,13 C8.45526695,13 8.875,12.580267 8.875,12.0625 C8.875,11.544733 8.45526695,11.125 7.9375,11.125 M7.3125, 3 8.5625, 3 8.5625, 9.875 7.3125, 9.875, 7.3125, 3 Z";
-}

package/components/essentials/title-meter.js

@@ -1,279 +0,0 @@
-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 __());
-    };
-})();
-// Internal Imports
-import { Title } from './title';
-import { DOMUtils } from '../../services';
-import * as Tools from '../../tools';
-import { RenderTypes, Statuses } from './../../interfaces/enums';
-import * as Configuration from '../../configuration';
-var MeterTitle = /** @class */ (function (_super) {
-    __extends(MeterTitle, _super);
-    function MeterTitle() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.type = 'meter-title';
-        _this.renderType = RenderTypes.SVG;
-        return _this;
-    }
-    MeterTitle.prototype.render = function () {
-        var dataset = Tools.getProperty(this.model.getDisplayData(), 0);
-        var options = this.getOptions();
-        var svg = this.getComponentContainer();
-        var groupMapsTo = options.data.groupMapsTo;
-        var proportional = Tools.getProperty(options, 'meter', 'proportional');
-        if (proportional) {
-            this.displayTotal();
-            this.displayBreakdownTitle();
-        }
-        else {
-            // the title for a meter, is the label for that dataset
-            var title = svg
-                .selectAll('text.meter-title')
-                .data([dataset[groupMapsTo]]);
-            title
-                .enter()
-                .append('text')
-                .classed('meter-title', true)
-                .merge(title)
-                .attr('x', 0)
-                .attr('y', '1em')
-                .text(function (d) { return d; });
-            title.exit().remove();
-            // appends the associated percentage after title
-            this.appendPercentage();
-        }
-        // if status ranges are provided (custom or default), display indicator
-        this.displayStatus();
-        // get the max width of a title (with consideration for the status/percentage)
-        var maxWidth = this.getMaxTitleWidth();
-        var titleElement = DOMUtils.appendOrSelect(svg, 'text.meter-title');
-        if (maxWidth > 0 &&
-            titleElement.node().getComputedTextLength() > maxWidth) {
-            this.truncateTitle(titleElement, maxWidth);
-        }
-    };
-    MeterTitle.prototype.displayBreakdownTitle = function () {
-        var self = this;
-        var svg = this.getComponentContainer();
-        var options = this.getOptions();
-        var datasetsTotal = this.model.getMaximumDomain(this.model.getDisplayData());
-        var total = Tools.getProperty(options, 'meter', 'proportional', 'total');
-        var unit = Tools.getProperty(options, 'meter', 'proportional', 'unit')
-            ? Tools.getProperty(options, 'meter', 'proportional', 'unit')
-            : '';
-        var data;
-        if (datasetsTotal === total) {
-            data = null;
-        }
-        else {
-            var difference = total !== null ? total - datasetsTotal : datasetsTotal;
-            //breakdownFormatter
-            var breakdownFormatter = Tools.getProperty(options, 'meter', 'proportional', 'breakdownFormatter');
-            data =
-                breakdownFormatter !== null
-                    ? breakdownFormatter({
-                        datasetsTotal: datasetsTotal,
-                        total: total,
-                    })
-                    : datasetsTotal + " " + unit + " used (" + difference + " " + unit + " available)";
-        }
-        // the breakdown part to whole of the datasets to the overall total
-        var title = svg
-            .selectAll('text.proportional-meter-title')
-            .data([data]);
-        title
-            .enter()
-            .append('text')
-            .classed('proportional-meter-title', true)
-            .merge(title)
-            .attr('x', 0)
-            .attr('y', '1em')
-            .text(function (d) { return d; });
-        title.exit().remove();
-        var maxWidth = this.getMaxTitleWidth();
-        var titleElement = DOMUtils.appendOrSelect(svg, 'text.proportional-meter-title');
-        if (maxWidth > 0 &&
-            titleElement.node().getComputedTextLength() > maxWidth) {
-            this.truncateTitle(titleElement, maxWidth);
-        }
-    };
-    // show the total for prop meter
-    MeterTitle.prototype.displayTotal = function () {
-        var self = this;
-        var svg = this.getComponentContainer();
-        var options = this.getOptions();
-        var total = Tools.getProperty(options, 'meter', 'proportional', 'total');
-        var totalValue = total
-            ? Tools.getProperty(options, 'meter', 'proportional', 'total')
-            : this.model.getMaximumDomain(this.model.getDisplayData());
-        var unit = Tools.getProperty(options, 'meter', 'proportional', 'unit')
-            ? Tools.getProperty(options, 'meter', 'proportional', 'unit')
-            : '';
-        // totalFormatter function
-        var totalFormatter = Tools.getProperty(options, 'meter', 'proportional', 'totalFormatter');
-        var totalString = totalFormatter !== null
-            ? totalFormatter(totalValue)
-            : total + " " + unit + " total";
-        var containerBounds = DOMUtils.getHTMLElementSize(this.services.domUtils.getMainContainer());
-        // need to check if the width is 0, and try to use the parent attribute
-        // this can happen if the chart is toggled on/off and the height is 0 for the parent, it wont validateDimensions
-        var containerWidth = containerBounds.width
-            ? containerBounds.width
-            : this.parent.node().getAttribute('width');
-        var title = svg
-            .selectAll('text.proportional-meter-total')
-            .data([totalString]);
-        title
-            .enter()
-            .append('text')
-            .classed('proportional-meter-total', true)
-            .merge(title)
-            // Position the total text -24 pixels to add spacing between text and status icon (if status exists)
-            .attr('x', this.model.getStatus() && typeof containerWidth !== 'string'
-            ? containerWidth - Configuration.meter.total.paddingRight
-            : containerWidth)
-            .attr('y', '1em')
-            .attr('text-anchor', 'end')
-            .text(function (d) { return d; });
-        title.exit().remove();
-    };
-    /**
-     * Appends the corresponding status based on the value and the peak.
-     */
-    MeterTitle.prototype.displayStatus = function () {
-        var self = this;
-        var svg = this.getComponentContainer();
-        var containerBounds = DOMUtils.getHTMLElementSize(this.services.domUtils.getMainContainer());
-        // need to check if the width is 0, and try to use the parent attribute
-        // this can happen if the chart is toggled on/off and the height is 0 for the parent, it wont validateDimensions
-        var containerWidth = containerBounds.width
-            ? containerBounds.width
-            : 0;
-        // get the status from the model
-        var status = this.model.getStatus();
-        var radius = Configuration.meter.status.indicatorSize / 2;
-        // create a group for the icon/inner path
-        var statusGroup = DOMUtils.appendOrSelect(svg, "g.status-indicator")
-            .attr('class', status !== null ? "status-indicator status--" + status : '')
-            .attr('transform', "translate(" + (containerWidth - radius) + ", 0)");
-        var data = status ? [status] : [];
-        var icon = statusGroup.selectAll('circle.status').data(data);
-        icon.enter()
-            .append('circle')
-            .merge(icon)
-            .attr('class', 'status')
-            .attr('r', radius)
-            .attr('cx', 0)
-            .attr('cy', "calc(1em / 2)");
-        var innerIcon = statusGroup.selectAll('path.innerFill').data(data);
-        innerIcon
-            .enter()
-            .append('path')
-            .merge(innerIcon)
-            .attr('d', self.getStatusIconPathString(status))
-            .attr('transform', "translate(-" + radius + ", 0)")
-            .attr('class', 'innerFill');
-        innerIcon.exit().remove();
-        icon.exit().remove();
-    };
-    /**
-     * Appends the associated percentage to the end of the title
-     */
-    MeterTitle.prototype.appendPercentage = function () {
-        var dataValue = Tools.getProperty(this.model.getDisplayData(), 0, 'value');
-        // use the title's position to append the percentage to the end
-        var svg = this.getComponentContainer();
-        var title = DOMUtils.appendOrSelect(svg, 'text.meter-title');
-        // check if it is enabled
-        var data = Tools.getProperty(this.getOptions(), 'meter', 'statusBar', 'percentageIndicator', 'enabled') === true
-            ? [dataValue]
-            : [];
-        // append a percentage if it is enabled, update it
-        var percentage = svg.selectAll('text.percent-value').data(data);
-        // the horizontal offset of the percentage value from the title
-        var offset = Configuration.meter.statusBar.paddingRight;
-        percentage
-            .enter()
-            .append('text')
-            .classed('percent-value', true)
-            .merge(percentage)
-            .text(function (d) { return d + "%"; })
-            .attr('x', +title.attr('x') + title.node().getComputedTextLength() + offset) // set the position to after the title
-            .attr('y', title.attr('y'));
-        percentage.exit().remove();
-    };
-    /**
-     * Uses the parent class truncate logic
-     * @param title d3 selection of title element that will be truncated
-     * @param titlestring the original string that needs truncation
-     * @param maxWidth the max width the title can take
-     */
-    MeterTitle.prototype.truncateTitle = function (title, maxWidth) {
-        _super.prototype.truncateTitle.call(this, title, maxWidth);
-        // update the position on the percentage to be inline with the title
-        var tspan = DOMUtils.appendOrSelect(this.parent, 'tspan');
-        var offset = Configuration.meter.statusBar.paddingRight;
-        var tspanLength = Math.ceil(tspan.node().getComputedTextLength());
-        var percentage = DOMUtils.appendOrSelect(this.parent, 'text.percent-value');
-        percentage.attr('x', +title.attr('x') +
-            title.node().getComputedTextLength() +
-            tspanLength +
-            offset);
-    };
-    // computes the maximum space a title can take
-    MeterTitle.prototype.getMaxTitleWidth = function () {
-        // get a reference to the title elements to calculate the size the title can be
-        var containerBounds = DOMUtils.getHTMLElementSize(this.services.domUtils.getMainContainer());
-        var proportional = Tools.getProperty(this.getOptions(), 'meter', 'proportional');
-        // need to check if the width is 0, and try to use the parent attribute
-        var containerWidth = containerBounds.width
-            ? containerBounds.width
-            : this.parent.node().getAttribute('width');
-        if (proportional !== null) {
-            var total = DOMUtils.appendOrSelect(this.parent, 'text.proportional-meter-total').node();
-            var totalWidth = DOMUtils.getSVGElementSize(total, {
-                useBBox: true,
-            }).width;
-            return (containerWidth -
-                totalWidth -
-                Configuration.meter.total.paddingLeft);
-        }
-        else {
-            var percentage = DOMUtils.appendOrSelect(this.parent, 'text.percent-value');
-            // the title needs to fit the width of the container without crowding the status, and percentage value
-            var offset = Configuration.meter.statusBar.paddingRight;
-            var percentageWidth = percentage.node().getComputedTextLength();
-            var statusGroup = DOMUtils.appendOrSelect(this.parent, 'g.status-indicator').node();
-            var statusWidth = DOMUtils.getSVGElementSize(statusGroup, { useBBox: true })
-                .width + Configuration.meter.status.paddingLeft;
-            return containerWidth - percentageWidth - offset - statusWidth;
-        }
-    };
-    /**
-     * Get the associated status icon for the data
-     * @param status the active status for the meter chart
-     */
-    MeterTitle.prototype.getStatusIconPathString = function (status) {
-        switch (status) {
-            case Statuses.SUCCESS:
-                return 'M6.875 11.3125 3.75 8.1875 4.74375 7.25 6.875 9.34375 11.50625 4.75 12.5 5.7375 Z';
-            case Statuses.DANGER:
-                return 'M10.7 11.5 4.5 5.3 5.3 4.5 11.5 10.7 Z';
-            case Statuses.WARNING:
-                return 'M7.9375,11.125 C7.41973305,11.125 7,11.544733 7,12.0625 C7,12.580267 7.41973305,13 7.9375,13 C8.45526695,13 8.875,12.580267 8.875,12.0625 C8.875,11.544733 8.45526695,11.125 7.9375,11.125 M7.3125, 3 8.5625, 3 8.5625, 9.875 7.3125, 9.875, 7.3125, 3 Z';
-        }
-    };
-    return MeterTitle;
-}(Title));
-export { MeterTitle };
-//# sourceMappingURL=../../../src/components/essentials/title-meter.js.map