Merge branch 'release/v2.2.10'

BigFatDog · Jun 24, 2019 · 06b361e · 06b361e
2 parents 8bfe142 + 8d06744
commit 06b361e
Show file tree

Hide file tree

Showing 17 changed files with 360 additions and 120 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -70,6 +70,9 @@ <h1>Demo</h1>
         <li>
             <a href="slickgrid.html">Slick Grid</a>
         </li>
+        <li>
+            <a href="slickgrid-hidex-axis.html">Slick Grid with 1d multi and hide axis</a>
+        </li>
         <li>
             <a href="superformula.html">Superformula</a>
         </li>

diff --git a/demo/set-scale.html b/demo/set-scale.html
@@ -53,7 +53,6 @@
                 .brushMode("1D-axes")  // enable brushing
                 .on("brushend", function(){
                     console.log(pc.selected());
-                    console.log(pc2.selected());
                 });
 
             pc.scale('year', [30, 90]);

diff --git a/demo/slickgrid-hidex-axis.html b/demo/slickgrid-hidex-axis.html
@@ -0,0 +1,171 @@
+<!doctype html>
+<title>Linking to SlickGrid</title>
+
+<!-- SlickGrid -->
+<link rel="stylesheet" href="lib/slickgrid/slick.grid.css" type="text/css"/>
+<link rel="stylesheet" href="lib/slickgrid/jquery-ui-1.8.16.custom.css" type="text/css"/>
+<link rel="stylesheet" href="lib/slickgrid/examples.css" type="text/css"/>
+<link rel="stylesheet" href="lib/slickgrid/slick.pager.css" type="text/css"/>
+<script src="lib/slickgrid/jquery-1.7.min.js"></script>
+<script src="lib/slickgrid/jquery.event.drag-2.0.min.js"></script>
+<script src="lib/slickgrid/slick.core.js"></script>
+<script src="lib/slickgrid/slick.grid.js"></script>
+<script src="lib/slickgrid/slick.pager.js"></script>
+<script src="lib/slickgrid/slick.dataview.js"></script>
+<!-- End SlickGrid -->
+
+<link rel="stylesheet" type="text/css" href="./parcoords.css">
+<link rel="stylesheet" type="text/css" href="style.css">
+<style>
+    body, html {
+        margin: 0;
+        height: 100%;
+        width: 100%;
+        overflow: hidden;
+        font-size: 12px;
+    }
+    #grid, #pager {
+        position: fixed;
+        width: 100%;
+    }
+    #grid {
+        bottom: 0;
+        height: 300px;
+    }
+    #pager {
+        bottom: 306px;
+        height: 20px;
+    }
+    .slick-row:hover {
+        font-weight: bold;
+        color: #069;
+    }
+</style>
+<script src="lib/d3.v5.min.js"></script>
+<script src="./parcoords.standalone.js"></script>
+<script src="lib/divgrid.js"></script>
+<button id="show_ext">remove axes</button>
+<div id="example" class="parcoords" style="height:240px;"></div>
+<div id="grid"></div>
+<div id="pager"></div>
+<script id="brushing">
+
+    var parcoords = ParCoords()("#example")
+        .alpha(0.4)
+        .mode("queue") // progressive rendering
+        .height(d3.max([document.body.clientHeight-326, 220]))
+        .margin({
+            top: 36,
+            left: 0,
+            right: 0,
+            bottom: 16
+        });
+
+    d3.select('#show_ext').on('click', function() {
+        let hiddencolumns =['cylinders', 'power (hp)', 'year', "name"];
+        parcoords.hideAxis(hiddencolumns);
+        parcoords.render().updateAxes(0);
+    });
+
+
+    // load csv file and create the chart
+    d3.csv('data/cars.csv').then(function(data) {
+        // slickgrid needs each data element to have an id
+        data.forEach(function(d,i) { d.id = d.id || i; });
+
+        parcoords
+            .data(data)
+            .hideAxis(["name"])
+            .render()
+            .reorderable()
+            .brushMode("1D-axes-multi");
+
+        // setting up grid
+        var column_keys = d3.keys(data[0]);
+        var columns = column_keys.map(function(key,i) {
+            return {
+                id: key,
+                name: key,
+                field: key,
+                sortable: true
+            }
+        });
+
+        var options = {
+            enableCellNavigation: true,
+            enableColumnReorder: false,
+            multiColumnSort: false
+        };
+
+        var dataView = new Slick.Data.DataView();
+        var grid = new Slick.Grid("#grid", dataView, columns, options);
+        var pager = new Slick.Controls.Pager(dataView, grid, $("#pager"));
+
+        // wire up model events to drive the grid
+        dataView.onRowCountChanged.subscribe(function (e, args) {
+            grid.updateRowCount();
+            grid.render();
+        });
+
+        dataView.onRowsChanged.subscribe(function (e, args) {
+            grid.invalidateRows(args.rows);
+            grid.render();
+        });
+
+        // column sorting
+        var sortcol = column_keys[0];
+        var sortdir = 1;
+
+        function comparer(a, b) {
+            var x = a[sortcol], y = b[sortcol];
+            return (x == y ? 0 : (x > y ? 1 : -1));
+        }
+
+        // click header to sort grid column
+        grid.onSort.subscribe(function (e, args) {
+            sortdir = args.sortAsc ? 1 : -1;
+            sortcol = args.sortCol.field;
+
+            if ($.browser.msie && $.browser.version <= 8) {
+                dataView.fastSort(sortcol, args.sortAsc);
+            } else {
+                dataView.sort(comparer, args.sortAsc);
+            }
+        });
+
+        // highlight row in chart
+        grid.onMouseEnter.subscribe(function(e,args) {
+            // Get row number from grid
+            var grid_row = grid.getCellFromEvent(e).row;
+
+            // Get the id of the item referenced in grid_row
+            var item_id = grid.getDataItem(grid_row).id;
+            var d = parcoords.brushed() || data;
+
+            // Get the element position of the id in the data object
+            elementPos = d.map(function(x) {return x.id; }).indexOf(item_id);
+
+            // Highlight that element in the parallel coordinates graph
+            parcoords.highlight([d[elementPos]]);
+        });
+
+        grid.onMouseLeave.subscribe(function(e,args) {
+            parcoords.unhighlight();
+        });
+
+        // fill grid with data
+        gridUpdate(data);
+
+        // update grid on brush
+        parcoords.on("brush", function(d) {
+            gridUpdate(d);
+        });
+
+        function gridUpdate(data) {
+            dataView.beginUpdate();
+            dataView.setItems(data);
+            dataView.endUpdate();
+        };
+
+    });
+</script>
diff --git a/dist/parcoords.esm.js b/dist/parcoords.esm.js
diff --git a/dist/parcoords.esm.js.map b/dist/parcoords.esm.js.map
-Original file line number
+Diff line change
@@ Expand Up / @@ -70,6 +70,9 @@ <h1>Demo</h1> @@
             <li>
                 <a href="slickgrid.html">Slick Grid</a>
             </li>
+            <li>
+                <a href="slickgrid-hidex-axis.html">Slick Grid with 1d multi and hide axis</a>
+            </li>
             <li>
                 <a href="superformula.html">Superformula</a>
             </li>
@@ Expand Down @@