Fix Chart client link

melloware · Sep 26, 2024 · 79ae62f · 79ae62f
1 parent a77ea3a
commit 79ae62f
Show file tree

Hide file tree

Showing 11 changed files with 112 additions and 103 deletions.
diff --git a/src/main/resources/META-INF/resources/ui/chart/bar.xhtml b/src/main/resources/META-INF/resources/ui/chart/bar.xhtml
@@ -9,11 +9,13 @@
     </ui:define>
 
     <ui:define name="description">
-        BarChart is created with raw JSON or using an <a href="https://github.com/xdev-software/chartjs-java-model" target="_blank" rel="noopener noreferrer">XDEV</a> model. When a dataset data is clicked, information can be passed to a backing bean using itemSelect ajax behavior. 
+        BarChart is created with raw JSON or using an <a href="https://github.com/xdev-software/chartjs-java-model"
+                                                         target="_blank"
+                                                         rel="noopener noreferrer">XDEV</a> model. When a dataset data is clicked, information can be passed to a backing bean using itemSelect ajax behavior.
     </ui:define>
 
     <ui:param name="documentationLink" value="/components/chart"/>
-    <ui:param name="widgetLink" value="Chart"/>
+    <ui:param name="widgetLink" value="Chart-1"/>
 
     <ui:define name="implementation">
         <h:form>
@@ -25,7 +27,7 @@
                     <p:ajax event="itemSelect" listener="#{chartView.itemSelect}" update="growl"/>
                 </p:chart>
             </div>
-            
+
             <div class="card">
                 <h5>Stacked</h5>
                 <p:chart value="#{chartView.stackedBarModel}" style="width: 100%; height: 500px;">
@@ -36,4 +38,4 @@
         </h:form>
     </ui:define>
 
-</ui:composition>
+</ui:composition>
diff --git a/src/main/resources/META-INF/resources/ui/chart/bubble.xhtml b/src/main/resources/META-INF/resources/ui/chart/bubble.xhtml
@@ -8,16 +8,17 @@
     </ui:define>
 
     <ui:define name="description">
-        BubbleChart is created with raw JSON or using an <a href="https://github.com/xdev-software/chartjs-java-model" target="_blank" rel="noopener noreferrer">XDEV</a> model.
+        BubbleChart is created with raw JSON or using an <a href="https://github.com/xdev-software/chartjs-java-model"
+                                                            target="_blank" rel="noopener noreferrer">XDEV</a> model.
     </ui:define>
 
     <ui:param name="documentationLink" value="/components/chart"/>
-    <ui:param name="widgetLink" value="Chart"/>
+    <ui:param name="widgetLink" value="Chart-1"/>
 
     <ui:define name="implementation">
         <div class="card">
             <p:chart value="#{chartView.bubbleModel}" style="width: 100%; height: 500px;"/>
         </div>
     </ui:define>
 
-</ui:composition>
+</ui:composition>
diff --git a/src/main/resources/META-INF/resources/ui/chart/custom.xhtml b/src/main/resources/META-INF/resources/ui/chart/custom.xhtml
@@ -1,7 +1,7 @@
 <ui:composition xmlns="http://www.w3.org/1999/xhtml"
-	xmlns:ui="jakarta.faces.facelets"
-	xmlns:h="jakarta.faces.html"
-	xmlns:p="http://primefaces.org/ui" template="/template/template.xhtml">
+                xmlns:ui="jakarta.faces.facelets"
+                xmlns:h="jakarta.faces.html"
+                xmlns:p="http://primefaces.org/ui" template="/template/template.xhtml">
 
     <ui:define name="head">
         <script>
@@ -10,37 +10,37 @@
             }
         </script>
     </ui:define>
-    
-	<ui:define name="title">
+
+    <ui:define name="title">
         Charts <span class="subitem">Custom JSON</span>
-	</ui:define>
+    </ui:define>
 
-	<ui:define name="description">
+    <ui:define name="description">
         Chart can be created using raw JSON.
     </ui:define>
 
