added up/down indicators in legend values

1 files changed, 317 insertions, 301 deletions

diff --git a/web/dashboard.css b/web/dashboard.css
index cbdfbe03e6..36b08960e1 100755
--- a/web/dashboard.css
+++ b/web/dashboard.css
@@ -1,301 +1,317 @@
-html {

-    font-family: sans-serif;

-}

-

-.netdata-chart-alignment {

-	margin-left: 55px;

-}

-

-.netdata-container {

-	display: -webkit-flex; /* Safari */

-	-webkit-flex-wrap: wrap; /* Safari 6.1+ */

-	display: inline-block;

-	flex-wrap: wrap;

-	overflow: hidden;

-

-	/* required for child elements to have absolute position */

-	position: relative;

-	

-	/* width and height is given per chart with data-width and data-height */

-}

-

-.netdata-legend-resize-handler {

-	display: block;

-	position: absolute;

-	bottom: 0px;

-	right: 0px;

-	height: 15px;

-	width: 30px;

-	background-color: White;

-	font-size: 12px;

-	vertical-align: middle;

-	line-height: 15px;

-	cursor: ns-resize;

-	color: #DDDDDD;

-	text-align: center;

-	overflow: hidden;

-	z-index: 11;

-	padding: 0px;

-	margin: 0px;

-}

-

-.netdata-message {

-	display: none;

-	font-size: x-small;

-	width: 100%;

-	height: calc(100% - 10px); /* for the resize handler */

-	overflow: hidden;

-	background: inherit;

-	z-index: 10000;

-}

-

-.netdata-chart-is-loading {

-	display: none;

-	font-size: x-small;

-	width: 100%;

-	overflow: hidden;

-	background: white;

-	z-index: 10000;

-}

-

-.netdata-error-message {

-	background: #EEEEEE;

-}

-

-.netdata-info-message {

-}

-

-.netdata-chart-legend {

-	position: absolute;			/* within .netdata-container */

-	top: 0;

-	right: 0;

-	background-color: white;

-	overflow: hidden;

-	text-overflow: ellipsis;

-	line-height: 14px;

-	display: block;

-	width: 120px;				/* --legend-width */

-	height: calc(100% - 15px);	/* 10px for the resize handler and 5px for the top margin */

-	font-size: 10px;

-	margin-top: 5px;

-	/* width and height is calculated (depends on the appearance of the legend) */

-}

-

-.netdata-legend-title-date {

-	font-size: 10px;

-	font-weight: normal;

-	margin-top: 0px;

-}

-.netdata-legend-title-time {

-	font-size: 11px;

-	font-weight: bold;

-	margin-top: 0px;

-}

-.netdata-legend-title-units {

-	position: absolute;

-	right: 5px;

-	float: right;

-	font-size: 10px;

-	vertical-align: top;

-	font-weight: normal;

-	margin-top: 0px;

-}

-.netdata-legend-series {

-	position: absolute;

-	width: 120px;				/* --legend-width */

-	height: calc(100% - 50px);

-	overflow: hidden;

-	text-overflow: ellipsis;

-	line-height: 14px;

-	display: block;

-	font-size: 10px;

-	margin-top: 0px;

-}

-

-.netdata-legend-series > .netdata-legend-series-content {

-	position      : absolute;

-	overflow      : scroll;

-	overflow-x    : hidden;

-	top           : 0;

-	right         : 0;

-	bottom        : 0;

-	left          : 0;

-	text-overflow: ellipsis;

-}

-.netdata-legend-series > .netdata-legend-series-content:focus {

-	outline: thin dotted;

-}

-.netdata-legend-series > .netdata-legend-series-content::-webkit-scrollbar {

-	display: block; /* was 'none', but chrome was hidding content with it */

-}

-.has-scrollbar > .netdata-legend-series-content::-webkit-scrollbar {

-	display: block;

-}

-.netdata-legend-series > .netdata-legend-series-pane {

-/*	background : rgba(0,0,0,.25);*/

-	background : #DDD;

-	position   : absolute;

-	width      : 4px;

-	right      : 0;

-	top        : 0;

-	bottom     : 0;

-/*	visibility : hidden\9; */ /* Target only IE7 and IE8 with this hack */

-/*	opacity    : .01; */

-/*	-webkit-transition    : .2s; */

-/*	-moz-transition       : .2s; */

-/*	-o-transition         : .2s; */

-/*	transition            : .2s; */

-	-moz-border-radius    : 4px;

-	-webkit-border-radius : 4px;

-	border-radius         : 4px;

-}

