search

FlowingCode / OrgChartAddon

Organizational Chart Vaadin Add-on
https://www.flowingcode.com/en/open-source/
Apache License 2.0
18 stars 4 forks source link

Enhance org.chart #69

Closed inteacc closed 1 year ago

inteacc commented 1 year ago

Hi Thank you everyone for bringing and maintaining this add-on. In order to make the org chart more appealing, I tried to enhance it to appear like the following:

image

I tried use of css and nodeTemplate as follows:

CSS:

/ CSS for the organization chart / .chart-container { width: 100%; height: 100%; }

.employee-details-container { display: flex; flex-direction: row; }

.employee-photo { max-height: 100%; max-width: 33%; / Adjust the value as needed / }

.employee-info { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; padding-left: 0.5em; / Adjust the value as needed for spacing / }

/ CSS for the organization chart title and content / .title { font-weight: bold; text-align: center; margin-top: 1em; }

.middle.content { text-align: center; }

.custom.content { text-align: center; font-style: italic; }

// Set the node template " String nodeTemplate = "

"

  • "
    "
  • "
    "
  • ""
  • "
"
  • "
    "
  • "
    ${item.name}
    "
  • "
    ${item.data.title}
    "
  • "
    ${item.data.mail}
    "
  • "
    • "
  • "
    • "

  • ""; "

    OrgChartItem directReportItem = new OrgChartItem(number, directReportName, ""); directReportItem.setData("imageUrl", directReportPhotoUrl); directReportItem.setData("title", directReportTitle); directReportItem.setData("mail", directReportEmail); employeeItem.addChildren(directReportItem);

    • But getting the following as the outcome:

    image

    Any way we can get the output like the first image I have shared?

    paodb commented 1 year ago

    Hello @inteacc. We've implemented a new demo that can help you create an enhanced chart, please take a look at: https://addonsv23.flowingcode.com/orgchart/hybrid

    The styling applied to this particular demo can be found here: https://github.com/FlowingCode/OrgChartAddon/blob/master/src/test/resources/META-INF/resources/frontend/styles/orgchart/hybrid-demo-styles.css