-	<ui:param name="documentationLink" value="/components/chart" />
-	<ui:param name="widgetLink" value="Chart" />
+    <ui:param name="documentationLink" value="/components/chart"/>
+    <ui:param name="widgetLink" value="Chart-1"/>
+
+    <ui:define name="implementation">
+        <h:form>
+            <p:growl id="growl" showDetail="true"/>
 
-	<ui:define name="implementation">
-		<h:form>
-			<p:growl id="growl" showDetail="true" />
+            <div class="card">
+                <h5>Raw JSON</h5>
+                <p:inputTextarea id="codeJson" widgetVar="txtJson" rows="15"
+                                 styleClass="w-full" autoResize="false"
+                                 value="#{chartView.json}" onblur="formatJson();"/>
 
-			<div class="card">
-				<h5>Raw JSON</h5>
-				<p:inputTextarea id="codeJson" widgetVar="txtJson" rows="15"
-					styleClass="w-full" autoResize="false"
-					value="#{chartView.json}" onblur="formatJson();"/>
-
-				<p:commandButton id="update" styleClass="mt-2"
+                <p:commandButton id="update" styleClass="mt-2"
                                  value="Apply JSON and update chart" process="@form"
                                  update="@form:rawChart" icon="pi pi-refresh"/>
-					
-				<p:chart id="rawChart" value="#{chartView.json}" style="width: 100%; height: 500px;">
-					<p:ajax event="itemSelect" listener="#{chartView.itemSelect}" update="growl" />
-				</p:chart>
-			</div>
-		</h:form>
-	</ui:define>
-
-</ui:composition>
+
+                <p:chart id="rawChart" value="#{chartView.json}" style="width: 100%; height: 500px;">
+                    <p:ajax event="itemSelect" listener="#{chartView.itemSelect}" update="growl"/>
+                </p:chart>
+            </div>
+        </h:form>
+    </ui:define>
+
+</ui:composition>
diff --git a/src/main/resources/META-INF/resources/ui/chart/doughnut.xhtml b/src/main/resources/META-INF/resources/ui/chart/doughnut.xhtml
@@ -8,11 +8,12 @@
     </ui:define>
 
     <ui:define name="description">
-        DoughnutChart is created with raw JSON or using an <a href="https://github.com/xdev-software/chartjs-java-model" target="_blank" rel="noopener noreferrer">XDEV</a> model.
+        DoughnutChart is created with raw JSON or using an <a href="https://github.com/xdev-software/chartjs-java-model"
+                                                              target="_blank" rel="noopener noreferrer">XDEV</a> model.
     </ui:define>
 
-    <ui:param name="documentationLink" value="/components/chart" />
-    <ui:param name="widgetLink" value="Chart" />
+    <ui:param name="documentationLink" value="/components/chart"/>
+    <ui:param name="widgetLink" value="Chart-1"/>
 
     <ui:define name="implementation">
         <div class="grid">
@@ -24,4 +25,4 @@
         </div>
     </ui:define>
 
-</ui:composition>
+</ui:composition>
diff --git a/src/main/resources/META-INF/resources/ui/chart/export.xhtml b/src/main/resources/META-INF/resources/ui/chart/export.xhtml
@@ -1,7 +1,5 @@
 <ui:composition xmlns="http://www.w3.org/1999/xhtml"
                 xmlns:ui="jakarta.faces.facelets"
-                xmlns:h="jakarta.faces.html"
-                xmlns:f="jakarta.faces.core"
                 xmlns:p="http://primefaces.org/ui"
                 template="/template/template.xhtml">
     <ui:define name="head">
@@ -14,6 +12,7 @@
                 //show the dialog
                 PF('dlg').show();
             }
+
             //]]>
         </script>
     </ui:define>
@@ -27,21 +26,23 @@
     </ui:define>
 
     <ui:param name="documentationLink" value="/components/chart?id=export"/>
