Avi Drissman | 4e1b7bc3 | 2022-09-15 14:03:50 | [diff] [blame] | 1 | // Copyright 2013 The Chromium Authors |
[email protected] | 03bf84a | 2013-03-23 22:11:48 | [diff] [blame] | 2 | // Use of this source code is governed by a BSD-style license that can be |
| 3 | // found in the LICENSE file. |
| 4 | |
rbpotter | 5796b00 | 2021-03-10 18:49:21 | [diff] [blame] | 5 | // The maximum number of data points buffered for each stats. Old data points |
| 6 | // will be shifted out when the buffer is full. |
| 7 | export const MAX_STATS_DATA_POINT_BUFFER_SIZE = 1000; |
| 8 | |
[email protected] | 03bf84a | 2013-03-23 22:11:48 | [diff] [blame] | 9 | /** |
| 10 | * A TimelineDataSeries collects an ordered series of (time, value) pairs, |
| 11 | * and converts them to graph points. It also keeps track of its color and |
| 12 | * current visibility state. |
[email protected] | 81f1f26 | 2013-05-09 12:38:53 | [diff] [blame] | 13 | * It keeps MAX_STATS_DATA_POINT_BUFFER_SIZE data points at most. Old data |
| 14 | * points will be dropped when it reaches this size. |
[email protected] | 03bf84a | 2013-03-23 22:11:48 | [diff] [blame] | 15 | */ |
rbpotter | 5796b00 | 2021-03-10 18:49:21 | [diff] [blame] | 16 | export class TimelineDataSeries { |
Philipp Hancke | ec3c954 | 2022-07-15 09:19:21 | [diff] [blame] | 17 | constructor(statsType) { |
[email protected] | 03bf84a | 2013-03-23 22:11:48 | [diff] [blame] | 18 | // List of DataPoints in chronological order. |
| 19 | this.dataPoints_ = []; |
| 20 | |
| 21 | // Default color. Should always be overridden prior to display. |
| 22 | this.color_ = 'red'; |
| 23 | // Whether or not the data series should be drawn. |
| 24 | this.isVisible_ = true; |
| 25 | |
| 26 | this.cacheStartTime_ = null; |
| 27 | this.cacheStepSize_ = 0; |
| 28 | this.cacheValues_ = []; |
Philipp Hancke | ec3c954 | 2022-07-15 09:19:21 | [diff] [blame] | 29 | this.statsType_ = statsType; |
[email protected] | 03bf84a | 2013-03-23 22:11:48 | [diff] [blame] | 30 | } |
| 31 | |
rbpotter | 5796b00 | 2021-03-10 18:49:21 | [diff] [blame] | 32 | /** |
| 33 | * @override |
| 34 | */ |
| 35 | toJSON() { |
| 36 | if (this.dataPoints_.length < 1) { |
| 37 | return {}; |
Evan Shrubsole | b9464e5 | 2021-03-03 18:01:10 | [diff] [blame] | 38 | } |
rbpotter | 5796b00 | 2021-03-10 18:49:21 | [diff] [blame] | 39 | |
Philipp Hancke | 0635d314 | 2021-03-16 20:02:09 | [diff] [blame] | 40 | const values = []; |
| 41 | for (let i = 0; i < this.dataPoints_.length; ++i) { |
rbpotter | 5796b00 | 2021-03-10 18:49:21 | [diff] [blame] | 42 | values.push(this.dataPoints_[i].value); |
| 43 | } |
| 44 | return { |
| 45 | startTime: this.dataPoints_[0].time, |
| 46 | endTime: this.dataPoints_[this.dataPoints_.length - 1].time, |
Philipp Hancke | ec3c954 | 2022-07-15 09:19:21 | [diff] [blame] | 47 | statsType: this.statsType_, |
rbpotter | 5796b00 | 2021-03-10 18:49:21 | [diff] [blame] | 48 | values: JSON.stringify(values), |
| 49 | }; |
| 50 | } |
Evan Shrubsole | b9464e5 | 2021-03-03 18:01:10 | [diff] [blame] | 51 | |
| 52 | /** |
rbpotter | 5796b00 | 2021-03-10 18:49:21 | [diff] [blame] | 53 | * Adds a DataPoint to |this| with the specified time and value. |
| 54 | * DataPoints are assumed to be received in chronological order. |
Evan Shrubsole | b9464e5 | 2021-03-03 18:01:10 | [diff] [blame] | 55 | */ |
rbpotter | 5796b00 | 2021-03-10 18:49:21 | [diff] [blame] | 56 | addPoint(timeTicks, value) { |
Philipp Hancke | 0635d314 | 2021-03-16 20:02:09 | [diff] [blame] | 57 | const time = new Date(timeTicks); |
rbpotter | 5796b00 | 2021-03-10 18:49:21 | [diff] [blame] | 58 | this.dataPoints_.push(new DataPoint(time, value)); |
| 59 | |
| 60 | if (this.dataPoints_.length > MAX_STATS_DATA_POINT_BUFFER_SIZE) { |
| 61 | this.dataPoints_.shift(); |
| 62 | } |
| 63 | } |
| 64 | |
| 65 | isVisible() { |
| 66 | return this.isVisible_; |
| 67 | } |
| 68 | |
| 69 | show(isVisible) { |
| 70 | this.isVisible_ = isVisible; |
| 71 | } |
| 72 | |
| 73 | getColor() { |
| 74 | return this.color_; |
| 75 | } |
| 76 | |
| 77 | setColor(color) { |
| 78 | this.color_ = color; |
| 79 | } |
| 80 | |
| 81 | getCount() { |
| 82 | return this.dataPoints_.length; |
| 83 | } |
| 84 | /** |
| 85 | * Returns a list containing the values of the data series at |count| |
| 86 | * points, starting at |startTime|, and |stepSize| milliseconds apart. |
| 87 | * Caches values, so showing/hiding individual data series is fast. |
| 88 | */ |
| 89 | getValues(startTime, stepSize, count) { |
| 90 | // Use cached values, if we can. |
| 91 | if (this.cacheStartTime_ === startTime && |
| 92 | this.cacheStepSize_ === stepSize && |
| 93 | this.cacheValues_.length === count) { |
| 94 | return this.cacheValues_; |
| 95 | } |
| 96 | |
| 97 | // Do all the work. |
| 98 | this.cacheValues_ = this.getValuesInternal_(startTime, stepSize, count); |
| 99 | this.cacheStartTime_ = startTime; |
| 100 | this.cacheStepSize_ = stepSize; |
| 101 | |
| 102 | return this.cacheValues_; |
| 103 | } |
| 104 | |
| 105 | /** |
| 106 | * Returns the cached |values| in the specified time period. |
| 107 | */ |
| 108 | getValuesInternal_(startTime, stepSize, count) { |
Philipp Hancke | 0635d314 | 2021-03-16 20:02:09 | [diff] [blame] | 109 | const values = []; |
| 110 | let nextPoint = 0; |
Philipp Hancke | 0635d314 | 2021-03-16 20:02:09 | [diff] [blame] | 111 | let time = startTime; |
Emil Vardar | 18237f8 | 2025-02-13 11:33:52 | [diff] [blame] | 112 | let previousValue = 0; |
Philipp Hancke | 0635d314 | 2021-03-16 20:02:09 | [diff] [blame] | 113 | for (let i = 0; i < count; ++i) { |
Emil Vardar | 18237f8 | 2025-02-13 11:33:52 | [diff] [blame] | 114 | let currentValue = null; |
| 115 | let numPoints = 0; |
rbpotter | 5796b00 | 2021-03-10 18:49:21 | [diff] [blame] | 116 | while (nextPoint < this.dataPoints_.length && |
| 117 | this.dataPoints_[nextPoint].time < time) { |
Emil Vardar | 18237f8 | 2025-02-13 11:33:52 | [diff] [blame] | 118 | // In case multiple dataPoints exist within the `stepSize`, |
| 119 | // get the average in that interval. |
| 120 | currentValue += this.dataPoints_[nextPoint].value; |
rbpotter | 5796b00 | 2021-03-10 18:49:21 | [diff] [blame] | 121 | ++nextPoint; |
Emil Vardar | 18237f8 | 2025-02-13 11:33:52 | [diff] [blame] | 122 | ++numPoints; |
rbpotter | 5796b00 | 2021-03-10 18:49:21 | [diff] [blame] | 123 | } |
Emil Vardar | 18237f8 | 2025-02-13 11:33:52 | [diff] [blame] | 124 | values[i] = |
| 125 | (currentValue == null) ? previousValue : (currentValue / numPoints); |
| 126 | previousValue = values[i]; |
rbpotter | 5796b00 | 2021-03-10 18:49:21 | [diff] [blame] | 127 | time += stepSize; |
| 128 | } |
| 129 | return values; |
| 130 | } |
| 131 | } |
| 132 | |
| 133 | /** |
| 134 | * A single point in a data series. Each point has a time, in the form of |
| 135 | * milliseconds since the Unix epoch, and a numeric value. |
| 136 | */ |
| 137 | class DataPoint { |
| 138 | constructor(time, value) { |
[email protected] | 03bf84a | 2013-03-23 22:11:48 | [diff] [blame] | 139 | this.time = time; |
| 140 | this.value = value; |
| 141 | } |
rbpotter | 5796b00 | 2021-03-10 18:49:21 | [diff] [blame] | 142 | } |