refactor: demo page

resources/js/pages/dashboards/wbs.vue

@@ -2,6 +2,22 @@
 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))
@@ -62,7 +78,7 @@ onMounted(() => {
 
 const chartOptions = ref({
   chart: { inverted: true, height: 1200, backgroundColor: 'transparent' },
-  title: { text: "The Germanic Language Tree" },
+  title: { text: props.title },
   accessibility: { point: { descriptionFormat: "{add index 1}. {toNode.id} comes from {fromNode.id}" } },
   tooltip: { outside: true },
   series: [{
@@ -133,7 +149,12 @@ const chartOptions = ref({
 </script>
 
 <template>
-  <div class="chart-container">
+  <div 
+    class="chart-container"
+    :style="{ 
+      backgroundColor: showBackground ? backgroundColor : 'transparent' 
+    }"
+  >
     <highcharts :options="chartOptions" />
   </div>
 </template>
@@ -141,7 +162,7 @@ const chartOptions = ref({
 <style scoped>
 .chart-container {
   padding: 16px;
-  background-color: transparent;
   min-height: 100vh;
+  border-radius: 8px;
 }
 </style>