More chart classes (svg, button)

hitier
1 parent 207a8628
Showing 2 changed files with 18 additions and 11 deletions Show diff stats
app/main/static/css/charges.css
app/main/static/js/charges.js
@@ -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
@@ -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