vizzuhq / ipyvizzu-story Goto Github PK

HTML export - story.export_to_html(" ") - does not work like in other notebooks, there's no output file generated.

It would be good, if fix aspect ratio could be set for the story size.

I'm trying to redo this example from ipyvizzu and get it working in ipyvizzu-story:
https://ipyvizzu.vizzuhq.com/examples/stories/musicformats/musicformats.html

I'm interested with this model because it looks to be the most complex out of all the examples available in vizzuhq website.

However in the first block of code, I encountered error:
NotImplementedError: Anim options are not supported.

the error came from these lines of code which I modify in order to make it work with ipyvizzu-story:

for year in range(1973, 2021):
    config["title"] = f"Music Revenue by Format - Year by Year {year}"
    slide1 = Slide(Step(
        Data.filter(f"parseInt(record.Year) == {year}"),
        Config(config),
        # duration=0.2,
        # x={"easing": "linear", "delay": 0},
        # y={"delay": 0},
        # show={"delay": 0},
        # hide={"delay": 0},
        # title={"duration": 0, "delay": 0},
    )
    )

    story.add_slide(slide1)

story.add_slide(slide1)
story.export_to_html('musicformats.html')

Those I comment-out were the lines that causing the error.
Without them I was able to export to html.

So is it possible to remake all the examples from ipyvizzu in ipyvizzu-story?
Or are there limitations in ipyvizzu-story library in terms of features compared to the ipyvizzu?

for example use npm install and local version (if jsdelivr blocked by corporate policies)

mkdocs-jupyter adds notebook outputs into search index - wait for mkdocs-jupyter to be fixed or replace notebooks with js backend

Test how generated html of ipyvizzu-story behaves in an iframe.
Create example and specify restrictions in docs/docs/environments

• Google Slides
• Slides.com

• Current behaviour: all animation runs sequentially in the slideshow one after another independently from slideshow controls
• Expected behaviour: all animation should stop at the end of if's corresponding slide and the next should run only when it's slide gets active.

jupyter nbconvert something.ipynb --to slides --post serve

Jupyter's slideshow functionality: https://medium.com/@mjspeck/presenting-code-using-jupyter-no...

Before implementation, it must be developed in the vizzu-story javascript package.

• add vizzu_story url property to Story class
• modify the html template
• add unit tests

This property is used to change the url of the vizzu javascript package.

Use tox, configure it with different python versions:

• 3.7
• 3.8
• 3.9
• 3.10
• 3.11

reconfigure ci workflow to run steps with different python versions.

Currently - Mac users cannot run any of the make commands for the repo - which forces repo maintainers to reformat code written by Mac users.

This applies to both ipyvizzu and ipyvizzu-story

maybe use poe and poetry instead of makefile

• support different python versions (python>=3.7)
  • 3.7
  • 3.8
  • 3.9
  • 3.10
  • 3.11
• support different os
  • ubuntu
  • win
  • osx

Would be good to be able to set size for the widget. In js it can be done by setting CSS parameters for the element.

Instead of setup.py create a pyproject.toml file.

Story does not appear in the html which is published by databricks:

Uncaught SecurityError: Failed to read the 'cookie' property from 'Document': The document is sandboxed and lacks the 'allow-same-origin' flag.

A conda install option could be very helpful. Adding ipyvizzu-story to conda-forge channel will be ideal.

Note: I have started working on this already in the following PR.

• conda-forge/staged-recipes#19838

Once installed you will be able to install the library with:

conda install -c conda-forge ipyvizzu-story

• The chart appears but its horizontal and vertical size are both too big by default. -> added Story.set_size(width, height) method in 0.2.0 (for example: story.set_size("800px", "480px"))
• PgUp, PgDn buttons scroll the notebook even after the chart is clicked vizzuhq/vizzu-story-js#43
• Full screen button has no effect -> disabled in Colab, but there is a built-in view output fullscreen option

test compatibility in different platforms,
create example and specify restrictions in docs/environments

• H2O Wave
• Plotly Dash/Dash
• PyWebIO
• EMR notebook (Pyspark kernel)
• Anaconda Notebooks
• Flask
• JupyterLab
• Voila
• Noteable
• Streamlit
• Panel
• Mercury (mljar)
• Databricks
• DataCamp
• Deepnote
• Google Colab
• JupyterLite
• Kaggle
• Mode
• PyCharm (Pro)
• VSCode

