Added: animation store

docs/tutorial/animation_control_keyframes.md

@@ -4,7 +4,7 @@ csv_url: ../../assets/data/music_data.csv
 
 # Animation control & keyframes
 
-Using the `previous` property provided by the chart you can play, pause, stop,
+Using the `control` property provided by the chart you can play, pause, stop,
 seek or reverse the animations.
 
 In this step, we seek forward to `50%` of progress after the animation starts.
@@ -51,7 +51,7 @@ chart.animate(
         }
     )
 )
-chart.previous.seek("50%")
+chart.control.seek("50%")
 ```
 
 You can also control the initial position and play state of the animation
@@ -72,7 +72,7 @@ chart.animate(
     playState="paused",
     position=0.5,
 )
-chart.previous.play()
+chart.control.play()
 ```
 
 You may want to control multiple animations as a single one.

docs/tutorial/shorthands_store.js

@@ -112,6 +112,50 @@ Promise.all([dataLoaded, mdChartLoaded]).then((results) => {
         },
       ],
     },
+    {
+      anims: [
+        (chart) => {
+          return chart.animate(
+            {
+              style: null,
+              config: {
+                title: "Store function",
+                align: "stretch",
+                channels: {
+                  y: { set: ["Popularity", "Kinds"] },
+                  x: { set: "Genres" },
+                  label: { attach: "Popularity" },
+                },
+                color: { set: "Kinds" },
+              },
+            },
+            0
+          );
+        },
+        (chart) => {
+          return chart.animate({
+            config: {
+              title: "When you use set and no other channel options",
+            },
+          });
+        },
+        (chart) => {
+          return chart.animate({
+            channels: {
+              // x: { attach: [ 'Kinds' ] },
+              x: {
+                attach: "Kinds",
+              },
+              // y: { detach: [ 'Kinds' ] },
+              y: {
+                detach: "Kinds",
+              },
+            },
+            align: "none",
+          });
+        },
+      ],
+    },
     {
       anims: [
         (chart) => {
@@ -129,13 +173,6 @@ Promise.all([dataLoaded, mdChartLoaded]).then((results) => {
             },
           });
         },
-        (chart) => {
-          return chart.animate({
-            config: {
-              title: "Restoring a previously stored state",
-            },
-          });
-        },
       ],
     },
   ]);

docs/tutorial/shorthands_store.md

@@ -5,9 +5,11 @@ csv_url: ../../assets/data/music_data.csv
 # Shorthands & Store
 
 To assist you with the development we added various shorthands that will make
-your code more compact. And we also added the store function, which enables you
-to save a chart state into a variable that you can reuse later instead of
-setting up that state once again.
+your code more compact.
+
+We also added store functions, which enable you to save either a chart state or
+a whole animation into a variable that you can reuse later instead of setting up
+that state or animation once again.
 
 <div id="tutorial_01"></div>
 
@@ -58,7 +60,8 @@ snapshot = chart.store()
 ```
 
 If you set/attach/detach just one series on a channel, you don't have to put
-that series into an array.
+that series into an array. Also, let's save this animation by calling the
+`store` method of the `control` chart object.
 
 <div id="tutorial_02"></div>
 
@@ -69,12 +72,15 @@ chart.animate(
             "channels": {
                 # "x": { "attach": [ "Kinds" ] },
                 "x": {"attach": "Kinds"},
+                # "y": { "detach": [ "Kinds" ] },
                 "y": {"detach": "Kinds"},
             },
             "align": "none",
         }
     )
 )
+
+animation = chart.control.store()
 ```
 
 If you use set on a channel and no other options like range, you don't have to
@@ -90,14 +96,15 @@ chart.animate(
             "channels": {
                 # "y": { "set": [ "Kinds", "Popularity" ] },
                 "y": ["Kinds", "Popularity"],
+                # "x": { "set": [ "Genres" ] },
                 "x": "Genres",
             }
         }
     )
 )
 ```
 
-In any case, you can simply omit the channel object, `ipyvizzu` will
+In any case, you can simply omit the `channel` object, `ipyvizzu` will
 automatically recognize the channels by their names.
 
 <div id="tutorial_04"></div>
@@ -131,10 +138,18 @@ chart.animate(
 )
 ```
 
-This is how you can get back to a state that you previously stored.
+This is how you can reuse a previously stored animation.
 
 <div id="tutorial_06"></div>
 
+```python
+chart.animate(animation)
+```
+
+You can also get back to a state that you previously stored.
+
+<div id="tutorial_07"></div>
+
 ```python
 chart.animate(snapshot)
 ```

src/ipyvizzu/__init__.py

@@ -21,6 +21,7 @@
 * [Style][ipyvizzu.animation.Style]
 * [Keyframe][ipyvizzu.animation.Keyframe]
 * [Snapshot][ipyvizzu.animation.Snapshot]
