prometheus

1
import React, { FC } from 'react';
2
import { UncontrolledTooltip } from 'reactstrap';
3
import { Histogram } from '../../types/types';
4
import { bucketRangeString } from './DataTable';
5

6
type ScaleType = 'linear' | 'exponential';
7

8
const HistogramChart: FC<{ histogram: Histogram; index: number; scale: ScaleType }> = ({ index, histogram, scale }) => {
9
  const { buckets } = histogram;
10
  const rangeMax = buckets ? parseFloat(buckets[buckets.length - 1][2]) : 0;
11
  const countMax = buckets ? buckets.map((b) => parseFloat(b[3])).reduce((a, b) => Math.max(a, b)) : 0;
12
  const formatter = Intl.NumberFormat('en', { notation: 'compact' });
13
  const positiveBuckets = buckets?.filter((b) => parseFloat(b[1]) >= 0); // we only want to show buckets with range >= 0
14
  const xLabelTicks = scale === 'linear' ? [0.25, 0.5, 0.75, 1] : [1];
15
  return (
16
    <div className="histogram-y-wrapper">
17
      <div className="histogram-y-labels">
18
        {[1, 0.75, 0.5, 0.25].map((i) => (
19
          <div key={i} className="histogram-y-label">
20
            {formatter.format(countMax * i)}
21
          </div>
22
        ))}
23
        <div key={0} className="histogram-y-label" style={{ height: 0 }}>
24
          0
25
        </div>
26
      </div>
27
      <div className="histogram-x-wrapper">
28
        <div className="histogram-container">
29
          {[0, 0.25, 0.5, 0.75, 1].map((i) => (
30
            <React.Fragment key={i}>
31
              <div className="histogram-y-grid" style={{ bottom: i * 100 + '%' }}></div>
32
              <div className="histogram-y-tick" style={{ bottom: i * 100 + '%' }}></div>
33
              <div className="histogram-x-grid" style={{ left: i * 100 + '%' }}></div>
34
              <div className="histogram-x-tick" style={{ left: i * 100 + '%' }}></div>
35
            </React.Fragment>
36
          ))}
37
          {positiveBuckets?.map((b, bIdx) => {
38
            const bucketIdx = `bucket-${index}-${bIdx}-${Math.ceil(parseFloat(b[3]) * 100)}`;
39
            const bucketLeft =
40
              scale === 'linear' ? (parseFloat(b[1]) / rangeMax) * 100 + '%' : (bIdx / positiveBuckets.length) * 100 + '%';
41
            const bucketWidth =
42
              scale === 'linear'
43
                ? ((parseFloat(b[2]) - parseFloat(b[1])) / rangeMax) * 100 + '%'
44
                : 100 / positiveBuckets.length + '%';
45
            return (
46
              <React.Fragment key={bIdx}>
47
                <div
48
                  id={bucketIdx}
49
                  className="histogram-bucket-slot"
50
                  style={{
51
                    left: bucketLeft,
52
                    width: bucketWidth,
53
                  }}
54
                >
55
                  <div
56
                    id={bucketIdx}
57
                    className="histogram-bucket"
58
                    style={{
59
                      height: (parseFloat(b[3]) / countMax) * 100 + '%',
60
                    }}
61
                  ></div>
62
                  <UncontrolledTooltip
63
                    style={{ maxWidth: 'unset', padding: 10, textAlign: 'left' }}
64
                    placement="bottom"
65
                    target={bucketIdx}
66
                  >
67
                    <strong>range:</strong> {bucketRangeString(b)}
68
                    <br />
69
                    <strong>count:</strong> {b[3]}
70
                  </UncontrolledTooltip>
71
                </div>
72
              </React.Fragment>
73
            );
74
          })}
75
          <div className="histogram-axes"></div>
76
        </div>
77
        <div className="histogram-x-labels">
78
          <div key={0} className="histogram-x-label" style={{ width: 0 }}>
79
            0
80
          </div>
81
          {xLabelTicks.map((i) => (
82
            <div key={i} className="histogram-x-label">
83
              <div style={{ position: 'absolute', right: i === 1 ? 0 : -18 }}>{formatter.format(rangeMax * i)}</div>
84
            </div>
85
          ))}
86
        </div>
87
      </div>
88
    </div>
89
  );
90
};
91

92
export default HistogramChart;
93