437 vue3 layout colorbar

src/components/spatialdisplay/SpatialDisplay.vue

@@ -5,8 +5,8 @@
     <MapComponent>
       <animated-mapbox-layer :layer="layerOptions" />
     </MapComponent>
-    <div class="colourbar">
-      <ColourBar :colourMap="legend" />
+    <div class="colourbar-container">
+      <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) {
@@ -105,11 +113,12 @@ function updateTime(date: Date): void {
 </script>
 
 <style scoped>
-.colourbar {
+.colourbar-container {
+  position: absolute;
+  pointer-events: none;
   font-size: 0.825em;
   z-index: 1000;
   background-color: none;
-  position: absolute;
   bottom: 80px;
 }
 

src/components/wms/ColourBar.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="legend" :class="isVisible ? 'invisible' : ''">
-    <svg id="colourbar" width="120" height="320" style="fill: none"></svg>
+    <svg id="colourbar" class="colourbar"></svg>
   </div>
 </template>
 
@@ -11,25 +11,24 @@ 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(50, 50)')
+  group = svg
+    .append('g')
+    .attr('transform', 'translate(10, 50)')
+    .style('pointer-events', 'visiblePainted')
   updateColourBar()
 })
 
@@ -44,9 +43,10 @@ function updateColourBar() {
   const options: webOcCharts.ColourBarOptions = {
     type: 'nonlinear',
     useGradients: true,
-    position: webOcCharts.AxisPosition.Right,
+    position: webOcCharts.AxisPosition.Bottom,
+    title: props.title,
   }
-  new webOcCharts.ColourBar(group as any, props.colourMap, 10, 250, options)
+  new webOcCharts.ColourBar(group as any, props.colourMap, 250, 10, options)
   isVisible.value = true
 }
 </script>
@@ -55,4 +55,38 @@ function updateColourBar() {
 #legend .invisible {
   display: none;
 }
+
+.colourbar {
+  fill: none;
+  width: 300px;
+  height: 85px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  text-shadow:
+    rgb(var(--v-theme-background)) 0px 0px 1px,
+    rgb(var(--v-theme-background)) 0px 0px 1px,
+    rgb(var(--v-theme-background)) 0px 0px 1px,
+    rgb(var(--v-theme-background)) 0px 0px 1px,
+    rgb(var(--v-theme-background)) 0px 0px 1px,
+    rgb(var(--v-theme-background)) 0px 0px 1px;
+}
+
+.colourbar :deep(.axis .tick line) {
+  filter: drop-shadow(0px 0px 1px rgb(var(--v-theme-background)))
+    drop-shadow(0px 0px 1px rgb(var(--v-theme-background)))
+    drop-shadow(0px 0px 1px rgb(var(--v-theme-background)));
+}
+
+:deep(g) {
+  font-family: var(--primary-font);
+}
+
+:deep(svg text) {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  font-size: 1em;
+}
 </style>

src/views/SpatialDisplayView.vue

@@ -108,14 +108,6 @@ function attachLayersToMenu(
 </script>
 
 <style scoped>
-.colourbar {
-  font-size: 0.825em;
-  z-index: 1000;
-  background-color: none;
-  position: absolute;
-  bottom: 80px;
-}
-
 .container {
   display: flex;
   flex-direction: column;