github.com/hernad/nomad@v1.6.112/ui/app/components/stats-time-series.js (about)

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