215 lines
9.1 KiB
Plaintext
215 lines
9.1 KiB
Plaintext
@* ROW 1 COL 2 - CARD: STACKED CHART ------------------------------------ *@
|
|
|
|
<div class="pv-menu k-content">
|
|
<div class="btn-group pull-right">
|
|
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
<i class="fa fa-ellipsis-h"></i>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li class="widget-full-screen"><a href="#" class="full-screen" onclick="pv.chart.menu.select('Stacked1');">Full Screen</a></li>
|
|
<li role="separator" class="divider widget-full-screen"></li>
|
|
<li>
|
|
<label>
|
|
<span class="switcherLbl">Mode</span>
|
|
</label>
|
|
<input type="checkbox" data-key="chartMode" name="chMode" id="chFDGraphMode" checked class="switcher" />
|
|
</li>
|
|
<li>
|
|
<label>
|
|
<span class="switcherLbl">Quantity As</span>
|
|
</label>
|
|
<input type="checkbox" data-key="uomMode" name="uomModeForecast" id="uomModeForecast" class="switcher px" />
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="pv-chart" id="chartStacked1" style="height: 100%;">
|
|
<div class="loadRotator">
|
|
<span>
|
|
<img class="valign-middle" src="@Url.Content("~/Content/images/loadFA.gif")" /> loading...
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// this partial view should be extracted into the jquery widget and store data in the private cache
|
|
var _projectsByStatusChartData = null;
|
|
init.push(function () {
|
|
@if (Request.Browser.Browser == "IE" && Request.Browser.MajorVersion < 11)
|
|
{
|
|
<text>AmCharts.ready(function (a) { projectsByStatusShowChartData(); });</text>
|
|
}
|
|
else
|
|
{
|
|
<text>projectsByStatusShowChartData();</text>
|
|
}
|
|
|
|
initChartMenu();
|
|
$("#cardStacked1").on("maximized", function () { invalidateChartSize("chartStacked1"); });
|
|
$("#cardStacked1").on("restored", function () { invalidateChartSize("chartStacked1"); });
|
|
});
|
|
|
|
function initChartMenu() {
|
|
$('#chFDGraphMode').switcher({
|
|
on_state_content: 'Quantity',
|
|
off_state_content: 'Cost'
|
|
});
|
|
$('#uomModeForecast').switcher({
|
|
on_state_content: '# Hours',
|
|
off_state_content: '# Resources'
|
|
});
|
|
|
|
//TODO: redraw chart without getting data from server. put loaded data into local variable and use it. chart.validateNow() clears bar charts;
|
|
$('#chFDGraphMode').click(function () {
|
|
saveForecastDashboardPreferences();
|
|
projectsByStatusShowChartData();
|
|
|
|
uomModeForecastEnable();
|
|
});
|
|
$('#uomModeForecast').click(function () {
|
|
|
|
$('#cardOpt1').optimuse('showPreloader');
|
|
$('#cardOpt1').optimuse('changeUOMMode', $(this).is(':checked'));
|
|
$('#cardOpt1').optimuse('hidePreloader');
|
|
$('#cardOpt1').optimuse('mouveBarTitles');
|
|
|
|
saveForecastDashboardPreferences();
|
|
projectsByStatusShowChartData();
|
|
});
|
|
|
|
uomModeForecastEnable();
|
|
}
|
|
|
|
function uomModeForecastEnable() {
|
|
var chFDGraphMode = $("input#chFDGraphMode.switcher");
|
|
if (chFDGraphMode.length > 0) {
|
|
var cheked = chFDGraphMode[0].checked;
|
|
if (cheked) {
|
|
$('#uomModeForecast').switcher('enable');
|
|
} else {
|
|
$('#uomModeForecast').switcher('disable');
|
|
}
|
|
}
|
|
}
|
|
|
|
// should be extracted as method of jquery widget
|
|
function projectsByStatusShowPreloader() {
|
|
//TODO: use the same approach for all charts. There is a problem with barChart (performance chart).
|
|
$("#chartStacked1").html("<div class='loadRotator'>\
|
|
<span>\
|
|
<img class='valign-middle' src='@Url.Content("~/Content/images/loadFA.gif")' /> loading...\
|
|
</span>\
|
|
</div>");
|
|
};
|
|
function projectsByStatusSetData(projectsByStatusChartData) {
|
|
_projectsByStatusChartData = projectsByStatusChartData;
|
|
};
|
|
function projectsByStatusShowChartData() {
|
|
var chart = findChart("chartStacked1");
|
|
chart.graphs = [];
|
|
|
|
var chartData = new Array();
|
|
var isQuantityMode = $('#chFDGraphMode').prop('checked');
|
|
var isUOMHoursMode = $('#uomModeForecast').prop('checked');
|
|
var graphMode = isQuantityMode ? (isUOMHoursMode ? "Hours" : "Resources") : "Cost";
|
|
|
|
if (_projectsByStatusChartData && _projectsByStatusChartData.Headers && _projectsByStatusChartData.Headers.length > 0) {
|
|
var offset = (new Date()).getTimezoneOffset() * 60 * 1000;
|
|
// gather all existing project status
|
|
var clrs = [];
|
|
var labels = {};
|
|
var uniqueColorIndex = 0;
|
|
for (var i = 0; i < _projectsByStatusChartData.Headers.length; i++) {
|
|
if (_projectsByStatusChartData.Headers[i].color && clrs.indexOf(_projectsByStatusChartData.Headers[i].color) == -1)
|
|
clrs.push(_projectsByStatusChartData.Headers[i].color);
|
|
}
|
|
// build graph lines
|
|
for (var i = 0; i < _projectsByStatusChartData.Headers.length; i++) {
|
|
var graphData = _projectsByStatusChartData.Headers[i];
|
|
if (graphData.type === graphMode) {
|
|
var graph = new AmCharts.AmGraph();
|
|
graph.title = graphData.label;
|
|
graph.balloonText = (isQuantityMode ? "" : "$") + "[[total]] at [[(new Date(category)).toDateString()]]";
|
|
graph.balloonFunction = function (graphDataItem, graph) {
|
|
var value = graphDataItem.values.close;
|
|
value = value || graphDataItem.values.value;
|
|
return (isQuantityMode ? "" : "$") + value.formatNumber(false) + " at " + (new Date(graphDataItem.category)).toDateString();
|
|
};
|
|
graph.valueField = "value" + i;
|
|
graph.bullet = "round";
|
|
graph.bulletAlpha = 0;
|
|
graph.bulletBorderColor = "#FFFFFF";
|
|
graph.bulletBorderThickness = 1;
|
|
graph.bulletSize = 5;
|
|
graph.lineThickness = 2;
|
|
graph.lineAlpha = 1;
|
|
|
|
if (graphData.color) {
|
|
graph.lineColor = graphData.color;
|
|
}
|
|
else {
|
|
if (labels[graphData.label])
|
|
graph.lineColor = labels[graphData.label];
|
|
else {
|
|
graph.lineColor = getUniqueColor(uniqueColorIndex++, clrs);
|
|
labels[graphData.label] = graph.lineColor;
|
|
}
|
|
}
|
|
graph.fillAlphas = graphData.lines.fill ? 0.7 : 0;
|
|
graph.stackable = graphData.stack;
|
|
|
|
var legend = new AmCharts.AmLegend();
|
|
|
|
legend.markerType = "square";
|
|
legend.markerSize = 11;
|
|
legend.marginRight = 10;
|
|
legend.marginLeft = 10;
|
|
legend.autoMargins = false;
|
|
legend.valueWidth = 5;
|
|
legend.align = "center";
|
|
chart.addLegend(legend);
|
|
|
|
chart.addGraph(graph);
|
|
|
|
var categoryAxis = chart.categoryAxis;
|
|
categoryAxis.gridAlpha = 0;
|
|
|
|
chart.valueAxes[0].unit = isQuantityMode ? "" : "$";
|
|
|
|
// in case when there is only one week in the result we should show two points: range start date - range end date
|
|
if (graphData.data.length === 1 && graphData.data[0] && graphData.data[0].length === 2) {
|
|
graphData.data.push(graphData.data[0].slice());
|
|
graphData.data[0][0] = _projectsByStatusChartData.PeriodStartDate;
|
|
}
|
|
|
|
for (var week = 0; week < graphData.data.length; week++) {
|
|
var date = graphData.data[week][0] + offset + 1;
|
|
var value = graphData.data[week][1];
|
|
|
|
var dataItem = {};
|
|
var addedItems = $.grep(chartData, function (x, index) {
|
|
return x.category && x.category == date;
|
|
});
|
|
if (addedItems.length > 0) {
|
|
dataItem = addedItems[0];
|
|
}
|
|
else {
|
|
chartData.push(dataItem);
|
|
}
|
|
dataItem.category = date;
|
|
dataItem["value" + i] = value;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
chart.validateNow();
|
|
updateChart("chartStacked1", chartData);
|
|
|
|
//var tspans = $("#chartStacked1").find('.amcharts-chart-div').find("text[text-anchor='end']").find("tspan[y='6']");
|
|
//if (!isQuantityMode) {
|
|
// tspans.append("$");
|
|
//}
|
|
}
|
|
</script>
|