ChartJS: new approach #10870
Description
Description
Based on discussions #8819 and #10849
I'll try to sum up the big lines:
- Have one and only component:
<p:chart />. There is no need to have multiple components, at worse<p:chart />should redirect to the proper renderer depending the type: lucky for us chartJS does the job for us. - Model abstraction: As of today, PF is responsible to implement chartJS API into Java. First, chartJS API is freaking big! Second, It's hard to follow chartjs model changes from one version to another, which makes us left behind compare to the version we are already using: this is frustrating for users.
- KISS:
<p:chart />could be a very simple JSF wrapper of chartJS, take a String as input, and handle a few ajax events out of the box. As it takes a String, users are free to either implement their own API and serialize it into JSON, or use existing solutions like https://github.com/xdev-software/chartjs-java-model (which is already 4.4 compatible and java 11 compatible since 1.0.2) - Deprecate current impl for 14
Describe the solution you would like
XHTML
<div class="card">
<h5>Plain JSON</h5>
<p:chart value="#{chartJsView.barModel}" style="width: 100%; height: 500px;">
<p:ajax event="itemSelect" listener="#{chartJsView.itemSelect}" update="growl"/>
</p:chart>
</div>
<div class="card">
<h5>XDEV ChartJS model</h5>
<p:chart value="#{chartJsView.barModel2}" style="width: 100%; height: 500px;">
<p:ajax event="itemSelect" listener="#{chartJsView.itemSelect}" update="growl"/>
</p:chart>
</div>JAVA
public void createBarModel() {
barModel = "{" +
" \"type\": \"bar\"," +
" \"data\": {" +
" \"datasets\": [" +
" {" +
" \"type\": \"bar\"," +
" \"data\": [" +
" 65," +
" 59," +
" 80," +
" 81," +
" 56," +
" 55," +
" 40" +
" ]," +
" \"label\": \"My First Dataset\"," +
" \"hidden\": false," +
" \"backgroundColor\": \"rgba(255, 99, 132, 0.2)\"," +
" \"borderColor\": \"rgb(255, 99, 132)\"," +
" \"borderWidth\": 1" +
" }," +
" {" +
" \"type\": \"bar\"," +
" \"data\": [" +
" 85," +
" 69," +
" 20," +
" 51," +
" 76," +
" 75," +
" 10" +
" ]," +
" \"label\": \"My Second Dataset\"," +
" \"hidden\": false," +
" \"backgroundColor\": \"rgba(255, 159, 64, 0.2)\"," +
" \"borderColor\": \"rgb(255, 159, 64)\"," +
" \"borderWidth\": 1" +
" }" +
" ]," +
" \"labels\": [" +
" \"January\"," +
" \"February\"," +
" \"March\"," +
" \"April\"," +
" \"May\"," +
" \"June\"," +
" \"July\"" +
" ]" +
" }," +
" \"options\": {" +
" \"responsive\": true," +
" \"maintainAspectRatio\": false," +
" \"barPercentage\": 0.9," +
" \"indexAxis\": \"x\"," +
" \"scales\": {" +
" \"y\": {" +
" \"offset\": true," +
" \"stacked\": false," +
" \"reverse\": false," +
" \"beginAtZero\": true," +
" \"ticks\": {" +
" \"autoSkip\": true," +
" \"mirror\": false" +
" }" +
" }" +
" }," +
" \"plugins\": {" +
" \"title\": {" +
" \"display\": true," +
" \"text\": \"Bar Chart\"" +
" }" +
" }" +
" }" +
"}";
}
// using XDEV ChartJS model
public void createBarModel2() {
barModel2 = new BarChart()
.setData(new BarData()
.addDataset(new BarDataset()
.setData(65, 59, 80, 81, 56, 55, 40)
.setLabel("My First Dataset")
.setBackgroundColor(new Color(255, 99, 132, 0.2))
.setBorderColor(new Color(255, 99, 132))
.setBorderWidth(1))
.addDataset(new BarDataset()
.setData(85, 69, 20, 51, 76, 75, 10)
.setLabel("My Second Dataset")
.setBackgroundColor(new Color(255, 159, 64, 0.2))
.setBorderColor(new Color(255, 159, 64))
.setBorderWidth(1)
)
.setLabels("January", "February", "March", "April", "May", "June", "July"))
.setOptions(new BarOptions()
.setResponsive(true)
.setMaintainAspectRatio(false)
.setIndexAxis(BarOptions.IndexAxis.X)
.setScales(new Scales().addScale(Scales.ScaleAxis.Y, new BarScale < CategoryTicks > ()
.setBarPercentage(BigDecimal.valueOf(0.9))
.setStacked(false)
.setTicks(new CategoryTicks()
.setAutoSkip(true)
.setMirror(true))))
.setPlugins(new Plugins()
.setTitle(new software.xdev.chartjs.model.options.Title()
.setDisplay(true)
.setText("Bar Chart using XDEV java model")))
).toJson();
}Additional context
No response