github.com/anth0d/nomad@v0.0.0-20221214183521-ae3a0a2cad06/ui/app/components/stats-time-series.js (about)

     1  import Component from '@glimmer/component';
     2  import moment from 'moment';
     3  import d3TimeFormat from 'd3-time-format';
     4  import d3Format from 'd3-format';
     5  import { scaleTime, scaleLinear } from 'd3-scale';
     6  import d3Array from 'd3-array';
     7  import formatDuration from 'nomad-ui/utils/format-duration';
     8  
     9  export default class StatsTimeSeries extends Component {
    10    get xFormat() {
    11      return d3TimeFormat.timeFormat('%H:%M:%S');
    12    }
    13  
    14    get yFormat() {
    15      return d3Format.format('.1~%');
    16    }
    17  
    18    get useDefaults() {
    19      return !this.args.dataProp;
    20    }
    21  
    22    // Specific a11y descriptors
    23    get description() {
    24      const data = this.args.data;
    25      const yRange = d3Array.extent(data, (d) => d.percent);
    26      const xRange = d3Array.extent(data, (d) => d.timestamp);
    27      const yFormatter = this.yFormat;
    28  
    29      const duration = formatDuration(xRange[1] - xRange[0], 'ms', true);
    30  
    31      return `Time series data for the last ${duration}, with values ranging from ${yFormatter(
    32        yRange[0]
    33      )} to ${yFormatter(yRange[1])}`;
    34    }
    35  
    36    xScale(data, yAxisOffset) {
    37      const scale = scaleTime();
    38  
    39      const [low, high] = d3Array.extent(data, (d) => d.timestamp);
    40      const minLow = moment(high).subtract(5, 'minutes').toDate();
    41  
    42      const extent = data.length
    43        ? [Math.min(low, minLow), high]
    44        : [minLow, new Date()];
    45      scale.rangeRound([10, yAxisOffset]).domain(extent);
    46  
    47      return scale;
    48    }
    49  
    50    yScale(data, xAxisOffset) {
    51      const yValues = (data || []).mapBy(
    52        this.args.dataProp ? 'percentStack' : 'percent'
    53      );
    54  
    55      let [low, high] = [0, 1];
    56      if (yValues.compact().length) {
    57        [low, high] = d3Array.extent(yValues);
    58      }
    59  
    60      return scaleLinear()
    61        .rangeRound([xAxisOffset, 10])
    62        .domain([Math.min(0, low), Math.max(1, high)]);
    63    }
    64  }