useViewBoxResizing option for resizing examples

for #1312
dc-js · Jun 23, 2017 · 3e6e4e3 · 3e6e4e3
1 parent de7310e
commit 3e6e4e3
Show file tree

Hide file tree

Showing 8 changed files with 72 additions and 41 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -330,7 +330,10 @@ module.exports = function (grunt) {
                     title: 'Index of dc.js resizing tests',
                     heading: 'Eyeball tests for resizing dc.js charts',
                     description: 'It\'s a lot easier to test resizing behavior by eye. ' +
-                        'These pages fit the charts to the browser dynamically so it\'s easier to test.',
+                        'These pages fit the charts to the browser dynamically so it\'s easier to test. ' +
+                        'For the examples with a single chart taking up the entire window, you can add <code>?resize=viewbox</code> ' +
+                        'to the URL to test resizing the chart using the ' +
+          '<a href="http://dc-js.github.io/dc.js/docs/html/dc.baseMixin.html#useViewBoxResizing__anchor">useViewBoxResizing</a> strategy.',
                     sourceLink: 'https://github.com/dc-js/dc.js/tree/master/<%= conf.web %>/resizing'
                 },
                 files: [

diff --git a/web/resizing/dc-resizing.css b/web/resizing/dc-resizing.css
@@ -0,0 +1,7 @@
+div.fullsize {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+}
diff --git a/web/resizing/dc-resizing.js b/web/resizing/dc-resizing.js
@@ -0,0 +1,39 @@
+var find_query = function() {
+    var _map = window.location.search.substr(1).split('&').map(function(a) {
+        return a.split('=');
+    }).reduce(function(p, v) {
+        if(v.length > 1)
+            p[v[0]] = decodeURIComponent(v[1].replace(/\+/g, " "));
+        else
+            p[v[0]] = true;
+        return p;
+    }, {});
+    return function(field) {
+        return _map[field] || null;
+    };
+}();
+var resizeMode = find_query('resize') || 'widhei';
+
+function apply_resizing(chart, adjustX, adjustY, onresize) {
+    if(resizeMode.toLowerCase() === 'viewbox') {
+        chart
+            .width(600)
+            .height(400)
+            .useViewBoxResizing(true);
+        d3.select(chart.anchor()).classed('fullsize', true);
+    } else {
+        adjustX = adjustX || 0;
+        adjustY = adjustY || adjustX || 0;
+        chart
+            .width(window.innerWidth-adjustX)
+            .height(window.innerHeight-adjustY);
+        window.onresize = function() {
+            onresize(chart);
+            chart
+                .width(window.innerWidth-20)
+                .height(window.innerHeight-20)
+                .rescale()
+                .redraw();
+        };
+    }
+}
diff --git a/web/resizing/resizing-bar.html b/web/resizing/resizing-bar.html
@@ -3,7 +3,8 @@
 <head>
     <title>dc.js - Bar Chart Example</title>
     <meta charset="UTF-8">
-    <link rel="stylesheet" type="text/css" href="../css/dc.css"/>
+    <link rel="stylesheet" type="text/css" href="../css/dc.css" />
+    <link rel="stylesheet" type="text/css" href="dc-resizing.css" />
 </head>
 <body>
 
@@ -12,6 +13,7 @@
 <script type="text/javascript" src="../js/d3.js"></script>
 <script type="text/javascript" src="../js/crossfilter.js"></script>
 <script type="text/javascript" src="../js/dc.js"></script>
+<script type="text/javascript" src="dc-resizing.js"></script>
 <script type="text/javascript">
 
 var chart = dc.barChart("#test");
@@ -26,8 +28,6 @@
       speedSumGroup       = runDimension.group().reduceSum(function(d) {return d.Speed * d.Run / 1000;});
 
   chart
-    .width(window.innerWidth-20)
-    .height(window.innerHeight-20)
     .x(d3.scale.linear().domain([6,20]))
     .brushOn(true)
     .xAxisLabel("This is the X Axis!!")
@@ -39,15 +39,9 @@
             console.log("click!", d);
         });
     });
-    chart.render();
 
-    window.onresize = function() {
-        chart
-            .width(window.innerWidth-20)
-            .height(window.innerHeight-20)
-            .rescale()
-            .redraw();
-      };
+    apply_resizing(chart, 20);
+    chart.render();
 });
 
 </script>

diff --git a/web/resizing/resizing-pie.html b/web/resizing/resizing-pie.html
@@ -4,6 +4,7 @@
     <title>dc.js - Pie Chart Example</title>
     <meta charset="UTF-8">
     <link rel="stylesheet" type="text/css" href="../css/dc.css"/>
+    <link rel="stylesheet" type="text/css" href="dc-resizing.css" />
 </head>
 <body>
 
