@carbon/charts
Version:
Carbon charting components
164 lines • 7.37 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 * as Configuration from '../../configuration';
import { Roles, Events, ColorClassNameTypes } from '../../interfaces';
import { Tools } from '../../tools';
// D3 Imports
import { line } from 'd3-shape';
var Line = /** @class */ (function (_super) {
__extends(Line, _super);
function Line() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.type = 'line';
_this.handleLegendOnHover = function (event) {
var hoveredElement = event.detail.hoveredElement;
_this.parent
.selectAll('path.line')
.transition(_this.services.transitions.getTransition('legend-hover-line'))
.attr('opacity', function (group) {
if (group.name !== hoveredElement.datum()['name']) {
return Configuration.lines.opacity.unselected;
}
return Configuration.lines.opacity.selected;
});
};
_this.handleLegendMouseOut = function (event) {
_this.parent
.selectAll('path.line')
.transition(_this.services.transitions.getTransition('legend-mouseout-line'))
.attr('opacity', Configuration.lines.opacity.selected);
};
return _this;
}
Line.prototype.init = function () {
var events = this.services.events;
// Highlight correct line legend item hovers
events.addEventListener(Events.Legend.ITEM_HOVER, this.handleLegendOnHover);
// Un-highlight lines on legend item mouseouts
events.addEventListener(Events.Legend.ITEM_MOUSEOUT, this.handleLegendMouseOut);
};
Line.prototype.render = function (animate) {
var _this = this;
if (animate === void 0) { animate = true; }
var svg = this.getContainerSVG({ withinChartClip: true });
var _a = this.services, cartesianScales = _a.cartesianScales, curves = _a.curves;
var getDomainValue = function (d, i) { return cartesianScales.getDomainValue(d, i); };
var getRangeValue = function (d, i) { return cartesianScales.getRangeValue(d, i); };
var _b = Tools.flipDomainAndRangeBasedOnOrientation(getDomainValue, getRangeValue, cartesianScales.getOrientation()), getXValue = _b[0], getYValue = _b[1];
var options = this.getOptions();
// D3 line generator function
var lineGenerator = line()
.x(getXValue)
.y(getYValue)
.curve(curves.getD3Curve())
.defined(function (datum, i) {
var rangeIdentifier = cartesianScales.getRangeIdentifier(datum);
var value = datum[rangeIdentifier];
if (value === null || value === undefined) {
return false;
}
return true;
});
var data = [];
if (this.configs.stacked) {
var percentage = Object.keys(options.axes).some(function (axis) { return options.axes[axis].percentage; });
var groupMapsTo_1 = options.data.groupMapsTo;
var stackedData = this.model.getStackedData({
groups: this.configs.groups,
percentage: percentage,
});
data = stackedData.map(function (d) {
var domainIdentifier = _this.services.cartesianScales.getDomainIdentifier(d);
var rangeIdentifier = _this.services.cartesianScales.getRangeIdentifier(d);
return {
name: d[0][groupMapsTo_1],
data: d.map(function (datum) {
var _a;
return (_a = {},
_a[domainIdentifier] = datum.data.sharedStackKey,
_a[groupMapsTo_1] = datum[groupMapsTo_1],
_a[rangeIdentifier] = datum[1],
_a);
}),
hidden: !Tools.some(d, function (datum) { return datum[0] !== datum[1]; }),
};
});
}
else {
data = this.model.getGroupedData(this.configs.groups);
}
// Update the bound data on lines
var lines = svg
.selectAll('path.line')
.data(data, function (group) { return group.name; });
// Remove elements that need to be exited
// We need exit at the top here to make sure that
// Data filters are processed before entering new elements
// Or updating existing ones
lines.exit().attr('opacity', 0).remove();
// Add lines that need to be introduced
var enteringLines = lines
.enter()
.append('path')
.classed('line', true)
.attr('opacity', 0);
// Apply styles and datum
enteringLines
.merge(lines)
.data(data, function (group) { return group.name; })
.attr('class', function (group) {
return _this.model.getColorClassName({
classNameTypes: [ColorClassNameTypes.STROKE],
dataGroupName: group.name,
originalClassName: 'line',
});
})
.style('stroke', function (group) { return _this.model.getStrokeColor(group.name); })
// a11y
.attr('role', Roles.GRAPHICS_SYMBOL)
.attr('aria-roledescription', 'line')
.attr('aria-label', function (group) {
var groupData = group.data;
return groupData
.map(function (datum) {
var rangeIdentifier = _this.services.cartesianScales.getRangeIdentifier(datum);
return datum[rangeIdentifier];
})
.join(',');
})
// Transition
.transition(this.services.transitions.getTransition('line-update-enter', animate))
.attr('opacity', function (d) { return (d.hidden ? 0 : 1); })
.attr('d', function (group) {
var groupData = group.data;
return lineGenerator(groupData);
});
};
Line.prototype.destroy = function () {
// Remove event listeners
this.parent
.selectAll('path.line')
.on('mousemove', null)
.on('mouseout', null);
// Remove legend listeners
var eventsFragment = this.services.events;
eventsFragment.removeEventListener(Events.Legend.ITEM_HOVER, this.handleLegendOnHover);
eventsFragment.removeEventListener(Events.Legend.ITEM_MOUSEOUT, this.handleLegendMouseOut);
};
return Line;
}(Component));
export { Line };
//# sourceMappingURL=../../../src/components/graphs/line.js.map