Fix primefaces-extensions#1451: Apache ECharts add print and export

Rapster · Feb 27, 2024 · 3e0f34e · 3e0f34e
1 parent cdc477c
commit 3e0f34e
Show file tree

Hide file tree

Showing 5 changed files with 97 additions and 1 deletion.
diff --git a/core/src/main/resources/META-INF/resources/primefaces-extensions/echarts/9-echarts-widget.js b/core/src/main/resources/META-INF/resources/primefaces-extensions/echarts/9-echarts-widget.js
@@ -126,4 +126,26 @@ PrimeFaces.widget.ExtEChart = PrimeFaces.widget.DeferredWidget.extend({
             $this.callBehavior("itemSelect", {params});
         });
     },
+
+    /**
+     * Return this chart as an image with a data source URL (`<img src="data:url" />`)
+     * @return {HTMLImageElement} The content of this chart as an HTML IMAGE.
+     */
+    exportAsImage: function() {
+        let img = new Image();
+        img.src = this.chart.getDataURL();
+        return img;
+    },
+
+    /**
+     * Send this chart to the printer.
+     */
+    print: function() {
+        // Create a new image element
+        let img = `<html><head><script>function s1(){setTimeout('s2()',10);}function s2(){window.print();window.close()}</script></head><body onload='s1()'><img src='${this.chart.getDataURL()}'/></body></html>`;
+        let pwa = window.open("about:blank", "_new");
+        pwa.document.open();
+        pwa.document.write(img);
+        pwa.document.close();
+    },
 });
diff --git a/showcase/src/main/webapp/sections/echarts/example-exportUsage.xhtml b/showcase/src/main/webapp/sections/echarts/example-exportUsage.xhtml
@@ -0,0 +1,36 @@
+<ui:composition
+        xmlns="http://www.w3.org/1999/xhtml"
+        xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
+        xmlns:p="http://primefaces.org/ui"
+        xmlns:pe="http://primefaces.org/ui/extensions">
+
+    <p:messages id="messages" showSummary="false" showDetail="true">
+        <p:autoUpdate/>
+    </p:messages>
+
+    <!-- EXAMPLE-SOURCE-START -->
+    <script>
+        //<![CDATA[
+        function exportChart() {
+            //export image
+            $('#output').empty().append(PF('exportEChart').exportAsImage());
+
+            //show the dialog
+            PF('dlg').show();
+        };
+
+        //]]>
+    </script>
+
+    <pe:echart style="width: 50vw; height: 400px;"  id="echart" widgetVar="exportEChart" value="#{eChartController.json}">
+        <p:ajax event="itemSelect" listener="#{eChartController.itemSelect}" />
+    </pe:echart>
+
+    <p:commandButton type="button" value="Export" icon="pi pi-home" onclick="exportChart()" styleClass="mr-2 mb-2"/>
+    <p:commandButton type="button" value="Print"  icon="pi pi-print" onclick="PF('exportEChart').print()" styleClass="mr-2 mb-2"/>
+
+    <p:dialog widgetVar="dlg" showEffect="fade" modal="true" header="Chart as an Image" resizable="false">
+        <p:outputPanel id="output" layout="block" style="width: 50vw; height: 400px;"/>
+    </p:dialog>
+    <!-- EXAMPLE-SOURCE-END -->
+</ui:composition>
diff --git a/showcase/src/main/webapp/sections/echarts/example-themeUsage.xhtml b/showcase/src/main/webapp/sections/echarts/example-themeUsage.xhtml
@@ -9,9 +9,9 @@
         <p:autoUpdate/>
     </p:messages>
 
+    <!-- EXAMPLE-SOURCE-START -->
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/src/vintage.min.js"></script>
 
-    <!-- EXAMPLE-SOURCE-START -->
     <pe:echart style="width: 50vw; height: 400px;"  widgetVar="themeEChart" theme="vintage">
         <p:ajax event="itemSelect" listener="#{eChartController.itemSelect}" />
         <f:facet name="value">

diff --git a/showcase/src/main/webapp/sections/echarts/exportUsage.xhtml b/showcase/src/main/webapp/sections/echarts/exportUsage.xhtml
@@ -0,0 +1,34 @@
+<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:h="http://xmlns.jcp.org/jsf/html"
+      xmlns:f="http://xmlns.jcp.org/jsf/core"
+      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
+      xmlns:showcase="http://primefaces.org/ui/extensions/showcase">
+<ui:composition template="/templates/showcaseLayout.xhtml">
+    <ui:define name="centerContent">
+        <f:facet name="header">
+            <h:outputText value="EChart"/>
+        </f:facet>
+        <h:panelGroup layout="block" styleClass="centerContent">
+            Apache ECharts can be exported to PNG, JPG, or SVG as well as printed.
+        </h:panelGroup>
+
+        <h:panelGroup layout="block" styleClass="centerExample">
+            <ui:include src="/sections/echarts/example-exportUsage.xhtml"/>
+        </h:panelGroup>
+
+        <ui:decorate template="/templates/oneTabDecorator.xhtml">
+            <ui:define name="contentTab1">
+                ${showcase:getFileContent('/sections/echarts/example-exportUsage.xhtml')}
+            </ui:define>
+        </ui:decorate>
+    </ui:define>
+    <ui:define name="useCases">
+        <ui:include src="/sections/echarts/useCasesChoice.xhtml"/>
+    </ui:define>
+    <ui:define name="docuTable">
+        <ui:include src="/sections/shared/documentation.xhtml">
+            <ui:param name="tagName" value="echart"/>
+        </ui:include>
+    </ui:define>
+</ui:composition>
+</html>
diff --git a/showcase/src/main/webapp/sections/echarts/useCasesChoice.xhtml b/showcase/src/main/webapp/sections/echarts/useCasesChoice.xhtml
@@ -15,6 +15,10 @@
                     styleClass="#{navigationContext.getMenuitemStyleClass('facetUsage')}"
                     onclick="Showcase.selectUseCaseLink(this)" ajax="false" icon="pi pi-play"
                     url="#{request.contextPath}/sections/echarts/themeUsage.jsf"/>
+        <p:menuitem value="Export + Print"
+                    styleClass="#{navigationContext.getMenuitemStyleClass('exportUsage')}"
+                    onclick="Showcase.selectUseCaseLink(this)" ajax="false" icon="pi pi-play"
+                    url="#{request.contextPath}/sections/echarts/exportUsage.jsf"/>
     </p:menu>
 </ui:composition>
 </html>