Skip to content

A
atlas
Commit fb996d55 by kevalbhatt
Options

ATLAS-4022: Atlas UI: After d3 verion upgrade profile tab not working

parent 1b540056
Showing with 672 additions and 324 deletions
dashboardv2/gruntfile.js
......@@ -105,7 +105,6 @@ module.exports = function(grunt) {
'platform.js': { 'platform': 'platform' },
'query-builder.standalone.min.js': { 'jQuery-QueryBuilder/dist/js': 'jQueryQueryBuilder/js' },
'daterangepicker.js': { 'bootstrap-daterangepicker': 'bootstrap-daterangepicker/js' },
'nv.d3.min.js': { 'nvd3/build': 'nvd3' },
'jquery.sparkline.min.js': { 'jquery-sparkline': 'sparkline' },
'table-dragger.js': { 'table-dragger/dist': 'table-dragger' },
'jstree.min.js': { 'jstree/dist': 'jstree' },
......@@ -148,7 +147,6 @@ module.exports = function(grunt) {
}],
'query-builder.default.min.css': { 'jQuery-QueryBuilder/dist/css': 'jQueryQueryBuilder/css' },
'daterangepicker.css': { 'bootstrap-daterangepicker': 'bootstrap-daterangepicker/css' },
'nv.d3.min.css': { 'nvd3/build': 'nvd3/css' },
'pretty-checkbox.min.css': { 'pretty-checkbox/dist': 'pretty-checkbox/css' },
'dropzone.css': { 'dropzone/dist': "dropzone/css" }
}
......@@ -179,7 +177,6 @@ module.exports = function(grunt) {
],
'LICENSE.md': [{ 'backbone.babysitter': 'backbone-babysitter' },
{ 'backbone.wreqr': 'backbone-wreqr' },
{ 'nvd3': 'nvd3/' },
{ 'lossless-json': 'lossless-json' }
],
'license.txt': [{ 'backbone.marionette': 'backbone-marionette' }],
......
dashboardv2/package.json
......@@ -31,7 +31,7 @@
"bootstrap": "3.3.7",
"bootstrap-daterangepicker": "3.1.0",
"d3": "5.14.2",
"d3-tip": "0.6.8",
"d3-tip": "^0.7.1",
"dagre-d3": "0.6.4",
"dropzone": "5.7.0",
"font-awesome": "4.7.0",
......@@ -42,9 +42,9 @@
"jquery-sparkline": "2.4.0",
"jquery-steps": "1.1.0",
"jstree": "3.3.5",
"lossless-json": "1.0.4",
"moment": "2.21.0",
"moment-timezone": "0.5.14",
"nvd3": "1.8.5",
"platform": "1.3.4",
"pnotify": "3.2.0",
"pretty-checkbox": "3.0.3",
......@@ -52,8 +52,7 @@
"requirejs-text": "2.0.15",
"select2": "4.0.3",
"table-dragger": "1.0.2",
"underscore": "1.8.3",
"lossless-json": "1.0.4"
"underscore": "1.8.3"
},
"devDependencies": {
"grunt": "1.0.4",
......
dashboardv2/public/css/scss/graph.scss
......@@ -300,4 +300,42 @@ span#zoom_in {
padding-bottom: 15px;
}
}
}
.profile-bar {
fill: #38bb9b;
stroke: #38bb9b;
fill-opacity: 0.75;
}
.axislabel {
text-anchor: middle;
fill: #999;
font: 400 12px Arial, sans-serif;
}
.grid {
path,
line {
stroke: lightgrey;
stroke-opacity: 0.7;
shape-rendering: crispEdges;
}
}
.d3-tip {
table td {
padding: 2px 9px 2px 0;
vertical-align: middle;
&.value {
text-align: right;
font-weight: 700;
}
&.key {
font-weight: 400;
}
}
}
\ No newline at end of file
dashboardv2/public/index.html.tpl
......@@ -64,7 +64,6 @@
<link href="js/external_lib/pnotify/pnotify.custom.min.css?bust=<%- bust %>" rel="stylesheet">
<link href="js/libs/jQueryQueryBuilder/css/query-builder.default.min.css?bust=<%- bust %>" rel="stylesheet">
<link href="js/libs/bootstrap-daterangepicker/css/daterangepicker.css?bust=<%- bust %>" rel="stylesheet">
<link rel="stylesheet" href="js/libs/nvd3/css/nv.d3.min.css?bust=<%- bust %>">
<link href="js/libs/jstree/css/default-dark/default-dark-theme.min.css?bust=<%- bust %>" rel="stylesheet">
<link href="js/libs/pretty-checkbox/css/pretty-checkbox.min.css?bust=<%- bust %>" rel="stylesheet">
<link href="js/libs/dropzone/css/dropzone.css?bust=<%- bust %>" rel="stylesheet">
......
dashboardv2/public/js/main.js
......@@ -106,9 +106,6 @@ require.config({
'deps': ['d3'],
'exports': ['dagreD3']
},
'nvd3': {
'deps': ['d3']
},
'sparkline': {
'deps': ['jquery'],
'exports': ['sparkline']
......@@ -159,7 +156,6 @@ require.config({
'd3-tip': 'libs/d3/index',
'LineageHelper': 'external_lib/atlas-lineage/dist/index',
'dagreD3': 'libs/dagre-d3/dagre-d3.min',
'nvd3': 'libs/nvd3/nv.d3.min',
'sparkline': 'libs/sparkline/jquery.sparkline.min',
'tmpl': 'templates',
'requirejs.text': 'libs/requirejs-text/text',
......
dashboardv2/public/js/templates/profile/ProfileLayoutView_tmpl.html
......@@ -16,7 +16,7 @@
-->
<div id="r_profileTableOrColumnLayoutView">
{{#if profileData}}
<div class="fontLoader" style="display: block;">
<div class="fontLoader-relative show" style="display: block;">
<i class="fa fa-refresh fa-spin-custom"></i>
</div> {{else}} {{#ifCond typeName "==" "hive_db"}}
<h3>No Tables to Show!</h3> {{else}}
......
dashboardv2/public/js/views/graph/ProfileBarChart.js 0 → 100644
/**
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
define(["require", "d3", "d3-tip"], function(require, d3, d3Tip) {
"use strict";
var ProfileBarChart = {
render(options) {
var el = options.el,
type = options.data.key,
data = options.data.values,
formatValue = options.formatValue,
xAxisLabel = options.xAxisLabel,
yAxisLabel = options.yAxisLabel,
rotateXticks = options.rotateXticks,
onBarClick = options.onBarClick,
size = el.getBoundingClientRect(),
svg = d3.select(el),
margin = { top: 20, right: 30, bottom: 100, left: 80 },
width = size.width - margin.left - margin.right,
height = size.height - margin.top - margin.bottom;
// set the ranges
var x = d3.scaleBand().range([0, width]).padding(0.5);
var y = d3.scaleLinear().range([height, 0]);
var g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
x.domain(
data.map(function(d) {
return d.value;
})
);
y.domain([
0,
d3.max(data, function(d) {
return d.count;
})
]);
// gridlines in x axis function
function make_x_gridlines() {
return d3.axisBottom(x).ticks(5);
}
// gridlines in y axis function
function make_y_gridlines() {
return d3.axisLeft(y).ticks(5);
}
// add the X gridlines
g.append("g")
.attr("class", "grid")
.attr("transform", "translate(0," + height + ")")
.call(make_x_gridlines().tickSize(-height).tickFormat(""));
// add the Y gridlines
g.append("g").attr("class", "grid").call(make_y_gridlines().tickSize(-width).tickFormat(""));
// add the x Axis
var xAxis = g
.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
if (rotateXticks) {
xAxis.selectAll("text").style("text-anchor", "end").attr("dx", "-.8em").attr("dy", ".15em").attr("transform", "rotate(-45)");
}
// add the y Axis
g.append("g").call(d3.axisLeft(y).ticks(3, "s"));
g.append("text")
.attr("transform", "translate(" + width / 2 + " ," + (margin.top - 25) + ")")
.attr("class", "axislabel")
.text(xAxisLabel);
// text label for the y axis
g.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 - margin.left)
.attr("x", 0 - height / 2)
.attr("dy", "1em")
.attr("class", "axislabel")
.text(yAxisLabel);
var tooltip = d3Tip()
.attr("class", "d3-tip")
.offset([10, 0])
.html(function(d) {
console.log(d)
return '<table><thead><tr><td colspan="3"><strong class="x-value">' + d.value + '</strong></td></tr></thead><tbody><tr><td class="key">' + type + '</td><td class="value">' + d.count + '</td></tr></tbody></table>';
});
// append the rectangles for the bar chart
g.selectAll(".bar")
.data(data)
.enter()
.append("rect")
.attr("class", "profile-bar")
.attr("x", function(d) {
return x(d.value);
})
.attr("width", x.bandwidth())
.attr("y", d => { return height; })
.attr("height", 0)
.on("click", function(e) {
tooltip.hide();
if (onBarClick) {
onBarClick(e);
}
})
.on("mouseover", function(d) {
tooltip.show(d, this);
})
.on("mouseout", function(d) {
tooltip.hide();
})
.transition()
.duration(450)
.delay(function(d, i) {
return i * 50;
})
.attr("y", function(d) {
return y(d.count);
})
.attr("height", function(d) {
return height - y(d.count);
});
g.call(tooltip);
}
};
return ProfileBarChart;
});
\ No newline at end of file
dashboardv2/public/js/views/profile/ProfileTableLayoutView.js
......@@ -24,10 +24,12 @@ define(['require',
'utils/Messages',
'utils/Globals',
'moment',
'utils/UrlLinks',
'collection/VCommonList',
'models/VEntity',
'collection/VEntityList',
'd3',
'sparkline'
], function(require, Backbone, ProfileTableLayoutViewTmpl, VProfileList, Utils, Messages, Globals, moment, VCommonList, VEntity, sparkline) {
], function(require, Backbone, ProfileTableLayoutViewTmpl, VProfileList, Utils, Messages, Globals, moment, UrlLinks, VCommonList, VEntityList, d3, sparkline) {
'use strict';
var ProfileTableLayoutView = Backbone.Marionette.LayoutView.extend(
......@@ -57,67 +59,86 @@ define(['require',
initialize: function(options) {
_.extend(this, _.pick(options, 'profileData', 'guid', 'entityDetail'));
var that = this;
this.entityModel = new VEntity();
this.profileCollection = new VCommonList([], {
comparator: function(item) {
return item.get('position') || 999;
}
});
_.each(this.entityDetail.columns, function(obj) {
if (obj.attributes.profileData !== null) {
var profileObj = Utils.getProfileTabType(obj.attributes.profileData.attributes, true);
var changeValueObj = {}
if (profileObj && profileObj.type) {
if (profileObj.type === "numeric") {
changeValueObj['averageLength'] = 0;
changeValueObj['maxLength'] = 0;
}
if (profileObj.type === "string") {
changeValueObj['minValue'] = 0;
changeValueObj['maxValue'] = 0;
changeValueObj['meanValue'] = 0;
changeValueObj['medianValue'] = 0;
}
if (profileObj.type === "date") {
changeValueObj['averageLength'] = 0;
changeValueObj['maxLength'] = 0;
changeValueObj['minValue'] = 0;
changeValueObj['maxValue'] = 0;
changeValueObj['meanValue'] = 0;
changeValueObj['medianValue'] = 0;
}
}
that.profileCollection.fullCollection.add(_.extend({}, obj.attributes, obj.attributes.profileData.attributes, changeValueObj, { guid: obj.guid, position: obj.attributes ? obj.attributes.position : null }));
}
});
this.bindEvents();
},
onRender: function() {
this.fetchEntity();
this.renderTableLayoutView();
if (this.entityDetail) {
if (this.guid && this.entityDetail.name) {
this.$('.table_name .graphval').html('<b><a href="#!/detailPage/' + this.guid + '">' + this.entityDetail.name + '</a></b>');
}
var profileData = this.entityDetail.profileData;
if (profileData && profileData.attributes && profileData.attributes.rowCount) {
this.$('.rowValue .graphval').html('<b>' + d3.format("2s")(profileData.attributes.rowCount).replace('G', 'B') + '</b>');
}
this.$('.table_created .graphval').html('<b>' + (this.entityDetail.createTime ? moment(this.entityDetail.createTime).format("LL") : "--") + '</b>');
}
},
fetchEntity: function(argument) {
var that = this;
this.entityModel.getEntity(this.entityDetail.db.guid, {
success: function(data) {
var entity = data.entity;
if (entity.attributes) {
if (entity.guid) {
that.$('.db_name .graphval').html('<b><a href="#!/detailPage/' + entity.guid + "?profile=true" + '">' + Utils.getName(entity) + '</a></b>');
this.collection = new VEntityList([], {});
this.collection.url = UrlLinks.entitiesApiUrl({ guid: this.guid, minExtInfo: false });
this.collection.fetch({
success: function(response) {
that.entityObject = that.collection.first().toJSON();
var collectionJSON = that.entityObject.entity;
that.entityDetail = collectionJSON.attributes;
Utils.findAndMergeRefEntity({
attributeObject: collectionJSON.attributes,
referredEntities: that.entityObject.referredEntities
});
Utils.findAndMergeRefEntity({
attributeObject: collectionJSON.relationshipAttributes,
referredEntities: that.entityObject.referredEntities
});
var columns = collectionJSON.relationshipAttributes.columns || collectionJSON.attributes.columns,
db = collectionJSON.relationshipAttributes.db || collectionJSON.attributes.db
that.renderTableLayoutView();
if (that.entityDetail) {
if (that.guid && that.entityDetail.name) {
that.$('.table_name .graphval').html('<b><a href="#!/detailPage/' + that.guid + '">' + that.entityDetail.name + '</a></b>');
}
if (db) {
that.$('.db_name .graphval').html('<b><a href="#!/detailPage/' + db.guid + "?profile=true" + '">' + Utils.getName(db) + '</a></b>');
}
var profileData = that.entityDetail.profileData;
if (profileData && profileData.attributes && profileData.attributes.rowCount) {
that.$('.rowValue .graphval').html('<b>' + d3.format("2s")(profileData.attributes.rowCount).replace('G', 'B') + '</b>');
}
that.$('.table_created .graphval').html('<b>' + (that.entityDetail.createTime ? moment(that.entityDetail.createTime).format("LL") : "--") + '</b>');
}
}
_.each(columns, function(obj) {
if (obj.attributes && obj.attributes.profileData) {
var profileObj = Utils.getProfileTabType(obj.attributes.profileData.attributes, true);
var changeValueObj = {}
if (profileObj && profileObj.type) {
if (profileObj.type === "numeric") {
changeValueObj['averageLength'] = 0;
changeValueObj['maxLength'] = 0;
}
if (profileObj.type === "string") {
changeValueObj['minValue'] = 0;
changeValueObj['maxValue'] = 0;
changeValueObj['meanValue'] = 0;
changeValueObj['medianValue'] = 0;
}
if (profileObj.type === "date") {
changeValueObj['averageLength'] = 0;
changeValueObj['maxLength'] = 0;
changeValueObj['minValue'] = 0;
changeValueObj['maxValue'] = 0;
changeValueObj['meanValue'] = 0;
changeValueObj['medianValue'] = 0;
}
}
that.profileCollection.fullCollection.add(_.extend({}, obj.attributes, obj.attributes.profileData.attributes, changeValueObj, { guid: obj.guid, position: obj.attributes ? obj.attributes.position : null }));
}
});
},
reset: false
});
},
bindEvents: function() {
......
dashboardv3/gruntfile.js
......@@ -105,7 +105,6 @@ module.exports = function(grunt) {
'platform.js': { 'platform': 'platform' },
'query-builder.standalone.min.js': { 'jQuery-QueryBuilder/dist/js': 'jQueryQueryBuilder/js' },
'daterangepicker.js': { 'bootstrap-daterangepicker': 'bootstrap-daterangepicker/js' },
'nv.d3.min.js': { 'nvd3/build': 'nvd3' },
'jquery.sparkline.min.js': { 'jquery-sparkline': 'sparkline' },
'table-dragger.js': { 'table-dragger/dist': 'table-dragger' },
'jstree.min.js': { 'jstree/dist': 'jstree' },
......@@ -154,7 +153,6 @@ module.exports = function(grunt) {
}],
'query-builder.default.min.css': { 'jQuery-QueryBuilder/dist/css': 'jQueryQueryBuilder/css' },
'daterangepicker.css': { 'bootstrap-daterangepicker': 'bootstrap-daterangepicker/css' },
'nv.d3.min.css': { 'nvd3/build': 'nvd3/css' },
'pretty-checkbox.min.css': { 'pretty-checkbox/dist': 'pretty-checkbox/css' },
'dropzone.css': { 'dropzone/dist': "dropzone/css" }
}
......@@ -185,7 +183,6 @@ module.exports = function(grunt) {
],
'LICENSE.md': [{ 'backbone.babysitter': 'backbone-babysitter' },
{ 'backbone.wreqr': 'backbone-wreqr' },
{ 'nvd3': 'nvd3/' },
{ 'lossless-json': 'lossless-json' }
],
'license.txt': [{ 'backbone.marionette': 'backbone-marionette' }],
......
dashboardv3/package.json
......@@ -31,7 +31,7 @@
"bootstrap": "3.3.7",
"bootstrap-daterangepicker": "3.1.0",
"d3": "5.14.2",
"d3-tip": "0.6.8",
"d3-tip": "^0.7.1",
"dagre-d3": "0.6.4",
"dropzone": "5.7.0",
"font-awesome": "4.7.0",
......@@ -43,9 +43,9 @@
"jquery-steps": "1.1.0",
"jstree": "3.3.5",
"jstree-bootstrap-theme": "1.0.1",
"lossless-json": "1.0.4",
"moment": "2.21.0",
"moment-timezone": "0.5.14",
"nvd3": "1.8.5",
"platform": "1.3.4",
"pnotify": "3.2.0",
"pretty-checkbox": "3.0.3",
......@@ -53,8 +53,7 @@
"requirejs-text": "2.0.15",
"select2": "4.0.3",
"table-dragger": "1.0.2",
"underscore": "1.8.3",
"lossless-json": "1.0.4"
"underscore": "1.8.3"
},
"devDependencies": {
"grunt": "1.0.4",
......
dashboardv3/public/css/scss/graph.scss
......@@ -311,4 +311,42 @@ span#zoom_in {
padding-bottom: 15px;
}
}
}
.profile-bar {
fill: #38bb9b;
stroke: #38bb9b;
fill-opacity: 0.75;
}
.axislabel {
text-anchor: middle;
fill: #999;
font: 400 12px Arial, sans-serif;
}
.grid {
path,
line {
stroke: lightgrey;
stroke-opacity: 0.7;
shape-rendering: crispEdges;
}
}
.d3-tip {
table td {
padding: 2px 9px 2px 0;
vertical-align: middle;
&.value {
text-align: right;
font-weight: 700;
}
&.key {
font-weight: 400;
}
}
}
\ No newline at end of file
dashboardv3/public/index.html.tpl
......@@ -64,7 +64,6 @@
<link href="js/external_lib/pnotify/pnotify.custom.min.css?bust=<%- bust %>" rel="stylesheet" />
<link href="js/libs/jQueryQueryBuilder/css/query-builder.default.min.css?bust=<%- bust %>" rel="stylesheet" />
<link href="js/libs/bootstrap-daterangepicker/css/daterangepicker.css?bust=<%- bust %>" rel="stylesheet" />
<link rel="stylesheet" href="js/libs/nvd3/css/nv.d3.min.css?bust=<%- bust %>" />
<link href="js/libs/dropzone/css/dropzone.css?bust=<%- bust %>" rel="stylesheet">
<link href="js/libs/jstree/css/default/default-theme.min.css?bust=<%- bust %>" rel="stylesheet" />
<link href="js/libs/pretty-checkbox/css/pretty-checkbox.min.css?bust=<%- bust %>" rel="stylesheet" />
......
dashboardv3/public/js/main.js
......@@ -135,9 +135,6 @@ require.config({
'deps': ['d3'],
'exports': ['dagreD3']
},
'nvd3': {
'deps': ['d3']
},
'sparkline': {
'deps': ['jquery'],
'exports': ['sparkline']
......@@ -188,7 +185,6 @@ require.config({
'd3-tip': 'libs/d3/index',
'LineageHelper': 'external_lib/atlas-lineage/dist/index',
'dagreD3': 'libs/dagre-d3/dagre-d3.min',
'nvd3': 'libs/nvd3/nv.d3.min',
'sparkline': 'libs/sparkline/jquery.sparkline.min',
'tmpl': 'templates',
'requirejs.text': 'libs/requirejs-text/text',
......
dashboardv3/public/js/templates/profile/ProfileLayoutView_tmpl.html
......@@ -16,7 +16,7 @@
-->
<div id="r_profileTableOrColumnLayoutView">
{{#if profileData}}
<div class="fontLoader" style="display: block;">
<div class="fontLoader-relative show" style="display: block;">
<i class="fa fa-refresh fa-spin-custom"></i>
</div> {{else}} {{#ifCond typeName "==" "hive_db"}}
<h3>No Tables to Show!</h3> {{else}}
......
dashboardv3/public/js/views/graph/ProfileBarChart.js 0 → 100644
/**
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
define(["require", "d3", "d3-tip"], function(require, d3, d3Tip) {
"use strict";
var ProfileBarChart = {
render(options) {
var el = options.el,
type = options.data.key,
data = options.data.values,
formatValue = options.formatValue,
xAxisLabel = options.xAxisLabel,
yAxisLabel = options.yAxisLabel,
rotateXticks = options.rotateXticks,
onBarClick = options.onBarClick,
size = el.getBoundingClientRect(),
svg = d3.select(el),
margin = { top: 20, right: 30, bottom: 100, left: 80 },
width = size.width - margin.left - margin.right,
height = size.height - margin.top - margin.bottom;
// set the ranges
var x = d3.scaleBand().range([0, width]).padding(0.5);
var y = d3.scaleLinear().range([height, 0]);
var g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
x.domain(
data.map(function(d) {
return d.value;
})
);
y.domain([
0,
d3.max(data, function(d) {
return d.count;
})
]);
// gridlines in x axis function
function make_x_gridlines() {
return d3.axisBottom(x).ticks(5);
}
// gridlines in y axis function
function make_y_gridlines() {
return d3.axisLeft(y).ticks(5);
}
// add the X gridlines
g.append("g")
.attr("class", "grid")
.attr("transform", "translate(0," + height + ")")
.call(make_x_gridlines().tickSize(-height).tickFormat(""));
// add the Y gridlines
g.append("g").attr("class", "grid").call(make_y_gridlines().tickSize(-width).tickFormat(""));
// add the x Axis
var xAxis = g
.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
if (rotateXticks) {
xAxis.selectAll("text").style("text-anchor", "end").attr("dx", "-.8em").attr("dy", ".15em").attr("transform", "rotate(-45)");
}
// add the y Axis
g.append("g").call(d3.axisLeft(y).ticks(3, "s"));
g.append("text")
.attr("transform", "translate(" + width / 2 + " ," + (margin.top - 25) + ")")
.attr("class", "axislabel")
.text(xAxisLabel);
// text label for the y axis
g.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 - margin.left)
.attr("x", 0 - height / 2)
.attr("dy", "1em")
.attr("class", "axislabel")
.text(yAxisLabel);
var tooltip = d3Tip()
.attr("class", "d3-tip")
.offset([10, 0])
.html(function(d) {
console.log(d)
return '<table><thead><tr><td colspan="3"><strong class="x-value">' + d.value + '</strong></td></tr></thead><tbody><tr><td class="key">' + type + '</td><td class="value">' + d.count + '</td></tr></tbody></table>';
});
// append the rectangles for the bar chart
g.selectAll(".bar")
.data(data)
.enter()
.append("rect")
.attr("class", "profile-bar")
.attr("x", function(d) {
return x(d.value);
})
.attr("width", x.bandwidth())
.attr("y", d => { return height; })
.attr("height", 0)
.on("click", function(e) {
tooltip.hide();
if (onBarClick) {
onBarClick(e);
}
})
.on("mouseover", function(d) {
tooltip.show(d, this);
})
.on("mouseout", function(d) {
tooltip.hide();
})
.transition()
.duration(450)
.delay(function(d, i) {
return i * 50;
})
.attr("y", function(d) {
return y(d.count);
})
.attr("height", function(d) {
return height - y(d.count);
});
g.call(tooltip);
}
};
return ProfileBarChart;
});
\ No newline at end of file
dashboardv3/public/js/views/profile/ProfileTableLayoutView.js
......@@ -24,10 +24,12 @@ define(['require',
'utils/Messages',
'utils/Globals',
'moment',
'utils/UrlLinks',
'collection/VCommonList',
'models/VEntity',
'collection/VEntityList',
'd3',
'sparkline'
], function(require, Backbone, ProfileTableLayoutViewTmpl, VProfileList, Utils, Messages, Globals, moment, VCommonList, VEntity, sparkline) {
], function(require, Backbone, ProfileTableLayoutViewTmpl, VProfileList, Utils, Messages, Globals, moment, UrlLinks, VCommonList, VEntityList, d3, sparkline) {
'use strict';
var ProfileTableLayoutView = Backbone.Marionette.LayoutView.extend(
......@@ -57,67 +59,86 @@ define(['require',
initialize: function(options) {
_.extend(this, _.pick(options, 'profileData', 'guid', 'entityDetail'));
var that = this;
this.entityModel = new VEntity();
this.profileCollection = new VCommonList([], {
comparator: function(item) {
return item.get('position') || 999;
}
});
_.each(this.entityDetail.columns, function(obj) {
if (obj.attributes.profileData !== null) {
var profileObj = Utils.getProfileTabType(obj.attributes.profileData.attributes, true);
var changeValueObj = {}
if (profileObj && profileObj.type) {
if (profileObj.type === "numeric") {
changeValueObj['averageLength'] = 0;
changeValueObj['maxLength'] = 0;
}
if (profileObj.type === "string") {
changeValueObj['minValue'] = 0;
changeValueObj['maxValue'] = 0;
changeValueObj['meanValue'] = 0;
changeValueObj['medianValue'] = 0;
}
if (profileObj.type === "date") {
changeValueObj['averageLength'] = 0;
changeValueObj['maxLength'] = 0;
changeValueObj['minValue'] = 0;
changeValueObj['maxValue'] = 0;
changeValueObj['meanValue'] = 0;
changeValueObj['medianValue'] = 0;
}
}
that.profileCollection.fullCollection.add(_.extend({}, obj.attributes, obj.attributes.profileData.attributes, changeValueObj, { guid: obj.guid, position: obj.attributes ? obj.attributes.position : null }));
}
});
this.bindEvents();
},
onRender: function() {
this.fetchEntity();
this.renderTableLayoutView();
if (this.entityDetail) {
if (this.guid && this.entityDetail.name) {
this.$('.table_name .graphval').html('<b><a href="#!/detailPage/' + this.guid + '">' + this.entityDetail.name + '</a></b>');
}
var profileData = this.entityDetail.profileData;
if (profileData && profileData.attributes && profileData.attributes.rowCount) {
this.$('.rowValue .graphval').html('<b>' + d3.format("2s")(profileData.attributes.rowCount).replace('G', 'B') + '</b>');
}
this.$('.table_created .graphval').html('<b>' + (this.entityDetail.createTime ? moment(this.entityDetail.createTime).format("LL") : "--") + '</b>');
}
},
fetchEntity: function(argument) {
var that = this;
this.entityModel.getEntity(this.entityDetail.db.guid, {
success: function(data) {
var entity = data.entity;
if (entity.attributes) {
if (entity.guid) {
that.$('.db_name .graphval').html('<b><a href="#!/detailPage/' + entity.guid + "?profile=true" + '">' + Utils.getName(entity) + '</a></b>');
this.collection = new VEntityList([], {});
this.collection.url = UrlLinks.entitiesApiUrl({ guid: this.guid, minExtInfo: false });
this.collection.fetch({
success: function(response) {
that.entityObject = that.collection.first().toJSON();
var collectionJSON = that.entityObject.entity;
that.entityDetail = collectionJSON.attributes;
Utils.findAndMergeRefEntity({
attributeObject: collectionJSON.attributes,
referredEntities: that.entityObject.referredEntities
});
Utils.findAndMergeRefEntity({
attributeObject: collectionJSON.relationshipAttributes,
referredEntities: that.entityObject.referredEntities
});
var columns = collectionJSON.relationshipAttributes.columns || collectionJSON.attributes.columns,
db = collectionJSON.relationshipAttributes.db || collectionJSON.attributes.db
that.renderTableLayoutView();
if (that.entityDetail) {
if (that.guid && that.entityDetail.name) {
that.$('.table_name .graphval').html('<b><a href="#!/detailPage/' + that.guid + '">' + that.entityDetail.name + '</a></b>');
}
if (db) {
that.$('.db_name .graphval').html('<b><a href="#!/detailPage/' + db.guid + "?profile=true" + '">' + Utils.getName(db) + '</a></b>');
}
var profileData = that.entityDetail.profileData;
if (profileData && profileData.attributes && profileData.attributes.rowCount) {
that.$('.rowValue .graphval').html('<b>' + d3.format("2s")(profileData.attributes.rowCount).replace('G', 'B') + '</b>');
}
that.$('.table_created .graphval').html('<b>' + (that.entityDetail.createTime ? moment(that.entityDetail.createTime).format("LL") : "--") + '</b>');
}
}
_.each(columns, function(obj) {
if (obj.attributes && obj.attributes.profileData) {
var profileObj = Utils.getProfileTabType(obj.attributes.profileData.attributes, true);
var changeValueObj = {}
if (profileObj && profileObj.type) {
if (profileObj.type === "numeric") {
changeValueObj['averageLength'] = 0;
changeValueObj['maxLength'] = 0;
}
if (profileObj.type === "string") {
changeValueObj['minValue'] = 0;
changeValueObj['maxValue'] = 0;
changeValueObj['meanValue'] = 0;
changeValueObj['medianValue'] = 0;
}
if (profileObj.type === "date") {
changeValueObj['averageLength'] = 0;
changeValueObj['maxLength'] = 0;
changeValueObj['minValue'] = 0;
changeValueObj['maxValue'] = 0;
changeValueObj['meanValue'] = 0;
changeValueObj['medianValue'] = 0;
}
}
that.profileCollection.fullCollection.add(_.extend({}, obj.attributes, obj.attributes.profileData.attributes, changeValueObj, { guid: obj.guid, position: obj.attributes ? obj.attributes.position : null }));
}
});
},
reset: false
});
},
bindEvents: function() {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment