From ad65ed7c8ee640e6805989876a44d1a1e70b6f52 Mon Sep 17 00:00:00 2001
From: Terrtia <or1994@hotmail.fr>
Date: Fri, 6 Sep 2019 16:52:51 +0200
Subject: [PATCH] chg: [UI sparklines] sparklines: fix + factory

---
 .../templates/DaysCorrelation.html            | 38 +--------------
 .../hashDecoded/templates/hashDecoded.html    | 39 +--------------
 .../templates/showCorrelation.html            | 45 +----------------
 .../hashDecoded/templates/showHash.html       | 45 +----------------
 var/www/static/js/plugins/d3/sparklines.js    | 48 +++++++++++++++++++
 5 files changed, 56 insertions(+), 159 deletions(-)
 create mode 100644 var/www/static/js/plugins/d3/sparklines.js

diff --git a/var/www/modules/hashDecoded/templates/DaysCorrelation.html b/var/www/modules/hashDecoded/templates/DaysCorrelation.html
index 2051cef0..1796dc66 100644
--- a/var/www/modules/hashDecoded/templates/DaysCorrelation.html
+++ b/var/www/modules/hashDecoded/templates/DaysCorrelation.html
@@ -20,6 +20,7 @@
 	<script language="javascript" src="{{ url_for('static', filename='js/moment.min.js') }}"></script>
 	<script language="javascript" src="{{ url_for('static', filename='js/jquery.daterangepicker.min.js') }}"></script>
 	<script language="javascript" src="{{ url_for('static', filename='js/d3.min.js') }}"></script>
+  <script src="{{ url_for('static', filename='js/plugins/d3/sparklines.js')}}"></script>
 
 	<style>
 		.input-group .form-control {
@@ -246,45 +247,10 @@ function toggle_sidebar(){
 	}
 }
 </script>
-<script>
 
-// a sparklines plot
-function sparklines(id, points) {
-    var width = 100, height = 60;
-
-    var data = []
-    for (i = 0; i < points.length; i++) {
-        data[i] = {
-            'x': i,
-            'y': +points[i]
-        }
-    }
-
-    var x = d3.scaleLinear()
-        .range([0, width - 10])
-        .domain([0,5]);
-
-    var y = d3.scaleLinear()
-        .range([height, 0])
-        .domain([0,10]);
-
-    var line = d3.line()
-                .x(function(d) {return x(d.x)})
-                .y(function(d) {return y(d.y)});
-
-    d3.select("#"+id).append('svg')
-            .attr('width', width)
-            .attr('height', height)
-         .append('path')
-            .attr('class','line')
-            .datum(data)
-            .attr('d', line);
-
-}
-</script>
 <script>
 	{% for key_id in all_metadata %}
-		sparklines("sparklines_{{ all_metadata[key_id]['sparklines_id'] }}", {{ all_metadata[key_id]['sparklines_data'] }})
+    sparkline("sparklines_{{ all_metadata[key_id]['sparklines_id'] }}", {{ all_metadata[key_id]['sparklines_data'] }}, {});
 	{% endfor %}
 </script>
 
diff --git a/var/www/modules/hashDecoded/templates/hashDecoded.html b/var/www/modules/hashDecoded/templates/hashDecoded.html
index 766f618a..da4263e0 100644
--- a/var/www/modules/hashDecoded/templates/hashDecoded.html
+++ b/var/www/modules/hashDecoded/templates/hashDecoded.html
@@ -20,6 +20,7 @@
 	<script language="javascript" src="{{ url_for('static', filename='js/moment.min.js') }}"></script>
 	<script language="javascript" src="{{ url_for('static', filename='js/jquery.daterangepicker.min.js') }}"></script>
 	<script language="javascript" src="{{ url_for('static', filename='js/d3.min.js') }}"></script>
+  <script src="{{ url_for('static', filename='js/plugins/d3/sparklines.js')}}"></script>
 
 	<style>
 		.input-group .form-control {
@@ -296,46 +297,10 @@ function toggle_sidebar(){
 		});
 	}
 </script>
-<script>
-//var data = [6,3,3,2,5,3,9];
 
