From a0b04559e4326241e4ad19385647fe2f4a784194 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 20 Jan 2020 13:07:39 +0100 Subject: [PATCH] BigValue: Updated test dashboard and made some chart sizing tweaks (#21616) --- .../panel-stat/panel-stat-tests.json | 485 ++++++++---------- .../components/BigValue/BigValueLayout.tsx | 2 + 2 files changed, 222 insertions(+), 265 deletions(-) diff --git a/devenv/dev-dashboards/panel-stat/panel-stat-tests.json b/devenv/dev-dashboards/panel-stat/panel-stat-tests.json index 3dba3f94a48..4f1c019de43 100644 --- a/devenv/dev-dashboards/panel-stat/panel-stat-tests.json +++ b/devenv/dev-dashboards/panel-stat/panel-stat-tests.json @@ -20,44 +20,50 @@ { "datasource": null, "gridPos": { - "h": 2, + "h": 3, "w": 24, "x": 0, "y": 0 }, "id": 6, - "interval": "10m", + "interval": "6m", "options": { "colorMode": "background", "fieldOptions": { "calcs": ["mean"], "defaults": { + "color": { + "mode": "thresholds" + }, "mappings": [], - "thresholds": [ - { - "color": "blue", - "value": null - }, - { - "color": "green", - "value": 10 - }, - { - "color": "purple", - "value": 20 - }, - { - "color": "orange", - "value": 40 - }, - { - "color": "red", - "value": 80 - } - ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "blue", + "value": null + }, + { + "color": "green", + "value": 10 + }, + { + "color": "purple", + "value": 20 + }, + { + "color": "orange", + "value": 40 + }, + { + "color": "red", + "value": 80 + } + ] + }, "unit": "areaM2" }, - "override": {}, + "overrides": [], "values": false }, "graphMode": "area", @@ -67,38 +73,17 @@ "show": true } }, - "pluginVersion": "6.5.0-pre", + "pluginVersion": "6.6.0-pre", "targets": [ { - "alias": "A longer title", - "refId": "A", - "scenarioId": "random_walk" - }, - { - "alias": "AB", - "refId": "C", - "scenarioId": "random_walk" - }, - { - "alias": "CPU", - "refId": "D", - "scenarioId": "random_walk" - }, - { - "alias": "Google", + "alias": "__house_locations", "labels": "", - "refId": "E", - "scenarioId": "random_walk" - }, - { - "alias": "Even longer road title", - "refId": "F", - "scenarioId": "random_walk" - }, - { - "alias": "Why does it have to", - "refId": "G", - "scenarioId": "random_walk" + "min": 0, + "noise": 5, + "refId": "A", + "scenarioId": "random_walk", + "seriesCount": 6, + "spread": 100 } ], "timeFrom": null, @@ -109,44 +94,50 @@ { "datasource": null, "gridPos": { - "h": 5, + "h": 6, "w": 24, "x": 0, - "y": 2 + "y": 3 }, "id": 10, - "interval": "10m", + "interval": "7m", "options": { "colorMode": "background", "fieldOptions": { "calcs": ["mean"], "defaults": { + "color": { + "mode": "thresholds" + }, "mappings": [], - "thresholds": [ - { - "color": "blue", - "value": null - }, - { - "color": "green", - "value": 10 - }, - { - "color": "purple", - "value": 20 - }, - { - "color": "orange", - "value": 40 - }, - { - "color": "red", - "value": 80 - } - ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "blue", + "value": null + }, + { + "color": "green", + "value": 10 + }, + { + "color": "purple", + "value": 20 + }, + { + "color": "orange", + "value": 40 + }, + { + "color": "red", + "value": 80 + } + ] + }, "unit": "areaM2" }, - "override": {}, + "overrides": [], "values": false }, "graphMode": "area", @@ -156,38 +147,16 @@ "show": true } }, - "pluginVersion": "6.5.0-pre", + "pluginVersion": "6.6.0-pre", "targets": [ { - "alias": "AB", + "alias": "__house_locations", + "min": 0, + "noise": 10, "refId": "A", - "scenarioId": "random_walk" - }, - { - "alias": "CPU", - "labels": "", - "refId": "C", - "scenarioId": "random_walk" - }, - { - "alias": "Longer title", - "refId": "D", - "scenarioId": "random_walk" - }, - { - "alias": "Even longer title", - "refId": "E", - "scenarioId": "random_walk" - }, - { - "alias": "Outside", - "refId": "F", - "scenarioId": "random_walk" - }, - { - "alias": "Inside", - "refId": "G", - "scenarioId": "random_walk" + "scenarioId": "random_walk", + "seriesCount": 6, + "spread": 10 } ], "timeFrom": null, @@ -198,44 +167,50 @@ { "datasource": null, "gridPos": { - "h": 5, + "h": 6, "w": 24, "x": 0, - "y": 7 + "y": 9 }, - "id": 11, - "interval": "10m", + "id": 14, + "interval": "7m", "options": { "colorMode": "value", "fieldOptions": { "calcs": ["mean"], "defaults": { + "color": { + "mode": "thresholds" + }, "mappings": [], - "thresholds": [ - { - "color": "blue", - "value": null - }, - { - "color": "green", - "value": 10 - }, - { - "color": "purple", - "value": 20 - }, - { - "color": "orange", - "value": 40 - }, - { - "color": "red", - "value": 80 - } - ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "blue", + "value": null + }, + { + "color": "green", + "value": 10 + }, + { + "color": "purple", + "value": 20 + }, + { + "color": "orange", + "value": 40 + }, + { + "color": "red", + "value": 80 + } + ] + }, "unit": "areaM2" }, - "override": {}, + "overrides": [], "values": false }, "graphMode": "area", @@ -245,37 +220,21 @@ "show": true } }, - "pluginVersion": "6.5.0-pre", + "pluginVersion": "6.6.0-pre", "targets": [ { + "alias": "__house_locations", + "min": 0, + "noise": 10, "refId": "A", - "scenarioId": "random_walk" - }, - { - "refId": "C", - "scenarioId": "random_walk" - }, - { - "refId": "D", - "scenarioId": "random_walk" - }, - { - "refId": "E", - "scenarioId": "random_walk" - }, - { - "refId": "F", - "scenarioId": "random_walk" - }, - { - "refId": "G", - "scenarioId": "random_walk" + "scenarioId": "random_walk", + "seriesCount": 6, + "spread": 10 } ], "timeFrom": null, "timeShift": null, "title": "Panel Title", - "transparent": true, "type": "stat" }, { @@ -284,79 +243,65 @@ "h": 14, "w": 6, "x": 0, - "y": 12 + "y": 15 }, "id": 13, - "interval": "10m", + "interval": "5m", "options": { "colorMode": "background", "fieldOptions": { "calcs": ["mean"], "defaults": { + "color": { + "mode": "thresholds" + }, "mappings": [], - "thresholds": [ - { - "color": "blue", - "value": null - }, - { - "color": "green", - "value": 10 - }, - { - "color": "purple", - "value": 20 - }, - { - "color": "orange", - "value": 40 - }, - { - "color": "red", - "value": 80 - } - ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "blue", + "value": null + }, + { + "color": "green", + "value": 10 + }, + { + "color": "purple", + "value": 20 + }, + { + "color": "orange", + "value": 40 + }, + { + "color": "red", + "value": 80 + } + ] + }, "unit": "areaM2" }, - "override": {}, + "overrides": [], "values": false }, "graphMode": "area", "justifyMode": "auto", - "orientation": "auto", + "orientation": "horizontal", "sparkline": { "show": true } }, - "pluginVersion": "6.5.0-pre", + "pluginVersion": "6.6.0-pre", "targets": [ { + "alias": "__server_names", + "min": 0, "refId": "A", - "scenarioId": "random_walk" - }, - { - "refId": "B", - "scenarioId": "random_walk" - }, - { - "refId": "C", - "scenarioId": "random_walk" - }, - { - "refId": "D", - "scenarioId": "random_walk" - }, - { - "refId": "E", - "scenarioId": "random_walk" - }, - { - "refId": "F", - "scenarioId": "random_walk" - }, - { - "refId": "G", - "scenarioId": "random_walk" + "scenarioId": "random_walk", + "seriesCount": 7, + "spread": 100 } ], "timeFrom": null, @@ -370,7 +315,7 @@ "h": 11, "w": 4, "x": 6, - "y": 12 + "y": 15 }, "id": 8, "interval": "10m", @@ -379,32 +324,38 @@ "fieldOptions": { "calcs": ["mean"], "defaults": { + "color": { + "mode": "thresholds" + }, "mappings": [], - "thresholds": [ - { - "color": "blue", - "value": null - }, - { - "color": "green", - "value": 10 - }, - { - "color": "purple", - "value": 20 - }, - { - "color": "orange", - "value": 40 - }, - { - "color": "red", - "value": 80 - } - ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "blue", + "value": null + }, + { + "color": "green", + "value": 10 + }, + { + "color": "purple", + "value": 20 + }, + { + "color": "orange", + "value": 40 + }, + { + "color": "red", + "value": 80 + } + ] + }, "unit": "areaM2" }, - "override": {}, + "overrides": [], "values": false }, "graphMode": "line", @@ -414,7 +365,7 @@ "show": true } }, - "pluginVersion": "6.5.0-pre", + "pluginVersion": "6.6.0-pre", "targets": [ { "refId": "A", @@ -456,7 +407,7 @@ "h": 9, "w": 8, "x": 10, - "y": 12 + "y": 15 }, "id": 12, "interval": "10m", @@ -465,32 +416,38 @@ "fieldOptions": { "calcs": ["mean"], "defaults": { + "color": { + "mode": "thresholds" + }, "mappings": [], - "thresholds": [ - { - "color": "blue", - "value": null - }, - { - "color": "green", - "value": 10 - }, - { - "color": "purple", - "value": 20 - }, - { - "color": "orange", - "value": 40 - }, - { - "color": "red", - "value": 80 - } - ], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "blue", + "value": null + }, + { + "color": "green", + "value": 10 + }, + { + "color": "purple", + "value": 20 + }, + { + "color": "orange", + "value": 40 + }, + { + "color": "red", + "value": 80 + } + ] + }, "unit": "areaM2" }, - "override": {}, + "overrides": [], "values": false }, "graphMode": "line", @@ -500,7 +457,7 @@ "show": true } }, - "pluginVersion": "6.5.0-pre", + "pluginVersion": "6.6.0-pre", "targets": [ { "refId": "A", @@ -537,7 +494,7 @@ "type": "stat" } ], - "schemaVersion": 21, + "schemaVersion": 22, "style": "dark", "tags": ["gdev", "panel-tests"], "templating": { @@ -551,7 +508,5 @@ "refresh_intervals": ["5s", "10s", "30s", "1m", "5m", "15m", "30m", "1h", "2h", "1d"] }, "timezone": "", - "title": "Panel Tests - Stat", - "uid": "jWWHNJpWz", - "version": 25 + "title": "Panel Tests - Stat" } diff --git a/packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx b/packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx index 9cc77731fa7..62ee040d72d 100644 --- a/packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx +++ b/packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx @@ -363,6 +363,8 @@ export class StackedWithChartLayout extends BigValueLayout { // make title fontsize it's a bit smaller than valueFontSize this.titleFontSize = Math.min(this.valueFontSize * 0.7, this.titleFontSize); + // make chart take up onused space + this.chartHeight = height - this.titleFontSize * LINE_HEIGHT - this.valueFontSize * LINE_HEIGHT + height * 0.05; } getValueAndTitleContainerStyles() {