compilehandlebars bug fixed

src/main/java/org/icepear/echarts/render/Engine.java

@@ -57,7 +57,7 @@ private String compileHandleBars(String templateName, Option option, String heig
         ChartMeta chartMeta = new ChartMeta(height, width, jsonStr);
         String html = "";
         try {
-            Template template = handlebars.compile("index");
+            Template template = handlebars.compile(templateName);
             html = template.apply(chartMeta);
         } catch (IOException e) {
             log.error(e.getMessage());

src/test/java/org/icepear/echarts/render/engineTest.java

@@ -0,0 +1,121 @@
+package org.icepear.echarts.render;
+
+
+import static org.junit.Assert.assertEquals;
+import static org.junit.Assert.assertTrue;
+
+import java.io.BufferedReader;
+import java.io.File;
+import java.io.FileReader;
+import java.io.InputStreamReader;
+import java.util.stream.Collectors;
+
+import org.icepear.echarts.Option;
+import org.icepear.echarts.charts.bar.BarSeries;
+import org.icepear.echarts.components.coord.CategoryAxisTick;
+import org.icepear.echarts.components.coord.cartesian.CategoryAxis;
+import org.icepear.echarts.components.coord.cartesian.ValueAxis;
+import org.icepear.echarts.components.grid.Grid;
+import org.icepear.echarts.components.tooltip.Tooltip;
+import org.icepear.echarts.components.tooltip.TooltipAxisPointer;
+import org.icepear.echarts.origin.util.SeriesOption;
+import org.junit.Before;
+import org.junit.Test;
+
+public class engineTest {
+    private Option option;
+    private Engine engine = new Engine();
+
+    @Before
+    public void buildOption() {
+        Tooltip tooltip = new Tooltip()
+                .setTrigger("axis")
+                .setAxisPointer(new TooltipAxisPointer()
+                        .setType("shadow"));
+
+        Grid grid = new Grid()
+                .setLeft("3%")
+                .setRight("4%")
+                .setBottom("3%")
+                .setContainLabel(true);
+
+        CategoryAxis xAxis = new CategoryAxis()
+                .setType("category")
+                .setData(new String[] { "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun" })
+                .setAxisTick(new CategoryAxisTick()
+                        .setAlignWithLabel(true));
+
+        ValueAxis yAxis = new ValueAxis().setType("value");
+
+        BarSeries series = new BarSeries()
+                .setName("Direct")
+                .setType("bar")
+                .setBarWidth("60%")
+                .setData(new Number[] { 10, 52, 200, 334, 390, 330, 220 });
+
+        Option option = new Option()
+                .setTooltip(tooltip)
+                .setGrid(grid)
+                .setXAxis(xAxis)
+                .setYAxis(yAxis)
+                .setSeries(new SeriesOption[] { series });
+
+        this.option = option;
+    }
+
+    @Test
+    public void testRenderFileExists() {
+        String childPath = "test.html";
+        engine.render(childPath, option);
+        String parentPath = System.getProperty("user.dir") + "/";
+        File file = new File(parentPath+childPath);
+        assertTrue(file.exists());
+    }
+
+    @Test
+    public void testRenderFileContentCorrect() {
+        String childPath = "test.html";
+        engine.render(childPath, option);
+        String completePath = System.getProperty("user.dir") + "/" + childPath;
+
+        try {
+            BufferedReader renderedFileReader = new BufferedReader(new FileReader(completePath));
+            String renderedContent = renderedFileReader.lines().collect(Collectors.joining());
+
+            BufferedReader expectedFileReader = new BufferedReader(new InputStreamReader(this.getClass().getResourceAsStream("/render/sampleIndex.html")));
+            String expectedContent = expectedFileReader.lines().collect(Collectors.joining());
+
+            assertEquals(expectedContent, renderedContent);    
+        } catch (Exception e) {
+            System.out.println("engineTest: testRenderFileContentCorrect exception found: " + e.getMessage());
+        }
+
+    }
+
+    @Test
+    public void testRenderHtml() {
+        String acutalHTML = engine.renderHtml(option);
+        try {
+            BufferedReader expectedFileReader = new BufferedReader(new InputStreamReader(this.getClass().getResourceAsStream("/render/sampleBase.html")));
+            String expectedContent = expectedFileReader.lines().collect(Collectors.joining(System.lineSeparator()));
+
+            assertEquals(expectedContent, acutalHTML);
+        } catch (Exception e) {
+            System.out.println("engineTest: testRenderHtml exception found: " + e.getMessage());
+        }
+
+    }
+
+    @Test
+    public void testRenderJsonOption() {
+        String acutalJsonOption = engine.renderJsonOption(option);
+        try {
+            BufferedReader expectedFileReader = new BufferedReader(new InputStreamReader(this.getClass().getResourceAsStream("/render/sampleOption.json")));
+            String expectedContent = expectedFileReader.lines().collect(Collectors.joining(System.lineSeparator()));
+
+            assertEquals(expectedContent, acutalJsonOption);
+        } catch (Exception e) {
+            System.out.println("engineTest: testRenderJsonOption exception found: " + e.getMessage());
+        }
+    }
+}

src/test/resources/render/sampleBase.html

@@ -0,0 +1,28 @@
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>ECharts Demo</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.2.2/echarts.min.js"
+        integrity="sha512-ivdGNkeO+FTZH5ZoVC4gS4ovGSiWc+6v60/hvHkccaMN2BXchfKdvEZtviy5L4xSpF8NPsfS0EVNSGf+EsUdxA=="
+        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <style>
+        #display-container {
+            width: 100%;
+            height: 100%;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="display-container">
+    </div>
+    <script type="text/javascript">
+        var chart = echarts.init(document.getElementById("display-container")); 
+        var option = {"grid":{"right":"4%","bottom":"3%","left":"3%","containLabel":true},"xAxis":{"type":"category","axisTick":{"alignWithLabel":true},"data":["Mon","Tue","Wed","Thu","Fri","Sat","Sun"]},"yAxis":{"type":"value"},"tooltip":{"axisPointer":{"type":"shadow"},"trigger":"axis"},"series":[{"type":"bar","name":"Direct","data":[10,52,200,334,390,330,220],"barWidth":"60%"}]}
+        chart.setOption(option);
+    </script>
+</body>
+
+</html>

src/test/resources/render/sampleIndex.html

@@ -0,0 +1,70 @@
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>ECharts Demo</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.2.2/echarts.min.js"
+        integrity="sha512-ivdGNkeO+FTZH5ZoVC4gS4ovGSiWc+6v60/hvHkccaMN2BXchfKdvEZtviy5L4xSpF8NPsfS0EVNSGf+EsUdxA=="
+        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <style>
+        body {
+            margin: 0;
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
+        }
+        #title-container {
+            width: 600px;
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            align-items: center;
+        }
+        #download-btn {
+            border-radius: 6px;
+            background-color: aliceblue;
+            border: 1px solid black;
+        }
+
+        #display-container {
+            width: 600px;
+            height: 600px;
+            border: 2px solid black;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="container">
+        <div id="title-container">
+            <h1 class="display">ECharts Java</h1>
+            <button id="download-btn" onclick="downloadImage()">Download Image</button>
+        </div>
+        <div id="display-container">
+        </div>
+    </div>
+
+    <script type="text/javascript">
+        function downloadImage() {
+            let canvas = document.querySelector("canvas");
+            let image = canvas.toDataURL("image/png").replace("image/png",
+                "image/octet-stream");
+            let fakeLink = document.createElement("a");
+            if (typeof fakeLink.download === "string") {
+                document.body.appendChild(fakeLink);
+                fakeLink.download = "echart.png";
+                fakeLink.href = image;
+                fakeLink.click();
+                document.body.removeChild(fakeLink);
+            } else {
+                location.replace(image);
+            }
+        }
+        var chart = echarts.init(document.getElementById("display-container")); 
+        var option = {"grid":{"right":"4%","bottom":"3%","left":"3%","containLabel":true},"xAxis":{"type":"category","axisTick":{"alignWithLabel":true},"data":["Mon","Tue","Wed","Thu","Fri","Sat","Sun"]},"yAxis":{"type":"value"},"tooltip":{"axisPointer":{"type":"shadow"},"trigger":"axis"},"series":[{"type":"bar","name":"Direct","data":[10,52,200,334,390,330,220],"barWidth":"60%"}]}
+        chart.setOption(option);
+    </script>
+</body>
+
+</html>

src/test/resources/render/sampleOption.json

@@ -0,0 +1 @@
+{"grid":{"right":"4%","bottom":"3%","left":"3%","containLabel":true},"xAxis":{"type":"category","axisTick":{"alignWithLabel":true},"data":["Mon","Tue","Wed","Thu","Fri","Sat","Sun"]},"yAxis":{"type":"value"},"tooltip":{"axisPointer":{"type":"shadow"},"trigger":"axis"},"series":[{"type":"bar","name":"Direct","data":[10,52,200,334,390,330,220],"barWidth":"60%"}]}