Merge pull request #15 from Anisha1234/svgflex

Uses CSS flex-box for display of svg elements

Author: k-rister

cdm-tests/src/App.js

@@ -238,20 +238,26 @@ class App extends Component {
           <h1 className="App-title">JSChart CDM Demo</h1>
         </header>
         <br></br>
-        <div id="jschart_cdm_fio">
+        <div>
           <h3 id="select_fio_dataset">
-	    FIO Chart Dataset Selection:
-	  </h3>
+            FIO Chart Dataset Selection:
+	        </h3>
+          <div id="jschart_cdm_fio">
+          </div>
         </div>
-        <div id="jschart_cdm_iostat">
+        <div>
           <h3 id="select_iostat_dataset">
-	    IOSTAT Chart Dataset Selection:
-	  </h3>
+            IOSTAT Chart Dataset Selection:
+	        </h3>
+          <div id="jschart_cdm_iostat">
+          </div>
         </div>
-        <div id="jschart_cdm_mpstat">
+        <div>
           <h3 id="select_mpstat_dataset">
-	    MPSTAT Chart Dataset Selection:
-	  </h3>
+            MPSTAT Chart Dataset Selection:
+	        </h3>
+          <div id="jschart_cdm_mpstat">
+          </div>
         </div>
       </div>
     );

jschart/index.js

@@ -2813,8 +2813,13 @@ function build_chart(chart) {
     );
     return;
   }
-
-  var table = chart.dom.div.append("table");
+  
+  var table = chart.dom.div.append("table")
+    .attr("class", "graphtable")
+    .style("max-width", chart.dimensions.viewport_width+"px")
+    .style("flex", "0.9 0.9 auto")
+    .style("width", 0)
+    .style("word-break", "break-all");
 
   var row = table.append("tr")
 	.classed("wrapper", true)
@@ -2917,13 +2922,8 @@ function build_chart(chart) {
     .enter()
     .append("svg")
     .classed("svg", true)
-    .attr(
-      "width",
-      chart.dimensions.viewport_width +
-        chart.dimensions.margin.left +
-        chart.dimensions.margin.right
-    )
-    .attr("height", get_svg_height(chart));
+    .attr("viewBox", "0 0" + " " + (chart.dimensions.viewport_width + chart.dimensions.margin.left +
+      chart.dimensions.margin.right) + " " + (get_svg_height(chart) ) + "");
 
   chart.chart.defs = chart.chart.svg.append("defs");
   if (!chart.options.scatterplot) {
@@ -3647,7 +3647,9 @@ function load_datasets(chart) {
 
     if (chart.datasets.all.length > chart.dataset_count) {
       console.log('Resizing SVG for chart "' + chart.chart_title + '".');
-      chart.chart.svg.attr("height", get_svg_height(chart));
+      chart.chart.svg.attr("height", get_svg_height(chart))
+        .attr("viewBox", "0 0" + " " + (chart.dimensions.viewport_width + chart.dimensions.margin.left +
+          chart.dimensions.margin.right) + " " + (get_svg_height(chart)) + "");
       console.log('...finished resizing SVG for chart "' + chart.chart_title + '".');
     }
 
@@ -3701,6 +3703,9 @@ exports.create_jschart = function(
     stacked = 0;
   }
 
+  d3.select('#'+location)
+    .style("display","flex")
+
   // add an entry to the chart generating queue
   charts_queue.defer(
     generate_chart,
@@ -3717,6 +3722,9 @@ exports.create_jschart = function(
 exports.finish_page = function () {
   // wait for initial chart generation to complete before logging that it is done and changing the page background
   // note: chart datasets may still be loading asynchronously
+  d3.selectAll(".svg")
+    .style("width",'100%')
+    .style("height","auto")
   charts_queue.await(function(error, results) {
     d3.select("body").classed("completedpage", true);
     console.log("Finished creating all charts");
@@ -5374,7 +5382,9 @@ function reset_chart(chart) {
 
   reset_axes_domains(chart);
 
-  chart.chart.svg.attr("height", get_svg_height(chart));
+  chart.chart.svg.attr("height", get_svg_height(chart))
+    .attr("viewBox", "0 0" + " " + (chart.dimensions.viewport_width + chart.dimensions.margin.left +
+      chart.dimensions.margin.right) + " " + (get_svg_height(chart)) + "");
 
   chart.state.reset = true;
 }
@@ -5385,7 +5395,7 @@ function get_svg_height(chart) {
          chart.dimensions.margin.bottom +
          ( Math.ceil(chart.datasets.all.length / chart.state.legend_columns) -
            1 + chart.options.legend_entries.length
-	 ) * chart.dimensions.legend_properties.row_height;
+        ) * chart.dimensions.legend_properties.row_height;
 }
 
 function reload_chart(chart) {

tests/src/App.js

@@ -141,11 +141,13 @@ class App extends Component {
           <h1 className="App-title">JSChart Demos</h1>
         </header>
         <br></br>
-        <div id="jschart_dynamic">
+        <div>
           <h3 id="select_dataset">
-	    Dynamic Chart Dataset Selection:
-	  </h3>
-	</div>
+	        Dynamic Chart Dataset Selection:
+          </h3>
+          <div id="jschart_dynamic">
+	        </div>
+        </div> 
         <br/>
         <div id="jschart_json"></div>
         <br/>