-.netdata-legend-series > .netdata-legend-series-pane > .netdata-legend-series-slider {

-	background            : #444;

-/*	background            : rgba(0,0,0,.5);*/

-	position              : relative;

-	margin                : 0 1px;

-	-moz-border-radius    : 2px;

-	-webkit-border-radius : 2px;

-	border-radius         : 2px;

-}

-.netdata-legend-series:hover > .netdata-legend-series-pane, .netdata-legend-series-pane.active, .netdata-legend-series-pane.flashed {

-/*  visibility : visible\9; */ /* Target only IE7 and IE8 with this hack */

-/*  opacity    : 0.99;*/

-}

-

-.netdata-legend-name-table-line {

-	display: inline-block;

-	width: 13px;

-	height: 4px;

-	border-width: 0px;

-	border-bottom-width: 2px;

-	border-bottom-style: solid;

-	border-bottom-color: white;

-}

-.netdata-legend-name-table-area {

-	display: inline-block;

-	width: 13px;

-	height: 5px;

-	border-width: 1px;

-	border-top-width: 1px;

-	border-top-style: solid;

-	border-top-color: inherit;

-}

-.netdata-legend-name-table-stacked {

-	display: inline-block;

-	width: 13px;

-	height: 5px;

-	border-width: 1px;

-	border-top-width: 1px;

-	border-top-style: solid;

-	border-top-color: inherit;

-}

-.netdata-legend-name-tr {

-}

-.netdata-legend-name-td {

-}

-.netdata-legend-name {

-	text-align: left;

-	font-size: 10px;

-	font-weight: bold;

-	vertical-align: bottom;

-	margin-top: 0px;

-	z-index: 9;

-	padding: 0px;

-	width: 80px !important;

-	max-width: 80px !important;

-	text-overflow: ellipsis;

-	overflow: hidden;

-	white-space: nowrap;

-	display: inline-block;

-	cursor: pointer;

-}

-

-.netdata-legend-value {

-	/*margin-left: 14px;*/

-	position: absolute;

-	right: 5px;

-	float: right;

-	text-align: right;

-	font-size: 10px;

-	font-weight: bold;

-	vertical-align: bottom;

-	background-color: White;

-	margin-top: 0px;

-	z-index: 10;

-	padding: 0px;

-	padding-left: 15px;

-	cursor: pointer;

-}

-.netdata-legend-name.not-selected {

-	font-weight: normal;

-	opacity: 0.3;

-}

-

-.netdata-chart {

-	position: absolute;		/* within .netdata-container */

-	top: 0;					/* within .netdata-container */

-	left: 0;				/* within .netdata-container */

-	display: inline-block;

-	overflow: hidden;

-	width: 100%;

-	height: 100%;

-

-	/* width and height is calculated (depends on the appearance of the legend) */

-}

-

-.netdata-chart-with-legend-right {

-	position: absolute;		/* within .netdata-container */

-	top: 0;					/* within .netdata-container */

-	left: 0;				/* within .netdata-container */

-	display: block;

-	overflow: hidden;

-	margin-right: 120px;		/* --legend-width */

-	width: calc(100% - 120px);	/* --legend-width */

-	height: 100%;

-	flex-grow: 1;

-

-	/* width and height is calculated (depends on the appearance of the legend) */

-}

-

-.netdata-peity-chart {

-

-}

-

-.netdata-sparkline-chart {

-

-}

-

-.netdata-dygraph-chart {

-

-}

-

-.netdata-morris-chart {

-

-}

-

-.netdata-google-chart {

-

-}

-

-.dygraph-ylabel {

-}

-

-.dygraph-title {

-	text-indent: 56px;

-	text-align: left;

-	position: absolute;

-	left: 0px;

-	top: 4px;

-	font-size: 11px;

-	font-weight: bold;

-	text-overflow: ellipsis;

-	overflow: hidden;

-	white-space: nowrap;

-}

-

-/* fix for sparkline tooltip under bootstrap */

