| /** |
| * 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. |
| */ |
| (function () { |
| "use strict"; |
| |
| var d3Module = angular.module('chart-module', ['app.services.falcon']); |
| |
| // <d3-bar-chart class="chart" input="my.data" w="700" h="400" t="30" dx="[0,50]" dy="[24,0]" details="details"></d3-bar-chart> |
| d3Module.directive('chart', function() { |
| return { |
| scope: { |
| input: "=", |
| t: "@", |
| mode: "=", |
| details:"=" |
| }, |
| restrict: "EA", |
| link: function (scope, element) { |
| |
| |
| scope.$watch(function () { |
| return scope.input; |
| }, function () { |
| prepareData(); |
| }); |
| |
| angular.element(window).on('resize', prepareData); |
| |
| function prepareData () { |
| |
| if (scope.input.length === 0) { |
| return; |
| } |
| |
| scope.w = angular.element('.chartCol').width(); |
| scope.h = 400; |
| |
| |
| if (scope.mode === 'daily') { scope.xDomain = 14; } else { scope.xDomain = 24; } |
| |
| scope.yDomain = d3.max(scope.input, function (d) { |
| if (d.numFailedInstances >= d.numSuccessfullInstances) { |
| return d.numFailedInstances; |
| }else { |
| return d.numSuccessfullInstances; |
| } |
| }); |
| scope.yMaxDataSizeDomain = d3.max(scope.input, function (d) { |
| return d.dataSizeCopied; |
| }) + 100; |
| scope.yMaxDataSizeDomain = scope.yMaxDataSizeDomain * 1.2; |
| scope.yDomain = scope.yDomain * 1.2; |
| |
| d3.selectAll('svg').remove(); |
| |
| drawChart(); |
| |
| } |
| |
| function drawChart() { |
| |
| var x = d3.scale.linear().domain([0,scope.xDomain]).range( [0, (scope.w - (scope.t * 2) ) ]), |
| y = d3.scale.linear().domain([0, scope.yDomain]).range( [0, (scope.h - (scope.t * 2) ) ]), |
| yDataSizeScale = d3.scale.linear().domain([0, scope.yMaxDataSizeDomain]).range( [0, (scope.h - (scope.t * 2) ) ]), |
| |
| xAxis = d3.svg.axis() |
| .scale(x) |
| .orient("bottom") |
| .ticks(scope.xDomain), |
| |
| gridNumberRows = 11, |
| |
| canvas = d3.select(element[0]) |
| .append("svg") |
| .attr("width", scope.w) |
| .attr("height", scope.h), |
| |
| col, |
| tip, |
| |
| linePrepareTransition = d3.svg.line() |
| .x(function(d, i) { |
| return x(i); |
| }) |
| .y(function() { |
| return (y(scope.yDomain)); |
| }) |
| .interpolate('cardinal'), |
| |
| successLineFunc = d3.svg.line() |
| .x(function(d, i) { |
| return x(i); |
| }) |
| .y(function(d) { |
| return (y(scope.yDomain - d.numSuccessfullInstances)); |
| }) |
| .interpolate('cardinal'), |
| |
| failedLineFunc = d3.svg.line() |
| .x(function(d, i) { |
| return x(i); |
| }) |
| .y(function(d) { |
| return (y(scope.yDomain - d.numFailedInstances)); |
| }) |
| .interpolate('cardinal'), |
| |
| successAreaFunc = d3.svg.area() |
| .x(function(d, i) { |
| return x(i); |
| }) |
| .y0(y(scope.yDomain)) |
| .y1(function(d) { |
| return (y(scope.yDomain - d.numSuccessfullInstances)); |
| }) |
| .interpolate('cardinal'), |
| |
| failedAreaFunc = d3.svg.area() |
| .x(function(d, i) { |
| return x(i); |
| }) |
| .y0(y(scope.yDomain)) |
| .y1(function(d) { |
| return (y(scope.yDomain - d.numFailedInstances)); |
| }) |
| .interpolate('cardinal'); |
| |
| //---------------X AXIS ----------------------// |
| canvas.append("g") |
| .attr("class", "x axis") |
| .attr("transform", "translate(" + scope.t + "," + (( scope.h - scope.t ) + 0.5) + ")") |
| .call(xAxis); |
| |
| if (scope.mode === 'daily') { |
| |
| canvas.selectAll('g.dateAxis') |
| .data(scope.input).enter() |
| .append("g").attr('class', 'dateAxis') |
| .append("text") |
| .attr({ |
| "text-anchor": "middle", |
| x: function(d, i) { return x(i);}, |
| y: function() { return (y(scope.yDomain)); }, |
| transform: "translate(" + (x(0.5) + parseInt(scope.t, 10)) + "," + (scope.t*1.5) + ")" |
| }).html(function(d) { |
| var format = d3.time.format.utc("%d %b"); |
| return format(new Date(d.startTime)); |
| }); |
| } |
| |
| //---------------GRID-------------------------// |
| |
| d3.range(0, (gridNumberRows + 1)).forEach(function (i) { |
| |
| canvas.append('svg:line') |
| .attr({ |
| stroke: "#d3d3d3", |
| 'stroke-width': 1, |
| x1: 0, |
| x2: x(scope.xDomain), |
| y1: y((scope.yDomain/gridNumberRows) * i), |
| y2: y((scope.yDomain/gridNumberRows) * i), |
| transform: "translate(" + scope.t + "," + scope.t + ")" |
| }); |
| |
| }); |
| |
| //----------BARS DATASIZE COPIED---------------// |
| |
| canvas.selectAll('rect.dataSize') |
| .data(scope.input).enter() |
| .append("svg:rect").attr('class', 'dataSize') |
| .attr({ |
| x: function(d, i) { return x(i); }, |
| y: function() { return yDataSizeScale(scope.yMaxDataSizeDomain); }, |
| width: function() { return x(1); }, |
| height: function() { return 0; }, |
| stroke: "none", |
| fill: "rgba(8,8,8,0.3)", |
| transform: "translate(" + scope.t + "," + scope.t + ")" |
| }) |
| .transition().duration(2000) |
| .attr({ |
| height: function(d) { return yDataSizeScale(d.dataSizeCopied); }, |
| y: function(d) { return yDataSizeScale(scope.yMaxDataSizeDomain - d.dataSizeCopied); } |
| }); |
| |
| //-------------LINES------------// |
| |
| canvas.append('svg:path') |
| .attr({ |
| d: linePrepareTransition(scope.input), |
| transform: "translate(" + (x(0.5) + parseInt(scope.t, 10)) + "," + scope.t + ")", |
| stroke: "green", |
| "stroke-width": 2, |
| "stroke-linecap": "round", |
| fill: "rgba(0,0,0,0)" |
| }) |
| .transition().duration(1000) |
| .attr({ |
| d: successLineFunc(scope.input) |
| }); |
| |
| canvas.append('svg:path') |
| .attr({ |
| d: linePrepareTransition(scope.input), |
| transform: "translate(" + (x(0.5) + parseInt(scope.t, 10)) + "," + scope.t + ")", |
| stroke: "red", |
| "stroke-width": 2, |
| fill: 'none' |
| }) |
| .transition().duration(1000).delay(500) |
| .attr({ |
| d: failedLineFunc(scope.input) |
| }); |
| |
| //-------------AREAS------------// |
| |
| canvas.append('svg:path') |
| .attr({ |
| d: linePrepareTransition(scope.input), |
| transform: "translate(" + (x(0.5) + parseInt(scope.t, 10)) + "," + scope.t + ")" |
| }) |
| .transition().duration(1000) |
| .attr({ |
| d: successAreaFunc(scope.input), |
| stroke: "none", |
| fill: "rgba(0,255,0,0.1)" |
| }); |
| |
| canvas.append('svg:path') |
| .attr({ |
| d: linePrepareTransition(scope.input), |
| transform: "translate(" + (x(0.5) + parseInt(scope.t, 10)) + "," + scope.t + ")" |
| }) |
| .transition().duration(1000).delay(500) |
| .attr({ |
| d: failedAreaFunc(scope.input), |
| stroke: "none", |
| fill: "rgba(255,0,0,0.1)" |
| }); |
| |
| //------------COL----------------------------// |
| |
| col = canvas.selectAll('g.col') |
| .data(scope.input).enter() |
| .append("g").attr('class', 'column'); |
| |
| col.append('svg:line') |
| .attr({ |
| stroke: "#d3d3d3", |
| 'stroke-width': 1, |
| x1: function(d, i) { return x(i); }, |
| x2: function(d, i) { return x(i); }, |
| y1: 0, |
| y2: y(scope.yDomain), |
| transform: "translate(" + (x(0.5) + parseInt(scope.t, 10)) + "," + scope.t + ")" |
| }); |
| |
| col.append('svg:line') |
| .attr({ |
| stroke: "#748484", |
| 'stroke-width': 3, |
| x1: function(d, i) { return x(i); }, |
| x2: function(d, i) { return x(i + 1); }, |
| y1: function (d) { return yDataSizeScale((scope.yMaxDataSizeDomain - d.dataSizeCopied)) + 1.5; }, |
| y2: function (d) { return yDataSizeScale((scope.yMaxDataSizeDomain - d.dataSizeCopied)) + 1.5; }, |
| transform: "translate(" + scope.t + "," + scope.t + ")" |
| }); |
| |
| col.append("circle") |
| .attr({ |
| r: 5, |
| fill: "green", |
| cx: function(d, i) { return x(i);}, |
| cy: function(d) { return (y(scope.yDomain - d.numSuccessfullInstances)); }, |
| transform: "translate(" + (x(0.5) + parseInt(scope.t, 10)) + "," + scope.t + ")" |
| }); |
| |
| col.append("circle") |
| .attr({ |
| r: 5, |
| fill: "red", |
| cx: function(d, i) { return x(i);}, |
| cy: function(d) { return (y(scope.yDomain - d.numFailedInstances)); }, |
| transform: "translate(" + (x(0.5) + parseInt(scope.t, 10)) + "," + scope.t + ")" |
| }); |
| |
| tip = col.append("g").attr('transform', "translate(" + scope.t + ", -" + scope.t/2 + ")"); |
| |
| tip.append("svg:rect") |
| .attr({ |
| stroke: "gray", |
| fill: "white", |
| transform: "translate(-6, -"+ scope.t + ")", |
| width: 50, |
| height: 50, |
| 'stroke-width': 1, |
| x: function(d, i) { return x(i);}, |
| y: function (d) { |
| |
| if (y(d.numSuccessfullInstances) > yDataSizeScale(d.dataSizeCopied) && y(d.numSuccessfullInstances) > y(d.numFailedInstances)) { |
| return (y(scope.yDomain) - y(d.numSuccessfullInstances)); |
| } else if (y(d.numFailedInstances) > yDataSizeScale(d.dataSizeCopied) && y(d.numFailedInstances) > y(d.numSuccessfullInstances)) { |
| return (y(scope.yDomain) - y(d.numFailedInstances)); |
| } else { |
| return (yDataSizeScale(scope.yMaxDataSizeDomain) - yDataSizeScale(d.dataSizeCopied)); |
| } |
| |
| } |
| }); |
| |
| tip.append("text") |
| .attr({ |
| x: function(d, i) { return x(i); }, |
| y: function (d) { |
| |
| if (y(d.numSuccessfullInstances) > yDataSizeScale(d.dataSizeCopied) && y(d.numSuccessfullInstances) > y(d.numFailedInstances)) { |
| return (y(scope.yDomain) - y(d.numSuccessfullInstances)); |
| } else if (y(d.numFailedInstances) > yDataSizeScale(d.dataSizeCopied) && y(d.numFailedInstances) > y(d.numSuccessfullInstances)) { |
| return (y(scope.yDomain) - y(d.numFailedInstances)); |
| } else { |
| return (yDataSizeScale(scope.yMaxDataSizeDomain) - yDataSizeScale(d.dataSizeCopied)); |
| } |
| |
| }, |
| transform: "translate(10, -" + (scope.t * 0.5) +")", |
| position: "relative" |
| }) |
| |
| .html(function(d) { |
| var tip = "<tspan x='' y='' fill='green'>" + d.numSuccessfullInstances + "</tspan>"; |
| return tip; |
| }); |
| |
| tip.append("text") |
| .attr({ |
| x: function(d, i) { return x(i); }, |
| y: function (d) { |
| |
| if (y(d.numSuccessfullInstances) > yDataSizeScale(d.dataSizeCopied) && y(d.numSuccessfullInstances) > y(d.numFailedInstances)) { |
| return (y(scope.yDomain) - y(d.numSuccessfullInstances)); |
| } else if (y(d.numFailedInstances) > yDataSizeScale(d.dataSizeCopied) && y(d.numFailedInstances) > y(d.numSuccessfullInstances)) { |
| return (y(scope.yDomain) - y(d.numFailedInstances)); |
| } else { |
| return (yDataSizeScale(scope.yMaxDataSizeDomain) - yDataSizeScale(d.dataSizeCopied)); |
| } |
| |
| }, |
| transform: "translate(10, -2)", |
| position: "relative" |
| }) |
| .html(function(d) { |
| var tip = "<tspan x='' y='' fill='red'>" + d.numFailedInstances + "</tspan>"; |
| |
| return tip; |
| }); |
| |
| tip.append("text") |
| .attr({ |
| x: function(d, i) { return x(i); }, |
| y: function (d) { |
| |
| if (y(d.numSuccessfullInstances) > yDataSizeScale(d.dataSizeCopied) && y(d.numSuccessfullInstances) > y(d.numFailedInstances)) { |
| return (y(scope.yDomain) - y(d.numSuccessfullInstances)); |
| } else if (y(d.numFailedInstances) > yDataSizeScale(d.dataSizeCopied) && y(d.numFailedInstances) > y(d.numSuccessfullInstances)) { |
| return (y(scope.yDomain) - y(d.numFailedInstances)); |
| } else { |
| return (yDataSizeScale(scope.yMaxDataSizeDomain) - yDataSizeScale(d.dataSizeCopied)); |
| } |
| |
| }, |
| transform: "translate(0, 13)", |
| position: "relative" |
| }) |
| .html(function(d) { |
| return "<tspan x='' y='' fill='gray'>" + d.dataSizeCopied + "</tspan>"; |
| }); |
| |
| tip.append("circle") |
| .attr({ |
| r: 5, |
| fill: "green", |
| cx: function(d, i) { return x(i);}, |
| cy: function (d) { |
| |
| if (y(d.numSuccessfullInstances) > yDataSizeScale(d.dataSizeCopied) && y(d.numSuccessfullInstances) > y(d.numFailedInstances)) { |
| return (y(scope.yDomain) - y(d.numSuccessfullInstances)); |
| } else if (y(d.numFailedInstances) > yDataSizeScale(d.dataSizeCopied) && y(d.numFailedInstances) > y(d.numSuccessfullInstances)) { |
| return (y(scope.yDomain) - y(d.numFailedInstances)); |
| } else { |
| return (yDataSizeScale(scope.yMaxDataSizeDomain) - yDataSizeScale(d.dataSizeCopied)); |
| } |
| |
| }, |
| transform: "translate(3,-20)" |
| }); |
| |
| tip.append("circle") |
| .attr({ |
| r: 5, |
| fill: "red", |
| cx: function(d, i) { return x(i);}, |
| cy: function (d) { |
| |
| if (y(d.numSuccessfullInstances) > yDataSizeScale(d.dataSizeCopied) && y(d.numSuccessfullInstances) > y(d.numFailedInstances)) { |
| return (y(scope.yDomain) - y(d.numSuccessfullInstances)); |
| } else if (y(d.numFailedInstances) > yDataSizeScale(d.dataSizeCopied) && y(d.numFailedInstances) > y(d.numSuccessfullInstances)) { |
| return (y(scope.yDomain) - y(d.numFailedInstances)); |
| } else { |
| return (yDataSizeScale(scope.yMaxDataSizeDomain) - yDataSizeScale(d.dataSizeCopied)); |
| } |
| |
| }, |
| transform: "translate(3,-6)" |
| }); |
| |
| //--------------CLICKABLE-----------// |
| |
| col.append("rect") |
| .attr({ |
| x: function(d, i) { return x(i); }, |
| y: 0, |
| width: function() { return x(1); }, |
| height: scope.h, |
| stroke: "none", |
| fill: "transparent", |
| transform: "translate(" + scope.t + ", 0)" |
| }) |
| .on("click", function(d){ scope.details(d); }); |
| |
| } |
| |
| prepareData(); |
| |
| } |
| }; |
| }); |
| |
| |
| d3Module.controller('chartCtrl', [ "$scope", "Falcon", "DateHelper", function($scope, Falcon, DateHelper) { |
| |
| var formatFL = d3.time.format.utc("%A %d"), |
| formatSL = d3.time.format.utc("%b %Y"), |
| formatTL = d3.time.format.utc("%H:%M"); |
| |
| $scope.graphData = []; |
| |
| $scope.chartOptions = { |
| entity: "feed", |
| mode: "hourly", |
| day: "" |
| }; |
| |
| $scope.chartSidebarDate = {}; |
| |
| $scope.requestNewData = function () { |
| |
| var type = $scope.chartOptions.entity, |
| mode = $scope.chartOptions.mode, |
| fromDate = new Date($scope.chartOptions.day), |
| fromMonth = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'], |
| from = fromDate.getFullYear() + '-' + |
| (fromMonth[fromDate.getMonth()]) + '-' + |
| (function () { |
| var date = fromDate.getDate(); |
| if (date<10) { |
| return '0' + date; |
| } else { |
| return date; |
| } |
| }()), |
| to = from; //no to supported yet |
| |
| if (type && mode && $scope.chartOptions.day !== '' && $scope.chartOptions.day !== undefined) { |
| Falcon.getInstancesSummary(type, mode, from, to) |
| .success(function (data) { |
| $scope.graphData = data.summary; |
| }).error(function (error) { |
| Falcon.logResponse('error', error, false); |
| }); |
| } |
| $scope.chartSidebarDate = {}; |
| $scope.chartSidebarModel = undefined; |
| |
| }; |
| |
| $scope.dateFormat = DateHelper.getLocaleDateFormat(); |
| $scope.openDatePicker = function($event) { |
| $event.preventDefault(); |
| $event.stopPropagation(); |
| $scope.opened = true; |
| }; |
| |
| $scope.details = function (obj) { |
| |
| var from = obj.startTime, |
| to = obj.endTime, |
| entityType = $scope.chartOptions.entity; |
| |
| $scope.chartSidebarDate.firstLeg = formatFL(new Date(from)); |
| $scope.chartSidebarDate.secondLeg = formatSL(new Date(from)); |
| $scope.chartSidebarDate.timeLeg = formatTL(new Date(from)); |
| |
| Falcon.getTopEntities(entityType, from, to).success(function (data) { |
| $scope.chartSidebarModel = data; |
| }).error(function (error) { |
| Falcon.logResponse('error', error, false); |
| }); |
| |
| }; |
| |
| }]); |
| |
| |
| }()); |
