From a8c417f09d97d5c413ac1bacbbd28398e44ff8b0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 12 Nov 2020 17:23:05 +0100 Subject: [PATCH] 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 --- .../panel-graph/graph-ng-yaxis-ticks.json | 752 ++++++++++++++++++ .../src/components/uPlot/geometries/Axis.tsx | 18 +- .../src/components/uPlot/hooks.test.ts | 24 +- .../grafana-ui/src/components/uPlot/hooks.ts | 2 +- 4 files changed, 781 insertions(+), 15 deletions(-) create mode 100644 devenv/dev-dashboards/panel-graph/graph-ng-yaxis-ticks.json diff --git a/devenv/dev-dashboards/panel-graph/graph-ng-yaxis-ticks.json b/devenv/dev-dashboards/panel-graph/graph-ng-yaxis-ticks.json new file mode 100644 index 00000000000..1dbcc21ecb1 --- /dev/null +++ b/devenv/dev-dashboards/panel-graph/graph-ng-yaxis-ticks.json @@ -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 +} diff --git a/packages/grafana-ui/src/components/uPlot/geometries/Axis.tsx b/packages/grafana-ui/src/components/uPlot/geometries/Axis.tsx index f4773bbd20c..66c232d622f 100644 --- a/packages/grafana-ui/src/components/uPlot/geometries/Axis.tsx +++ b/packages/grafana-ui/src/components/uPlot/geometries/Axis.tsx @@ -68,13 +68,13 @@ export const Axis: React.FC = 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 = 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; diff --git a/packages/grafana-ui/src/components/uPlot/hooks.test.ts b/packages/grafana-ui/src/components/uPlot/hooks.test.ts index 757f91ebc07..e49edcc4eb2 100644 --- a/packages/grafana-ui/src/components/uPlot/hooks.test.ts +++ b/packages/grafana-ui/src/components/uPlot/hooks.test.ts @@ -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, diff --git a/packages/grafana-ui/src/components/uPlot/hooks.ts b/packages/grafana-ui/src/components/uPlot/hooks.ts index 47d10f313b4..e37d75703f3 100644 --- a/packages/grafana-ui/src/components/uPlot/hooks.ts +++ b/packages/grafana-ui/src/components/uPlot/hooks.ts @@ -95,7 +95,7 @@ export const DEFAULT_PLOT_CONFIG = { show: false, }, gutters: { - x: 8, + x: 16, y: 8, }, series: [],