Merge branch 'master' of https://github.com/predictionmachines/InteractiveDataDisplay

dgrechka · dgrechka · commit 2ddda5257158 · 2018-12-10T13:31:12.000+03:00
diff --git a/RELEASE_NOTES.md b/RELEASE_NOTES.md
@@ -1,7 +1,13 @@
+### 1.5.15 (December , 2018)
+
+New features:
+ - added a new sample of figure with axes, grid and navigation
+ - added support for the figure's data-idd-navigation-enabled and data-idd-legend-enabled attributes.
+
 ### 1.5.14 (August 16, 2018)
 
 Bug fixes:
- - Fixed multiple event subscription to the zoom event
+ - fixed multiple event subscription to the zoom event.
 
 ### 1.5.13 (August 9, 2018)
 
@@ -11,22 +17,22 @@ Bug fixes:
 ### 1.5.12 (June 14, 2018)
 
 Bug fixed:
- - iddXAxisSettings, iddYAxisSettings added
+ - iddXAxisSettings, iddYAxisSettings added.
 
 ### 1.5.11 (May 31, 2018)
 
 Bug fixed:
- - bounding box for Bars is now calculated in plot coordinates
+ - bounding box for Bars is now calculated in plot coordinates.
 
 ### 1.5.10 (May 29, 2018)
 
 Bug fixed:
- - iddBarWidth binding for markers works with plot coordinates now
+ - iddBarWidth binding for markers works with plot coordinates now.
 
 ### 1.5.9 (May 21, 2018)
 
 Bug fixed:
- - plot.order can now be assigned either externally (e.g. via binding) or by relevant legend item reordering (in Chart Viewer)
+ - plot.order can now be assigned either externally (e.g. via binding) or by relevant legend item reordering (in Chart Viewer).
 
 ### 1.5.8 (May 18, 2018)
 
@@ -36,16 +42,16 @@ Bug fixed:
 ### 1.5.7 (May 15, 2018)
 
 New features:
- - added custom KO binding: iddPlotOrder - integer value that controls the plot order.
- - added sample page KO.Order.html for the iddPlotOrder binding.
- - added custom KO bindings: iddXlog, iddYlog. They boolean value of them controls the log transform of corresponding axis.
+ - added custom KO binding: iddPlotOrder - integer value that controls the plot order
+ - added sample page KO.Order.html for the iddPlotOrder binding
+ - added custom KO bindings: iddXlog, iddYlog. They boolean value of them controls the log transform of corresponding axis
  - added custom KO bindings: iddIgnoredByFitToView. if set to true, the plot is excluded from FitToView visible region calculation.
 
 ### 1.5.6 (May 11, 2018)
 
 New features:
- - plot now has `isIgnoredByFitToView` property. Setting it to `true` prevents the plot to be accounted during FitToView visible region recalculation.
- - new sample page: order property of the plot is changed by slider
+ - plot now has `isIgnoredByFitToView` property. Setting it to `true` prevents the plot to be accounted during FitToView visible region recalculation
+ - new sample page: order property of the plot is changed by slider.
 
 ### 1.5.5 (May 10, 2018)
 
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "interactive-data-display",
-  "version": "1.5.14",
+  "version": "1.5.15",
   "license": "Apache-2.0",
   "homepage": "https://github.com/predictionmachines/InteractiveDataDisplay/wiki",
   "description": "A JavaScript visualization library for dynamic data",
