Merge pull request #43 from RachelYang2/dev

add navigator to charts
eBay · Jun 9, 2017 · 4489da6 · 4489da6
2 parents 3bf3b45 + 80b09b0
commit 4489da6
Show file tree

Hide file tree

Showing 10 changed files with 155 additions and 31 deletions.
diff --git a/griffin-ui/index.html b/griffin-ui/index.html
@@ -141,25 +141,7 @@
 
     </div>
 
-    <div id="bigChartContainer"  class="big-chart-container" style="display:none;" ng-controller="BigChartCtrl">
-      <div id="bigChartShow" class="big-chart-content">
-        <div class="container-fluid">
-          <div class="pull-right" style="position:fixed;right:20px;top:10px;z-index:1050;">
-            <button type="button" id="bigChartClose" class="bark-close thick" aria-label="Close" ng-click="closeBigChart()">
-            </button>
-          </div>
-
-          <div class="pull-right" style="position:fixed;right:150px;top:10px;z-index:1050;">
-            <a href ng-click="downloadSample()" style="font-size:15px;color:#d48265;"><u>Download Sample</u></a>
-          </div>
-
-          <div class="row">
-            <!--<highchart config="chartConfig" />-->
-            <div id="bigChartDiv"></div>
-          </div>
-        </div>
-      </div>
-    </div>
+
 
     <div class="modal fade" id="download-sample" role="dialog" ng-controller="DownloadSampleCtrl">
 		<div class="modal-dialog modal-xg modal-lg">

