From 28cb364912c9174b921fd1411add5b6f5d5ebb0c Mon Sep 17 00:00:00 2001
From: Lucas van Heerikhuizen <lucas.vanheerikhuizen@adyen.com>
Date: Tue, 29 Nov 2022 15:31:10 +0100
Subject: [PATCH 1/2] =?UTF-8?q?=E2=9C=A8=20Make=20sure=20portals=20are=20s?=
 =?UTF-8?q?coped=20to=20component=20by=20using=20a=20unique=20id=20generat?=
 =?UTF-8?q?or?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/core/lume-chart/lume-chart.vue |  8 +++++---
 src/utils/helpers.ts                          | 14 ++++++++++++++
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/components/core/lume-chart/lume-chart.vue b/src/components/core/lume-chart/lume-chart.vue
index acd220c6..a79a8efd 100644
--- a/src/components/core/lume-chart/lume-chart.vue
+++ b/src/components/core/lume-chart/lume-chart.vue
@@ -40,7 +40,7 @@
           <vue-portal
             v-if="allOptions.withLegend !== false"
             :disabled="allOptions.legendPosition !== 'bottom'"
-            to="legend-bottom"
+            :to="`legend-bottom-${uniqueId}`"
             slim
           >
             <lume-chart-legend
@@ -146,7 +146,7 @@
 
       <!-- bottom chart legend -->
       <vue-portal-target
-        name="legend-bottom"
+        :name="`legend-bottom-${uniqueId}`"
         slim
       />
     </template>
@@ -208,7 +208,7 @@ import {
 } from '@/composables/negative-values';
 import { useTooltip, useTooltipAnchors } from '@/composables/tooltip';
 
-import { getEmptyArrayFromData } from '@/utils/helpers';
+import { getEmptyArrayFromData, getUniqueId } from '@/utils/helpers';
 import { ORIENTATIONS, TOOLTIP_ANCHOR_RADIUS } from '@/constants';
 
 export default defineComponent({
@@ -233,6 +233,7 @@ export default defineComponent({
     const { data, labels, color, options, orientation, chartType } =
       toRefs(props);
 
+    const uniqueId = getUniqueId();
     const hoveredIndex = ref<number>(-1);
     const tooltipAnchor = ref<SVGCircleElement>(null);
     const chartContainer = ref<InstanceType<typeof LumeChartContainer>>(null);
@@ -395,6 +396,7 @@ export default defineComponent({
       updateSize,
       xAxisTitle,
       yAxisTitle,
+      uniqueId,
     };
   },
 });
diff --git a/src/utils/helpers.ts b/src/utils/helpers.ts
index c4e731dc..4a7f30ad 100644
--- a/src/utils/helpers.ts
+++ b/src/utils/helpers.ts
@@ -14,6 +14,20 @@ export function isProd() {
   return process.env.NODE_ENV === 'production';
 }
 
+function getUniqueIdProvider() {
+  let id = 0;
+  return function (): string {
+    id++;
+    return id.toString();
+  };
+}
+
+/**
+ * Returns an id that we know will never repeat.
+ * @returns string
+ */
+export const getUniqueId = getUniqueIdProvider();
+
 /**
  * Returns an array with all numeric values present in a chart's `data` (array of datasets).
  * @param {Data<DatasetValueObject>} data A computed array of datasets.

From d7c58a933b1b43a2f9d6692c11ddc7b878570a6e Mon Sep 17 00:00:00 2001
From: Lucas van Heerikhuizen <lucas.vanheerikhuizen@adyen.com>
Date: Tue, 29 Nov 2022 16:49:58 +0100
Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=94=A5=20Sticking=20to=20chartID=20pr?=
 =?UTF-8?q?ovided=20by=20base=20to=20arrive=20at=20unique=20id=20for=20lum?=
 =?UTF-8?q?e-chart?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/core/lume-chart/lume-chart.vue | 18 ++++++------------
 src/utils/helpers.ts                          | 14 --------------
 2 files changed, 6 insertions(+), 26 deletions(-)

diff --git a/src/components/core/lume-chart/lume-chart.vue b/src/components/core/lume-chart/lume-chart.vue
index a79a8efd..eafb8216 100644
--- a/src/components/core/lume-chart/lume-chart.vue
+++ b/src/components/core/lume-chart/lume-chart.vue
@@ -40,7 +40,7 @@
           <vue-portal
             v-if="allOptions.withLegend !== false"
             :disabled="allOptions.legendPosition !== 'bottom'"
-            :to="`legend-bottom-${uniqueId}`"
+            :to="`legend-bottom-${chartID}`"
             slim
           >
             <lume-chart-legend
@@ -146,7 +146,7 @@
 
       <!-- bottom chart legend -->
       <vue-portal-target
-        :name="`legend-bottom-${uniqueId}`"
+        :name="`legend-bottom-${chartID}`"
         slim
       />
     </template>
@@ -208,7 +208,7 @@ import {
 } from '@/composables/negative-values';
 import { useTooltip, useTooltipAnchors } from '@/composables/tooltip';
 
-import { getEmptyArrayFromData, getUniqueId } from '@/utils/helpers';
+import { getEmptyArrayFromData } from '@/utils/helpers';
 import { ORIENTATIONS, TOOLTIP_ANCHOR_RADIUS } from '@/constants';
 
 export default defineComponent({
@@ -233,20 +233,14 @@ export default defineComponent({
     const { data, labels, color, options, orientation, chartType } =
       toRefs(props);
 
-    const uniqueId = getUniqueId();
     const hoveredIndex = ref<number>(-1);
     const tooltipAnchor = ref<SVGCircleElement>(null);
     const chartContainer = ref<InstanceType<typeof LumeChartContainer>>(null);
 
     const { allOptions } = useOptions<ChartOptions>(options);
 
-    const { internalData, computedLabels, containerSize, updateSize } = useBase(
-      data,
-      labels,
-      color,
-      allOptions,
-      orientation
-    );
+    const { internalData, computedLabels, containerSize, updateSize, chartID } =
+      useBase(data, labels, color, allOptions, orientation);
 
     const { xScale, yScale } = useBaseScales(
       internalData,
@@ -396,7 +390,7 @@ export default defineComponent({
       updateSize,
       xAxisTitle,
       yAxisTitle,
-      uniqueId,
+      chartID,
     };
   },
 });
diff --git a/src/utils/helpers.ts b/src/utils/helpers.ts
index 4a7f30ad..c4e731dc 100644
--- a/src/utils/helpers.ts
+++ b/src/utils/helpers.ts
@@ -14,20 +14,6 @@ export function isProd() {
   return process.env.NODE_ENV === 'production';
 }
 
-function getUniqueIdProvider() {
-  let id = 0;
-  return function (): string {
-    id++;
-    return id.toString();
-  };
-}
-
-/**
- * Returns an id that we know will never repeat.
- * @returns string
- */
-export const getUniqueId = getUniqueIdProvider();
-
 /**
  * Returns an array with all numeric values present in a chart's `data` (array of datasets).
  * @param {Data<DatasetValueObject>} data A computed array of datasets.