kitware / trame-plotly

trame-plotly brings Plotly charts into trame

Plotly widget for trame

trame-plotly extend trame widgets with components that can interface with Plotly to display their charts.

Plotly integration in trame allow you to create rich visualization by leveraging their Python or JavaScript interface. The JavaScript version is exposed via Vue.plotly within trame.widgets.plotly.Plotly class definition.

This package is not supposed to be used by itself but rather should come as a dependency of trame. For any specificity, please refer to the trame documentation.

Installing

trame-plotly can be installed with pip:

pip install --upgrade trame-plotly

Usage

The Trame Tutorial is the place to go to learn how to use the library and start building your own application.

The API Reference documentation provides API-level documentation.

The Plotly component relies on the server for generating the chart definition. This can be achieved by hand or by simply using the Python version of Plotly.

How to use it?

Using the Python library

import plotly.graph_objects as go
from trame.widgets import plotly

fig = go.Figure(
    data=go.Contour(
        z=[
            [10, 10.625, 12.5, 15.625, 20],
            [5.625, 6.25, 8.125, 11.25, 15.625],
            [2.5, 3.125, 5.0, 8.125, 12.5],
            [0.625, 1.25, 3.125, 6.25, 10.625],
            [0, 0.625, 2.5, 5.625, 10],
        ]
    )
)
fig2 = go.Figure(
    data=go.Contour(
        z=[
            [5.625, 6.25, 8.125, 11.25, 15.625],
            [2.5, 3.125, 5.0, 8.125, 12.5],
            [10, 10.625, 12.5, 15.625, 20],
            [0.625, 1.25, 3.125, 6.25, 10.625],
            [0, 0.625, 2.5, 5.625, 10],
        ]
    )
)

widget = plotly.Figure(fig)
widget.update(fig2)

But if you are feeling more adventurous you can use the component API directly by building the data yourself as well.

from trame.widgets import plotly

# https://plotly.com/javascript/reference/
plotly_data = [
  {
    "x": [1,2,3,4],
    "y": [10,15,13,17],
    "type": "scatter",
  }
]

# https://plotly.com/javascript/reference/layout/
plotly_layout = {
  "title": "My graph",
}

# https://plotly.com/javascript/configuration-options/
plotly_options = {
  "scroll_zoom": True,
  "editable": True,
  "static_plot": True,
  "to_image_options": {
    "format": "svg", # one of png, svg, jpeg, webp
    "filename": "custom_image",
    "height": 500,
    "width": 700,
    "scale": 1 # Multiply title/legend/axis/canvas sizes by this factor
  },
  "display_mode_bar": True,
  "mode_bar_buttons_to_remove": [
    "zoom2d", "pan2d", "select2d", "lasso2d", "zoomIn2d", "zoomOut2d", "autoScale2d", "resetScale2d", # 2D
    "zoom3d", "pan3d", "orbitRotation", "tableRotation", "handleDrag3d", "resetCameraDefault3d", "resetCameraLastSave3d", "hoverClosest3d", # 3D
    "hoverClosestCartesian", "hoverCompareCartesian", # Cartesian
    "zoomInGeo", "zoomOutGeo", "resetGeo", "hoverClosestGeo", # Geo
    "hoverClosestGl2d", "hoverClosestPie", "toggleHover", "resetViews", "toImage", "sendDataToCloud", "toggleSpikelines", "resetViewMapbox", # Other
  ],
  "mode_bar_buttons_to_add": [
    {
      "name": 'color toggler',
      "icon": icon1, # https://plotly.com/javascript/configuration-options/#add-buttons-to-modebar
      "click": "...",
    },
  ],
  "locale": "fr",
  "display_logo": False,
  "responsive": True,
  "double_click_delay": 1000,
}

# Hand made chart
chart = plotly.Figure(
  data=("chart_data", plotly_data),
  layout=("chart_layout", plotly_layout),
  **plotly_options,
)

Type	Values
properties	data, layout, display_mode_bar, scroll_zoom, editable, static_plot, to_image_options, mode_bar_buttons_to_remove, mode_bar_buttons_to_add, locale, display_logo, responsive, double_click_delay
events	after_export, after_plot, animated, animating_frame, animation_interrupted, auto_size, before_export, button_clicked, click, click_annotation, deselect, double_click, framework, hover, legend_click, legend_double_click, relayout, restyle, redraw, selected, selecting, slider_change, slider_end, slider_start, transitioning, transition_interrupted, unhover

License

trame-plotly is made available under the MIT License. For more details, see LICENSE This license has been chosen to match the one use by Plotly and vue-plotly which are instrumental for making that library possible.

Community

Trame | Discussions | Issues | RoadMap | Contact Us

Enjoying trame?

Share your experience with a testimonial or with a brand approval.

trame-plotly's Issues

Plots on top of each other with `position: absolute;`

Hello, I am a beginner with trame and I am facing an issue with a plotly figure.
When I want to put an element after a plotly figure (for example another plotly figure as shown below), one is hiding the other.
By removing position: absolute;, it works as I want.

import plotly.graph_objects as go
from trame.widgets import plotly
from trame.app import get_server
from trame.ui.html import DivLayout

fig = go.Figure(
    data=go.Contour(
        z=[
            [10, 10.625, 12.5, 15.625, 20],
            [5.625, 6.25, 8.125, 11.25, 15.625],
            [2.5, 3.125, 5.0, 8.125, 12.5],
            [0.625, 1.25, 3.125, 6.25, 10.625],
            [0, 0.625, 2.5, 5.625, 10],
        ]
    )
)


server = get_server(client_type="vue2")

with DivLayout(server) as layout:
    plotly.Figure(fig)
    plotly.Figure(fig)

if __name__ == "__main__":
    server.start()

I see that it comes from vue-components/src/components/TramePlotly.js

template: `<div style="position: relative; width: 100%; height: 100%;" v-bind="$attrs">
              <div ref="elem" style="position: absolute; width: 100%; height: 100%;"></div>
           </div>`,

Is there a way to manage this option? Or should I use it in a better way?

Provide some way to hook into client-side zoom events

Would be nice if we could bind a callback when the user zooms a plot on the front-end.