From cfc5bded2cfaa338b02905fed0247f356c00e7d9 Mon Sep 17 00:00:00 2001
From: Richard Hitier <hitier.richard@gmail.com>
Date: Mon, 26 Apr 2021 11:38:18 +0200
Subject: [PATCH] More chart classes (svg, button)

---
 app/main/static/css/charges.css | 10 ++++++++--
 app/main/static/js/charges.js   | 19 ++++++++++---------
 2 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/app/main/static/css/charges.css b/app/main/static/css/charges.css
index 6f63420..a1b0eeb 100644
--- a/app/main/static/css/charges.css
+++ b/app/main/static/css/charges.css
@@ -45,7 +45,7 @@
     padding: 0.8em;
 }
 
-.charge_chart svg {
+.svg_chart {
     background-color: #fAfAfA;
     border: 1pt solid black;
     display: inline-block;
@@ -53,10 +53,11 @@
 
 text.legend {
     font-size: 12px;
+    font-family: sans-serif;
 }
 
 rect.legend {
-    stroke: white;
+    stroke: grey;
     stroke-width: 0.5pt;
 }
 
@@ -87,3 +88,8 @@ rect.bar:hover {
     max-width: 300px;
     pointer-events: none;
 }
+
+button.export {
+    float: right;
+    margin-right: 0;
+}
\ No newline at end of file
diff --git a/app/main/static/js/charges.js b/app/main/static/js/charges.js
index 8237882..579b741 100644
--- a/app/main/static/js/charges.js
+++ b/app/main/static/js/charges.js
@@ -65,18 +65,19 @@ function build_chart(div_selector, data_url, entity_name, category_type) {
         alert("ALERT ! Every body shall quit the boat, we are sinking ! ALERT !")
     }
 
+    // Create a download button inside the div contaning svg chart
+    var dl_btn = d3.select(div_selector).append("button")
+        .text('png')
+        .attr('class', 'export')
+        .on('click', download_png)
+
     const svg = d3.select(div_selector).append("svg")
-        .attr("id", "svg")
+        .attr("class", "svg_chart")
         .attr("width", width + margin.left + margin.right)
         .attr("height", height + margin.top + margin.bottom)
         .append("g")
         .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
 
-    // Create a download button inside the div contaning svg chart
-    var dl_btn = d3.select(div_selector).append("button")
-        .text('png')
-        .on('click', download_png)
-
     const tooltip = d3.select('html')
         .append("div")
         .style("opacity", 0)
@@ -158,7 +159,7 @@ function build_chart(div_selector, data_url, entity_name, category_type) {
             .attr('width', legendRectSize)
             .attr('height', legendRectSize)
             .style('fill', color_scale)
-            .style('stroke', color_scale);
+            .attr('class', 'legend');
 
         legend.append('text')
             .attr('class', 'legend')
@@ -393,7 +394,7 @@ function build_chart(div_selector, data_url, entity_name, category_type) {
 
         // Draw Xaxis
         svg.append("g")
-            .attr("class", "x axis")
+            .attr("class", "x_axis")
             .attr("transform", "translate(0," + height + ")")
             .call(xAxis)
             .selectAll("text")
@@ -409,7 +410,7 @@ function build_chart(div_selector, data_url, entity_name, category_type) {
 
         // Draw Yaxis
         svg.append("g")
-            .attr("class", "y axis")
+            .attr("class", "y_axis")
             .call(yAxis)
 
         // Draw horizontal lines
--
libgit2 0.21.2