-// a sparklines plot
-function sparklines(id, points) {
-    var width = 100, height = 60;
-
-    var data = []
-    for (i = 0; i < points.length; i++) {
-        data[i] = {
-            'x': i,
-            'y': +points[i]
-        }
-    }
-
-    var x = d3.scaleLinear()
-        .range([0, width - 10])
-        .domain([0,5]);
-
-    var y = d3.scaleLinear()
-        .range([height, 0])
-        .domain([0,10]);
-
-    var line = d3.line()
-                .x(function(d) {return x(d.x)})
-                .y(function(d) {return y(d.y)});
-
-    d3.select("#"+id).append('svg')
-            .attr('width', width)
-            .attr('height', height)
-         .append('path')
-            .attr('class','line')
-            .datum(data)
-            .attr('d', line);
-
-}
-</script>
 <script>
 	{% for b64 in l_64 %}
-		sparklines("sparklines_{{ b64[2] }}", {{ b64[10] }})
+    sparkline("sparklines_{{ b64[2] }}", {{ b64[10] }}, {});
 	{% endfor %}
 </script>
 
diff --git a/var/www/modules/hashDecoded/templates/showCorrelation.html b/var/www/modules/hashDecoded/templates/showCorrelation.html
index 35ec63ec..105afb95 100644
--- a/var/www/modules/hashDecoded/templates/showCorrelation.html
+++ b/var/www/modules/hashDecoded/templates/showCorrelation.html
@@ -16,6 +16,7 @@
 		<script src="{{ url_for('static', filename='js/popper.min.js')}}"></script>
 		<script src="{{ url_for('static', filename='js/bootstrap4.min.js')}}"></script>
 		<script language="javascript" src="{{ url_for('static', filename='js/d3.min.js') }}"></script>
+		<script src="{{ url_for('static', filename='js/plugins/d3/sparklines.js')}}"></script>
 
 		<style>
 		line.link {
@@ -25,11 +26,6 @@
 			stroke: red;
 			stroke-width: 2px
 		}
-		.line_sparkline {
-			fill: none;
-			stroke: #000;
-			stroke-width: 2.0px;
-		}
 		.node {
 			pointer-events: all;
 		}
