Merge pull request #6 from bprusinowski/fix/datum-teleportation

fix: Datum teleportation

README.md

@@ -421,19 +421,37 @@ To _teleport_ a `Datum` from a given **exiting** `Group`, you can add a `telepor
 ```ts
 // Step 1, bar chart.
 const barChartGroups = [
-  { key: "A", data: [{ key: "value", value: 1 }] },
-  { key: "B", data: [{ key: "value", value: 2 }] },
-  { key: "C", data: [{ key: "value", value: 3 }] },
+  {
+    key: "A",
+    data: [
+      { key: "1996", value: 1 },
+      { key: "1997", value: 1.2 },
+    ],
+  },
+  {
+    key: "B",
+    data: [
+      { key: "1996", value: 2 },
+      { key: "1997", value: 2.4 },
+    ],
+  },
+  {
+    key: "C",
+    data: [
+      { key: "1996", value: 3 },
+      { key: "1997", value: 3.6 },
+    ],
+  },
 ];
 
 // Step 2, pie chart.
 const pieChartGroups = [
   {
     key: "pieGroup",
     data: [
-      { key: "A", value: 1, teleportFrom: "A:value" },
-      { key: "B", value: 2, teleportFrom: "A:value" },
-      { key: "C", value: 3, teleportFrom: "A:value" },
+      { key: "A", value: 1, teleportFrom: "A:1996" },
+      { key: "B", value: 2, teleportFrom: "B:1996" },
+      { key: "C", value: 3, teleportFrom: "C:1996" },
     ],
   },
 ];

package.json

@@ -1,6 +1,6 @@
 {
   "name": "plotteus",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "🦋 Plotteus is a JavaScript data visualization library designed to help you tell better stories.",
   "homepage": "https://plotteus.dev",
   "repository": "github:bprusinowski/plotteus",

src/components/Datum.ts

@@ -62,6 +62,7 @@ export const ints = ({
   getters = [],
   _getters,
   _ints,
+  getPreviousInt,
   getModifyPreviousG,
 }: Generic.IntsProps<G, Getter, Int>) => {
   return Generic.ints<G, Getter, Int>()({
@@ -91,6 +92,7 @@ export const ints = ({
           };
       }
     },
+    getPreviousInt,
     getModifyPreviousG,
   });
 };

src/components/Generic.ts

@@ -38,6 +38,7 @@ export type IntsProps<G, TGetter extends Getter<G>, TInt extends Int<G>> = {
     _updateInt: TInt | undefined;
     int: Int<G>;
   }) => TInt;
+  getPreviousInt?: (props: { getter: TGetter }) => TInt | undefined;
   /**
    * Use when you need to modify the output of previous g
    * (e.g. during datum teleportation).
@@ -59,14 +60,17 @@ export const ints =
     _getters,
     _ints,
     modifyInt = ({ int }) => int as TInt,
+    getPreviousInt,
     getModifyPreviousG,
   }: IntsProps<G, TGetter, TInt>): TInt[] => {
     const keys = getters.map((d) => d.key);
     const exitingGetters = _getters?.filter((d) => !keys.includes(d.key)) ?? [];
     const allGetters = getters.concat(exitingGetters);
     const ints: TInt[] = allGetters.map((getter) => {
       const exiting = !keys.includes(getter.key);
-      const _int = _ints?.find((d) => d.key === getter.key);
+      const _int =
+        getPreviousInt?.({ getter }) ??
+        _ints?.find((d) => d.key === getter.key);
       const { state, i, _updateInt } = getInts({
         _int,
         exiting,

src/components/Group.ts

@@ -113,10 +113,21 @@ export const ints = ({
         data: [],
       };
 
+      const getPreviousDatumInt: Generic.IntsProps<
+        Datum.G,
+        Datum.Getter,
+        Datum.Int
+      >["getPreviousInt"] = ({ getter }) => {
+        return _ints
+          ?.flatMap((d) => d.data)
+          .find((d) => d.teleportKey === getter.teleportFrom);
+      };
+
       newInt.data = Datum.ints({
         getters: exiting ? [] : getter.data,
         _getters: _data,
         _ints: _updateInt?.data,
+        getPreviousInt: getPreviousDatumInt,
         getModifyPreviousG: ({ getter }) => {
           let _teleportInt: Datum.Int | undefined;
           const _groupTeleportInt = _ints?.find((d) => {