Add layer title above colourbar

Deltares · Nov 7, 2023 · c7e7637 · c7e7637
1 parent 8be49b6
commit c7e7637
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 12 deletions.
diff --git a/src/components/spatialdisplay/SpatialDisplay.vue b/src/components/spatialdisplay/SpatialDisplay.vue
@@ -6,7 +6,7 @@
       <animated-mapbox-layer :layer="layerOptions" />
     </MapComponent>
     <div class="colourbar-container">
-      <ColourBar :colourMap="legend" />
+      <ColourBar :colourMap="legend" :title="legendTitle" />
     </div>
     <DateTimeSlider
       v-model:selectedDate="currentTime"
@@ -65,6 +65,14 @@ const legend = computed(() => {
   return legendGraphic.value?.legend
 })
 
+const legendTitle = computed(() => {
+  if (!selectedLayer.value) return ''
+  const unitString = legendGraphic.value?.unit
+    ? ` [${legendGraphic.value?.unit}]`
+    : ''
+  return `${selectedLayer.value?.title}${unitString}`
+})
+
 watch(times, () => {
   const timesValue = times.value
   if (timesValue) {

diff --git a/src/components/wms/ColourBar.vue b/src/components/wms/ColourBar.vue
@@ -11,27 +11,23 @@ import * as webOcCharts from '@deltares/fews-web-oc-charts'
 
 interface Props {
   colourMap?: webOcCharts.ColourMap
+  title?: string
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  colourMap: undefined,
-})
+const props = withDefaults(defineProps<Props>(), {})
 
 const isVisible = ref<boolean>(true)
 let group: d3.Selection<SVGGElement, unknown, HTMLElement, any>
 
-watch(
-  () => props.colourMap,
-  () => {
-    updateColourBar()
-  },
-)
+watch([() => props.colourMap, () => props.title], () => {
+  updateColourBar()
+})
 
 onMounted(() => {
   const svg = d3.select('#colourbar')
   group = svg
     .append('g')
-    .attr('transform', 'translate(10, 5)')
+    .attr('transform', 'translate(10, 50)')
     .style('pointer-events', 'visiblePainted')
   updateColourBar()
 })
@@ -48,6 +44,7 @@ function updateColourBar() {
     type: 'nonlinear',
     useGradients: true,
     position: webOcCharts.AxisPosition.Bottom,
+    title: props.title,
   }
   new webOcCharts.ColourBar(group as any, props.colourMap, 250, 10, options)
   isVisible.value = true
@@ -62,7 +59,7 @@ function updateColourBar() {
 .colourbar {
   fill: none;
   width: 300px;
-  height: 35px;
+  height: 85px;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;