@carbon/charts 0.34.7 → 0.34.11

package/components/axes/zoom-bar.js

@@ -0,0 +1,364 @@
+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 { Component } from "../component";
+import { Tools } from "../../tools";
+import { Events, ScaleTypes, ZoomBarTypes } from "../../interfaces";
+import { DOMUtils } from "../../services";
+import * as Configuration from "../../configuration";
+// D3 Imports
+import { extent } from "d3-array";
+import { brushX } from "d3-brush";
+import { area, line } from "d3-shape";
+import { event } from "d3-selection";
+var ZoomBar = /** @class */ (function (_super) {
+    __extends(ZoomBar, _super);
+    function ZoomBar() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.type = "zoom-bar";
+        // The minimum selection x range to trigger handler update
+        // Smaller number may introduce a handler flash during initialization
+        // Bigger number may not trigger handler update while selection area on chart is very small
+        _this.MIN_SELECTION_DIFF = 9e-10;
+        // needs to match the style in _zoom-bar.scss
+        _this.brushSelector = "g.zoom-bar-brush";
+        // Give every zoomBarClip a distinct ID
+        // so they don't interfere the other zoom bars in a page
+        _this.clipId = "zoomBarClip-" + Math.floor(Math.random() * 99999999999);
+        _this.brush = brushX();
+        return _this;
+    }
+    ZoomBar.prototype.init = function () {
+        this.services.events.addEventListener(Events.ZoomBar.UPDATE, this.render.bind(this));
+        // get initZoomDomain
+        var initialZoomDomain = Tools.getProperty(this.model.getOptions(), "zoomBar", "top", "initialZoomDomain");
+        if (initialZoomDomain !== null) {
+            this.model.set({ zoomDomain: initialZoomDomain }, { skipUpdate: true });
+        }
+    };
+    ZoomBar.prototype.render = function (animate) {
+        var _this = this;
+        if (animate === void 0) { animate = true; }
+        var svg = this.getContainerSVG();
+        var options = this.model.getOptions();
+        var isDataLoading = Tools.getProperty(options, "data", "loading");
+        var zoombarType = Tools.getProperty(this.model.getOptions(), "zoomBar", "top", "type");
+        var zoombarHeight = Configuration.zoomBar.height[zoombarType];
+        var width = DOMUtils.getSVGElementSize(this.parent, {
+            useAttrs: true
+        }).width;
+        // get axes margins
+        var axesLeftMargin = 0;
+        var axesMargins = this.model.get("axesMargins");
+        if (axesMargins && axesMargins.left) {
+            axesLeftMargin = axesMargins.left;
+        }
+        var container = DOMUtils.appendOrSelect(svg, "svg.zoom-container")
+            .attr("width", "100%")
+            .attr("height", zoombarHeight)
+            .attr("opacity", 1);
+        var spacer = DOMUtils.appendOrSelect(svg, "rect.zoom-spacer")
+            .attr("x", 0)
+            .attr("y", zoombarHeight)
+            .attr("width", "100%")
+            .attr("height", Configuration.zoomBar.spacerHeight)
+            .attr("opacity", 1)
+            .attr("fill", "none");
+        if (zoombarType === ZoomBarTypes.GRAPH_VIEW) {
+            // Draw zoombar background rectangle
+            DOMUtils.appendOrSelect(container, "rect.zoom-bg")
+                .attr("x", axesLeftMargin)
+                .attr("y", 0)
+                .attr("width", width - axesLeftMargin)
+                .attr("height", "100%");
+        }
+        else if (zoombarType === ZoomBarTypes.SLIDER_VIEW) {
+            // Draw zoombar background line
+            DOMUtils.appendOrSelect(container, "rect.zoom-slider-bg")
+                .attr("x", axesLeftMargin)
+                .attr("y", zoombarHeight / 2 - 1)
+                .attr("width", width - axesLeftMargin)
+                .attr("height", 2);
+        }
+        if (isDataLoading) {
+            // TODO - zoom bar skeleton could be improved in the future
+            return;
+        }
+        var cartesianScales = this.services.cartesianScales;
+        var mainXScale = cartesianScales.getMainXScale();
+        var mainYScale = cartesianScales.getMainYScale();
+        var mainXScaleType = cartesianScales.getMainXScaleType();
+        if (mainXScale && mainXScaleType === ScaleTypes.TIME) {
+            var zoomBarData = this.services.zoom.getZoomBarData();
+            this.xScale = mainXScale.copy();
+            this.yScale = mainYScale.copy();
+            var defaultDomain = this.services.zoom.getDefaultZoomBarDomain();
+            // add value 0 to the extended domain for zoom bar area graph
+            this.compensateDataForDefaultDomain(zoomBarData, defaultDomain);
+            this.xScale.range([axesLeftMargin, width]).domain(defaultDomain);
+            // keep max selection range
+            this.maxSelectionRange = this.xScale.range();
+            this.yScale
+                .range([0, zoombarHeight - 6])
+                .domain(extent(zoomBarData, function (d) { return d.value; }));
+            var zoomDomain = this.model.get("zoomDomain");
+            if (zoombarType === ZoomBarTypes.GRAPH_VIEW) {
+                this.renderZoomBarArea(container, "path.zoom-graph-area-unselected", zoomBarData, null);
+                this.updateClipPath(svg, this.clipId, 0, 0, 0, 0);
+                this.renderZoomBarArea(container, "path.zoom-graph-area", zoomBarData, this.clipId);
+                // Draw the zoom base line
+                var baselineGenerator = line()([
+                    [axesLeftMargin, zoombarHeight],
+                    [width, zoombarHeight]
+                ]);
+                var zoomBaseline = DOMUtils.appendOrSelect(container, "path.zoom-bg-baseline").attr("d", baselineGenerator);
+            }
+            // Attach brushing event listeners
+            this.addBrushEventListener(zoomDomain, axesLeftMargin, width);
+            // Draw the brushing area
+            var brushArea = DOMUtils.appendOrSelect(svg, this.brushSelector).call(this.brush);
+            if (zoomDomain === undefined) {
+                // do nothing, initialization not completed yet
+                // don't update brushHandle to avoid flash
+            }
+            else if (zoomDomain[0].valueOf() === zoomDomain[1].valueOf()) {
+                brushArea.call(this.brush.move, this.xScale.range()); // default to full range
+                this.updateBrushHandle(this.getContainerSVG(), this.xScale.range(), this.xScale.domain());
+            }
+            else {
+                var selected = zoomDomain.map(function (domain) {
+                    return _this.xScale(domain);
+                });
+                if (selected[1] - selected[0] < this.MIN_SELECTION_DIFF) {
+                    // initialization not completed yet
+                    // don't update brushHandle to avoid flash
+                }
+                else {
+                    brushArea.call(this.brush.move, selected); // set brush to correct position
+                    this.updateBrushHandle(this.getContainerSVG(), selected, zoomDomain);
+                }
+            }
+        }
+    };
+    ZoomBar.prototype.addBrushEventListener = function (zoomDomain, axesLeftMargin, width) {
+        var _this = this;
+        var brushEventListener = function () {
+            var selection = event.selection;
+            // follow d3 behavior: when selection is null, reset default full range
+            // select behavior is completed, but nothing selected
+            if (selection === null) {
+                _this.handleBrushedEvent(zoomDomain, _this.xScale, _this.xScale.range());
+            }
+            else if (selection[0] === selection[1]) {
+                // select behavior is not completed yet, do nothing
+            }
+            else {
+                _this.handleBrushedEvent(zoomDomain, _this.xScale, selection);
+            }
+        };
+        var zoombarType = Tools.getProperty(this.model.getOptions(), "zoomBar", "top", "type");
+        var zoombarHeight = Configuration.zoomBar.height[zoombarType];
+        // Initialize the d3 brush
+        this.brush
+            .extent([
+            [axesLeftMargin, 0],
+            [width, zoombarHeight]
+        ])
+            .on("start brush end", null) // remove old listener first
+            .on("start brush end", brushEventListener);
+    };
+    // brush event listener
+    ZoomBar.prototype.handleBrushedEvent = function (zoomDomain, scale, selection) {
+        var newDomain = [
+            scale.invert(selection[0]),
+            scale.invert(selection[1])
+        ];
+        // update brush handle position
+        this.updateBrushHandle(this.getContainerSVG(), selection, newDomain);
+        // be aware that the value of d3.event changes during an event!
+        // update zoomDomain only if the event comes from mouse event
+        if (event.sourceEvent != null &&
+            (event.sourceEvent.type === "mousemove" ||
+                event.sourceEvent.type === "mouseup" ||
+                event.sourceEvent.type === "mousedown")) {
+            // only if zoomDomain is never set or needs update
+            if (zoomDomain === undefined ||
+                zoomDomain[0] !== newDomain[0] ||
+                zoomDomain[1] !== newDomain[1]) {
+                this.model.set({ zoomDomain: newDomain }, { animate: false });
+            }
+            // dispatch selection events
+            var zoomBarEventType = void 0;
+            if (event.type === "start") {
+                zoomBarEventType = Events.ZoomBar.SELECTION_START;
+            }
+            else if (event.type === "brush") {
+                zoomBarEventType = Events.ZoomBar.SELECTION_IN_PROGRESS;
+            }
+            else if (event.type === "end") {
+                zoomBarEventType = Events.ZoomBar.SELECTION_END;
+            }
+            this.services.events.dispatchEvent(zoomBarEventType, {
+                selection: selection,
+                newDomain: newDomain
+            });
+        }
+    };
+    ZoomBar.prototype.updateBrushHandle = function (svg, selection, domain) {
+        var self = this;
+        var handleWidth = 5;
+        var zoombarType = Tools.getProperty(this.model.getOptions(), "zoomBar", "top", "type");
+        var handleHeight = Configuration.zoomBar.height[zoombarType];
+        var handleXDiff = -handleWidth / 2;
+        var handleBarWidth = 1;
+        var handleBarHeight = zoombarType === ZoomBarTypes.GRAPH_VIEW ? 12 : 6;
+        var handleBarXDiff = -handleBarWidth / 2;
+        var handleYBarDiff = (handleHeight - handleBarHeight) / 2;
+        // handle
+        svg.select(this.brushSelector)
+            .selectAll("rect.handle")
+            .data([{ type: "w" }, { type: "e" }])
+            .attr("x", function (d) {
+            if (d.type === "w") {
+                // handle should not exceed zoom bar range
+                return Math.max(selection[0] + handleXDiff, self.maxSelectionRange[0]);
+            }
+            else if (d.type === "e") {
+                // handle should not exceed zoom bar range
+                return Math.min(selection[1] + handleXDiff, self.maxSelectionRange[1] - handleWidth);
+            }
+        })
+            .attr("y", 0)
+            .attr("width", handleWidth)
+            .attr("height", handleHeight)
+            .attr("cursor", "pointer")
+            .style("display", null); // always display
+        // handle-bar
+        var handleBars = svg
+            .select(this.brushSelector)
+            .selectAll("rect.handle-bar")
+            .data([{ type: "w" }, { type: "e" }]);
+        // create rect if not exists
+        handleBars
+            .enter()
+            .append("rect")
+            .attr("class", function (d) {
+            return "handle-bar handle-bar--" + d.type;
+        });
+        // update positions
+        handleBars
+            .attr("x", function (d) {
+            if (d.type === "w") {
+                return Math.max(selection[0] + handleBarXDiff, self.maxSelectionRange[0] - handleXDiff + handleBarXDiff);
+            }
+            else if (d.type === "e") {
+                return Math.min(selection[1] + handleBarXDiff, self.maxSelectionRange[1] + handleXDiff + handleBarXDiff);
+            }
+        })
+            .attr("y", handleYBarDiff)
+            .attr("width", handleBarWidth)
+            .attr("height", handleBarHeight)
+            .attr("cursor", "pointer");
+        // Update slider selected area
+        if (zoombarType === ZoomBarTypes.SLIDER_VIEW) {
+            this.updateSliderSelectedArea(selection);
+        }
+        this.updateClipPath(svg, this.clipId, selection[0], 0, selection[1] - selection[0], handleHeight);
+    };
+    ZoomBar.prototype.updateSliderSelectedArea = function (selection) {
+        var zoombarType = Tools.getProperty(this.model.getOptions(), "zoomBar", "top", "type");
+        var zoombarHeight = Configuration.zoomBar.height[zoombarType];
+        var width = DOMUtils.getSVGElementSize(this.parent, {
+            useAttrs: true
+        }).width;
+        // get axes margins
+        var axesLeftMargin = 0;
+        var axesMargins = this.model.get("axesMargins");
+        if (axesMargins && axesMargins.left) {
+            axesLeftMargin = axesMargins.left;
+        }
+        var svg = this.getContainerSVG();
+        var container = svg.select("svg.zoom-container");
+        // Draw zoombar background line
+        DOMUtils.appendOrSelect(container, "rect.zoom-slider-selected-area")
+            .attr("x", selection[0])
+            .attr("y", zoombarHeight / 2 - 1)
+            .attr("width", selection[1] - selection[0])
+            .attr("height", 2);
+    };
+    ZoomBar.prototype.renderZoomBarArea = function (container, querySelector, data, clipId) {
+        var cartesianScales = this.services.cartesianScales;
+        var mainXAxisPosition = cartesianScales.getMainXAxisPosition();
+        var mainYAxisPosition = cartesianScales.getMainYAxisPosition();
+        var mainXScaleType = cartesianScales.getMainXScaleType();
+        var mainYScaleType = cartesianScales.getMainYScaleType();
+        var accessorFunction = function (scale, scaleType, axisPosition) {
+            return function (d, i) {
+                return cartesianScales.getValueFromScale(scale, scaleType, axisPosition, d, i);
+            };
+        };
+        var xAccessor = accessorFunction(this.xScale, mainXScaleType, mainXAxisPosition);
+        var yAccessor = accessorFunction(this.yScale, mainYScaleType, mainYAxisPosition);
+        var zoombarType = Tools.getProperty(this.model.getOptions(), "zoomBar", "top", "type");
+        var zoombarHeight = Configuration.zoomBar.height[zoombarType];
+        var areaGenerator = area()
+            .x(function (d, i) { return xAccessor(d, i); })
+            .y0(zoombarHeight)
+            .y1(function (d, i) { return zoombarHeight - yAccessor(d, i); });
+        var areaGraph = DOMUtils.appendOrSelect(container, querySelector)
+            .datum(data)
+            .attr("d", areaGenerator);
+        if (clipId) {
+            areaGraph.attr("clip-path", "url(#" + clipId + ")");
+        }
+    };
+    ZoomBar.prototype.updateClipPath = function (svg, clipId, x, y, width, height) {
+        var zoomBarClipPath = DOMUtils.appendOrSelect(svg, "clipPath").attr("id", clipId);
+        DOMUtils.appendOrSelect(zoomBarClipPath, "rect")
+            .attr("x", x)
+            .attr("y", y)
+            .attr("width", width)
+            .attr("height", height);
+    };
+    // assume the domains in data are already sorted
+    ZoomBar.prototype.compensateDataForDefaultDomain = function (data, defaultDomain) {
+        if (!data || data.length < 2) {
+            return;
+        }
+        var domainIdentifier = this.services.cartesianScales.getDomainIdentifier();
+        var rangeIdentifier = this.services.cartesianScales.getRangeIdentifier();
+        // if min domain is extended
+        if (Number(defaultDomain[0]) < Number(data[0][domainIdentifier])) {
+            var newDatum = {};
+            newDatum[domainIdentifier] = defaultDomain[0];
+            newDatum[rangeIdentifier] = 0;
+            data.unshift(newDatum);
+        }
+        // if max domain is extended
+        if (Number(defaultDomain[1]) >
+            Number(data[data.length - 1][domainIdentifier])) {
+            var newDatum = {};
+            newDatum[domainIdentifier] = defaultDomain[1];
+            newDatum[rangeIdentifier] = 0;
+            data.push(newDatum);
+        }
+    };
+    ZoomBar.prototype.destroy = function () {
+        this.brush.on("start brush end", null); // remove event listener
+        this.services.events.removeEventListener(Events.ZoomBar.UPDATE, this.render.bind(this));
+    };
+    return ZoomBar;
+}(Component));
+export { ZoomBar };
+//# sourceMappingURL=../../../src/components/axes/zoom-bar.js.map