@@ -12,6 +13,7 @@
 <script type="text/javascript" src="../js/d3.js"></script>
 <script type="text/javascript" src="../js/crossfilter.js"></script>
 <script type="text/javascript" src="../js/dc.js"></script>
+<script type="text/javascript" src="dc-resizing.js"></script>
 <script type="text/javascript">
 
 var chart = dc.pieChart("#test");
@@ -31,12 +33,7 @@
     .group(speedSumGroup)
     .legend(dc.legend());
 
-  window.onresize = function() {
-      chart
-          .width(window.innerWidth-adjustX)
-          .height(window.innerHeight-adjustY)
-          .redraw();
-  };
+    apply_resizing(chart, adjustX, adjustY);
 
   chart.render();
 });

diff --git a/web/resizing/resizing-right-axis.html b/web/resizing/resizing-right-axis.html
@@ -4,6 +4,7 @@
     <title>dc.js - Right Axis Example</title>
     <meta charset="UTF-8">
     <link rel="stylesheet" type="text/css" href="../css/dc.css"/>
+    <link rel="stylesheet" type="text/css" href="dc-resizing.css" />
 </head>
 <body>
 
@@ -16,6 +17,7 @@
 <script type="text/javascript" src="../js/d3.js"></script>
 <script type="text/javascript" src="../js/crossfilter.js"></script>
 <script type="text/javascript" src="../js/dc.js"></script>
+<script type="text/javascript" src="dc-resizing.js"></script>
 <script type="text/javascript">
     var moveChart = dc.compositeChart("#monthly-move-chart");
 
@@ -92,13 +94,7 @@
                 .rightYAxisLabel("Monthly Index Move")
                 .renderHorizontalGridLines(true);
 
-     window.onresize = function() {
-        moveChart
-             .width(window.innerWidth-adjustX)
-             .height(window.innerHeight-adjustY)
-             .rescale()
-             .redraw();
-      };
+        apply_resizing(moveChart, adjustX, adjustY);
 
         dc.renderAll();
     });

diff --git a/web/resizing/resizing-row.html b/web/resizing/resizing-row.html
@@ -4,6 +4,7 @@
     <title>dc.js - Row Chart Example</title>
     <meta charset="UTF-8">
     <link rel="stylesheet" type="text/css" href="../css/dc.css"/>
+    <link rel="stylesheet" type="text/css" href="dc-resizing.css" />
 </head>
 <body>
 
@@ -12,6 +13,7 @@
 <script type="text/javascript" src="../js/d3.js"></script>
 <script type="text/javascript" src="../js/crossfilter.js"></script>
 <script type="text/javascript" src="../js/dc.js"></script>
+<script type="text/javascript" src="dc-resizing.js"></script>
 <script type="text/javascript">
 
 var chart = dc.rowChart("#test");
@@ -34,12 +36,8 @@
     .group(speedSumGroup)
     .render();
 
-  window.onresize = function() {
-      chart
-          .width(window.innerWidth-20)
-          .height(window.innerHeight-20)
-          .redraw();
-    };
+    apply_resizing(chart, 20);
+    dc.renderAll();
 
 });
 

diff --git a/web/resizing/resizing-series.html b/web/resizing/resizing-series.html
@@ -4,6 +4,7 @@
     <title>dc.js - Series Example</title>
     <meta charset="UTF-8">
     <link rel="stylesheet" type="text/css" href="../css/dc.css"/>
+    <link rel="stylesheet" type="text/css" href="dc-resizing.css" />
   </head>
   <body>
 
@@ -15,6 +16,7 @@
     <script type="text/javascript" src="../js/d3.js"></script>
     <script type="text/javascript" src="../js/crossfilter.js"></script>
     <script type="text/javascript" src="../js/dc.js"></script>
+    <script type="text/javascript" src="dc-resizing.js"></script>
     <script type="text/javascript">
 
       var chart = dc.seriesChart("#test");
@@ -49,14 +51,9 @@
           chart.yAxis().tickFormat(function(d) {return d3.format(',d')(d+299500);});
           chart.margins().left += 40;
 
-          window.onresize = function() {
+          apply_resizing(chart, adjustX, adjustY, function(chart) {
               chart.legend().x(window.innerWidth-200);
-              chart
-                  .width(window.innerWidth-adjustX)
-                  .height(window.innerHeight-adjustY)
-                  .rescale()
-                  .redraw();
-          };
+          });
 
           dc.renderAll();
 
@@ -72,9 +69,9 @@
           };
       }
 
-      var button1 = load_button("morley.csv"),
-          button2 = load_button("morley2.csv"),
-          button3 = load_button("morley3.csv");
+      var button1 = load_button("../examples/morley.csv"),
+          button2 = load_button("../examples/morley2.csv"),
+          button3 = load_button("../examples/morley3.csv");
 
     </script>