Repository: ignite Updated Branches: refs/heads/ignite-843 2be50b76b -> e7bce0923
IGNITE-843: WIP charts. Project: http://git-wip-us.apache.org/repos/asf/ignite/repo Commit: http://git-wip-us.apache.org/repos/asf/ignite/commit/e7bce092 Tree: http://git-wip-us.apache.org/repos/asf/ignite/tree/e7bce092 Diff: http://git-wip-us.apache.org/repos/asf/ignite/diff/e7bce092 Branch: refs/heads/ignite-843 Commit: e7bce0923c4c6121a3e0f1cbde3d3d3ce1d2759b Parents: 2be50b7 Author: Alexey Kuznetsov <[email protected]> Authored: Fri Sep 4 14:52:14 2015 +0700 Committer: Alexey Kuznetsov <[email protected]> Committed: Fri Sep 4 14:52:14 2015 +0700 ---------------------------------------------------------------------- .../src/main/js/controllers/sql-controller.js | 80 +++++++++----------- .../src/main/js/views/sql/sql.jade | 36 +++++---- 2 files changed, 55 insertions(+), 61 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ignite/blob/e7bce092/modules/control-center-web/src/main/js/controllers/sql-controller.js ---------------------------------------------------------------------- diff --git a/modules/control-center-web/src/main/js/controllers/sql-controller.js b/modules/control-center-web/src/main/js/controllers/sql-controller.js index 5be782f..a484d02 100644 --- a/modules/control-center-web/src/main/js/controllers/sql-controller.js +++ b/modules/control-center-web/src/main/js/controllers/sql-controller.js @@ -157,13 +157,15 @@ controlCenterModule.controller('sqlController', ['$scope', '$window','$controlle paragraph.edit = false }; + var id = 0; + $scope.addParagraph = function () { if (!$scope.notebook.paragraphs) $scope.notebook.paragraphs = []; var sz = $scope.notebook.paragraphs.length; - var paragraph = {name: 'Query' + (sz ==0 ? '' : sz), editor: true, query: '', pageSize: $scope.pageSizes[0], result: 'none'}; + var paragraph = {id: id++, name: 'Query' + (sz ==0 ? '' : sz), editor: true, query: '', pageSize: $scope.pageSizes[0], result: 'none'}; if ($scope.caches && $scope.caches.length > 0) paragraph.cache = $scope.caches[0]; @@ -376,6 +378,22 @@ controlCenterModule.controller('sqlController', ['$scope', '$window','$controlle return [{key: key, values: values}]; } + function _insertChart(paragraph, datum, chart) { + var chartId = 'chart-' + paragraph.id; + + // Remove previous chart. + d3.selectAll('#' + chartId + ' svg > *').remove(); + + // Insert new chart. + d3.select('#' + chartId + ' svg') + .datum(datum) + .call(chart); + + nv.utils.windowResize(chart.update); + + return chart; + } + function _barChart(paragraph) { var index = 0; @@ -392,14 +410,7 @@ controlCenterModule.controller('sqlController', ['$scope', '$window','$controlle return {label: (row.length > 1) ? row[1] : index++, value: _isNumber(row, 0, 0)} }); - d3.selectAll("#chart svg > *").remove(); - d3.select('#chart svg') - .datum([{key: 'bar', values: values}]) - .call(chart); - - nv.utils.windowResize(chart.update); - - return chart; + return _insertChart(paragraph, [{key: 'bar', values: values}], chart); }); } @@ -412,7 +423,7 @@ controlCenterModule.controller('sqlController', ['$scope', '$window','$controlle return (row.length > 1) ? row[1] : index++; }) .y(function (row) { - return (row.length > 0) ? row[0] : 0; + return _isNumber(row, 0, 0); }) .showLabels(true) .labelThreshold(.05) @@ -420,56 +431,35 @@ controlCenterModule.controller('sqlController', ['$scope', '$window','$controlle .donut(true) .donutRatio(0.35); - d3.selectAll("#chart svg > *").remove(); - d3.select('#chart svg') - .datum(paragraph.rows) - .call(chart); + return _insertChart(paragraph, paragraph.rows, chart); + }); + } - nv.utils.windowResize(chart.update); + function _x(d) { + return d.x; + } - return chart; - }); + function _y(d) { + return d.y; } function _lineChart(paragraph) { nv.addGraph(function() { var chart = nv.models.lineChart() - .x(function (d) { - return d.x; - }) - .y(function (d) { - return d.y; - }); - - d3.selectAll("#chart svg > *").remove(); - d3.select('#chart svg') - .datum(_datum('Line chart', paragraph.rows)) - .call(chart); + .x(_x) + .y(_y); - nv.utils.windowResize(chart.update); - - return chart; + return _insertChart(paragraph, _datum('Line chart', paragraph.rows), chart); }); } function _areaChart(paragraph) { nv.addGraph(function() { var chart = nv.models.stackedAreaChart() - .x(function (d) { - return d.x; - }) - .y(function (d) { - return d.y; - }); - - d3.selectAll("#chart svg > *").remove(); - d3.select('#chart svg') - .datum(_datum('Area chart', paragraph.rows)) - .call(chart); - - nv.utils.windowResize(chart.update); + .x(_x) + .y(_y); - return chart; + return _insertChart(paragraph, _datum('Area chart', paragraph.rows), chart); }); } }]); http://git-wip-us.apache.org/repos/asf/ignite/blob/e7bce092/modules/control-center-web/src/main/js/views/sql/sql.jade ---------------------------------------------------------------------- diff --git a/modules/control-center-web/src/main/js/views/sql/sql.jade b/modules/control-center-web/src/main/js/views/sql/sql.jade index fc02427..d35ce86 100644 --- a/modules/control-center-web/src/main/js/views/sql/sql.jade +++ b/modules/control-center-web/src/main/js/views/sql/sql.jade @@ -24,8 +24,11 @@ append scripts script(src='//cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.js') link(rel='stylesheet', href='//cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.css') -mixin btn-toolbar(btn, kind, tip) - i.btn.btn-default.fa(class=btn ng-click='setResult(paragraph, "#{kind}")' ng-class='{active: resultEq(paragraph, "#{kind}")}' bs-tooltip data-title=tip data-trigger='hover') +mixin btn-toolbar(btn, click, tip) + i.btn.btn-default.fa(class=btn ng-click=click bs-tooltip='' data-title=tip data-trigger='hover' data-placement='bottom') + +mixin btn-toolbar-data(btn, kind, tip) + i.btn.btn-default.fa(class=btn ng-click='setResult(paragraph, "#{kind}")' ng-class='{active: resultEq(paragraph, "#{kind}")}' bs-tooltip='' data-title=tip data-trigger='hover' data-placement='bottom') block container .row @@ -35,9 +38,9 @@ block container h1.col-sm-6(ng-hide='notebook.edit') label {{notebook.name}} .btn-group - i.btn.btn-default.fa.fa-pencil(ng-click='notebook.edit = true;notebook.edit_name = notebook.name' bs-tooltip data-title='Rename notebook' data-trigger='hover') - i.btn.btn-default.fa.fa-paragraph(ng-click='addParagraph()' bs-tooltip data-title='Add new paragraph' data-trigger='hover') - i.btn.btn-default.fa.fa-trash(ng-click='removeNotebook()' bs-tooltip data-title='Remove notebook' data-trigger='hover') + +btn-toolbar('fa-pencil', 'notebook.edit = true;notebook.edit_name = notebook.name', 'Rename notebook') + +btn-toolbar('fa-paragraph', 'addParagraph()', 'Add new paragraph') + +btn-toolbar('fa-trash', 'removeNotebook()', 'Remove notebook') h1.col-sm-6(ng-show='notebook.edit') input.sql-name-input(ng-model='notebook.edit_name' required on-enter='renameNotebook(notebook.edit_name)' on-escape='notebook.edit = false;') i.tipLabel.fa.fa-floppy-o(ng-show='notebook.edit_name' ng-click='renameNotebook(notebook.edit_name)' bs-tooltip data-title='Save notebook name' data-trigger='hover') @@ -49,18 +52,19 @@ block container div(ng-hide='paragraph.edit') a {{paragraph.name}} - .btn-group(ng-show='notebook.paragraphs.length > 1' ng-click='$event.stopPropagation();') - i.btn.btn-default.fa.fa-pencil(ng-click='paragraph.edit = true; paragraph.edit_name = paragraph.name;' bs-tooltip data-title='Rename paragraph' data-trigger='hover') - i.btn.btn-default.fa.fa-remove( ng-click='removeParagraph(paragraph)' bs-tooltip data-title='Remove paragraph' data-trigger='hover') + .btn-group(ng-hide='notebook.paragraphs.length > 1') + +btn-toolbar('fa-pencil', 'paragraph.edit = true; paragraph.edit_name = paragraph.name; $event.stopPropagation();', 'Rename paragraph') - i.btn.btn-default.fa.fa-pencil.margin-left-dflt(ng-hide='notebook.paragraphs.length > 1' ng-click='paragraph.edit = true; paragraph.edit_name = paragraph.name;$event.stopPropagation();' bs-tooltip data-title='Rename paragraph' data-trigger='hover') + .btn-group(ng-show='notebook.paragraphs.length > 1' ng-click='$event.stopPropagation();') + +btn-toolbar('fa-pencil', 'paragraph.edit = true; paragraph.edit_name = paragraph.name;', 'Rename paragraph') + +btn-toolbar('fa-remove', 'removeParagraph(paragraph)', 'Remove paragraph') - .btn-group(ng-model='paragraph.result' ng-click='$event.stopPropagation();' style='float: right' ) - +btn-toolbar('fa-table', 'table', 'Show table') - +btn-toolbar('fa-bar-chart', 'bar', 'Show bar chart') - +btn-toolbar('fa-pie-chart', 'pie', 'Show pie chart') - +btn-toolbar('fa-line-chart', 'line', 'Show line chart') - +btn-toolbar('fa-area-chart', 'area', 'Show area chart') + .btn-group(ng-model='paragraph.result' ng-click='$event.stopPropagation()' style='float: right') + +btn-toolbar-data('fa-table', 'table', 'Show data in tabular form.') + +btn-toolbar-data('fa-bar-chart', 'bar', 'Show bar chart.<br/>By default first column - X values, second column - Y values.<br/>In case of one column it will be treated as Y values.') + +btn-toolbar-data('fa-pie-chart', 'pie', 'Show pie chart.<br/>By default first column - pie values, second column - pie labels.<br/>In case of one column it will be treated as pies values.') + +btn-toolbar-data('fa-line-chart', 'line', 'Show line chart.<br/>By default first column - X values, second column - Y values.<br/>In case of one column it will be treated as Y values.') + +btn-toolbar-data('fa-area-chart', 'area', 'Show area chart.<br/>By default first column - X values, second column - Y values.<br/>In case of one column it will be treated as Y values.') div(ng-show='paragraph.edit') input.sql-name-input(ng-model='paragraph.edit_name' required ng-click='$event.stopPropagation();' on-enter='renameParagraph(paragraph, paragraph.edit_name)' on-escape='paragraph.edit = false') i.tipLabel.fa.fa-floppy-o(ng-show='paragraph.edit_name' ng-click='renameParagraph(paragraph, paragraph.edit_name); $event.stopPropagation();' bs-tooltip data-title='Save paragraph name' data-trigger='hover') @@ -108,7 +112,7 @@ block container tr(ng-repeat='row in displayedCollection track by $index') td(ng-repeat='val in row track by $index') {{ val }} .panel-body(ng-show='paragraph.result != "table" && paragraph.result != "none"') - #chart + div(id='chart-{{paragraph.id}}') svg .panel-body(ng-show='paragraph.result === "table" && !paragraph.rows') div(style='text-align: center;')
