@carbon/charts 0.30.21 → 0.30.25

package/components/graphs/skeleton.js

@@ -0,0 +1,256 @@
+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 { DOMUtils } from "../../services";
+import { Tools } from "../../tools";
+import { Skeletons, CartesianOrientations } from "../../interfaces/enums";
+// D3 Imports
+import { scaleLinear } from "d3-scale";
+import { easeLinear } from "d3-ease";
+import { arc } from "d3-shape";
+var Skeleton = /** @class */ (function (_super) {
+    __extends(Skeleton, _super);
+    function Skeleton() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.type = "skeleton";
+        return _this;
+    }
+    Skeleton.prototype.render = function () {
+        var svg = this.parent;
+        var parent = svg.node().parentNode;
+        var _a = DOMUtils.getSVGElementSize(parent, {
+            useAttrs: true
+        }), width = _a.width, height = _a.height;
+        svg.attr("width", width).attr("height", height);
+        var isDataEmpty = this.model.isDataEmpty();
+        var isDataLoading = Tools.getProperty(this.model.getOptions(), "data", "loading");
+        if (isDataEmpty) {
+            this.renderSkeleton(isDataLoading);
+        }
+        else if (!isDataEmpty && isDataLoading) {
+            throw new Error("Something went wrong. You can't provided non-empty data and data loading together.");
+        }
+        else {
+            this.removeSkeleton();
+        }
+    };
+    Skeleton.prototype.renderSkeleton = function (showShimmerEffect) {
+        if (this.configs.skeleton === Skeletons.GRID) {
+            this.renderGridSkeleton(showShimmerEffect);
+        }
+        else if (this.configs.skeleton === Skeletons.VERT_OR_HORIZ) {
+            this.renderVertOrHorizSkeleton(showShimmerEffect);
+        }
+        else if (this.configs.skeleton === Skeletons.PIE) {
+            this.renderPieSkeleton(showShimmerEffect);
+        }
+        else if (this.configs.skeleton === Skeletons.DONUT) {
+            this.renderDonutSkeleton(showShimmerEffect);
+        }
+        else {
+            throw new Error("\"" + this.configs.skeleton + "\" is not a valid Skeleton type.");
+        }
+    };
+    Skeleton.prototype.renderGridSkeleton = function (showShimmerEffect) {
+        this.setScales();
+        this.drawBackdrop(showShimmerEffect);
+        this.drawXGrid(showShimmerEffect);
+        this.drawYGrid(showShimmerEffect);
+        if (showShimmerEffect) {
+            this.setShimmerEffect("shimmer-lines");
+        }
+    };
+    Skeleton.prototype.renderVertOrHorizSkeleton = function (showShimmerEffect) {
+        var orientation = this.services.cartesianScales.getOrientation();
+        this.setScales();
+        this.drawBackdrop(showShimmerEffect);
+        if (orientation === CartesianOrientations.VERTICAL) {
+            this.drawYGrid(showShimmerEffect);
+        }
+        if (orientation === CartesianOrientations.HORIZONTAL) {
+            this.drawXGrid(showShimmerEffect);
+        }
+        this.setShimmerEffect("shimmer-lines");
+    };
+    Skeleton.prototype.renderPieSkeleton = function (showShimmerEffect) {
+        var outerRadius = this.computeOuterRadius();
+        var innerRadius = 0;
+        this.drawRing(outerRadius, innerRadius, showShimmerEffect);
+        if (showShimmerEffect) {
+            this.setShimmerEffect("shimmer-areas");
+        }
+    };
+    Skeleton.prototype.renderDonutSkeleton = function (showShimmerEffect) {
+        var outerRadius = this.computeOuterRadius();
+        var innerRadius = this.computeInnerRadius();
+        this.drawRing(outerRadius, innerRadius, showShimmerEffect);
+        if (showShimmerEffect) {
+            this.setShimmerEffect("shimmer-areas");
+        }
+    };
+    Skeleton.prototype.setScales = function () {
+        var xRange = this.services.cartesianScales.getMainXScale().range();
+        var yRange = this.services.cartesianScales.getMainYScale().range();
+        this.xScale = scaleLinear()
+            .domain([0, 1])
+            .range(xRange);
+        this.yScale = scaleLinear()
+            .domain([0, 1])
+            .range(yRange);
+    };
+    Skeleton.prototype.drawBackdrop = function (showShimmerEffect) {
+        var svg = this.parent;
+        var parent = svg.node().parentNode;
+        var _a = DOMUtils.getSVGElementSize(parent, {
+            useAttrs: true
+        }), width = _a.width, height = _a.height;
+        this.backdrop = DOMUtils.appendOrSelect(svg, "svg.chart-skeleton.DAII")
+            .attr("width", width)
+            .attr("height", height);
+        var backdropRect = DOMUtils.appendOrSelect(this.backdrop, "rect.chart-skeleton-backdrop");
+        backdropRect.attr("width", "100%").attr("height", "100%");
+        var _b = this.xScale.range(), xScaleStart = _b[0], xScaleEnd = _b[1];
+        var _c = this.yScale.range(), yScaleEnd = _c[0], yScaleStart = _c[1];
+        this.backdrop
+            .merge(backdropRect)
+            .attr("x", xScaleStart)
+            .attr("y", yScaleStart);
+        backdropRect
+            .classed("shimmer-effect-lines", showShimmerEffect)
+            .classed("empty-state-lines", !showShimmerEffect);
+    };
+    Skeleton.prototype.drawXGrid = function (showShimmerEffect) {
+        var height = this.backdrop.attr("height");
+        var width = this.backdrop.attr("width");
+        var ticksNumber = Tools.getProperty(this.model.getOptions(), "grid", "x", "numberOfTicks");
+        var ticksValues = this.xScale.ticks(ticksNumber).map(function (d) { return d * width; });
+        var xGridG = DOMUtils.appendOrSelect(this.backdrop, "g.x.skeleton");
+        var update = xGridG.selectAll("line").data(ticksValues);
+        update
+            .enter()
+            .append("line")
+            .merge(update)
+            .attr("x1", function (d) { return d; })
+            .attr("x2", function (d) { return d; })
+            .attr("y1", 0)
+            .attr("y2", height);
+        xGridG
+            .selectAll("line")
+            .classed("shimmer-effect-lines", showShimmerEffect)
+            .classed("empty-state-lines", !showShimmerEffect);
+    };
+    Skeleton.prototype.drawYGrid = function (showShimmerEffect) {
+        var height = this.backdrop.attr("height");
+        var width = this.backdrop.attr("width");
+        var ticksNumber = Tools.getProperty(this.model.getOptions(), "grid", "y", "numberOfTicks");
+        var ticksValues = this.xScale.ticks(ticksNumber).map(function (d) { return d * height; });
+        var yGridG = DOMUtils.appendOrSelect(this.backdrop, "g.y.skeleton");
+        var update = yGridG.selectAll("line").data(ticksValues);
+        update
+            .enter()
+            .append("line")
+            .merge(update)
+            .attr("x1", 0)
+            .attr("x2", width)
+            .attr("y1", function (d) { return d; })
+            .attr("y2", function (d) { return d; });
+        yGridG
+            .selectAll("line")
+            .classed("shimmer-effect-lines", showShimmerEffect)
+            .classed("empty-state-lines", !showShimmerEffect);
+    };
+    Skeleton.prototype.drawRing = function (outerRadius, innerRadius, shimmer) {
+        if (shimmer === void 0) { shimmer = true; }
+        var svg = this.parent;
+        var _a = DOMUtils.getSVGElementSize(svg.node().parentNode, { useAttrs: true }), width = _a.width, height = _a.height;
+        var container = DOMUtils.appendOrSelect(svg, "svg.chart-skeleton")
+            .attr("width", width)
+            .attr("height", height);
+        var options = this.model.getOptions().pie;
+        var skeletonAreaContainer = DOMUtils.appendOrSelect(container, "rect.chart-skeleton-area-container")
+            .attr("width", width)
+            .attr("height", height)
+            .attr("fill", "none");
+        var arcPathGenerator = arc()
+            .innerRadius(innerRadius)
+            .outerRadius(outerRadius)
+            .startAngle(0)
+            .endAngle(Math.PI * 2);
+        // centering circle inside the container
+        var tcx = outerRadius + Math.abs(options.radiusOffset);
+        var tcy = outerRadius + (Math.min(width, height) - outerRadius * 2) / 2;
+        DOMUtils.appendOrSelect(container, "path")
+            .attr("class", "skeleton-area-shape")
+            .attr("transform", "translate(" + tcx + ", " + tcy + ")")
+            .attr("d", arcPathGenerator)
+            .classed("shimmer-effect-areas", shimmer)
+            .classed("empty-state-areas", !shimmer);
+    };
+    // same logic in pie
+    Skeleton.prototype.computeOuterRadius = function () {
+        var options = this.model.getOptions();
+        var _a = DOMUtils.getSVGElementSize(this.parent.node().parentNode, { useAttrs: true }), width = _a.width, height = _a.height;
+        var radius = Math.min(width, height) / 2;
+        return radius + options.pie.radiusOffset;
+    };
+    // same logic in donut
+    Skeleton.prototype.computeInnerRadius = function () {
+        return this.computeOuterRadius() * (3 / 4);
+    };
+    Skeleton.prototype.setShimmerEffect = function (gradientId) {
+        var animationDuration = 2000; // ms
+        var delay = 1000; // ms
+        var shimmerWidth = 0.2;
+        var stopBgShimmerClass = "stop-bg-shimmer";
+        var stopShimmerClass = "stop-shimmer";
+        var container = this.parent.select(".chart-skeleton");
+        var width = DOMUtils.getSVGElementSize(this.parent, {
+            useAttrs: true
+        }).width;
+        var startPoint = 0;
+        var endPoint = width;
+        // append the defs as first child of container
+        var defs = DOMUtils.appendOrSelect(container, "defs").lower();
+        var linearGradient = DOMUtils.appendOrSelect(defs, "linearGradient")
+            .attr("id", gradientId)
+            .attr("x1", startPoint - 3 * shimmerWidth * width)
+            .attr("x2", endPoint)
+            .attr("y1", 0)
+            .attr("y2", 0)
+            .attr("gradientUnits", "userSpaceOnUse")
+            .attr("gradientTransform", "translate(0, 0)");
+        var stops = "\n\t\t\t<stop class=\"" + stopBgShimmerClass + "\" offset=\"" + startPoint + "\"></stop>\n\t\t\t<stop class=\"" + stopShimmerClass + "\" offset=\"" + (startPoint + shimmerWidth) + "\"></stop>\n\t\t\t<stop class=\"" + stopBgShimmerClass + "\" offset=\"" + (startPoint +
+            2 * shimmerWidth) + "\"></stop>\n\t\t";
+        linearGradient.html(stops);
+        repeat();
+        function repeat() {
+            linearGradient
+                .attr("gradientTransform", "translate(" + (startPoint - 3 * shimmerWidth * width) + ", 0)")
+                .transition()
+                .duration(animationDuration)
+                .delay(delay)
+                .ease(easeLinear)
+                .attr("gradientTransform", "translate(" + (endPoint + 3 * shimmerWidth * width) + ", 0)")
+                .on("end", repeat);
+        }
+    };
+    Skeleton.prototype.removeSkeleton = function () {
+        var container = this.parent.select(".chart-skeleton");
+        container.remove();
+    };
+    return Skeleton;
+}(Component));
+export { Skeleton };
+//# sourceMappingURL=../../../src/components/graphs/skeleton.js.map

