root
/
grafana
mirror of https://github.com/grafana/grafana.git
1
0
Fork 0
Code Issues Actions 243 Packages Projects Releases Wiki Activity

GraphNG: Adding ticks test dashboard and improves tick spacing (#29044) 

* GraphNG: Adding ticks test dashboard and improves tick spacing

* Added comments

* Trying to trigger CI

* Update
This commit is contained in:
Torkel Ödegaard 2020-11-12 17:23:05 +01:00 committed by GitHub
parent 1bb61660f1
commit a8c417f09d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 781 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

752
devenv/dev-dashboards/panel-graph/graph-ng-yaxis-ticks.json Normal file
View File

@ -0,0 +1,752 @@
{
"annotations": {
"list": [
{
"builtIn": 1,
"datasource": "-- Grafana --",
"enable": true,
"hide": true,
"iconColor": "rgba(0, 211, 255, 1)",
"name": "Annotations & Alerts",
"type": "dashboard"
}
]
},
"editable": true,
"gnetId": null,
"graphTooltip": 0,
"links": [],
"panels": [
{
"datasource": null,
"fieldConfig": {
"defaults": {
"color": {
"mode": "palette-classic"
},
"custom": {
"axis": {
"grid": true,
"label": "",
"side": 3,
"width": 60
},
"bars": {
"show": false
},
"fill": {
"alpha": 0
},
"line": {
"show": true,
"width": 1
},
"nullValues": "null",
"points": {
"radius": 4,
"show": false
}
},
"links": [],
"mappings": [],
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green",
"value": null
},
{
"color": "red",
"value": 80
}
]
},
"unit": "short"
},
"overrides": []
},
"gridPos": {
"h": 7,
"w": 8,
"x": 0,
"y": 0
},
"id": 7,
"options": {
"legend": {
"asTable": false,
"isVisible": true,
"placement": "bottom"
},
"tooltipOptions": {
"mode": "single"
}
},
"pluginVersion": "7.4.0-pre",
"targets": [
{
"refId": "A",
"scenarioId": "csv_metric_values",
"stringInput": "0,500,1000,3000,2500,4000,4500,5000,7000,7500,8000,8500,9000,9500,10000"
}
],
"timeFrom": null,
"timeShift": null,
"title": "Data from 0 - 10K (unit short)",
"type": "graph3"
},
{
"datasource": null,
"fieldConfig": {
"defaults": {
"color": {
"mode": "palette-classic"
},
"custom": {
"axis": {
"grid": true,
"label": "",
"side": 3,
"width": 60
},
"bars": {
"show": false
},
"fill": {
"alpha": 0
},
"line": {
"show": true,
"width": 1
},
"nullValues": "null",
"points": {
"radius": 4,
"show": false
}
},
"links": [],
"mappings": [],
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green",
"value": null
},
{
"color": "red",
"value": 80
}
]
},
"unit": "bytes"
},
"overrides": []
},
"gridPos": {
"h": 7,
"w": 8,
"x": 8,
"y": 0
},
"id": 5,
"options": {
"legend": {
"asTable": false,
"isVisible": true,
"placement": "bottom"
},
"tooltipOptions": {
"mode": "single"
}
},
"pluginVersion": "7.4.0-pre",
"targets": [
{
"refId": "A",
"scenarioId": "csv_metric_values",
"stringInput": "0,500,1000,3000,2500,4000,4500,5000,7000,7500,8000,8500,9000,9500,10000"
}
],
"timeFrom": null,
"timeShift": null,
"title": "Data from 0 - 10K (unit bytes metric)",
"type": "graph3"
},
{
"datasource": null,
"fieldConfig": {
"defaults": {
"color": {
"mode": "palette-classic"
},
"custom": {
"axis": {
"grid": true,
"label": "",
"side": 3,
"width": 60
},
"bars": {
"show": false
},
"fill": {
"alpha": 0
},
"line": {
"show": true,
"width": 1
},
"nullValues": "null",
"points": {
"radius": 4,
"show": false
}
},
"links": [],
"mappings": [],
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green",
"value": null
},
{
"color": "red",
"value": 80
}
]
},
"unit": "bytes"
},
"overrides": []
},
"gridPos": {
"h": 7,
"w": 8,
"x": 16,
"y": 0
},
"id": 4,
"options": {
"legend": {
"asTable": false,
"isVisible": true,
"placement": "bottom"
},
"tooltipOptions": {
"mode": "single"
}
},
"pluginVersion": "7.4.0-pre",
"targets": [
{
"refId": "A",
"scenarioId": "csv_metric_values",
"stringInput": "0,500,1000,3000,2500,4000,4500,5000,7000,7500,8000,8500,9000,9500,10000"
}
],
"timeFrom": null,
"timeShift": null,
"title": "Data from 0 - 10K (unit bytes IEC)",
"type": "graph3"
},
{
"datasource": null,
"fieldConfig": {
"defaults": {
"color": {
"mode": "palette-classic"
},
"custom": {
"axis": {
"grid": true,
"label": "",
"side": 3,
"width": 60
},
"bars": {
"show": false
},
"fill": {
"alpha": 0
},
"line": {
"show": true,
"width": 1
},
"nullValues": "null",
"points": {
"radius": 4,
"show": false
}
},
"links": [],
"mappings": [],
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green",
"value": null
},
{
"color": "red",
"value": 80
}
]
},
"unit": "short"
},
"overrides": []
},
"gridPos": {
"h": 9,
"w": 8,
"x": 0,
"y": 7
},
"id": 2,
"options": {
"legend": {
"asTable": false,
"isVisible": true,
"placement": "bottom"
},
"tooltipOptions": {
"mode": "single"
}
},
"pluginVersion": "7.4.0-pre",
"targets": [
{
"refId": "A",
"scenarioId": "csv_metric_values",
"stringInput": "0,500,1000,3000,2500,4000,4500,5000,7000,7500,8000,8500,9000,9500,10000"
}
],
"timeFrom": null,
"timeShift": null,
"title": "Data from 0 - 10K (unit short)",
"type": "graph3"
},
{
"datasource": null,
"fieldConfig": {
"defaults": {
"color": {
"mode": "palette-classic"
},
"custom": {
"axis": {
"grid": true,
"label": "",
"side": 3,
"width": 60
},
"bars": {
"show": false
},
"fill": {
"alpha": 0
},
"line": {
"show": true,
"width": 1
},
"nullValues": "null",
"points": {
"radius": 4,
"show": false
}
},
"links": [],
"mappings": [],
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green",
"value": null
},
{
"color": "red",
"value": 80
}
]
},
"unit": "short"
},
"overrides": []
},
"gridPos": {
"h": 9,
"w": 8,
"x": 8,
"y": 7
},
"id": 3,
"options": {
"legend": {
"asTable": false,
"isVisible": true,
"placement": "bottom"
},
"tooltipOptions": {
"mode": "single"
}
},
"pluginVersion": "7.4.0-pre",
"targets": [
{
"refId": "A",
"scenarioId": "csv_metric_values",
"stringInput": "0.001,0.0002,0.0003"
}
],
"timeFrom": null,
"timeShift": null,
"title": "Data from 0.0002 - 0.001 (unit short)",
"type": "graph3"
},
{
"datasource": null,
"fieldConfig": {
"defaults": {
"color": {
"mode": "palette-classic"
},
"custom": {
"axis": {
"grid": true,
"label": "",
"side": 3,
"width": 60
},
"bars": {
"show": false
},
"fill": {
"alpha": 0
},
"line": {
"show": true,
"width": 1
},
"nullValues": "null",
"points": {
"radius": 4,
"show": false
}
},
"links": [],
"mappings": [],
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green",
"value": null
},
{
"color": "red",
"value": 80
}
]
},
"unit": "ms"
},
"overrides": []
},
"gridPos": {
"h": 9,
"w": 8,
"x": 16,
"y": 7
},
"id": 6,
"options": {
"legend": {
"asTable": false,
"isVisible": true,
"placement": "bottom"
},
"tooltipOptions": {
"mode": "single"
}
},
"pluginVersion": "7.4.0-pre",
"targets": [
{
"refId": "A",
"scenarioId": "csv_metric_values",
"stringInput": "12000,15000,20000"
}
],
"timeFrom": null,
"timeShift": null,
"title": "Data from 12000 - 30000 (unit ms)",
"type": "graph3"
},
{
"datasource": null,
"description": "",
"fieldConfig": {
"defaults": {
"color": {
"mode": "palette-classic"
},
"custom": {
"axis": {
"grid": true,
"label": "",
"side": 3,
"width": 60
},
"bars": {
"show": false
},
"fill": {
"alpha": 0
},
"line": {
"show": true,
"width": 1
},
"nullValues": "null",
"points": {
"radius": 4,
"show": false
}
},
"links": [],
"mappings": [],
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green",
"value": null
},
{
"color": "red",
"value": 80
}
]
},
"unit": "short"
},
"overrides": []
},
"gridPos": {
"h": 9,
"w": 8,
"x": 0,
"y": 16
},
"id": 9,
"options": {
"legend": {
"asTable": false,
"isVisible": true,
"placement": "bottom"
},
"tooltipOptions": {
"mode": "single"
}
},
"pluginVersion": "7.4.0-pre",
"targets": [
{
"refId": "A",
"scenarioId": "csv_metric_values",
"stringInput": "0,10000000000"
}
],
"timeFrom": null,
"timeShift": null,
"title": "Data from 0 - 1B (unit short)",
"type": "graph3"
},
{
"datasource": null,
"description": "",
"fieldConfig": {
"defaults": {
"color": {
"mode": "palette-classic"
},
"custom": {
"axis": {
"grid": true,
"label": "",
"side": 3,
"width": 60
},
"bars": {
"show": false
},
"fill": {
"alpha": 0
},
"line": {
"show": true,
"width": 1
},
"nullValues": "null",
"points": {
"radius": 4,
"show": false
}
},
"links": [],
"mappings": [],
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green",
"value": null
},
{
"color": "red",
"value": 80
}
]
},
"unit": "decbytes"
},
"overrides": []
},
"gridPos": {
"h": 9,
"w": 8,
"x": 8,
"y": 16
},
"id": 10,
"options": {
"legend": {
"asTable": false,
"isVisible": true,
"placement": "bottom"
},
"tooltipOptions": {
"mode": "single"
}
},
"pluginVersion": "7.4.0-pre",
"targets": [
{
"refId": "A",
"scenarioId": "csv_metric_values",
"stringInput": "0,10000000000"
}
],
"timeFrom": null,
"timeShift": null,
"title": "Data from 0 - 1B (unit bytes)",
"type": "graph3"
},
{
"datasource": null,
"fieldConfig": {
"defaults": {
"color": {
"mode": "palette-classic"
},
"custom": {
"axis": {
"grid": true,
"label": "",
"side": 3,
"width": 60
},
"bars": {
"show": false
},
"fill": {
"alpha": 0
},
"line": {
"show": true,
"width": 1
},
"nullValues": "null",
"points": {
"radius": 4,
"show": false
}
},
"links": [],
"mappings": [],
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green",
"value": null
},
{
"color": "red",
"value": 80
}
]
},
"unit": "ms"
},
"overrides": []
},
"gridPos": {
"h": 9,
"w": 8,
"x": 16,
"y": 16
},
"id": 8,
"options": {
"legend": {
"asTable": false,
"isVisible": true,
"placement": "bottom"
},
"tooltipOptions": {
"mode": "single"
}
},
"pluginVersion": "7.4.0-pre",
"targets": [
{
"refId": "A",
"scenarioId": "csv_metric_values",
"stringInput": "12000,15000,20000"
}
],
"timeFrom": null,
"timeShift": null,
"title": "Data from 12000 - 30000 (unit ms)",
"type": "graph3"
}
],
"refresh": false,
"schemaVersion": 26,
"style": "dark",
"tags": ["gdev", "panel-tests"],
"templating": {
"list": []
},
"time": {
"from": "now-6h",
"to": "now"
},
"timepicker": {
"refresh_intervals": ["5s", "10s", "30s", "1m", "5m", "15m", "30m", "1h", "2h", "1d"]
},
"timezone": "",
"title": "Panel Tests - Graph NG - Y axis ticks",
"uid": "29Yjn62Gk",
"version": 2
}

