Error: ${this.panelCtrl.dataWarnings.noColorDefined.title}\n
not colored values:\n
\n ${_.join(_.map(badValues, v => `- ${v}
`), \"\")}\n
\n
`;\n\n }\n }\n\n this.tooltip.html(tooltipHtml);\n\n this.move(pos);\n }\n\n move(pos) {\n if (!this.tooltip) { return; }\n\n let elem = $(this.tooltip.node())[0];\n let tooltipWidth = elem.clientWidth;\n let tooltipHeight = elem.clientHeight;\n\n let left = pos.pageX + TOOLTIP_PADDING_X;\n let top = pos.pageY + TOOLTIP_PADDING_Y;\n\n if (pos.pageX + tooltipWidth + 40 > window.innerWidth) {\n left = pos.pageX - tooltipWidth - TOOLTIP_PADDING_X;\n }\n\n if (pos.pageY - window.pageYOffset + tooltipHeight + 20 > window.innerHeight) {\n top = pos.pageY - tooltipHeight - TOOLTIP_PADDING_Y;\n }\n\n return this.tooltip\n .style(\"left\", left + \"px\")\n .style(\"top\", top + \"px\");\n }\n}\n"]}
\ No newline at end of file
diff --git a/src/css/status-heatmap.scss b/src/css/_statusmap.scss
similarity index 63%
rename from src/css/status-heatmap.scss
rename to src/css/_statusmap.scss
index 5e3ee6f..2382457 100644
--- a/src/css/status-heatmap.scss
+++ b/src/css/_statusmap.scss
@@ -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;
}
}
}
diff --git a/src/css/_variables.dark.scss b/src/css/_variables.dark.scss
new file mode 100644
index 0000000..6d0b610
--- /dev/null
+++ b/src/css/_variables.dark.scss
@@ -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;
diff --git a/src/css/_variables.light.scss b/src/css/_variables.light.scss
new file mode 100644
index 0000000..46df305
--- /dev/null
+++ b/src/css/_variables.light.scss
@@ -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;
+
diff --git a/src/css/_variables.scss b/src/css/_variables.scss
new file mode 100644
index 0000000..6fb4540
--- /dev/null
+++ b/src/css/_variables.scss
@@ -0,0 +1,3 @@
+$font-size-sm: 12px !default;
+$font-size-tick: 11px;
+
diff --git a/src/css/statusmap.dark.scss b/src/css/statusmap.dark.scss
new file mode 100644
index 0000000..2f58744
--- /dev/null
+++ b/src/css/statusmap.dark.scss
@@ -0,0 +1,3 @@
+@import "variables";
+@import "variables.dark";
+@import "statusmap"
diff --git a/src/css/statusmap.light.scss b/src/css/statusmap.light.scss
new file mode 100644
index 0000000..b359a74
--- /dev/null
+++ b/src/css/statusmap.light.scss
@@ -0,0 +1,3 @@
+@import "variables";
+@import "variables.light";
+@import "statusmap"
diff --git a/src/img/flant-statusmap-panel-dark.png b/src/img/flant-statusmap-panel-dark.png
new file mode 100644
index 0000000..242eaae
Binary files /dev/null and b/src/img/flant-statusmap-panel-dark.png differ
diff --git a/src/module.js b/src/module.js
index 9b47ac0..f31cc18 100644
--- a/src/module.js
+++ b/src/module.js
@@ -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
};
diff --git a/src/plugin.json b/src/plugin.json
index 0d9e6a7..46588a7 100644
--- a/src/plugin.json
+++ b/src/plugin.json
@@ -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": {
diff --git a/src/status_heatmap_ctrl.js b/src/status_heatmap_ctrl.js
index 27d6b92..91f276b 100644
--- a/src/status_heatmap_ctrl.js
+++ b/src/status_heatmap_ctrl.js
@@ -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';
diff --git a/src/tooltip.js b/src/tooltip.js
index 571c8b0..fa13883 100644
--- a/src/tooltip.js
+++ b/src/tooltip.js
@@ -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 = `