update demo, history + all canvas changes

predixdesignsystem · Mar 23, 2017 · 6b75e66 · 6b75e66
1 parent 412e00f
commit 6b75e66
Show file tree

Hide file tree

Showing 5 changed files with 364 additions and 291 deletions.
diff --git a/HISTORY.md b/HISTORY.md
@@ -1,3 +1,11 @@
+v1.1.0
+==================
+* upgraded to vis 1.1.0
+* added canvas support for scatter (automatic when using renderToCanvas)
+* progressive rendering now can be customized through progressiveRenderingPointsPerFrame (16000 by default for lines, 2000 byy default for scatter) and progressiveRenderingMinimumFrames. Increase progressiveRenderingPointsPerFrame for better performance and decrease for smoother drawing. When at the right value no performance cost incurs and drawing is smooth but if value is too small can incur a performance cost (i.e the drawing will take longer but will still start at the same time, also the UI won't be frozen)
+* added cleanOnDetached to allow reuse of the chart after detaching it from the dom. This is aimed at applications creating charts dynamically so that they can keep a pool of charts (simple array of charts) when removing them from the dom and reusing them later on with new data and config, improving performance . Turning cleanOnDetached on will make sure the chart will clear everything needed so that it draws properly with any new config. If using this strategy one thing to keep in mind is making sure the chart is re-appended in the dom *before* changing its properties to their new values. In most cases it would work even if appending it after, but some edge cases scenarios might fail to clean some visual artifact (for example switching from canvas to svg while deleting a few series at the same time). When moving the chart around the dom do not turn it on for performance boost and making sure you don't need the chart to force redrawing. This can be changed dynamically
+* added debounceResizeTiming to control the debounce timiong on auto resize, changed default from 50ms to 250ms
+
 v1.0.0
 ==================
 * changing ghp.sh to account for Alpha releases

diff --git a/bower.json b/bower.json
@@ -24,7 +24,7 @@
       "px-theme": "^2.0.1",
       "px-datetime-common": "^0.7.0",
       "px-colors-design": "^0.3.1",
-      "px-vis": "^1.0.0",
+      "px-vis": "~1.1.0",
       "iron-resizable-behavior": "^1.0.5"
   },
   "devDependencies": {

diff --git a/demo/index.html b/demo/index.html
@@ -75,7 +75,12 @@
           chart-extents='{{props.chartExtents.value}}'
           toolbar-config="{{props.toolbarConfig.value}}"
           match-ticks="{{props.matchTicks.value}}"
-          selection-type="{{props.selectionType.value}}">
+          selection-type="{{props.selectionType.value}}"
+          render-to-canvas="{{props.renderToCanvas.value}}"
+          progressive-rendering-points-per-frame="{{props.progressiveRenderingPointsPerFrame.value}}"
+          progressive-rendering-minimum-frames="{{props.progressiveRenderingMinFrames.value}}"
+          no-canvas-progressive-rendering="{{props.noCanvasProgressiveRendering.value}}"
+          debounce-resize-timing="{{props.debounceResizeTiming.value}}">
         </px-vis-timeseries>
       </div>
       </px-demo-component>
@@ -250,7 +255,6 @@
             "lineConfig",
             "numberOfLayers",
             "offset",
-            "renderToSvg",
             "seriesKey",
             "svg",
             "svgLower",
@@ -342,14 +346,20 @@
      * A reference for `this.props`. Read the documentation there.
      */
     demoProps: {
-      
+
 
       preventResize: {
         type: Boolean,
         defaultValue: true,
         inputType: 'toggle'
       },
 
+      debounceResizeTiming: {
+        type: Number,
+        defaultValue: 250,
+        inputType: 'text'
+      },
+
       //we need inputDisabled: false to be able to dynamically turn it on
       width: {
         type: Number,
@@ -366,6 +376,34 @@
         inputType: 'text'
       },
 
+      renderToCanvas: {
+        type: Boolean,
+        defaultValue: false,
+        inputType: 'toggle'
+      },
+
+      //we need inputDisabled: false to be able to dynamically turn it on
+      noCanvasProgressiveRendering: {
+        type: Boolean,
+        defaultValue: false,
+        inputDisabled: true,
+        inputType: 'toggle'
+      },
+
+      progressiveRenderingPointsPerFrame: {
+        type: Number,
+        defaultValue: 16000,
+        inputDisabled: true,
+        inputType: 'text'
+      },
+
+      progressiveRenderingMinFrames: {
+        type: Number,
+        defaultValue: 1,
+        inputDisabled: true,
+        inputType: 'text'
+      },
+
       chartHorizontalAlignment: {
         type: String,
         defaultValue: 'center',
@@ -669,7 +707,8 @@
       '_appliedWidthChanged(appliedWidth)',
       '_appliedHeightChanged(appliedHeight)',
       '_widthChanged(props.width.value)',
-      '_heightChanged(props.height.value)'
+      '_heightChanged(props.height.value)',
+      '_renderToCanvasChanged(props.renderToCanvas.value, props.noCanvasProgressiveRendering.value)'
     ],
 
     _preventResizeChanged: function() {
@@ -692,6 +731,12 @@
     },
     _appliedHeightChanged: function() {
       this.set('props.height.value', this.appliedHeight);
+    },
+    _renderToCanvasChanged: function() {
+      this.set('props.noCanvasProgressiveRendering.inputDisabled', !this.props.renderToCanvas.value);
+
+      this.set('props.progressiveRenderingPointsPerFrame.inputDisabled', !this.props.renderToCanvas.value || this.props.noCanvasProgressiveRendering.value);
+      this.set('props.progressiveRenderingMinFrames.inputDisabled', !this.props.renderToCanvas.value ||this.props.noCanvasProgressiveRendering.value);
     }
   });
 </script>