package/components/axes/zoom-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"zoom-bar.js","sourceRoot":"","sources":["zoom-bar.ts"],"names":[],"mappings":"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","sourcesContent":["// Internal Imports\nimport { Component } from \"../component\";\nimport { Tools } from \"../../tools\";\nimport { Events, ScaleTypes, ZoomBarTypes } from \"../../interfaces\";\nimport { DOMUtils } from \"../../services\";\nimport * as Configuration from \"../../configuration\";\n\n// D3 Imports\nimport { extent } from \"d3-array\";\nimport { brushX } from \"d3-brush\";\nimport { area, line } from \"d3-shape\";\nimport { event } from \"d3-selection\";\n\nexport class ZoomBar extends Component {\n\ttype = \"zoom-bar\";\n\n\t// The minimum selection x range to trigger handler update\n\t// Smaller number may introduce a handler flash during initialization\n\t// Bigger number may not trigger handler update while selection area on chart is very small\n\tMIN_SELECTION_DIFF = 9e-10;\n\n\t// needs to match the style in _zoom-bar.scss\n\tbrushSelector = \"g.zoom-bar-brush\";\n\n\t// The max allowed selection range, will be updated soon in render()\n\tmaxSelectionRange: [0, 0];\n\n\t// Give every zoomBarClip a distinct ID\n\t// so they don't interfere the other zoom bars in a page\n\tclipId = \"zoomBarClip-\" + Math.floor(Math.random() * 99999999999);\n\n\tbrush = brushX();\n\txScale: any;\n\tyScale: any;\n\n\tinit() {\n\t\tthis.services.events.addEventListener(\n\t\t\tEvents.ZoomBar.UPDATE,\n\t\t\tthis.render.bind(this)\n\t\t);\n\n\t\t// get initZoomDomain\n\t\tconst initialZoomDomain = Tools.getProperty(\n\t\t\tthis.model.getOptions(),\n\t\t\t\"zoomBar\",\n\t\t\t\"top\",\n\t\t\t\"initialZoomDomain\"\n\t\t);\n\t\tif (initialZoomDomain !== null) {\n\t\t\tthis.model.set(\n\t\t\t\t{ zoomDomain: initialZoomDomain },\n\t\t\t\t{ skipUpdate: true }\n\t\t\t);\n\t\t}\n\t}\n\n\trender(animate = true) {\n\t\tconst svg = this.getContainerSVG();\n\t\tconst options = this.model.getOptions();\n\n\t\tconst isDataLoading = Tools.getProperty(options, \"data\", \"loading\");\n\n\t\tconst zoombarType = Tools.getProperty(\n\t\t\tthis.model.getOptions(),\n\t\t\t\"zoomBar\",\n\t\t\t\"top\",\n\t\t\t\"type\"\n\t\t);\n\t\tconst zoombarHeight = Configuration.zoomBar.height[zoombarType];\n\n\t\tconst { width } = DOMUtils.getSVGElementSize(this.parent, {\n\t\t\tuseAttrs: true\n\t\t});\n\n\t\t// get axes margins\n\t\tlet axesLeftMargin = 0;\n\t\tconst axesMargins = this.model.get(\"axesMargins\");\n\t\tif (axesMargins && axesMargins.left) {\n\t\t\taxesLeftMargin = axesMargins.left;\n\t\t}\n\n\t\tconst container = DOMUtils.appendOrSelect(svg, \"svg.zoom-container\")\n\t\t\t.attr(\"width\", \"100%\")\n\t\t\t.attr(\"height\", zoombarHeight)\n\t\t\t.attr(\"opacity\", 1);\n\n\t\tconst spacer = DOMUtils.appendOrSelect(svg, \"rect.zoom-spacer\")\n\t\t\t.attr(\"x\", 0)\n\t\t\t.attr(\"y\", zoombarHeight)\n\t\t\t.attr(\"width\", \"100%\")\n\t\t\t.attr(\"height\", Configuration.zoomBar.spacerHeight)\n\t\t\t.attr(\"opacity\", 1)\n\t\t\t.attr(\"fill\", \"none\");\n\n\t\tif (zoombarType === ZoomBarTypes.GRAPH_VIEW) {\n\t\t\t// Draw zoombar background rectangle\n\t\t\tDOMUtils.appendOrSelect(container, \"rect.zoom-bg\")\n\t\t\t\t.attr(\"x\", axesLeftMargin)\n\t\t\t\t.attr(\"y\", 0)\n\t\t\t\t.attr(\"width\", width - axesLeftMargin)\n\t\t\t\t.attr(\"height\", \"100%\");\n\t\t} else if (zoombarType === ZoomBarTypes.SLIDER_VIEW) {\n\t\t\t// Draw zoombar background line\n\t\t\tDOMUtils.appendOrSelect(container, \"rect.zoom-slider-bg\")\n\t\t\t\t.attr(\"x\", axesLeftMargin)\n\t\t\t\t.attr(\"y\", zoombarHeight / 2 - 1)\n\t\t\t\t.attr(\"width\", width - axesLeftMargin)\n\t\t\t\t.attr(\"height\", 2);\n\t\t}\n\n\t\tif (isDataLoading) {\n\t\t\t// TODO - zoom bar skeleton could be improved in the future\n\t\t\treturn;\n\t\t}\n\n\t\tconst { cartesianScales } = this.services;\n\t\tconst mainXScale = cartesianScales.getMainXScale();\n\t\tconst mainYScale = cartesianScales.getMainYScale();\n\t\tconst mainXScaleType = cartesianScales.getMainXScaleType();\n\n\t\tif (mainXScale && mainXScaleType === ScaleTypes.TIME) {\n\t\t\tconst zoomBarData = this.services.zoom.getZoomBarData();\n\t\t\tthis.xScale = mainXScale.copy();\n\t\t\tthis.yScale = mainYScale.copy();\n\n\t\t\tconst defaultDomain = this.services.zoom.getDefaultZoomBarDomain();\n\n\t\t\t// add value 0 to the extended domain for zoom bar area graph\n\t\t\tthis.compensateDataForDefaultDomain(zoomBarData, defaultDomain);\n\n\t\t\tthis.xScale.range([axesLeftMargin, width]).domain(defaultDomain);\n\n\t\t\t// keep max selection range\n\t\t\tthis.maxSelectionRange = this.xScale.range();\n\n\t\t\tthis.yScale\n\t\t\t\t.range([0, zoombarHeight - 6])\n\t\t\t\t.domain(extent(zoomBarData, (d: any) => d.value));\n\n\t\t\tconst zoomDomain = this.model.get(\"zoomDomain\");\n\n\t\t\tif (zoombarType === ZoomBarTypes.GRAPH_VIEW) {\n\t\t\t\tthis.renderZoomBarArea(\n\t\t\t\t\tcontainer,\n\t\t\t\t\t\"path.zoom-graph-area-unselected\",\n\t\t\t\t\tzoomBarData,\n\t\t\t\t\tnull\n\t\t\t\t);\n\t\t\t\tthis.updateClipPath(svg, this.clipId, 0, 0, 0, 0);\n\t\t\t\tthis.renderZoomBarArea(\n\t\t\t\t\tcontainer,\n\t\t\t\t\t\"path.zoom-graph-area\",\n\t\t\t\t\tzoomBarData,\n\t\t\t\t\tthis.clipId\n\t\t\t\t);\n\n\t\t\t\t// Draw the zoom base line\n\t\t\t\tconst baselineGenerator = line()([\n\t\t\t\t\t[axesLeftMargin, zoombarHeight],\n\t\t\t\t\t[width, zoombarHeight]\n\t\t\t\t]);\n\t\t\t\tconst zoomBaseline = DOMUtils.appendOrSelect(\n\t\t\t\t\tcontainer,\n\t\t\t\t\t\"path.zoom-bg-baseline\"\n\t\t\t\t).attr(\"d\", baselineGenerator);\n\t\t\t}\n\n\t\t\t// Attach brushing event listeners\n\t\t\tthis.addBrushEventListener(zoomDomain, axesLeftMargin, width);\n\n\t\t\t// Draw the brushing area\n\t\t\tconst brushArea = DOMUtils.appendOrSelect(\n\t\t\t\tsvg,\n\t\t\t\tthis.brushSelector\n\t\t\t).call(this.brush);\n\n\t\t\tif (zoomDomain === undefined) {\n\t\t\t\t// do nothing, initialization not completed yet\n\t\t\t\t// don't update brushHandle to avoid flash\n\t\t\t} else if (zoomDomain[0].valueOf() === zoomDomain[1].valueOf()) {\n\t\t\t\tbrushArea.call(this.brush.move, this.xScale.range()); // default to full range\n\t\t\t\tthis.updateBrushHandle(\n\t\t\t\t\tthis.getContainerSVG(),\n\t\t\t\t\tthis.xScale.range(),\n\t\t\t\t\tthis.xScale.domain()\n\t\t\t\t);\n\t\t\t} else {\n\t\t\t\tconst selected = zoomDomain.map((domain) =>\n\t\t\t\t\tthis.xScale(domain)\n\t\t\t\t);\n\t\t\t\tif (selected[1] - selected[0] < this.MIN_SELECTION_DIFF) {\n\t\t\t\t\t// initialization not completed yet\n\t\t\t\t\t// don't update brushHandle to avoid flash\n\t\t\t\t} else {\n\t\t\t\t\tbrushArea.call(this.brush.move, selected); // set brush to correct position\n\t\t\t\t\tthis.updateBrushHandle(\n\t\t\t\t\t\tthis.getContainerSVG(),\n\t\t\t\t\t\tselected,\n\t\t\t\t\t\tzoomDomain\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\taddBrushEventListener(zoomDomain, axesLeftMargin, width) {\n\t\tconst brushEventListener = () => {\n\t\t\tconst selection = event.selection;\n\t\t\t// follow d3 behavior: when selection is null, reset default full range\n\t\t\t// select behavior is completed, but nothing selected\n\t\t\tif (selection === null) {\n\t\t\t\tthis.handleBrushedEvent(\n\t\t\t\t\tzoomDomain,\n\t\t\t\t\tthis.xScale,\n\t\t\t\t\tthis.xScale.range()\n\t\t\t\t);\n\t\t\t} else if (selection[0] === selection[1]) {\n\t\t\t\t// select behavior is not completed yet, do nothing\n\t\t\t} else {\n\t\t\t\tthis.handleBrushedEvent(zoomDomain, this.xScale, selection);\n\t\t\t}\n\t\t};\n\n\t\tconst zoombarType = Tools.getProperty(\n\t\t\tthis.model.getOptions(),\n\t\t\t\"zoomBar\",\n\t\t\t\"top\",\n\t\t\t\"type\"\n\t\t);\n\t\tconst zoombarHeight = Configuration.zoomBar.height[zoombarType];\n\n\t\t// Initialize the d3 brush\n\t\tthis.brush\n\t\t\t.extent([\n\t\t\t\t[axesLeftMargin, 0],\n\t\t\t\t[width, zoombarHeight]\n\t\t\t])\n\t\t\t.on(\"start brush end\", null) // remove old listener first\n\t\t\t.on(\"start brush end\", brushEventListener);\n\t}\n\n\t// brush event listener\n\thandleBrushedEvent(zoomDomain, scale, selection) {\n\t\tconst newDomain = [\n\t\t\tscale.invert(selection[0]),\n\t\t\tscale.invert(selection[1])\n\t\t];\n\n\t\t// update brush handle position\n\t\tthis.updateBrushHandle(this.getContainerSVG(), selection, newDomain);\n\n\t\t// be aware that the value of d3.event changes during an event!\n\t\t// update zoomDomain only if the event comes from mouse event\n\t\tif (\n\t\t\tevent.sourceEvent != null &&\n\t\t\t(event.sourceEvent.type === \"mousemove\" ||\n\t\t\t\tevent.sourceEvent.type === \"mouseup\" ||\n\t\t\t\tevent.sourceEvent.type === \"mousedown\")\n\t\t) {\n\t\t\t// only if zoomDomain is never set or needs update\n\t\t\tif (\n\t\t\t\tzoomDomain === undefined ||\n\t\t\t\tzoomDomain[0] !== newDomain[0] ||\n\t\t\t\tzoomDomain[1] !== newDomain[1]\n\t\t\t) {\n\t\t\t\tthis.model.set({ zoomDomain: newDomain }, { animate: false });\n\t\t\t}\n\n\t\t\t// dispatch selection events\n\t\t\tlet zoomBarEventType;\n\t\t\tif (event.type === \"start\") {\n\t\t\t\tzoomBarEventType = Events.ZoomBar.SELECTION_START;\n\t\t\t} else if (event.type === \"brush\") {\n\t\t\t\tzoomBarEventType = Events.ZoomBar.SELECTION_IN_PROGRESS;\n\t\t\t} else if (event.type === \"end\") {\n\t\t\t\tzoomBarEventType = Events.ZoomBar.SELECTION_END;\n\t\t\t}\n\t\t\tthis.services.events.dispatchEvent(zoomBarEventType, {\n\t\t\t\tselection,\n\t\t\t\tnewDomain\n\t\t\t});\n\t\t}\n\t}\n\n\tupdateBrushHandle(svg, selection, domain) {\n\t\tconst self = this;\n\t\tconst handleWidth = 5;\n\n\t\tconst zoombarType = Tools.getProperty(\n\t\t\tthis.model.getOptions(),\n\t\t\t\"zoomBar\",\n\t\t\t\"top\",\n\t\t\t\"type\"\n\t\t);\n\t\tconst handleHeight = Configuration.zoomBar.height[zoombarType];\n\t\tconst handleXDiff = -handleWidth / 2;\n\n\t\tconst handleBarWidth = 1;\n\t\tconst handleBarHeight =\n\t\t\tzoombarType === ZoomBarTypes.GRAPH_VIEW ? 12 : 6;\n\t\tconst handleBarXDiff = -handleBarWidth / 2;\n\t\tconst handleYBarDiff = (handleHeight - handleBarHeight) / 2;\n\n\t\t// handle\n\t\tsvg.select(this.brushSelector)\n\t\t\t.selectAll(\"rect.handle\")\n\t\t\t.data([{ type: \"w\" }, { type: \"e\" }])\n\t\t\t.attr(\"x\", function (d) {\n\t\t\t\tif (d.type === \"w\") {\n\t\t\t\t\t// handle should not exceed zoom bar range\n\t\t\t\t\treturn Math.max(\n\t\t\t\t\t\tselection[0] + handleXDiff,\n\t\t\t\t\t\tself.maxSelectionRange[0]\n\t\t\t\t\t);\n\t\t\t\t} else if (d.type === \"e\") {\n\t\t\t\t\t// handle should not exceed zoom bar range\n\t\t\t\t\treturn Math.min(\n\t\t\t\t\t\tselection[1] + handleXDiff,\n\t\t\t\t\t\tself.maxSelectionRange[1] - handleWidth\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t})\n\t\t\t.attr(\"y\", 0)\n\t\t\t.attr(\"width\", handleWidth)\n\t\t\t.attr(\"height\", handleHeight)\n\t\t\t.attr(\"cursor\", \"pointer\")\n\t\t\t.style(\"display\", null); // always display\n\n\t\t// handle-bar\n\t\tconst handleBars = svg\n\t\t\t.select(this.brushSelector)\n\t\t\t.selectAll(\"rect.handle-bar\")\n\t\t\t.data([{ type: \"w\" }, { type: \"e\" }]);\n\t\t// create rect if not exists\n\t\thandleBars\n\t\t\t.enter()\n\t\t\t.append(\"rect\")\n\t\t\t.attr(\"class\", function (d) {\n\t\t\t\treturn \"handle-bar handle-bar--\" + d.type;\n\t\t\t});\n\t\t// update positions\n\t\thandleBars\n\t\t\t.attr(\"x\", function (d) {\n\t\t\t\tif (d.type === \"w\") {\n\t\t\t\t\treturn Math.max(\n\t\t\t\t\t\tselection[0] + handleBarXDiff,\n\t\t\t\t\t\tself.maxSelectionRange[0] - handleXDiff + handleBarXDiff\n\t\t\t\t\t);\n\t\t\t\t} else if (d.type === \"e\") {\n\t\t\t\t\treturn Math.min(\n\t\t\t\t\t\tselection[1] + handleBarXDiff,\n\t\t\t\t\t\tself.maxSelectionRange[1] + handleXDiff + handleBarXDiff\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t})\n\t\t\t.attr(\"y\", handleYBarDiff)\n\t\t\t.attr(\"width\", handleBarWidth)\n\t\t\t.attr(\"height\", handleBarHeight)\n\t\t\t.attr(\"cursor\", \"pointer\");\n\n\t\t// Update slider selected area\n\t\tif (zoombarType === ZoomBarTypes.SLIDER_VIEW) {\n\t\t\tthis.updateSliderSelectedArea(selection);\n\t\t}\n\n\t\tthis.updateClipPath(\n\t\t\tsvg,\n\t\t\tthis.clipId,\n\t\t\tselection[0],\n\t\t\t0,\n\t\t\tselection[1] - selection[0],\n\t\t\thandleHeight\n\t\t);\n\t}\n\n\tupdateSliderSelectedArea(selection) {\n\t\tconst zoombarType = Tools.getProperty(\n\t\t\tthis.model.getOptions(),\n\t\t\t\"zoomBar\",\n\t\t\t\"top\",\n\t\t\t\"type\"\n\t\t);\n\t\tconst zoombarHeight = Configuration.zoomBar.height[zoombarType];\n\n\t\tconst { width } = DOMUtils.getSVGElementSize(this.parent, {\n\t\t\tuseAttrs: true\n\t\t});\n\n\t\t// get axes margins\n\t\tlet axesLeftMargin = 0;\n\t\tconst axesMargins = this.model.get(\"axesMargins\");\n\t\tif (axesMargins && axesMargins.left) {\n\t\t\taxesLeftMargin = axesMargins.left;\n\t\t}\n\n\t\tconst svg = this.getContainerSVG();\n\t\tconst container = svg.select(\"svg.zoom-container\");\n\n\t\t// Draw zoombar background line\n\t\tDOMUtils.appendOrSelect(container, \"rect.zoom-slider-selected-area\")\n\t\t\t.attr(\"x\", selection[0])\n\t\t\t.attr(\"y\", zoombarHeight / 2 - 1)\n\t\t\t.attr(\"width\", selection[1] - selection[0])\n\t\t\t.attr(\"height\", 2);\n\t}\n\n\trenderZoomBarArea(container, querySelector, data, clipId) {\n\t\tconst { cartesianScales } = this.services;\n\t\tconst mainXAxisPosition = cartesianScales.getMainXAxisPosition();\n\t\tconst mainYAxisPosition = cartesianScales.getMainYAxisPosition();\n\t\tconst mainXScaleType = cartesianScales.getMainXScaleType();\n\t\tconst mainYScaleType = cartesianScales.getMainYScaleType();\n\n\t\tconst accessorFunction = (scale, scaleType, axisPosition) => {\n\t\t\treturn (d, i) => {\n\t\t\t\treturn cartesianScales.getValueFromScale(\n\t\t\t\t\tscale,\n\t\t\t\t\tscaleType,\n\t\t\t\t\taxisPosition,\n\t\t\t\t\td,\n\t\t\t\t\ti\n\t\t\t\t);\n\t\t\t};\n\t\t};\n\n\t\tconst xAccessor = accessorFunction(\n\t\t\tthis.xScale,\n\t\t\tmainXScaleType,\n\t\t\tmainXAxisPosition\n\t\t);\n\t\tconst yAccessor = accessorFunction(\n\t\t\tthis.yScale,\n\t\t\tmainYScaleType,\n\t\t\tmainYAxisPosition\n\t\t);\n\n\t\tconst zoombarType = Tools.getProperty(\n\t\t\tthis.model.getOptions(),\n\t\t\t\"zoomBar\",\n\t\t\t\"top\",\n\t\t\t\"type\"\n\t\t);\n\t\tconst zoombarHeight = Configuration.zoomBar.height[zoombarType];\n\t\tconst areaGenerator = area()\n\t\t\t.x((d, i) => xAccessor(d, i))\n\t\t\t.y0(zoombarHeight)\n\t\t\t.y1((d, i) => zoombarHeight - yAccessor(d, i));\n\n\t\tconst areaGraph = DOMUtils.appendOrSelect(container, querySelector)\n\t\t\t.datum(data)\n\t\t\t.attr(\"d\", areaGenerator);\n\n\t\tif (clipId) {\n\t\t\tareaGraph.attr(\"clip-path\", `url(#${clipId})`);\n\t\t}\n\t}\n\n\tupdateClipPath(svg, clipId, x, y, width, height) {\n\t\tconst zoomBarClipPath = DOMUtils.appendOrSelect(svg, `clipPath`).attr(\n\t\t\t\"id\",\n\t\t\tclipId\n\t\t);\n\t\tDOMUtils.appendOrSelect(zoomBarClipPath, \"rect\")\n\t\t\t.attr(\"x\", x)\n\t\t\t.attr(\"y\", y)\n\t\t\t.attr(\"width\", width)\n\t\t\t.attr(\"height\", height);\n\t}\n\n\t// assume the domains in data are already sorted\n\tcompensateDataForDefaultDomain(data, defaultDomain) {\n\t\tif (!data || data.length < 2) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst domainIdentifier = this.services.cartesianScales.getDomainIdentifier();\n\t\tconst rangeIdentifier = this.services.cartesianScales.getRangeIdentifier();\n\n\t\t// if min domain is extended\n\t\tif (Number(defaultDomain[0]) < Number(data[0][domainIdentifier])) {\n\t\t\tconst newDatum = {};\n\t\t\tnewDatum[domainIdentifier] = defaultDomain[0];\n\t\t\tnewDatum[rangeIdentifier] = 0;\n\t\t\tdata.unshift(newDatum);\n\t\t}\n\t\t// if max domain is extended\n\t\tif (\n\t\t\tNumber(defaultDomain[1]) >\n\t\t\tNumber(data[data.length - 1][domainIdentifier])\n\t\t) {\n\t\t\tconst newDatum = {};\n\t\t\tnewDatum[domainIdentifier] = defaultDomain[1];\n\t\t\tnewDatum[rangeIdentifier] = 0;\n\t\t\tdata.push(newDatum);\n\t\t}\n\t}\n\n\tdestroy() {\n\t\tthis.brush.on(\"start brush end\", null); // remove event listener\n\t\tthis.services.events.removeEventListener(\n\t\t\tEvents.ZoomBar.UPDATE,\n\t\t\tthis.render.bind(this)\n\t\t);\n\t}\n}\n"]}