diff --git a/griffin-ui/js/controllers/bigChart-ctrl.js b/griffin-ui/js/controllers/bigChart-ctrl.js
@@ -32,7 +32,8 @@ define(['./module'], function(controllers) {
 
       $scope.closeBigChart = function(){
         console.log('close big chart!');
-        $('#bigChartContainer').hide();
+        // $('#bigChartContainer').hide();
+        history.back();
         // $('#mainWindow').show();
       }
 

diff --git a/griffin-ui/js/controllers/detail-ctrl.js b/griffin-ui/js/controllers/detail-ctrl.js
@@ -0,0 +1,52 @@
+/*-
+ * Licensed 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(['./module'], function (controllers) {
+    'use strict';
+    controllers.controller('DetailCtrl', ['$scope', '$http', '$config', '$location','$timeout', '$route', '$barkChart', '$rootScope','$routeParams', function ($scope, $http, $config, $location, $timeout, $route, $barkChart, $rootScope,$routeParams) {
+      console.log('detail controller');
+      // var url="/js/controllers/heatmap.json";
+
+        var echarts = require('echarts');
+        var formatUtil = echarts.format;
+
+        var showBig = function(metricName){
+          var metricDetailUrl = $config.uri.metricdetail + '/' + metricName;
+          $http.get(metricDetailUrl).success(function (data){
+            $rootScope.showBigChart($barkChart.getOptionBig(data));
+          });
+        }
+
+        pageInit();
+
+        function pageInit() {
+            $scope.$emit('initReq');
+            showBig($routeParams.modelname);
+        }
+
+        $scope.$on('resizeHandler', function(e) {
+            if($route.current.$$route.controller == 'HealthCtrl'){
+                console.log('health resize');
+                resizeTreeMap();
+                $scope.myChart.resize();
+            }
+        });
+
+        function resizeTreeMap() {
+            $('#chart1').height( $('#mainWindow').height() - $('.bs-component').outerHeight() );
+        }
+
+    }]);
+});
diff --git a/griffin-ui/js/controllers/health-ctrl.js b/griffin-ui/js/controllers/health-ctrl.js
@@ -161,7 +161,9 @@ define(['./module'], function (controllers) {
                     // param.event.event.preventDefault();
                     if (param.data.name) {
 
-                        showBig(param.data.name);
+                        // showBig(param.data.name);
+                        window.location.href = '/#/detailed/'+param.data.name;
+
                         // return false;
                     }
                 });

diff --git a/griffin-ui/js/controllers/index.js b/griffin-ui/js/controllers/index.js
@@ -33,7 +33,8 @@ define([
     './subscribemodel-ctrl',
     './bigChart-ctrl',
     './main-ctrl',
-    './downloadSample-ctrl'
+    './downloadSample-ctrl',
+    './detail-ctrl'
     // './my-ctrl-2'
 ], function () {
   // console.log('my controller 1');

diff --git a/griffin-ui/js/controllers/metrics-ctrl.js b/griffin-ui/js/controllers/metrics-ctrl.js
@@ -162,11 +162,12 @@ define(['./module'], function(controllers) {
 
         /*click the chart to be bigger*/
         $scope.showBig = function(t){
-          var metricDetailUrl = $config.uri.metricdetail + '/' + t.name;
+          // var metricDetailUrl = $config.uri.metricdetail + '/' + t.name;
           // var metricDetailUrl = '/js/mock_data/anom.json';
-          $http.get(metricDetailUrl).success(function (data){
-            $rootScope.showBigChart($barkChart.getOptionBig(data));
-          });
+          // $http.get(metricDetailUrl).success(function (data){
+          //   $rootScope.showBigChart($barkChart.getOptionBig(data));
+          // });
+          window.location.href = '/#/detailed/'+t.name;
 
         }
 

diff --git a/griffin-ui/js/controllers/mydashboard-ctrl.js b/griffin-ui/js/controllers/mydashboard-ctrl.js
@@ -68,11 +68,12 @@ define(['./module'], function(controllers) {
 
         /*click the chart to be bigger*/
         $scope.showBig = function(t){
-          var metricDetailUrl = $config.uri.metricdetail + '/' + t.name;
+          // var metricDetailUrl = $config.uri.metricdetail + '/' + t.name;
           // var metricDetailUrl = '/js/mock_data/anom.json';
-          $http.get(metricDetailUrl).success(function (data){
-            $rootScope.showBigChart($barkChart.getOptionBig(data));
-          });
+          // $http.get(metricDetailUrl).success(function (data){
+            // $rootScope.showBigChart($barkChart.getOptionBig(data));
+          // });
+          window.location.href = '/#/detailed/'+t.name;
 
         }
 

diff --git a/griffin-ui/js/controllers/sidebar-ctrl.js b/griffin-ui/js/controllers/sidebar-ctrl.js
@@ -60,7 +60,8 @@ define(['./module'], function(controllers) {
 
             $('#'+chartId).unbind('click');
             $('#'+chartId).click(function() {
-              showBig($scope.briefmetrics[parentIndex].metrics[index]);
+              // showBig($scope.briefmetrics[parentIndex].metrics[index]);
+              window.location.href = '/#/detailed/'+$scope.briefmetrics[parentIndex].metrics[index].name;
             });
 
         };

diff --git a/griffin-ui/js/routes.js b/griffin-ui/js/routes.js
@@ -66,6 +66,11 @@ define(['./app'], function(app) {
             controller: 'ViewRuleCtrl'
         });
 
+        $routeProvider.when('/detailed/:modelname',{
+            templateUrl:'/pages/rules/detail.html',
+            controller:'DetailCtrl'
+        });
+
         $routeProvider.when('/metrics', {
             templateUrl: '/pages/metrics/dashboard.html',
             controller: 'MetricsCtrl'

diff --git a/griffin-ui/pages/rules/detail.html b/griffin-ui/pages/rules/detail.html
@@ -0,0 +1,78 @@
+<!--
+
+  Licensed 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.
+
+-->
+
+<!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="">
+    <meta name="author" content="">
+    <link rel="icon" href="/img/favicon.ico">
+
+    <title>Griffin - Data Quality Service</title>
+
+    <!-- Bootstrap Core CSS -->
+    <link href="bower_components/bootswatch/cyborg/bootstrap.css" rel="stylesheet">
+    <!-- Custom Fonts -->
+    <link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
+
+    <link href="bower_components/AngularJS-Toaster/toaster.css" rel="stylesheet">
+
+    <link href="css/main.css" rel="stylesheet">
+    <link href="css/treeview.css" rel="stylesheet">
+    <link href="css/treeview-check.css" rel="stylesheet">
+    <link href="css/sidebar.css" rel="stylesheet">
+    <link href="pages/measures/measure.css" rel="stylesheet">
+    <link href="pages/metrics/metrics.css" rel="stylesheet">
+    <link href="pages/template/bigchart.css" rel="stylesheet">
+    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
+    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+    <!--[if lt IE 9]>
+    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
+    <![endif]-->
+
+</head>
+
+
+<body>
+
+    <div id="bigChartContainer"  class="big-chart-container" style="display:none;" ng-controller="BigChartCtrl">
+      <div id="bigChartShow" class="big-chart-content">
+        <div class="container-fluid">
+          <div class="pull-right" style="position:fixed;right:20px;top:10px;z-index:1050;">
+            <button type="button" id="bigChartClose" class="bark-close thick" aria-label="Close" ng-click="closeBigChart()">
+            </button>
+          </div>
+
+          <div class="pull-right" style="position:fixed;right:150px;top:10px;z-index:1050;">
+            <a href ng-click="downloadSample()" style="font-size:15px;color:#d48265;"><u>Download Sample</u></a>
+          </div>
+
+          <div class="row">
+            <!--<highchart config="chartConfig" />-->
+            <div id="bigChartDiv"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+</body>
+</html>