-    <ui:param name="widgetLink" value="Chart"/>
+    <ui:param name="widgetLink" value="Chart-1"/>
     <ui:param name="widgetLinkHash" value="exportAsImage"/>
 
     <ui:define name="implementation">
         <div class="card">
             <p:chart id="barChart" value="#{chartView.barModel}" style="width: 100%; height: 500px;" widgetVar="chart"/>
             <br/>
 
-            <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('chart').print()" styleClass="mr-2 mb-2"/>
+            <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('chart').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:500px;height:300px"/>
             </p:dialog>
         </div>
     </ui:define>
 
-</ui:composition>
+</ui:composition>
diff --git a/src/main/resources/META-INF/resources/ui/chart/facet.xhtml b/src/main/resources/META-INF/resources/ui/chart/facet.xhtml
@@ -13,53 +13,53 @@
         For simpler charts you can render the chart right in the <strong>value</strong> facet.
     </ui:define>
 
-    <ui:param name="documentationLink" value="/components/chart" />
-    <ui:param name="widgetLink" value="Chart" />
+    <ui:param name="documentationLink" value="/components/chart"/>
+    <ui:param name="widgetLink" value="Chart-1"/>
 
     <ui:define name="implementation">
         <div class="card">
             <p:chart style="width: 100%; height: 500px;">
-               <f:facet name="value">
-               {
-                 type: 'bar',
-                 data: {
-                   labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
-                   datasets: [{
-                     label: '# of Votes',
-                     data: [12, 19, 3, 5, 2, 3],
-                     borderWidth: 1,
-                     backgroundColor: ['DarkRed', 'CornflowerBlue', 'Gold', 'Lime', 'BlueViolet', 'DarkOrange']
-                   }]
-                 },
-                 options: {
-                   scales: {
-                     y: {
-                       beginAtZero: true
-                     }
-                   },
-                   plugins: {
-                       zoom: {
-                           pan: {
-                               enabled: true,
-                               mode: 'y',
-                               threshold: 5,
-                           },
-                           zoom: {
-                               wheel: {
-                                   enabled: true
-                               },
-                               pinch: {
-                                   enabled: true
-                               },
-                               mode: 'y',
-                           },
-                       }
-                   }
-                 }
-               }
-               </f:facet>
+                <f:facet name="value">
+                    {
+                    type: 'bar',
+                    data: {
+                    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
+                    datasets: [{
+                    label: '# of Votes',
+                    data: [12, 19, 3, 5, 2, 3],
+                    borderWidth: 1,
+                    backgroundColor: ['DarkRed', 'CornflowerBlue', 'Gold', 'Lime', 'BlueViolet', 'DarkOrange']
+                    }]
+                    },
+                    options: {
+                    scales: {
+                    y: {
+                    beginAtZero: true
+                    }
+                    },
+                    plugins: {
+                    zoom: {
+                    pan: {
+                    enabled: true,
+                    mode: 'y',
+                    threshold: 5,
+                    },
+                    zoom: {
+                    wheel: {
+                    enabled: true
+                    },
+                    pinch: {
+                    enabled: true
+                    },
+                    mode: 'y',
+                    },
+                    }
+                    }
+                    }
+                    }
+                </f:facet>
             </p:chart>
         </div>
     </ui:define>
 
-</ui:composition>
+</ui:composition>
diff --git a/src/main/resources/META-INF/resources/ui/chart/line.xhtml b/src/main/resources/META-INF/resources/ui/chart/line.xhtml
@@ -8,11 +8,12 @@
     </ui:define>
 
     <ui:define name="description">
-        LineChart is created with raw JSON or using an <a href="https://github.com/xdev-software/chartjs-java-model" target="_blank" rel="noopener noreferrer">XDEV</a> model.
+        LineChart is created with raw JSON or using an <a href="https://github.com/xdev-software/chartjs-java-model"
+                                                          target="_blank" rel="noopener noreferrer">XDEV</a> model.
     </ui:define>
 
