(function () {
'use strict';
//Controller
var controllerName = "dashboardGaugeRankTrackingController";
angular
.module('bps.dashboard')
.controller(controllerName, Controller);
Controller.$inject = ['$scope', '$location', 'hubservice', '$http', '$state', '$stateParams', '$localStorage', 'coreAppService', '$q', 'Colors', '$interval', '$rootScope', '$filter'];
function Controller($scope, $location, hubservice, $http, $state, $stateParams, $localStorage, coreAppService, $q, Colors, $interval, $rootScope, $filter) {
// for controllerAs syntax
var vm = this;
Chart.defaults.global.defaultFontFamily = '"Montserrat", sans-serif';
Chart.defaults.global.defaultFontColor = '#656565';
$scope.ShowRankTracker = false;
$scope.ShowTopBottomVolumeRating = true;
$scope.RTlineIsLoading = true;
$scope.RLineIsLoading = true;
$scope.RData = [];
$scope.ReportHeading = 'Rank Tracking';
$scope.RankTrackingBy = "Monthly";
$scope.filterOptions = {};
$scope.filterOptions.dateRangePicker = {};
$scope.isLoadChart = false;
$scope.isLastSixMonth = false;
$scope.defaultClientId = $localStorage.SelectedClient.id;
$scope.competitorCount = 0;
$scope.timeoutId = 0;
$scope.filterOptions.dateRangePicker.options = {
autoUpdateInput: false,
eventHandlers: {
'apply.daterangepicker': function (ev, picker) {
// $scope.filterOptions.dateRangePicker.UserChange = true;
$scope.isLoadChart = true;
if ($scope.timeoutId && $scope.timeoutId != 0) {
clearTimeout($scope.timeoutId);
}
$scope.timeoutId = setTimeout(() => {
$scope.runReport();
}, 1000);
}
}
};
$scope.filterOptions.dateRangePicker.date = {
startDate: moment().subtract(6, "months").startOf('month').toDate(),
endDate: moment().subtract(1, "months").endOf('month').toDate(),
};
$scope.RTseries = [];
$scope.RTData = [];
$scope.RTlabels = [];
$scope.RTdatacolors = ['#00c0b7', '#ed7d31'];
$scope.RToptions = {
responsive: true, maintainAspectRatio: false,
legend: {
display: true,
labels: {
fontColor: 'black'
},
},
elements: {
// line: {
//tension: 0 // disables bezier curves
// }
},
scales: {
xAxes: [{
stacked: true,
ticks: {
callback: function (value) {
if (value.length > 20) {
return value.substr(0, 20) + "...";//truncate
}
return value;
},
}
}],
yAxes: [{
stacked: true
}]
},
tooltips: {
callbacks: {
label: function (tooltipItem, chart) {
//console.log("chart.datasets[tooltipItem.datasetIndex]",chart.datasets[tooltipItem.datasetIndex])
var datasetLabel = chart.datasets[tooltipItem.datasetIndex].label || '';
return datasetLabel + ': ' + number_format(tooltipItem.yLabel, 0) + '%';
},
title: function (tooltipItems, chart) {
//console.log("Chart title ",tooltipItems,"chart.datasets",chart.datasets);
return $scope.RTlabels[tooltipItems[0].index];
}
}
}
};
$scope.RankTrackerGraphDefault = function () {
return [
{
"valueField": "Visibility",
"labelText": "",
"balloonText": "Ranking Visibility : <b>[[value]]%</b>",
"labelPosition": "top",
//"bulletSize": 40,
"bullet": "round",
"bulletBorderColor": "#fff",
"bulletBorderThickness": 1,
"bulletBorderAlpha": 0.9,
"type": "column",
"lineThickness": 2,
"lineColor": "#00c0b7",
"fillAlphas": 0.2,
"title": "Ranking Visibility",
"fixedColumnWidth": 50
},
{
"valueField": "Opportunity",
"labelText": "",
"balloonText": "Ranking Opportunity : <b>[[value]]%</b>",
"labelPosition": "top",
//"bulletSize": 40,
"bullet": "round",
"bulletBorderColor": "#fff",
"bulletBorderThickness": 1,
"bulletBorderAlpha": 0.9,
"type": "column",
"lineThickness": 2,
"lineColor": "#ed7d31",
"fillAlphas": 0.2,
"title": "Ranking Opportunity",
"fixedColumnWidth": 50
}
];
}
$scope.RankTrackerGraphCompetitor = function () {
let aReturn = [{
"valueField": "DiffPerCent",
"stackable": false,
"labelText": "",
"balloonText": $localStorage.SelectedClient.name + ": <b>[[value]]%</b>",
"labelPosition": "top",
//"bulletSize": 40,
"bullet": "round",
"bulletBorderColor": "#fff",
"bulletBorderThickness": 1,
"bulletBorderAlpha": 0.9,
"type": "column",
"lineThickness": 2,
"lineColor": "#00c0b7",
"fillAlphas": 0.2,
"title": $localStorage.SelectedClient.name
}];
let color = 1;
let colorIdex = [0, 1, 2, 4, 7, 8, 5, 6, 3];
if (!$scope.CompetitorsList) {
$scope.CompetitorsList = [];
}
$scope.CompetitorsList.forEach(c => {
aReturn.push({
"valueField": "competitor" + color,
"stackable": false,
"labelText": "",
"balloonText": "" + c + ": <b>[[value]]%</b>",
"labelPosition": "top",
//"bulletSize": 40,
"bullet": "round",
"bulletBorderColor": "#fff",
"bulletBorderThickness": 1,
"bulletBorderAlpha": 0.9,
"type": "column",
"lineThickness": 2,
"lineColor": $scope.RTdatacolors[colorIdex[color]],
"fillAlphas": 0.2,
"title": c
});
color++;
});
aReturn.push({
"valueField": "competitorOther",
"stackable": false,
"labelText": "",
"balloonText": "Other: <b>[[value]]%</b>",
"labelPosition": "top",
//"bulletSize": 40,
"bullet": "round",
"bulletBorderColor": "#fff",
"bulletBorderThickness": 1,
"bulletBorderAlpha": 0.9,
"type": "column",
"lineThickness": 2,
"lineColor": "#ed7d31",
"fillAlphas": 0.2,
"title": "Other"
});
return aReturn;
}
$scope.lineChartOptions = {
listeners: [{
event: "rendered",
method: function (e) {
var legend = document.getElementsByClassName("amChartsLegend");
for (var x = 0; x < legend.length; x++)
legend[x].style.removeProperty('top');
}
}],
data: [],
fontSize: 10,
addClassNames: true,
type: "serial",
creditsPosition: "top-right",
titles: [{ text: "" }],
rotate: false,
zoomOutText: "",
zoomOutButtonAlpha: 0,
zoomOutButtonRollOverAlpha: 0,
zoomOutOnDataUpdate: false,
fontFamily: '"Montserrat", sans-serif',
autoTransform: false,
pathToImages: 'https://locationbank.net/lib/amcharts/dist/amcharts/images/',
angle: 30,
depth3D: 0,
export: {
enabled: true,
"beforeCapture": function () {
this.setup.chart.graphs.forEach(element => {
element.labelText = "[[value]]";
});
this.setup.chart.validateData();
},
"afterCapture": function () {
this.setup.chart.graphs.forEach(element => {
element.labelText = "";
});
this.setup.chart.validateData();
}
},
legend: {
enabled: true,
align: "center",//,
position: "top",
valueText: "[[value]]%"
//listeners: [{ "event": "clickLabel", "method": barGraphLegendHideItem }],
//clickLabel: barGraphLegendHideItem
},
chartCursor: {
pan: true,
valueZoomable: false
},
chartScrollbar: {
enabled: true,
"backgroundAlpha": 1,
"backgroundColor": "#ffffff",
selectedBackgroundAlpha: 1,
selectedBackgroundColor: "#9ed6ff",
selectedGraphLineColor: "#9ed6ff",
dragIcon: "dragIconRoundSmallBlue",
dragIconHeight: 20,
dragIconWidth: 10,
scrollbarHeight: 10
},
categoryField: "groupBy",
categoryAxis: {
gridPosition: "start",
parseDates: false,
labelRotation: 0
},
valueAxes: [{
strictMinMax: true,
stackType: "regular",
stackByValue: true,
"axisAlpha": 0.3,
"gridAlpha": 0.3
}],
graphs: $scope.RankTrackerGraphDefault()
};
$scope.isAccordionOpen = true;
$scope.canMoveRight = false;
$scope.canMoveLeft = false;
$scope.SideBarData = [];
$scope.SideBarIndex = [];
$scope.highlight = {
totalSearches: 0,
totalViews: 0,
mapSearches: 0,
totalAction: 0,
totalWeb: 0,
potentialStoreVisits: 0,
potentialSales: 0,
costperAcquisition: 0,
eCPM: 0,
eCPC: 0,
recordDate: "...",
businessBookingsActions: 0,
conversationActions: 0,
foodOrderActions: 0
};
$scope.lowLight = {
totalSearches: 0,
totalViews: 0,
mapSearches: 0,
totalAction: 0,
totalWeb: 0,
potentialStoreVisits: 0,
potentialSales: 0,
costperAcquisition: 0,
eCPM: 0,
eCPC: 0,
recordDate: "...",
businessBookingsActions: 0,
conversationActions: 0,
foodOrderActions: 0
};
function number_format(number, decimals, dec_point, thousands_sep) {
// * example: number_format(1234.56, 2, ',', ' ');
// * return: '1 234,56'
number = (number + '').replace(',', '').replace(' ', '');
var n = !isFinite(+number) ? 0 : +number,
prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
s = '',
toFixedFix = function (n, prec) {
var k = Math.pow(10, prec);
return '' + Math.round(n * k) / k;
};
// Fix for IE parseFloat(0.55).toFixed(0) = 0;
s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
if (s[0].length > 3) {
s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
}
if ((s[1] || '').length < prec) {
s[1] = s[1] || '';
s[1] += new Array(prec - s[1].length + 1).join('0');
}
return s.join(dec);
}
$scope.activate = function () {
$scope.SelectedClient = $localStorage.SelectedClient;
$scope.ShowRankTracker = $scope.SelectedClient.isEnabledScraper;
$scope.refreshcontrol();
}
$scope.$on('client-changed', function (event, args) {
$scope.SelectedClient = $localStorage.SelectedClient;
$scope.ShowRankTracker = $scope.SelectedClient.isEnabledScraper;
$scope.refreshcontrol();
});
$scope.chartClick = function (event) {
//console.log("chartClick",event);
}
$scope.getCompetitorsList = function () {
if ($scope.CompetitorsList == undefined) {
$scope.CompetitorsList = [];
}
if ($scope.competitorCount == 0 && ($scope.CompetitorsList.length == 0 || $scope.defaultClientId != $scope.SelectedClient.id)) {
$scope.competitorCount = 1;
$scope.defaultClientId = $localStorage.SelectedClient.id;
let bob = { ClientID: $localStorage.SelectedClient.id };
hubservice.invokeServerGetArray("RankReport/CompetitorsList", bob).then(function (response) {
$scope.CompetitorsList = response.data.map(x => {
return x[0].toUpperCase() + x.substring(1);
});
$scope.competitorCount = 0;
});
}
}
$scope.refreshcontrol = function () {
$scope.RankTrackingBy = "Monthly";
$scope.filterOptions.dateRangePicker.date = {
startDate: moment().subtract(6, "months").startOf('month').toDate(),
endDate: moment().subtract(1, "months").endOf('month').toDate(),
};
if (hubservice.initCompleted) {
$scope.SelectedClient = $localStorage.SelectedClient;
$scope.ROISetDateRange(6);
$scope.getCompetitorsList();
} else {
hubservice.registerOnReady(function () {
$scope.SelectedClient = $localStorage.SelectedClient;
$scope.ROISetDateRange(6);
$scope.getCompetitorsList();
});
}
}
$scope.isStoreLocatorOnly = function () {
if ($scope.selectedPublisherROI.length == 1) {
if ($scope.selectedPublisherROI[0].id === "STORELOCATOR") {
return false;
}
}
return true;
}
$scope.setRankTrackingBy = function (ByReport) {
$scope.RankTrackingBy = ByReport;
$scope.ROISetDateRange(6);
}
$scope.getLabelRankTrackingBy = function () {
switch ($scope.RankTrackingBy) {
case "Monthly":
return "By Monthly";
break;
case "Category":
return "By Category";
break;
case "Region":
return "By Region";
break;
case "Competitor":
return "By Competitor";
break;
case "CompetitorCategory":
return "By Competitor Category";
break;
case "CompetitorRegion":
return "By Competitor Region";
break;
default:
break;
}
return $scope.RankTrackingBy;
}
$scope.LoadBaseChartRankTracking = function (data) {
am4core.ready(function () {
// Apply chart themes
am4core.useTheme(am4themes_animated);
// am4core.useTheme(am4themes_kelly);
// Create chart instance
var chart = am4core.create("rankTrackingGraph", am4charts.XYChart);
chart.colors.list = [
am4core.color("#00c0b7"),
am4core.color("#ed7d31")
];
chart.marginRight = 400;
// Add data
chart.data = data;
// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "groupBy";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 20;
chart.legend = new am4charts.Legend();
chart.legend.position = "top";
chart.exporting.menu = new am4core.ExportMenu();
// chart.exporting.menu.items[0].icon = "/images/icon/Download_icon.png";
chart.exporting.menu.align = "right";
chart.exporting.menu.verticalAlign = "top";
chart.exporting.filePrefix = $scope.SelectedClient.name;
chart.exporting.adapter.add("pdfmakeDocument", function (pdf, target) {
pdf.doc.pageOrientation = "landscape";
return pdf;
});
if ($scope.RankTrackingBy === "Category" || $scope.RankTrackingBy === "Monthly"
|| $scope.RankTrackingBy === "Region") {
chart.exporting.data.forEach(element => {
element.diffPerCent = element.diffPerCent + " %";
element.remainderPerCent = element.remainderPerCent + " %";
});
chart.exporting.dataFields = {
"clientID": "Client ID",
"groupBy": $scope.RankTrackingBy === "Monthly" ? "Month" : "Keywords and Categories",
"groupByDate": "Timestamp",
"numberInPack": "Number In Pack",
"totalPackResults": "Total Pack Results",
"diffPerCent": "Ranking Visibility",
"remainderPerCent": "Ranking Opportunity"
};
if ($scope.RankTrackingBy === "Region") {
chart.exporting.dataFields["groupBy"] = "Region";
}
if ($scope.CompetitorsList) {
for (let i = 0; i < $scope.CompetitorsList.length; i++) {
if (i == 0) {
chart.exporting.dataFields["competitor1"] = $localStorage.SelectedClient.name;
}
else {
chart.exporting.dataFields["competitor" + (i + 1)] = $scope.CompetitorsList[i];
}
if (i == $scope.CompetitorsList.length - 1) {
chart.exporting.dataFields["competitorOther"] = "Other";
}
}
}
}
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
// Create series
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueY = "diffPerCent";
series.dataFields.categoryX = "groupBy";
series.name = "Ranking Visibility";
series.tooltipText = "{name}: [bold]{valueY}[/]%";
series.stacked = true;
series.columns.template.width = am4core.percent(25);
series.columns.template.width = 35;
var bullet = series.bullets.push(new am4charts.CircleBullet());
bullet.circle.stroke = am4core.color("#fff");
bullet.circle.strokeWidth = 2;
series.fillOpacity = 0.3;
var series2 = chart.series.push(new am4charts.ColumnSeries());
series2.dataFields.valueY = "remainderPerCent";
series2.dataFields.categoryX = "groupBy";
series2.name = "Ranking Opportunity";
series2.tooltipText = "{name}: [bold]{valueY}[/]%";
series2.stacked = true;
series2.fillOpacity = 0.3;
series2.columns.template.width = am4core.percent(25);
series2.columns.template.width = 35;
var bullet = series2.bullets.push(new am4charts.CircleBullet());
bullet.circle.stroke = am4core.color("#fff");
bullet.circle.strokeWidth = 2;
// Add cursor
chart.cursor = new am4charts.XYCursor();
// Add scrollbar
chart.scrollbarX = new am4core.Scrollbar();
chart.scrollbarX.startGrip.background.fill = am4core.color("#9cd4fd");
chart.scrollbarX.endGrip.background.fill = am4core.color("#9cd4fd");
chart.scrollbarX.thumb.background.fill = am4core.color("#9cd4fd");
chart.scrollbarX.startGrip.icon.stroke = am4core.color("#8A5658");
chart.scrollbarX.endGrip.icon.stroke = am4core.color("#8A5658");
// Applied on hover
chart.scrollbarX.startGrip.background.states.getKey("hover").properties.fill = am4core.color("#9cd4fd");
chart.scrollbarX.endGrip.background.states.getKey("hover").properties.fill = am4core.color("#9cd4fd");
chart.scrollbarX.thumb.background.states.getKey("hover").properties.fill = am4core.color("#9cd4fd");
// Applied on mouse down
chart.scrollbarX.startGrip.background.states.getKey("down").properties.fill = am4core.color("#9cd4fd");
chart.scrollbarX.endGrip.background.states.getKey("down").properties.fill = am4core.color("#9cd4fd");
chart.scrollbarX.thumb.background.states.getKey("down").properties.fill = am4core.color("#9cd4fd");
if (data.length > 6) {
chart.events.on("ready", function () {
categoryAxis.zoomToIndexes(0, 7);
});
var label = categoryAxis.renderer.labels.template;
label.wrap = true;
label.maxWidth = 100;
}
}); // end am4core.ready()
}
//Rank Tracking - By Competitor
$scope.LoadBaseChartCompetitorGraph = function (data) {
am4core.ready(function () {
am4core.useTheme(am4themes_animated);
// Create chart instance
var chart = am4core.create("rankTrackingGraph", am4charts.XYChart);
chart.colors.list = [
am4core.color("#00c0b7"),
am4core.color("#0d1f42"),
am4core.color("#9dcc43"),
am4core.color("#0086aa"),
am4core.color("#ff7900"),
am4core.color("#4c9900"),
am4core.color("#6affff"),
am4core.color("#e58628"),
am4core.color("#fe5e46")
];
// Export
/* Create axes */
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "groupBy";
//categoryAxis.renderer.minGridDistance = 30;
categoryAxis.renderer.cellStartLocation = 0.2;
categoryAxis.renderer.cellEndLocation = 0.8;
/* Create value axis */
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
chart.data = data;
var chartData = $scope.RankTrackerGraphCompetitor();
//console.log("chartData", chartData);
chart.graphs = $scope.RankTrackerGraphCompetitor();
if (chart.graphs != null && chart.graphs != "undefined" && chart.graphs.length > 0) {
chart.graphs[0].valueField = "diffPerCent";
// if(chartData.length > 7)
// {
// chart.graphs[1].valueField = chartData[0].valueField;
// chart.graphs[2].valueField = chartData[1].valueField;
// chart.graphs[3].valueField = chartData[2].valueField;
// chart.graphs[4].valueField = chartData[3].valueField;
// chart.graphs[5].valueField = chartData[4].valueField;
// chart.graphs[6].valueField = chartData[5].valueField;
// chart.graphs[7].valueField = chartData[6].valueField;
// }
// else
// {
// chart.graphs[1].valueField = chartData[0].valueField;
// chart.graphs[2].valueField = chartData[1].valueField;
// chart.graphs[3].valueField = chartData[2].valueField;
// chart.graphs[4].valueField = chartData[3].valueField;
// chart.graphs[5].valueField = chartData[4].valueField;
// chart.graphs[6].valueField = chartData[5].valueField;
// chart.graphs[7].valueField = chartData[6].valueField;
// chart.graphs[8].valueField = chartData[7].valueField;
// }
}
chart.exporting.data.forEach(element => {
element.diffPerCent = element.diffPerCent + " %";
element.remainderPerCent = element.remainderPerCent + " %";
});
chart.exporting.dataFields = {
"clientID": "Client ID",
"groupBy": $scope.RankTrackingBy === "CompetitorRegion" ? "Region" : "Month",
"groupByDate": "Timestamp",
"numberInPack": "Number In Pack",
"totalPackResults": "Total Pack Results",
"diffPerCent": "Ranking Visibility",
"remainderPerCent": "Ranking Opportunity"
};
if ($scope.RankTrackingBy == "CompetitorCategory") {
chart.exporting.dataFields["groupBy"] = "Keyword and Category";
}
if ($scope.CompetitorsList) {
for (let i = 0; i < $scope.CompetitorsList.length; i++) {
// if (i == 0) {
// chart.exporting.dataFields["competitor1"] = $localStorage.SelectedClient.name;
// }
// else {
chart.exporting.dataFields["competitor" + (i + 1)] = $scope.CompetitorsList[i];
// }
if (i == $scope.CompetitorsList.length - 1) {
chart.exporting.dataFields["competitorOther"] = "Other";
}
}
}
function createSeries(title, field, name) {
/* Create series */
var columnSeries = chart.series.push(new am4charts.ColumnSeries());
columnSeries.name = title;
columnSeries.dataFields.valueY = field;
columnSeries.dataFields.categoryX = "groupBy";
columnSeries.columns.template.tooltipText = "[#fff]{name} :\n[/][#fff]{valueY}[/] [#fff]{additional}[/][#fff]%";
columnSeries.columns.template.propertyFields.fillOpacity = "fillOpacity";
columnSeries.columns.template.propertyFields.stroke = "stroke";
columnSeries.columns.template.propertyFields.strokeWidth = "strokeWidth";
columnSeries.columns.template.propertyFields.strokeDasharray = "columnDash";
columnSeries.tooltip.label.textAlign = "middle";
columnSeries.fillOpacity = 0.3;
columnSeries.columns.template.width = 25;
columnSeries.columns.template.width = am4core.percent(100);
columnSeries.tooltipText = "[#fff]{name} :\n[/][#fff]{valueY}[/] [#fff]{additional}[/][#fff]%";
var bulletColumn = columnSeries.bullets.push(new am4charts.Bullet());
var circleColumn = bulletColumn.createChild(am4core.Circle);
circleColumn.radius = 3;
circleColumn.strokeWidth = 1;
}
for (let c = 0; c < chart.graphs.length; c++) {
var series1 = createSeries(chart.graphs[c].title, chart.graphs[c].valueField, chart.graphs[c].valueField);
}
// chart.graphs.forEach(element => {
// addGraphReputationChart(element, 20);
// });
chart.legend = new am4charts.Legend();
chart.cursor = new am4charts.XYCursor();
chart.legend.useDefaultMarker = true;
chart.legend.position = "top";
chart.exporting.menu = new am4core.ExportMenu();
// chart.exporting.menu.items[0].icon = "/images/icon/Download_icon.png";
chart.exporting.menu.align = "right";
chart.exporting.menu.verticalAlign = "top";
chart.exporting.filePrefix = $scope.SelectedClient.name;
chart.exporting.adapter.add("pdfmakeDocument", function (pdf, target) {
pdf.doc.pageOrientation = "landscape";
return pdf;
});
// Add scrollbar
chart.scrollbarX = new am4core.Scrollbar();
chart.scrollbarX.startGrip.background.fill = am4core.color("#9cd4fd");
chart.scrollbarX.endGrip.background.fill = am4core.color("#9cd4fd");
chart.scrollbarX.thumb.background.fill = am4core.color("#9cd4fd");
chart.scrollbarX.startGrip.icon.stroke = am4core.color("#8A5658");
chart.scrollbarX.endGrip.icon.stroke = am4core.color("#8A5658");
// Applied on hover
chart.scrollbarX.startGrip.background.states.getKey("hover").properties.fill = am4core.color("#9cd4fd");
chart.scrollbarX.endGrip.background.states.getKey("hover").properties.fill = am4core.color("#9cd4fd");
chart.scrollbarX.thumb.background.states.getKey("hover").properties.fill = am4core.color("#9cd4fd");
// Applied on mouse down
chart.scrollbarX.startGrip.background.states.getKey("down").properties.fill = am4core.color("#9cd4fd");
chart.scrollbarX.endGrip.background.states.getKey("down").properties.fill = am4core.color("#9cd4fd");
chart.scrollbarX.thumb.background.states.getKey("down").properties.fill = am4core.color("#9cd4fd");
if (data.length > 6) {
chart.events.on("ready", function () {
categoryAxis.zoomToIndexes(0, 7);
});
var label = categoryAxis.renderer.labels.template;
label.wrap = true;
label.maxWidth = 100;
}
}); // end am4core.ready()
}
$scope.GetRankTrackingData = function () {
$scope.RTlineIsLoading = true;
let bob = $scope.gethubDataForDateRangeQuery_RankTraking();
bob.View = $scope.RankTrackingBy;
hubservice.invokeServerGetArray("RankReport", bob).then(function (response) {
$scope.LoadBaseChartRankTracking(response.data);
$scope.RTlabels = Enumerable.From(response.data)
.Select(function (x) {
return x.groupBy
}).ToArray();
$scope.RTseries = ['Ranking Visibility', 'Ranking Opportunity'];
let diffPerCent = Enumerable.From(response.data)
.Select(function (x) {
return x.diffPerCent
}).ToArray();
let RemainderPerCent = Enumerable.From(response.data)
.Select(function (x) {
return x.remainderPerCent
}).ToArray();
$scope.RTData = [diffPerCent, RemainderPerCent];
$scope.RTlineIsLoading = false;
if ($scope.isLoadChart && $scope.RTData[0].length == 0) {
$(document).ready(function () {
$("#popupData1").modal('show');
});
return;
}
if ($scope.RankTrackingBy === "Competitor" || $scope.RankTrackingBy === "CompetitorCategory" || $scope.RankTrackingBy === "CompetitorRegion") {
$scope.LoadBaseChartCompetitorGraph(response.data);
}
});
}
var clearGraph = function () {
let x = $scope.lineChartOptions.graphs.length;
for (let index = 0; index < x; index++) {
$scope.lineChart.removeGraph($scope.lineChartOptions.graphs[0]);
}
$scope.lineChart.graphs.splice(0, $scope.lineChartOptions.graphs.length);
$scope.lineChart.categoryField = "groupBy";
}
$scope.runReport = function () {
let urlPrefec = "";
$scope.isLastSixMonth = false;
let st = moment($scope.filterOptions.dateRangePicker.date.startDate);
let ed = moment($scope.filterOptions.dateRangePicker.date.endDate);
let NumberMonth = ed.diff(st, "month");
//alert(NumberMonth)
if (NumberMonth === 0) {//Show Weeks
urlPrefec = "/week";
}
if (NumberMonth == 5) {
$scope.isLastSixMonth = true;
}
//$scope.ROIlineIsLoading = true;
$scope.GetRankTrackingData();
}
$scope.gethubDataForDateRangeQuery_RankTraking = function () {
let hubDataForDateRangeQuery = {};
hubDataForDateRangeQuery.ClientId = $localStorage.SelectedClient.id;
let startDay = moment($scope.filterOptions.dateRangePicker.date.startDate).toDate().getDate();
let startMonth = moment($scope.filterOptions.dateRangePicker.date.startDate).toDate().getMonth();
let startYear = moment($scope.filterOptions.dateRangePicker.date.startDate).toDate().getFullYear();
let endDay = moment($scope.filterOptions.dateRangePicker.date.endDate).toDate().getDate();
let endMonth = moment($scope.filterOptions.dateRangePicker.date.endDate).toDate().getMonth();
let endYear = moment($scope.filterOptions.dateRangePicker.date.endDate).toDate().getFullYear();
$scope.startDate = new Date(
startYear,
startMonth,
startDay,
2,
0,
0
).toISOString();
$scope.endDate = new Date(
endYear,
endMonth,
endDay + 1,
1,
59,
59
).toISOString();
hubDataForDateRangeQuery.startDate = new Date(
startYear,
startMonth,
startDay,
2,
0,
0
).toISOString(); //$scope.filterOptions.dateRangePicker.date.startDate.toISOString();
hubDataForDateRangeQuery.endDate = new Date(
endYear,
endMonth,
endDay + 1,
1,
59,
59
).toISOString();
return hubDataForDateRangeQuery;
}
$scope.ROISetDateRange = function (NumberMonth) {
if ($scope.timeoutId && $scope.timeoutId != 0) {
clearTimeout($scope.timeoutId);
}
$scope.timeoutId = setTimeout(() => {
$scope.runReport();
}, 1000);
}
$scope.checkLocationCount = function () {
if (hubservice.cache["locationGridCache" + $localStorage.SelectedClient.id]) {
let locList = hubservice.cache["locationGridCache" + $localStorage.SelectedClient.id];
if (locList.length > 20) {
$scope.ShowTopBottomVolumeRating = true;
} else {
$scope.ShowTopBottomVolumeRating = false;
}
}
}
$scope.exportRankTracking = function () {
$scope.lineChart.graphs.forEach(element => {
element.labelText = "[[value]]%";
});
$scope.lineChart.zoomOut();
setTimeout($scope.export_png($scope.lineChart), 100);
}
$scope.activate();
}
})();
var amStackCol = function (chart) {
// Check if enabled
if (chart.valueAxes === undefined || chart.valueAxes.length === 0 || !chart.valueAxes[0].stackByValue)
return;
// Disable built-in stacking
chart.valueAxes[0].stackType = "none";
// Prepare all graphs
for (var i = 0; i < chart.graphs.length; i++) {
var graph = chart.graphs[i];
if (!graph.stackByValueDone) {
graph.originalValueField = graph.valueField;
graph.valueField = graph.originalValueField + "Close";
graph.openField = graph.originalValueField + "Open";
graph.stackByValueDone = true;
}
graph.clustered = false;
if (graph.labelText)
graph.labelText = graph.labelText.split("[[value]]").join("[[" + graph.originalValueField + "]]");
if (graph.balloonText)
graph.balloonText = graph.balloonText.split("[[value]]").join("[[" + graph.originalValueField + "]]");
}
// Go through each category and order values
for (var i = 0; i < chart.dataProvider.length; i++) {
// Assemble intermediate array of data point items
var dp = chart.dataProvider[i];
var items = [];
var sum = 0;
for (var x = 0; x < chart.graphs.length; x++) {
var graph = chart.graphs[x];
items.push({
"graph": graph,
"value": dp[graph.originalValueField]
});
}
// Order according to value
items.sort(function (a, b) {
return b.value - a.value;
});
// Calculate open and close fields
var offset = 0;
for (var x = 0; x < items.length; x++) {
var item = items[x];
dp[item.graph.openField] = offset;
dp[item.graph.valueField] = offset + dp[item.graph.originalValueField];
offset = dp[item.graph.valueField];
}
}
}
/**
* Plugin: Order stacked graphs within each
* category by their value
* Relies on `stackByValue` being set in value
* aixs config
*/
//AmCharts.addInitHandler(function(chart) {amStackCol(chart)}, ["serial"]);