If an invalid Style is passed as part of a Story - the Story will infinitely generate a loading spinner when loading, rather than throwing an error. Not sure what happens on the backend here - but perhaps some validation of Styles may be needed to provide user friendly feedback if a style breaks.

The example I have below is obviously extreme, but I actually discovered this when trying to input what I thought might work as valid CSS, using "logo": {"display": "none"} to hide the logo. If I do this - I get the same infinitely spinning behavior. However, just changing the width to 0em produces the correct effect.

Reproducible code

import pandas as pd

from ipyvizzu import Data, Config, Style
from ipyvizzustory import Story, Slide, Step

# Create data object, read csv to data frame and add data frame to data object.
example_data = Data()
example_df = pd.read_csv(
    "complex.csv",
    dtype={"Year": str},
)
example_data.add_data_frame(example_df)

# Set the style of the charts in the story
example_style = Style(
    {
        "logo": {"BLAH": "BLAHBLAH"},
        # Replace above line with this and it will work again
        # "logo": {"width": "5em"},
    }
)

# Create story object, add data and style settings to it
# and set the size of the HTML element
# that appears within the notebook.
story = Story(data=example_data, style=example_style)
story.set_size("100%", "400px")


# Add the first slide,
# containing a single animation step that sets the initial chart.
slide1 = Slide(
    Step(
        # Only include rows where the Function value != Defense
        # Note, filters currently only accept JavaScript style filters,
        # hence the "!==", rather than "!="
        Data.filter("record.Function !== 'Defense'"),
        Config(
            {
                "channels": {
                    "y": {
                        "set": ["Amount[B$]", "Function"],
                        # Set the range of the y-axis
                        # to the min and max of the data being shown
                        # default value is 110% of the maximum value.
                        "range": {"min": "0%", "max": "100%"},
                    },
                    "x": {"set": ["Year"]},
                    "color": "Function",
                },
                "title": "Stacked Area Chart - U.S. R&D Budget in 1955-2020",
                "geometry": "area",
            }
        ),
    )
)
# Add the slide to the story
story.add_slide(slide1)

story.play()

• add vizzu_story url property to Story class
• modify the html template
• add unit tests

This property is used to change the url of the vizzu-story javascript package.

• The chart appears but its vertical size is constantly growing for some time -> added Story.set_size(width, height) method in 0.2.0 (for example: story.set_size("800px", "480px"))
• PgUp, PgDn buttons scroll the notebook even after the chart is clicked vizzuhq/vizzu-story-js#43
• Full screen button has no effect -> disabled in Deepnote

I want to share how I implemented ipyvizzu-story in Flask, please note since majority of the code is very similar to the complex template in vizzuhq website, the one I write here is how to implement in Flask and how to get the output in the HTML page:

## Starts with
from ipyvizzu import Data, Config, Chart, Style
from ipyvizzustory import Story, Slide, Step
import pandas as pd

DATA = Data()
df = pd.read_csv('filepath/filename')

DATA.add_data_frame(df)

## Placeholder where you set the Styling and add slides to the Story. This part of the code is exactly the same with the example in vizzuhq website

## Ends with
story.export_to_html('filepath/mystory.html')    # This is the most important line of code

In the HTML file for your Flask website, simply place this HTML tag:

<div class="container" id="timeseries">
    <iframe src=" {{url_for('static', filename='mystory.html')}}" seamless></iframe>
</div>

the id = 'timeseries' is just me naming the CSS styling for the iframe container. It can be named however you want.

There is actually a more efficient method to call the html without the need to export to html.
to_html() enables this however I cannot set a custom Style when using this to_html() method as it produces blank page.
So if I use default Style, the chart will appear correctly as expected.

Below is the code when using to_html() method:

## Ends with
vizzu = story.to_html()

return render_template(vizzu = vizzu)

The code for HTML file for the Flask website:

<div class="container" id="timeseries">
    <iframe src="data:text/html, {{ vizzu }}" seamless></iframe>
</div>

Hope this helps, cheers!

In the generated html, catch errors and async promise errors.

• Display the catched error in an alert window or send back to ipython kernel or HTML