diff --git a/samples/PolylineInFigure.html b/samples/PolylineInFigure.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <meta http-equiv="X-UA-Compatible" content="IE=10; IE=Edge" />
+    <title>Polyline by Figure</title>
+    <link rel="stylesheet" type="text/css" href="../dist/idd.css" />
+    <link rel="stylesheet" type="text/css" href="../src/css/IDDTheme.css" />
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
+    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/3.1.2/rx.lite.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.4.0/svg.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script> 
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script> 
+    <script src="../dist/idd_knockout.js"></script>
+
+    <script type="text/javascript">
+        $(document).ready(function () {
+            var plot1 = InteractiveDataDisplay.asPlot($("#figure1"));            
+            var plot2 = InteractiveDataDisplay.asPlot($("#figure2"));            
+            var plot3 = InteractiveDataDisplay.asPlot($("#figure3"));
+        });
+    </script>
+</head>
+
+<body>
+    <div style="display: inline-grid">
+        
+        <b>Axes, grid lines and legend</b>
+        <div id="figure1" data-idd-plot="figure" style="width: 400px; height: 300px; float:left"
+            data-idd-navigation-enabled="true" data-idd-legend-enabled="true">
+
+            <div id="grid1" data-idd-plot='grid' data-idd-placement='center' data-idd-style='stroke: DarkGray; thickness: 1px;'
+                data-idd-xaxis='bottom_axis1' data-idd-yaxis='left_axis1'></div>
+
+            <div data-idd-plot="polyline" data-idd-style="stroke: red; thickness: 3" id="red line">
+                x   y
+                0   0
+                1   1
+                2   2
+            </div>
+            <div data-idd-plot="polyline" data-idd-style="stroke: green; thickness: 3" id="green line">
+                x   y
+                0   1
+                1   0
+                2   2
+            </div>
+
+            <div id="bottom_axis1" data-idd-axis="numeric" data-idd-placement="bottom" style="position: relative;"></div>
+            <div id="left_axis1" data-idd-axis="numeric" data-idd-placement="left" style="position: relative;"></div>
+        </div>
+
+        <b>Bottom axis and grid lines</b>
+        <div id="figure2" data-idd-plot="figure" style="width: 400px; height: 300px; float:left"
+            data-idd-navigation-enabled="true" data-idd-legend-enabled="false">
+
+            <div id="grid2" data-idd-plot='grid' data-idd-placement='center' data-idd-style='stroke: DarkGray; thickness: 1px;'
+                data-idd-xaxis='bottom_axis2'></div>
+
+            <div data-idd-plot="polyline" data-idd-style="stroke: blue; thickness: 3">
+                x   y
+                0   2
+                1   1
+                2   0
+            </div>
+
+            <div id="bottom_axis2" data-idd-axis="numeric" data-idd-placement="bottom" style="position: relative;"></div>
+        </div>
+
+        <b>Axes</b>
+        <div id="figure3" data-idd-plot="figure" style="width: 400px; height: 300px; float:left"
+            data-idd-navigation-enabled="true">
+
+            <div data-idd-plot="polyline" data-idd-style="stroke: yellow; thickness: 3">
+                x   y
+                0   1
+                1   2
+                2   0
+            </div>
+
+            <div id="bottom_axis3" data-idd-axis="numeric" data-idd-placement="bottom" style="position: relative;"></div>
+            <div id="left_axis3" data-idd-axis="numeric" data-idd-placement="left" style="position: relative;"></div>
+        </div>
+    </div>
+
+    
+</body>
+</html>
diff --git a/src/idd/idd.figure.js b/src/idd/idd.figure.js
@@ -57,14 +57,7 @@ InteractiveDataDisplay.Figure = function (div, master) {
     var topChildren = [];
     var rightChildren = [];
 
-    var addRelativeDiv = function (jqdiv, params, insertBeforeDiv) {
-        var packDiv = $("<div></div>");
-        packDiv.appendTo(that.host).addClass("idd-figure-container");
-        packDiv.content = jqdiv;
-        jqdiv.appendTo(packDiv);
-
-        var placement = jqdiv.attr("data-idd-placement");
-
+    var initAxis = function (jqdiv, params) {
         if (jqdiv.attr("data-idd-axis")) {
             var axis = InteractiveDataDisplay.InitializeAxis(jqdiv, params);
             jqdiv.axis = axis;
@@ -73,6 +66,15 @@ InteractiveDataDisplay.Figure = function (div, master) {
                 else that.master.fitToViewY();
             });
         }
+    }
+
+    var addRelativeDiv = function (jqdiv, params, insertBeforeDiv) {
+        var packDiv = $("<div></div>");
+        packDiv.appendTo(that.host).addClass("idd-figure-container");
+        packDiv.content = jqdiv;
+        jqdiv.appendTo(packDiv);
+
+        var placement = jqdiv.attr("data-idd-placement");
 
         var addDiv = function (packs) {
             if (insertBeforeDiv) {
@@ -165,6 +167,7 @@ InteractiveDataDisplay.Figure = function (div, master) {
         //packing element to figure containers in figure packs
         if (checkElementPosition(jqdiv)) {
             addRelativeDiv(jqdiv);
+            initAxis(jqdiv);
         }
     });
 
@@ -689,6 +692,35 @@ InteractiveDataDisplay.Figure = function (div, master) {
     };    
 
     this.requestUpdateLayout();
+    
+    if(div.attr("data-idd-navigation-enabled") === "true"){
+        var gestureSource = InteractiveDataDisplay.Gestures.getGesturesStream(this.centralPart);
+        this.navigation.gestureSource = gestureSource;
+    }
+
+    if(div.attr("data-idd-legend-enabled") === "true"){
+        var legendDiv = $("<div></div>").prependTo(this.centralPart); 
+        var _legend = new InteractiveDataDisplay.Legend(this, legendDiv, true);
+        legendDiv.css("float", "right");
+        Object.defineProperty(this, "legend", { get: function () { return _legend; }, configurable: false });
+
+        //Stop event propagation
+        InteractiveDataDisplay.Gestures.FullEventList.forEach(function (eventName) {
+            legendDiv[0].addEventListener(eventName, function (e) {
+                e.stopPropagation();
+            }, false);
+        });
+
+        var data = {};
+        InteractiveDataDisplay.Utils.readStyle(div, data);
+        var visible = data.isLegendVisible;
+        if (visible) {
+            if (visible == "true")
+                _legend.isVisible = true;
+            else if (visible == "false")
+                _legend.isVisible = false;
+        }
+    }
 }
 
 InteractiveDataDisplay.Figure.prototype = new InteractiveDataDisplay.Plot;

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "interactive-data-display",`
`3`		`- "version": "1.5.14",`
	`3`	`+ "version": "1.5.15",`
`4`	`4`	`"license": "Apache-2.0",`
`5`	`5`	`"homepage": "https://github.com/predictionmachines/InteractiveDataDisplay/wiki",`
`6`	`6`	`"description": "A JavaScript visualization library for dynamic data",`