@carbon/charts 0.41.20 → 0.41.24

package/components/graphs/skeleton.js

@@ -12,30 +12,30 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 // Internal Imports
-import { Component } from "../component";
-import { DOMUtils } from "../../services";
-import { Tools } from "../../tools";
-import { Skeletons, CartesianOrientations, Alignments } from "../../interfaces/enums";
-import * as Configuration from "../../configuration";
+import { Component } from '../component';
+import { DOMUtils } from '../../services';
+import { Tools } from '../../tools';
+import { Skeletons, CartesianOrientations, Alignments, } from '../../interfaces/enums';
+import * as Configuration from '../../configuration';
 // D3 Imports
-import { scaleLinear } from "d3-scale";
-import { easeLinear } from "d3-ease";
-import { arc } from "d3-shape";
+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";
+        _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
+            useAttrs: true,
         }), width = _a.width, height = _a.height;
-        svg.attr("width", width).attr("height", height);
-        var isDataLoading = Tools.getProperty(this.getOptions(), "data", "loading");
+        svg.attr('width', width).attr('height', height);
+        var isDataLoading = Tools.getProperty(this.getOptions(), 'data', 'loading');
         // display a skeleton if there is no chart data or the loading flag is set to true
         if (isDataLoading) {
             this.renderSkeleton(isDataLoading);
@@ -67,7 +67,7 @@ var Skeleton = /** @class */ (function (_super) {
         this.drawXGrid(showShimmerEffect);
         this.drawYGrid(showShimmerEffect);
         if (showShimmerEffect) {
-            this.setShimmerEffect("shimmer-lines");
+            this.setShimmerEffect('shimmer-lines');
         }
     };
     Skeleton.prototype.renderVertOrHorizSkeleton = function (showShimmerEffect) {
@@ -80,14 +80,14 @@ var Skeleton = /** @class */ (function (_super) {
         if (orientation === CartesianOrientations.HORIZONTAL) {
             this.drawXGrid(showShimmerEffect);
         }
-        this.setShimmerEffect("shimmer-lines");
+        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");
+            this.setShimmerEffect('shimmer-areas');
         }
     };
     Skeleton.prototype.renderDonutSkeleton = function (showShimmerEffect) {
@@ -95,7 +95,7 @@ var Skeleton = /** @class */ (function (_super) {
         var innerRadius = this.computeInnerRadius();
         this.drawRing(outerRadius, innerRadius, showShimmerEffect);
         if (showShimmerEffect) {
-            this.setShimmerEffect("shimmer-areas");
+            this.setShimmerEffect('shimmer-areas');
         }
     };
     Skeleton.prototype.setScales = function () {
@@ -108,80 +108,80 @@ var Skeleton = /** @class */ (function (_super) {
         var svg = this.parent;
         var parent = svg.node().parentNode;
         var _a = DOMUtils.getSVGElementSize(parent, {
-            useAttrs: true
+            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%");
+        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);
+            .attr('x', xScaleStart)
+            .attr('y', yScaleStart);
         backdropRect
-            .classed("shimmer-effect-lines", showShimmerEffect)
-            .classed("empty-state-lines", !showShimmerEffect);
+            .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.getOptions(), "grid", "x", "numberOfTicks");
+        var height = this.backdrop.attr('height');
+        var width = this.backdrop.attr('width');
+        var ticksNumber = Tools.getProperty(this.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);
+        var xGridG = DOMUtils.appendOrSelect(this.backdrop, 'g.x.skeleton');
+        var update = xGridG.selectAll('line').data(ticksValues);
         update
             .enter()
-            .append("line")
+            .append('line')
             .merge(update)
-            .attr("x1", function (d) { return d; })
-            .attr("x2", function (d) { return d; })
-            .attr("y1", 0)
-            .attr("y2", height);
+            .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);
+            .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.getOptions(), "grid", "y", "numberOfTicks");
+        var height = this.backdrop.attr('height');
+        var width = this.backdrop.attr('width');
+        var ticksNumber = Tools.getProperty(this.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);
+        var yGridG = DOMUtils.appendOrSelect(this.backdrop, 'g.y.skeleton');
+        var update = yGridG.selectAll('line').data(ticksValues);
         update
             .enter()
-            .append("line")
+            .append('line')
             .merge(update)
-            .attr("x1", 0)
-            .attr("x2", width)
-            .attr("y1", function (d) { return d; })
-            .attr("y2", function (d) { return d; });
+            .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);
+            .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 optionName = innerRadius === 0 ? "pie" : "donut";
-        var alignment = Tools.getProperty(this.getOptions(), optionName, "alignment");
-        DOMUtils.appendOrSelect(container, "rect.chart-skeleton-area-container")
-            .attr("width", width)
-            .attr("height", height)
-            .attr("fill", "none");
+        var container = DOMUtils.appendOrSelect(svg, 'svg.chart-skeleton')
+            .attr('width', width)
+            .attr('height', height);
+        var optionName = innerRadius === 0 ? 'pie' : 'donut';
+        var alignment = Tools.getProperty(this.getOptions(), optionName, 'alignment');
+        DOMUtils.appendOrSelect(container, 'rect.chart-skeleton-area-container')
+            .attr('width', width)
+            .attr('height', height)
+            .attr('fill', 'none');
         var arcPathGenerator = arc()
             .innerRadius(innerRadius)
             .outerRadius(outerRadius)
@@ -190,12 +190,12 @@ var Skeleton = /** @class */ (function (_super) {
         // centering circle inside the container
         var tcx = outerRadius + Math.abs(Configuration.pie.radiusOffset);
         var tcy = outerRadius + (Math.min(width, height) - outerRadius * 2) / 2;
-        var skeletonAreaShape = 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);
+        var skeletonAreaShape = 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);
         // Position skeleton
         var translateX = outerRadius + Configuration.pie.xOffset;
         if (alignment === Alignments.CENTER) {
@@ -205,7 +205,7 @@ var Skeleton = /** @class */ (function (_super) {
             translateX = width - outerRadius - Configuration.pie.xOffset;
         }
         var translateY = outerRadius + Configuration.pie.yOffset;
-        skeletonAreaShape.attr("transform", "translate(" + translateX + ", " + translateY + ")");
+        skeletonAreaShape.attr('transform', "translate(" + translateX + ", " + translateY + ")");
     };
     // same logic in pie
     Skeleton.prototype.computeOuterRadius = function () {
@@ -221,40 +221,40 @@ var Skeleton = /** @class */ (function (_super) {
         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 stopBgShimmerClass = 'stop-bg-shimmer';
+        var stopShimmerClass = 'stop-shimmer';
+        var container = this.parent.select('.chart-skeleton');
         var width = DOMUtils.getSVGElementSize(this.parent, {
-            useAttrs: true
+            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 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)")
+                .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);
+                .attr('gradientTransform', "translate(" + (endPoint + 3 * shimmerWidth * width) + ", 0)")
+                .on('end', repeat);
         }
     };
     Skeleton.prototype.removeSkeleton = function () {
-        var container = this.parent.select(".chart-skeleton");
+        var container = this.parent.select('.chart-skeleton');
         container.remove();
     };
     return Skeleton;

package/components/graphs/skeleton.js.map

@@ -1 +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 {\n\tSkeletons,\n\tCartesianOrientations,\n\tAlignments\n} from \"../../interfaces/enums\";\nimport * as Configuration from \"../../configuration\";\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 isDataLoading = Tools.getProperty(\n\t\t\tthis.getOptions(),\n\t\t\t\"data\",\n\t\t\t\"loading\"\n\t\t);\n\n\t\t// display a skeleton if there is no chart data or the loading flag is set to true\n\t\tif (isDataLoading) {\n\t\t\tthis.renderSkeleton(isDataLoading);\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().domain([0, 1]).range(xRange);\n\t\tthis.yScale = scaleLinear().domain([0, 1]).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.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\n\t\t\t.ticks(ticksNumber)\n\t\t\t.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.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\n\t\t\t.ticks(ticksNumber)\n\t\t\t.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\n\t\tconst optionName = innerRadius === 0 ? \"pie\" : \"donut\";\n\n\t\tconst alignment = Tools.getProperty(\n\t\t\tthis.getOptions(),\n\t\t\toptionName,\n\t\t\t\"alignment\"\n\t\t);\n\n\t\tDOMUtils.appendOrSelect(container, \"rect.chart-skeleton-area-container\")\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(Configuration.pie.radiusOffset);\n\t\tconst tcy =\n\t\t\touterRadius + (Math.min(width, height) - outerRadius * 2) / 2;\n\n\t\tconst skeletonAreaShape = DOMUtils.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\n\t\t// Position skeleton\n\t\tlet translateX = outerRadius + Configuration.pie.xOffset;\n\t\tif (alignment === Alignments.CENTER) {\n\t\t\ttranslateX = width / 2;\n\t\t} else if (alignment === Alignments.RIGHT) {\n\t\t\ttranslateX = width - outerRadius - Configuration.pie.xOffset;\n\t\t}\n\n\t\tconst translateY = outerRadius + Configuration.pie.yOffset;\n\t\tskeletonAreaShape.attr(\n\t\t\t\"transform\",\n\t\t\t`translate(${translateX}, ${translateY})`\n\t\t);\n\t}\n\n\t// same logic in pie\n\tcomputeOuterRadius() {\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 + Configuration.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=\"${\n\t\t\tstartPoint + 2 * shimmerWidth\n\t\t}\"></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"]}
+{"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 {\n\tSkeletons,\n\tCartesianOrientations,\n\tAlignments,\n} from '../../interfaces/enums';\nimport * as Configuration from '../../configuration';\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 isDataLoading = Tools.getProperty(\n\t\t\tthis.getOptions(),\n\t\t\t'data',\n\t\t\t'loading'\n\t\t);\n\n\t\t// display a skeleton if there is no chart data or the loading flag is set to true\n\t\tif (isDataLoading) {\n\t\t\tthis.renderSkeleton(isDataLoading);\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().domain([0, 1]).range(xRange);\n\t\tthis.yScale = scaleLinear().domain([0, 1]).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.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\n\t\t\t.ticks(ticksNumber)\n\t\t\t.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.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\n\t\t\t.ticks(ticksNumber)\n\t\t\t.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\n\t\tconst optionName = innerRadius === 0 ? 'pie' : 'donut';\n\n\t\tconst alignment = Tools.getProperty(\n\t\t\tthis.getOptions(),\n\t\t\toptionName,\n\t\t\t'alignment'\n\t\t);\n\n\t\tDOMUtils.appendOrSelect(container, 'rect.chart-skeleton-area-container')\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(Configuration.pie.radiusOffset);\n\t\tconst tcy =\n\t\t\touterRadius + (Math.min(width, height) - outerRadius * 2) / 2;\n\n\t\tconst skeletonAreaShape = DOMUtils.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\n\t\t// Position skeleton\n\t\tlet translateX = outerRadius + Configuration.pie.xOffset;\n\t\tif (alignment === Alignments.CENTER) {\n\t\t\ttranslateX = width / 2;\n\t\t} else if (alignment === Alignments.RIGHT) {\n\t\t\ttranslateX = width - outerRadius - Configuration.pie.xOffset;\n\t\t}\n\n\t\tconst translateY = outerRadius + Configuration.pie.yOffset;\n\t\tskeletonAreaShape.attr(\n\t\t\t'transform',\n\t\t\t`translate(${translateX}, ${translateY})`\n\t\t);\n\t}\n\n\t// same logic in pie\n\tcomputeOuterRadius() {\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 + Configuration.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=\"${\n\t\t\tstartPoint + 2 * shimmerWidth\n\t\t}\"></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/graphs/treemap.d.ts

@@ -1,4 +1,4 @@
-import { Component } from "../component";
+import { Component } from '../component';
 export declare class Treemap extends Component {
     type: string;
     init(): void;