mirror of
https://github.com/valitydev/redash.git
synced 2024-11-07 17:38:54 +00:00
Dashboard visualizations
This commit is contained in:
Amir Nissim
parent
5c7baf9e05
commit
c2cbcd3727
@ -201,7 +201,7 @@ class Widget(models.Model):
|
||||
'type': self.type,
|
||||
'width': self.width,
|
||||
'options': json.loads(self.options),
|
||||
'visualization_id': self.visualization_id,
|
||||
'visualization': self.visualization.to_dict(),
|
||||
'dashboard_id': self.dashboard_id
|
||||
}
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
|
||||
var WidgetCtrl = function ($scope, $http, $location, Query) {
|
||||
$scope.deleteWidget = function() {
|
||||
if (!confirm('Are you sure you want to remove "' + $scope.widget.query.name + '" from the dashboard?')) {
|
||||
if (!confirm('Are you sure you want to remove "' + $scope.widget.visualization.name + '" from the dashboard?')) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
$location.path('/queries/' + query.id);
|
||||
}
|
||||
|
||||
$scope.query = new Query($scope.widget.query);
|
||||
$scope.query = new Query($scope.widget.visualization.query);
|
||||
$scope.queryResult = $scope.query.getQueryResult();
|
||||
|
||||
$scope.updateTime = (new Date($scope.queryResult.getUpdatedAt())).toISOString();
|
||||
|
||||
@ -70,7 +70,7 @@
|
||||
// create new visualization
|
||||
// wait for query to load to populate with defaults
|
||||
var unwatch = scope.$watch('query', function(q) {
|
||||
if (q.id) {
|
||||
if (q && q.id) {
|
||||
unwatch();
|
||||
scope.vis = {
|
||||
'query_id': q.id,
|
||||
@ -168,7 +168,7 @@
|
||||
row: rowIndex+1,
|
||||
ySize: 1,
|
||||
xSize: widget.width,
|
||||
name: widget.query.name
|
||||
name: widget.visualization.name
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -230,14 +230,14 @@
|
||||
templateUrl: '/views/new_widget_form.html',
|
||||
replace: true,
|
||||
link: function($scope, element, attrs) {
|
||||
$scope.visReady = false;
|
||||
$scope.currentView = 'existing';
|
||||
$scope.widgetSizes = [{name: 'Regular', value: 1}, {name: 'Double', value: 2}];
|
||||
|
||||
var reset = function() {
|
||||
$scope.saveInProgress = false;
|
||||
$scope.widgetSize = 1;
|
||||
$scope.queryId = null;
|
||||
$scope.selectedVis = null;
|
||||
|
||||
}
|
||||
|
||||
reset();
|
||||
@ -247,18 +247,18 @@
|
||||
};
|
||||
|
||||
$scope.loadVisualizations = function() {
|
||||
if (!$scope.queryId) {
|
||||
return;
|
||||
}
|
||||
|
||||
Query.get({
|
||||
id: $scope.queryId
|
||||
}, function(query) {
|
||||
if (query) {
|
||||
// TODO
|
||||
$scope.visReady = true;
|
||||
var visualizations = query.getVisualizations();
|
||||
$scope.existing = visualizations = [
|
||||
{'name': 'vis1', 'type': 'Cohort'},
|
||||
{'name': 'vis2', 'type': 'Pivot Table'}
|
||||
];
|
||||
$scope.currentView = (visualizations.length) ? 'existing' : 'addNew';
|
||||
$scope.query = query;
|
||||
if(query.visualizations.length) {
|
||||
$scope.selectedVis = query.visualizations[0];
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
@ -267,7 +267,7 @@
|
||||
$scope.saveInProgress = true;
|
||||
|
||||
var widget = {
|
||||
'query_id': $scope.queryId,
|
||||
'visualization_id': $scope.selectedVis.id,
|
||||
'dashboard_id': $scope.dashboard.id,
|
||||
'options': {},
|
||||
'width': $scope.widgetSize
|
||||
|
||||
@ -1,5 +1,21 @@
|
||||
var renderers = angular.module('redash.renderers', []);
|
||||
|
||||
renderers.directive('visualizationRenderer', function() {
|
||||
return {
|
||||
restrict: 'E',
|
||||
scope: {
|
||||
visualization: '=',
|
||||
queryResult: '='
|
||||
},
|
||||
template: '<div ng-switch on="visualization.type">' +
|
||||
'<chart-renderer ng-switch-when="CHART" options="visualization.options" query-result="queryResult"></chart-renderer>' +
|
||||
'<grid-renderer ng-switch-when="GRID" options="visualization.options" query-result="queryResult"></grid-renderer>' +
|
||||
'<cohort-renderer ng-switch-when="COHORT" options="visualization.options" query-result="queryResult"></cohort-renderer>' +
|
||||
'</div>',
|
||||
replace: false
|
||||
}
|
||||
});
|
||||
|
||||
renderers.directive('chartRenderer', function () {
|
||||
return {
|
||||
restrict: 'E',
|
||||
|
||||
@ -280,12 +280,6 @@
|
||||
return [this.name, this.description, this.query].join('!#');
|
||||
};
|
||||
|
||||
Query.prototype.getVisualizations = function() {
|
||||
// TODO
|
||||
// not implemented
|
||||
return [];
|
||||
};
|
||||
|
||||
return Query;
|
||||
};
|
||||
|
||||
|
||||
@ -29,11 +29,8 @@
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div ng-switch on="widget.type" class="panel-body">
|
||||
<chart-renderer ng-switch-when="chart" query-result="queryResult"></chart-renderer>
|
||||
<grid-renderer ng-switch-when="grid" query-result="queryResult"></grid-renderer>
|
||||
<cohort-renderer ng-switch-when="cohort" query-result="queryResult"></cohort-renderer>
|
||||
</div>
|
||||
<visualization-renderer visualization="widget.visualization" query-result="queryResult"></visualization-renderer class="panel-body">
|
||||
|
||||
<div class="panel-footer">
|
||||
<span class="label label-default"
|
||||
tooltip="next update {{nextUpdateTime}} (query runtime: {{queryResult.getRuntime() | durationHumanize}})"
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<a class="link" ng-click="toggleAdvancedMode()">Advanced Mode</a>
|
||||
<a class="link" ng-click="toggleAdvancedMode()">Advanced</a>
|
||||
<textarea json-text class="form-control" rows="5" ng-model="vis.options" ng-show="advancedMode"></textarea>
|
||||
</div>
|
||||
|
||||
|
||||
@ -9,50 +9,25 @@
|
||||
<p>
|
||||
<form class="form-inline" role="form" ng-submit="loadVisualizations()">
|
||||
<div class="form-group">
|
||||
<input type="number" class="form-control" placeholder="Query Id" ng-model="queryId">
|
||||
<input class="form-control" placeholder="Query Id" ng-model="queryId">
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary" ng-disabled="!queryId">
|
||||
Load
|
||||
</button>
|
||||
<span class="glyphicon glyphicon-refresh"></span> Load
|
||||
</button>
|
||||
</form>
|
||||
</p>
|
||||
|
||||
<div ng-show="visReady">
|
||||
<div ng-show="query">
|
||||
<div class="form-group">
|
||||
<label for="">Choose Visualation</label>
|
||||
<div class="panel-group">
|
||||
<!-- Existing visualizations panel -->
|
||||
<div class="panel panel-default" ng-show="existing.length">
|
||||
<div class="panel-heading">
|
||||
<a ng-click="toggleView('existing')" href="#">
|
||||
Existing
|
||||
</a>
|
||||
</div>
|
||||
<div class="panel-collapse collapse" ng-class="{in: currentView=='existing'}">
|
||||
<div class="panel-body">
|
||||
<ul>
|
||||
<li ng-repeat="item in existing">
|
||||
{{item.name}} <span class="label label-info">{{item.type}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<select ng-model="selectedVis" ng-options="vis as vis.name group by vis.type for vis in query.visualizations" class="form-control"></select>
|
||||
</div>
|
||||
|
||||
<!-- add new visualizations panel -->
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<a ng-click="toggleView('addNew')" href="#">
|
||||
Add New
|
||||
</a>
|
||||
</div>
|
||||
<div class="panel-collapse collapse" ng-class="{in: currentView=='addNew'}">
|
||||
<div class="panel-body">
|
||||
<add-visulatization-form></add-visulatization-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<a ng-click="toggleView('addNew')" class="link">+ Add New</a>
|
||||
<div class="well" ng-show="currentView=='addNew'">
|
||||
<edit-visulatization-form query="query"></edit-visulatization-form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
|
||||
@ -74,9 +74,8 @@
|
||||
<div class="col-lg-6">
|
||||
<edit-visulatization-form vis="vis" query="query"></edit-visulatization-form>
|
||||
</div>
|
||||
<div class="col-lg-6" ng-switch="vis.type">
|
||||
<chart-renderer options="vis.options" query-result="queryResult" ng-switch-when="CHART"></chart-renderer>
|
||||
<cohort-renderer options="vis.options" query-result="queryResult" ng-switch-when="COHORT"></cohort-renderer>
|
||||
<div class="col-lg-6">
|
||||
<visualization-renderer visualization="vis" query-result="queryResult"></visualization-renderer>
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
@ -88,9 +87,8 @@
|
||||
<div class="col-lg-6">
|
||||
<edit-visulatization-form vis="newVisualization" query="query"></edit-visulatization-form>
|
||||
</div>
|
||||
<div class="col-lg-6" ng-switch="newVisualization.type">
|
||||
<chart-renderer options="newVisualization.options" query-result="queryResult" ng-switch-when="CHART"></chart-renderer>
|
||||
<cohort-renderer options="newVisualization.options" query-result="queryResult" ng-switch-when="COHORT"></cohort-renderer>
|
||||
<div class="col-lg-6">
|
||||
<visualization-renderer visualization="newVisualization" query-result="queryResult"></visualization-renderer>
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user