add css compiler, watcher and livereload

docs/assets/js/index.js

@@ -1,57 +1,67 @@
-// Data
+// Composite Chart
 // ================================================================================
+let report_count_list = [17, 40, 33, 44, 126, 156,
+	324, 333, 478, 495, 373];
+
 let bar_composite_data = {
-	"labels": ["Oct", "Nov", "Dec", "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug"],
+	"labels": ["2007", "2008", "2009", "2010", "2011", "2012",
+		"2013", "2014", "2015", "2016", "2017"],
+
 	"datasets": [{
-			"color": "orange",
-			"values": [50804, 10000, 20000, 61500, 72936.88, 24010, 40000, 60000, 25840, 50804.82, 16820],
-			"formatted": ["₹ 0.00", "₹ 0.00", "₹ 0.00", "₹ 61,500.00", "₹ 82,936.88", "₹ 24,010.00", "₹ 0.00", "₹ 0.00", "₹ 25,840.00", "₹ 5,08,048.82", "₹ 1,16,820.00", "₹ 0.00"],
-		}
-	]
-}
+		"title": "Reports",
+		"color": "orange",
+		"values": report_count_list,
+		// "formatted": report_count_list.map(d => d + " reports")
+	}]
+};
 
 let line_composite_data = {
-	"labels": ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
+	"labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
 	"datasets": [{
-			"color": "green",
-			"values": [25, 40, 30, 35, 48, 52, 17]
-		}
-	]
+		"color": "green",
+		"values": [36, 46, 45, 32, 27, 31, 30, 36, 39, 49, 0, 0],
+		// "formatted": ["₹ 0.00", "₹ 0.00", "₹ 0.00", "₹ 61,500.00", "₹ 82,936.88", "₹ 24,010.00", "₹ 0.00", "₹ 0.00", "₹ 25,840.00", "₹ 5,08,048.82", "₹ 1,16,820.00", "₹ 0.00"],
+	}]
 };
 
 let more_line_data = {
-	0: {values: [25, -90, -30, 35, 48, 52, -17]},
-	1: {values: [25, -40, -30, 35, 48, 52, 30]},
-	2: {values: [5, 48, -52, 17, -25, 40, 30]},
-	3: {
-		values: [25, 40, 30, 35, 48, 52, 17]
-	},
-	4: {
-		values: [35, 48, 40, 30, 52, 17, 72]
-	},
-	5: {
-		values: [5, 48, 52, 17, 72, 40, 30]
-	},
-	6: {
-		values: [72, 40, 30, 35, 48, 52, 17]
-	},
-	7: {
-		values: [35, 48, 40, 30, 52, 17, 25]
-	},
-	8: {
-		values: [5, 48, 52, 17, 25, 40, 30]
-	},
-	9: {
-		values: [25, 40, 30, 35, 48, 52, 17]
-	},
-	10: {
-		values: [35, 48, 40, 30, 52, 17, 25]
-	},
-	11: {
-		values: [5, 48, 52, 17, 25, 40, 30]
-	}
-}
+	0: {values: [4, 0, 3, 1, 1, 2, 1, 2, 1, 0, 1, 1]},
+	1: {values: [2, 3, 3, 2, 1, 4, 0, 1, 2, 7, 11, 4]},
+	2: {values: [7, 7, 2, 4, 0, 1, 5, 3, 1, 2, 0, 1]},
+	3: {values: [0, 2, 6, 2, 2, 1, 2, 3, 6, 3, 7, 10]},
+	4: {values: [9, 10, 8, 10, 6, 5, 8, 8, 24, 15, 10, 13]},
+	5: {values: [9, 13, 16, 9, 4, 5, 7, 10, 14, 22, 23, 24]},
+	6: {values: [20, 22, 28, 19, 28, 19, 14, 19, 51, 37, 29, 38]},
+	7: {values: [29, 20, 22, 16, 16, 19, 24, 26, 57, 31, 46, 27]},
+	8: {values: [36, 24, 38, 27, 15, 22, 24, 38, 32, 57, 139, 26]},
+	9: {values: [37, 36, 32, 33, 12, 34, 52, 45, 58, 57, 64, 35]},
+	10: {values: [36, 46, 45, 32, 27, 31, 30, 36, 39, 49, 0, 0]}
+};
+
+let bar_composite_chart = new Chart ({
+	parent: "#chart-composite-1",
+	title: "Reposrts",
+	data: bar_composite_data,
+	type: 'bar',
+	height: 180,
+	is_navigable: 1
+	// region_fill: 1
+});
+
+let line_composite_chart = new Chart ({
+	parent: "#chart-composite-2",
+	data: line_composite_data,
+	type: 'line',
+	height: 180
+});
+
+bar_composite_chart.parent.addEventListener('data-select', (e) => {
+	line_composite_chart.update_values([more_line_data[e.index]]);
+});
+
 
