panel/resources/js/pages/dashboards/wbs.vue

<script setup>
import HC from "highcharts"
import { ref, onMounted } from "vue"

// Props for component reusability
const props = defineProps({
  title: {
    type: String,
    default: "The Germanic Language Tree"
  },
  backgroundColor: {
    type: String,
    default: ""
  },
  showBackground: {
    type: Boolean,
    default: true
  }
})

const cssRGB = name => getComputedStyle(document.documentElement).getPropertyValue(name).trim()
const toHex = rgb => {
  const [r,g,b] = rgb.split(",").map(v => parseInt(v,10))
  const h = n => n.toString(16).padStart(2,"0")
  return `#${h(r)}${h(g)}${h(b)}`
}
const toRGBA = (rgb,a=1)=>`rgba(${rgb.split(",").map(v=>parseInt(v,10)).join(",")},${a})`

const leafs = [
  "Bastarnisch","Brabantian","Burgundian","Crimean Gothic","Danish",
  "Dutch","English","Faroese","Flemish","Frisian","Gepidisch","Gothic",
  "Herulisch","(High) German","Hollandic","Icelandic","Limburgish",
  "Low German","Norwegian","Rhinelandic","Rugisch","Skirisch","Swedish",
  "Vandalic","Yiddish"
].map(leaf => ({ id: leaf, color: toHex(cssRGB("--v-theme-primary")) }))

const hangingNodes = [
  { id: "North Germanic", layout: "hanging", offsetHorizontal: -15 },
  { id: "West Germanic",  layout: "hanging" },
  { id: "East Germanic",  layout: "hanging" }
]

const nodes = hangingNodes.concat(leafs)

onMounted(() => {
  HC.setOptions({
    chart: {
      backgroundColor: 'transparent',
      style: { fontFamily: "Inter, Segoe UI, Roboto, sans-serif" }
    },
    title: { style: { color: toHex(cssRGB("--v-theme-on-surface")) } },
    subtitle: { style: { color: toHex(cssRGB("--v-theme-on-surface")) } },
    xAxis: {
      lineColor: toRGBA(cssRGB("--v-theme-grey-300"), 0.25),
      tickColor: toRGBA(cssRGB("--v-theme-grey-300"), 0.25),
      labels: { style: { color: toHex(cssRGB("--v-theme-on-surface")) } },
      gridLineColor: toRGBA(cssRGB("--v-theme-grey-300"), 0.25)
    },
    yAxis: {
      lineColor: toRGBA(cssRGB("--v-theme-grey-300"), 0.25),
      tickColor: toRGBA(cssRGB("--v-theme-grey-300"), 0.25),
      labels: { style: { color: toHex(cssRGB("--v-theme-on-surface")) } },
      gridLineColor: toRGBA(cssRGB("--v-theme-grey-300"), 0.25),
      title: { style: { color: toHex(cssRGB("--v-theme-on-surface")) } }
    },
    legend: {
      itemStyle: { color: toHex(cssRGB("--v-theme-on-surface")) },
      itemHoverStyle: { color: toHex(cssRGB("--v-theme-on-surface")) }
    },
    tooltip: {
      backgroundColor: toRGBA(cssRGB("--v-theme-surface"), 0.95),
      borderColor: toRGBA(cssRGB("--v-theme-grey-300"), 0.25),
      style: { color: toHex(cssRGB("--v-theme-on-surface")) }
    },
    credits: { enabled: false }
  })
})

const chartOptions = ref({
  chart: { inverted: true, height: 1200, backgroundColor: 'transparent' },
  title: { text: props.title },
  accessibility: { point: { descriptionFormat: "{add index 1}. {toNode.id} comes from {fromNode.id}" } },
  tooltip: { outside: true },
  series: [{
    name: "Germanic language tree",
    type: "organization",
    keys: ["from", "to"],
    nodeWidth: 40,
    nodePadding: 20,
    colorByPoint: false,
    hangingIndentTranslation: "cumulative",
    hangingIndent: 10,
    levels: [
      { level: 0, color: toHex(cssRGB("--v-theme-background")) },
      { level: 1, color: toHex(cssRGB("--v-theme-background")) },
      { level: 2, color: toHex(cssRGB("--v-theme-success")) },
      { level: 3, color: toHex(cssRGB("--v-theme-warning")) },
      { level: 4, color: toHex(cssRGB("--v-theme-primary")) }
    ],
    nodes,
    data: [
      ["Germanic","West Germanic"],
        ["West Germanic","Old English"],
          ["Old English","Middle English"],
            ["Middle English","English"],
        ["West Germanic","Old Frisian"],
          ["Old Frisian","Frisian"],
        ["West Germanic","Old Dutch"],
          ["Old Dutch","Middle Dutch"],
            ["Middle Dutch","Hollandic"],
            ["Middle Dutch","Flemish"],
            ["Middle Dutch","Dutch"],
            ["Middle Dutch","Limburgish"],
            ["Middle Dutch","Brabantian"],
            ["Middle Dutch","Rhinelandic"],
        ["West Germanic","Old Low German"],
          ["Old Low German","Middle Low German"],
            ["Middle Low German","Low German"],
        ["West Germanic","Old High German"],
          ["Old High German","Middle High German"],
            ["Middle High German","(High) German"],
            ["Middle High German","Yiddish"],
      ["Germanic","East Germanic"],
        ["East Germanic","Gothic"],
        ["East Germanic","Vandalic"],
        ["East Germanic","Burgundian"],
        ["East Germanic","Bastarnisch"],
        ["East Germanic","Gepidisch"],
        ["East Germanic","Herulisch"],
        ["East Germanic","Rugisch"],
        ["East Germanic","Skirisch"],
        ["East Germanic","Crimean Gothic"],
      ["Germanic","North Germanic"],
        ["North Germanic","Old Norse"],
          ["Old Norse","Old Icelandic"],
            ["Old Icelandic","Icelandic"],
          ["Old Norse","Old Norwegian"],
            ["Old Norwegian","Norwegian"],
          ["Old Norse","Faroese"],
        ["North Germanic","Old Swedish"],
          ["Old Swedish","Middle Swedish"],
            ["Middle Swedish","Swedish"],
        ["North Germanic","Old Danish"],
          ["Old Danish","Middle Danish"],
            ["Middle Danish","Danish"]
    ]
  }]
})
</script>

<template>
  <div 
    class="chart-container"
    :style="{ 
      backgroundColor: showBackground ? backgroundColor : 'transparent' 
    }"
  >
    <highcharts :options="chartOptions" />
  </div>
</template>

<style scoped>
.chart-container {
  padding: 16px;
  min-height: 100vh;
  border-radius: 8px;
}
</style>