package/components/component.d.ts

@@ -13,5 +13,7 @@ export declare class Component {
     setServices(newObj: any): void;
     setParent(parent: any): void;
     getParent(): any;
-    getContainerSVG(): any;
+    getContainerSVG(configs?: {
+        withinChartClip: boolean;
+    }): any;
 }

package/components/component.js

@@ -48,10 +48,19 @@ var Component = /** @class */ (function () {
     Component.prototype.getParent = function () {
         return this.parent;
     };
-    Component.prototype.getContainerSVG = function () {
+    Component.prototype.getContainerSVG = function (configs) {
+        if (configs === void 0) { configs = { withinChartClip: false }; }
         if (this.type) {
             var chartprefix = Tools.getProperty(this.model.getOptions(), "style", "prefix");
-            return DOMUtils.appendOrSelect(this.parent, "g." + settings.prefix + "--" + chartprefix + "--" + this.type);
+            var svg = DOMUtils.appendOrSelect(this.parent, "g." + settings.prefix + "--" + chartprefix + "--" + this.type);
+            if (configs.withinChartClip) {
+                // get unique chartClipId int this chart from model
+                var chartClipId = this.model.get("chartClipId");
+                if (chartClipId) {
+                    svg.attr("clip-path", "url(#" + chartClipId + ")");
+                }
+            }
+            return svg;
         }
         return this.parent;
     };

package/components/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sourceRoot":"","sources":["component.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,aAAa;AACb,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAEtC,yCAAyC;AACzC,OAAO,QAAQ,MAAM,0CAA0C,CAAC;AAEhE;IAUC,mBAAY,KAAiB,EAAE,QAAa,EAAE,OAAa;QALjD,YAAO,GAAQ,EAAE,CAAC;QAM3B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QAEzB,IAAI,OAAO,EAAE;YACZ,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;SACvB;QAED,oEAAoE;QACpE,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;YACjB,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC;SAC5D;IACF,CAAC;IAED,wBAAI,GAAJ,cAAQ,CAAC;IAET,0BAAM,GAAN,UAAO,OAAc;QAAd,wBAAA,EAAA,cAAc;QACpB,OAAO,CAAC,KAAK,CAAC,oCAAoC,CAAC,CAAC;IACrD,CAAC;IAED,2BAAO,GAAP,cAAW,CAAC;IAEZ,kDAAkD;IAClD,4BAAQ,GAAR,UAAS,MAAM;QACd,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC;IACrB,CAAC;IAED,kDAAkD;IAClD,+BAAW,GAAX,UAAY,MAAM;QACjB,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC;IACxB,CAAC;IAED,6BAAS,GAAT,UAAU,MAAM;QACf,IAAM,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC;QAC9B,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QAErB,IAAI,SAAS,IAAI,SAAS,CAAC,IAAI,EAAE,KAAK,MAAM,CAAC,IAAI,EAAE,EAAE;YACpD,OAAO;SACP;QAED,IAAI,IAAI,CAAC,IAAI,EAAE;YACd,IAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CACpC,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,EACvB,OAAO,EACP,QAAQ,CACR,CAAC;YACF,IAAI,CAAC,MAAM,CAAC,OAAO,CACf,QAAQ,CAAC,MAAM,UAAK,WAAW,UAAK,IAAI,CAAC,IAAM,EAClD,IAAI,CACJ,CAAC;YAEF,IAAI,SAAS,EAAE;gBACd,SAAS,CAAC,OAAO,CACb,QAAQ,CAAC,MAAM,UAAK,WAAW,UAAK,IAAI,CAAC,IAAM,EAClD,KAAK,CACL,CAAC;aACF;SACD;IACF,CAAC;IAED,6BAAS,GAAT;QACC,OAAO,IAAI,CAAC,MAAM,CAAC;IACpB,CAAC;IAED,mCAAe,GAAf;QACC,IAAI,IAAI,CAAC,IAAI,EAAE;YACd,IAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CACpC,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,EACvB,OAAO,EACP,QAAQ,CACR,CAAC;YACF,OAAO,QAAQ,CAAC,cAAc,CAC7B,IAAI,CAAC,MAAM,EACX,OAAK,QAAQ,CAAC,MAAM,UAAK,WAAW,UAAK,IAAI,CAAC,IAAM,CACpD,CAAC;SACF;QAED,OAAO,IAAI,CAAC,MAAM,CAAC;IACpB,CAAC;IACF,gBAAC;AAAD,CAAC,AAzFD,IAyFC","sourcesContent":["// Internal Imports\nimport { ChartModel } from \"../model\";\nimport { DOMUtils } from \"../services\";\nimport { Tools } from \"../tools\";\n\n// D3 Imports\nimport { select } from \"d3-selection\";\n\n// import the settings for the css prefix\nimport settings from \"carbon-components/es/globals/js/settings\";\n\nexport class Component {\n\tpublic type: string;\n\n\tprotected parent: any;\n\n\tprotected configs: any = {};\n\n\tprotected model: ChartModel;\n\tprotected services: any;\n\n\tconstructor(model: ChartModel, services: any, configs?: any) {\n\t\tthis.model = model;\n\t\tthis.services = services;\n\n\t\tif (configs) {\n\t\t\tthis.configs = configs;\n\t\t}\n\n\t\t// Set parent element to shell SVG if no parent exists for component\n\t\tif (!this.parent) {\n\t\t\tthis.setParent(select(this.services.domUtils.getMainSVG()));\n\t\t}\n\t}\n\n\tinit() {}\n\n\trender(animate = true) {\n\t\tconsole.error(\"render() method is not implemented\");\n\t}\n\n\tdestroy() {}\n\n\t// Used to pass down information to the components\n\tsetModel(newObj) {\n\t\tthis.model = newObj;\n\t}\n\n\t// Used to pass down information to the components\n\tsetServices(newObj) {\n\t\tthis.services = newObj;\n\t}\n\n\tsetParent(parent) {\n\t\tconst oldParent = this.parent;\n\t\tthis.parent = parent;\n\n\t\tif (oldParent && oldParent.node() === parent.node()) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.type) {\n\t\t\tconst chartprefix = Tools.getProperty(\n\t\t\t\tthis.model.getOptions(),\n\t\t\t\t\"style\",\n\t\t\t\t\"prefix\"\n\t\t\t);\n\t\t\tthis.parent.classed(\n\t\t\t\t`${settings.prefix}--${chartprefix}--${this.type}`,\n\t\t\t\ttrue\n\t\t\t);\n\n\t\t\tif (oldParent) {\n\t\t\t\toldParent.classed(\n\t\t\t\t\t`${settings.prefix}--${chartprefix}--${this.type}`,\n\t\t\t\t\tfalse\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\t}\n\n\tgetParent() {\n\t\treturn this.parent;\n\t}\n\n\tgetContainerSVG() {\n\t\tif (this.type) {\n\t\t\tconst chartprefix = Tools.getProperty(\n\t\t\t\tthis.model.getOptions(),\n\t\t\t\t\"style\",\n\t\t\t\t\"prefix\"\n\t\t\t);\n\t\t\treturn DOMUtils.appendOrSelect(\n\t\t\t\tthis.parent,\n\t\t\t\t`g.${settings.prefix}--${chartprefix}--${this.type}`\n\t\t\t);\n\t\t}\n\n\t\treturn this.parent;\n\t}\n}\n"]}
+{"version":3,"file":"component.js","sourceRoot":"","sources":["component.ts"],"names":[],"mappings":"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","sourcesContent":["// Internal Imports\nimport { ChartModel } from \"../model\";\nimport { DOMUtils } from \"../services\";\nimport { Tools } from \"../tools\";\n\n// D3 Imports\nimport { select } from \"d3-selection\";\n\n// import the settings for the css prefix\nimport settings from \"carbon-components/es/globals/js/settings\";\n\nexport class Component {\n\tpublic type: string;\n\n\tprotected parent: any;\n\n\tprotected configs: any = {};\n\n\tprotected model: ChartModel;\n\tprotected services: any;\n\n\tconstructor(model: ChartModel, services: any, configs?: any) {\n\t\tthis.model = model;\n\t\tthis.services = services;\n\n\t\tif (configs) {\n\t\t\tthis.configs = configs;\n\t\t}\n\n\t\t// Set parent element to shell SVG if no parent exists for component\n\t\tif (!this.parent) {\n\t\t\tthis.setParent(select(this.services.domUtils.getMainSVG()));\n\t\t}\n\t}\n\n\tinit() {}\n\n\trender(animate = true) {\n\t\tconsole.error(\"render() method is not implemented\");\n\t}\n\n\tdestroy() {}\n\n\t// Used to pass down information to the components\n\tsetModel(newObj) {\n\t\tthis.model = newObj;\n\t}\n\n\t// Used to pass down information to the components\n\tsetServices(newObj) {\n\t\tthis.services = newObj;\n\t}\n\n\tsetParent(parent) {\n\t\tconst oldParent = this.parent;\n\t\tthis.parent = parent;\n\n\t\tif (oldParent && oldParent.node() === parent.node()) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.type) {\n\t\t\tconst chartprefix = Tools.getProperty(\n\t\t\t\tthis.model.getOptions(),\n\t\t\t\t\"style\",\n\t\t\t\t\"prefix\"\n\t\t\t);\n\t\t\tthis.parent.classed(\n\t\t\t\t`${settings.prefix}--${chartprefix}--${this.type}`,\n\t\t\t\ttrue\n\t\t\t);\n\n\t\t\tif (oldParent) {\n\t\t\t\toldParent.classed(\n\t\t\t\t\t`${settings.prefix}--${chartprefix}--${this.type}`,\n\t\t\t\t\tfalse\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\t}\n\n\tgetParent() {\n\t\treturn this.parent;\n\t}\n\n\tgetContainerSVG(configs = { withinChartClip: false }) {\n\t\tif (this.type) {\n\t\t\tconst chartprefix = Tools.getProperty(\n\t\t\t\tthis.model.getOptions(),\n\t\t\t\t\"style\",\n\t\t\t\t\"prefix\"\n\t\t\t);\n\n\t\t\tconst svg = DOMUtils.appendOrSelect(\n\t\t\t\tthis.parent,\n\t\t\t\t`g.${settings.prefix}--${chartprefix}--${this.type}`\n\t\t\t);\n\n\t\t\tif (configs.withinChartClip) {\n\t\t\t\t// get unique chartClipId int this chart from model\n\t\t\t\tconst chartClipId = this.model.get(\"chartClipId\");\n\t\t\t\tif (chartClipId) {\n\t\t\t\t\tsvg.attr(\"clip-path\", `url(#${chartClipId})`);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\treturn svg;\n\t\t}\n\n\t\treturn this.parent;\n\t}\n}\n"]}

package/components/essentials/legend.d.ts

@@ -2,6 +2,7 @@ import { Component } from "../component";
 export declare class Legend extends Component {
     type: string;
     render(): void;
+    sortDataGroups(dataGroups: any, legendOrder: any): any;
     breakItemsIntoLines(addedLegendItems: any): void;
     addEventListeners(): void;
 }

package/components/essentials/legend.js

@@ -30,9 +30,14 @@ var Legend = /** @class */ (function (_super) {
         var svg = this.getContainerSVG().attr("role", Roles.GRAPHICS_DOCUMENT + " " + Roles.DOCUMENT);
         var options = this.model.getOptions();
         var legendOptions = Tools.getProperty(options, "legend");
+        var dataGroups = this.model.getDataGroups();
+        var legendOrder = Tools.getProperty(legendOptions, "order");
+        if (legendOrder) {
+            dataGroups = this.sortDataGroups(dataGroups, legendOrder);
+        }
         var legendItems = svg
             .selectAll("g.legend-item")
-            .data(this.model.getDataGroups(), function (dataGroup) { return dataGroup.name; });
+            .data(dataGroups, function (dataGroup) { return dataGroup.name; });
         // this.getLegendItemArray()
         var addedLegendItems = legendItems
             .enter()
@@ -98,6 +103,19 @@ var Legend = /** @class */ (function (_super) {
         var alignmentOffset = DOMUtils.getAlignmentOffset(alignment, svg, this.getParent());
         svg.attr("transform", "translate(" + alignmentOffset + ", 0)");
     };
+    Legend.prototype.sortDataGroups = function (dataGroups, legendOrder) {
+        // Sort data in user defined order
+        dataGroups.sort(function (dataA, dataB) {
+            return legendOrder.indexOf(dataA.name) - legendOrder.indexOf(dataB.name);
+        });
+        // If user only defined partial ordering, ordered items are placed before unordered ones
+        if (legendOrder.length < dataGroups.length) {
+            var definedOrderIndex = dataGroups.length - legendOrder.length;
+            var definedOrder = dataGroups.slice(definedOrderIndex);
+            return definedOrder.concat(dataGroups.slice(0, definedOrderIndex));
+        }
+        return dataGroups;
+    };
     Legend.prototype.breakItemsIntoLines = function (addedLegendItems) {
         var self = this;
         var svg = this.getContainerSVG();