@carbon/charts
Version:
Carbon charting components
263 lines • 12 kB
JavaScript
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, 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 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 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 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.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.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 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);
// 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.node().parentNode, { 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', 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