@carbon/charts 1.8.0 → 1.9.0-next.0

package/components/graphs/skeleton.js

@@ -1,272 +0,0 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-// Internal Imports
-import { Component } from '../component';
-import { DOMUtils } from '../../services';
-import * as 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';
-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 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);
-        }
-        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 _a = DOMUtils.getSVGElementSize(svg, {
-            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)
-            .style('stroke', showShimmerEffect
-            ? "url(#" + this.services.domUtils.generateElementIDString("shimmer-lines") + ")"
-            : null);
-    };
-    Skeleton.prototype.drawXGrid = function (showShimmerEffect) {
-        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);
-        update
-            .enter()
-            .append('line')
-            .merge(update)
-            .attr('x1', function (d) { return d; })
-            .attr('x2', function (d) { return d; })
-            .attr('y1', 0)
-            .attr('y2', '100%');
-        xGridG
-            .selectAll('line')
-            .classed('shimmer-effect-lines', showShimmerEffect)
-            .classed('empty-state-lines', !showShimmerEffect)
-            .style('stroke', showShimmerEffect
-            ? "url(#" + this.services.domUtils.generateElementIDString("shimmer-lines") + ")"
-            : null);
-    };
-    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 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)
-            .style('stroke', showShimmerEffect
-            ? "url(#" + this.services.domUtils.generateElementIDString("shimmer-lines") + ")"
-            : null);
-    };
-    Skeleton.prototype.drawRing = function (outerRadius, innerRadius, shimmer) {
-        if (shimmer === void 0) { shimmer = true; }
-        var svg = this.parent;
-        var _a = DOMUtils.getSVGElementSize(svg, {
-            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 arcPathGenerator = arc()
-            .innerRadius(innerRadius)
-            .outerRadius(outerRadius)
-            .startAngle(0)
-            .endAngle(Math.PI * 2);
-        // 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)
-            .style('fill', shimmer
-            ? "url(#" + this.services.domUtils.generateElementIDString("shimmer-areas") + ")"
-            : null);
-        // Position skeleton
-        var translateX = outerRadius + Configuration.pie.xOffset;
-        if (alignment === Alignments.CENTER) {
-            translateX = width / 2;
-        }
-        else if (alignment === Alignments.RIGHT) {
-            translateX = width - outerRadius - Configuration.pie.xOffset;
-        }
-        var translateY = outerRadius + Configuration.pie.yOffset;
-        skeletonAreaShape.attr('transform', "translate(" + translateX + ", " + translateY + ")");
-    };
-    // same logic in pie
-    Skeleton.prototype.computeOuterRadius = function () {
-        var _a = DOMUtils.getSVGElementSize(this.parent, {
-            useAttrs: true,
-        }), width = _a.width, height = _a.height;
-        var radius = Math.min(width, height) / 2;
-        return radius + Configuration.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', this.services.domUtils.generateElementIDString(gradientId))
-            .attr('class', 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

@@ -1 +0,0 @@
-{"version":3,"file":"skeleton.js","sourceRoot":"","sources":["skeleton.ts"],"names":[],"mappings":";;;;;;;;;;;;;AAAA,mBAAmB;AACnB,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,KAAK,KAAK,MAAM,aAAa,CAAC;AACrC,OAAO,EACN,SAAS,EACT,qBAAqB,EACrB,UAAU,GACV,MAAM,wBAAwB,CAAC;AAChC,OAAO,KAAK,aAAa,MAAM,qBAAqB,CAAC;AAErD,aAAa;AACb,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAE/B;IAA8B,4BAAS;IAAvC;QAAA,qEA+UC;QA9UA,UAAI,GAAG,UAAU,CAAC;;IA8UnB,CAAC;IAzUA,yBAAM,GAAN;QACC,IAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CACtC,IAAI,CAAC,UAAU,EAAE,EACjB,MAAM,EACN,SAAS,CACT,CAAC;QAEF,kFAAkF;QAClF,IAAI,aAAa,EAAE;YAClB,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;SACnC;aAAM;YACN,IAAI,CAAC,cAAc,EAAE,CAAC;SACtB;IACF,CAAC;IAED,iCAAc,GAAd,UAAe,iBAA0B;QACxC,IAAI,IAAI,CAAC,OAAO,CAAC,QAAQ,KAAK,SAAS,CAAC,IAAI,EAAE;YAC7C,IAAI,CAAC,kBAAkB,CAAC,iBAAiB,CAAC,CAAC;SAC3C;aAAM,IAAI,IAAI,CAAC,OAAO,CAAC,QAAQ,KAAK,SAAS,CAAC,aAAa,EAAE;YAC7D,IAAI,CAAC,yBAAyB,CAAC,iBAAiB,CAAC,CAAC;SAClD;aAAM,IAAI,IAAI,CAAC,OAAO,CAAC,QAAQ,KAAK,SAAS,CAAC,GAAG,EAAE;YACnD,IAAI,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;SAC1C;aAAM,IAAI,IAAI,CAAC,OAAO,CAAC,QAAQ,KAAK,SAAS,CAAC,KAAK,EAAE;YACrD,IAAI,CAAC,mBAAmB,CAAC,iBAAiB,CAAC,CAAC;SAC5C;aAAM;YACN,MAAM,IAAI,KAAK,CACd,OAAI,IAAI,CAAC,OAAO,CAAC,QAAQ,qCAAiC,CAC1D,CAAC;SACF;IACF,CAAC;IAED,qCAAkB,GAAlB,UAAmB,iBAA0B;QAC5C,IAAI,CAAC,SAAS,EAAE,CAAC;QACjB,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;QACrC,IAAI,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;QAClC,IAAI,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;QAClC,IAAI,iBAAiB,EAAE;YACtB,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC;SACvC;IACF,CAAC;IAED,4CAAyB,GAAzB,UAA0B,iBAA0B;QACnD,IAAM,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,cAAc,EAAE,CAAC;QACnE,IAAI,CAAC,SAAS,EAAE,CAAC;QACjB,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;QACrC,IAAI,WAAW,KAAK,qBAAqB,CAAC,QAAQ,EAAE;YACnD,IAAI,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;SAClC;QACD,IAAI,WAAW,KAAK,qBAAqB,CAAC,UAAU,EAAE;YACrD,IAAI,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;SAClC;QAED,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC;IACxC,CAAC;IAED,oCAAiB,GAAjB,UAAkB,iBAA0B;QAC3C,IAAM,WAAW,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC9C,IAAM,WAAW,GAAG,CAAC,CAAC;QACtB,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,WAAW,EAAE,iBAAiB,CAAC,CAAC;QAC3D,IAAI,iBAAiB,EAAE;YACtB,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC;SACvC;IACF,CAAC;IAED,sCAAmB,GAAnB,UAAoB,iBAA0B;QAC7C,IAAM,WAAW,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC9C,IAAM,WAAW,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC9C,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,WAAW,EAAE,iBAAiB,CAAC,CAAC;QAC3D,IAAI,iBAAiB,EAAE;YACtB,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC;SACvC;IACF,CAAC;IAED,4BAAS,GAAT;QACC,IAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,aAAa,EAAE,CAAC,KAAK,EAAE,CAAC;QACrE,IAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,eAAe,CAAC,aAAa,EAAE,CAAC,KAAK,EAAE,CAAC;QACrE,IAAI,CAAC,MAAM,GAAG,WAAW,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QACzD,IAAI,CAAC,MAAM,GAAG,WAAW,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAC1D,CAAC;IAED,+BAAY,GAAZ,UAAa,iBAA0B;QACtC,IAAM,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC;QAClB,IAAA;;UAEJ,EAFM,gBAAK,EAAE,kBAEb,CAAC;QAEH,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC,cAAc,CAAC,GAAG,EAAE,yBAAyB,CAAC;aACrE,IAAI,CAAC,OAAO,EAAE,KAAK,CAAC;aACpB,IAAI,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;QAEzB,IAAM,YAAY,GAAG,QAAQ,CAAC,cAAc,CAC3C,IAAI,CAAC,QAAQ,EACb,8BAA8B,CAC9B,CAAC;QACF,YAAY,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;QAEpD,IAAA,wBAA8C,EAA7C,mBAAW,EAAE,iBAAgC,CAAC;QAC/C,IAAA,wBAA8C,EAA7C,iBAAS,EAAE,mBAAkC,CAAC;QAErD,IAAI,CAAC,QAAQ;aACX,KAAK,CAAC,YAAY,CAAC;aACnB,IAAI,CAAC,GAAG,EAAE,WAAW,CAAC;aACtB,IAAI,CAAC,GAAG,EAAE,WAAW,CAAC,CAAC;QAEzB,YAAY;aACV,OAAO,CAAC,sBAAsB,EAAE,iBAAiB,CAAC;aAClD,OAAO,CAAC,mBAAmB,EAAE,CAAC,iBAAiB,CAAC;aAChD,KAAK,CACL,QAAQ,EACR,iBAAiB;YAChB,CAAC,CAAC,UAAQ,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,uBAAuB,CACtD,eAAe,CACd,MAAG;YACN,CAAC,CAAC,IAAI,CACP,CAAC;IACJ,CAAC;IAED,4BAAS,GAAT,UAAU,iBAA0B;QACnC,IAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAC1C,IAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CACpC,IAAI,CAAC,UAAU,EAAE,EACjB,MAAM,EACN,GAAG,EACH,eAAe,CACf,CAAC;QACF,IAAM,WAAW,GAAG,IAAI,CAAC,MAAM;aAC7B,KAAK,CAAC,WAAW,CAAC;aAClB,GAAG,CAAC,UAAC,CAAC,IAAK,OAAA,CAAC,GAAG,KAAK,EAAT,CAAS,CAAC,CAAC;QAExB,IAAM,MAAM,GAAG,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;QACtE,IAAM,MAAM,GAAG,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC1D,MAAM;aACJ,KAAK,EAAE;aACP,MAAM,CAAC,MAAM,CAAC;aACd,KAAK,CAAC,MAAM,CAAC;aACb,IAAI,CAAC,IAAI,EAAE,UAAC,CAAC,IAAK,OAAA,CAAC,EAAD,CAAC,CAAC;aACpB,IAAI,CAAC,IAAI,EAAE,UAAC,CAAC,IAAK,OAAA,CAAC,EAAD,CAAC,CAAC;aACpB,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;aACb,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;QAErB,MAAM;aACJ,SAAS,CAAC,MAAM,CAAC;aACjB,OAAO,CAAC,sBAAsB,EAAE,iBAAiB,CAAC;aAClD,OAAO,CAAC,mBAAmB,EAAE,CAAC,iBAAiB,CAAC;aAChD,KAAK,CACL,QAAQ,EACR,iBAAiB;YAChB,CAAC,CAAC,UAAQ,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,uBAAuB,CACtD,eAAe,CACd,MAAG;YACN,CAAC,CAAC,IAAI,CACP,CAAC;IACJ,CAAC;IAED,4BAAS,GAAT,UAAU,iBAA0B;QACnC,IAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC5C,IAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAC1C,IAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CACpC,IAAI,CAAC,UAAU,EAAE,EACjB,MAAM,EACN,GAAG,EACH,eAAe,CACf,CAAC;QACF,IAAM,WAAW,GAAG,IAAI,CAAC,MAAM;aAC7B,KAAK,CAAC,WAAW,CAAC;aAClB,GAAG,CAAC,UAAC,CAAC,IAAK,OAAA,CAAC,GAAG,MAAM,EAAV,CAAU,CAAC,CAAC;QAEzB,IAAM,MAAM,GAAG,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;QACtE,IAAM,MAAM,GAAG,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC1D,MAAM;aACJ,KAAK,EAAE;aACP,MAAM,CAAC,MAAM,CAAC;aACd,KAAK,CAAC,MAAM,CAAC;aACb,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;aACb,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC;aACjB,IAAI,CAAC,IAAI,EAAE,UAAC,CAAC,IAAK,OAAA,CAAC,EAAD,CAAC,CAAC;aACpB,IAAI,CAAC,IAAI,EAAE,UAAC,CAAC,IAAK,OAAA,CAAC,EAAD,CAAC,CAAC,CAAC;QAEvB,MAAM;aACJ,SAAS,CAAC,MAAM,CAAC;aACjB,OAAO,CAAC,sBAAsB,EAAE,iBAAiB,CAAC;aAClD,OAAO,CAAC,mBAAmB,EAAE,CAAC,iBAAiB,CAAC;aAChD,KAAK,CACL,QAAQ,EACR,iBAAiB;YAChB,CAAC,CAAC,UAAQ,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,uBAAuB,CACtD,eAAe,CACd,MAAG;YACN,CAAC,CAAC,IAAI,CACP,CAAC;IACJ,CAAC;IAED,2BAAQ,GAAR,UAAS,WAAmB,EAAE,WAAmB,EAAE,OAAc;QAAd,wBAAA,EAAA,cAAc;QAChE,IAAM,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC;QAClB,IAAA;;UAEJ,EAFM,gBAAK,EAAE,kBAEb,CAAC;QAEH,IAAM,SAAS,GAAG,QAAQ,CAAC,cAAc,CAAC,GAAG,EAAE,oBAAoB,CAAC;aAClE,IAAI,CAAC,OAAO,EAAE,KAAK,CAAC;aACpB,IAAI,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;QAEzB,IAAM,UAAU,GAAG,WAAW,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC;QAEvD,IAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CAClC,IAAI,CAAC,UAAU,EAAE,EACjB,UAAU,EACV,WAAW,CACX,CAAC;QAEF,QAAQ,CAAC,cAAc,CAAC,SAAS,EAAE,oCAAoC,CAAC;aACtE,IAAI,CAAC,OAAO,EAAE,KAAK,CAAC;aACpB,IAAI,CAAC,QAAQ,EAAE,MAAM,CAAC;aACtB,IAAI,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QAEvB,IAAM,gBAAgB,GAAG,GAAG,EAAE;aAC5B,WAAW,CAAC,WAAW,CAAC;aACxB,WAAW,CAAC,WAAW,CAAC;aACxB,UAAU,CAAC,CAAC,CAAC;aACb,QAAQ,CAAC,IAAI,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC;QAExB,wCAAwC;QACxC,IAAM,GAAG,GAAG,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;QACnE,IAAM,GAAG,GACR,WAAW,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,MAAM,CAAC,GAAG,WAAW,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;QAE/D,IAAM,iBAAiB,GAAG,QAAQ,CAAC,cAAc,CAAC,SAAS,EAAE,MAAM,CAAC;aAClE,IAAI,CAAC,OAAO,EAAE,qBAAqB,CAAC;aACpC,IAAI,CAAC,WAAW,EAAE,eAAa,GAAG,UAAK,GAAG,MAAG,CAAC;aAC9C,IAAI,CAAC,GAAG,EAAE,gBAAgB,CAAC;aAC3B,OAAO,CAAC,sBAAsB,EAAE,OAAO,CAAC;aACxC,OAAO,CAAC,mBAAmB,EAAE,CAAC,OAAO,CAAC;aACtC,KAAK,CACL,MAAM,EACN,OAAO;YACN,CAAC,CAAC,UAAQ,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,uBAAuB,CACtD,eAAe,CACd,MAAG;YACN,CAAC,CAAC,IAAI,CACP,CAAC;QAEH,oBAAoB;QACpB,IAAI,UAAU,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,OAAO,CAAC;QACzD,IAAI,SAAS,KAAK,UAAU,CAAC,MAAM,EAAE;YACpC,UAAU,GAAG,KAAK,GAAG,CAAC,CAAC;SACvB;aAAM,IAAI,SAAS,KAAK,UAAU,CAAC,KAAK,EAAE;YAC1C,UAAU,GAAG,KAAK,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,OAAO,CAAC;SAC7D;QAED,IAAM,UAAU,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,OAAO,CAAC;QAC3D,iBAAiB,CAAC,IAAI,CACrB,WAAW,EACX,eAAa,UAAU,UAAK,UAAU,MAAG,CACzC,CAAC;IACH,CAAC;IAED,oBAAoB;IACpB,qCAAkB,GAAlB;QACO,IAAA;;UAEJ,EAFM,gBAAK,EAAE,kBAEb,CAAC;QACH,IAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC;QAC3C,OAAO,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,YAAY,CAAC;IAChD,CAAC;IAED,sBAAsB;IACtB,qCAAkB,GAAlB;QACC,OAAO,IAAI,CAAC,kBAAkB,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;IAC5C,CAAC;IAED,mCAAgB,GAAhB,UAAiB,UAAkB;QAClC,IAAM,iBAAiB,GAAG,IAAI,CAAC,CAAC,KAAK;QACrC,IAAM,KAAK,GAAG,IAAI,CAAC,CAAC,KAAK;QACzB,IAAM,YAAY,GAAG,GAAG,CAAC;QACzB,IAAM,kBAAkB,GAAG,iBAAiB,CAAC;QAC7C,IAAM,gBAAgB,GAAG,cAAc,CAAC;QACxC,IAAM,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC;QAChD,IAAA;;gBAAK,CAEV;QACH,IAAM,UAAU,GAAG,CAAC,CAAC;QACrB,IAAM,QAAQ,GAAG,KAAK,CAAC;QAEvB,8CAA8C;QAC9C,IAAM,IAAI,GAAG,QAAQ,CAAC,cAAc,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,KAAK,EAAE,CAAC;QAChE,IAAM,cAAc,GAAG,QAAQ,CAAC,cAAc,CAAC,IAAI,EAAE,gBAAgB,CAAC;aACpE,IAAI,CACJ,IAAI,EACJ,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,uBAAuB,CAAC,UAAU,CAAC,CAC1D;aACA,IAAI,CAAC,OAAO,EAAE,UAAU,CAAC;aACzB,IAAI,CAAC,IAAI,EAAE,UAAU,GAAG,CAAC,GAAG,YAAY,GAAG,KAAK,CAAC;aACjD,IAAI,CAAC,IAAI,EAAE,QAAQ,CAAC;aACpB,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;aACb,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;aACb,IAAI,CAAC,eAAe,EAAE,gBAAgB,CAAC;aACvC,IAAI,CAAC,mBAAmB,EAAE,iBAAiB,CAAC,CAAC;QAC/C,IAAM,KAAK,GAAG,2BACE,kBAAkB,oBAAa,UAAU,wCACzC,gBAAgB,qBAAa,UAAU,GAAG,YAAY,yCACtD,kBAAkB,qBACjC,UAAU,GAAG,CAAC,GAAG,YAAY,sBAE7B,CAAC;QACF,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAE3B,MAAM,EAAE,CAAC;QACT,SAAS,MAAM;YACd,cAAc;iBACZ,IAAI,CACJ,mBAAmB,EACnB,gBAAa,UAAU,GAAG,CAAC,GAAG,YAAY,GAAG,KAAK,UAAM,CACxD;iBACA,UAAU,EAAE;iBACZ,QAAQ,CAAC,iBAAiB,CAAC;iBAC3B,KAAK,CAAC,KAAK,CAAC;iBACZ,IAAI,CAAC,UAAU,CAAC;iBAChB,IAAI,CACJ,mBAAmB,EACnB,gBAAa,QAAQ,GAAG,CAAC,GAAG,YAAY,GAAG,KAAK,UAAM,CACtD;iBACA,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;QACrB,CAAC;IACF,CAAC;IAED,iCAAc,GAAd;QACC,IAAM,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC;QACxD,SAAS,CAAC,MAAM,EAAE,CAAC;IACpB,CAAC;IACF,eAAC;AAAD,CAAC,AA/UD,CAA8B,SAAS,GA+UtC","sourcesContent":["// Internal Imports\nimport { Component } from '../component';\nimport { DOMUtils } from '../../services';\nimport * as 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 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\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 { width, height } = DOMUtils.getSVGElementSize(svg, {\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\t\t.style(\n\t\t\t\t'stroke',\n\t\t\t\tshowShimmerEffect\n\t\t\t\t\t? `url(#${this.services.domUtils.generateElementIDString(\n\t\t\t\t\t\t\t`shimmer-lines`\n\t\t\t\t\t  )})`\n\t\t\t\t\t: null\n\t\t\t);\n\t}\n\n\tdrawXGrid(showShimmerEffect: boolean) {\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', '100%');\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\t\t.style(\n\t\t\t\t'stroke',\n\t\t\t\tshowShimmerEffect\n\t\t\t\t\t? `url(#${this.services.domUtils.generateElementIDString(\n\t\t\t\t\t\t\t`shimmer-lines`\n\t\t\t\t\t  )})`\n\t\t\t\t\t: null\n\t\t\t);\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\t\t.style(\n\t\t\t\t'stroke',\n\t\t\t\tshowShimmerEffect\n\t\t\t\t\t? `url(#${this.services.domUtils.generateElementIDString(\n\t\t\t\t\t\t\t`shimmer-lines`\n\t\t\t\t\t  )})`\n\t\t\t\t\t: null\n\t\t\t);\n\t}\n\n\tdrawRing(outerRadius: number, innerRadius: number, shimmer = true) {\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\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\t\t\t.style(\n\t\t\t\t'fill',\n\t\t\t\tshimmer\n\t\t\t\t\t? `url(#${this.services.domUtils.generateElementIDString(\n\t\t\t\t\t\t\t`shimmer-areas`\n\t\t\t\t\t  )})`\n\t\t\t\t\t: null\n\t\t\t);\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(this.parent, {\n\t\t\tuseAttrs: 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(\n\t\t\t\t'id',\n\t\t\t\tthis.services.domUtils.generateElementIDString(gradientId)\n\t\t\t)\n\t\t\t.attr('class', 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/tree.d.ts

@@ -1,9 +0,0 @@
-import { Component } from '../component';
-import { RenderTypes } from '../../interfaces';
-export declare class Tree extends Component {
-    type: string;
-    renderType: RenderTypes;
-    getLongestLabel(data: any): string;
-    getMockLabelWidth(svg: any, label: any): any;
-    render(animate?: boolean): void;
-}

package/components/graphs/tree.js

@@ -1,262 +0,0 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-// Internal Imports
-import { Component } from '../component';
-import { DOMUtils } from '../../services';
-import { Events, RenderTypes, TreeTypes } from '../../interfaces';
-import * as Tools from '../../tools';
-// D3 Imports
-import { cluster as d3Cluster, tree as d3Tree, hierarchy } from 'd3-hierarchy';
-import { linkHorizontal } from 'd3-shape';
-import { select } from 'd3-selection';
-var NODE_OFFSET = 6;
-var Tree = /** @class */ (function (_super) {
-    __extends(Tree, _super);
-    function Tree() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.type = 'tree';
-        _this.renderType = RenderTypes.SVG;
-        return _this;
-    }
-    Tree.prototype.getLongestLabel = function (data) {
-        var _this = this;
-        var longestLabel = '';
-        data.forEach(function (d) {
-            var longestLabelInChildren = d.children
-                ? _this.getLongestLabel(d.children)
-                : '';
-            if (longestLabelInChildren.length > longestLabel.length ||
-                d.name.length > longestLabel.length) {
-                longestLabel =
-                    longestLabelInChildren.length > d.name.length
-                        ? longestLabelInChildren
-                        : d.name;
-            }
-        });
-        return longestLabel;
-    };
-    Tree.prototype.getMockLabelWidth = function (svg, label) {
-        // Add mock label to get dimensions
-        var mockLabel = svg
-            .append('text')
-            .attr('dy', '0.31em')
-            .attr('x', 0)
-            .attr('text-anchor', 'end')
-            .text(label);
-        // Get the mock label width
-        var mockLabelWidth = DOMUtils.getSVGElementSize(mockLabel.node(), {
-            useBBox: true,
-        }).width;
-        // Remove the mock title label
-        mockLabel.remove();
-        return mockLabelWidth;
-    };
-    Tree.prototype.render = function (animate) {
-        var _this = this;
-        if (animate === void 0) { animate = true; }
-        var svg = this.getComponentContainer();
-        // Empty out the svg before rendering the tree
-        svg.html('');
-        var _a = DOMUtils.getSVGElementSize(this.parent, {
-            useAttrs: true,
-        }), width = _a.width, height = _a.height;
-        if (width < 1 || height < 1) {
-            return;
-        }
-        var options = this.model.getOptions();
-        var displayData = this.model.getDisplayData();
-        var rootTitle = Tools.getProperty(options, 'tree', 'rootTitle') || 'Tree';
-        var mockRootTitleWidth = this.getMockLabelWidth(svg, rootTitle);
-        var longestLabel = this.getLongestLabel(displayData);
-        var mockLongestLabelWidth = this.getMockLabelWidth(svg, longestLabel);
-        var margin = {
-            top: 0,
-            right: 0,
-            bottom: 0,
-            left: mockRootTitleWidth > 0
-                ? mockRootTitleWidth + NODE_OFFSET
-                : 30 - NODE_OFFSET,
-        };
-        var root = hierarchy({
-            name: rootTitle,
-            children: displayData,
-        });
-        var dx = 10;
-        var dy = width / 6;
-        var update = function (source) {
-            var nodes = root.descendants().reverse();
-            var links = root.links();
-            var left = root;
-            var right = root;
-            root.eachBefore(function (node) {
-                if (node.x < left.x)
-                    left = node;
-                if (node.x > right.x)
-                    right = node;
-            });
-            var height = right.x - left.x;
-            var transition = svg
-                .transition()
-                .call(function (t) {
-                return _this.services.transitions.setupTransition({
-                    transition: t,
-                    name: 'tree-update-viewbox',
-                    animate: true,
-                });
-            })
-                .attr('viewBox', [-margin.left, left.x, width, height]);
-            // Update data on nodes
-            var nodeGroups = nodeGroup
-                .selectAll('g')
-                .data(nodes, function (d) { return d.id; });
-            var self = _this;
-            // Add any entering nodes
-            var nodeGroupsEnter = nodeGroups
-                .enter()
-                .append('g')
-                .attr('transform', function () { return "translate(" + source.y0 + "," + source.x0 + ")"; })
-                .attr('class', function (d) {
-                return d.depth !== 0 && d.children && d.children.length > 0
-                    ? 'clickable'
-                    : null;
-            })
-                .on('mouseover', function (event, d) {
-                // Dispatch mouse event
-                self.services.events.dispatchEvent(Events.Tree.NODE_MOUSEOVER, {
-                    event: event,
-                    element: select(this),
-                    datum: d,
-                });
-            })
-                .on('click', function (event, d) {
-                if (d.depth !== 0) {
-                    d.children = d.children ? null : d._children;
-                    update(d);
-                }
-                // Dispatch mouse event
-                self.services.events.dispatchEvent(Events.Tree.NODE_CLICK, {
-                    event: event,
-                    element: select(this),
-                    datum: d,
-                });
-            })
-                .on('mouseout', function (event, d) {
-                // Dispatch mouse event
-                self.services.events.dispatchEvent(Events.Tree.NODE_MOUSEOUT, {
-                    event: event,
-                    element: select(this),
-                    datum: d,
-                });
-            });
-            // Add node circles to entering nodes
-            nodeGroupsEnter
-                .append('circle')
-                .attr('r', 2.5)
-                .attr('class', function (d) { return (d._children ? 'parent' : 'child'); })
-                .attr('stroke-width', 10);
-            // Add node labels
-            nodeGroupsEnter
-                .append('text')
-                .attr('dy', '0.31em')
-                .attr('x', function (d) { return (d._children ? -NODE_OFFSET : NODE_OFFSET); })
-                .attr('text-anchor', function (d) { return (d._children ? 'end' : 'start'); })
-                .text(function (d) { return d.data.name; })
-                .clone(true)
-                .attr('class', 'text-stroke')
-                .lower();
-            // Reposition nodes
-            nodeGroups
-                .merge(nodeGroupsEnter)
-                .transition(transition)
-                .attr('transform', function (d) { return "translate(" + d.y + "," + d.x + ")"; })
-                .attr('fill-opacity', 1)
-                .attr('stroke-opacity', 1);
-            // Remove exiting nodes
-            nodeGroups
-                .exit()
-                .transition(transition)
-                .remove()
-                .attr('transform', function () { return "translate(" + source.y + "," + source.x + ")"; })
-                .attr('fill-opacity', 0)
-                .attr('stroke-opacity', 0);
-            // Update data on links
-            var linkPaths = linkGroup
-                .selectAll('path')
-                .data(links, function (d) { return d.target.id; });
-            // Add any entering link paths
-            var linkPathsEnter = linkPaths
-                .enter()
-                .append('path')
-                .attr('d', function (d) {
-                var o = { x: source.x0, y: source.y0 };
-                return diagonal({ source: o, target: o });
-            });
-            // Reposition updating link paths
-            linkPaths
-                .merge(linkPathsEnter)
-                .transition(transition)
-                .attr('d', diagonal);
-            // Remove any exiting link paths
-            linkPaths
-                .exit()
-                .transition(transition)
-                .remove()
-                .attr('d', function () {
-                var o = { x: source.x, y: source.y };
-                return diagonal({ source: o, target: o });
-            });
-            // Update position data for nodes
-            root.eachBefore(function (d) {
-                d.x0 = d.x;
-                d.y0 = d.y;
-            });
-        };
-        var descendants = root.descendants();
-        var maxDepth = descendants[descendants.length - 1].depth;
-        var tree = Tools.getProperty(options, 'tree', 'type') === TreeTypes.DENDROGRAM
-            ? d3Cluster().size([
-                height,
-                width -
-                    mockLongestLabelWidth -
-                    maxDepth * NODE_OFFSET -
-                    mockRootTitleWidth,
-            ])
-            : d3Tree()
-                .nodeSize([dx, dy])
-                .size([
-                height,
-                width -
-                    mockLongestLabelWidth -
-                    maxDepth * NODE_OFFSET -
-                    mockRootTitleWidth,
-            ]);
-        var diagonal = linkHorizontal()
-            .x(function (d) { return d.y; })
-            .y(function (d) { return d.x; });
-        root.x0 = dy / 2;
-        root.y0 = 0;
-        root.descendants().forEach(function (d, i) {
-            d.id = i;
-            d._children = d.children;
-        });
-        tree(root);
-        svg.attr('viewBox', [-margin.left, -margin.top, width, dx]).style('user-select', 'none');
-        var linkGroup = svg.append('g').attr('class', 'links');
-        var nodeGroup = svg.append('g').attr('class', 'nodes');
-        update(root);
-    };
-    return Tree;
-}(Component));
-export { Tree };
-//# sourceMappingURL=../../../src/components/graphs/tree.js.map

package/components/graphs/tree.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"tree.js","sourceRoot":"","sources":["tree.ts"],"names":[],"mappings":"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","sourcesContent":["// Internal Imports\nimport { Component } from '../component';\nimport { DOMUtils } from '../../services';\nimport { Events, RenderTypes, TreeTypes } from '../../interfaces';\nimport * as Tools from '../../tools';\n\n// D3 Imports\nimport { cluster as d3Cluster, tree as d3Tree, hierarchy } from 'd3-hierarchy';\nimport { linkHorizontal } from 'd3-shape';\nimport { select } from 'd3-selection';\n\nconst NODE_OFFSET = 6;\n\nexport class Tree extends Component {\n\ttype = 'tree';\n\trenderType = RenderTypes.SVG;\n\n\tgetLongestLabel(data) {\n\t\tlet longestLabel = '';\n\t\tdata.forEach((d) => {\n\t\t\tlet longestLabelInChildren = d.children\n\t\t\t\t? this.getLongestLabel(d.children)\n\t\t\t\t: '';\n\t\t\tif (\n\t\t\t\tlongestLabelInChildren.length > longestLabel.length ||\n\t\t\t\td.name.length > longestLabel.length\n\t\t\t) {\n\t\t\t\tlongestLabel =\n\t\t\t\t\tlongestLabelInChildren.length > d.name.length\n\t\t\t\t\t\t? longestLabelInChildren\n\t\t\t\t\t\t: d.name;\n\t\t\t}\n\t\t});\n\n\t\treturn longestLabel;\n\t}\n\n\tgetMockLabelWidth(svg, label) {\n\t\t// Add mock label to get dimensions\n\t\tconst mockLabel = svg\n\t\t\t.append('text')\n\t\t\t.attr('dy', '0.31em')\n\t\t\t.attr('x', 0)\n\t\t\t.attr('text-anchor', 'end')\n\t\t\t.text(label);\n\n\t\t// Get the mock label width\n\t\tconst { width: mockLabelWidth } = DOMUtils.getSVGElementSize(\n\t\t\tmockLabel.node(),\n\t\t\t{\n\t\t\t\tuseBBox: true,\n\t\t\t}\n\t\t);\n\n\t\t// Remove the mock title label\n\t\tmockLabel.remove();\n\n\t\treturn mockLabelWidth;\n\t}\n\n\trender(animate = true) {\n\t\tconst svg = this.getComponentContainer();\n\n\t\t// Empty out the svg before rendering the tree\n\t\tsvg.html('');\n\n\t\tconst { width, height } = DOMUtils.getSVGElementSize(this.parent, {\n\t\t\tuseAttrs: true,\n\t\t});\n\n\t\tif (width < 1 || height < 1) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst options = this.model.getOptions();\n\t\tconst displayData = this.model.getDisplayData();\n\n\t\tconst rootTitle =\n\t\t\tTools.getProperty(options, 'tree', 'rootTitle') || 'Tree';\n\n\t\tconst mockRootTitleWidth = this.getMockLabelWidth(svg, rootTitle);\n\n\t\tlet longestLabel = this.getLongestLabel(displayData);\n\t\tconst mockLongestLabelWidth = this.getMockLabelWidth(svg, longestLabel);\n\n\t\tconst margin = {\n\t\t\ttop: 0,\n\t\t\tright: 0,\n\t\t\tbottom: 0,\n\t\t\tleft:\n\t\t\t\tmockRootTitleWidth > 0\n\t\t\t\t\t? mockRootTitleWidth + NODE_OFFSET\n\t\t\t\t\t: 30 - NODE_OFFSET,\n\t\t};\n\t\tconst root = hierarchy({\n\t\t\tname: rootTitle,\n\t\t\tchildren: displayData,\n\t\t}) as any;\n\n\t\tconst dx = 10;\n\t\tconst dy = width / 6;\n\n\t\tconst update = (source) => {\n\t\t\tconst nodes = root.descendants().reverse();\n\t\t\tconst links = root.links();\n\n\t\t\tlet left = root;\n\t\t\tlet right = root;\n\t\t\troot.eachBefore((node) => {\n\t\t\t\tif (node.x < left.x) left = node;\n\t\t\t\tif (node.x > right.x) right = node;\n\t\t\t});\n\n\t\t\tconst height = right.x - left.x;\n\n\t\t\tconst transition = svg\n\t\t\t\t.transition()\n\t\t\t\t.call((t) =>\n\t\t\t\t\tthis.services.transitions.setupTransition({\n\t\t\t\t\t\ttransition: t,\n\t\t\t\t\t\tname: 'tree-update-viewbox',\n\t\t\t\t\t\tanimate: true,\n\t\t\t\t\t})\n\t\t\t\t)\n\t\t\t\t.attr('viewBox', [-margin.left, left.x, width, height]);\n\n\t\t\t// Update data on nodes\n\t\t\tconst nodeGroups = nodeGroup\n\t\t\t\t.selectAll('g')\n\t\t\t\t.data(nodes, (d) => d.id);\n\n\t\t\tconst self = this;\n\t\t\t// Add any entering nodes\n\t\t\tconst nodeGroupsEnter = nodeGroups\n\t\t\t\t.enter()\n\t\t\t\t.append('g')\n\t\t\t\t.attr('transform', () => `translate(${source.y0},${source.x0})`)\n\t\t\t\t.attr('class', (d) =>\n\t\t\t\t\td.depth !== 0 && d.children && d.children.length > 0\n\t\t\t\t\t\t? 'clickable'\n\t\t\t\t\t\t: null\n\t\t\t\t)\n\t\t\t\t.on('mouseover', function (event, d) {\n\t\t\t\t\t// Dispatch mouse event\n\t\t\t\t\tself.services.events.dispatchEvent(\n\t\t\t\t\t\tEvents.Tree.NODE_MOUSEOVER,\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tevent,\n\t\t\t\t\t\t\telement: select(this),\n\t\t\t\t\t\t\tdatum: d,\n\t\t\t\t\t\t}\n\t\t\t\t\t);\n\t\t\t\t})\n\t\t\t\t.on('click', function (event, d) {\n\t\t\t\t\tif (d.depth !== 0) {\n\t\t\t\t\t\td.children = d.children ? null : d._children;\n\n\t\t\t\t\t\tupdate(d);\n\t\t\t\t\t}\n\n\t\t\t\t\t// Dispatch mouse event\n\t\t\t\t\tself.services.events.dispatchEvent(Events.Tree.NODE_CLICK, {\n\t\t\t\t\t\tevent,\n\t\t\t\t\t\telement: select(this),\n\t\t\t\t\t\tdatum: d,\n\t\t\t\t\t});\n\t\t\t\t})\n\t\t\t\t.on('mouseout', function (event, d) {\n\t\t\t\t\t// Dispatch mouse event\n\t\t\t\t\tself.services.events.dispatchEvent(\n\t\t\t\t\t\tEvents.Tree.NODE_MOUSEOUT,\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tevent,\n\t\t\t\t\t\t\telement: select(this),\n\t\t\t\t\t\t\tdatum: d,\n\t\t\t\t\t\t}\n\t\t\t\t\t);\n\t\t\t\t});\n\n\t\t\t// Add node circles to entering nodes\n\t\t\tnodeGroupsEnter\n\t\t\t\t.append('circle')\n\t\t\t\t.attr('r', 2.5)\n\t\t\t\t.attr('class', (d) => (d._children ? 'parent' : 'child'))\n\t\t\t\t.attr('stroke-width', 10);\n\n\t\t\t// Add node labels\n\t\t\tnodeGroupsEnter\n\t\t\t\t.append('text')\n\t\t\t\t.attr('dy', '0.31em')\n\t\t\t\t.attr('x', (d) => (d._children ? -NODE_OFFSET : NODE_OFFSET))\n\t\t\t\t.attr('text-anchor', (d) => (d._children ? 'end' : 'start'))\n\t\t\t\t.text((d) => d.data.name)\n\t\t\t\t.clone(true)\n\t\t\t\t.attr('class', 'text-stroke')\n\t\t\t\t.lower();\n\n\t\t\t// Reposition nodes\n\t\t\tnodeGroups\n\t\t\t\t.merge(nodeGroupsEnter)\n\t\t\t\t.transition(transition)\n\t\t\t\t.attr('transform', (d) => `translate(${d.y},${d.x})`)\n\t\t\t\t.attr('fill-opacity', 1)\n\t\t\t\t.attr('stroke-opacity', 1);\n\n\t\t\t// Remove exiting nodes\n\t\t\tnodeGroups\n\t\t\t\t.exit()\n\t\t\t\t.transition(transition)\n\t\t\t\t.remove()\n\t\t\t\t.attr('transform', () => `translate(${source.y},${source.x})`)\n\t\t\t\t.attr('fill-opacity', 0)\n\t\t\t\t.attr('stroke-opacity', 0);\n\n\t\t\t// Update data on links\n\t\t\tconst linkPaths = linkGroup\n\t\t\t\t.selectAll('path')\n\t\t\t\t.data(links, (d) => d.target.id);\n\n\t\t\t// Add any entering link paths\n\t\t\tconst linkPathsEnter = linkPaths\n\t\t\t\t.enter()\n\t\t\t\t.append('path')\n\t\t\t\t.attr('d', (d) => {\n\t\t\t\t\tconst o = { x: source.x0, y: source.y0 };\n\t\t\t\t\treturn diagonal({ source: o, target: o });\n\t\t\t\t});\n\n\t\t\t// Reposition updating link paths\n\t\t\tlinkPaths\n\t\t\t\t.merge(linkPathsEnter)\n\t\t\t\t.transition(transition)\n\t\t\t\t.attr('d', diagonal);\n\n\t\t\t// Remove any exiting link paths\n\t\t\tlinkPaths\n\t\t\t\t.exit()\n\t\t\t\t.transition(transition)\n\t\t\t\t.remove()\n\t\t\t\t.attr('d', () => {\n\t\t\t\t\tconst o = { x: source.x, y: source.y };\n\t\t\t\t\treturn diagonal({ source: o, target: o });\n\t\t\t\t});\n\n\t\t\t// Update position data for nodes\n\t\t\troot.eachBefore((d) => {\n\t\t\t\td.x0 = d.x;\n\t\t\t\td.y0 = d.y;\n\t\t\t});\n\t\t};\n\n\t\tconst descendants = root.descendants();\n\t\tconst maxDepth = descendants[descendants.length - 1].depth;\n\n\t\tconst tree =\n\t\t\tTools.getProperty(options, 'tree', 'type') === TreeTypes.DENDROGRAM\n\t\t\t\t? d3Cluster().size([\n\t\t\t\t\t\theight,\n\t\t\t\t\t\twidth -\n\t\t\t\t\t\t\tmockLongestLabelWidth -\n\t\t\t\t\t\t\tmaxDepth * NODE_OFFSET -\n\t\t\t\t\t\t\tmockRootTitleWidth,\n\t\t\t\t  ])\n\t\t\t\t: d3Tree()\n\t\t\t\t\t\t.nodeSize([dx, dy])\n\t\t\t\t\t\t.size([\n\t\t\t\t\t\t\theight,\n\t\t\t\t\t\t\twidth -\n\t\t\t\t\t\t\t\tmockLongestLabelWidth -\n\t\t\t\t\t\t\t\tmaxDepth * NODE_OFFSET -\n\t\t\t\t\t\t\t\tmockRootTitleWidth,\n\t\t\t\t\t\t]);\n\n\t\tconst diagonal = linkHorizontal()\n\t\t\t.x((d: any) => d.y)\n\t\t\t.y((d: any) => d.x) as any;\n\n\t\troot.x0 = dy / 2;\n\t\troot.y0 = 0;\n\t\troot.descendants().forEach((d, i) => {\n\t\t\td.id = i;\n\t\t\td._children = d.children;\n\t\t});\n\n\t\ttree(root);\n\n\t\tsvg.attr('viewBox', [-margin.left, -margin.top, width, dx]).style(\n\t\t\t'user-select',\n\t\t\t'none'\n\t\t);\n\n\t\tconst linkGroup = svg.append('g').attr('class', 'links');\n\t\tconst nodeGroup = svg.append('g').attr('class', 'nodes');\n\n\t\tupdate(root);\n\t}\n}\n"]}

package/components/graphs/treemap.d.ts

@@ -1,11 +0,0 @@
-import { Component } from '../component';
-import { RenderTypes } from '../../interfaces';
-export declare class Treemap extends Component {
-    type: string;
-    renderType: RenderTypes;
-    init(): void;
-    render(animate?: boolean): void;
-    addEventListeners(): void;
-    handleLegendOnHover: (event: CustomEvent<any>) => void;
-    handleLegendMouseOut: (event: CustomEvent<any>) => void;
-}