feat(demo): add new hybrid chart demo example

Close #69

Author: paodb

src/test/java/com/flowingcode/vaadin/addons/orgchart/HybridEnhancedChartDemo.java

@@ -0,0 +1,107 @@
+/*-
+ * #%L
+ * OrgChart Add-on
+ * %%
+ * Copyright (C) 2017 - 2023 Flowing Code S.A.
+ * %%
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * #L%
+ */
+package com.flowingcode.vaadin.addons.orgchart;
+
+import java.util.Arrays;
+import com.flowingcode.vaadin.addons.demo.DemoSource;
+import com.flowingcode.vaadin.addons.orgchart.extra.TemplateLiteralRewriter;
+import com.vaadin.flow.component.dependency.CssImport;
+import com.vaadin.flow.component.orderedlayout.VerticalLayout;
+import com.vaadin.flow.router.PageTitle;
+import com.vaadin.flow.router.Route;
+
+/**
+ * Chart demo showing how to display a hybrid demo (horizontal + vertical) and how to customize the
+ * nodes to show information as cards.
+ * 
+ */
+@SuppressWarnings("serial")
+@PageTitle("Hybrid")
+@DemoSource
+@Route(value = "orgchart/hybrid", layout = OrgchartDemoView.class)
+@CssImport("./styles/orgchart/hybrid-demo-styles.css")
+public class HybridEnhancedChartDemo extends VerticalLayout {
+
+  public HybridEnhancedChartDemo() {
+    OrgChart orgchart = getExample1();
+    String nodeTemplate = "<div class='title'>"
+        + "${item.data.imageUrl?`<img class='avatar'src=${item.data.imageUrl}></img>`:''}"
+        + "<div class='item-name'>${item.name}</div>"
+        + "<div class='item-title'>${item.title}</div>"
+        + "${item.data.phone?`<div class='item-phone'><i class='fa fa-phone'></i>${item.data.phone}</div>`:''}"
+        + "${item.data.mail?`<div class='item-email'><i class='fa fa-envelope-o'></i>${item.data.mail}</div>`:''}"
+        + "</div>";
+    orgchart.setNodeTemplate("item", TemplateLiteralRewriter.rewriteFunction(nodeTemplate));
+    orgchart.addClassNames("chart-container", "hybrid-chart");
+    orgchart.setChartNodeContent("title");
+
+    // make the chart to show children as vertical starting in level 3
+    orgchart.setChartVerticalDepth(3);
+
+    orgchart.setChartTitle("My Organization Chart Demo - Example 4 - HYBRID CHART WITH CUSTOM TEMPLATE");
+
+    setSizeFull();
+    add(orgchart);
+  }
+
+  private OrgChart getExample1() {
+    OrgChartItem item1 = new OrgChartItem(1, "John Williams", "Director");
+    item1.setData("mail", "[email protected]");
+    item1.setData("imageUrl", "images/1.png");
+    item1.setData("phone", "(333) 445-5898");
+    OrgChartItem item2 = new OrgChartItem(2, "Anna Thompson", "Administration");
+    item2.setData("mail", "[email protected]");
+    item2.setData("imageUrl", "images/2.png");
+    item2.setData("phone", "(333) 407-5559");
+    OrgChartItem item3 = new OrgChartItem(3, "Timothy Henry Jones", "Administration");
+    item3.setData("mail", "[email protected]");
+    item3.setData("imageUrl", "images/3.png");
+    item3.setData("phone", "(344) 508-7894");
+    OrgChartItem item4 = new OrgChartItem(4, "Louise Night", "Administration");
+    item4.setData("mail", "[email protected]");
+    item4.setData("imageUrl", "images/4.png");
+   
+    OrgChartItem item5 = new OrgChartItem(5, "John Porter", "Head of Department");
+    item5.setData("mail", "[email protected]");
+    item5.setData("imageUrl", "images/5.png");    
+    OrgChartItem item6 = new OrgChartItem(6, "Charles Thomas", "Head of Department");
+    item6.setData("mail", "[email protected]");
+    item6.setData("imageUrl", "images/6.png");    
+    OrgChartItem item7 = new OrgChartItem(7, "Angela Wood", "Section 1");
+    item7.setData("mail", "[email protected]");
+    item7.setData("imageUrl", "images/7.png");
+    OrgChartItem item8 = new OrgChartItem(8, "Martha Brown", "Section 1");
+    item8.setData("imageUrl", "images/8.png");
+    OrgChartItem item9 = new OrgChartItem(9, "Mary Parker", "Section 1.1");
+    item9.setData("imageUrl", "images/9.png");
+    OrgChartItem item10 = new OrgChartItem(10, "Mary Williamson", "Section 2");
+    item10.setData("imageUrl", "images/10.png");
+    item10.setData("phone", "(234) 567-9323");
+    
+    item1.setChildren(Arrays.asList(item2, item3, item4));
+    item4.addChildren(item5);
+    item2.setChildren(Arrays.asList(item6));
+    item6.setChildren(Arrays.asList(item7, item8));
+    item8.setChildren(Arrays.asList(item9));    
+    item5.setChildren(Arrays.asList(item10));
+    return new OrgChart(item1);
+  }
+
+}