18
packages/grafana-ui/src/components/uPlot/geometries/Axis.tsx
View File

@ -68,13 +68,13 @@ export const Axis: React.FC<AxisProps> = props => {
width: 1 / devicePixelRatio,
},
values: values,
space: calculateSpace,
};
if (values) {
config.values = values;
} else if (isTime) {
config.values = formatTime;
config.space = 60;
} else if (formatValue) {
config.values = (u: uPlot, vals: any[]) => vals.map(v => formatValue(v));
}
@ -89,9 +89,22 @@ export const Axis: React.FC<AxisProps> = props => {
return null;
};
/* Minimum grid & tick spacing in CSS pixels */
function calculateSpace(self: uPlot, axisIdx: number, scaleMin: number, scaleMax: number, plotDim: number): number {
const axis = self.axes[axisIdx];
// For x-axis (bottom) we need bigger spacing between labels
if (axis.side === 2) {
return 60;
}
return 30;
}
/** height of x axis or width of y axis in CSS pixels alloted for values, gap & ticks, but excluding axis label */
function calculateAxisSize(self: uPlot, values: string[], axisIdx: number) {
const axis = self.axes[axisIdx];
if (axis.scale === 'x') {
if (axis.side === 2) {
return 33;
}
@ -109,6 +122,7 @@ function calculateAxisSize(self: uPlot, values: string[], axisIdx: number) {
return measureText(maxLength, 12).width;
}
/** Format time axis ticks */
function formatTime(self: uPlot, splits: number[], axisIdx: number, foundSpace: number, foundIncr: number): string[] {
const timeZone = (self.axes[axisIdx] as any).timeZone;
const scale = self.scales.x;

24
packages/grafana-ui/src/components/uPlot/hooks.test.ts
View File

@ -17,7 +17,7 @@ describe('usePlotConfig', () => {
"alpha": 1,
},
"gutters": Object {
"x": 8,
"x": 16,
"y": 8,
},
"height": 0,
@ -59,7 +59,7 @@ describe('usePlotConfig', () => {
"alpha": 1,
},
"gutters": Object {
"x": 8,
"x": 16,
"y": 8,
},
"height": 0,
@ -108,7 +108,7 @@ describe('usePlotConfig', () => {
"alpha": 1,
},
"gutters": Object {
"x": 8,
"x": 16,
"y": 8,
},
"height": 0,
@ -155,7 +155,7 @@ describe('usePlotConfig', () => {
"alpha": 1,
},
"gutters": Object {
"x": 8,
"x": 16,
"y": 8,
},
"height": 0,
@ -203,7 +203,7 @@ describe('usePlotConfig', () => {
"alpha": 1,
},
"gutters": Object {
"x": 8,
"x": 16,
"y": 8,
},
"height": 0,
@ -253,7 +253,7 @@ describe('usePlotConfig', () => {
"alpha": 1,
},
"gutters": Object {
"x": 8,
"x": 16,
"y": 8,
},
"height": 0,
@ -297,7 +297,7 @@ describe('usePlotConfig', () => {
"alpha": 1,
},
"gutters": Object {
"x": 8,
"x": 16,
"y": 8,
},
"height": 0,
@ -341,7 +341,7 @@ describe('usePlotConfig', () => {
"alpha": 1,
},
"gutters": Object {
"x": 8,
"x": 16,
"y": 8,
},
"height": 0,
@ -391,7 +391,7 @@ describe('usePlotConfig', () => {
"alpha": 1,
},
"gutters": Object {
"x": 8,
"x": 16,
"y": 8,
},
"height": 0,
@ -439,7 +439,7 @@ describe('usePlotConfig', () => {
"alpha": 1,
},
"gutters": Object {
"x": 8,
"x": 16,
"y": 8,
},
"height": 0,
@ -484,7 +484,7 @@ describe('usePlotConfig', () => {
"alpha": 1,
},
"gutters": Object {
"x": 8,
"x": 16,
"y": 8,
},
"height": 0,
@ -538,7 +538,7 @@ describe('usePlotConfig', () => {
"alpha": 1,
},
"gutters": Object {
"x": 8,
"x": 16,
"y": 8,
},
"height": 0,

2
packages/grafana-ui/src/components/uPlot/hooks.ts
View File

@ -95,7 +95,7 @@ export const DEFAULT_PLOT_CONFIG = {
show: false,
},
gutters: {
x: 8,
x: 16,
y: 8,
},
series: [],