51 lines
1.3 KiB
JavaScript
51 lines
1.3 KiB
JavaScript
import Component from '@glimmer/component';
|
|
import { assert } from '@ember/debug';
|
|
import { default as d3Shape, area, line } from 'd3-shape';
|
|
import uniquely from 'nomad-ui/utils/properties/uniquely';
|
|
|
|
export default class ChartPrimitiveArea extends Component {
|
|
get colorClass() {
|
|
return this.args.colorClass || `${this.args.colorScale}-${this.args.index}`;
|
|
}
|
|
|
|
@uniquely('area-mask') maskId;
|
|
@uniquely('area-fill') fillId;
|
|
|
|
get curveMethod() {
|
|
const mappings = {
|
|
linear: 'curveLinear',
|
|
stepAfter: 'curveStepAfter',
|
|
};
|
|
assert(
|
|
`Provided curve "${this.curve}" is not an allowed curve type`,
|
|
mappings[this.args.curve]
|
|
);
|
|
return mappings[this.args.curve];
|
|
}
|
|
|
|
get line() {
|
|
const { xScale, yScale, xProp, yProp } = this.args;
|
|
|
|
const builder = line()
|
|
.curve(d3Shape[this.curveMethod])
|
|
.defined(d => d[yProp] != null)
|
|
.x(d => xScale(d[xProp]))
|
|
.y(d => yScale(d[yProp]));
|
|
|
|
return builder(this.args.data);
|
|
}
|
|
|
|
get area() {
|
|
const { xScale, yScale, xProp, yProp } = this.args;
|
|
|
|
const builder = area()
|
|
.curve(d3Shape[this.curveMethod])
|
|
.defined(d => d[yProp] != null)
|
|
.x(d => xScale(d[xProp]))
|
|
.y0(yScale(0))
|
|
.y1(d => yScale(d[yProp]));
|
|
|
|
return builder(this.args.data);
|
|
}
|
|
}
|