src/test/java/com/flowingcode/vaadin/addons/orgchart/OrgchartDemoView.java

@@ -38,5 +38,6 @@ public OrgchartDemoView() {
 	addDemo(DragAndDropExportDemo.class);
 	addDemo(BottomTopDemo.class);
 	addDemo(ImageInTitleDemo.class);
+	addDemo(HybridEnhancedChartDemo.class);
   }
 }

src/test/resources/META-INF/resources/frontend/styles/orgchart/hybrid-demo-styles.css

@@ -0,0 +1,86 @@
+/*-
+ * #%L
+ * OrgChart Add-on
+ * %%
+ * Copyright (C) 2017 - 2023 Flowing Code S.A.
+ * %%
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * #L%
+ */
+.hybrid-chart .orgchart .node {
+	width: 220px;
+}
+
+.hybrid-chart .orgchart .node .title {
+	height: 80px !important;
+	text-align: left;
+	line-height: 18px;
+	font-size: 11px;
+	border-radius: 0;
+	background-color: rgb(255, 255, 255);
+	border: 1px solid var(--lumo-body-text-color);
+	color: var(--lumo-body-text-color);
+	padding: 10px 4px 4px 0;
+}
+
+.hybrid-chart .orgchart .node .avatar {
+	width: 60px;
+	height: 60px;
+	float: left;
+	margin-top: 8px;
+	margin-left: 3px;
+	margin-right: 3px;
+}
+
+.hybrid-chart .orgchart .node .item-name {
+	font-weight: 800;
+}
+
+.hybrid-chart .orgchart .node .item-name, .item-title, .item-email,
+	.item-phone {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.hybrid-chart .orgchart .node .item-email i, .item-phone i {
+	margin-right: 4px;
+}
+
+.hybrid-chart .orgchart .title .symbol {
+	display: none
+}
+
+.hybrid-chart .orgchart .lines .rightLine {
+	border-right-color: var(--lumo-body-text-color);
+}
+
+.hybrid-chart .orgchart .lines .leftLine {
+    border-left-color: var(--lumo-body-text-color);
+}
+
+.hybrid-chart .orgchart .lines .topLine {
+	border-top-color: var(--lumo-body-text-color);
+}
+
+.hybrid-chart .orgchart .verticalNodes>td::before {
+    border-color: var(--lumo-body-text-color);
+}
+
+.hybrid-chart .orgchart .lines .downLine {
+    background-color: var(--lumo-body-text-color); 
+}
+
+.hybrid-chart .orgchart .verticalNodes ul>li::after, .hybrid-chart .orgchart .verticalNodes ul>li::before {
+    border-color: var(--lumo-body-text-color);
+}