@icij/murmur-next 4.1.0 → 4.1.2

package/lib/datavisualisations/ColumnChart.vue

@@ -1,13 +1,5 @@
 <script lang="ts">
-import {
-  ComponentPublicInstance,
-  computed,
-  defineComponent,
-  PropType,
-  ref,
-  watchEffect,
-  onMounted
-} from 'vue'
+import { ComponentPublicInstance, computed, defineComponent, PropType, ref, watch } from 'vue'
 import { identity, iteratee, sortBy } from 'lodash'
 import * as d3 from 'd3'
 import { chartProps, getChartProps, useChart } from '@/composables/chart'
@@ -175,6 +167,7 @@ export default defineComponent({
     const isLoaded = ref(false)
     const {
       loadedData,
+      mounted,
       elementsMaxBBox,
       d3Formatter,
       baseHeightRatio,
@@ -339,7 +332,7 @@ export default defineComponent({
     }
 
     function update() {
-      if (!el.value) {
+      if (!mounted.value) {
         return
       }
 
@@ -359,8 +352,9 @@ export default defineComponent({
     }
 
     function barTooltipStyle(bar: { x: number; y: number; width: number }) {
-      const top = `${bar.y + margin.value.top}px`
-      const left = `${bar.x + bar.width / 2 + margin.value.left}px`
+      const { x, y } = el?.value?.getBoundingClientRect() ?? new DOMRect()
+      const top = `${y + bar.y + margin.value.top}px`
+      const left = `${x + bar.x + bar.width / 2 + margin.value.left}px`
       return { top, left }
     }
 
@@ -369,10 +363,9 @@ export default defineComponent({
         datum.highlight || props.highlights.includes(datum[props.timeseriesKey])
       )
     }
-
-    watchEffect(async () => {
-      update()
-    })
+    
+    watch([width, height, loadedData, mounted], update.bind(this), { immediate: true})
+    watch(() => props.socialMode, update.bind(this), { immediate: true})
 
     return {
       el,
@@ -449,27 +442,29 @@ export default defineComponent({
         </g>
       </g>
     </svg>
-    <div v-if="!noTooltips" class="column-chart__tooltips">
-      <div v-for="(bar, index) in bars" :key="index">
-        <div :style="barTooltipStyle(bar)" class="column-chart__tooltips__item">
-          <transition name="fade">
-            <div
-              v-if="shownTooltip === index"
-              class="column-chart__tooltips__item__wrapper"
-            >
-              <slot name="tooltip" v-bind="bar">
-                <h6 class="column-chart__tooltips__item__wrapper__heading mb-0">
-                  {{ formatXDatum(bar.datum[timeseriesKey]) }}
-                </h6>
-                <div class="column-chart__tooltips__item__wrapper__value">
-                  {{ formatYDatum(bar.datum[seriesName]) }}
-                </div>
-              </slot>
-            </div>
-          </transition>
+    <teleport to="body">
+      <div v-if="!noTooltips" class="column-chart__tooltips">
+        <div v-for="(bar, index) in bars" :key="index">
+          <div :style="barTooltipStyle(bar)" class="column-chart__tooltips__item">
+            <transition name="fade">
+              <div
+                v-if="shownTooltip === index"
+                class="column-chart__tooltips__item__wrapper"
+              >
+                <slot name="tooltip" v-bind="bar">
+                  <h6 class="column-chart__tooltips__item__wrapper__heading mb-0">
+                    {{ formatXDatum(bar.datum[timeseriesKey]) }}
+                  </h6>
+                  <div class="column-chart__tooltips__item__wrapper__value">
+                    {{ formatYDatum(bar.datum[seriesName]) }}
+                  </div>
+                </slot>
+              </div>
+            </transition>
+          </div>
         </div>
       </div>
-    </div>
+    </teleport>
   </div>
 </template>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@icij/murmur-next",
-  "version": "4.1.0",
+  "version": "4.1.2",
   "private": false,
   "description": "Murmur is ICIJ's Design System for Bootstrap 5 and Vue.js",
   "author": "promera@icij.org",