All files / modules/85-cv/pages/slos/components/SLOTargetChart SLOTargetChart.utils.ts

92.59% Statements 25/27
87.5% Branches 14/16
75% Functions 6/8
90.48% Lines 19/21

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94              9x 9x   9x 9x     9x   26x                                   170x                                                             9x             12x 26x   26x 26x   12x 12x   12x 12x   12x 12x   12x            
/*
 * Copyright 2021 Harness Inc. All rights reserved.
 * Use of this source code is governed by the PolyForm Shield 1.0.0 license
 * that can be found in the licenses directory at the root of this repository, also available at
 * https://polyformproject.org/wp-content/uploads/2020/06/PolyForm-Shield-1.0.0.txt.
 */
 
import moment from 'moment'
import { minBy, maxBy } from 'lodash-es'
import type Highcharts from 'highcharts'
import { Utils } from '@wings-software/uicore'
import { Color } from '@harness/design-system'
import type { Point } from 'services/cv'
 
const MILLISECONDS_PER_HOUR = 1000 * 60 * 60 * 4
 
export const getDefaultChartOptions = (): Highcharts.Options => ({
  chart: { spacing: [20, 0, 20, 0] },
  xAxis: {
    tickInterval: MILLISECONDS_PER_HOUR,
    allowDecimals: false,
    type: 'datetime',
    labels: {
      formatter: function () {
        return moment(this.value).format('h:mm A')
      }
    },
    crosshair: {
      zIndex: 7
    }
  },
  yAxis: {
    labels: {
      formatter: function () {
        return `${this.value}%`
      }
    }
  },
  tooltip: {
    enabled: true,
    useHTML: true,
    padding: 0,
    borderWidth: 0,
    backgroundColor: 'white',
    formatter: function () {
      return `
        <div style="padding: 8px; background-color: white">
          <p style="color: var(--grey-400); font-weight: 500; font-size: 10px">
            ${moment(new Date(this.x)).format('dddd, lll')}
          </p>
          <p style="font-size: 10px" >${this.y.toFixed(2)}%</p>
        </div>
      `
    }
  },
  plotOptions: {
    area: {
      color: Utils.getRealCSSColor(Color.PRIMARY_3),
      marker: {
        enabled: false
      }
    }
  }
})
 
export const getDataPointsWithMinMaxXLimit = (
  data: Point[]
): {
  dataPoints: number[][]
  minXLimit: number
  maxXLimit: number
} => {
  const divider = 10
  const dataPoints = data.map(point => [Number(point.timestamp) || 0, Number(point.value) || 0])
 
  const minPoint = minBy(dataPoints, point => point[1]) ?? [0, 0]
  const maxPoint = maxBy(dataPoints, point => point[1]) ?? [0, 0]
 
  const minValue = Math.floor(minPoint[1])
  const maxValue = Math.ceil(maxPoint[1])
 
  const minValueReminder = minValue % divider
  const maxValueReminder = maxValue % divider
 
  const minXLimit = minValue - minValueReminder
  const maxXLimit = maxValueReminder ? maxValue + divider - maxValueReminder : maxValue
 
  return {
    dataPoints,
    minXLimit: minXLimit === maxXLimit ? minXLimit - divider : minXLimit,
    maxXLimit
  }
}