+// Demo Chart (bar, linepts, scatter(blobs), percentage)
+// ================================================================================
 let type_data = {
 	"labels": ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
 	"datasets": [{
@@ -72,7 +82,7 @@ let type_data = {
 
 let update_data_all_labels = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat",
 	"Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed",
-	 "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed"];
+	"Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed"];
 let update_data_all_values = [25, 40, 30, 35, 48, 52, 17, 15, 20, -3, -15, 58,
 	12, -17, 35, 48, 40, 30, 52, 17, 25, 5, 48, 52, 17];
 
@@ -82,15 +92,14 @@ let update_data_all_indices = update_data_all_labels.map((d,i) => i);
 let get_update_data = (source_array, length=10) => {
 	let indices = update_data_all_indices.slice(0, length);
 	return indices.map((index) => source_array[index]);
-}
+};
 
 let update_data = {
 	"labels": get_update_data(update_data_all_labels),
 	"datasets": [{
-			"color": "red",
-			"values": get_update_data(update_data_all_values)
-		}
-	],
+		"color": "red",
+		"values": get_update_data(update_data_all_values)
+	}],
 	"specific_values": [
 		{
 			title: "Altitude",
@@ -141,25 +150,7 @@ let heatmap_data = {
 
 // Charts
 // ================================================================================
-let bar_composite_chart = new Chart ({
-	parent: "#chart-composite-1",
-	data: bar_composite_data,
-	type: 'bar',
-	height: 180,
-	is_navigable: 1
-	// region_fill: 1
-})
 
-let line_composite_chart = new Chart ({
-	parent: "#chart-composite-2",
-	data: line_composite_data,
-	type: 'line',
-	height: 180
-})
-
-bar_composite_chart.parent.addEventListener('data-select', (e) => {
-	line_composite_chart.update_values([more_line_data[e.index]]);
-});
 
 let type_chart = new Chart({
 	parent: "#chart-types",

docs/index.html

@@ -8,13 +8,11 @@
     <meta name="description" content="A simple, responsive, modern charts library for the web.">
 
     <link rel="stylesheet" type="text/css" href="assets/css/normalize.css" media="screen">
-    <!--<link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>-->
+    <link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
     <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css" media="screen">
     <link rel="stylesheet" type="text/css" href="assets/css/frappe_theme.css" media="screen">
     <link rel="stylesheet" type="text/css" href="assets/css/index.css" media="screen">
     <link rel="stylesheet" type="text/css" href="assets/css/default.css" media="screen">
-    <!--<link rel="stylesheet" type="text/css" href="assets/css/vs.css" media="screen">-->
-    <link rel="stylesheet" type="text/css" href="../src/styles/charts.css" media="screen">
     <script src="assets/js/highlight.pack.js"></script>
     <script>hljs.initHighlightingOnLoad();</script>
 

package.json

@@ -7,7 +7,10 @@
     "doc": "docs"
   },
   "scripts": {
-    "test": "mocha --compilers js:babel-core/register --colors -w ./test/*.spec.js"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "watch": "rollup -c --watch",
+    "reload": "livereload 'dist/' -d",
+    "dev": "npm-run-all --parallel watch reload"
   },
   "repository": {
     "type": "git",
@@ -28,10 +31,18 @@
     "babel-plugin-external-helpers": "^6.22.0",
     "babel-preset-env": "^1.6.1",
     "babel-preset-latest": "^6.24.1",
+    "cssnano": "^3.10.0",
+    "livereload": "^0.6.3",
+    "npm-run-all": "^4.1.1",
+    "postcss-cssnext": "^3.0.2",
+    "postcss-nested": "^2.1.2",
     "rollup": "^0.50.0",
     "rollup-plugin-babel": "^3.0.2",
     "rollup-plugin-eslint": "^4.0.0",
     "rollup-plugin-node-resolve": "^3.0.0",
-    "rollup-plugin-uglify": "^2.0.1"
+    "rollup-plugin-postcss": "^0.5.5",
+    "rollup-plugin-replace": "^2.0.0",
+    "rollup-plugin-uglify": "^2.0.1",
+    "rollup-watch": "^4.3.1"
   }
 }

rollup.config.js

@@ -1,7 +1,14 @@
 // Rollup plugins
 import babel from 'rollup-plugin-babel';
 import eslint from 'rollup-plugin-eslint';
+import replace from 'rollup-plugin-replace';
 import uglify from 'rollup-plugin-uglify';
+import postcss from 'rollup-plugin-postcss';
+
+// PostCSS plugins
+import nested from 'postcss-nested';
+import cssnext from 'postcss-cssnext';
+import cssnano from 'cssnano';
 
 export default {
 	input: 'src/scripts/charts.js',
@@ -12,10 +19,26 @@ export default {
 	name: 'Chart',
 	sourcemap: 'true',
 	plugins: [
-		eslint(),
+		postcss({
+			extensions: [ '.less' ],
+			plugins: [
+				nested(),
+				cssnext({ warnForDuplicates: false }),
+				cssnano()
+			]
+		}),
+		eslint({
+			exclude: [
+				'src/styles/**',
+			]
+		}),
 		babel({
 			exclude: 'node_modules/**',
 		}),
+		replace({
+			exclude: 'node_modules/**',
+			ENV: JSON.stringify(process.env.NODE_ENV || 'development'),
+		}),
 		uglify()
 	],
 };

src/scripts/charts.js

@@ -1,8 +1,18 @@
+import '../styles/charts.less';
+
 import BarChart from './charts/BarChart';
 import LineChart from './charts/LineChart';
 import PercentageChart from './charts/PercentageChart';
 import Heatmap from './charts/Heatmap';
 
+if (ENV !== 'production') {
+	// Enable LiveReload
+	document.write(
+		'<script src="http://' + (location.host || 'localhost').split(':')[0] +
+		':35729/livereload.js?snipver=1"></' + 'script>'
+	);
+}
+
 export default class Chart {
 	constructor(args) {
 		if(args.type === 'line') {

src/scripts/charts/BaseChart.js

@@ -14,6 +14,7 @@ export default class BaseChart {
 		summary = [],
 
 		is_navigable = 0,
+		has_legend = 0,
 
 		type = '' // eslint-disable-line no-unused-vars
 	}) {
@@ -33,6 +34,7 @@ export default class BaseChart {
 		if(this.is_navigable) {
 			this.current_index = 0;
 		}
+		this.has_legend = has_legend;
 
 		this.chart_types = ['line', 'bar', 'percentage', 'heatmap'];
 

src/styles/charts.css

@@ -1,456 +0,0 @@
-/* graphs */
-.chart-container {
-  font-family: Verdana, Geneva, Tahoma, sans-serif;
-}
-.chart-container .graph-focus-margin {
-  margin: 0px 5%;
-}
-.chart-container .graphics {
-  margin-top: 10px;
-  padding-top: 10px;
-  padding-bottom: 10px;
-  position: relative;
-}
-.chart-container .graph-stats-group {
-  display: flex;
-  justify-content: space-around;
-  flex: 1;
-}
-.chart-container .graph-stats-container {
-  display: flex;
-  justify-content: space-around;
-  padding-top: 10px;
-}
-.chart-container .graph-stats-container .stats {
-  padding-bottom: 15px;
-}
-.chart-container .graph-stats-container .stats-title {
-  color: #8D99A6;
-}
-.chart-container .graph-stats-container .stats-value {
-  font-size: 20px;
-  font-weight: 300;
-}
-.chart-container .graph-stats-container .stats-description {
-  font-size: 12px;
-  color: #8D99A6;
-}
-.chart-container .graph-stats-container .graph-data .stats-value {
-  color: #98d85b;
-}
-.chart-container .axis,
-.chart-container .chart-label {
-  font-size: 10px;
-  fill: #555b51;
-}
-.chart-container .axis line,
-.chart-container .chart-label line {
-  stroke: #dadada;
-}
-.chart-container .percentage-graph .progress {
-  margin-bottom: 0px;
-}
-.chart-container .data-points circle {
-  stroke: #fff;
-  stroke-width: 2;
-}
-.chart-container .path-group path {
-  fill: none;
-  stroke-opacity: 1;
-  stroke-width: 2px;
-}
-.chart-container line.dashed {
-  stroke-dasharray: 5,3;
-}
-.chart-container .tick.x-axis-label {
-  display: block;
-}
-.chart-container .tick .specific-value {
-  text-anchor: start;
-}
-.chart-container .tick .y-value-text {
-  text-anchor: end;
-}
-.chart-container .tick .x-value-text {
-  text-anchor: middle;
-}
-.chart-container .progress {
-  height: 20px;
-  margin-bottom: 20px;
-  overflow: hidden;
-  background-color: #f5f5f5;
-  border-radius: 4px;
-  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1)
-}
-.chart-container .progress-bar {
-  float: left;
-  width: 0;
-  height: 100%;
-  font-size: 12px;
-  line-height: 20px;
-  color: #fff;
-  text-align: center;
-  background-color: #36414c;
-  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
-  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
-  -webkit-transition: width .6s ease;
-  -o-transition: width .6s ease;
-  transition: width .6s ease;
-}
-.graph-svg-tip {
-  position: absolute;
-  z-index: 99999;
-  padding: 10px;
-  font-size: 12px;
-  color: #959da5;
-  text-align: center;
-  background: rgba(0, 0, 0, 0.8);
-  border-radius: 3px;
-}
-.graph-svg-tip.comparison {
-  padding: 0;
-  text-align: left;
-  pointer-events: none;
-}
-.graph-svg-tip.comparison .title {
-  display: block;
-  padding: 10px;
-  margin: 0;
-  font-weight: 600;
-  line-height: 1;
-  pointer-events: none;
-}
-.graph-svg-tip.comparison ul {
-  margin: 0;
-  white-space: nowrap;
-  list-style: none;
-}
-.graph-svg-tip.comparison li {
-  display: inline-block;
-  padding: 5px 10px;
-}
-.graph-svg-tip ul,
-.graph-svg-tip ol {
-  padding-left: 0;
-  display: flex;
-}
-.graph-svg-tip ul.data-point-list li {
-  min-width: 90px;
-  flex: 1;
-}
-.graph-svg-tip strong {
-  color: #dfe2e5;
-}
-.graph-svg-tip .svg-pointer {
-  position: absolute;
-  bottom: -10px;
-  left: 50%;
-  width: 5px;
-  height: 5px;
-  margin: 0 0 0 -5px;
-  content: " ";
-  border: 5px solid transparent;
-  border-top-color: rgba(0, 0, 0, 0.8);
-}
-
-/*Indicators*/
-.indicator,
-.indicator-right {
-  background: none;
-  font-size: 12px;
-  vertical-align: middle;
-  font-weight: bold;
-  color: #6c7680;
-}
-.indicator::before,
-.indicator-right::after {
-  content: '';
-  display: inline-block;
-  height: 8px;
-  width: 8px;
-  border-radius: 8px;
-}
-.indicator::before {
-  margin: 0 4px 0 0px;
-}
-.indicator-right::after {
-  margin: 0 0 0 4px;
-}
-.indicator.grey::before,
-.indicator-right.grey::after {
-  background: #bdd3e6;
-}
-.indicator.light-grey::before,
-.indicator-right.light-grey::after {
-  background: #F0F4F7;
-}
-.indicator.blue::before,
-.indicator-right.blue::after {
-  background: #5e64ff;
-}
-.indicator.red::before,
-.indicator-right.red::after {
-  background: #ff5858;
-}
-.indicator.green::before,
-.indicator-right.green::after {
-  background: #28a745;
-}
-.indicator.light-green::before,
-.indicator-right.light-green::after {
-  background: #98d85b;
-}
-.indicator.orange::before,
-.indicator-right.orange::after {
-  background: #ffa00a;
-}
-.indicator.violet::before,
-.indicator-right.violet::after {
-  background: #743ee2;
-}
-.indicator.darkgrey::before,
-.indicator-right.darkgrey::after {
-  background: #b8c2cc;
-}
-.indicator.black::before,
-.indicator-right.black::after {
-  background: #36414C;
-}
-.indicator.yellow::before,
-.indicator-right.yellow::after {
-  background: #FEEF72;
-}
-.indicator.light-blue::before,
-.indicator-right.light-blue::after {
-  background: #7CD6FD;
-}
-.indicator.light-blue::before,
-.indicator-right.light-blue::after {
-  background: #7CD6FD;
-}
-.indicator.purple::before,
-.indicator-right.purple::after {
-  background: #b554ff;
-}
-.indicator.magenta::before,
-.indicator-right.magenta::after {
-  background: #ffa3ef;
-}
-
-/*Svg properties colors*/
-.stroke.grey {
-  stroke: #bdd3e6;
-}
-.stroke.light-grey {
-  stroke: #F0F4F7;
-}
-.stroke.blue {
-  stroke: #5e64ff;
-}
-.stroke.red {
-  stroke: #ff5858;
-}
-.stroke.light-green {
-  stroke: #98d85b;
-}
-.stroke.green {
-  stroke: #28a745;
-}
-.stroke.orange {
-  stroke: #ffa00a;
-}
-.stroke.violet {
-  stroke: #743ee2;
-}
-.stroke.darkgrey {
-  stroke: #b8c2cc;
-}
-.stroke.black {
-  stroke: #36414C;
-}
-.stroke.yellow {
-  stroke: #FEEF72;
-}
-.stroke.light-blue {
-  stroke: #7CD6FD;
-}
-.stroke.purple {
-  stroke: #b554ff;
-}
-.stroke.magenta {
-  stroke: #ffa3ef;
-}
-
-.fill.grey {
-  fill: #bdd3e6;
-}
-.fill.light-grey {
-  fill: #F0F4F7;
-}
-.fill.blue {
-  fill: #5e64ff;
-}
-.fill.red {
-  fill: #ff5858;
-}
-.fill.light-green {
-  fill: #98d85b;
-}
-.fill.green {
-  fill: #28a745;
-}
-.fill.orange {
-  fill: #ffa00a;
-}
-.fill.violet {
-  fill: #743ee2;
-}
-.fill.darkgrey {
-  fill: #b8c2cc;
-}
-.fill.black {
-  fill: #36414C;
-}
-.fill.yellow {
-  fill: #FEEF72;
-}
-.fill.light-blue {
-  fill: #7CD6FD;
-}
-.fill.purple {
-  fill: #b554ff;
-}
-.fill.magenta {
-  fill: #ffa3ef;
-}
-
-.background.grey {
-  background: #bdd3e6;
-}
-.background.light-grey {
-  background: #F0F4F7;
-}
-.background.blue {
-  background: #5e64ff;
-}
-.background.red {
-  background: #ff5858;
-}
-.background.light-green {
-  background: #98d85b;
-}
-.background.green {
-  background: #28a745;
-}
-.background.orange {
-  background: #ffa00a;
-}
-.background.violet {
-  background: #743ee2;
-}
-.background.darkgrey {
-  background: #b8c2cc;
-}
-.background.black {
-  background: #36414C;
-}
-.background.yellow {
-  background: #FEEF72;
-}
-.background.light-blue {
-  background: #7CD6FD;
-}
-.background.purple{
-  background: #b554ff;
-}
-.background.magenta{
-  background: #ffa3ef;
-}
-
-.border-top.grey {
-  border-top: 3px solid #bdd3e6;
-}
-.border-top.light-grey {
-  border-top: 3px solid #F0F4F7;
-}
-.border-top.blue {
-  border-top: 3px solid #5e64ff;
-}
-.border-top.red {
-  border-top: 3px solid #ff5858;
-}
-.border-top.light-green {
-  border-top: 3px solid #98d85b;
-}
-.border-top.green {
-  border-top: 3px solid #28a745;
-}
-.border-top.orange {
-  border-top: 3px solid #ffa00a;
-}
-.border-top.violet {
-  border-top: 3px solid #743ee2;
-}
-.border-top.darkgrey {
-  border-top: 3px solid #b8c2cc;
-}
-.border-top.black {
-  border-top: 3px solid #36414C;
-}
-.border-top.yellow {
-  border-top: 3px solid #FEEF72;
-}
-.border-top.light-blue {
-  border-top: 3px solid #7CD6FD;
-}
-.border-top.purple {
-  border-top: 3px solid #b554ff;
-}
-.border-top.magenta {
-  border-top: 3px solid #ffa3ef;
-}
-
-.stop-color.grey {
-  stop-color: #bdd3e6;
-}
-.stop-color.light-grey {
-  stop-color: #F0F4F7;
-}
-.stop-color.blue {
-  stop-color: #5e64ff;
-}
-.stop-color.red {
-  stop-color: #ff5858;
-}
-.stop-color.light-green {
-  stop-color: #98d85b;
-}
-.stop-color.green {
-  stop-color: #28a745;
-}
-.stop-color.orange {
-  stop-color: #ffa00a;
-}
-.stop-color.violet {
-  stop-color: #743ee2;
-}
-.stop-color.darkgrey {
-  stop-color: #b8c2cc;
-}
-.stop-color.black {
-  stop-color: #36414C;
-}
-.stop-color.yellow {
-  stop-color: #FEEF72;
-}
-.stop-color.light-blue {
-  stop-color: #7CD6FD;
-}
-.stop-color.purple {
-  stop-color: #b554ff;
-}
-.stop-color.magenta {
-  stop-color: #ffa3ef;
-}
-

src/styles/charts.less

@@ -0,0 +1,437 @@
+.chart-container {
+	font-family: "Roboto", "Geneva", Tahoma, sans-serif;
+	.graph-focus-margin {
+		margin: 0px 5%;
+	}
+	.graphics {
+		margin-top: 10px;
+		padding-top: 10px;
+		padding-bottom: 10px;
+		position: relative;
+	}
+	.graph-stats-group {
+		display: flex;
+		justify-content: space-around;
+		flex: 1;
+	}
+	.graph-stats-container {
+		display: flex;
+		justify-content: space-around;
+		padding-top: 10px;
+		.stats {
+			padding-bottom: 15px;
+		}
+		.stats-title {
+			color: #8D99A6;
+		}
+		.stats-value {
+			font-size: 20px;
+			font-weight: 300;
+		}
+		.stats-description {
+			font-size: 12px;
+			color: #8D99A6;
+		}
+		.graph-data {
+			.stats-value {
+				color: #98d85b;
+			}
+		}
+	}
+	.axis, .chart-label {
+		font-size: 10px;
+		fill: #555b51;
+		line {
+			stroke: #dadada;
+		}
+	}
+	.percentage-graph {
+		.progress {
+			margin-bottom: 0px;
+		}
+	}
+	.data-points {
+		circle {
+			stroke: #fff;
+			stroke-width: 2;
+		}
+	}
+	.path-group {
+		path {
+			fill: none;
+			stroke-opacity: 1;
+			stroke-width: 2px;
+		}
+	}
+	line.dashed {
+		stroke-dasharray: 5,3;
+	}
+	.tick {
+		&.x-axis-label {
+			display: block;
+		}
+		.specific-value {
+			text-anchor: start;
+		}
+		.y-value-text {
+			text-anchor: end;
+		}
+		.x-value-text {
+			text-anchor: middle;
+		}
+	}
+	.progress {
+		height: 20px;
+		margin-bottom: 20px;
+		overflow: hidden;
+		background-color: #f5f5f5;
+		border-radius: 4px;
+		-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
+		box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
+	}
+	.progress-bar {
+		float: left;
+		width: 0;
+		height: 100%;
+		font-size: 12px;
+		line-height: 20px;
+		color: #fff;
+		text-align: center;
+		background-color: #36414c;
+		-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
+		box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
+		-webkit-transition: width .6s ease;
+		-o-transition: width .6s ease;
+		transition: width .6s ease;
+	}
+}
+
+.graph-svg-tip {
+	position: absolute;
+	z-index: 99999;
+	padding: 10px;
+	font-size: 12px;
+	color: #959da5;
+	text-align: center;
+	background: rgba(0, 0, 0, 0.8);
+	border-radius: 3px;
+	ul {
+		padding-left: 0;
+		display: flex;
+	}
+	ol {
+		padding-left: 0;
+		display: flex;
+	}
+	ul.data-point-list {
+		li {
+			min-width: 90px;
+			flex: 1;
+		}
+	}
+	strong {
+		color: #dfe2e5;
+	}
+	.svg-pointer {
+		position: absolute;
+		bottom: -10px;
+		left: 50%;
+		width: 5px;
+		height: 5px;
+		margin: 0 0 0 -5px;
+		content: " ";
+		border: 5px solid transparent;
+		border-top-color: rgba(0, 0, 0, 0.8);
+	}
+	&.comparison {
+		padding: 0;
+		text-align: left;
+		pointer-events: none;
+		.title {
+			display: block;
+			padding: 10px;
+			margin: 0;
+			font-weight: 600;
+			line-height: 1;
+			pointer-events: none;
+		}
+		ul {
+			margin: 0;
+			white-space: nowrap;
+			list-style: none;
+		}
+		li {
+			display: inline-block;
+			padding: 5px 10px;
+		}
+	}
+}
+
+/*Indicators*/
+.indicator,
+.indicator-right {
+  background: none;
+  font-size: 12px;
+  vertical-align: middle;
+  font-weight: bold;
+  color: #6c7680;
+}
+.indicator::before,
+.indicator-right::after {
+  content: '';
+  display: inline-block;
+  height: 8px;
+  width: 8px;
+  border-radius: 8px;
+}
+.indicator::before {
+  margin: 0 4px 0 0px;
+}
+.indicator-right::after {
+  margin: 0 0 0 4px;
+}
+
+.background.grey,
+.indicator.grey::before,
+.indicator-right.grey::after {
+  background: #bdd3e6;
+}
+.background.light-grey,
+.indicator.light-grey::before,
+.indicator-right.light-grey::after {
+  background: #F0F4F7;
+}
+.background.blue,
+.indicator.blue::before,
+.indicator-right.blue::after {
+  background: #5e64ff;
+}
+.background.red,
+.indicator.red::before,
+.indicator-right.red::after {
+  background: #ff5858;
+}
+.background.green,
+.indicator.green::before,
+.indicator-right.green::after {
+  background: #28a745;
+}
+.background.light-green,
+.indicator.light-green::before,
+.indicator-right.light-green::after {
+  background: #98d85b;
+}
+.background.orange,
+.indicator.orange::before,
+.indicator-right.orange::after {
+  background: #ffa00a;
+}
+.background.violet,
+.indicator.violet::before,
+.indicator-right.violet::after {
+  background: #743ee2;
+}
+.background.dark-grey,
+.indicator.dark-grey::before,
+.indicator-right.dark-grey::after {
+  background: #b8c2cc;
+}
+.background.black,
+.indicator.black::before,
+.indicator-right.black::after {
+  background: #36414C;
+}
+.background.yellow,
+.indicator.yellow::before,
+.indicator-right.yellow::after {
+  background: #FEEF72;
+}
+.background.light-blue,
+.indicator.light-blue::before,
+.indicator-right.light-blue::after {
+  background: #7CD6FD;
+}
+.background.purple,
+.indicator.purple::before,
+.indicator-right.purple::after {
+  background: #b554ff;
+}
+.background.magenta,
+.indicator.magenta::before,
+.indicator-right.magenta::after {
+  background: #ffa3ef;
+}
+
+/*Svg properties colors*/
+.stroke.grey {
+  stroke: #bdd3e6;
+}
+.stroke.light-grey {
+  stroke: #F0F4F7;
+}
+.stroke.blue {
+  stroke: #5e64ff;
+}
+.stroke.red {
+  stroke: #ff5858;
+}
+.stroke.light-green {
+  stroke: #98d85b;
+}
+.stroke.green {
+  stroke: #28a745;
+}
+.stroke.orange {
+  stroke: #ffa00a;
+}
+.stroke.violet {
+  stroke: #743ee2;
+}
+.stroke.dark-grey {
+  stroke: #b8c2cc;
+}
+.stroke.black {
+  stroke: #36414C;
+}
+.stroke.yellow {
+  stroke: #FEEF72;
+}
+.stroke.light-blue {
+  stroke: #7CD6FD;
+}
+.stroke.purple {
+  stroke: #b554ff;
+}
+.stroke.magenta {
+  stroke: #ffa3ef;
+}
+
+.fill.grey {
+  fill: #bdd3e6;
+}
+.fill.light-grey {
+  fill: #F0F4F7;
+}
+.fill.blue {
+  fill: #5e64ff;
+}
+.fill.red {
+  fill: #ff5858;
+}
+.fill.light-green {
+  fill: #98d85b;
+}
+.fill.green {
+  fill: #28a745;
+}
+.fill.orange {
+  fill: #ffa00a;
+}
+.fill.violet {
+  fill: #743ee2;
+}
+.fill.dark-grey {
+  fill: #b8c2cc;
+}
+.fill.black {
+  fill: #36414C;
+}
+.fill.yellow {
+  fill: #FEEF72;
+}
+.fill.light-blue {
+  fill: #7CD6FD;
+}
+.fill.purple {
+  fill: #b554ff;
+}
+.fill.magenta {
+  fill: #ffa3ef;
+}
+
+.border-top.grey {
+  border-top: 3px solid #bdd3e6;
+}
+.border-top.light-grey {
+  border-top: 3px solid #F0F4F7;
+}
+.border-top.blue {
+  border-top: 3px solid #5e64ff;
+}
+.border-top.red {
+  border-top: 3px solid #ff5858;
+}
+.border-top.light-green {
+  border-top: 3px solid #98d85b;
+}
+.border-top.green {
+  border-top: 3px solid #28a745;
+}
+.border-top.orange {
+  border-top: 3px solid #ffa00a;
+}
+.border-top.violet {
+  border-top: 3px solid #743ee2;
+}
+.border-top.dark-grey {
+  border-top: 3px solid #b8c2cc;
+}
+.border-top.black {
+  border-top: 3px solid #36414C;
+}
+.border-top.yellow {
+  border-top: 3px solid #FEEF72;
+}
+.border-top.light-blue {
+  border-top: 3px solid #7CD6FD;
+}
+.border-top.purple {
+  border-top: 3px solid #b554ff;
+}
+.border-top.magenta {
+  border-top: 3px solid #ffa3ef;
+}
+
+.stop-color.grey {
+  stop-color: #bdd3e6;
+}
+.stop-color.light-grey {
+  stop-color: #F0F4F7;
+}
+.stop-color.blue {
+  stop-color: #5e64ff;
+}
+.stop-color.red {
+  stop-color: #ff5858;
+}
+.stop-color.light-green {
+  stop-color: #98d85b;
+}
+.stop-color.green {
+  stop-color: #28a745;
+}
+.stop-color.orange {
+  stop-color: #ffa00a;
+}
+.stop-color.violet {
+  stop-color: #743ee2;
+}
+.stop-color.dark-grey {
+  stop-color: #b8c2cc;
+}
+.stop-color.black {
+  stop-color: #36414C;
+}
+.stop-color.yellow {
+  stop-color: #FEEF72;
+}
+.stop-color.light-blue {
+  stop-color: #7CD6FD;
+}
+.stop-color.purple {
+  stop-color: #b554ff;
+}
+.stop-color.magenta {
+  stop-color: #ffa3ef;
+}
+