"use canvas" checkmark for scatter resizing examples

dc-js · Oct 21, 2019 · 71b23be · 71b23be
1 parent 0da5d08
commit 71b23be
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 5 deletions.
diff --git a/web/resizing/resizing-scatter-brushing.html b/web/resizing/resizing-scatter-brushing.html
@@ -7,7 +7,8 @@
     <link type="text/css" rel="stylesheet" href="../css/dc-floatleft.css"/>
 </head>
 <body>
-<div class="container">
+  <label style="display: inline-block"><input type="checkbox" id="canvas">Use Canvas</label>
+  <div class="container">
   <div id="test1"></div>
   <div id="test2"></div>
 
@@ -21,6 +22,10 @@
 const urlParams = new URLSearchParams(window.location.search),
     useCanvas = !!urlParams.get('canvas');
 
+    d3.select('#canvas').property('checked', useCanvas).on('change', function() {
+        window.location.href = window.location.href.split('?')[0] + (this.checked ? '?canvas=t' : '');
+    })
+
     dc.constants.EVENT_DELAY = 0;
 
 var chart1 = dc.scatterPlot("#test1");

diff --git a/web/resizing/resizing-scatter-flexbox-observer.html b/web/resizing/resizing-scatter-flexbox-observer.html
@@ -10,8 +10,17 @@
           left: 0; top: 0; right: 0; bottom: 0;
       }
       .container {
+          display: flex;
+          flex-direction: column;
+      }
+      .controls {
+          flex: 0;
+      }
+      .chart-holder {
+          flex: 1;
           display: flex;
           flex-direction: row;
+          min-height: 0;
       }
       #test1,#test2 {
           min-width: 0;
@@ -20,9 +29,14 @@
     </style>
 </head>
 <body>
-<div class="container">
-  <div id="test1"></div>
-  <div id="test2"></div>
+  <div class="container">
+    <div class=".controls">
+      <label style="display: inline-block"><input type="checkbox" id="canvas">Use Canvas</label>
+    </div>
+    <div class="chart-holder">
+      <div id="test1"></div>
+      <div id="test2"></div>
+    </div>
 
     <script type="text/javascript" src="../js/promise-polyfill.js"></script>
     <script type="text/javascript" src="../js/fetch.umd.js"></script>
@@ -34,6 +48,10 @@
 const urlParams = new URLSearchParams(window.location.search),
     useCanvas = !!urlParams.get('canvas');
 
+d3.select('#canvas').property('checked', useCanvas).on('change', function() {
+    window.location.href = window.location.href.split('?')[0] + (this.checked ? '?canvas=t' : '');
+})
+
     dc.constants.EVENT_DELAY = 0;
 
 var chart1 = dc.scatterPlot("#test1");
@@ -96,7 +114,9 @@
     chart2.transitionDuration(0);
 }
 
-dc.renderAll();
+    dc.renderAll();
+
+    let n=0;
 
 const callback = chart => entries => {
     chart