@@ -179,7 +175,7 @@
 var all_graph = {};
 $(document).ready(function(){
 		$("#page-Decoded").addClass("active");
-		sparklines("sparkline", {{ sparkline_values }})
+		sparkline("sparkline", {{ sparkline_values }}, {});
 
 		all_graph.node_graph = create_graph("{{ url_for(graph_node_endpoint) }}?type_id={{type_id}}&key_id={{key_id}}");
 		all_graph.line_chart = create_line_chart('graph_line', "{{ url_for(graph_line_endpoint) }}?type_id={{type_id}}&key_id={{key_id}}");
@@ -212,43 +208,6 @@ function toggle_sidebar(){
 	}
 
 </script>
-<script>
-//var data = [6,3,3,2,5,3,9];
-
-// a sparklines plot
-function sparklines(id, points) {
-    var width_spark = 100, height_spark = 60;
-
-    var data = []
-    for (i = 0; i < points.length; i++) {
-        data[i] = {
-            'x': i,
-            'y': +points[i]
-        }
-    }
-
-    var x = d3.scaleLinear()
-        .range([0, width_spark - 10])
-        .domain([0,5]);
-
-    var y = d3.scaleLinear()
-        .range([height_spark, 0])
-        .domain([0,10]);
-
-    var line = d3.line()
-                .x(function(d) {return x(d.x)})
-                .y(function(d) {return y(d.y)});
-
-    d3.select("#"+id).append('svg')
-            .attr('width', width_spark)
-            .attr('height', height_spark)
-         .append('path')
-            .attr('class','line_sparkline')
-            .datum(data)
-            .attr('d', line);
-
-}
-</script>
 
 <script>
 var width = 400,
diff --git a/var/www/modules/hashDecoded/templates/showHash.html b/var/www/modules/hashDecoded/templates/showHash.html
index c7cac4d8..a0b7bde7 100644
--- a/var/www/modules/hashDecoded/templates/showHash.html
+++ b/var/www/modules/hashDecoded/templates/showHash.html
@@ -16,6 +16,7 @@
 		<script src="{{ url_for('static', filename='js/popper.min.js')}}"></script>
 		<script src="{{ url_for('static', filename='js/bootstrap4.min.js')}}"></script>
 		<script language="javascript" src="{{ url_for('static', filename='js/d3.min.js') }}"></script>
+		<script src="{{ url_for('static', filename='js/plugins/d3/sparklines.js')}}"></script>
 
 		<style>
 		line.link {
@@ -25,11 +26,6 @@
 			stroke: red;
 			stroke-width: 2px
 		}
-		.line_sparkline {
-			fill: none;
-			stroke: #000;
-			stroke-width: 2.0px;
-		}
 		.node {
 			pointer-events: all;
 		}
@@ -234,7 +230,7 @@
 var all_graph = {};
 $(document).ready(function(){
 		$("#page-Decoded").addClass("active");
-		sparklines("sparkline", {{ sparkline_values }})
+		sparkline("sparkline", {{ sparkline_values }}, {});
 
 		all_graph.node_graph = create_graph("{{ url_for('hashDecoded.hash_graph_node_json') }}?hash={{hash}}");
 		all_graph.line_chart = create_line_chart('graph_line', "{{ url_for('hashDecoded.hash_graph_line_json') }}?hash={{hash}}");
@@ -288,43 +284,6 @@ function toggle_sidebar(){
 	}
 
 </script>
-<script>
-//var data = [6,3,3,2,5,3,9];
-
-// a sparklines plot
-function sparklines(id, points) {
-    var width_spark = 100, height_spark = 60;
-
-    var data = []
-    for (i = 0; i < points.length; i++) {
-        data[i] = {
-            'x': i,
-            'y': +points[i]
-        }
-    }
-
-    var x = d3.scaleLinear()
-        .range([0, width_spark - 10])
-        .domain([0,5]);
-
-    var y = d3.scaleLinear()
-        .range([height_spark, 0])
-        .domain([0,10]);
-
-    var line = d3.line()
-                .x(function(d) {return x(d.x)})
-                .y(function(d) {return y(d.y)});
-
-    d3.select("#"+id).append('svg')
-            .attr('width', width_spark)
-            .attr('height', height_spark)
-         .append('path')
-            .attr('class','line_sparkline')
-            .datum(data)
-            .attr('d', line);
-
-}
-</script>
 
 <script>
 var width = 400,
diff --git a/var/www/static/js/plugins/d3/sparklines.js b/var/www/static/js/plugins/d3/sparklines.js
new file mode 100644
index 00000000..bee8b23f
--- /dev/null
+++ b/var/www/static/js/plugins/d3/sparklines.js
@@ -0,0 +1,48 @@
+const sparkline = (container_id, data, options) => {
+
+	const defaults = {
+        style: {
+            stroke: "rgb(0, 0, 0)",
+            strokeWidth: 2
+        },
+				margin: {top:3, right:3, bottom:3, left:3},
+				width: 100,
+				height: 60
+	};
+
+	options = $.extend(true, defaults, options);
+
+
+	let width_spark = options.width - options.margin.left - options.margin.right;
+	let height_spark = options.height - options.margin.top - options.margin.bottom;
+
+	let maxX = data.length;
+	let maxY = d3.max(data, function(d) { return d } );
+
+	let x = d3.scaleLinear()
+						.range([0, width_spark - 10])
+						.domain([0,maxX]);
+
+	let y = d3.scaleLinear()
+						.range([height_spark, 0])
+						.domain([0,maxY]);
+
+	let line = d3.line()
+						.x(function(d, i) {return x(i)})
+						.y(function(d) {return y(d)});
+
+	let res = d3.select( "#"+container_id ).append('svg')
+				.attr('width', options.width)
+				.attr('height', options.height)
+		 .append('g')
+		 		.attr("transform", "translate("+options.margin.left+","+options.margin.top+")")
+		 .append('path')
+				.datum(data)
+				.attr('d', line)
+				.style("fill", "none")
+				.style("stroke", options.style.stroke)
+				.style("stroke-width", options.style.strokeWidth);
+
+	return res
+
+}