@carbon/charts
Version:
Carbon charting components
111 lines • 4.96 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 { Roles, ColorClassNameTypes } from '../../interfaces';
// D3 Imports
import { scaleLinear } from 'd3-scale';
var Meter = /** @class */ (function (_super) {
__extends(Meter, _super);
function Meter() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.type = 'meter';
return _this;
}
Meter.prototype.render = function (animate) {
var _this = this;
if (animate === void 0) { animate = true; }
var self = this;
var svg = this.getContainerSVG();
var options = this.getOptions();
var data = this.model.getDisplayData();
var status = this.model.getStatus();
var width = DOMUtils.getSVGElementSize(this.parent, {
useAttrs: true,
}).width;
var groupMapsTo = options.data.groupMapsTo;
// each meter has a scale for the value but no visual axis
var xScale = scaleLinear().domain([0, 100]).range([0, width]);
// draw the container to hold the value
DOMUtils.appendOrSelect(svg, 'rect.container')
.attr('x', 0)
.attr('y', 0)
.attr('width', width)
.attr('height', Tools.getProperty(options, 'meter', 'height'));
// value larger than 100 will display as 100% on meter chart
var maximumBarWidth = data.value >= 100;
// rect with the value binded
var value = svg.selectAll('rect.value').data([data]);
// if user provided a color for the bar, we dont want to attach a status class
var className = status != null && !self.model.isUserProvidedColorScaleValid()
? "value status--" + status
: 'value';
// draw the value bar
value
.enter()
.append('rect')
.classed('value', true)
.merge(value)
.attr('x', 0)
.attr('y', 0)
.attr('height', Tools.getProperty(options, 'meter', 'height'))
.attr('class', function (d) {
return _this.model.getColorClassName({
classNameTypes: [ColorClassNameTypes.FILL],
dataGroupName: d[groupMapsTo],
originalClassName: className,
});
})
.transition(this.services.transitions.getTransition('meter-bar-update', animate))
.attr('width', function (d) {
return maximumBarWidth ? xScale(100) : xScale(d.value);
})
.style('fill', function (d) { return self.model.getFillColor(d[groupMapsTo]); })
// a11y
.attr('role', Roles.GRAPHICS_SYMBOL)
.attr('aria-roledescription', 'value')
.attr('aria-label', function (d) { return d.value; });
// draw the peak
var peakValue = Tools.getProperty(options, 'meter', 'peak');
// update the peak if it is less than the value, it should be equal to the value
var updatedPeak = peakValue !== null && peakValue < data.value
? data.value
: peakValue;
// dont display peak if there isnt one
var peakData = updatedPeak === null || maximumBarWidth ? [] : [updatedPeak];
// if a peak is supplied within the domain, we want to render it
var peak = svg.selectAll('line.peak').data(peakData);
peak.enter()
.append('line')
.classed('peak', true)
.merge(peak)
.attr('y1', 0)
.attr('y2', Tools.getProperty(options, 'meter', 'height'))
.transition(this.services.transitions.getTransition('peak-line-update', animate))
.attr('x1', function (d) { return xScale(d); })
.attr('x2', function (d) { return xScale(d); })
// a11y
.attr('role', Roles.GRAPHICS_SYMBOL)
.attr('aria-roledescription', 'peak')
.attr('aria-label', function (d) { return d; });
peak.exit().remove();
// this forces the meter chart to only take up as much height as needed (if no height is provided)
this.services.domUtils.setSVGMaxHeight();
};
return Meter;
}(Component));
export { Meter };
//# sourceMappingURL=../../../src/components/graphs/meter.js.map