package/components/graphs/skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.js","sourceRoot":"","sources":["skeleton.ts"],"names":[],"mappings":"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","sourcesContent":["// Internal Imports\nimport { Component } from \"../component\";\nimport { DOMUtils } from \"../../services\";\nimport { Tools } from \"../../tools\";\nimport { Skeletons, CartesianOrientations } from \"../../interfaces/enums\";\n\n// D3 Imports\nimport { scaleLinear } from \"d3-scale\";\nimport { easeLinear } from \"d3-ease\";\nimport { arc } from \"d3-shape\";\n\nexport class Skeleton extends Component {\n\ttype = \"skeleton\";\n\txScale: any;\n\tyScale: any;\n\tbackdrop: any;\n\n\trender() {\n\t\tconst svg = this.parent;\n\t\tconst parent = svg.node().parentNode;\n\t\tconst { width, height } = DOMUtils.getSVGElementSize(parent, {\n\t\t\tuseAttrs: true\n\t\t});\n\t\tsvg.attr(\"width\", width).attr(\"height\", height);\n\n\t\tconst isDataEmpty = this.model.isDataEmpty();\n\t\tconst isDataLoading = Tools.getProperty(\n\t\t\tthis.model.getOptions(),\n\t\t\t\"data\",\n\t\t\t\"loading\"\n\t\t);\n\n\t\tif (isDataEmpty) {\n\t\t\tthis.renderSkeleton(isDataLoading);\n\t\t} else if (!isDataEmpty && isDataLoading) {\n\t\t\tthrow new Error(\n\t\t\t\t`Something went wrong. You can't provided non-empty data and data loading together.`\n\t\t\t);\n\t\t} else {\n\t\t\tthis.removeSkeleton();\n\t\t}\n\t}\n\n\trenderSkeleton(showShimmerEffect: boolean) {\n\t\tif (this.configs.skeleton === Skeletons.GRID) {\n\t\t\tthis.renderGridSkeleton(showShimmerEffect);\n\t\t} else if (this.configs.skeleton === Skeletons.VERT_OR_HORIZ) {\n\t\t\tthis.renderVertOrHorizSkeleton(showShimmerEffect);\n\t\t} else if (this.configs.skeleton === Skeletons.PIE) {\n\t\t\tthis.renderPieSkeleton(showShimmerEffect);\n\t\t} else if (this.configs.skeleton === Skeletons.DONUT) {\n\t\t\tthis.renderDonutSkeleton(showShimmerEffect);\n\t\t} else {\n\t\t\tthrow new Error(\n\t\t\t\t`\"${this.configs.skeleton}\" is not a valid Skeleton type.`\n\t\t\t);\n\t\t}\n\t}\n\n\trenderGridSkeleton(showShimmerEffect: boolean) {\n\t\tthis.setScales();\n\t\tthis.drawBackdrop(showShimmerEffect);\n\t\tthis.drawXGrid(showShimmerEffect);\n\t\tthis.drawYGrid(showShimmerEffect);\n\t\tif (showShimmerEffect) {\n\t\t\tthis.setShimmerEffect(\"shimmer-lines\");\n\t\t}\n\t}\n\n\trenderVertOrHorizSkeleton(showShimmerEffect: boolean) {\n\t\tconst orientation = this.services.cartesianScales.getOrientation();\n\t\tthis.setScales();\n\t\tthis.drawBackdrop(showShimmerEffect);\n\t\tif (orientation === CartesianOrientations.VERTICAL) {\n\t\t\tthis.drawYGrid(showShimmerEffect);\n\t\t}\n\t\tif (orientation === CartesianOrientations.HORIZONTAL) {\n\t\t\tthis.drawXGrid(showShimmerEffect);\n\t\t}\n\t\tthis.setShimmerEffect(\"shimmer-lines\");\n\t}\n\n\trenderPieSkeleton(showShimmerEffect: boolean) {\n\t\tconst outerRadius = this.computeOuterRadius();\n\t\tconst innerRadius = 0;\n\t\tthis.drawRing(outerRadius, innerRadius, showShimmerEffect);\n\t\tif (showShimmerEffect) {\n\t\t\tthis.setShimmerEffect(\"shimmer-areas\");\n\t\t}\n\t}\n\n\trenderDonutSkeleton(showShimmerEffect: boolean) {\n\t\tconst outerRadius = this.computeOuterRadius();\n\t\tconst innerRadius = this.computeInnerRadius();\n\t\tthis.drawRing(outerRadius, innerRadius, showShimmerEffect);\n\t\tif (showShimmerEffect) {\n\t\t\tthis.setShimmerEffect(\"shimmer-areas\");\n\t\t}\n\t}\n\n\tsetScales() {\n\t\tconst xRange = this.services.cartesianScales.getMainXScale().range();\n\t\tconst yRange = this.services.cartesianScales.getMainYScale().range();\n\t\tthis.xScale = scaleLinear()\n\t\t\t.domain([0, 1])\n\t\t\t.range(xRange);\n\t\tthis.yScale = scaleLinear()\n\t\t\t.domain([0, 1])\n\t\t\t.range(yRange);\n\t}\n\n\tdrawBackdrop(showShimmerEffect: boolean) {\n\t\tconst svg = this.parent;\n\t\tconst parent = svg.node().parentNode;\n\t\tconst { width, height } = DOMUtils.getSVGElementSize(parent, {\n\t\t\tuseAttrs: true\n\t\t});\n\n\t\tthis.backdrop = DOMUtils.appendOrSelect(svg, \"svg.chart-skeleton.DAII\")\n\t\t\t.attr(\"width\", width)\n\t\t\t.attr(\"height\", height);\n\n\t\tconst backdropRect = DOMUtils.appendOrSelect(\n\t\t\tthis.backdrop,\n\t\t\t\"rect.chart-skeleton-backdrop\"\n\t\t);\n\t\tbackdropRect.attr(\"width\", \"100%\").attr(\"height\", \"100%\");\n\n\t\tconst [xScaleStart, xScaleEnd] = this.xScale.range();\n\t\tconst [yScaleEnd, yScaleStart] = this.yScale.range();\n\n\t\tthis.backdrop\n\t\t\t.merge(backdropRect)\n\t\t\t.attr(\"x\", xScaleStart)\n\t\t\t.attr(\"y\", yScaleStart);\n\n\t\tbackdropRect\n\t\t\t.classed(\"shimmer-effect-lines\", showShimmerEffect)\n\t\t\t.classed(\"empty-state-lines\", !showShimmerEffect);\n\t}\n\n\tdrawXGrid(showShimmerEffect: boolean) {\n\t\tconst height = this.backdrop.attr(\"height\");\n\t\tconst width = this.backdrop.attr(\"width\");\n\t\tconst ticksNumber = Tools.getProperty(\n\t\t\tthis.model.getOptions(),\n\t\t\t\"grid\",\n\t\t\t\"x\",\n\t\t\t\"numberOfTicks\"\n\t\t);\n\t\tconst ticksValues = this.xScale.ticks(ticksNumber).map(d => d * width);\n\n\t\tconst xGridG = DOMUtils.appendOrSelect(this.backdrop, \"g.x.skeleton\");\n\t\tconst update = xGridG.selectAll(\"line\").data(ticksValues);\n\t\tupdate\n\t\t\t.enter()\n\t\t\t.append(\"line\")\n\t\t\t.merge(update)\n\t\t\t.attr(\"x1\", d => d)\n\t\t\t.attr(\"x2\", d => d)\n\t\t\t.attr(\"y1\", 0)\n\t\t\t.attr(\"y2\", height);\n\n\t\txGridG\n\t\t\t.selectAll(\"line\")\n\t\t\t.classed(\"shimmer-effect-lines\", showShimmerEffect)\n\t\t\t.classed(\"empty-state-lines\", !showShimmerEffect);\n\t}\n\n\tdrawYGrid(showShimmerEffect: boolean) {\n\t\tconst height = this.backdrop.attr(\"height\");\n\t\tconst width = this.backdrop.attr(\"width\");\n\t\tconst ticksNumber = Tools.getProperty(\n\t\t\tthis.model.getOptions(),\n\t\t\t\"grid\",\n\t\t\t\"y\",\n\t\t\t\"numberOfTicks\"\n\t\t);\n\t\tconst ticksValues = this.xScale.ticks(ticksNumber).map(d => d * height);\n\n\t\tconst yGridG = DOMUtils.appendOrSelect(this.backdrop, \"g.y.skeleton\");\n\t\tconst update = yGridG.selectAll(\"line\").data(ticksValues);\n\t\tupdate\n\t\t\t.enter()\n\t\t\t.append(\"line\")\n\t\t\t.merge(update)\n\t\t\t.attr(\"x1\", 0)\n\t\t\t.attr(\"x2\", width)\n\t\t\t.attr(\"y1\", d => d)\n\t\t\t.attr(\"y2\", d => d);\n\n\t\tyGridG\n\t\t\t.selectAll(\"line\")\n\t\t\t.classed(\"shimmer-effect-lines\", showShimmerEffect)\n\t\t\t.classed(\"empty-state-lines\", !showShimmerEffect);\n\t}\n\n\tdrawRing(outerRadius: number, innerRadius: number, shimmer = true) {\n\t\tconst svg = this.parent;\n\t\tconst { width, height } = DOMUtils.getSVGElementSize(\n\t\t\tsvg.node().parentNode,\n\t\t\t{ useAttrs: true }\n\t\t);\n\n\t\tconst container = DOMUtils.appendOrSelect(svg, \"svg.chart-skeleton\")\n\t\t\t.attr(\"width\", width)\n\t\t\t.attr(\"height\", height);\n\t\tconst options = this.model.getOptions().pie;\n\n\t\tconst skeletonAreaContainer = DOMUtils.appendOrSelect(\n\t\t\tcontainer,\n\t\t\t\"rect.chart-skeleton-area-container\"\n\t\t)\n\t\t\t.attr(\"width\", width)\n\t\t\t.attr(\"height\", height)\n\t\t\t.attr(\"fill\", \"none\");\n\n\t\tconst arcPathGenerator = arc()\n\t\t\t.innerRadius(innerRadius)\n\t\t\t.outerRadius(outerRadius)\n\t\t\t.startAngle(0)\n\t\t\t.endAngle(Math.PI * 2);\n\n\t\t// centering circle inside the container\n\t\tconst tcx = outerRadius + Math.abs(options.radiusOffset);\n\t\tconst tcy =\n\t\t\touterRadius + (Math.min(width, height) - outerRadius * 2) / 2;\n\n\t\tDOMUtils.appendOrSelect(container, \"path\")\n\t\t\t.attr(\"class\", \"skeleton-area-shape\")\n\t\t\t.attr(\"transform\", `translate(${tcx}, ${tcy})`)\n\t\t\t.attr(\"d\", arcPathGenerator)\n\t\t\t.classed(\"shimmer-effect-areas\", shimmer)\n\t\t\t.classed(\"empty-state-areas\", !shimmer);\n\t}\n\n\t// same logic in pie\n\tcomputeOuterRadius() {\n\t\tconst options = this.model.getOptions();\n\t\tconst { width, height } = DOMUtils.getSVGElementSize(\n\t\t\tthis.parent.node().parentNode,\n\t\t\t{ useAttrs: true }\n\t\t);\n\t\tconst radius = Math.min(width, height) / 2;\n\t\treturn radius + options.pie.radiusOffset;\n\t}\n\n\t// same logic in donut\n\tcomputeInnerRadius() {\n\t\treturn this.computeOuterRadius() * (3 / 4);\n\t}\n\n\tsetShimmerEffect(gradientId: string) {\n\t\tconst animationDuration = 2000; // ms\n\t\tconst delay = 1000; // ms\n\t\tconst shimmerWidth = 0.2;\n\t\tconst stopBgShimmerClass = \"stop-bg-shimmer\";\n\t\tconst stopShimmerClass = \"stop-shimmer\";\n\t\tconst container = this.parent.select(\".chart-skeleton\");\n\t\tconst { width } = DOMUtils.getSVGElementSize(this.parent, {\n\t\t\tuseAttrs: true\n\t\t});\n\t\tconst startPoint = 0;\n\t\tconst endPoint = width;\n\n\t\t// append the defs as first child of container\n\t\tconst defs = DOMUtils.appendOrSelect(container, \"defs\").lower();\n\t\tconst linearGradient = DOMUtils.appendOrSelect(defs, \"linearGradient\")\n\t\t\t.attr(\"id\", gradientId)\n\t\t\t.attr(\"x1\", startPoint - 3 * shimmerWidth * width)\n\t\t\t.attr(\"x2\", endPoint)\n\t\t\t.attr(\"y1\", 0)\n\t\t\t.attr(\"y2\", 0)\n\t\t\t.attr(\"gradientUnits\", \"userSpaceOnUse\")\n\t\t\t.attr(\"gradientTransform\", `translate(0, 0)`);\n\t\tconst stops = `\n\t\t\t<stop class=\"${stopBgShimmerClass}\" offset=\"${startPoint}\"></stop>\n\t\t\t<stop class=\"${stopShimmerClass}\" offset=\"${startPoint + shimmerWidth}\"></stop>\n\t\t\t<stop class=\"${stopBgShimmerClass}\" offset=\"${startPoint +\n\t\t\t2 * shimmerWidth}\"></stop>\n\t\t`;\n\t\tlinearGradient.html(stops);\n\n\t\trepeat();\n\t\tfunction repeat() {\n\t\t\tlinearGradient\n\t\t\t\t.attr(\n\t\t\t\t\t\"gradientTransform\",\n\t\t\t\t\t`translate(${startPoint - 3 * shimmerWidth * width}, 0)`\n\t\t\t\t)\n\t\t\t\t.transition()\n\t\t\t\t.duration(animationDuration)\n\t\t\t\t.delay(delay)\n\t\t\t\t.ease(easeLinear)\n\t\t\t\t.attr(\n\t\t\t\t\t\"gradientTransform\",\n\t\t\t\t\t`translate(${endPoint + 3 * shimmerWidth * width}, 0)`\n\t\t\t\t)\n\t\t\t\t.on(\"end\", repeat);\n\t\t}\n\t}\n\n\tremoveSkeleton() {\n\t\tconst container = this.parent.select(\".chart-skeleton\");\n\t\tcontainer.remove();\n\t}\n}\n"]}

