martes, 21 de abril de 2020

31. Vaadin 14. Integrating external Js libraries from npm (3). Apexcharts

0. Introduction

Please read this previous post to get more details. I have tested this code with Vaadin 15 and it works!

Let's use the magnific library "apexcharts" .

Steps:
  1. Create a folder in the frontend called for instance "apex-charts".
  2. Create a file for instance "apex-charts-test.js" into the previous folder.
  3. Create a class that can contain other Html elements (like a Div) that will contain the chart.  


1. apex-charts-tests.js

Line 1: Import the required dependencies.
Line 5: A function for rendering a chart. The parameters are:
  • jsElem that is a representation of the right-hand assignment of a javascript variable that will contain the graph definition. In the apexchart web is an example that is used here. The value is defined in line 3 of the Main component that will display the component inside. and is a right-hand assignment of a variable in javascript (last source code of the post)
  • divId: the id of an Html element that will contain the char object.
Line 7: Construct a javascript sentence for evaluating the chart definition. In the next sentence is evaluated and the variable myCharDef is assigned the value of the chart.

Line 9: Retrieve the Html element whose id is the one defined in the variable divId.
Line10. Creates the chart object and in the next line is rendered into the Html element.

Line 15. The function is assigned to the window object so that it gets global presence and can be called from a Vaadin component.

Here is the code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
import ApexCharts from "apexcharts";

class ApexChartsEdu  {
 
 render(jsElem, divId) {
  var myCharDef={};
  var kk="myCharDef="+jsElem;
  eval(kk);
  var aDiv=document.querySelector("#"+divId);
  this.chart=new ApexCharts(aDiv, myCharDef);
  this.chart.render();
 }
}

window.renderApexChart = function (jsValue, anId) {
 const mychart= new ApexChartsEdu();
 mychart.render(jsValue, anId);
}

2. The ApexChart class

Line 8: Import the "apex-charts-test.js"  referenced from the frontend folder
Line 9: Import the library from the npn repository.
Line 15: Constructor that requires the id of the div component so that it will be accesible from the javascript function
Line 20: Renders the chart with the  jsString definition.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
package openadmin.ui.forms.elements.customform.apexcharts;

import com.vaadin.flow.component.dependency.JsModule;
import com.vaadin.flow.component.dependency.NpmPackage;
import com.vaadin.flow.component.html.Div;

@SuppressWarnings("serial")
@JsModule("./apex-charts/apex-charts-test.js")
@NpmPackage(value = "apexcharts", version = "3.18.1")

public class ApexCharts extends Div{

 private String myId="";
 
 public ApexCharts(String myId) {
  this.myId=myId;
  this.setId(myId);
    }
 
 public void render(String jsString) {
  System.out.println("myId="+ myId);
  getElement().executeJs("window.renderApexChart($0, $1)", jsString, myId);
 }
}


3. Creating a chart and inserting it into a component (Main)

Line 1: Create the Div component that will contain the chart
Line 2: add the component to the main component
Line 3: Define the right-hand assignment of the definition of the char
Line 16: rendering the component.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
ApexCharts apex= new ApexCharts("mysuperdiv");
add(apex);
String jsStuff="{" + 
  "  chart: {" + 
  "    type: 'line'" + 
  "  }," + 
  "  series: [{" + 
  "    name: 'sales'," + 
  "    data: [30,40,35,50,49,60,70,91,125]" + 
  "  }]," + 
  "  xaxis: {" + 
  "    categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999]" + 
  "  }" + 
  "}";
  
apex.render(jsStuff);




Publicado por en

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)