github.com/Ilhicas/nomad@v1.0.4-0.20210304152020-e86851182bc3/ui/app/components/chart-primitives/area.js (about) 1 import Component from '@glimmer/component'; 2 import { assert } from '@ember/debug'; 3 import { default as d3Shape, area, line } from 'd3-shape'; 4 import uniquely from 'nomad-ui/utils/properties/uniquely'; 5 6 export default class ChartPrimitiveArea extends Component { 7 get colorClass() { 8 return this.args.colorClass || `${this.args.colorScale}-${this.args.index}`; 9 } 10 11 @uniquely('area-mask') maskId; 12 @uniquely('area-fill') fillId; 13 14 get curveMethod() { 15 const mappings = { 16 linear: 'curveLinear', 17 stepAfter: 'curveStepAfter', 18 }; 19 assert( 20 `Provided curve "${this.curve}" is not an allowed curve type`, 21 mappings[this.args.curve] 22 ); 23 return mappings[this.args.curve]; 24 } 25 26 get line() { 27 const { xScale, yScale, xProp, yProp } = this.args; 28 29 const builder = line() 30 .curve(d3Shape[this.curveMethod]) 31 .defined(d => d[yProp] != null) 32 .x(d => xScale(d[xProp])) 33 .y(d => yScale(d[yProp])); 34 35 return builder(this.args.data); 36 } 37 38 get area() { 39 const { xScale, yScale, xProp, yProp } = this.args; 40 41 const builder = area() 42 .curve(d3Shape[this.curveMethod]) 43 .defined(d => d[yProp] != null) 44 .x(d => xScale(d[xProp])) 45 .y0(yScale(0)) 46 .y1(d => yScale(d[yProp])); 47 48 return builder(this.args.data); 49 } 50 }