-.jqstooltip {

-  width: auto !important;

-  height: auto !important;

-}

+html {
+    font-family: sans-serif;
+}
+
+.netdata-chart-alignment {
+	margin-left: 55px;
+}
+
+.netdata-container {
+	display: -webkit-flex; /* Safari */
+	-webkit-flex-wrap: wrap; /* Safari 6.1+ */
+	display: inline-block;
+	flex-wrap: wrap;
+	overflow: hidden;
+
+	/* required for child elements to have absolute position */
+	position: relative;
+	
+	/* width and height is given per chart with data-width and data-height */
+}
+
+.netdata-container-with-legend {
+	display: -webkit-flex; /* Safari */
+	-webkit-flex-wrap: wrap; /* Safari 6.1+ */
+	display: inline-block;
+	flex-wrap: wrap;
+	overflow: hidden;
+
+	/* fix minimum scrollbar issue in firefox */
+	min-height: 99px;
+
+	/* required for child elements to have absolute position */
+	position: relative;
+	
+	/* width and height is given per chart with data-width and data-height */
+}
+
+.netdata-legend-resize-handler {
+	display: block;
+	position: absolute;
+	bottom: 0px;
+	right: 0px;
+	height: 15px;
+	width: 30px;
+	background-color: White;
+	font-size: 12px;
+	vertical-align: middle;
+	line-height: 15px;
+	cursor: ns-resize;
+	color: #DDDDDD;
+	text-align: center;
+	overflow: hidden;
+	z-index: 11;
+	padding: 0px;
+	margin: 0px;
+}
+
+.netdata-message {
+	display: none;
+	font-size: x-small;
+	width: 100%;
+	height: calc(100% - 10px); /* for the resize handler */
+	overflow: hidden;
+	background: inherit;
+	z-index: 10000;
+}
+
+.netdata-chart-is-loading {
+	display: none;
+	font-size: x-small;
+	width: 100%;
+	overflow: hidden;
+	background: white;
+	z-index: 10000;
+}
+
+.netdata-error-message {
+	background: #EEEEEE;
+}
+
+.netdata-info-message {
+}
+
+.netdata-chart-legend {
+	position: absolute;			/* within .netdata-container */
+	top: 0;
+	right: 0;
+	background-color: white;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	line-height: 14px;
+	display: block;
+	width: 140px;				/* --legend-width */
+	height: calc(100% - 15px);	/* 10px for the resize handler and 5px for the top margin */
+	font-size: 10px;
+	margin-top: 5px;
+	/* width and height is calculated (depends on the appearance of the legend) */
+}
+
+.netdata-legend-title-date {
+	font-size: 10px;
+	font-weight: normal;
+	margin-top: 0px;
+}
+.netdata-legend-title-time {
+	font-size: 11px;
+	font-weight: bold;
+	margin-top: 0px;
+}
+.netdata-legend-title-units {
+	position: absolute;
+	right: 5px;
+	float: right;
+	font-size: 10px;
+	vertical-align: top;
+	font-weight: normal;
+	margin-top: 0px;
+}
+.netdata-legend-series {
+	position: absolute;
+	width: 140px;				/* --legend-width */
+	height: calc(100% - 50px);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	line-height: 14px;
+	display: block;
+	font-size: 10px;
+	margin-top: 0px;
+}
+
+.netdata-legend-series > .netdata-legend-series-content {
+	position      : absolute;
+	overflow      : scroll;
+	overflow-x    : hidden;
+	top           : 0;
+	right         : 0;
+	bottom        : 0;
+	left          : 0;
+	text-overflow: ellipsis;
+}
+.netdata-legend-series > .netdata-legend-series-content:focus {
+	outline: thin dotted;
+}
+.netdata-legend-series > .netdata-legend-series-content::-webkit-scrollbar {
+	display: block; /* was 'none', but chrome was hidding content with it */
+}
+.has-scrollbar > .netdata-legend-series-content::-webkit-scrollbar {
+	display: block;
+}
+.netdata-legend-series > .netdata-legend-series-pane {
+/*	background : rgba(0,0,0,.25);*/
+	background : #DDD;
+	position   : absolute;
+	width      : 4px;
+	right      : 0;
+	top        : 0;
+	bottom     : 0;
+/*	visibility : hidden\9; */ /* Target only IE7 and IE8 with this hack */
+/*	opacity    : .01; */
+/*	-webkit-transition    : .2s; */
+/*	-moz-transition       : .2s; */
+/*	-o-transition         : .2s; */
+/*	transition            : .2s; */
+	-moz-border-radius    : 4px;
+	-webkit-border-radius : 4px;
+	border-radius         : 4px;
+}
+.netdata-legend-series > .netdata-legend-series-pane > .netdata-legend-series-slider {
+	background            : #444;
+/*	background            : rgba(0,0,0,.5);*/
+	position              : relative;
+	margin                : 0 1px;
+	-moz-border-radius    : 2px;
+	-webkit-border-radius : 2px;
+	border-radius         : 2px;
+}
+.netdata-legend-series:hover > .netdata-legend-series-pane, .netdata-legend-series-pane.active, .netdata-legend-series-pane.flashed {
+/*  visibility : visible\9; */ /* Target only IE7 and IE8 with this hack */
+/*  opacity    : 0.99;*/
+}
+
+.netdata-legend-name-table-line {
+	display: inline-block;
+	width: 13px;
+	height: 4px;
+	border-width: 0px;
+	border-bottom-width: 2px;
+	border-bottom-style: solid;
+	border-bottom-color: white;
+}
+.netdata-legend-name-table-area {
+	display: inline-block;
+	width: 13px;
+	height: 5px;
+	border-width: 1px;
+	border-top-width: 1px;
+	border-top-style: solid;
+	border-top-color: inherit;
+}
+.netdata-legend-name-table-stacked {
+	display: inline-block;
+	width: 13px;
+	height: 5px;
+	border-width: 1px;
+	border-top-width: 1px;
+	border-top-style: solid;
+	border-top-color: inherit;
+}
+.netdata-legend-name-tr {
+}
+.netdata-legend-name-td {
+}
+.netdata-legend-name {
+	text-align: left;
+	font-size: 10px;
+	font-weight: bold;
+	vertical-align: bottom;
+	margin-top: 0px;
+	z-index: 9;
+	padding: 0px;
+	width: 80px !important;
+	max-width: 80px !important;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	white-space: nowrap;
+	display: inline-block;
+	cursor: pointer;
+}
+
+.netdata-legend-value {
+	/*margin-left: 14px;*/
+	position: absolute;
+	right: 5px;
+	float: right;
+	text-align: right;
+	font-size: 10px;
+	font-weight: bold;
+	vertical-align: bottom;
+	background-color: White;
+	margin-top: 0px;
+	z-index: 10;
+	padding: 0px;
+	padding-left: 15px;
+	cursor: pointer;
+}
+.netdata-legend-name.not-selected {
+	font-weight: normal;
+	opacity: 0.3;
+}
+
+.netdata-chart {
+	position: absolute;		/* within .netdata-container */
+	top: 0;					/* within .netdata-container */
+	left: 0;				/* within .netdata-container */
+	display: inline-block;
+	overflow: hidden;
+	width: 100%;
+	height: 100%;
+
+	/* width and height is calculated (depends on the appearance of the legend) */
+}
+
+.netdata-chart-with-legend-right {
+	position: absolute;		/* within .netdata-container */
+	top: 0;					/* within .netdata-container */
+	left: 0;				/* within .netdata-container */
+	display: block;
+	overflow: hidden;
+	margin-right: 140px;		/* --legend-width */
+	width: calc(100% - 140px);	/* --legend-width */
+	height: 100%;
+	flex-grow: 1;
+
+	/* width and height is calculated (depends on the appearance of the legend) */
+}
+
+.netdata-peity-chart {
+
+}
+
+.netdata-sparkline-chart {
+
+}
+
+.netdata-dygraph-chart {
+
+}
+
+.netdata-morris-chart {
+
+}
+
+.netdata-google-chart {
+
+}
+
+.dygraph-ylabel {
+}
+
+.dygraph-title {
+	text-indent: 56px;
+	text-align: left;
+	position: absolute;
+	left: 0px;
+	top: 4px;
+	font-size: 11px;
+	font-weight: bold;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	white-space: nowrap;
+}
+
+/* fix for sparkline tooltip under bootstrap */
+.jqstooltip {
+  width: auto !important;
+  height: auto !important;
+}