ATLAS-4022: Atlas UI: After d3 verion upgrade profile tab not working
diff --git a/dashboardv2/gruntfile.js b/dashboardv2/gruntfile.js
index 1f21df2..fa79a15 100644
--- a/dashboardv2/gruntfile.js
+++ b/dashboardv2/gruntfile.js
@@ -105,7 +105,6 @@
'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 @@
}],
'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 @@
],
'LICENSE.md': [{ 'backbone.babysitter': 'backbone-babysitter' },
{ 'backbone.wreqr': 'backbone-wreqr' },
- { 'nvd3': 'nvd3/' },
{ 'lossless-json': 'lossless-json' }
],
'license.txt': [{ 'backbone.marionette': 'backbone-marionette' }],
diff --git a/dashboardv2/package-lock.json b/dashboardv2/package-lock.json
index 6b8e15a..001de7d 100644
--- a/dashboardv2/package-lock.json
+++ b/dashboardv2/package-lock.json
@@ -792,11 +792,27 @@
"resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-1.0.7.tgz",
"integrity": "sha512-RKPAeXnkC59IDGD0Wu5mANy0Q2V28L+fNe65pOCXVdVuTJS3WPKaJlFHer32Rbh9gIo9qMuJXio8ra4+YmIymA=="
},
+ "d3-queue": {
+ "version": "3.0.7",
+ "resolved": "https://registry.npmjs.org/d3-queue/-/d3-queue-3.0.7.tgz",
+ "integrity": "sha1-yTouVLQXwJWRKdfXP2z31Ckudhg="
+ },
"d3-random": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/d3-random/-/d3-random-1.1.2.tgz",
"integrity": "sha512-6AK5BNpIFqP+cx/sreKzNjWbwZQCSUatxq+pPRmFIQaWuoD+NrbVWw7YWpHiXpCQ/NanKdtGDuB+VQcZDaEmYQ=="
},
+ "d3-request": {
+ "version": "1.0.6",
+ "resolved": "https://registry.npmjs.org/d3-request/-/d3-request-1.0.6.tgz",
+ "integrity": "sha512-FJj8ySY6GYuAJHZMaCQ83xEYE4KbkPkmxZ3Hu6zA1xxG2GD+z6P+Lyp+zjdsHf0xEbp2xcluDI50rCS855EQ6w==",
+ "requires": {
+ "d3-collection": "1",
+ "d3-dispatch": "1",
+ "d3-dsv": "1",
+ "xmlhttprequest": "1"
+ }
+ },
"d3-scale": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-2.2.2.tgz",
@@ -851,17 +867,251 @@
"integrity": "sha512-B1JDm0XDaQC+uvo4DT79H0XmBskgS3l6Ve+1SBCfxgmtIb1AVrPIoqd+nPSv+loMX8szQ0sVUhGngL7D5QPiXw=="
},
"d3-tip": {
- "version": "0.6.8",
- "resolved": "https://registry.npmjs.org/d3-tip/-/d3-tip-0.6.8.tgz",
- "integrity": "sha1-5bRJGuiYP95kbqSQCP9UKgM8Ciw=",
+ "version": "0.7.1",
+ "resolved": "https://registry.npmjs.org/d3-tip/-/d3-tip-0.7.1.tgz",
+ "integrity": "sha1-eMv1VPZ7cgpw47DxkeFM/+aM3Xk=",
"requires": {
- "d3": "^3.5.5"
+ "d3": "^4.2"
},
"dependencies": {
"d3": {
- "version": "3.5.17",
- "resolved": "https://registry.npmjs.org/d3/-/d3-3.5.17.tgz",
- "integrity": "sha1-vEZ0gAQ3iyGjYMn8fPUjF5B2L7g="
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/d3/-/d3-4.13.0.tgz",
+ "integrity": "sha512-l8c4+0SldjVKLaE2WG++EQlqD7mh/dmQjvi2L2lKPadAVC+TbJC4ci7Uk9bRi+To0+ansgsS0iWfPjD7DBy+FQ==",
+ "requires": {
+ "d3-array": "1.2.1",
+ "d3-axis": "1.0.8",
+ "d3-brush": "1.0.4",
+ "d3-chord": "1.0.4",
+ "d3-collection": "1.0.4",
+ "d3-color": "1.0.3",
+ "d3-dispatch": "1.0.3",
+ "d3-drag": "1.2.1",
+ "d3-dsv": "1.0.8",
+ "d3-ease": "1.0.3",
+ "d3-force": "1.1.0",
+ "d3-format": "1.2.2",
+ "d3-geo": "1.9.1",
+ "d3-hierarchy": "1.1.5",
+ "d3-interpolate": "1.1.6",
+ "d3-path": "1.0.5",
+ "d3-polygon": "1.0.3",
+ "d3-quadtree": "1.0.3",
+ "d3-queue": "3.0.7",
+ "d3-random": "1.1.0",
+ "d3-request": "1.0.6",
+ "d3-scale": "1.0.7",
+ "d3-selection": "1.3.0",
+ "d3-shape": "1.2.0",
+ "d3-time": "1.0.8",
+ "d3-time-format": "2.1.1",
+ "d3-timer": "1.0.7",
+ "d3-transition": "1.1.1",
+ "d3-voronoi": "1.1.2",
+ "d3-zoom": "1.7.1"
+ }
+ },
+ "d3-array": {
+ "version": "1.2.1",
+ "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-1.2.1.tgz",
+ "integrity": "sha512-CyINJQ0SOUHojDdFDH4JEM0552vCR1utGyLHegJHyYH0JyCpSeTPxi4OBqHMA2jJZq4NH782LtaJWBImqI/HBw=="
+ },
+ "d3-axis": {
+ "version": "1.0.8",
+ "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-1.0.8.tgz",
+ "integrity": "sha1-MacFoLU15ldZ3hQXOjGTMTfxjvo="
+ },
+ "d3-brush": {
+ "version": "1.0.4",
+ "resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-1.0.4.tgz",
+ "integrity": "sha1-AMLyOAGfJPbAoZSibUGhUw/+e8Q=",
+ "requires": {
+ "d3-dispatch": "1",
+ "d3-drag": "1",
+ "d3-interpolate": "1",
+ "d3-selection": "1",
+ "d3-transition": "1"
+ }
+ },
+ "d3-chord": {
+ "version": "1.0.4",
+ "resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-1.0.4.tgz",
+ "integrity": "sha1-fexPC6iG9xP+ERxF92NBT290yiw=",
+ "requires": {
+ "d3-array": "1",
+ "d3-path": "1"
+ }
+ },
+ "d3-collection": {
+ "version": "1.0.4",
+ "resolved": "https://registry.npmjs.org/d3-collection/-/d3-collection-1.0.4.tgz",
+ "integrity": "sha1-NC39EoN8kJdPM/HMCnha6lcNzcI="
+ },
+ "d3-color": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.0.3.tgz",
+ "integrity": "sha1-vHZD/KjlOoNH4vva/6I2eWtYUJs="
+ },
+ "d3-dispatch": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-1.0.3.tgz",
+ "integrity": "sha1-RuFJHqqbWMNY/OW+TovtYm54cfg="
+ },
+ "d3-drag": {
+ "version": "1.2.1",
+ "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-1.2.1.tgz",
+ "integrity": "sha512-Cg8/K2rTtzxzrb0fmnYOUeZHvwa4PHzwXOLZZPwtEs2SKLLKLXeYwZKBB+DlOxUvFmarOnmt//cU4+3US2lyyQ==",
+ "requires": {
+ "d3-dispatch": "1",
+ "d3-selection": "1"
+ }
+ },
+ "d3-dsv": {
+ "version": "1.0.8",
+ "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-1.0.8.tgz",
+ "integrity": "sha512-IVCJpQ+YGe3qu6odkPQI0KPqfxkhbP/oM1XhhE/DFiYmcXKfCRub4KXyiuehV1d4drjWVXHUWx4gHqhdZb6n/A==",
+ "requires": {
+ "commander": "2",
+ "iconv-lite": "0.4",
+ "rw": "1"
+ }
+ },
+ "d3-ease": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-1.0.3.tgz",
+ "integrity": "sha1-aL+8NJM4o4DETYrMT7wzBKotjA4="
+ },
+ "d3-force": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-1.1.0.tgz",
+ "integrity": "sha512-2HVQz3/VCQs0QeRNZTYb7GxoUCeb6bOzMp/cGcLa87awY9ZsPvXOGeZm0iaGBjXic6I1ysKwMn+g+5jSAdzwcg==",
+ "requires": {
+ "d3-collection": "1",
+ "d3-dispatch": "1",
+ "d3-quadtree": "1",
+ "d3-timer": "1"
+ }
+ },
+ "d3-format": {
+ "version": "1.2.2",
+ "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.2.2.tgz",
+ "integrity": "sha512-zH9CfF/3C8zUI47nsiKfD0+AGDEuM8LwBIP7pBVpyR4l/sKkZqITmMtxRp04rwBrlshIZ17XeFAaovN3++wzkw=="
+ },
+ "d3-geo": {
+ "version": "1.9.1",
+ "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-1.9.1.tgz",
+ "integrity": "sha512-l9wL/cEQkyZQYXw3xbmLsH3eQ5ij+icNfo4r0GrLa5rOCZR/e/3am45IQ0FvQ5uMsv+77zBRunLc9ufTWSQYFA==",
+ "requires": {
+ "d3-array": "1"
+ }
+ },
+ "d3-hierarchy": {
+ "version": "1.1.5",
+ "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-1.1.5.tgz",
+ "integrity": "sha1-ochFxC+Eoga88cAcAQmOpN2qeiY="
+ },
+ "d3-interpolate": {
+ "version": "1.1.6",
+ "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.1.6.tgz",
+ "integrity": "sha512-mOnv5a+pZzkNIHtw/V6I+w9Lqm9L5bG3OTXPM5A+QO0yyVMQ4W1uZhR+VOJmazaOZXri2ppbiZ5BUNWT0pFM9A==",
+ "requires": {
+ "d3-color": "1"
+ }
+ },
+ "d3-path": {
+ "version": "1.0.5",
+ "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.5.tgz",
+ "integrity": "sha1-JB6xhJvZ6egCHA0KeZ+KDo5EF2Q="
+ },
+ "d3-polygon": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-1.0.3.tgz",
+ "integrity": "sha1-FoiOkCZGCTPysXllKtN4Ik04LGI="
+ },
+ "d3-quadtree": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-1.0.3.tgz",
+ "integrity": "sha1-rHmH4+I/6AWpkPKOG1DTj8uCJDg="
+ },
+ "d3-random": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-1.1.0.tgz",
+ "integrity": "sha1-ZkLlBsb6OmSFldKyRpeIqNElKdM="
+ },
+ "d3-scale": {
+ "version": "1.0.7",
+ "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-1.0.7.tgz",
+ "integrity": "sha512-KvU92czp2/qse5tUfGms6Kjig0AhHOwkzXG0+PqIJB3ke0WUv088AHMZI0OssO9NCkXt4RP8yju9rpH8aGB7Lw==",
+ "requires": {
+ "d3-array": "^1.2.0",
+ "d3-collection": "1",
+ "d3-color": "1",
+ "d3-format": "1",
+ "d3-interpolate": "1",
+ "d3-time": "1",
+ "d3-time-format": "2"
+ }
+ },
+ "d3-selection": {
+ "version": "1.3.0",
+ "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-1.3.0.tgz",
+ "integrity": "sha512-qgpUOg9tl5CirdqESUAu0t9MU/t3O9klYfGfyKsXEmhyxyzLpzpeh08gaxBUTQw1uXIOkr/30Ut2YRjSSxlmHA=="
+ },
+ "d3-shape": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.2.0.tgz",
+ "integrity": "sha1-RdAVOPBkuv0F6j1tLLdI/YxB93c=",
+ "requires": {
+ "d3-path": "1"
+ }
+ },
+ "d3-time": {
+ "version": "1.0.8",
+ "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-1.0.8.tgz",
+ "integrity": "sha512-YRZkNhphZh3KcnBfitvF3c6E0JOFGikHZ4YqD+Lzv83ZHn1/u6yGenRU1m+KAk9J1GnZMnKcrtfvSktlA1DXNQ=="
+ },
+ "d3-time-format": {
+ "version": "2.1.1",
+ "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-2.1.1.tgz",
+ "integrity": "sha512-8kAkymq2WMfzW7e+s/IUNAtN/y3gZXGRrdGfo6R8NKPAA85UBTxZg5E61bR6nLwjPjj4d3zywSQe1CkYLPFyrw==",
+ "requires": {
+ "d3-time": "1"
+ }
+ },
+ "d3-timer": {
+ "version": "1.0.7",
+ "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-1.0.7.tgz",
+ "integrity": "sha512-vMZXR88XujmG/L5oB96NNKH5lCWwiLM/S2HyyAQLcjWJCloK5shxta4CwOFYLZoY3AWX73v8Lgv4cCAdWtRmOA=="
+ },
+ "d3-transition": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-1.1.1.tgz",
+ "integrity": "sha512-xeg8oggyQ+y5eb4J13iDgKIjUcEfIOZs2BqV/eEmXm2twx80wTzJ4tB4vaZ5BKfz7XsI/DFmQL5me6O27/5ykQ==",
+ "requires": {
+ "d3-color": "1",
+ "d3-dispatch": "1",
+ "d3-ease": "1",
+ "d3-interpolate": "1",
+ "d3-selection": "^1.1.0",
+ "d3-timer": "1"
+ }
+ },
+ "d3-voronoi": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/d3-voronoi/-/d3-voronoi-1.1.2.tgz",
+ "integrity": "sha1-Fodmfo8TotFYyAwUgMWinLDYlzw="
+ },
+ "d3-zoom": {
+ "version": "1.7.1",
+ "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-1.7.1.tgz",
+ "integrity": "sha512-sZHQ55DGq5BZBFGnRshUT8tm2sfhPHFnOlmPbbwTkAoPeVdRTkB4Xsf9GCY0TSHrTD8PeJPZGmP/TpGicwJDJQ==",
+ "requires": {
+ "d3-dispatch": "1",
+ "d3-drag": "1",
+ "d3-interpolate": "1",
+ "d3-selection": "1",
+ "d3-transition": "1"
+ }
}
}
},
@@ -2441,11 +2691,6 @@
"integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
"dev": true
},
- "nvd3": {
- "version": "1.8.5",
- "resolved": "https://registry.npmjs.org/nvd3/-/nvd3-1.8.5.tgz",
- "integrity": "sha1-lKDJj/HDNmtyH6eocFs8bp6va7Y="
- },
"oauth-sign": {
"version": "0.9.0",
"resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz",
@@ -3578,6 +3823,11 @@
"integrity": "sha1-ZGV4SKIP/F31g6Qq2KJ3tFErvE0=",
"dev": true
},
+ "xmlhttprequest": {
+ "version": "1.8.0",
+ "resolved": "https://registry.npmjs.org/xmlhttprequest/-/xmlhttprequest-1.8.0.tgz",
+ "integrity": "sha1-Z/4HXFwk/vOfnWX197f+dRcZaPw="
+ },
"y18n": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz",
diff --git a/dashboardv2/package.json b/dashboardv2/package.json
index a6b26b5..5e20147 100644
--- a/dashboardv2/package.json
+++ b/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",
diff --git a/dashboardv2/public/css/scss/graph.scss b/dashboardv2/public/css/scss/graph.scss
index cd5e220..19636c5 100644
--- a/dashboardv2/public/css/scss/graph.scss
+++ b/dashboardv2/public/css/scss/graph.scss
@@ -300,4 +300,42 @@
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
diff --git a/dashboardv2/public/index.html.tpl b/dashboardv2/public/index.html.tpl
index 7c6783d..55cf2e8 100644
--- a/dashboardv2/public/index.html.tpl
+++ b/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">
diff --git a/dashboardv2/public/js/main.js b/dashboardv2/public/js/main.js
index 10d62eb..64be5b4 100644
--- a/dashboardv2/public/js/main.js
+++ b/dashboardv2/public/js/main.js
@@ -106,9 +106,6 @@
'deps': ['d3'],
'exports': ['dagreD3']
},
- 'nvd3': {
- 'deps': ['d3']
- },
'sparkline': {
'deps': ['jquery'],
'exports': ['sparkline']
@@ -159,7 +156,6 @@
'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',
diff --git a/dashboardv2/public/js/templates/profile/ProfileLayoutView_tmpl.html b/dashboardv2/public/js/templates/profile/ProfileLayoutView_tmpl.html
index b1fba11..96adc9b 100644
--- a/dashboardv2/public/js/templates/profile/ProfileLayoutView_tmpl.html
+++ b/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}}
diff --git a/dashboardv2/public/js/views/graph/ProfileBarChart.js b/dashboardv2/public/js/views/graph/ProfileBarChart.js
new file mode 100644
index 0000000..d5a974d
--- /dev/null
+++ b/dashboardv2/public/js/views/graph/ProfileBarChart.js
@@ -0,0 +1,151 @@
+/**
+ * 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
diff --git a/dashboardv2/public/js/views/profile/ProfileColumnLayoutView.js b/dashboardv2/public/js/views/profile/ProfileColumnLayoutView.js
index 74e19c0..215391d 100644
--- a/dashboardv2/public/js/views/profile/ProfileColumnLayoutView.js
+++ b/dashboardv2/public/js/views/profile/ProfileColumnLayoutView.js
@@ -16,23 +16,25 @@
* limitations under the License.
*/
-define(['require',
- 'backbone',
- 'hbs!tmpl/profile/ProfileColumnLayoutView_tmpl',
- 'collection/VProfileList',
- 'utils/Utils',
- 'utils/Messages',
- 'utils/Globals',
- 'moment',
- 'models/VEntity',
- 'nvd3'
-], function(require, Backbone, ProfileColumnLayoutViewTmpl, VProfileList, Utils, Messages, Globals, moment, VEntity) {
- 'use strict';
+define([
+ "require",
+ "backbone",
+ "hbs!tmpl/profile/ProfileColumnLayoutView_tmpl",
+ "views/graph/ProfileBarChart",
+ "collection/VProfileList",
+ "utils/Utils",
+ "utils/Messages",
+ "utils/Globals",
+ "moment",
+ "models/VEntity",
+ "d3"
+], function(require, Backbone, ProfileColumnLayoutViewTmpl, ProfileBarChart, VProfileList, Utils, Messages, Globals, moment, VEntity, d3) {
+ "use strict";
var ProfileColumnLayoutView = Backbone.Marionette.LayoutView.extend(
/** @lends ProfileColumnLayoutView */
{
- _viewName: 'ProfileColumnLayoutView',
+ _viewName: "ProfileColumnLayoutView",
template: ProfileColumnLayoutViewTmpl,
@@ -47,12 +49,12 @@
},
/** ui selector cache */
ui: {
- "backToYear": '[data-id="backToYear"]'
+ backToYear: '[data-id="backToYear"]'
},
/** ui events hash */
events: function() {
var events = {};
- events["click " + this.ui.backToYear] = 'backToYear';
+ events["click " + this.ui.backToYear] = "backToYear";
return events;
},
/**
@@ -60,39 +62,42 @@
* @constructs
*/
initialize: function(options) {
- _.extend(this, _.pick(options, 'profileData', 'guid', 'entityDetail'));
+ _.extend(this, _.pick(options, "profileData", "guid", "entityDetail"));
this.typeObject = Utils.getProfileTabType(this.profileData.attributes);
this.entityModel = new VEntity();
- this.formatValue = d3.format("2s")
-
+ this.formatValue = d3.format(".0s");
},
fetchEntity: function(argument) {
var that = this;
this.entityModel.getEntity(this.entityDetail.table.guid, {
success: function(data) {
var entity = data.entity,
- profileData = entity && entity.attributes && entity.attributes.profileData ? entity.attributes.profileData.attributes : null;
+ profileData =
+ entity && entity.attributes && entity.attributes.profileData ? entity.attributes.profileData.attributes : null;
if (profileData && profileData.rowCount) {
- that.$('.rowValue').show();
- that.$('.rowValue .graphval').html('<b>' + that.formatValue(profileData.rowCount).replace('G', 'B') + '</b>');
+ that.$(".rowValue").show();
+ that.$(".rowValue .graphval").html("<b>" + that.formatValue(profileData.rowCount).replace("G", "B") + "</b>");
}
if (entity.attributes) {
if (entity.guid) {
- that.$('.table_name .graphval').html('<b><a href="#!/detailPage/' + entity.guid + "?profile=true" + '">' + Utils.getName(entity) + '</a></b>');
+ that.$(".table_name .graphval").html(
+ '<b><a href="#!/detailPage/' + entity.guid + "?profile=true" + '">' + Utils.getName(entity) + "</a></b>"
+ );
}
- that.$('.table_created .graphval').html('<b>' + moment(entity.attributes.createTime).format("LL") + '</b>');
+ that.$(".table_created .graphval").html("<b>" + moment(entity.attributes.createTime).format("LL") + "</b>");
}
}
});
},
bindEvents: function() {},
onRender: function() {
- this.renderGraph();
this.fetchEntity();
if (this.typeObject && this.typeObject.type === "date") {
- this.$('svg').addClass('dateType');
+ this.$("svg").addClass("dateType");
}
-
+ },
+ onShow: function() {
+ this.renderGraph();
},
renderGraph: function(argument) {
if (!this.typeObject) {
@@ -100,106 +105,71 @@
}
var that = this,
profileData = this.profileData.attributes;
- this.data = [{
+ this.data = {
key: this.typeObject.label,
values: this.typeObject.actualObj || []
- }];
- nv.addGraph(function() {
- that.chart = nv.models.multiBarChart()
- .x(function(d) {
- return d.value || d.year
- }) //Specify the data accessors.
- .y(function(d) {
- return d.count
- })
- .height(220)
- .stacked(false)
- .showControls(false)
- .reduceXTicks(false)
- .staggerLabels(true)
- .duration(1000)
- .groupSpacing(0.6)
- .wrapLabels(true)
- .showLegend(false);
- if (that.typeObject.type !== "date") {
- that.chart.rotateLabels(-45);
- }
- that.chart.color(["#38BB9B"]);
-
- that.chart.yAxis.tickFormat(function(d) {
- return that.formatValue(d).replace('G', 'B');
- });
- that.chart.xAxis
- .axisLabel(that.typeObject.xAxisLabel)
- .axisLabelDistance(-185);
- that.chart.yAxis
- .axisLabel(that.typeObject.yAxisLabel)
- .axisLabelDistance(-5);
- that.chart.margin({
- right: 30,
- left: 80,
- top: 20,
- bottom: 60
- });
- if (that.typeObject.type === "date") {
- that.chart.multibar.dispatch.elementClick = function(e) {
- if (!that.monthsData) {
- that.createMonthData(e.data.monthlyCounts)
- }
- }
- }
- that.svg = d3.select(that.$('svg')[0]).datum(that.data)
- that.svg.transition().duration(0).call(that.chart);
-
- nv.utils.windowResize(that.chart.update);
-
- return that.chart;
- });
-
+ };
+ this.updateGraph(this.data);
},
backToYear: function() {
this.ui.backToYear.hide();
- this.$('.profileGraphDetail').show();
+ this.$(".profileGraphDetail").show();
this.monthsData = null;
this.updateGraph(this.data);
},
createMonthData: function(data) {
var monthsKey = {
- "1": "Jan",
- "2": "Feb",
- "3": "Mar",
- "4": "Apr",
- "5": "May",
- "6": "Jun",
- "7": "Jul",
- "8": "Aug",
- "9": "Sep",
- "10": "Oct",
- "11": "Nov",
- "12": "Dec"
+ 1: "Jan",
+ 2: "Feb",
+ 3: "Mar",
+ 4: "Apr",
+ 5: "May",
+ 6: "Jun",
+ 7: "Jul",
+ 8: "Aug",
+ 9: "Sep",
+ 10: "Oct",
+ 11: "Nov",
+ 12: "Dec"
},
i = 1;
- this.monthsData = [{
+ this.monthsData = {
key: this.typeObject.label,
values: []
- }];
+ };
while (i <= 12) {
- this.monthsData[0].values.push({
+ this.monthsData.values.push({
value: monthsKey[i],
count: data[i] || 0
});
i++;
}
this.ui.backToYear.show();
- this.$('.profileGraphDetail').hide();
+ this.$(".profileGraphDetail").hide();
this.updateGraph(this.monthsData);
-
},
updateGraph: function(data) {
- this.svg.datum(data).transition().duration(0).call(this.chart);
- },
- });
+ var that = this;
+ this.$("svg").empty();
+ ProfileBarChart.render({
+ el: this.$("svg")[0],
+ data: data,
+ xAxisLabel: this.typeObject.xAxisLabel,
+ yAxisLabel: this.typeObject.yAxisLabel,
+ formatValue: this.formatValue,
+ rotateXticks: this.typeObject.type !== "date",
+ onBarClick: function(e) {
+ if (that.typeObject.type === "date") {
+ if (!that.monthsData) {
+ that.createMonthData(e.monthlyCounts);
+ }
+ }
+ }
+ });
+ }
+ }
+ );
return ProfileColumnLayoutView;
});
\ No newline at end of file
diff --git a/dashboardv2/public/js/views/profile/ProfileTableLayoutView.js b/dashboardv2/public/js/views/profile/ProfileTableLayoutView.js
index ada7e62..54dabe2 100644
--- a/dashboardv2/public/js/views/profile/ProfileTableLayoutView.js
+++ b/dashboardv2/public/js/views/profile/ProfileTableLayoutView.js
@@ -24,10 +24,12 @@
'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 @@
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() {
diff --git a/dashboardv3/gruntfile.js b/dashboardv3/gruntfile.js
index 62d8ddf..b1b7b59 100644
--- a/dashboardv3/gruntfile.js
+++ b/dashboardv3/gruntfile.js
@@ -105,7 +105,6 @@
'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 @@
}],
'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 @@
],
'LICENSE.md': [{ 'backbone.babysitter': 'backbone-babysitter' },
{ 'backbone.wreqr': 'backbone-wreqr' },
- { 'nvd3': 'nvd3/' },
{ 'lossless-json': 'lossless-json' }
],
'license.txt': [{ 'backbone.marionette': 'backbone-marionette' }],
diff --git a/dashboardv3/package-lock.json b/dashboardv3/package-lock.json
index 732f20d..f681b6d 100644
--- a/dashboardv3/package-lock.json
+++ b/dashboardv3/package-lock.json
@@ -792,11 +792,27 @@
"resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-1.0.7.tgz",
"integrity": "sha512-RKPAeXnkC59IDGD0Wu5mANy0Q2V28L+fNe65pOCXVdVuTJS3WPKaJlFHer32Rbh9gIo9qMuJXio8ra4+YmIymA=="
},
+ "d3-queue": {
+ "version": "3.0.7",
+ "resolved": "https://registry.npmjs.org/d3-queue/-/d3-queue-3.0.7.tgz",
+ "integrity": "sha1-yTouVLQXwJWRKdfXP2z31Ckudhg="
+ },
"d3-random": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/d3-random/-/d3-random-1.1.2.tgz",
"integrity": "sha512-6AK5BNpIFqP+cx/sreKzNjWbwZQCSUatxq+pPRmFIQaWuoD+NrbVWw7YWpHiXpCQ/NanKdtGDuB+VQcZDaEmYQ=="
},
+ "d3-request": {
+ "version": "1.0.6",
+ "resolved": "https://registry.npmjs.org/d3-request/-/d3-request-1.0.6.tgz",
+ "integrity": "sha512-FJj8ySY6GYuAJHZMaCQ83xEYE4KbkPkmxZ3Hu6zA1xxG2GD+z6P+Lyp+zjdsHf0xEbp2xcluDI50rCS855EQ6w==",
+ "requires": {
+ "d3-collection": "1",
+ "d3-dispatch": "1",
+ "d3-dsv": "1",
+ "xmlhttprequest": "1"
+ }
+ },
"d3-scale": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-2.2.2.tgz",
@@ -851,17 +867,251 @@
"integrity": "sha512-B1JDm0XDaQC+uvo4DT79H0XmBskgS3l6Ve+1SBCfxgmtIb1AVrPIoqd+nPSv+loMX8szQ0sVUhGngL7D5QPiXw=="
},
"d3-tip": {
- "version": "0.6.8",
- "resolved": "https://registry.npmjs.org/d3-tip/-/d3-tip-0.6.8.tgz",
- "integrity": "sha1-5bRJGuiYP95kbqSQCP9UKgM8Ciw=",
+ "version": "0.7.1",
+ "resolved": "https://registry.npmjs.org/d3-tip/-/d3-tip-0.7.1.tgz",
+ "integrity": "sha1-eMv1VPZ7cgpw47DxkeFM/+aM3Xk=",
"requires": {
- "d3": "^3.5.5"
+ "d3": "^4.2"
},
"dependencies": {
"d3": {
- "version": "3.5.17",
- "resolved": "https://registry.npmjs.org/d3/-/d3-3.5.17.tgz",
- "integrity": "sha1-vEZ0gAQ3iyGjYMn8fPUjF5B2L7g="
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/d3/-/d3-4.13.0.tgz",
+ "integrity": "sha512-l8c4+0SldjVKLaE2WG++EQlqD7mh/dmQjvi2L2lKPadAVC+TbJC4ci7Uk9bRi+To0+ansgsS0iWfPjD7DBy+FQ==",
+ "requires": {
+ "d3-array": "1.2.1",
+ "d3-axis": "1.0.8",
+ "d3-brush": "1.0.4",
+ "d3-chord": "1.0.4",
+ "d3-collection": "1.0.4",
+ "d3-color": "1.0.3",
+ "d3-dispatch": "1.0.3",
+ "d3-drag": "1.2.1",
+ "d3-dsv": "1.0.8",
+ "d3-ease": "1.0.3",
+ "d3-force": "1.1.0",
+ "d3-format": "1.2.2",
+ "d3-geo": "1.9.1",
+ "d3-hierarchy": "1.1.5",
+ "d3-interpolate": "1.1.6",
+ "d3-path": "1.0.5",
+ "d3-polygon": "1.0.3",
+ "d3-quadtree": "1.0.3",
+ "d3-queue": "3.0.7",
+ "d3-random": "1.1.0",
+ "d3-request": "1.0.6",
+ "d3-scale": "1.0.7",
+ "d3-selection": "1.3.0",
+ "d3-shape": "1.2.0",
+ "d3-time": "1.0.8",
+ "d3-time-format": "2.1.1",
+ "d3-timer": "1.0.7",
+ "d3-transition": "1.1.1",
+ "d3-voronoi": "1.1.2",
+ "d3-zoom": "1.7.1"
+ }
+ },
+ "d3-array": {
+ "version": "1.2.1",
+ "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-1.2.1.tgz",
+ "integrity": "sha512-CyINJQ0SOUHojDdFDH4JEM0552vCR1utGyLHegJHyYH0JyCpSeTPxi4OBqHMA2jJZq4NH782LtaJWBImqI/HBw=="
+ },
+ "d3-axis": {
+ "version": "1.0.8",
+ "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-1.0.8.tgz",
+ "integrity": "sha1-MacFoLU15ldZ3hQXOjGTMTfxjvo="
+ },
+ "d3-brush": {
+ "version": "1.0.4",
+ "resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-1.0.4.tgz",
+ "integrity": "sha1-AMLyOAGfJPbAoZSibUGhUw/+e8Q=",
+ "requires": {
+ "d3-dispatch": "1",
+ "d3-drag": "1",
+ "d3-interpolate": "1",
+ "d3-selection": "1",
+ "d3-transition": "1"
+ }
+ },
+ "d3-chord": {
+ "version": "1.0.4",
+ "resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-1.0.4.tgz",
+ "integrity": "sha1-fexPC6iG9xP+ERxF92NBT290yiw=",
+ "requires": {
+ "d3-array": "1",
+ "d3-path": "1"
+ }
+ },
+ "d3-collection": {
+ "version": "1.0.4",
+ "resolved": "https://registry.npmjs.org/d3-collection/-/d3-collection-1.0.4.tgz",
+ "integrity": "sha1-NC39EoN8kJdPM/HMCnha6lcNzcI="
+ },
+ "d3-color": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.0.3.tgz",
+ "integrity": "sha1-vHZD/KjlOoNH4vva/6I2eWtYUJs="
+ },
+ "d3-dispatch": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-1.0.3.tgz",
+ "integrity": "sha1-RuFJHqqbWMNY/OW+TovtYm54cfg="
+ },
+ "d3-drag": {
+ "version": "1.2.1",
+ "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-1.2.1.tgz",
+ "integrity": "sha512-Cg8/K2rTtzxzrb0fmnYOUeZHvwa4PHzwXOLZZPwtEs2SKLLKLXeYwZKBB+DlOxUvFmarOnmt//cU4+3US2lyyQ==",
+ "requires": {
+ "d3-dispatch": "1",
+ "d3-selection": "1"
+ }
+ },
+ "d3-dsv": {
+ "version": "1.0.8",
+ "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-1.0.8.tgz",
+ "integrity": "sha512-IVCJpQ+YGe3qu6odkPQI0KPqfxkhbP/oM1XhhE/DFiYmcXKfCRub4KXyiuehV1d4drjWVXHUWx4gHqhdZb6n/A==",
+ "requires": {
+ "commander": "2",
+ "iconv-lite": "0.4",
+ "rw": "1"
+ }
+ },
+ "d3-ease": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-1.0.3.tgz",
+ "integrity": "sha1-aL+8NJM4o4DETYrMT7wzBKotjA4="
+ },
+ "d3-force": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-1.1.0.tgz",
+ "integrity": "sha512-2HVQz3/VCQs0QeRNZTYb7GxoUCeb6bOzMp/cGcLa87awY9ZsPvXOGeZm0iaGBjXic6I1ysKwMn+g+5jSAdzwcg==",
+ "requires": {
+ "d3-collection": "1",
+ "d3-dispatch": "1",
+ "d3-quadtree": "1",
+ "d3-timer": "1"
+ }
+ },
+ "d3-format": {
+ "version": "1.2.2",
+ "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.2.2.tgz",
+ "integrity": "sha512-zH9CfF/3C8zUI47nsiKfD0+AGDEuM8LwBIP7pBVpyR4l/sKkZqITmMtxRp04rwBrlshIZ17XeFAaovN3++wzkw=="
+ },
+ "d3-geo": {
+ "version": "1.9.1",
+ "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-1.9.1.tgz",
+ "integrity": "sha512-l9wL/cEQkyZQYXw3xbmLsH3eQ5ij+icNfo4r0GrLa5rOCZR/e/3am45IQ0FvQ5uMsv+77zBRunLc9ufTWSQYFA==",
+ "requires": {
+ "d3-array": "1"
+ }
+ },
+ "d3-hierarchy": {
+ "version": "1.1.5",
+ "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-1.1.5.tgz",
+ "integrity": "sha1-ochFxC+Eoga88cAcAQmOpN2qeiY="
+ },
+ "d3-interpolate": {
+ "version": "1.1.6",
+ "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.1.6.tgz",
+ "integrity": "sha512-mOnv5a+pZzkNIHtw/V6I+w9Lqm9L5bG3OTXPM5A+QO0yyVMQ4W1uZhR+VOJmazaOZXri2ppbiZ5BUNWT0pFM9A==",
+ "requires": {
+ "d3-color": "1"
+ }
+ },
+ "d3-path": {
+ "version": "1.0.5",
+ "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.5.tgz",
+ "integrity": "sha1-JB6xhJvZ6egCHA0KeZ+KDo5EF2Q="
+ },
+ "d3-polygon": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-1.0.3.tgz",
+ "integrity": "sha1-FoiOkCZGCTPysXllKtN4Ik04LGI="
+ },
+ "d3-quadtree": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-1.0.3.tgz",
+ "integrity": "sha1-rHmH4+I/6AWpkPKOG1DTj8uCJDg="
+ },
+ "d3-random": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-1.1.0.tgz",
+ "integrity": "sha1-ZkLlBsb6OmSFldKyRpeIqNElKdM="
+ },
+ "d3-scale": {
+ "version": "1.0.7",
+ "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-1.0.7.tgz",
+ "integrity": "sha512-KvU92czp2/qse5tUfGms6Kjig0AhHOwkzXG0+PqIJB3ke0WUv088AHMZI0OssO9NCkXt4RP8yju9rpH8aGB7Lw==",
+ "requires": {
+ "d3-array": "^1.2.0",
+ "d3-collection": "1",
+ "d3-color": "1",
+ "d3-format": "1",
+ "d3-interpolate": "1",
+ "d3-time": "1",
+ "d3-time-format": "2"
+ }
+ },
+ "d3-selection": {
+ "version": "1.3.0",
+ "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-1.3.0.tgz",
+ "integrity": "sha512-qgpUOg9tl5CirdqESUAu0t9MU/t3O9klYfGfyKsXEmhyxyzLpzpeh08gaxBUTQw1uXIOkr/30Ut2YRjSSxlmHA=="
+ },
+ "d3-shape": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.2.0.tgz",
+ "integrity": "sha1-RdAVOPBkuv0F6j1tLLdI/YxB93c=",
+ "requires": {
+ "d3-path": "1"
+ }
+ },
+ "d3-time": {
+ "version": "1.0.8",
+ "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-1.0.8.tgz",
+ "integrity": "sha512-YRZkNhphZh3KcnBfitvF3c6E0JOFGikHZ4YqD+Lzv83ZHn1/u6yGenRU1m+KAk9J1GnZMnKcrtfvSktlA1DXNQ=="
+ },
+ "d3-time-format": {
+ "version": "2.1.1",
+ "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-2.1.1.tgz",
+ "integrity": "sha512-8kAkymq2WMfzW7e+s/IUNAtN/y3gZXGRrdGfo6R8NKPAA85UBTxZg5E61bR6nLwjPjj4d3zywSQe1CkYLPFyrw==",
+ "requires": {
+ "d3-time": "1"
+ }
+ },
+ "d3-timer": {
+ "version": "1.0.7",
+ "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-1.0.7.tgz",
+ "integrity": "sha512-vMZXR88XujmG/L5oB96NNKH5lCWwiLM/S2HyyAQLcjWJCloK5shxta4CwOFYLZoY3AWX73v8Lgv4cCAdWtRmOA=="
+ },
+ "d3-transition": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-1.1.1.tgz",
+ "integrity": "sha512-xeg8oggyQ+y5eb4J13iDgKIjUcEfIOZs2BqV/eEmXm2twx80wTzJ4tB4vaZ5BKfz7XsI/DFmQL5me6O27/5ykQ==",
+ "requires": {
+ "d3-color": "1",
+ "d3-dispatch": "1",
+ "d3-ease": "1",
+ "d3-interpolate": "1",
+ "d3-selection": "^1.1.0",
+ "d3-timer": "1"
+ }
+ },
+ "d3-voronoi": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/d3-voronoi/-/d3-voronoi-1.1.2.tgz",
+ "integrity": "sha1-Fodmfo8TotFYyAwUgMWinLDYlzw="
+ },
+ "d3-zoom": {
+ "version": "1.7.1",
+ "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-1.7.1.tgz",
+ "integrity": "sha512-sZHQ55DGq5BZBFGnRshUT8tm2sfhPHFnOlmPbbwTkAoPeVdRTkB4Xsf9GCY0TSHrTD8PeJPZGmP/TpGicwJDJQ==",
+ "requires": {
+ "d3-dispatch": "1",
+ "d3-drag": "1",
+ "d3-interpolate": "1",
+ "d3-selection": "1",
+ "d3-transition": "1"
+ }
}
}
},
@@ -2449,11 +2699,6 @@
"integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
"dev": true
},
- "nvd3": {
- "version": "1.8.5",
- "resolved": "https://registry.npmjs.org/nvd3/-/nvd3-1.8.5.tgz",
- "integrity": "sha1-lKDJj/HDNmtyH6eocFs8bp6va7Y="
- },
"oauth-sign": {
"version": "0.9.0",
"resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz",
@@ -3586,6 +3831,11 @@
"integrity": "sha1-ZGV4SKIP/F31g6Qq2KJ3tFErvE0=",
"dev": true
},
+ "xmlhttprequest": {
+ "version": "1.8.0",
+ "resolved": "https://registry.npmjs.org/xmlhttprequest/-/xmlhttprequest-1.8.0.tgz",
+ "integrity": "sha1-Z/4HXFwk/vOfnWX197f+dRcZaPw="
+ },
"y18n": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz",
diff --git a/dashboardv3/package.json b/dashboardv3/package.json
index 803280a..10ff43c 100644
--- a/dashboardv3/package.json
+++ b/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",
diff --git a/dashboardv3/public/css/scss/graph.scss b/dashboardv3/public/css/scss/graph.scss
index 69d451b..ee774ce 100644
--- a/dashboardv3/public/css/scss/graph.scss
+++ b/dashboardv3/public/css/scss/graph.scss
@@ -311,4 +311,42 @@
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
diff --git a/dashboardv3/public/index.html.tpl b/dashboardv3/public/index.html.tpl
index c0c43da..f849e4d 100644
--- a/dashboardv3/public/index.html.tpl
+++ b/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" />
diff --git a/dashboardv3/public/js/main.js b/dashboardv3/public/js/main.js
index a5f80dc..1c7bf8c 100644
--- a/dashboardv3/public/js/main.js
+++ b/dashboardv3/public/js/main.js
@@ -135,9 +135,6 @@
'deps': ['d3'],
'exports': ['dagreD3']
},
- 'nvd3': {
- 'deps': ['d3']
- },
'sparkline': {
'deps': ['jquery'],
'exports': ['sparkline']
@@ -188,7 +185,6 @@
'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',
diff --git a/dashboardv3/public/js/templates/profile/ProfileLayoutView_tmpl.html b/dashboardv3/public/js/templates/profile/ProfileLayoutView_tmpl.html
index b1fba11..96adc9b 100644
--- a/dashboardv3/public/js/templates/profile/ProfileLayoutView_tmpl.html
+++ b/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}}
diff --git a/dashboardv3/public/js/views/graph/ProfileBarChart.js b/dashboardv3/public/js/views/graph/ProfileBarChart.js
new file mode 100644
index 0000000..d5a974d
--- /dev/null
+++ b/dashboardv3/public/js/views/graph/ProfileBarChart.js
@@ -0,0 +1,151 @@
+/**
+ * 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
diff --git a/dashboardv3/public/js/views/profile/ProfileColumnLayoutView.js b/dashboardv3/public/js/views/profile/ProfileColumnLayoutView.js
index 74e19c0..215391d 100644
--- a/dashboardv3/public/js/views/profile/ProfileColumnLayoutView.js
+++ b/dashboardv3/public/js/views/profile/ProfileColumnLayoutView.js
@@ -16,23 +16,25 @@
* limitations under the License.
*/
-define(['require',
- 'backbone',
- 'hbs!tmpl/profile/ProfileColumnLayoutView_tmpl',
- 'collection/VProfileList',
- 'utils/Utils',
- 'utils/Messages',
- 'utils/Globals',
- 'moment',
- 'models/VEntity',
- 'nvd3'
-], function(require, Backbone, ProfileColumnLayoutViewTmpl, VProfileList, Utils, Messages, Globals, moment, VEntity) {
- 'use strict';
+define([
+ "require",
+ "backbone",
+ "hbs!tmpl/profile/ProfileColumnLayoutView_tmpl",
+ "views/graph/ProfileBarChart",
+ "collection/VProfileList",
+ "utils/Utils",
+ "utils/Messages",
+ "utils/Globals",
+ "moment",
+ "models/VEntity",
+ "d3"
+], function(require, Backbone, ProfileColumnLayoutViewTmpl, ProfileBarChart, VProfileList, Utils, Messages, Globals, moment, VEntity, d3) {
+ "use strict";
var ProfileColumnLayoutView = Backbone.Marionette.LayoutView.extend(
/** @lends ProfileColumnLayoutView */
{
- _viewName: 'ProfileColumnLayoutView',
+ _viewName: "ProfileColumnLayoutView",
template: ProfileColumnLayoutViewTmpl,
@@ -47,12 +49,12 @@
},
/** ui selector cache */
ui: {
- "backToYear": '[data-id="backToYear"]'
+ backToYear: '[data-id="backToYear"]'
},
/** ui events hash */
events: function() {
var events = {};
- events["click " + this.ui.backToYear] = 'backToYear';
+ events["click " + this.ui.backToYear] = "backToYear";
return events;
},
/**
@@ -60,39 +62,42 @@
* @constructs
*/
initialize: function(options) {
- _.extend(this, _.pick(options, 'profileData', 'guid', 'entityDetail'));
+ _.extend(this, _.pick(options, "profileData", "guid", "entityDetail"));
this.typeObject = Utils.getProfileTabType(this.profileData.attributes);
this.entityModel = new VEntity();
- this.formatValue = d3.format("2s")
-
+ this.formatValue = d3.format(".0s");
},
fetchEntity: function(argument) {
var that = this;
this.entityModel.getEntity(this.entityDetail.table.guid, {
success: function(data) {
var entity = data.entity,
- profileData = entity && entity.attributes && entity.attributes.profileData ? entity.attributes.profileData.attributes : null;
+ profileData =
+ entity && entity.attributes && entity.attributes.profileData ? entity.attributes.profileData.attributes : null;
if (profileData && profileData.rowCount) {
- that.$('.rowValue').show();
- that.$('.rowValue .graphval').html('<b>' + that.formatValue(profileData.rowCount).replace('G', 'B') + '</b>');
+ that.$(".rowValue").show();
+ that.$(".rowValue .graphval").html("<b>" + that.formatValue(profileData.rowCount).replace("G", "B") + "</b>");
}
if (entity.attributes) {
if (entity.guid) {
- that.$('.table_name .graphval').html('<b><a href="#!/detailPage/' + entity.guid + "?profile=true" + '">' + Utils.getName(entity) + '</a></b>');
+ that.$(".table_name .graphval").html(
+ '<b><a href="#!/detailPage/' + entity.guid + "?profile=true" + '">' + Utils.getName(entity) + "</a></b>"
+ );
}
- that.$('.table_created .graphval').html('<b>' + moment(entity.attributes.createTime).format("LL") + '</b>');
+ that.$(".table_created .graphval").html("<b>" + moment(entity.attributes.createTime).format("LL") + "</b>");
}
}
});
},
bindEvents: function() {},
onRender: function() {
- this.renderGraph();
this.fetchEntity();
if (this.typeObject && this.typeObject.type === "date") {
- this.$('svg').addClass('dateType');
+ this.$("svg").addClass("dateType");
}
-
+ },
+ onShow: function() {
+ this.renderGraph();
},
renderGraph: function(argument) {
if (!this.typeObject) {
@@ -100,106 +105,71 @@
}
var that = this,
profileData = this.profileData.attributes;
- this.data = [{
+ this.data = {
key: this.typeObject.label,
values: this.typeObject.actualObj || []
- }];
- nv.addGraph(function() {
- that.chart = nv.models.multiBarChart()
- .x(function(d) {
- return d.value || d.year
- }) //Specify the data accessors.
- .y(function(d) {
- return d.count
- })
- .height(220)
- .stacked(false)
- .showControls(false)
- .reduceXTicks(false)
- .staggerLabels(true)
- .duration(1000)
- .groupSpacing(0.6)
- .wrapLabels(true)
- .showLegend(false);
- if (that.typeObject.type !== "date") {
- that.chart.rotateLabels(-45);
- }
- that.chart.color(["#38BB9B"]);
-
- that.chart.yAxis.tickFormat(function(d) {
- return that.formatValue(d).replace('G', 'B');
- });
- that.chart.xAxis
- .axisLabel(that.typeObject.xAxisLabel)
- .axisLabelDistance(-185);
- that.chart.yAxis
- .axisLabel(that.typeObject.yAxisLabel)
- .axisLabelDistance(-5);
- that.chart.margin({
- right: 30,
- left: 80,
- top: 20,
- bottom: 60
- });
- if (that.typeObject.type === "date") {
- that.chart.multibar.dispatch.elementClick = function(e) {
- if (!that.monthsData) {
- that.createMonthData(e.data.monthlyCounts)
- }
- }
- }
- that.svg = d3.select(that.$('svg')[0]).datum(that.data)
- that.svg.transition().duration(0).call(that.chart);
-
- nv.utils.windowResize(that.chart.update);
-
- return that.chart;
- });
-
+ };
+ this.updateGraph(this.data);
},
backToYear: function() {
this.ui.backToYear.hide();
- this.$('.profileGraphDetail').show();
+ this.$(".profileGraphDetail").show();
this.monthsData = null;
this.updateGraph(this.data);
},
createMonthData: function(data) {
var monthsKey = {
- "1": "Jan",
- "2": "Feb",
- "3": "Mar",
- "4": "Apr",
- "5": "May",
- "6": "Jun",
- "7": "Jul",
- "8": "Aug",
- "9": "Sep",
- "10": "Oct",
- "11": "Nov",
- "12": "Dec"
+ 1: "Jan",
+ 2: "Feb",
+ 3: "Mar",
+ 4: "Apr",
+ 5: "May",
+ 6: "Jun",
+ 7: "Jul",
+ 8: "Aug",
+ 9: "Sep",
+ 10: "Oct",
+ 11: "Nov",
+ 12: "Dec"
},
i = 1;
- this.monthsData = [{
+ this.monthsData = {
key: this.typeObject.label,
values: []
- }];
+ };
while (i <= 12) {
- this.monthsData[0].values.push({
+ this.monthsData.values.push({
value: monthsKey[i],
count: data[i] || 0
});
i++;
}
this.ui.backToYear.show();
- this.$('.profileGraphDetail').hide();
+ this.$(".profileGraphDetail").hide();
this.updateGraph(this.monthsData);
-
},
updateGraph: function(data) {
- this.svg.datum(data).transition().duration(0).call(this.chart);
- },
- });
+ var that = this;
+ this.$("svg").empty();
+ ProfileBarChart.render({
+ el: this.$("svg")[0],
+ data: data,
+ xAxisLabel: this.typeObject.xAxisLabel,
+ yAxisLabel: this.typeObject.yAxisLabel,
+ formatValue: this.formatValue,
+ rotateXticks: this.typeObject.type !== "date",
+ onBarClick: function(e) {
+ if (that.typeObject.type === "date") {
+ if (!that.monthsData) {
+ that.createMonthData(e.monthlyCounts);
+ }
+ }
+ }
+ });
+ }
+ }
+ );
return ProfileColumnLayoutView;
});
\ No newline at end of file
diff --git a/dashboardv3/public/js/views/profile/ProfileTableLayoutView.js b/dashboardv3/public/js/views/profile/ProfileTableLayoutView.js
index ada7e62..54dabe2 100644
--- a/dashboardv3/public/js/views/profile/ProfileTableLayoutView.js
+++ b/dashboardv3/public/js/views/profile/ProfileTableLayoutView.js
@@ -24,10 +24,12 @@
'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 @@
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() {
