mirror of
https://github.com/timberjoegithub/grafana-statusmap.git
synced 2026-07-21 23:42:03 +00:00
Support for dark theme
- dark theme colors - dark theme screenshot
This commit is contained in:
Ivan Mikheykin
@@ -1,2 +1,4 @@
|
||||
node_modules
|
||||
.jshintrc
|
||||
.idea
|
||||
.sass-cache
|
||||
|
||||
+2
-1
@@ -53,7 +53,8 @@ module.exports = (grunt) => {
|
||||
sass: {
|
||||
dist: {
|
||||
files: {
|
||||
'dist/css/status-heatmap.css': 'src/css/status-heatmap.scss'
|
||||
'dist/css/statusmap.dark.css': 'src/css/statusmap.dark.scss',
|
||||
'dist/css/statusmap.light.css': 'src/css/statusmap.light.scss'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
# Statusmap panel for Grafana
|
||||
|
||||
|
||||
(https://raw.githubusercontent.com/flant/grafana-statusmap/master/src/img/flant-statusmap-panel-dark.png)
|
||||
|
||||
|
||||
## Features
|
||||
|
||||
|
||||
Vendored
+2
@@ -1,6 +1,8 @@
|
||||
# Statusmap panel for Grafana
|
||||
|
||||
|
||||
(https://raw.githubusercontent.com/flant/grafana-statusmap/master/src/img/flant-statusmap-panel-dark.png)
|
||||
|
||||
|
||||
## Features
|
||||
|
||||
|
||||
Vendored
+1
File diff suppressed because one or more lines are too long
Vendored
+1
File diff suppressed because one or more lines are too long
Vendored
-7
@@ -1,7 +0,0 @@
|
||||
{
|
||||
"version": 3,
|
||||
"mappings": "AAGA,8BAA+B;EAE7B,MAAM,EAAE,SAAS;EAEjB,uDAAyB;IACzB,gBAAgB,EAAE,KAAK;IACvB,OAAO,EAAE,GAAG;;AAId,qBAAsB;EACpB,QAAQ,EAAE,QAAQ;EAGhB,sCAAK;IACH,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,OAAO;IACd,SAAS,EAAE,IAAI;EAGjB,sCAAK;IACH,OAAO,EAAE,GAAG;IACZ,MAAM,EAAE,OAAO;EAKnB,yBAAI;IACF,cAAc,EAAE,IAAI;IAEpB,8BAAK;MACH,cAAc,EAAE,cAAc;;AAKpC,uBAAwB;EACtB,WAAW,EAAE,MAAM;EACnB,SAAS,EAzCI,IAAI;EA0CjB,gBAAgB,EAAE,OAAO;EACzB,KAAK,EAAE,OAAO;;AAGhB,8BAA+B;EAC7B,IAAI,EAAE,OAAO;;AAIb,8BAAK;EACH,MAAM,EAAE,OAAe;EACvB,YAAY,EAAE,CAAC;;AAInB,yBAA0B;EACxB,YAAY,EAAE,CAAC;EACf,IAAI,EAAE,wBAAwB;EAC9B,MAAM,EAAE,wBAAwB;;AAGlC,8BAA+B;EAE7B,MAAM,EAAE,MAAM;EAGd,kCAAI;IAGF,MAAM,EAAE,IAAI;IACZ,KAAK,EAAE,IAAI;IACX,WAAW,EAAE,MAAM;EAIrB,2DAA6B;IAC3B,UAAU,EAAE,GAAG;EAGjB,4DAA8B;IAC5B,OAAO,EAAE,YAAY;EAIrB,+CAAK;IACH,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,OAAO;IACd,SAAS,EAAE,IAAI;EAGjB,+CAAK;IACH,OAAO,EAAE,GAAG;IACZ,MAAM,EAAE,OAAO;EAGjB,kDAAQ;IACN,OAAO,EAAE,GAAG;IACZ,MAAM,EAAE,OAAO",
|
||||
"sources": ["../../src/css/status-heatmap.scss"],
|
||||
"names": [],
|
||||
"file": "status-heatmap.css"
|
||||
}
|
||||
Vendored
+66
@@ -0,0 +1,66 @@
|
||||
.status-heatmap-canvas-wrapper {
|
||||
cursor: crosshair; }
|
||||
.status-heatmap-canvas-wrapper .datapoints-warning span {
|
||||
background-color: #333333;
|
||||
color: #d8d9da;
|
||||
padding: 1px; }
|
||||
|
||||
.status-heatmap-panel {
|
||||
position: relative; }
|
||||
.status-heatmap-panel .axis .tick text {
|
||||
fill: #d8d9da;
|
||||
color: #d8d9da;
|
||||
font-size: 11px; }
|
||||
.status-heatmap-panel .axis .tick line {
|
||||
opacity: 0.4;
|
||||
stroke: #8e8e8e; }
|
||||
.status-heatmap-panel svg {
|
||||
pointer-events: none; }
|
||||
.status-heatmap-panel svg rect {
|
||||
pointer-events: visiblePainted; }
|
||||
|
||||
.statusmap-tooltip {
|
||||
white-space: nowrap;
|
||||
font-size: 12px;
|
||||
background-color: #141414;
|
||||
color: #d8d9da; }
|
||||
.statusmap-tooltip .discrete-item {
|
||||
color: #52545c;
|
||||
padding: 1px;
|
||||
font-weight: bold;
|
||||
text-shadow: 0 0 0.2em #FFF, 0 0 0.2em #FFF, 0 0 0.2em #FFF; }
|
||||
|
||||
.statusmap-histogram rect {
|
||||
fill: #8e8e8e; }
|
||||
|
||||
.status-heatmap-crosshair line {
|
||||
stroke: #9f3023;
|
||||
stroke-width: 1; }
|
||||
|
||||
.status-heatmap-selection {
|
||||
stroke-width: 1;
|
||||
fill: rgba(102, 102, 102, 0.4);
|
||||
stroke: rgba(102, 102, 102, 0.8); }
|
||||
|
||||
.status-heatmap-legend-wrapper {
|
||||
margin: 0 10px; }
|
||||
.status-heatmap-legend-wrapper svg {
|
||||
height: 24px;
|
||||
float: left;
|
||||
white-space: nowrap; }
|
||||
.status-heatmap-legend-wrapper .status-heatmap-color-legend {
|
||||
margin-top: 4px; }
|
||||
.status-heatmap-legend-wrapper .status-heatmap-legend-values {
|
||||
display: inline-block; }
|
||||
.status-heatmap-legend-wrapper .axis .tick text {
|
||||
fill: #d8d9da;
|
||||
color: #d8d9da;
|
||||
font-size: 11px; }
|
||||
.status-heatmap-legend-wrapper .axis .tick line {
|
||||
opacity: 0.4;
|
||||
stroke: #8e8e8e; }
|
||||
.status-heatmap-legend-wrapper .axis .tick .domain {
|
||||
opacity: 0.4;
|
||||
stroke: #8e8e8e; }
|
||||
|
||||
/*# sourceMappingURL=statusmap.dark.css.map */
|
||||
Vendored
+7
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"version": 3,
|
||||
"mappings": "AAAA,8BAA+B;EAE7B,MAAM,EAAE,SAAS;EAEjB,uDAAyB;IACzB,gBAAgB,ECDL,OAAO;IDElB,KAAK,ECLM,OAAO;IDMlB,OAAO,EAAE,GAAG;;AAId,qBAAsB;EACpB,QAAQ,EAAE,QAAQ;EAGhB,sCAAK;IACH,IAAI,ECfG,OAAO;IDgBd,KAAK,EChBE,OAAO;IDiBd,SAAS,EEjBE,IAAI;EFoBjB,sCAAK;IACH,OAAO,EAAE,GAAG;IACZ,MAAM,ECrBM,OAAO;ED0BvB,yBAAI;IACF,cAAc,EAAE,IAAI;IAEpB,8BAAK;MACH,cAAc,EAAE,cAAc;;AAKpC,kBAAmB;EACjB,WAAW,EAAE,MAAM;EACnB,SAAS,EEvCI,IAAI;EFwCjB,gBAAgB,ECrCC,OAAO;EDsCxB,KAAK,ECxCM,OAAO;ED0ClB,iCAAe;IACb,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,GAAG;IACZ,WAAW,EAAE,IAAI;IACjB,WAAW,EAAE,8CAA8C;;AAI/D,yBAA0B;EACxB,IAAI,EClDY,OAAO;;ADsDvB,8BAAK;EACH,MAAM,EAAE,OAAgB;EACxB,YAAY,EAAE,CAAC;;AAInB,yBAA0B;EACxB,YAAY,EAAE,CAAC;EACf,IAAI,EAAE,wBAAwB;EAC9B,MAAM,EAAE,wBAAwB;;AAIlC,8BAA+B;EAC7B,MAAM,EAAE,MAAM;EAEd,kCAAI;IACF,MAAM,EAAE,IAAI;IACZ,KAAK,EAAE,IAAI;IACX,WAAW,EAAE,MAAM;EAIrB,2DAA6B;IAC3B,UAAU,EAAE,GAAG;EAGjB,4DAA8B;IAC5B,OAAO,EAAE,YAAY;EAIrB,+CAAK;IACH,IAAI,ECxFG,OAAO;IDyFd,KAAK,ECzFE,OAAO;ID0Fd,SAAS,EE1FE,IAAI;EF6FjB,+CAAK;IACH,OAAO,EAAE,GAAG;IACZ,MAAM,EC9FM,OAAO;EDiGrB,kDAAQ;IACN,OAAO,EAAE,GAAG;IACZ,MAAM,ECnGM,OAAO",
|
||||
"sources": ["../../src/css/_statusmap.scss","../../src/css/_variables.dark.scss","../../src/css/_variables.scss"],
|
||||
"names": [],
|
||||
"file": "statusmap.dark.css"
|
||||
}
|
||||
+11
-5
@@ -1,7 +1,8 @@
|
||||
.status-heatmap-canvas-wrapper {
|
||||
cursor: crosshair; }
|
||||
.status-heatmap-canvas-wrapper .datapoints-warning span {
|
||||
background-color: white;
|
||||
background-color: #e9edf2;
|
||||
color: #52545c;
|
||||
padding: 1px; }
|
||||
|
||||
.status-heatmap-panel {
|
||||
@@ -18,17 +19,22 @@
|
||||
.status-heatmap-panel svg rect {
|
||||
pointer-events: visiblePainted; }
|
||||
|
||||
.status-heatmap-tooltip {
|
||||
.statusmap-tooltip {
|
||||
white-space: nowrap;
|
||||
font-size: 12px;
|
||||
background-color: #dde4ed;
|
||||
color: #52545c; }
|
||||
.statusmap-tooltip .discrete-item {
|
||||
color: #52545c;
|
||||
padding: 1px;
|
||||
font-weight: bold;
|
||||
text-shadow: 0 0 0.2em #FFF, 0 0 0.2em #FFF, 0 0 0.2em #FFF; }
|
||||
|
||||
.status-heatmap-histogram rect {
|
||||
.statusmap-histogram rect {
|
||||
fill: #767980; }
|
||||
|
||||
.status-heatmap-crosshair line {
|
||||
stroke: #b30000;
|
||||
stroke: #9e2f22;
|
||||
stroke-width: 1; }
|
||||
|
||||
.status-heatmap-selection {
|
||||
@@ -57,4 +63,4 @@
|
||||
opacity: 0.4;
|
||||
stroke: #767980; }
|
||||
|
||||
/*# sourceMappingURL=status-heatmap.css.map */
|
||||
/*# sourceMappingURL=statusmap.light.css.map */
|
||||
Vendored
+7
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"version": 3,
|
||||
"mappings": "AAAA,8BAA+B;EAE7B,MAAM,EAAE,SAAS;EAEjB,uDAAyB;IACzB,gBAAgB,ECDL,OAAO;IDElB,KAAK,ECLM,OAAO;IDMlB,OAAO,EAAE,GAAG;;AAId,qBAAsB;EACpB,QAAQ,EAAE,QAAQ;EAGhB,sCAAK;IACH,IAAI,ECfG,OAAO;IDgBd,KAAK,EChBE,OAAO;IDiBd,SAAS,EEjBE,IAAI;EFoBjB,sCAAK;IACH,OAAO,EAAE,GAAG;IACZ,MAAM,ECrBM,OAAO;ED0BvB,yBAAI;IACF,cAAc,EAAE,IAAI;IAEpB,8BAAK;MACH,cAAc,EAAE,cAAc;;AAKpC,kBAAmB;EACjB,WAAW,EAAE,MAAM;EACnB,SAAS,EEvCI,IAAI;EFwCjB,gBAAgB,ECrCC,OAAO;EDsCxB,KAAK,ECxCM,OAAO;ED0ClB,iCAAe;IACb,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,GAAG;IACZ,WAAW,EAAE,IAAI;IACjB,WAAW,EAAE,8CAA8C;;AAI/D,yBAA0B;EACxB,IAAI,EClDY,OAAO;;ADsDvB,8BAAK;EACH,MAAM,EAAE,OAAgB;EACxB,YAAY,EAAE,CAAC;;AAInB,yBAA0B;EACxB,YAAY,EAAE,CAAC;EACf,IAAI,EAAE,wBAAwB;EAC9B,MAAM,EAAE,wBAAwB;;AAIlC,8BAA+B;EAC7B,MAAM,EAAE,MAAM;EAEd,kCAAI;IACF,MAAM,EAAE,IAAI;IACZ,KAAK,EAAE,IAAI;IACX,WAAW,EAAE,MAAM;EAIrB,2DAA6B;IAC3B,UAAU,EAAE,GAAG;EAGjB,4DAA8B;IAC5B,OAAO,EAAE,YAAY;EAIrB,+CAAK;IACH,IAAI,ECxFG,OAAO;IDyFd,KAAK,ECzFE,OAAO;ID0Fd,SAAS,EE1FE,IAAI;EF6FjB,+CAAK;IACH,OAAO,EAAE,GAAG;IACZ,MAAM,EC9FM,OAAO;EDiGrB,kDAAQ;IACN,OAAO,EAAE,GAAG;IACZ,MAAM,ECnGM,OAAO",
|
||||
"sources": ["../../src/css/_statusmap.scss","../../src/css/_variables.light.scss","../../src/css/_variables.scss"],
|
||||
"names": [],
|
||||
"file": "statusmap.light.css"
|
||||
}
|
||||
BIN
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Vendored
+11
-3
@@ -1,14 +1,22 @@
|
||||
'use strict';
|
||||
|
||||
System.register(['./color_legend', './status_heatmap_ctrl'], function (_export, _context) {
|
||||
System.register(['app/plugins/sdk', './color_legend', './status_heatmap_ctrl'], function (_export, _context) {
|
||||
"use strict";
|
||||
|
||||
var StatusHeatmapCtrl;
|
||||
var loadPluginCss, StatusHeatmapCtrl;
|
||||
return {
|
||||
setters: [function (_color_legend) {}, function (_status_heatmap_ctrl) {
|
||||
setters: [function (_appPluginsSdk) {
|
||||
loadPluginCss = _appPluginsSdk.loadPluginCss;
|
||||
}, function (_color_legend) {}, function (_status_heatmap_ctrl) {
|
||||
StatusHeatmapCtrl = _status_heatmap_ctrl.StatusHeatmapCtrl;
|
||||
}],
|
||||
execute: function () {
|
||||
|
||||
loadPluginCss({
|
||||
dark: 'plugins/flant-statusmap-panel/css/statusmap.dark.css',
|
||||
light: 'plugins/flant-statusmap-panel/css/statusmap.light.css'
|
||||
});
|
||||
|
||||
_export('PanelCtrl', StatusHeatmapCtrl);
|
||||
}
|
||||
};
|
||||
|
||||
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["../src/module.js"],"names":["loadPluginCss","StatusHeatmapCtrl","dark","light"],"mappings":";;;;;;;;AAAQA,mB,kBAAAA,a;;AAECC,uB,wBAAAA,iB;;;;AAETD,oBAAc;AACZE,cAAM,sDADM;AAEZC,eAAO;AAFK,OAAd;;2BAOEF,iB","file":"module.js","sourcesContent":["import {loadPluginCss} from 'app/plugins/sdk';\nimport './color_legend';\nimport { StatusHeatmapCtrl } from './status_heatmap_ctrl';\n\nloadPluginCss({\n dark: 'plugins/flant-statusmap-panel/css/statusmap.dark.css',\n light: 'plugins/flant-statusmap-panel/css/statusmap.light.css'\n});\n\n\nexport {\n StatusHeatmapCtrl as PanelCtrl\n};\n"]}
|
||||
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["../src/options_editor.js"],"names":["statusHeatmapOptionsEditor","restrict","scope","templateUrl","controller","StatusHeatmapOptionsEditorCtrl","kbn","$scope","editor","panelCtrl","ctrl","panel","unitFormats","getUnitFormats","render","subItem","data","unitFormat","value"],"mappings":";;;;;;;;;;;;;AAkBO,WAASA,0BAAT,GAAsC;AAC3C;;AACA,WAAO;AACLC,gBAAU,GADL;AAELC,aAAO,IAFF;AAGLC,mBAAa,mEAHR;AAILC,kBAAYC;AAJP,KAAP;AAMD;;wCAReL,0B;;;;AAlBTM,S;;;;;;;;;;;;;;;;;;;;;gDAEMD,8B;AACX,gDAAYE,MAAZ,EAAoB;AAAA;;AAClBA,iBAAOC,MAAP,GAAgB,IAAhB;AACA,eAAKC,SAAL,GAAiBF,OAAOG,IAAxB;AACA,eAAKC,KAAL,GAAa,KAAKF,SAAL,CAAeE,KAA5B;AACA,eAAKC,WAAL,GAAmBN,IAAIO,cAAJ,EAAnB;;AAEA,eAAKJ,SAAL,CAAeK,MAAf;AACD;;;;wCAEaC,O,EAAS;AACrB,iBAAKJ,KAAL,CAAWK,IAAX,CAAgBC,UAAhB,GAA6BF,QAAQG,KAArC;AACA,iBAAKT,SAAL,CAAeK,MAAf;AACD","file":"options_editor.js","sourcesContent":["import kbn from 'app/core/utils/kbn';\n\nexport class StatusHeatmapOptionsEditorCtrl {\n constructor($scope) {\n $scope.editor = this;\n this.panelCtrl = $scope.ctrl;\n this.panel = this.panelCtrl.panel;\n this.unitFormats = kbn.getUnitFormats();\n\n this.panelCtrl.render();\n }\n\n setUnitFormat(subItem) {\n this.panel.data.unitFormat = subItem.value;\n this.panelCtrl.render();\n }\n}\n\nexport function statusHeatmapOptionsEditor() {\n 'use strict';\n return {\n restrict: 'E',\n scope: true,\n templateUrl: 'public/plugins/flant-statusmap-panel/partials/options_editor.html',\n controller: StatusHeatmapOptionsEditorCtrl,\n };\n}\n"]}
|
||||
Vendored
+3
-2
@@ -20,12 +20,13 @@
|
||||
|
||||
],
|
||||
"screenshots": [
|
||||
{"name": "Panel", "path": "img/flant-statusmap-panel.png"},
|
||||
{"name": "Panel with light theme", "path": "img/flant-statusmap-panel.png"},
|
||||
{"name": "Panel with dark theme", "path": "img/flant-statusmap-panel-dark.png"},
|
||||
{"name": "Color mapping", "path": "img/color-mapping.png"},
|
||||
{"name": "Queries example", "path": "img/queries-example.png"}
|
||||
],
|
||||
"version": "0.0.2",
|
||||
"updated": "2018-10-05"
|
||||
"updated": "2018-10-17"
|
||||
},
|
||||
|
||||
"dependencies": {
|
||||
|
||||
Vendored
+1
File diff suppressed because one or more lines are too long
Vendored
+2
-2
@@ -1,6 +1,6 @@
|
||||
'use strict';
|
||||
|
||||
System.register(['app/plugins/sdk', 'lodash', 'app/core/core', 'app/core/utils/kbn', './rendering', './options_editor', './color_mode_discrete', './css/status-heatmap.css!'], function (_export, _context) {
|
||||
System.register(['app/plugins/sdk', 'lodash', 'app/core/core', 'app/core/utils/kbn', './rendering', './options_editor', './color_mode_discrete'], function (_export, _context) {
|
||||
"use strict";
|
||||
|
||||
var MetricsPanelCtrl, _, contextSrv, kbn, rendering, statusHeatmapOptionsEditor, ColorModeDiscrete, CANVAS, SVG, VALUE_INDEX, TIME_INDEX, panelDefaults, renderer, colorSchemes, colorModes, opacityScales, StatusHeatmapCtrl;
|
||||
@@ -50,7 +50,7 @@ System.register(['app/plugins/sdk', 'lodash', 'app/core/core', 'app/core/utils/k
|
||||
statusHeatmapOptionsEditor = _options_editor.statusHeatmapOptionsEditor;
|
||||
}, function (_color_mode_discrete) {
|
||||
ColorModeDiscrete = _color_mode_discrete.ColorModeDiscrete;
|
||||
}, function (_cssStatusHeatmapCss) {}],
|
||||
}],
|
||||
execute: function () {
|
||||
CANVAS = 'CANVAS';
|
||||
SVG = 'SVG';
|
||||
|
||||
Vendored
+1
File diff suppressed because one or more lines are too long
Vendored
+3
-3
@@ -88,7 +88,7 @@ System.register(['d3', 'jquery', 'lodash', 'app/core/utils/kbn'], function (_exp
|
||||
}, {
|
||||
key: 'add',
|
||||
value: function add() {
|
||||
this.tooltip = d3.select("body").append("div").attr("class", "heatmap-tooltip graph-tooltip grafana-tooltip");
|
||||
this.tooltip = d3.select("body").append("div").attr("class", "statusmap-tooltip graph-tooltip grafana-tooltip");
|
||||
}
|
||||
}, {
|
||||
key: 'destroy',
|
||||
@@ -128,7 +128,7 @@ System.register(['d3', 'jquery', 'lodash', 'app/core/utils/kbn'], function (_exp
|
||||
var tooltipTimeFormat = 'YYYY-MM-DD HH:mm:ss';
|
||||
var time = this.dashboard.formatDate(+x, tooltipTimeFormat);
|
||||
|
||||
var tooltipHtml = '<div class="graph-tooltip-time">' + time + '</div>\n <div class="status-heatmap-histogram"></div>';
|
||||
var tooltipHtml = '<div class="graph-tooltip-time">' + time + '</div>\n <div class="statusmap-histogram"></div>';
|
||||
|
||||
if (this.panel.color.mode === 'discrete') {
|
||||
var statuses = this.panelCtrl.discreteHelper.convertValuesToTooltips(values);
|
||||
@@ -139,7 +139,7 @@ System.register(['d3', 'jquery', 'lodash', 'app/core/utils/kbn'], function (_exp
|
||||
statusesHtml = "statuses:";
|
||||
}
|
||||
tooltipHtml += '\n <div>\n name: <b>' + y + '</b> <br>\n ' + statusesHtml + '\n <ul>\n ' + _.join(_.map(statuses, function (v) {
|
||||
return '<li style="background-color: ' + v.color + '; padding: 1px; font-weight: bold; text-shadow: 0 0 0.2em #FFF, 0 0 0.2em #FFF, 0 0 0.2em #FFF">' + v.tooltip + '</li>';
|
||||
return '<li style="background-color: ' + v.color + '" class="discrete-item">' + v.tooltip + '</li>';
|
||||
}), "") + '\n </ul>\n </div>';
|
||||
} else {
|
||||
if (values.length === 1) {
|
||||
|
||||
Vendored
+1
File diff suppressed because one or more lines are too long
@@ -1,12 +1,10 @@
|
||||
$font-size-sm: 12px !default;
|
||||
|
||||
|
||||
.status-heatmap-canvas-wrapper {
|
||||
// position: relative;
|
||||
cursor: crosshair;
|
||||
|
||||
.datapoints-warning span {
|
||||
background-color: white;
|
||||
background-color: $warning-bg;
|
||||
color: $text-color;
|
||||
padding: 1px;
|
||||
}
|
||||
}
|
||||
@@ -16,14 +14,14 @@ $font-size-sm: 12px !default;
|
||||
|
||||
.axis .tick {
|
||||
text {
|
||||
fill: #52545c;
|
||||
color: #52545c;
|
||||
font-size: 11px;
|
||||
fill: $text-color;
|
||||
color: $text-color;
|
||||
font-size: $font-size-tick;
|
||||
}
|
||||
|
||||
line {
|
||||
opacity: 0.4;
|
||||
stroke: #767980;
|
||||
stroke: $text-color-weak;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -37,20 +35,27 @@ $font-size-sm: 12px !default;
|
||||
}
|
||||
}
|
||||
|
||||
.status-heatmap-tooltip {
|
||||
.statusmap-tooltip {
|
||||
white-space: nowrap;
|
||||
font-size: $font-size-sm;
|
||||
background-color: #dde4ed;
|
||||
color: #52545c;
|
||||
background-color: $graph-tooltip-bg;
|
||||
color: $text-color;
|
||||
|
||||
.discrete-item {
|
||||
color: #52545c;
|
||||
padding: 1px;
|
||||
font-weight: bold;
|
||||
text-shadow: 0 0 0.2em #FFF, 0 0 0.2em #FFF, 0 0 0.2em #FFF;
|
||||
}
|
||||
}
|
||||
|
||||
.status-heatmap-histogram rect {
|
||||
fill: #767980;
|
||||
.statusmap-histogram rect {
|
||||
fill: $text-color-weak;
|
||||
}
|
||||
|
||||
.status-heatmap-crosshair {
|
||||
line {
|
||||
stroke: darken(red,15%);
|
||||
stroke: darken($red,15%);
|
||||
stroke-width: 1;
|
||||
}
|
||||
}
|
||||
@@ -61,14 +66,11 @@ $font-size-sm: 12px !default;
|
||||
stroke: rgba(102, 102, 102, 0.8);
|
||||
}
|
||||
|
||||
|
||||
.status-heatmap-legend-wrapper {
|
||||
// @include clearfix();
|
||||
margin: 0 10px;
|
||||
//padding-top: 10px;
|
||||
|
||||
svg {
|
||||
//width: 100%;
|
||||
//max-width: 1300px;
|
||||
height: 24px;
|
||||
float: left;
|
||||
white-space: nowrap;
|
||||
@@ -85,19 +87,19 @@ $font-size-sm: 12px !default;
|
||||
|
||||
.axis .tick {
|
||||
text {
|
||||
fill: #52545c;
|
||||
color: #52545c;
|
||||
font-size: 11px;
|
||||
fill: $text-color;
|
||||
color: $text-color;
|
||||
font-size: $font-size-tick;
|
||||
}
|
||||
|
||||
line {
|
||||
opacity: 0.4;
|
||||
stroke: #767980;
|
||||
stroke: $text-color-weak;
|
||||
}
|
||||
|
||||
.domain {
|
||||
opacity: 0.4;
|
||||
stroke: #767980;
|
||||
stroke: $text-color-weak;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
// Dark variables
|
||||
$text-color: #d8d9da; // $gray-4
|
||||
$text-color-weak: #8e8e8e; // $gray-2
|
||||
$graph-tooltip-bg: #141414; // $dark-1
|
||||
$warning-bg: #333333; // $dark-4
|
||||
|
||||
$theme-name: dark;
|
||||
$white: #fff;
|
||||
$red: #d44a3a;
|
||||
@@ -0,0 +1,10 @@
|
||||
// Light variables
|
||||
$text-color: #52545c; // $gray-1
|
||||
$text-color-weak: #767980; // $gray-2
|
||||
$graph-tooltip-bg: #dde4ed; // $gray-5
|
||||
$warning-bg: #e9edf2; // $gray-6
|
||||
|
||||
$theme-name: light;
|
||||
$white: #fff;
|
||||
$red: #d44939;
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
$font-size-sm: 12px !default;
|
||||
$font-size-tick: 11px;
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
@import "variables";
|
||||
@import "variables.dark";
|
||||
@import "statusmap"
|
||||
@@ -0,0 +1,3 @@
|
||||
@import "variables";
|
||||
@import "variables.light";
|
||||
@import "statusmap"
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
@@ -1,6 +1,13 @@
|
||||
import {loadPluginCss} from 'app/plugins/sdk';
|
||||
import './color_legend';
|
||||
import { StatusHeatmapCtrl } from './status_heatmap_ctrl';
|
||||
|
||||
loadPluginCss({
|
||||
dark: 'plugins/flant-statusmap-panel/css/statusmap.dark.css',
|
||||
light: 'plugins/flant-statusmap-panel/css/statusmap.light.css'
|
||||
});
|
||||
|
||||
|
||||
export {
|
||||
StatusHeatmapCtrl as PanelCtrl
|
||||
};
|
||||
|
||||
+3
-2
@@ -20,12 +20,13 @@
|
||||
|
||||
],
|
||||
"screenshots": [
|
||||
{"name": "Panel", "path": "img/flant-statusmap-panel.png"},
|
||||
{"name": "Panel with light theme", "path": "img/flant-statusmap-panel.png"},
|
||||
{"name": "Panel with dark theme", "path": "img/flant-statusmap-panel-dark.png"},
|
||||
{"name": "Color mapping", "path": "img/color-mapping.png"},
|
||||
{"name": "Queries example", "path": "img/queries-example.png"}
|
||||
],
|
||||
"version": "0.0.2",
|
||||
"updated": "2018-10-05"
|
||||
"updated": "2018-10-17"
|
||||
},
|
||||
|
||||
"dependencies": {
|
||||
|
||||
@@ -9,7 +9,6 @@ import rendering from './rendering';
|
||||
// import { labelFormats } from './xAxisLabelFormats';
|
||||
import {statusHeatmapOptionsEditor} from './options_editor';
|
||||
import {ColorModeDiscrete} from "./color_mode_discrete";
|
||||
import './css/status-heatmap.css!';
|
||||
|
||||
const CANVAS = 'CANVAS';
|
||||
const SVG = 'SVG';
|
||||
|
||||
+3
-3
@@ -42,7 +42,7 @@ export class StatusHeatmapTooltip {
|
||||
add() {
|
||||
this.tooltip = d3.select("body")
|
||||
.append("div")
|
||||
.attr("class", "heatmap-tooltip graph-tooltip grafana-tooltip");
|
||||
.attr("class", "statusmap-tooltip graph-tooltip grafana-tooltip");
|
||||
}
|
||||
|
||||
destroy() {
|
||||
@@ -79,7 +79,7 @@ export class StatusHeatmapTooltip {
|
||||
let time = this.dashboard.formatDate(+x, tooltipTimeFormat);
|
||||
|
||||
let tooltipHtml = `<div class="graph-tooltip-time">${time}</div>
|
||||
<div class="status-heatmap-histogram"></div>`;
|
||||
<div class="statusmap-histogram"></div>`;
|
||||
|
||||
if (this.panel.color.mode === 'discrete') {
|
||||
let statuses = this.panelCtrl.discreteHelper.convertValuesToTooltips(values);
|
||||
@@ -94,7 +94,7 @@ export class StatusHeatmapTooltip {
|
||||
name: <b>${y}</b> <br>
|
||||
${statusesHtml}
|
||||
<ul>
|
||||
${_.join(_.map(statuses, v => `<li style="background-color: ${v.color}; padding: 1px; font-weight: bold; text-shadow: 0 0 0.2em #FFF, 0 0 0.2em #FFF, 0 0 0.2em #FFF">${v.tooltip}</li>`), "")}
|
||||
${_.join(_.map(statuses, v => `<li style="background-color: ${v.color}" class="discrete-item">${v.tooltip}</li>`), "")}
|
||||
</ul>
|
||||
</div>`;
|
||||
} else {
|
||||
|
||||
Reference in New Issue
Block a user