apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

Browse Source 
* GraphNG: Adding ticks test dashboard and improves tick spacing

* Added comments

* Trying to trigger CI

* Update
pull/28961/head^2
Torkel Ödegaard 5 years ago 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 all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 752
      devenv/dev-dashboards/panel-graph/graph-ng-yaxis-ticks.json
  2. 18
      packages/grafana-ui/src/components/uPlot/geometries/Axis.tsx
  3. 24
      packages/grafana-ui/src/components/uPlot/hooks.test.ts
  4. 2
      packages/grafana-ui/src/components/uPlot/hooks.ts

752
devenv/dev-dashboards/panel-graph/graph-ng-yaxis-ticks.json vendored
Unescape 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
Unescape 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
Unescape 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
Unescape View File

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

Write Preview
Loading…
Cancel
Save