mirror of
https://github.com/VictoriaMetrics/VictoriaMetrics.git
synced 2024-11-21 14:44:00 +00:00
vmui: expression alias (#2495)
* feat: add alias for queries * docs: update docs for predefined dashboards * app/vmselect: `make vmui-update` Co-authored-by: Aliaksandr Valialkin <valyala@victoriametrics.com>
This commit is contained in:
Yury Molodov
GitHub
parent
4176be38c4
commit
c7693e8bc1
20 changed files with 1563 additions and 1828 deletions
|
|
@ -1,14 +1,14 @@
|
|||
{
|
||||
"files": {
|
||||
"main.css": "./static/css/main.d8362c27.css",
|
||||
"main.js": "./static/js/main.3e17cf70.js",
|
||||
"static/js/362.1a2113d4.chunk.js": "./static/js/362.1a2113d4.chunk.js",
|
||||
"main.js": "./static/js/main.d58914e5.js",
|
||||
"static/js/362.1f16598a.chunk.js": "./static/js/362.1f16598a.chunk.js",
|
||||
"static/js/27.939f971b.chunk.js": "./static/js/27.939f971b.chunk.js",
|
||||
"static/media/README.md": "./static/media/README.5e5724daf3ee333540a3.md",
|
||||
"static/media/README.md": "./static/media/README.40ebc3a1f4adae949154.md",
|
||||
"index.html": "./index.html"
|
||||
},
|
||||
"entrypoints": [
|
||||
"static/css/main.d8362c27.css",
|
||||
"static/js/main.3e17cf70.js"
|
||||
"static/js/main.d58914e5.js"
|
||||
]
|
||||
}
|
||||
|
|
@ -1 +1 @@
|
|||
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="./favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="VM-UI is a metric explorer for Victoria Metrics"/><link rel="apple-touch-icon" href="./apple-touch-icon.png"/><link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png"><link rel="manifest" href="./manifest.json"/><title>VM UI</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"/><script defer="defer" src="./static/js/main.3e17cf70.js"></script><link href="./static/css/main.d8362c27.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="./favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="VM-UI is a metric explorer for Victoria Metrics"/><link rel="apple-touch-icon" href="./apple-touch-icon.png"/><link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png"><link rel="manifest" href="./manifest.json"/><title>VM UI</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"/><script defer="defer" src="./static/js/main.d58914e5.js"></script><link href="./static/css/main.d8362c27.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
|
||||
|
|
@ -1 +0,0 @@
|
|||
"use strict";(self.webpackChunkvmui=self.webpackChunkvmui||[]).push([[362],{8362:function(e,s,u){e.exports=u.p+"static/media/README.5e5724daf3ee333540a3.md"}}]);
|
||||
1
app/vmselect/vmui/static/js/362.1f16598a.chunk.js
Normal file
1
app/vmselect/vmui/static/js/362.1f16598a.chunk.js
Normal file
|
|
@ -0,0 +1 @@
|
|||
"use strict";(self.webpackChunkvmui=self.webpackChunkvmui||[]).push([[362],{8362:function(e,a,s){e.exports=s.p+"static/media/README.40ebc3a1f4adae949154.md"}}]);
|
||||
File diff suppressed because one or more lines are too long
2
app/vmselect/vmui/static/js/main.d58914e5.js
Normal file
2
app/vmselect/vmui/static/js/main.d58914e5.js
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -28,7 +28,7 @@
|
|||
* @license MIT
|
||||
*/
|
||||
|
||||
/** @license MUI v5.5.2
|
||||
/** @license MUI v5.6.1
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
### Configuration options
|
||||
|
||||
<br/>
|
||||
DashboardSettings:
|
||||
|
||||
| Name | Type | Description |
|
||||
|:----------|:----------------:|---------------------------:|
|
||||
| rows* | `DashboardRow[]` | Sections containing panels |
|
||||
| title | `string` | Dashboard title |
|
||||
|
||||
<br/>
|
||||
DashboardRow:
|
||||
|
||||
| Name | Type | Description |
|
||||
|:-----------|:-----------------:|---------------------------:|
|
||||
| panels* | `PanelSettings[]` | List of panels (charts) |
|
||||
| title | `string` | Row title |
|
||||
|
||||
<br/>
|
||||
PanelSettings:
|
||||
|
||||
| Name | Type | Description |
|
||||
|:------------|:----------:|--------------------------------------------------------------------------------------:|
|
||||
| expr* | `string[]` | Data source queries |
|
||||
| alias | `string[]` | Expression alias. Matched by index in array |
|
||||
| title | `string` | Panel title |
|
||||
| description | `string` | Additional information about the panel |
|
||||
| unit | `string` | Y-axis unit |
|
||||
| showLegend | `boolean` | If `false`, the legend hide. Default value - `true` |
|
||||
| width | `number` | The number of columns the panel uses.<br/> From 1 (minimum width) to 12 (full width). |
|
||||
|
||||
---
|
||||
|
||||
### Example json
|
||||
|
||||
```json
|
||||
{
|
||||
"title": "Example",
|
||||
"rows": [
|
||||
{
|
||||
"title": "Per-job resource usage",
|
||||
"panels": [
|
||||
{
|
||||
"title": "Per-job CPU usage",
|
||||
"width": 6,
|
||||
"expr": [
|
||||
"sum(rate(process_cpu_seconds_total)) by (job)"
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Per-job RSS usage",
|
||||
"width": 6,
|
||||
"expr": [
|
||||
"sum(process_resident_memory_bytes) by (job)"
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Per-job disk read",
|
||||
"width": 6,
|
||||
"expr": [
|
||||
"sum(rate(process_io_storage_read_bytes_total)) by (job)"
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Per-job disk write",
|
||||
"width": 6,
|
||||
"expr": [
|
||||
"sum(rate(process_io_storage_written_bytes_total)) by (job)"
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Free/used disk space",
|
||||
"panels": [
|
||||
{
|
||||
"unit": "MB",
|
||||
"expr": [
|
||||
"sum(vm_data_size_bytes{type!=\"indexdb\"}) / 1024 / 1024",
|
||||
"vm_free_disk_space_bytes / 1024 / 1024"
|
||||
],
|
||||
"alias": [
|
||||
"usage space",
|
||||
"free space"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
```
|
||||
|
|
@ -1,77 +0,0 @@
|
|||
### Configuration options
|
||||
|
||||
<br/>
|
||||
DashboardSettings:
|
||||
|
||||
| Name | Type | Description |
|
||||
|:----------|:----------------:|---------------------------:|
|
||||
| rows* | `DashboardRow[]` | Sections containing panels |
|
||||
| title | `string` | Dashboard title |
|
||||
|
||||
|
||||
<br/>
|
||||
DashboardRow:
|
||||
|
||||
| Name | Type | Description |
|
||||
|:-----------|:-----------------:|---------------------------:|
|
||||
| panels* | `PanelSettings[]` | List of panels (charts) |
|
||||
| title | `string` | Row title |
|
||||
|
||||
<br/>
|
||||
PanelSettings:
|
||||
|
||||
| Name | Type | Description |
|
||||
|:------------|:----------:|-------------------------------------------------------------------------------------------:|
|
||||
| expr* | `string[]` | Data source queries |
|
||||
| title | `string` | Panel title |
|
||||
| description | `string` | Additional information about the panel |
|
||||
| unit | `string` | Y-axis unit |
|
||||
| showLegend | `boolean` | If `false`, the legend hide. Default value - `true` |
|
||||
| width | `number` | The number of columns the panel uses.<br/> From 1 (minimum width) to 12 (full width). |
|
||||
|
||||
---
|
||||
|
||||
### Example json
|
||||
|
||||
```json
|
||||
{
|
||||
"title": "Example",
|
||||
"rows": [
|
||||
{
|
||||
"title": "Performance",
|
||||
"panels": [
|
||||
{
|
||||
"title": "Query duration",
|
||||
"description": "The less time it takes is better.\n* `*` - unsupported query path\n* `/write` - insert into VM\n* `/metrics` - query VM system metrics\n* `/query` - query instant values\n* `/query_range` - query over a range of time\n* `/series` - match a certain label set\n* `/label/{}/values` - query a list of label values (variables mostly)",
|
||||
"unit": "ms",
|
||||
"showLegend": false,
|
||||
"expr": [
|
||||
"max(vm_request_duration_seconds{quantile=~\"(0.5|0.99)\"}) by (path, quantile) > 0"
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Concurrent flushes on disk",
|
||||
"description": "Shows how many ongoing insertions (not API /write calls) on disk are taking place, where:\n* `max` - equal to number of CPUs;\n* `current` - current number of goroutines busy with inserting rows into underlying storage.\n\nEvery successful API /write call results into flush on disk. However, these two actions are separated and controlled via different concurrency limiters. The `max` on this panel can't be changed and always equal to number of CPUs. \n\nWhen `current` hits `max` constantly, it means storage is overloaded and requires more CPU.\n\n",
|
||||
"expr": [
|
||||
"sum(vm_concurrent_addrows_capacity)",
|
||||
"sum(vm_concurrent_addrows_current)"
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Troubleshooting",
|
||||
"panels": [
|
||||
{
|
||||
"title": "Churn rate",
|
||||
"description": "Shows the rate and total number of new series created over last 24h.\n\nHigh churn rate tightly connected with database performance and may result in unexpected OOM's or slow queries. It is recommended to always keep an eye on this metric to avoid unexpected cardinality \"explosions\".\n\nThe higher churn rate is, the more resources required to handle it. Consider to keep the churn rate as low as possible.\n\nGood references to read:\n* https://www.robustperception.io/cardinality-is-key\n* https://www.robustperception.io/using-tsdb-analyze-to-investigate-churn-and-cardinality",
|
||||
"expr": [
|
||||
"sum(rate(vm_new_timeseries_created_total[5m]))",
|
||||
"sum(increase(vm_new_timeseries_created_total[24h]))"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
3094
app/vmui/packages/vmui/package-lock.json
generated
3094
app/vmui/packages/vmui/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -14,6 +14,7 @@ export interface GraphViewProps {
|
|||
period: TimeParams;
|
||||
customStep: CustomStep;
|
||||
query: string[];
|
||||
alias?: string[],
|
||||
yaxis: YaxisState;
|
||||
unit?: string;
|
||||
showLegend?: boolean;
|
||||
|
|
@ -45,7 +46,8 @@ const GraphView: FC<GraphViewProps> = ({
|
|||
unit,
|
||||
showLegend= true,
|
||||
setYaxisLimits,
|
||||
setPeriod
|
||||
setPeriod,
|
||||
alias = []
|
||||
}) => {
|
||||
const currentStep = useMemo(() => customStep.enable ? customStep.value : period.step || 1, [period.step, customStep]);
|
||||
|
||||
|
|
@ -70,7 +72,7 @@ const GraphView: FC<GraphViewProps> = ({
|
|||
const tempSeries: uPlotSeries[] = [];
|
||||
|
||||
data?.forEach((d) => {
|
||||
const seriesItem = getSeriesItem(d, hideSeries);
|
||||
const seriesItem = getSeriesItem(d, hideSeries, alias);
|
||||
tempSeries.push(seriesItem);
|
||||
tempLegend.push(getLegendItem(seriesItem, d.group));
|
||||
let tmpValues = tempValues[d.group];
|
||||
|
|
@ -117,7 +119,7 @@ const GraphView: FC<GraphViewProps> = ({
|
|||
const tempLegend: LegendItem[] = [];
|
||||
const tempSeries: uPlotSeries[] = [];
|
||||
data?.forEach(d => {
|
||||
const seriesItem = getSeriesItem(d, hideSeries);
|
||||
const seriesItem = getSeriesItem(d, hideSeries, alias);
|
||||
tempSeries.push(seriesItem);
|
||||
tempLegend.push(getLegendItem(seriesItem, d.group));
|
||||
});
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ const Legend: FC<LegendProps> = ({labels, query, onChange}) => {
|
|||
backgroundColor: `rgba(${hexToRGB(legendItem.color)}, 0.1)`
|
||||
}}/>
|
||||
<div className="legendLabel">
|
||||
{legendItem.freeFormFields.__name__ || `Query ${legendItem.group} result`}
|
||||
{legendItem.label.replace(/{.+}/gmi, "")}
|
||||
{!!Object.keys(legendItem.freeFormFields).length && <>
|
||||
 {
|
||||
{Object.keys(legendItem.freeFormFields).filter(f => f !== "__name__").map((f) => {
|
||||
|
|
@ -78,4 +78,4 @@ const Legend: FC<LegendProps> = ({labels, query, onChange}) => {
|
|||
</>;
|
||||
};
|
||||
|
||||
export default Legend;
|
||||
export default Legend;
|
||||
|
|
|
|||
|
|
@ -99,6 +99,7 @@ const PredefinedDashboard: FC<PredefinedDashboardProps> = ({index, title, panels
|
|||
description={p.description}
|
||||
unit={p.unit}
|
||||
expr={p.expr}
|
||||
alias={p.alias}
|
||||
filename={filename}
|
||||
showLegend={p.showLegend}/>
|
||||
<button style={{...resizerStyle, right: 0}}
|
||||
|
|
|
|||
|
|
@ -26,7 +26,8 @@ const PredefinedPanels: FC<PredefinedPanelsProps> = ({
|
|||
unit,
|
||||
expr,
|
||||
showLegend,
|
||||
filename
|
||||
filename,
|
||||
alias
|
||||
}) => {
|
||||
|
||||
const {time: {period}} = useAppState();
|
||||
|
|
@ -43,7 +44,7 @@ const PredefinedPanels: FC<PredefinedPanelsProps> = ({
|
|||
}
|
||||
});
|
||||
|
||||
const validExpr = useMemo(() => Array.isArray(expr) && expr.every(q => typeof q === "string"), [expr]);
|
||||
const validExpr = useMemo(() => Array.isArray(expr) && expr.every(q => q), [expr]);
|
||||
|
||||
const {isLoading, graphData, error} = useFetchQuery({
|
||||
predefinedQuery: validExpr ? expr : [],
|
||||
|
|
@ -121,6 +122,7 @@ const PredefinedPanels: FC<PredefinedPanelsProps> = ({
|
|||
query={expr}
|
||||
yaxis={yaxis}
|
||||
unit={unit}
|
||||
alias={alias}
|
||||
showLegend={showLegend}
|
||||
setYaxisLimits={setYaxisLimits}
|
||||
setPeriod={setPeriod}/>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@ DashboardSettings:
|
|||
| rows* | `DashboardRow[]` | Sections containing panels |
|
||||
| title | `string` | Dashboard title |
|
||||
|
||||
|
||||
<br/>
|
||||
DashboardRow:
|
||||
|
||||
|
|
@ -20,14 +19,15 @@ DashboardRow:
|
|||
<br/>
|
||||
PanelSettings:
|
||||
|
||||
| Name | Type | Description |
|
||||
|:------------|:----------:|-------------------------------------------------------------------------------------------:|
|
||||
| expr* | `string[]` | Data source queries |
|
||||
| title | `string` | Panel title |
|
||||
| description | `string` | Additional information about the panel |
|
||||
| unit | `string` | Y-axis unit |
|
||||
| showLegend | `boolean` | If `false`, the legend hide. Default value - `true` |
|
||||
| width | `number` | The number of columns the panel uses.<br/> From 1 (minimum width) to 12 (full width). |
|
||||
| Name | Type | Description |
|
||||
|:------------|:----------:|--------------------------------------------------------------------------------------:|
|
||||
| expr* | `string[]` | Data source queries |
|
||||
| alias | `string[]` | Expression alias. Matched by index in array |
|
||||
| title | `string` | Panel title |
|
||||
| description | `string` | Additional information about the panel |
|
||||
| unit | `string` | Y-axis unit |
|
||||
| showLegend | `boolean` | If `false`, the legend hide. Default value - `true` |
|
||||
| width | `number` | The number of columns the panel uses.<br/> From 1 (minimum width) to 12 (full width). |
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -38,40 +38,55 @@ PanelSettings:
|
|||
"title": "Example",
|
||||
"rows": [
|
||||
{
|
||||
"title": "Performance",
|
||||
"title": "Per-job resource usage",
|
||||
"panels": [
|
||||
{
|
||||
"title": "Query duration",
|
||||
"description": "The less time it takes is better.\n* `*` - unsupported query path\n* `/write` - insert into VM\n* `/metrics` - query VM system metrics\n* `/query` - query instant values\n* `/query_range` - query over a range of time\n* `/series` - match a certain label set\n* `/label/{}/values` - query a list of label values (variables mostly)",
|
||||
"unit": "ms",
|
||||
"showLegend": false,
|
||||
"title": "Per-job CPU usage",
|
||||
"width": 6,
|
||||
"expr": [
|
||||
"max(vm_request_duration_seconds{quantile=~\"(0.5|0.99)\"}) by (path, quantile) > 0"
|
||||
"sum(rate(process_cpu_seconds_total)) by (job)"
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Concurrent flushes on disk",
|
||||
"description": "Shows how many ongoing insertions (not API /write calls) on disk are taking place, where:\n* `max` - equal to number of CPUs;\n* `current` - current number of goroutines busy with inserting rows into underlying storage.\n\nEvery successful API /write call results into flush on disk. However, these two actions are separated and controlled via different concurrency limiters. The `max` on this panel can't be changed and always equal to number of CPUs. \n\nWhen `current` hits `max` constantly, it means storage is overloaded and requires more CPU.\n\n",
|
||||
"title": "Per-job RSS usage",
|
||||
"width": 6,
|
||||
"expr": [
|
||||
"sum(vm_concurrent_addrows_capacity)",
|
||||
"sum(vm_concurrent_addrows_current)"
|
||||
"sum(process_resident_memory_bytes) by (job)"
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Per-job disk read",
|
||||
"width": 6,
|
||||
"expr": [
|
||||
"sum(rate(process_io_storage_read_bytes_total)) by (job)"
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Per-job disk write",
|
||||
"width": 6,
|
||||
"expr": [
|
||||
"sum(rate(process_io_storage_written_bytes_total)) by (job)"
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Troubleshooting",
|
||||
"title": "Free/used disk space",
|
||||
"panels": [
|
||||
{
|
||||
"title": "Churn rate",
|
||||
"description": "Shows the rate and total number of new series created over last 24h.\n\nHigh churn rate tightly connected with database performance and may result in unexpected OOM's or slow queries. It is recommended to always keep an eye on this metric to avoid unexpected cardinality \"explosions\".\n\nThe higher churn rate is, the more resources required to handle it. Consider to keep the churn rate as low as possible.\n\nGood references to read:\n* https://www.robustperception.io/cardinality-is-key\n* https://www.robustperception.io/using-tsdb-analyze-to-investigate-churn-and-cardinality",
|
||||
"unit": "MB",
|
||||
"expr": [
|
||||
"sum(rate(vm_new_timeseries_created_total[5m]))",
|
||||
"sum(increase(vm_new_timeseries_created_total[24h]))"
|
||||
"sum(vm_data_size_bytes{type!=\"indexdb\"}) / 1024 / 1024",
|
||||
"vm_free_disk_space_bytes / 1024 / 1024"
|
||||
],
|
||||
"alias": [
|
||||
"usage space",
|
||||
"free space"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
```
|
||||
|
|
|
|||
|
|
@ -40,6 +40,7 @@ export interface PanelSettings {
|
|||
description?: string;
|
||||
unit?: string;
|
||||
expr: string[];
|
||||
alias?: string[];
|
||||
showLegend?: boolean;
|
||||
width?: number
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,12 @@
|
|||
import {MetricBase} from "../api/types";
|
||||
|
||||
export const getNameForMetric = (result: MetricBase): string => {
|
||||
export const getNameForMetric = (result: MetricBase, alias?: string): string => {
|
||||
const { __name__, ...freeFormFields } = result.metric;
|
||||
const name = alias || __name__ || `Query ${result.group} result`;
|
||||
|
||||
if (Object.keys(result.metric).length === 0) {
|
||||
return `Query ${result.group} result`; // a bit better than just {} for case of aggregation functions
|
||||
return name; // a bit better than just {} for case of aggregation functions
|
||||
}
|
||||
const { __name__: name, ...freeFormFields } = result.metric;
|
||||
return `${name || ""} {${Object.entries(freeFormFields).map(e => `${e[0]}: ${e[1]}`).join(", ")}}`;
|
||||
|
||||
return `${name} {${Object.entries(freeFormFields).map(e => `${e[0]}: ${e[1]}`).join(", ")}}`;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@ interface SeriesItem extends Series {
|
|||
freeFormFields: {[key: string]: string};
|
||||
}
|
||||
|
||||
export const getSeriesItem = (d: MetricResult, hideSeries: string[]): SeriesItem => {
|
||||
const label = getNameForMetric(d);
|
||||
export const getSeriesItem = (d: MetricResult, hideSeries: string[], alias: string[]): SeriesItem => {
|
||||
const label = getNameForMetric(d, alias[d.group - 1]);
|
||||
return {
|
||||
label,
|
||||
dash: getDashLine(d.group),
|
||||
|
|
@ -49,4 +49,4 @@ export const getHideSeries = ({hideSeries, legend, metaKey, series}: HideSeriesA
|
|||
|
||||
export const includesHideSeries = (label: string, group: string | number, hideSeries: string[]): boolean => {
|
||||
return hideSeries.includes(`${group}.${label}`);
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import dayjs from "dayjs";
|
||||
import {SetupTooltip} from "./types";
|
||||
import {getColorLine,formatPrettyNumber} from "./helpers";
|
||||
import {getColorLine, formatPrettyNumber} from "./helpers";
|
||||
|
||||
export const setTooltip = ({u, tooltipIdx, metrics, series, tooltip, tooltipOffset, unit = ""}: SetupTooltip): void => {
|
||||
const {seriesIdx, dataIdx} = tooltipIdx;
|
||||
|
|
@ -8,7 +8,8 @@ export const setTooltip = ({u, tooltipIdx, metrics, series, tooltip, tooltipOffs
|
|||
const dataSeries = u.data[seriesIdx][dataIdx];
|
||||
const dataTime = u.data[0][dataIdx];
|
||||
const metric = metrics[seriesIdx - 1]?.metric || {};
|
||||
const color = getColorLine(Number(series[seriesIdx].scale || 0), series[seriesIdx].label || "");
|
||||
const selectedSeries = series[seriesIdx];
|
||||
const color = getColorLine(Number(selectedSeries.scale || 0), selectedSeries.label || "");
|
||||
|
||||
const {width, height} = u.over.getBoundingClientRect();
|
||||
const top = u.valToPos((dataSeries || 0), series[seriesIdx]?.scale || "1");
|
||||
|
|
@ -20,12 +21,13 @@ export const setTooltip = ({u, tooltipIdx, metrics, series, tooltip, tooltipOffs
|
|||
tooltip.style.display = "grid";
|
||||
tooltip.style.top = `${tooltipOffset.top + top + 10 - (overflowY ? tooltipHeight + 10 : 0)}px`;
|
||||
tooltip.style.left = `${tooltipOffset.left + lft + 10 - (overflowX ? tooltipWidth + 20 : 0)}px`;
|
||||
const name = (selectedSeries.label || "").replace(/{.+}/gmi, "");
|
||||
const date = dayjs(new Date(dataTime * 1000)).format("YYYY-MM-DD HH:mm:ss:SSS (Z)");
|
||||
const info = Object.keys(metric).filter(k => k !== "__name__").map(k => `<div><b>${k}</b>: ${metric[k]}</div>`).join("");
|
||||
const marker = `<div class="u-tooltip__marker" style="background: ${color}"></div>`;
|
||||
tooltip.innerHTML = `<div>${date}</div>
|
||||
<div class="u-tooltip-data">
|
||||
${marker}${metric.__name__ || ""}: <b class="u-tooltip-data__value">${formatPrettyNumber(dataSeries)}</b> ${unit}
|
||||
${marker}${name}: <b class="u-tooltip-data__value">${formatPrettyNumber(dataSeries)}</b> ${unit}
|
||||
</div>
|
||||
<div class="u-tooltip__info">${info}</div>`;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -38,4 +38,4 @@ export interface LegendItem {
|
|||
color: string;
|
||||
checked: boolean;
|
||||
freeFormFields: {[key: string]: string};
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue