Refactored charts. Finished created/closed charts.

This commit is contained in:
Christian P. MOMON 2020-01-22 18:13:34 +01:00
parent 1a4fb278fa
commit 77aec3c202
7 changed files with 115 additions and 30 deletions

View file

@ -158,7 +158,7 @@ public class CreatedConcludedCountChartView
* @throws AgirStatoolException
* the agir statool exception
*/
public static String buildLastMonth(final String title, final Project project, final int monthCount) throws AgirStatoolException
public static String buildLastMonths(final String title, final Project project, final int monthCount) throws AgirStatoolException
{
String result;
@ -176,7 +176,7 @@ public class CreatedConcludedCountChartView
* @return
* @throws AgirStatoolException
*/
public static String buildLastYear(final String title, final Project project) throws AgirStatoolException
public static String buildPreviousYear(final String title, final Project project) throws AgirStatoolException
{
String result;

View file

@ -58,14 +58,17 @@ public class ProjectPage
data.setContent("agirLink", project.getName());
data.setAttribute("agirLink", "href", "https://agir.april.org/projects/" + project.getIdentifier() + "/issues");
data.setContent("issueCreatedClosed3MonthsChart", CreatedConcludedCountChartView.buildLastYear("Created/closed last year Count", project));
data.setContent("issueCreatedClosed6MonthsChart", CreatedConcludedCountChartView.buildLastMonth("Created/closed 6 months Count", project, 6));
data.setContent("issueCreatedClosedChart", CreatedConcludedCountChartView.buildFull("Created/closed Count", project));
data.setContent("issueCreatedClosed3MonthsChart", CreatedConcludedCountChartView.buildLastMonths("Created/closed 3 months Count", project, 3));
data.setContent("issueCreatedClosed6MonthsChart", CreatedConcludedCountChartView.buildLastMonths("Created/closed 6 months Count", project, 6));
data.setContent("issueCreatedClosedPreviousYearChart", CreatedConcludedCountChartView.buildPreviousYear("Created/closed last year Count", project));
data.setContent("issueCreatedClosedFullChart", CreatedConcludedCountChartView.buildFull("Created/closed Count", project));
data.setContent("issueRawChart", IssueStatChartView.build("Issue Raw Count", project));
data.setContent("issueGroupedChart", IssueStatChartView.buildGrouped("Issue Grouped Count", project));
data.setContent("unassignedRawChart", UnassignedPolarChartView.build("Unassigned Raw Count", project));
data.setContent("unassignedGroupedChart", UnassignedPolarChartView.buildGrouped("Unassigned Grouped Count", project));
data.setContent("issueCreatedClosed6MonthsChartA", CreatedConcludedCountChartView.buildLastMonths("Created/closed 6 months CountA", project, 6));
data.setContent("issueCreatedClosed6MonthsChartB", CreatedConcludedCountChartView.buildLastMonths("Created/closed 6 months CountB", project, 6));
String projectsRawView = ProjectsRawView.build(project);
data.setContent("projectsRawView", projectsRawView);

View file

@ -229,25 +229,41 @@ h3 span
/***** GENERIC BUTTONS *****/
/*******/
a.button
.button
{
background-color: #2E2D30;
color: #FDCA59;
background-color: #e7e7e7;
border: none;
color: black;
padding: 4px 15px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
margin-top:15px;
margin-bottom:15px;
padding:10px;
display: inline-block;
font-family: ITCAvantGardeStd-Md, Arial, Helvetica, sans-serif;
font-size: 16px;
width: 110px;
}
a.button:hover
.button:hover
{
background-color:#5f5d63;
font-weight: bold;
}
.unselected
{
background-color: #e7e7e7;
color: black;
}
.selected
{
background-color: #008CBA;
color: white;
}
/******/
/* The switch - the box around the slider */
.switch {

View file

@ -11,7 +11,7 @@
<script src="Chart.bundle.min.js"></script>
</head>
<body>
<div style="width: 400px; height: 200px; text-align: center; margin: 0 0; border: 1px solid red;">
<div style="width: 100%; height: 100%; text-align: center; margin: 0 0; border: 1px solid red;">
<canvas id="myChart" width="100%" height="100%"></canvas>
<script>
var ctx = document.getElementById('myChart');

View file

@ -11,7 +11,7 @@
<script src="Chart.bundle.min.js"></script>
</head>
<body>
<div style="width: 100%; height: 400px; text-align: center; margin: 0 0; border: 1px solid red;">
<div style="width: 100%; height: 100%; text-align: center; margin: 0 0; border: 1px solid red;">
<canvas id="myChart" width="100%" height="100%"></canvas>
<script>
var ctx = document.getElementById('myChart');

View file

@ -11,7 +11,7 @@
<script src="Chart.bundle.min.js"></script>
</head>
<body>
<div style="width: 340px; height: 200px; text-align: center; margin: 0 0; border: 1px solid red;">
<div style="width: 100%; height: 100%; text-align: center; margin: 0 0; border: 1px solid red;">
<canvas id="myChart" width="100%" height="100%"></canvas>
<script>
var ctx = document.getElementById('myChart');

View file

@ -13,11 +13,22 @@
<body>
<div style="margin: 10px;">
<h1><a href="index.xhtml">Agir Statool</a> Project <a id="agirLink" href="#">n/a</a></h1>
<div id="issueCreatedClosed6MonthsChart" style="width: 49%; display: inline-block;">ISSUES CREATED/CLOSED 6 MONTHS CHART</div>
<div id="issueCreatedClosed3MonthsChart" style="width: 49%; display: inline-block;">ISSUES CREATED/CLOSED 3 MONTHS CHART</div>
<div id="issueCreatedClosedChart">ISSUES CREATED/CLOSED CHART</div>
<div style="margin: 4px;">
<span style="display: inline-block; padding-top: 6px; vertical-align: text-top;">Grouped</span>
<div>
<div style="margin: 5px;">
<a id="createClose3MonthsButton" href="#" class="button" onclick="javascript:createClosedSelect('3months');">3 months</a>
<a id="createClose6MonthsButton" href="#" class="button" onclick="javascript:createClosedSelect('6months');">6 months</a>
<a id="createCloseFullButton" href="#" class="button selected" onclick="javascript:createClosedSelect('full');">Full</a>
<a id="createClosePreviousYearButton" href="#" class="button" onclick="javascript:createClosedSelect('previousYear');">Previous Year</a>
<a href="#part2" class="button" style="margin-left: 75px;" >Down</a>
</div>
<div id="issueCreatedClosed3MonthsChart" style="display: none; width: 50%; height: 400px;">CREATED/CLOSED 3 MONTHS CHART</div>
<div id="issueCreatedClosed6MonthsChart" style="display: none; width: 50%; height: 400px;">CREATED/CLOSED 6 MONTHS CHART</div>
<div id="issueCreatedClosedPreviousYearChart" style="display: none; width: 50%; height: 400px;">CREATED/CLOSED PREVIOUS YEAR CHART</div>
<div id="issueCreatedClosedFullChart" style="height: 400px;">CREATED/CLOSED FULL CHART</div>
</div>
<div id="part2" style="margin: 4px;">
<span style="display: inline-block; padding-top: 6px; vertical-align: text-top;"><a href="#part2">Grouped</a></span>
<label class="switch">
<input type="checkbox" onclick="javascript:projectsViewFlip();" />
<span class="slider round"></span>
@ -25,8 +36,9 @@
</div>
<div id="rawView">
<div>
<div id="issueRawChart" style="display: inline-block;">ISSUES BAR CHART</div>
<div id="unassignedRawChart" style="display: inline-block;"></div>
<div id="issueRawChart" style="width: 400px; height: 200px; display: inline-block;">ISSUES BAR CHART</div>
<div id="unassignedRawChart" style="width: 340px; height: 200px; display: inline-block;"></div>
<div id="issueCreatedClosed6MonthsChartA" style="width: 340px; height: 200px; display: inline-block;">CREATED/CLOSED 6 MONTHS CHART</div>
</div>
<br/>
<div>
@ -35,8 +47,9 @@
</div>
<div id="groupedView" style="display: none;">
<div>
<div id="issueGroupedChart" style="display: inline-block;">ISSUES BAR CHART</div>
<div id="unassignedGroupedChart" style="display: inline-block;"></div>
<div id="issueGroupedChart" style="width: 400px; height: 200px; display: inline-block;">ISSUES BAR CHART</div>
<div id="unassignedGroupedChart" style="width: 340px; height: 200px; display: inline-block;"></div>
<div id="issueCreatedClosed6MonthsChartB" style="width: 340px; height: 200px; display: inline-block;">CREATED/CLOSED 6 MONTHS CHARTB</div>
</div>
<br/>
<div>
@ -44,6 +57,59 @@
</div>
</div>
</div>
<script type="text/javascript">
function createClosedSelect(selection)
{
if (selection == '3months')
{
document.getElementById ('createClose3MonthsButton').classList.add('selected');
document.getElementById ('createClose6MonthsButton').classList.remove('selected');
document.getElementById ('createClosePreviousYearButton').classList.remove('selected');
document.getElementById ('createCloseFullButton').classList.remove('selected');
document.getElementById ('issueCreatedClosed3MonthsChart').style.display = 'block';
document.getElementById ('issueCreatedClosed6MonthsChart').style.display = 'none';
document.getElementById ('issueCreatedClosedPreviousYearChart').style.display = 'none';
document.getElementById ('issueCreatedClosedFullChart').style.display = 'none';
}
else if (selection == '6months')
{
document.getElementById ('createClose3MonthsButton').classList.remove('selected');
document.getElementById ('createClose6MonthsButton').classList.add('selected');
document.getElementById ('createClosePreviousYearButton').classList.remove('selected');
document.getElementById ('createCloseFullButton').classList.remove('selected');
document.getElementById ('issueCreatedClosed3MonthsChart').style.display = 'none';
document.getElementById ('issueCreatedClosed6MonthsChart').style.display = 'block';
document.getElementById ('issueCreatedClosedPreviousYearChart').style.display = 'none';
document.getElementById ('issueCreatedClosedFullChart').style.display = 'none';
}
else if (selection == 'previousYear')
{
document.getElementById ('createClose3MonthsButton').classList.remove('selected');
document.getElementById ('createClose6MonthsButton').classList.remove('selected');
document.getElementById ('createClosePreviousYearButton').classList.add('selected');
document.getElementById ('createCloseFullButton').classList.remove('selected');
document.getElementById ('issueCreatedClosed3MonthsChart').style.display = 'none';
document.getElementById ('issueCreatedClosed6MonthsChart').style.display = 'none';
document.getElementById ('issueCreatedClosedPreviousYearChart').style.display = 'block';
document.getElementById ('issueCreatedClosedFullChart').style.display = 'none';
}
else if (selection == 'full')
{
document.getElementById ('createClose3MonthsButton').classList.remove('selected');
document.getElementById ('createClose6MonthsButton').classList.remove('selected');
document.getElementById ('createClosePreviousYearButton').classList.remove('selected');
document.getElementById ('createCloseFullButton').classList.add('selected');
document.getElementById ('issueCreatedClosed3MonthsChart').style.display = 'none';
document.getElementById ('issueCreatedClosed6MonthsChart').style.display = 'none';
document.getElementById ('issueCreatedClosedPreviousYearChart').style.display = 'none';
document.getElementById ('issueCreatedClosedFullChart').style.display = 'block';
}
}
</script>
<script type="text/javascript">
var showRawView = true;