From fc1c0e880e66b0ef13ef40da37c370106e81b011 Mon Sep 17 00:00:00 2001 From: Maxime Beauchemin Date: Sat, 7 May 2016 13:21:04 -0700 Subject: [PATCH] Trying react grid for dashes --- caravel/assets/javascripts/dashboard.js | 72 ++++++++++-------------- caravel/assets/package.json | 1 + caravel/assets/stylesheets/dashboard.css | 11 +--- caravel/templates/caravel/dashboard.html | 68 +--------------------- 4 files changed, 35 insertions(+), 117 deletions(-) diff --git a/caravel/assets/javascripts/dashboard.js b/caravel/assets/javascripts/dashboard.js index 89b96f324d1d5..07b86934cdb23 100644 --- a/caravel/assets/javascripts/dashboard.js +++ b/caravel/assets/javascripts/dashboard.js @@ -10,11 +10,13 @@ require('brace/mode/css'); require('brace/theme/crimson_editor'); require('./caravel-select2.js'); -require('../node_modules/gridster/dist/jquery.gridster.min.css'); -require('../node_modules/gridster/dist/jquery.gridster.min.js'); require('../stylesheets/dashboard.css'); +var ReactGridLayout = require('react-grid-layout'); +import React from 'react'; +import { render } from 'react-dom'; + var Dashboard = function (dashboardData) { var dashboard = $.extend(dashboardData, { filters: {}, @@ -24,21 +26,8 @@ var Dashboard = function (dashboardData) { px.initFavStars(); var sliceObjects = [], dash = this; - dashboard.slices.forEach(function (data) { - if (data.error) { - var html = '
' + data.error + '
'; - $("#slice_" + data.slice_id).find('.token').html(html); - } else { - var slice = px.Slice(data, dash); - $("#slice_" + data.slice_id).find('a.refresh').click(function () { - slice.render(true); - }); - sliceObjects.push(slice); - } - }); - this.slices = sliceObjects; this.refreshTimer = null; - this.startPeriodicRender(0); + //this.startPeriodicRender(0); }, setFilter: function (slice_id, col, vals) { this.addFilter(slice_id, col, vals, false); @@ -128,31 +117,32 @@ var Dashboard = function (dashboardData) { } }, initDashboardView: function () { + + class App extends React.Component { + render () { + return ( +
+

Caravel

+

Extensible visualization tool for exploring data from any database.

+
+ ); + } + } + $("#grid").css('visibility', 'visible'); dashboard = this; - var gridster = $(".gridster ul").gridster({ - autogrow_cols: true, - widget_margins: [10, 10], - widget_base_dimensions: [95, 95], - draggable: { - handle: '.drag' - }, - resize: { - enabled: true, - stop: function (e, ui, element) { - dashboard.getSlice($(element).attr('slice_id')).resize(); - } - }, - serialize_params: function (_w, wgd) { - return { - slice_id: $(_w).attr('slice_id'), - col: wgd.col, - row: wgd.row, - size_x: wgd.size_x, - size_y: wgd.size_y - }; + var Grid = React.createClass({ + render: function () { + return ( + +
aaa
+
bbb
+
ccc
+ + ) } - }).data('gridster'); - + }); + render(, document.getElementById('grid')); + /* // Displaying widget controls on hover $('.chart-header').hover( function () { @@ -162,7 +152,6 @@ var Dashboard = function (dashboardData) { $(this).find('.chart-controls').fadeOut(300); } ); - $("div.gridster").css('visibility', 'visible'); $("#savedash").click(function () { var expanded_slices = {}; $.each($(".slice_info"), function (i, d) { @@ -286,6 +275,7 @@ var Dashboard = function (dashboardData) { style.innerHTML = css; } } + */ } }); dashboard.init(); @@ -294,5 +284,5 @@ var Dashboard = function (dashboardData) { $(document).ready(function () { Dashboard($('.dashboard').data('dashboard')); - $('[data-toggle="tooltip"]').tooltip({ container: 'body' }); + //$('[data-toggle="tooltip"]').tooltip({ container: 'body' }); }); diff --git a/caravel/assets/package.json b/caravel/assets/package.json index e6f5e0188cfd6..cb9912ad61aca 100644 --- a/caravel/assets/package.json +++ b/caravel/assets/package.json @@ -63,6 +63,7 @@ "mustache": "^2.2.1", "nvd3": "1.8.2", "react": "^0.14.7", + "react-grid-layout": "0.12.3", "react-bootstrap": "^0.28.3", "react-dom": "^0.14.7", "select2": "3.5", diff --git a/caravel/assets/stylesheets/dashboard.css b/caravel/assets/stylesheets/dashboard.css index e9376487fd547..1974535b94734 100644 --- a/caravel/assets/stylesheets/dashboard.css +++ b/caravel/assets/stylesheets/dashboard.css @@ -1,17 +1,14 @@ .dashboard a i { cursor: pointer; } -.dashboard i.drag { - cursor: move !important; -} -.dashboard .gridster .preview-holder { +.dashboard .grid .preview-holder { z-index: 1; position: absolute; background-color: #AAA; border-color: #AAA; opacity: 0.3; } -.gridster li.widget{ +div.widget{ list-style-type: none; border-radius: 0; margin: 5px; @@ -19,10 +16,6 @@ box-shadow: 2px 1px 5px -2px #aaa; background-color: #fff; } -.dashboard .gridster .dragging, -.dashboard .gridster .resizing { - opacity: 0.5; -} .dashboard img.loading { width: 20px; margin: 5px; diff --git a/caravel/templates/caravel/dashboard.html b/caravel/templates/caravel/dashboard.html index 5c8cbed67fb5b..7dec9de9a058b 100644 --- a/caravel/templates/caravel/dashboard.html +++ b/caravel/templates/caravel/dashboard.html @@ -97,71 +97,5 @@

- - + {% endblock %}