package/components/index.d.ts

@@ -1,5 +1,6 @@
 export * from "./component";
 export * from "./essentials/legend";
+export * from "./essentials/threshold";
 export * from "./essentials/title";
 export * from "./essentials/tooltip";
 export * from "./essentials/tooltip-bar";
@@ -14,6 +15,7 @@ export * from "./graphs/line";
 export * from "./graphs/scatter";
 export * from "./graphs/pie";
 export * from "./graphs/donut";
+export * from "./graphs/skeleton";
 export * from "./layout/spacer";
 export * from "./layout/layout";
 export * from "./axes/two-dimensional-axes";

package/components/index.js

@@ -1,6 +1,7 @@
 export * from "./component";
 // ESSENTIALS
 export * from "./essentials/legend";
+export * from "./essentials/threshold";
 export * from "./essentials/title";
 export * from "./essentials/tooltip";
 export * from "./essentials/tooltip-bar";
@@ -16,6 +17,7 @@ export * from "./graphs/line";
 export * from "./graphs/scatter";
 export * from "./graphs/pie";
 export * from "./graphs/donut";
+export * from "./graphs/skeleton";
 // Layout
 export * from "./layout/spacer";
 export * from "./layout/layout";

package/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAE5B,aAAa;AACb,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,4BAA4B,CAAC;AAE3C,SAAS;AACT,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAE/B,SAAS;AACT,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAEhC,OAAO;AACP,cAAc,6BAA6B,CAAC;AAC5C,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC","sourcesContent":["export * from \"./component\";\n\n// ESSENTIALS\nexport * from \"./essentials/legend\";\nexport * from \"./essentials/title\";\nexport * from \"./essentials/tooltip\";\nexport * from \"./essentials/tooltip-bar\";\nexport * from \"./essentials/tooltip-pie\";\nexport * from \"./essentials/tooltip-scatter\";\nexport * from \"./essentials/tooltip-radar\";\n\n// GRAPHS\nexport * from \"./graphs/bar-simple\";\nexport * from \"./graphs/bar-grouped\";\nexport * from \"./graphs/bar-stacked\";\nexport * from \"./graphs/bubble\";\nexport * from \"./graphs/line\";\nexport * from \"./graphs/scatter\";\nexport * from \"./graphs/pie\";\nexport * from \"./graphs/donut\";\n\n// Layout\nexport * from \"./layout/spacer\";\nexport * from \"./layout/layout\";\n\n// MISC\nexport * from \"./axes/two-dimensional-axes\";\nexport * from \"./axes/axis\";\nexport * from \"./axes/grid\";\nexport * from \"./axes/ruler\";\nexport * from \"./axes/zero-line\";\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAE5B,aAAa;AACb,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,4BAA4B,CAAC;AAE3C,SAAS;AACT,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAElC,SAAS;AACT,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAEhC,OAAO;AACP,cAAc,6BAA6B,CAAC;AAC5C,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC","sourcesContent":["export * from \"./component\";\n\n// ESSENTIALS\nexport * from \"./essentials/legend\";\nexport * from \"./essentials/threshold\";\nexport * from \"./essentials/title\";\nexport * from \"./essentials/tooltip\";\nexport * from \"./essentials/tooltip-bar\";\nexport * from \"./essentials/tooltip-pie\";\nexport * from \"./essentials/tooltip-scatter\";\nexport * from \"./essentials/tooltip-radar\";\n\n// GRAPHS\nexport * from \"./graphs/bar-simple\";\nexport * from \"./graphs/bar-grouped\";\nexport * from \"./graphs/bar-stacked\";\nexport * from \"./graphs/bubble\";\nexport * from \"./graphs/line\";\nexport * from \"./graphs/scatter\";\nexport * from \"./graphs/pie\";\nexport * from \"./graphs/donut\";\nexport * from \"./graphs/skeleton\";\n\n// Layout\nexport * from \"./layout/spacer\";\nexport * from \"./layout/layout\";\n\n// MISC\nexport * from \"./axes/two-dimensional-axes\";\nexport * from \"./axes/axis\";\nexport * from \"./axes/grid\";\nexport * from \"./axes/ruler\";\nexport * from \"./axes/zero-line\";\n"]}