-    <ui:param name="documentationLink" value="/components/chart" />
-    <ui:param name="widgetLink" value="Chart" />
+    <ui:param name="documentationLink" value="/components/chart"/>
+    <ui:param name="widgetLink" value="Chart-1"/>
 
     <ui:define name="implementation">
         <div class="card">
@@ -24,4 +25,4 @@
         </div>
     </ui:define>
 
-</ui:composition>
+</ui:composition>
diff --git a/src/main/resources/META-INF/resources/ui/chart/pie.xhtml b/src/main/resources/META-INF/resources/ui/chart/pie.xhtml
@@ -47,7 +47,7 @@
     </ui:define>
 
     <ui:param name="documentationLink" value="/components/chart"/>
-    <ui:param name="widgetLink" value="Chart"/>
+    <ui:param name="widgetLink" value="Chart-1"/>
 
     <ui:define name="implementation">
         <div class="grid">

diff --git a/src/main/resources/META-INF/resources/ui/chart/polararea.xhtml b/src/main/resources/META-INF/resources/ui/chart/polararea.xhtml
@@ -8,11 +8,13 @@
     </ui:define>
 
     <ui:define name="description">
-        PolarAreaChart is created with raw JSON or using an <a href="https://github.com/xdev-software/chartjs-java-model" target="_blank" rel="noopener noreferrer">XDEV</a> model.
+        PolarAreaChart is created with raw JSON or using an <a
+            href="https://github.com/xdev-software/chartjs-java-model" target="_blank"
+            rel="noopener noreferrer">XDEV</a> model.
     </ui:define>
 
-    <ui:param name="documentationLink" value="/components/chart" />
-    <ui:param name="widgetLink" value="Chart" />
+    <ui:param name="documentationLink" value="/components/chart"/>
+    <ui:param name="widgetLink" value="Chart-1"/>
 
     <ui:define name="implementation">
         <div class="grid">
@@ -24,4 +26,4 @@
         </div>
     </ui:define>
 
-</ui:composition>
+</ui:composition>
diff --git a/src/main/resources/META-INF/resources/ui/chart/radar.xhtml b/src/main/resources/META-INF/resources/ui/chart/radar.xhtml
@@ -20,11 +20,12 @@
     </ui:define>
 
     <ui:define name="description">
-        RadarChart is created with raw JSON or using an <a href="https://github.com/xdev-software/chartjs-java-model" target="_blank" rel="noopener noreferrer">XDEV</a> model.
+        RadarChart is created with raw JSON or using an <a href="https://github.com/xdev-software/chartjs-java-model"
+                                                           target="_blank" rel="noopener noreferrer">XDEV</a> model.
     </ui:define>
 
-    <ui:param name="documentationLink" value="/components/chart" />
-    <ui:param name="widgetLink" value="Chart" />
+    <ui:param name="documentationLink" value="/components/chart"/>
+    <ui:param name="widgetLink" value="Chart-1"/>
 
     <ui:define name="implementation">
         <div class="grid">
@@ -36,4 +37,4 @@
         </div>
     </ui:define>
 
-</ui:composition>
+</ui:composition>
diff --git a/src/main/resources/META-INF/resources/ui/chart/scatter.xhtml b/src/main/resources/META-INF/resources/ui/chart/scatter.xhtml
@@ -19,13 +19,13 @@
         Scatter charts are based on basic line charts with the x axis changed to a linear axis. To use a scatter chart, data must be passed as objects containing X and Y properties.
     </ui:define>
 
-    <ui:param name="documentationLink" value="/components/chart" />
-    <ui:param name="widgetLink" value="Chart" />
+    <ui:param name="documentationLink" value="/components/chart"/>
+    <ui:param name="widgetLink" value="Chart-1"/>
 
     <ui:define name="implementation">
         <div class="card">
             <p:chart value="#{chartView.scatterModel}" style="width: 100%; height: 500px;"/>
         </div>
     </ui:define>
 
-</ui:composition>
+</ui:composition>