feat: add wbs tree

resources/js/pages/dashboards/crm.vue

@@ -13,7 +13,6 @@ import ProjectActivityBarChart from "@/components/ProjectActivityBarChart.vue";
 import AnalysisCard from "@/components/AnalysisCard.vue";
 import CostOverview from "@/components/CostOverview.vue";
 import GeneratedLeadsCard from "@/views/dashboards/ecommerce/EcommerceGeneratedLeads.vue";
-import GanttChart from "./gantt.vue";
 
 import EcommerceCongratulationsJohn from '@/views/dashboards/ecommerce/EcommerceCongratulationsJohn.vue'
 import EcommerceEarningReports from '@/views/dashboards/ecommerce/EcommerceEarningReports.vue'

resources/js/pages/dashboards/wbs.vue

@@ -0,0 +1,147 @@
+<script setup>
+import HC from "highcharts"
+import { ref, onMounted } from "vue"
+
+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: "The Germanic Language Tree" },
+  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">
+    <highcharts :options="chartOptions" />
+  </div>
+</template>
+
+<style scoped>
+.chart-container {
+  padding: 16px;
+  background-color: transparent;
+  min-height: 100vh;
+}
+</style>