package/components/layout/layout.js

@@ -30,8 +30,8 @@ var LayoutComponent = /** @class */ (function (_super) {
         _this._instanceID = LayoutComponent.instanceID++;
         // Pass children data to the hierarchy layout
         // And calculate sum of sizes
-        var directionIsReversed = (_this.configs.direction === LayoutDirection.ROW_REVERSE) ||
-            (_this.configs.direction === LayoutDirection.COLUMN_REVERSE);
+        var directionIsReversed = _this.configs.direction === LayoutDirection.ROW_REVERSE ||
+            _this.configs.direction === LayoutDirection.COLUMN_REVERSE;
         if (directionIsReversed) {
             _this.children = _this.children.reverse();
         }
@@ -51,7 +51,8 @@ var LayoutComponent = /** @class */ (function (_super) {
         svg.selectAll("svg.layout-child-" + this._instanceID)
             .filter(function (d) {
             var growth = Tools.getProperty(d, "data", "growth", "x");
-            return growth === LayoutGrowth.PREFERRED || growth === LayoutGrowth.FIXED;
+            return (growth === LayoutGrowth.PREFERRED ||
+                growth === LayoutGrowth.FIXED);
         })
             .each(function (d) {
             sum += d.data.size;
@@ -60,7 +61,8 @@ var LayoutComponent = /** @class */ (function (_super) {
     };
     LayoutComponent.prototype.getNumOfStretchChildren = function () {
         var svg = this.parent;
-        return svg.selectAll("svg.layout-child-" + this._instanceID)
+        return svg
+            .selectAll("svg.layout-child-" + this._instanceID)
             .filter(function (d) {
             var growth = Tools.getProperty(d, "data", "growth", "x");
             return growth === LayoutGrowth.STRETCH;
@@ -72,22 +74,27 @@ var LayoutComponent = /** @class */ (function (_super) {
         if (animate === void 0) { animate = true; }
         // Get parent SVG to render inside of
         var svg = this.parent;
-        var _a = DOMUtils.getSVGElementSize(svg, { useAttrs: true }), width = _a.width, height = _a.height;
+        var _a = DOMUtils.getSVGElementSize(svg, {
+            useAttrs: true
+        }), width = _a.width, height = _a.height;
         var root = hierarchy({
             children: this.children
-        })
-            .sum(function (d) { return d.size; });
+        }).sum(function (d) { return d.size; });
         // Grab the correct treemap tile function based on direction
-        var tileType = (this.configs.direction === LayoutDirection.ROW || this.configs.direction === LayoutDirection.ROW_REVERSE)
-            ? treemapDice : treemapSlice;
+        var tileType = this.configs.direction === LayoutDirection.ROW ||
+            this.configs.direction === LayoutDirection.ROW_REVERSE
+            ? treemapDice
+            : treemapSlice;
         // Compute the position of all elements within the layout
         treemap()
             .tile(tileType)
             .size([width, height])(root);
         // TODORF - Remove
-        var horizontal = (this.configs.direction === LayoutDirection.ROW || this.configs.direction === LayoutDirection.ROW_REVERSE);
+        var horizontal = this.configs.direction === LayoutDirection.ROW ||
+            this.configs.direction === LayoutDirection.ROW_REVERSE;
         // Add new SVGs to the DOM for each layout child
-        var updatedSVGs = svg.selectAll("svg.layout-child-" + this._instanceID)
+        var updatedSVGs = svg
+            .selectAll("svg.layout-child-" + this._instanceID)
             .data(root.leaves(), function (d) { return d.data.id; });
         updatedSVGs
             .attr("width", function (d) { return d.x1 - d.x0; })
@@ -95,10 +102,13 @@ var LayoutComponent = /** @class */ (function (_super) {
         var enteringSVGs = updatedSVGs
             .enter()
             .append("svg")
-            .attr("class", function (d) { return "layout-child layout-child-" + _this._instanceID + " " + d.data.id; })
+            .attr("class", function (d) {
+            return "layout-child layout-child-" + _this._instanceID + " " + d.data.id;
+        })
             .attr("x", function (d) { return d.x0; })
             .attr("y", function (d) { return d.y0; });
-        enteringSVGs.merge(svg.selectAll("svg.layout-child-" + this._instanceID))
+        enteringSVGs
+            .merge(svg.selectAll("svg.layout-child-" + this._instanceID))
             .each(function (d) {
             var _this = this;
             // Set parent component for each child
@@ -106,25 +116,25 @@ var LayoutComponent = /** @class */ (function (_super) {
                 itemComponent.setParent(select(_this));
                 // Render preffered & fixed items
                 var growth = Tools.getProperty(d, "data", "growth", "x");
-                if (growth === LayoutGrowth.PREFERRED || growth === LayoutGrowth.FIXED) {
+                if (growth === LayoutGrowth.PREFERRED ||
+                    growth === LayoutGrowth.FIXED) {
                     itemComponent.render(animate);
                 }
             });
         });
-        svg.selectAll("svg.layout-child-" + this._instanceID)
-            .each(function (d) {
+        svg.selectAll("svg.layout-child-" + this._instanceID).each(function (d) {
             // Calculate preffered children sizes after internal rendering
             var growth = Tools.getProperty(d, "data", "growth", "x");
             var matchingSVGDimensions = DOMUtils.getSVGElementSize(select(this), { useBBox: true });
             if (growth === LayoutGrowth.PREFERRED) {
-                var matchingSVGWidth = horizontal ? matchingSVGDimensions.width : matchingSVGDimensions.height;
+                var matchingSVGWidth = horizontal
+                    ? matchingSVGDimensions.width
+                    : matchingSVGDimensions.height;
                 var svgWidth = horizontal ? width : height;
                 d.data.size = (matchingSVGWidth / svgWidth) * 100;
             }
         });
-        updatedSVGs
-            .exit()
-            .remove();
+        updatedSVGs.exit().remove();
         // Run through stretch x-items
         this.children
             .filter(function (child) {
@@ -132,22 +142,22 @@ var LayoutComponent = /** @class */ (function (_super) {
             return growth === LayoutGrowth.STRETCH;
         })
             .forEach(function (child, i) {
-            child.size = (100 - (+_this.getPreferedAndFixedSizeSum())) / (+_this.getNumOfStretchChildren());
+            child.size =
+                (100 - +_this.getPreferedAndFixedSizeSum()) /
+                    +_this.getNumOfStretchChildren();
         });
         // Pass children data to the hierarchy layout
         // And calculate sum of sizes
         root = hierarchy({
             children: this.children
-        })
-            .sum(function (d) { return d.size; });
+        }).sum(function (d) { return d.size; });
         // Compute the position of all elements within the layout
         treemap()
             .tile(tileType)
             .size([width, height])
             .padding(0)(root);
         // Add new SVGs to the DOM for each layout child
-        svg
-            .selectAll("svg.layout-child-" + this._instanceID)
+        svg.selectAll("svg.layout-child-" + this._instanceID)
             .data(root.leaves(), function (d) { return d.data.id; })
             .attr("x", function (d) { return d.x0; })
             .attr("y", function (d) { return d.y0; })
@@ -173,7 +183,9 @@ var LayoutComponent = /** @class */ (function (_super) {
     LayoutComponent.prototype.setServices = function (newObj) {
         _super.prototype.setServices.call(this, newObj);
         this.children.forEach(function (child) {
-            child.components.forEach(function (component) { return component.setServices(newObj); });
+            child.components.forEach(function (component) {
+                return component.setServices(newObj);
+            });
         });
     };
     LayoutComponent.prototype.destroy = function () {

package/components/layout/layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"layout.js","sourceRoot":"","sources":["layout.ts"],"names":[],"mappings":"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","sourcesContent":["// Internal Imports\nimport { Component } from \"../component\";\nimport {\n\tLayoutDirection,\n\tLayoutGrowth,\n\tLayoutComponentChild,\n\tLayoutConfigs\n} from \"../../interfaces/index\";\nimport { Tools } from \"../../tools\";\nimport { DOMUtils } from \"../../services\";\nimport { ChartModel } from \"../../model\";\n\n// D3 Imports\nimport { select } from \"d3-selection\";\nimport {\n\thierarchy,\n\ttreemap,\n\ttreemapSlice,\n\ttreemapDice\n} from \"d3-hierarchy\";\n\n// TODO - What if there is no \"growth\" object?\nexport class LayoutComponent extends Component {\n\t// Give every layout component a distinct ID\n\t// so they don't interfere when querying elements\n\tstatic instanceID = Math.floor(Math.random() * 99999999999);\n\n\ttype = \"layout\";\n\n\tchildren: LayoutComponentChild[];\n\n\tprivate _instanceID: number;\n\n\tconstructor(model: ChartModel, services: any, children: LayoutComponentChild[], configs?: LayoutConfigs) {\n\t\tsuper(model, services, configs);\n\n\t\tthis.configs = configs;\n\t\tthis.children = children;\n\n\t\tthis._instanceID = LayoutComponent.instanceID++;\n\n\t\t// Pass children data to the hierarchy layout\n\t\t// And calculate sum of sizes\n\t\tconst directionIsReversed = (this.configs.direction === LayoutDirection.ROW_REVERSE) ||\n\t\t\t(this.configs.direction === LayoutDirection.COLUMN_REVERSE);\n\t\tif (directionIsReversed) {\n\t\t\tthis.children = this.children.reverse();\n\t\t}\n\t\tthis.init();\n\t}\n\n\tinit() {\n\t\tthis.children.forEach(child => {\n\t\t\tchild.components.forEach(component => {\n\t\t\t\tcomponent.init();\n\t\t\t});\n\t\t});\n\t}\n\n\tgetPreferedAndFixedSizeSum(): number {\n\t\tconst svg = this.parent;\n\t\tlet sum = 0;\n\n\t\tsvg.selectAll(`svg.layout-child-${this._instanceID}`)\n\t\t\t.filter((d: any) => {\n\t\t\t\tconst growth = Tools.getProperty(d, \"data\", \"growth\", \"x\");\n\t\t\t\treturn growth === LayoutGrowth.PREFERRED || growth === LayoutGrowth.FIXED;\n\t\t\t})\n\t\t\t.each(function(d: any) {\n\t\t\t\tsum += d.data.size;\n\t\t\t});\n\n\t\treturn sum;\n\t}\n\n\tgetNumOfStretchChildren(): number {\n\t\tconst svg = this.parent;\n\n\t\treturn svg.selectAll(`svg.layout-child-${this._instanceID}`)\n\t\t\t.filter((d: any) => {\n\t\t\t\tconst growth = Tools.getProperty(d, \"data\", \"growth\", \"x\");\n\t\t\t\treturn growth === LayoutGrowth.STRETCH;\n\t\t\t})\n\t\t\t.size();\n\t}\n\n\trender(animate = true) {\n\t\t// Get parent SVG to render inside of\n\t\tconst svg = this.parent;\n\t\tconst { width, height } = DOMUtils.getSVGElementSize(svg, { useAttrs: true });\n\n\t\tlet root = hierarchy({\n\t\t\tchildren: this.children\n\t\t})\n\t\t\t.sum((d: any) => d.size);\n\n\t\t// Grab the correct treemap tile function based on direction\n\t\tconst tileType = (this.configs.direction === LayoutDirection.ROW || this.configs.direction === LayoutDirection.ROW_REVERSE)\n\t\t\t? treemapDice : treemapSlice;\n\n\t\t// Compute the position of all elements within the layout\n\t\ttreemap()\n\t\t\t.tile(tileType)\n\t\t\t.size([width, height])\n\t\t\t(root);\n\n\t\t// TODORF - Remove\n\t\tconst horizontal = (this.configs.direction === LayoutDirection.ROW || this.configs.direction === LayoutDirection.ROW_REVERSE);\n\n\t\t// Add new SVGs to the DOM for each layout child\n\t\tconst updatedSVGs = svg.selectAll(`svg.layout-child-${this._instanceID}`)\n\t\t\t.data(root.leaves(), (d: any) => d.data.id);\n\n\t\tupdatedSVGs\n\t\t\t.attr(\"width\", (d: any) => d.x1 - d.x0)\n\t\t\t.attr(\"height\", (d: any) => d.y1 - d.y0);\n\n\t\tconst enteringSVGs = updatedSVGs\n\t\t\t.enter()\n\t\t\t.append(\"svg\")\n\t\t\t\t.attr(\"class\", (d: any) => `layout-child layout-child-${this._instanceID} ${d.data.id}`)\n\t\t\t\t.attr(\"x\", (d: any) => d.x0)\n\t\t\t\t.attr(\"y\", (d: any) => d.y0);\n\n\t\tenteringSVGs.merge(svg.selectAll(`svg.layout-child-${this._instanceID}`))\n\t\t\t.each(function(d: any) {\n\t\t\t\t// Set parent component for each child\n\t\t\t\td.data.components.forEach(itemComponent => {\n\t\t\t\t\titemComponent.setParent(select(this));\n\n\t\t\t\t\t// Render preffered & fixed items\n\t\t\t\t\tconst growth = Tools.getProperty(d, \"data\", \"growth\", \"x\");\n\t\t\t\t\tif (growth === LayoutGrowth.PREFERRED || growth === LayoutGrowth.FIXED) {\n\t\t\t\t\t\titemComponent.render(animate);\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t});\n\n\t\tsvg.selectAll(`svg.layout-child-${this._instanceID}`)\n\t\t.each(function(d: any) {\n\t\t\t// Calculate preffered children sizes after internal rendering\n\t\t\tconst growth = Tools.getProperty(d, \"data\", \"growth\", \"x\");\n\t\t\tconst matchingSVGDimensions = DOMUtils.getSVGElementSize(select(this), { useBBox: true });\n\t\t\tif (growth === LayoutGrowth.PREFERRED) {\n\t\t\t\tconst matchingSVGWidth = horizontal ? matchingSVGDimensions.width : matchingSVGDimensions.height;\n\t\t\t\tconst svgWidth = horizontal ? width : height;\n\n\t\t\t\td.data.size = (matchingSVGWidth / svgWidth) * 100;\n\t\t\t}\n\t\t});\n\n\t\tupdatedSVGs\n\t\t\t.exit()\n\t\t\t.remove();\n\n\t\t// Run through stretch x-items\n\t\tthis.children\n\t\t\t.filter(child => {\n\t\t\t\tconst growth = Tools.getProperty(child, \"growth\", \"x\");\n\t\t\t\treturn growth === LayoutGrowth.STRETCH;\n\t\t\t})\n\t\t\t.forEach((child, i) => {\n\t\t\t\tchild.size = (100 - (+this.getPreferedAndFixedSizeSum())) / (+this.getNumOfStretchChildren());\n\t\t\t});\n\n\t\t// Pass children data to the hierarchy layout\n\t\t// And calculate sum of sizes\n\t\troot = hierarchy({\n\t\t\tchildren: this.children\n\t\t})\n\t\t.sum((d: any) => d.size);\n\n\t\t// Compute the position of all elements within the layout\n\t\ttreemap()\n\t\t\t.tile(tileType)\n\t\t\t.size([width, height])\n\t\t\t.padding(0)\n\t\t\t(root);\n\n\t\t// Add new SVGs to the DOM for each layout child\n\t\tsvg\n\t\t\t.selectAll(`svg.layout-child-${this._instanceID}`)\n\t\t\t.data(root.leaves(), (d: any) => d.data.id)\n\t\t\t.attr(\"x\", (d: any) => d.x0)\n\t\t\t.attr(\"y\", (d: any) => d.y0)\n\t\t\t.attr(\"width\", (d: any) => d.x1 - d.x0)\n\t\t\t.attr(\"height\", (d: any) => d.y1 - d.y0)\n\t\t\t.each(function(d: any, i) {\n\t\t\t\td.data.components.forEach(itemComponent => {\n\t\t\t\t\tconst growth = Tools.getProperty(d, \"data\", \"growth\", \"x\");\n\t\t\t\t\tif (growth === LayoutGrowth.STRETCH) {\n\t\t\t\t\t\titemComponent.render(animate);\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t});\n\t}\n\n\t// Pass on model to children as well\n\tsetModel(newObj) {\n\t\tsuper.setModel(newObj);\n\n\t\tthis.children.forEach(child => {\n\t\t\tchild.components.forEach(component => component.setModel(newObj));\n\t\t});\n\t}\n\n\t// Pass on essentials to children as well\n\tsetServices(newObj) {\n\t\tsuper.setServices(newObj);\n\n\t\tthis.children.forEach(child => {\n\t\t\tchild.components.forEach(component => component.setServices(newObj));\n\t\t});\n\t}\n\n\tdestroy() {\n\t\tthis.children.forEach(child => {\n\t\t\tchild.components.forEach(component => component.destroy());\n\t\t});\n\t}\n}\n"]}
+{"version":3,"file":"layout.js","sourceRoot":"","sources":["layout.ts"],"names":[],"mappings":"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","sourcesContent":["// Internal Imports\nimport { Component } from \"../component\";\nimport {\n\tLayoutDirection,\n\tLayoutGrowth,\n\tLayoutComponentChild,\n\tLayoutConfigs\n} from \"../../interfaces/index\";\nimport { Tools } from \"../../tools\";\nimport { DOMUtils } from \"../../services\";\nimport { ChartModel } from \"../../model\";\n\n// D3 Imports\nimport { select } from \"d3-selection\";\nimport { hierarchy, treemap, treemapSlice, treemapDice } from \"d3-hierarchy\";\n\n// TODO - What if there is no \"growth\" object?\nexport class LayoutComponent extends Component {\n\t// Give every layout component a distinct ID\n\t// so they don't interfere when querying elements\n\tstatic instanceID = Math.floor(Math.random() * 99999999999);\n\n\ttype = \"layout\";\n\n\tchildren: LayoutComponentChild[];\n\n\tprivate _instanceID: number;\n\n\tconstructor(\n\t\tmodel: ChartModel,\n\t\tservices: any,\n\t\tchildren: LayoutComponentChild[],\n\t\tconfigs?: LayoutConfigs\n\t) {\n\t\tsuper(model, services, configs);\n\n\t\tthis.configs = configs;\n\t\tthis.children = children;\n\n\t\tthis._instanceID = LayoutComponent.instanceID++;\n\n\t\t// Pass children data to the hierarchy layout\n\t\t// And calculate sum of sizes\n\t\tconst directionIsReversed =\n\t\t\tthis.configs.direction === LayoutDirection.ROW_REVERSE ||\n\t\t\tthis.configs.direction === LayoutDirection.COLUMN_REVERSE;\n\t\tif (directionIsReversed) {\n\t\t\tthis.children = this.children.reverse();\n\t\t}\n\t\tthis.init();\n\t}\n\n\tinit() {\n\t\tthis.children.forEach(child => {\n\t\t\tchild.components.forEach(component => {\n\t\t\t\tcomponent.init();\n\t\t\t});\n\t\t});\n\t}\n\n\tgetPreferedAndFixedSizeSum(): number {\n\t\tconst svg = this.parent;\n\t\tlet sum = 0;\n\n\t\tsvg.selectAll(`svg.layout-child-${this._instanceID}`)\n\t\t\t.filter((d: any) => {\n\t\t\t\tconst growth = Tools.getProperty(d, \"data\", \"growth\", \"x\");\n\t\t\t\treturn (\n\t\t\t\t\tgrowth === LayoutGrowth.PREFERRED ||\n\t\t\t\t\tgrowth === LayoutGrowth.FIXED\n\t\t\t\t);\n\t\t\t})\n\t\t\t.each(function(d: any) {\n\t\t\t\tsum += d.data.size;\n\t\t\t});\n\n\t\treturn sum;\n\t}\n\n\tgetNumOfStretchChildren(): number {\n\t\tconst svg = this.parent;\n\n\t\treturn svg\n\t\t\t.selectAll(`svg.layout-child-${this._instanceID}`)\n\t\t\t.filter((d: any) => {\n\t\t\t\tconst growth = Tools.getProperty(d, \"data\", \"growth\", \"x\");\n\t\t\t\treturn growth === LayoutGrowth.STRETCH;\n\t\t\t})\n\t\t\t.size();\n\t}\n\n\trender(animate = true) {\n\t\t// Get parent SVG to render inside of\n\t\tconst svg = this.parent;\n\t\tconst { width, height } = DOMUtils.getSVGElementSize(svg, {\n\t\t\tuseAttrs: true\n\t\t});\n\n\t\tlet root = hierarchy({\n\t\t\tchildren: this.children\n\t\t}).sum((d: any) => d.size);\n\n\t\t// Grab the correct treemap tile function based on direction\n\t\tconst tileType =\n\t\t\tthis.configs.direction === LayoutDirection.ROW ||\n\t\t\tthis.configs.direction === LayoutDirection.ROW_REVERSE\n\t\t\t\t? treemapDice\n\t\t\t\t: treemapSlice;\n\n\t\t// Compute the position of all elements within the layout\n\t\ttreemap()\n\t\t\t.tile(tileType)\n\t\t\t.size([width, height])(root);\n\n\t\t// TODORF - Remove\n\t\tconst horizontal =\n\t\t\tthis.configs.direction === LayoutDirection.ROW ||\n\t\t\tthis.configs.direction === LayoutDirection.ROW_REVERSE;\n\n\t\t// Add new SVGs to the DOM for each layout child\n\t\tconst updatedSVGs = svg\n\t\t\t.selectAll(`svg.layout-child-${this._instanceID}`)\n\t\t\t.data(root.leaves(), (d: any) => d.data.id);\n\n\t\tupdatedSVGs\n\t\t\t.attr(\"width\", (d: any) => d.x1 - d.x0)\n\t\t\t.attr(\"height\", (d: any) => d.y1 - d.y0);\n\n\t\tconst enteringSVGs = updatedSVGs\n\t\t\t.enter()\n\t\t\t.append(\"svg\")\n\t\t\t.attr(\n\t\t\t\t\"class\",\n\t\t\t\t(d: any) =>\n\t\t\t\t\t`layout-child layout-child-${this._instanceID} ${d.data.id}`\n\t\t\t)\n\t\t\t.attr(\"x\", (d: any) => d.x0)\n\t\t\t.attr(\"y\", (d: any) => d.y0);\n\n\t\tenteringSVGs\n\t\t\t.merge(svg.selectAll(`svg.layout-child-${this._instanceID}`))\n\t\t\t.each(function(d: any) {\n\t\t\t\t// Set parent component for each child\n\t\t\t\td.data.components.forEach(itemComponent => {\n\t\t\t\t\titemComponent.setParent(select(this));\n\n\t\t\t\t\t// Render preffered & fixed items\n\t\t\t\t\tconst growth = Tools.getProperty(d, \"data\", \"growth\", \"x\");\n\t\t\t\t\tif (\n\t\t\t\t\t\tgrowth === LayoutGrowth.PREFERRED ||\n\t\t\t\t\t\tgrowth === LayoutGrowth.FIXED\n\t\t\t\t\t) {\n\t\t\t\t\t\titemComponent.render(animate);\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t});\n\n\t\tsvg.selectAll(`svg.layout-child-${this._instanceID}`).each(function(\n\t\t\td: any\n\t\t) {\n\t\t\t// Calculate preffered children sizes after internal rendering\n\t\t\tconst growth = Tools.getProperty(d, \"data\", \"growth\", \"x\");\n\t\t\tconst matchingSVGDimensions = DOMUtils.getSVGElementSize(\n\t\t\t\tselect(this),\n\t\t\t\t{ useBBox: true }\n\t\t\t);\n\t\t\tif (growth === LayoutGrowth.PREFERRED) {\n\t\t\t\tconst matchingSVGWidth = horizontal\n\t\t\t\t\t? matchingSVGDimensions.width\n\t\t\t\t\t: matchingSVGDimensions.height;\n\t\t\t\tconst svgWidth = horizontal ? width : height;\n\n\t\t\t\td.data.size = (matchingSVGWidth / svgWidth) * 100;\n\t\t\t}\n\t\t});\n\n\t\tupdatedSVGs.exit().remove();\n\n\t\t// Run through stretch x-items\n\t\tthis.children\n\t\t\t.filter(child => {\n\t\t\t\tconst growth = Tools.getProperty(child, \"growth\", \"x\");\n\t\t\t\treturn growth === LayoutGrowth.STRETCH;\n\t\t\t})\n\t\t\t.forEach((child, i) => {\n\t\t\t\tchild.size =\n\t\t\t\t\t(100 - +this.getPreferedAndFixedSizeSum()) /\n\t\t\t\t\t+this.getNumOfStretchChildren();\n\t\t\t});\n\n\t\t// Pass children data to the hierarchy layout\n\t\t// And calculate sum of sizes\n\t\troot = hierarchy({\n\t\t\tchildren: this.children\n\t\t}).sum((d: any) => d.size);\n\n\t\t// Compute the position of all elements within the layout\n\t\ttreemap()\n\t\t\t.tile(tileType)\n\t\t\t.size([width, height])\n\t\t\t.padding(0)(root);\n\n\t\t// Add new SVGs to the DOM for each layout child\n\t\tsvg.selectAll(`svg.layout-child-${this._instanceID}`)\n\t\t\t.data(root.leaves(), (d: any) => d.data.id)\n\t\t\t.attr(\"x\", (d: any) => d.x0)\n\t\t\t.attr(\"y\", (d: any) => d.y0)\n\t\t\t.attr(\"width\", (d: any) => d.x1 - d.x0)\n\t\t\t.attr(\"height\", (d: any) => d.y1 - d.y0)\n\t\t\t.each(function(d: any, i) {\n\t\t\t\td.data.components.forEach(itemComponent => {\n\t\t\t\t\tconst growth = Tools.getProperty(d, \"data\", \"growth\", \"x\");\n\t\t\t\t\tif (growth === LayoutGrowth.STRETCH) {\n\t\t\t\t\t\titemComponent.render(animate);\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t});\n\t}\n\n\t// Pass on model to children as well\n\tsetModel(newObj) {\n\t\tsuper.setModel(newObj);\n\n\t\tthis.children.forEach(child => {\n\t\t\tchild.components.forEach(component => component.setModel(newObj));\n\t\t});\n\t}\n\n\t// Pass on essentials to children as well\n\tsetServices(newObj) {\n\t\tsuper.setServices(newObj);\n\n\t\tthis.children.forEach(child => {\n\t\t\tchild.components.forEach(component =>\n\t\t\t\tcomponent.setServices(newObj)\n\t\t\t);\n\t\t});\n\t}\n\n\tdestroy() {\n\t\tthis.children.forEach(child => {\n\t\t\tchild.components.forEach(component => component.destroy());\n\t\t});\n\t}\n}\n"]}

package/components/layout/spacer.js

@@ -22,7 +22,8 @@ var Spacer = /** @class */ (function (_super) {
         return _this;
     }
     Spacer.prototype.render = function () {
-        this.getContainerSVG().append("rect")
+        this.getContainerSVG()
+            .append("rect")
             .attr("x", 0)
             .attr("y", 0)
             .attr("width", this.configs.size || Configuration.spacers.default.size)

package/components/layout/spacer.js.map

@@ -1 +1 @@
-{"version":3,"file":"spacer.js","sourceRoot":"","sources":["spacer.ts"],"names":[],"mappings":";;;;;;;;;;;;;AAAA,mBAAmB;AACnB,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,KAAK,aAAa,MAAM,qBAAqB,CAAC;AAErD;IAA4B,0BAAS;IAArC;QAAA,qEAWC;QAVA,UAAI,GAAG,QAAQ,CAAC;;IAUjB,CAAC;IARA,uBAAM,GAAN;QACC,IAAI,CAAC,eAAe,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC;aACnC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;aACZ,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;aACZ,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,IAAI,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC;aACtE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,IAAI,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC;aACvE,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;IACtB,CAAC;IACF,aAAC;AAAD,CAAC,AAXD,CAA4B,SAAS,GAWpC","sourcesContent":["// Internal Imports\nimport { Component } from \"../component\";\nimport * as Configuration from \"../../configuration\";\n\nexport class Spacer extends Component {\n\ttype = \"spacer\";\n\n\trender() {\n\t\tthis.getContainerSVG().append(\"rect\")\n\t\t\t.attr(\"x\", 0)\n\t\t\t.attr(\"y\", 0)\n\t\t\t.attr(\"width\", this.configs.size || Configuration.spacers.default.size)\n\t\t\t.attr(\"height\", this.configs.size || Configuration.spacers.default.size)\n\t\t\t.attr(\"opacity\", 0);\n\t}\n}\n"]}
+{"version":3,"file":"spacer.js","sourceRoot":"","sources":["spacer.ts"],"names":[],"mappings":";;;;;;;;;;;;;AAAA,mBAAmB;AACnB,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,KAAK,aAAa,MAAM,qBAAqB,CAAC;AAErD;IAA4B,0BAAS;IAArC;QAAA,qEAkBC;QAjBA,UAAI,GAAG,QAAQ,CAAC;;IAiBjB,CAAC;IAfA,uBAAM,GAAN;QACC,IAAI,CAAC,eAAe,EAAE;aACpB,MAAM,CAAC,MAAM,CAAC;aACd,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;aACZ,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;aACZ,IAAI,CACJ,OAAO,EACP,IAAI,CAAC,OAAO,CAAC,IAAI,IAAI,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CACvD;aACA,IAAI,CACJ,QAAQ,EACR,IAAI,CAAC,OAAO,CAAC,IAAI,IAAI,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CACvD;aACA,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;IACtB,CAAC;IACF,aAAC;AAAD,CAAC,AAlBD,CAA4B,SAAS,GAkBpC","sourcesContent":["// Internal Imports\nimport { Component } from \"../component\";\nimport * as Configuration from \"../../configuration\";\n\nexport class Spacer extends Component {\n\ttype = \"spacer\";\n\n\trender() {\n\t\tthis.getContainerSVG()\n\t\t\t.append(\"rect\")\n\t\t\t.attr(\"x\", 0)\n\t\t\t.attr(\"y\", 0)\n\t\t\t.attr(\n\t\t\t\t\"width\",\n\t\t\t\tthis.configs.size || Configuration.spacers.default.size\n\t\t\t)\n\t\t\t.attr(\n\t\t\t\t\"height\",\n\t\t\t\tthis.configs.size || Configuration.spacers.default.size\n\t\t\t)\n\t\t\t.attr(\"opacity\", 0);\n\t}\n}\n"]}