github.com/hernad/nomad@v1.6.112/ui/app/components/gauge-chart.js (about)

     1  /**
     2   * Copyright (c) HashiCorp, Inc.
     3   * SPDX-License-Identifier: MPL-2.0
     4   */
     5  
     6  import Component from '@ember/component';
     7  import { computed } from '@ember/object';
     8  import { assert } from '@ember/debug';
     9  import { guidFor } from '@ember/object/internals';
    10  import { once } from '@ember/runloop';
    11  import d3Shape from 'd3-shape';
    12  import WindowResizable from 'nomad-ui/mixins/window-resizable';
    13  import { classNames } from '@ember-decorators/component';
    14  import classic from 'ember-classic-decorator';
    15  
    16  @classic
    17  @classNames('chart', 'gauge-chart')
    18  export default class GaugeChart extends Component.extend(WindowResizable) {
    19    value = null;
    20    complement = null;
    21    total = null;
    22    chartClass = 'is-info';
    23  
    24    width = 0;
    25    height = 0;
    26  
    27    @computed('value', 'complement', 'total')
    28    get percent() {
    29      assert(
    30        'Provide complement OR total to GaugeChart, not both.',
    31        this.complement != null || this.total != null
    32      );
    33  
    34      if (this.complement != null) {
    35        return this.value / (this.value + this.complement);
    36      }
    37  
    38      return this.value / this.total;
    39    }
    40  
    41    @computed
    42    get fillId() {
    43      return `gauge-chart-fill-${guidFor(this)}`;
    44    }
    45  
    46    @computed
    47    get maskId() {
    48      return `gauge-chart-mask-${guidFor(this)}`;
    49    }
    50  
    51    @computed('width')
    52    get radius() {
    53      return this.width / 2;
    54    }
    55  
    56    weight = 4;
    57  
    58    @computed('radius', 'weight')
    59    get backgroundArc() {
    60      const { radius, weight } = this;
    61      const arc = d3Shape
    62        .arc()
    63        .outerRadius(radius)
    64        .innerRadius(radius - weight)
    65        .cornerRadius(weight)
    66        .startAngle(-Math.PI / 2)
    67        .endAngle(Math.PI / 2);
    68      return arc();
    69    }
    70  
    71    @computed('radius', 'weight', 'percent')
    72    get valueArc() {
    73      const { radius, weight, percent } = this;
    74  
    75      const arc = d3Shape
    76        .arc()
    77        .outerRadius(radius)
    78        .innerRadius(radius - weight)
    79        .cornerRadius(weight)
    80        .startAngle(-Math.PI / 2)
    81        .endAngle(-Math.PI / 2 + Math.PI * percent);
    82      return arc();
    83    }
    84  
    85    didInsertElement() {
    86      super.didInsertElement(...arguments);
    87      this.updateDimensions();
    88    }
    89  
    90    updateDimensions() {
    91      const width = this.element.querySelector('svg').clientWidth;
    92      this.setProperties({ width, height: width / 2 });
    93    }
    94  
    95    windowResizeHandler() {
    96      once(this, this.updateDimensions);
    97    }
    98  }