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 * @throws AgirStatoolException
* the agir statool exception * 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; String result;
@ -176,7 +176,7 @@ public class CreatedConcludedCountChartView
* @return * @return
* @throws AgirStatoolException * @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; String result;

View file

@ -58,14 +58,17 @@ public class ProjectPage
data.setContent("agirLink", project.getName()); data.setContent("agirLink", project.getName());
data.setAttribute("agirLink", "href", "https://agir.april.org/projects/" + project.getIdentifier() + "/issues"); 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("issueCreatedClosed3MonthsChart", CreatedConcludedCountChartView.buildLastMonths("Created/closed 3 months Count", project, 3));
data.setContent("issueCreatedClosed6MonthsChart", CreatedConcludedCountChartView.buildLastMonth("Created/closed 6 months Count", project, 6)); data.setContent("issueCreatedClosed6MonthsChart", CreatedConcludedCountChartView.buildLastMonths("Created/closed 6 months Count", project, 6));
data.setContent("issueCreatedClosedChart", CreatedConcludedCountChartView.buildFull("Created/closed Count", project)); 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("issueRawChart", IssueStatChartView.build("Issue Raw Count", project));
data.setContent("issueGroupedChart", IssueStatChartView.buildGrouped("Issue Grouped Count", project)); data.setContent("issueGroupedChart", IssueStatChartView.buildGrouped("Issue Grouped Count", project));
data.setContent("unassignedRawChart", UnassignedPolarChartView.build("Unassigned Raw Count", project)); data.setContent("unassignedRawChart", UnassignedPolarChartView.build("Unassigned Raw Count", project));
data.setContent("unassignedGroupedChart", UnassignedPolarChartView.buildGrouped("Unassigned Grouped 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); String projectsRawView = ProjectsRawView.build(project);
data.setContent("projectsRawView", projectsRawView); data.setContent("projectsRawView", projectsRawView);

View file

@ -229,25 +229,41 @@ h3 span
/***** GENERIC BUTTONS *****/ /***** GENERIC BUTTONS *****/
/*******/ /*******/
.button
a.button
{ {
background-color: #2E2D30; background-color: #e7e7e7;
color: #FDCA59; border: none;
text-decoration: none; color: black;
text-transform: uppercase; padding: 4px 15px;
margin-top:15px; text-align: center;
margin-bottom:15px; text-decoration: none;
padding:10px; display: inline-block;
display:inline-block; font-size: 16px;
font-family: ITCAvantGardeStd-Md, Arial, Helvetica, sans-serif; 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 */ /* The switch - the box around the slider */
.switch { .switch {

View file

@ -11,7 +11,7 @@
<script src="Chart.bundle.min.js"></script> <script src="Chart.bundle.min.js"></script>
</head> </head>
<body> <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> <canvas id="myChart" width="100%" height="100%"></canvas>
<script> <script>
var ctx = document.getElementById('myChart'); var ctx = document.getElementById('myChart');

View file

@ -11,7 +11,7 @@
<script src="Chart.bundle.min.js"></script> <script src="Chart.bundle.min.js"></script>
</head> </head>
<body> <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> <canvas id="myChart" width="100%" height="100%"></canvas>
<script> <script>
var ctx = document.getElementById('myChart'); var ctx = document.getElementById('myChart');

View file

@ -11,7 +11,7 @@
<script src="Chart.bundle.min.js"></script> <script src="Chart.bundle.min.js"></script>
</head> </head>
<body> <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> <canvas id="myChart" width="100%" height="100%"></canvas>
<script> <script>
var ctx = document.getElementById('myChart'); var ctx = document.getElementById('myChart');

View file

@ -13,11 +13,22 @@
<body> <body>
<div style="margin: 10px;"> <div style="margin: 10px;">
<h1><a href="index.xhtml">Agir Statool</a> Project <a id="agirLink" href="#">n/a</a></h1> <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>
<div id="issueCreatedClosed3MonthsChart" style="width: 49%; display: inline-block;">ISSUES CREATED/CLOSED 3 MONTHS CHART</div> <div style="margin: 5px;">
<div id="issueCreatedClosedChart">ISSUES CREATED/CLOSED CHART</div> <a id="createClose3MonthsButton" href="#" class="button" onclick="javascript:createClosedSelect('3months');">3 months</a>
<div style="margin: 4px;"> <a id="createClose6MonthsButton" href="#" class="button" onclick="javascript:createClosedSelect('6months');">6 months</a>
<span style="display: inline-block; padding-top: 6px; vertical-align: text-top;">Grouped</span> <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"> <label class="switch">
<input type="checkbox" onclick="javascript:projectsViewFlip();" /> <input type="checkbox" onclick="javascript:projectsViewFlip();" />
<span class="slider round"></span> <span class="slider round"></span>
@ -25,8 +36,9 @@
</div> </div>
<div id="rawView"> <div id="rawView">
<div> <div>
<div id="issueRawChart" style="display: inline-block;">ISSUES BAR CHART</div> <div id="issueRawChart" style="width: 400px; height: 200px; display: inline-block;">ISSUES BAR CHART</div>
<div id="unassignedRawChart" style="display: inline-block;"></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> </div>
<br/> <br/>
<div> <div>
@ -35,8 +47,9 @@
</div> </div>
<div id="groupedView" style="display: none;"> <div id="groupedView" style="display: none;">
<div> <div>
<div id="issueGroupedChart" style="display: inline-block;">ISSUES BAR CHART</div> <div id="issueGroupedChart" style="width: 400px; height: 200px; display: inline-block;">ISSUES BAR CHART</div>
<div id="unassignedGroupedChart" style="display: inline-block;"></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> </div>
<br/> <br/>
<div> <div>
@ -44,6 +57,59 @@
</div> </div>
</div> </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"> <script type="text/javascript">
var showRawView = true; var showRawView = true;