Added multi-datasets bar chart. Added organization in/out chart.

This commit is contained in:
Christian P. MOMON 2021-01-23 04:41:23 +01:00
parent 6a02eec24b
commit 6e3b73938e
6 changed files with 89 additions and 11 deletions

View file

@ -70,6 +70,7 @@ public class FederationStatsPage
data.setContent("turnoutChart", Htmlizer.htmlizeOrganizationTurnoutChart(federation.getOrganizations()));
data.setContent("organizationCountryChart", Htmlizer.htmlizeOrganizationCountryChart(federation.getOrganizations()));
data.setContent("organizationCountChart", Htmlizer.htmlizeOrganizationCountChart(federation));
data.setContent("organizationInOutChart", Htmlizer.htmlizeOrganizationInOutChart(federation));
data.setContent("hostServerTypeChart", Htmlizer.htmlizeHostServerTypeChart(federation.getAllServices()));
data.setContent("hostProviderTypeChart", Htmlizer.htmlizeHostProviderTypeChart(federation.getAllServices()));

View file

@ -327,6 +327,43 @@ public class Htmlizer
return result;
}
/**
* Htmlize organization in out chart.
*
* @param federation
* the federation
* @return the string
* @throws StatoolInfosException
* the statool infos exception
*/
public static String htmlizeOrganizationInOutChart(final Federation federation) throws StatoolInfosException
{
String result;
BarChart chart = new BarChart("Entrées/Sorties");
// chart.setStacked(true);
chart.addDataset("Entrées");
PathPropertyList values = federation.getByYearPrefix("metrics.members.in").sortByPath();
for (PathProperty property : values)
{
chart.getLabels().add(property.getLeaf());
chart.add(0, Double.parseDouble(property.getValue()), ChartColor.GREEN);
}
chart.addDataset("Sorties");
values = federation.getByYearPrefix("metrics.members.out").sortByPath();
for (PathProperty property : values)
{
chart.add(1, Double.parseDouble(property.getValue()), ChartColor.RED);
}
result = BarChartView.build(chart);
//
return result;
}
/**
* Htmlize organization turnout chart.
*

View file

@ -34,6 +34,7 @@ public class BarChart
private boolean displayTitle;
private StringList labels;
private BarChartDatasets datasets;
private boolean stacked;
/**
* Instantiates a new bar chart.
@ -47,6 +48,22 @@ public class BarChart
this.displayTitle = true;
this.labels = new StringList();
this.datasets = new BarChartDatasets();
this.stacked = false;
}
/**
* Adds the.
*
* @param datasetIndex
* the dataset index
* @param value
* the value
* @param color
* the color
*/
public void add(final int datasetIndex, final double value, final ChartColor color)
{
this.datasets.get(datasetIndex).add(new BarChartData(null, value, color));
}
/**
@ -151,11 +168,21 @@ public class BarChart
return this.displayTitle;
}
public boolean isStacked()
{
return this.stacked;
}
public void setDisplayTitle(final boolean displayTitle)
{
this.displayTitle = displayTitle;
}
public void setStacked(final boolean stacked)
{
this.stacked = stacked;
}
public void setTitle(final String title)
{
this.title = title;

View file

@ -39,13 +39,13 @@ public class BarChartView
/**
* Builds the.
*
* @param bar
* @param chart
* the bar
* @return the string
* @throws StatoolInfosException
* the statool infos exception
*/
public static String build(final BarChart bar) throws StatoolInfosException
public static String build(final BarChart chart) throws StatoolInfosException
{
String result;
@ -54,17 +54,17 @@ public class BarChartView
String source = XidynUtils.load(BarChartView.class.getResource("/fr/devinsy/statoolinfos/htmlize/charts/barChartView.xhtml"));
result = XidynUtils.extractBodyContent(source);
result = result.replace("myChart", "myChart_" + DigestUtils.sha1Hex(bar.getTitle() + "barChart"));
result = result.replace("myChart", "myChart_" + DigestUtils.sha1Hex(chart.getTitle() + "barChart"));
StringList lines = new StringList();
lines.append("{\n");
lines.append(" type: 'bar',\n");
lines.append(" data: \n");
lines.append(" {\n");
lines.append(" labels: ").append(ChabuUtils.toJSonStrings(bar.getLabels())).appendln(",");
lines.append(" labels: ").append(ChabuUtils.toJSonStrings(chart.getLabels())).appendln(",");
lines.append(" datasets: \n");
lines.append(" [\n");
for (BarChartDataset dataset : bar.getDatasets())
for (BarChartDataset dataset : chart.getDatasets())
{
lines.append(" {\n");
lines.append(" label: '").append(escape(dataset.getName())).appendln("',");
@ -72,10 +72,10 @@ public class BarChartView
lines.append(" backgroundColor: ").append(ChabuUtils.toJSonStrings(dataset.getColors().getCodes())).appendln(",");
lines.append(" borderColor: ").append(ChabuUtils.toJSonStrings(dataset.getColors().getLights())).appendln(",");
lines.append(" borderWidth: ").append(dataset.getBorderWidth()).appendln(",");
lines.append(" }\n");
lines.append(" ]\n");
lines.append(" },\n");
lines.append(" },\n");
}
lines.append(" ]\n");
lines.append(" },\n");
lines.append(" options: \n");
lines.append(" {\n");
lines.append(" maintainAspectRatio: false,\n");
@ -89,7 +89,12 @@ public class BarChartView
lines.append(" title:\n");
lines.append(" {\n");
lines.append(" display: true,\n");
lines.append(" text: '").append(escape(bar.getTitle())).appendln("'");
lines.append(" text: '").append(escape(chart.getTitle())).appendln("'");
lines.append(" },\n");
lines.append(" tooltips:\n");
lines.append(" {\n");
lines.append(" mode: 'index',\n");
lines.append(" intersect: false\n");
lines.append(" },\n");
lines.append(" scales: \n");
lines.append(" {\n");
@ -98,7 +103,8 @@ public class BarChartView
lines.append(" ticks: \n");
lines.append(" {\n");
lines.append(" beginAtZero: true\n");
lines.append(" }\n");
lines.append(" },\n");
lines.append(" stacked: ").append(chart.isStacked()).appendln(",");
lines.append(" }],\n");
lines.append(" yAxes:\n");
lines.append(" [{\n");
@ -107,7 +113,8 @@ public class BarChartView
lines.append(" beginAtZero: true,\n");
lines.append(" suggestedMax: 10,\n");
lines.append(" precision: 0\n");
lines.append(" }\n");
lines.append(" },\n");
lines.append(" stacked: ").append(chart.isStacked()).appendln(",");
lines.append(" }]\n");
lines.append(" }\n");
lines.append(" }\n");

View file

@ -46,6 +46,11 @@ var myChart = new Chart(ctx,
display: true,
text: 'a title'
},
tooltips:
{
mode: 'index',
intersect: false
},
scales:
{
xAxes:

View file

@ -19,6 +19,7 @@
<div id="turnoutChart" class="chartborder" style="width: 250px; height: 200px; display: inline-block;"/>
<div id="organizationCountryChart" class="chartborder" style="width: 250px; height: 200px; display: inline-block;"/>
<div id="organizationCountChart" class="chartborder" style="width: 250px; height: 200px; display: inline-block;"/>
<div id="organizationInOutChart" class="chartborder" style="width: 250px; height: 200px; display: inline-block;"/>
</div>
<div>
<div id="hostServerTypeChart" class="chartborder" style="width: 250px; height: 200px; display: inline-block;"/>