+* [Animation][ipyvizzu.animation.Animation]
 * [InferType][ipyvizzu.animation.InferType]
 * [AbstractAnimation][ipyvizzu.animation.AbstractAnimation]
 * [PlainAnimation][ipyvizzu.animation.PlainAnimation]
@@ -51,6 +52,7 @@
     Style,
     Keyframe,
     Snapshot,
+    Animation,
     AnimationMerger,
 )
 from .animationcontrol import AnimationControl
@@ -66,6 +68,7 @@
     "Style",
     "Keyframe",
     "Snapshot",
+    "Animation",
     "InferType",
     "AbstractAnimation",
     "PlainAnimation",

src/ipyvizzu/animation.py

@@ -522,19 +522,19 @@ def build(self) -> dict:
 
 class Snapshot(AbstractAnimation):
     """
-    A class for representing snapshot animation.
+    A class for representing a stored chart state.
     It can build the snapshot id of the chart.
     """
 
-    def __init__(self, name: str):
+    def __init__(self, snapshot_id: str):
         """
         Snapshot constructor.
 
         Args:
-            name: A snapshot id.
+            snapshot_id: A snapshot id.
         """
 
-        self._name = name
+        self._snapshot_id = snapshot_id
 
     def build(self) -> str:  # type: ignore
         """
@@ -544,7 +544,14 @@ def build(self) -> str:  # type: ignore
             An str snapshot id that stored in the snapshot animation object.
         """
 
-        return self._name
+        return self._snapshot_id
+
+
+class Animation(Snapshot):
+    """
+    A class for representing a stored animation.
+    It can build the snapshot id of the animation.
+    """
 
 
 class AnimationMerger(AbstractAnimation):

src/ipyvizzu/animationcontrol.py

@@ -1,8 +1,10 @@
 """A module for working with animation control."""
 
 from typing import Union, Callable
+import uuid
 
 from ipyvizzu.template import DisplayTemplate
+from ipyvizzu.animation import Animation
 
 
 class AnimationControl:
@@ -88,3 +90,21 @@ def stop(self) -> None:
                 params=self._ids,
             )
         )
+
+    def store(self) -> Animation:
+        """
+        A method for saving and storing the actual state of the animation.
+
+        Returns:
+            A Animation object wich stores the actual state of the animation.
+        """
+
+        animation_id = uuid.uuid4().hex[:7]
+        params = ", ".join([self._ids, f"'{animation_id}'"])
+        self._display(
+            DisplayTemplate.CONTROL.format(
+                method="store",
+                params=params,
+            )
+        )
+        return Animation(animation_id)

src/ipyvizzu/chart.py

@@ -88,7 +88,7 @@ def scroll_into_view(self, scroll_into_view: Optional[bool]):
         self._scroll_into_view = bool(scroll_into_view)
 
     @property
-    def previous(self) -> AnimationControl:
+    def control(self) -> AnimationControl:
         """
         A property for returning a control object of the last animation.
 
@@ -172,7 +172,7 @@ def store(self) -> Snapshot:
         A method for saving and storing the actual state of the chart.
 
         Returns:
-            A snapshot animation object wich stores the actual state of the chart.
+            A Snapshot object wich stores the actual state of the chart.
 
         Example:
             Save and restore the actual state of the chart:

src/ipyvizzu/templates/ipyvizzu.js

@@ -29,7 +29,7 @@ if (!window.IpyVizzu) {
       this.charts = {};
       this.controls = {};
 
-      this.snapshots = {};
+      this.storage = {};
       this.displays = {};
 
       this.events = {};
@@ -73,12 +73,12 @@ if (!window.IpyVizzu) {
         this._scroll(chartId, scrollEnabled);
         let chartTarget = getChartTarget(this.libs[chartId]);
         if (typeof chartTarget === "string") {
-          chartTarget = this.snapshots[chartTarget];
+          chartTarget = this.storage[chartTarget];
         } else if (Array.isArray(chartTarget)) {
           for (let i = 0; i < chartTarget.length; i++) {
             const target = chartTarget[i].target;
             if (typeof target === "string") {
-              chartTarget[i].target = this.snapshots[target];
+              chartTarget[i].target = this.storage[target];
             }
           }
         }
@@ -91,7 +91,7 @@ if (!window.IpyVizzu) {
     store(element, chartId, id) {
       if (IpyVizzu.nbconvert) IpyVizzu._hide(element);
       this.charts[chartId] = this.charts[chartId].then((chart) => {
-        this.snapshots[id] = chart.store();
+        this.storage[id] = chart.store();
         return chart;
       });
     }
@@ -138,6 +138,11 @@ if (!window.IpyVizzu) {
             control[method](value);
             return;
           }
+          if (method === "store") {
+            const id = params[0];
+            this.storage[id] = control[method]();
+            return;
+          }
           control[method]();
         });
       });

tests/__init__.py

@@ -23,6 +23,7 @@
     RawJavaScript,
     RawJavaScriptEncoder,
     Snapshot,
+    Animation,
     Store,
     Style,
 )