npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ipecharts

v1.0.8

Published

Apache Echarts Jupyter Widget.

Downloads

29

Readme

Github Actions Status Documentation Status Try on lite

ipecharts brings interactive widgets based on Apache ECharts charting library to the Jupyter ecosystem. By using the Jupyter Widget protocol, ipecharts is fully compatible with other widget libraries and tools in the Jupyter ecosystem.

https://github.com/trungleduc/ipecharts/assets/4451292/c6e73b4d-61ef-4098-a274-92233d0801b0

[!NOTE]
pyecharts also supports using Echarts in the notebook, but they are not using Jupyter Widget like ipecharts. In this library, HTML code is injected into the notebook to render the chart.

Try it online!

You can try it online by clicking on this badge:

Try on lite

Documentation

You can read the documentation following this link: https://ipecharts.readthedocs.io/

Installation

To install the extension, execute:

pip install ipecharts

or with conda:

conda install -c conda-forge  ipecharts

Usage

ipecharts widgets are generated automatically from ECharts 5.5.0. It provides two high-level widgets to create charts in notebooks: EChartsRawWidget and EChartsWidget.

Create charts using EChartsRawWidget

EChartsRawWidget is a simple widget to render ECharts option dictionary. It is fully compatible with the JavaScript version of ECharts. Here is an example of converting the following JS example:

import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      areaStyle: {}
    }
  ]
};

option && myChart.setOption(option);

into using EChartsRawWidget:

from ipecharts import EChartsRawWidget

option = {
  'xAxis': {
    'type': 'category',
    'boundaryGap': False,
    'data': ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  'yAxis': {
    'type': 'value'
  },
  'series': [
    {
      'data': [820, 932, 901, 934, 1290, 1330, 1320],
      'type': 'line',
      'areaStyle': {}
    }
  ]
}

EChartsRawWidget(option=option)

EChartsRawWidget

Create charts using EChartsWidget

While the raw widget can render the charts correctly, it lacks the interactivity of a Jupyter widget. ipecharts provides EChartsWidget and configuration classes for nearly all available options of ECharts to correct this issue.

Here is the equivalent of the above chart but using EChartsWidget:

from ipecharts import EChartsWidget
from ipecharts.option import Option, XAxis, YAxis
from ipecharts.option.series import Line

line = Line(data=[820, 932, 901, 934, 1290, 1330, 1320], areaStyle={})
option = Option(
    xAxis=XAxis(
        type="category",
        boundaryGap=False,
        data=["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    ),
    yAxis=YAxis(type="value"),
    series=[line],
)
EChartsWidget(option=option)

While it looks more verbose, the advantage is the reactivity. We can update the line data and have the chart updated automatically.

ipechart

Configure EChartsWidget with traitlets

Each key in the option dictionary of ECharts has an equivalent configuration class with the same name. These classes contain traits with the same name as the corresponding ECharts option. Any change to these traits will be propagated to the top-level widget, and the chart will be updated automatically.

For instance, you can compare the scatter option of ECharts at https://echarts.apache.org/en/option.html#series-scatter.type and the equivalent Scatter class in the ipecharts documentation. The Python class is generated automatically from the ECharts option.

By using Traitlets to configure your widget, you can use EChartsWidget with other widgets in the Jupyter ecosystem. Here is an example of controlling the chart with an ipywidgets Button:

from ipecharts.option import Option, XAxis, YAxis
from ipecharts.option.series import Line
from ipywidgets.widgets import Button

line = Line(smooth=True, areaStyle={}, data=numpy.random.rand(10).tolist())
option = Option(
    xAxis=XAxis(type="category"),
    yAxis=YAxis(type="value"),
    series=[line],
)
chart = EChartsWidget(option=option)

button = Button(description="Generate data")
def on_button_clicked(b):
    data = numpy.random.rand(10).tolist()
    line.data = data

button.on_click(on_button_clicked)

display(button, chart)

ipechart2

Customize the chart container style

Both EChartsWidget and EChartsRawWidget classes allow you to customize the style of the chart container by setting the style attribute. The style attribute accepts a dictionary where keys are CSS property names in camelCase or kebab-case (as strings), and values are the corresponding CSS values.

Example: 'backgroundColor': '#f0f0f0' or 'background-color': '#f0f0f0'


from ipecharts import EChartsWidget
from ipecharts.option import Option, XAxis, YAxis
from ipecharts.option.series import Line

# Define the data for the line series
line = Line(
    data=[820, 932, 901, 934, 1290, 1330, 1320],
    areaStyle={}
)

# Create the option object with xAxis, yAxis, and series
option = Option(
    xAxis=XAxis(
        type="category",
        boundaryGap=False,
        data=["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
    ),
    yAxis=YAxis(type="value"),
    series=[line]
)

# Define the style for the widget
style = {
    'width': '450px',
    'height': '300px',
    'border': '5px solid #ccc'
}

# Create the EChartsWidget with the option and style
chart = EChartsWidget(option=option, style=style)

# Display the chart
chart

After the widget has been created and displayed, you can update its style by modifying the style attribute.


# Update the style of the chart
chart.style = {
    'width': '800px',
    'height': '600px',
    'border': '2px solid #000'
}

# The widget will automatically update to reflect the new styles.

https://github.com/user-attachments/assets/e4245101-8dff-40a9-a4d4-1f75a06b88c4

Contributing

Development install

Note: You will need markdownify, autodoc-traits, sphinx to generate the code

The jlpm command is JupyterLab's pinned version of yarn that is installed with JupyterLab. You may use yarn or npm in lieu of jlpm below.

# Clone the repo to your local environment
# Change directory to the ipecharts directory
# Install package in development mode
pip install -e "."
# Link your development version of the extension with JupyterLab
jupyter labextension develop . --overwrite
# Rebuild extension Typescript source after making changes
jlpm build

You can watch the source directory and run JupyterLab at the same time in different terminals to watch for changes in the extension's source and automatically rebuild the extension.

# Watch the source directory in one terminal, automatically rebuilding when needed
jlpm watch
# Run JupyterLab in another terminal
jupyter lab

With the watch command running, every saved change will immediately be built locally and available in your running JupyterLab. Refresh JupyterLab to load the change in your browser (you may need to wait several seconds for the extension to be rebuilt).

By default, the jlpm build command generates the source maps for this extension to make it easier to debug using the browser dev tools. To also generate source maps for the JupyterLab core extensions, you can run the following command:

jupyter lab build --minimize=False

Development uninstall

pip uninstall ipecharts

In development mode, you will also need to remove the symlink created by jupyter labextension develop command. To find its location, you can run jupyter labextension list to figure out where the labextensions folder is located. Then you can remove the symlink named ipecharts within that folder.

Packaging the extension

See RELEASE