github.com/anth0d/nomad@v0.0.0-20221214183521-ae3a0a2cad06/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      if (this.args.colorClass) return this.args.colorClass;
     9      if (this.args.colorScale && this.args.index != null)
    10        return `${this.args.colorScale} ${this.args.colorScale}-${
    11          this.args.index + 1
    12        }`;
    13      return 'is-primary';
    14    }
    15  
    16    @uniquely('area-mask') maskId;
    17    @uniquely('area-fill') fillId;
    18  
    19    get curveMethod() {
    20      const mappings = {
    21        linear: 'curveLinear',
    22        stepAfter: 'curveStepAfter',
    23      };
    24      assert(
    25        `Provided curve "${this.curve}" is not an allowed curve type`,
    26        mappings[this.args.curve]
    27      );
    28      return mappings[this.args.curve];
    29    }
    30  
    31    get line() {
    32      const { xScale, yScale, xProp, yProp } = this.args;
    33  
    34      const builder = line()
    35        .curve(d3Shape[this.curveMethod])
    36        .defined((d) => d[yProp] != null)
    37        .x((d) => xScale(d[xProp]))
    38        .y((d) => yScale(d[yProp]));
    39  
    40      return builder(this.args.data);
    41    }
    42  
    43    get area() {
    44      const { xScale, yScale, xProp, yProp } = this.args;
    45  
    46      const builder = area()
    47        .curve(d3Shape[this.curveMethod])
    48        .defined((d) => d[yProp] != null)
    49        .x((d) => xScale(d[xProp]))
    50        .y0(yScale(0))
    51        .y1((d) => yScale(d[yProp]));
    52  
    53      return builder(this.args.data);
    54    }
    55  }