Skip to content

Commit

Permalink
Trying react grid for dashes
Browse files Browse the repository at this point in the history
  • Loading branch information
@mistercrunch
mistercrunch committed May 19, 2016
1 parent 4738b01 commit fc1c0e8
Show file tree
Hide file tree
Showing 4 changed files with 35 additions and 117 deletions.
72 changes: 31 additions & 41 deletions caravel/assets/javascripts/dashboard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: {},
Expand All @@ -24,21 +26,8 @@ var Dashboard = function (dashboardData) {
px.initFavStars();
var sliceObjects = [],
dash = this;
dashboard.slices.forEach(function (data) {
if (data.error) {
var html = '<div class="alert alert-danger">' + data.error + '</div>';
$("#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);
Expand Down Expand Up @@ -128,31 +117,32 @@ var Dashboard = function (dashboardData) {
}
},
initDashboardView: function () {

class App extends React.Component {
render () {
return (
<div>
<h1>Caravel</h1>
<p>Extensible visualization tool for exploring data from any database.</p>
</div>
);
}
}
$("#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 (
<ReactGridLayout className="layout" cols={12} rowHeight={30} width={1200}>
<div className="widget" key="a" _grid={{x: 0, y: 0, w: 3, h: 6}}>aaa</div>
<div className="widget" key="b" _grid={{x: 4, y: 0, w: 3, h: 6}}>bbb</div>
<div className="widget" key="c" _grid={{x: 8, y: 0, w: 3, h: 6}}>ccc</div>
</ReactGridLayout>
)
}
}).data('gridster');

});
render(<Grid/>, document.getElementById('grid'));
/*
// Displaying widget controls on hover
$('.chart-header').hover(
function () {
Expand All @@ -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) {
Expand Down Expand Up @@ -286,6 +275,7 @@ var Dashboard = function (dashboardData) {
style.innerHTML = css;
}
}
*/
}
});
dashboard.init();
Expand All @@ -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' });
});
1 change: 1 addition & 0 deletions caravel/assets/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
11 changes: 2 additions & 9 deletions caravel/assets/stylesheets/dashboard.css
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,21 @@
.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;
border: 1px solid #ccc;
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;
Expand Down
68 changes: 1 addition & 67 deletions caravel/templates/caravel/dashboard.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,71 +97,5 @@ <h2>
</div>
</div>

<div class="gridster content_fluid" style="visibility: hidden;">
<ul>
{% for slice in dashboard.slices %}
{% set pos = pos_dict.get(slice.id, {}) %}


<li
id="slice_{{ slice.id }}"
slice_id="{{ slice.id }}"
class="widget {{ slice.viz_type }}"
data-row="{{ pos.row or 1 }}"
data-col="{{ pos.col or loop.index }}"
data-sizex="{{ pos.size_x or 4 }}"
data-sizey="{{ pos.size_y or 4 }}">

<div class="chart-header">
<div class="row">
<div class="col-md-12 text-center header">
{{ slice.slice_name }}
</div>
<div class="col-md-12 chart-controls">
<div class="pull-left">
<a title="Move chart" data-toggle="tooltip">
<i class="fa fa-arrows drag"></i>
</a>
<a class="refresh" title="Force refresh data" data-toggle="tooltip">
<i class="fa fa-repeat"></i>
</a>
</div>
<div class="pull-right">
{% if slice.description %}
<a title="Toggle chart description">
<i class="fa fa-info-circle slice_info" slice_id="{{ slice.id }}" title="{{ slice.description }}" data-toggle="tooltip"></i>
</a>
{% endif %}
<a href="{{ slice.edit_url }}" title="Edit chart" data-toggle="tooltip">
<i class="fa fa-pencil"></i>
</a>
<a href="{{ slice.slice_url }}" title="Explore chart" data-toggle="tooltip">
<i class="fa fa-share"></i>
</a>
<a class="remove-chart" title="Remove chart from dashboard" data-toggle="tooltip">
<i class="fa fa-close"></i>
</a>
</div>
</div>

</div>
</div>
<div
class="slice_description bs-callout bs-callout-default"
style="{{ 'display: none;' if "{}".format(slice.id) not in dashboard.metadata_dejson.expanded_slices }}">
{{ slice.description_markeddown | safe }}
</div>
<div class="row chart-container">
<input type="hidden" slice_id="{{ slice.id }}" value="false">
<div id="{{ slice.token }}" class="token col-md-12">
<img src="{{ url_for("static", filename="assets/images/loading.gif") }}" class="loading" alt="loading">
<div class="slice_container" id="{{ slice.token }}_con"></div>
</div>
</div>
</li>

{% endfor %}
</ul>
</div>
</div>
<div id="grid" style="visibility: hidden;"></div>
{% endblock %}

0 comments on commit fc1c0e8

Please sign in to comment.