fix(data): fix worker mixing data for multiple charts

src/lib/utils/data.ts

@@ -6,7 +6,7 @@ import { loadData } from '../load-data';
 // eslint-disable-next-line import/no-internal-modules
 import workerSrc from '../../../tmp/racing-bars.worker.js';
 import { getDates, getNextDate } from './dates';
-import { createWorkerFromContent } from './utils';
+import { createWorkerFromContent, generateId } from './utils';
 
 const worker = createWorkerFromContent(workerSrc);
 
@@ -22,22 +22,20 @@ export async function prepareData(
     }
     data = dataTransform(await data);
   }
+  const messageId = generateId();
   worker.postMessage({
     type: 'prepare-data',
     data,
     options: removeFnOptions(store.getState().options),
     baseUrl: location.href,
+    messageId,
   });
   const preparedData = await new Promise<Data[]>((resolve) => {
-    worker.addEventListener(
-      'message',
-      (event) => {
-        if (event.data.type === 'data-prepared') {
-          resolve(event.data.data);
-        }
-      },
-      { once: true },
-    );
+    worker.addEventListener('message', (event) => {
+      if (event.data.type === 'data-prepared' && event.data.messageId === messageId) {
+        resolve(event.data.data);
+      }
+    });
   });
   storeDataCollections(preparedData, store, changingOptions);
   return preparedData;

src/lib/worker/index.ts

@@ -3,9 +3,9 @@ import { prepareData } from './prepare-data';
 const worker: Worker = self as any as Worker;
 
 worker.addEventListener('message', async (event) => {
-  const { type, data, options, baseUrl } = event.data;
+  const { type, data, options, baseUrl, messageId } = event.data;
   if (type === 'prepare-data') {
     const result = await prepareData(data, options, baseUrl);
-    worker.postMessage({ type: 'data-prepared', data: result });
+    worker.postMessage({ type: 'data-prepared', data: result, messageId });
   }
 });

website/docs/guides/multiple-charts.md

@@ -14,7 +14,7 @@ Example:
 
 <div className="gallery">
   <RacingBars
-    dataUrl="/data/population.csv"
+    dataUrl="/data/brands.csv"
     dataType="csv"
     title="Chart 1"
     labelsPosition="outside"

website/docs/index.md

@@ -35,7 +35,6 @@ icon: `https://flagsapi.com/${d.code}/flat/64.png`,
 <div className="gallery">
   <RacingBars
     style={{width: 800, height: 450}}
-
     dataUrl="/data/population.csv"
     dataType="csv"
     dataTransform={transformFn}
@@ -57,7 +56,5 @@ icon: `https://flagsapi.com/${d.code}/flat/64.png`,
       ...d,
       icon: \`https://flagsapi.com/\${d.code}/flat/64.png\`,
     }))`}}
-
 />
-
 </div>