Skip to content

feat(plotly): add @openuidev/plotly package#495

Open
vishxrad wants to merge 1 commit intomainfrom
feat/plotly-package
Open

feat(plotly): add @openuidev/plotly package#495
vishxrad wants to merge 1 commit intomainfrom
feat/plotly-package

Conversation

@vishxrad
Copy link
Copy Markdown
Member

@vishxrad vishxrad commented May 6, 2026

Plotly.js component library for OpenUI's generative UI runtime. Provides 47 LLM-addressable chart components plus a high-level wrapper for one-line chat shells.

Coverage:

  • Layout (7): Stack, Card, CardHeader, Heading, Text, Callout, KPI
  • Cartesian (5): Bar, Line, Scatter, Area, Histogram
  • Distributions (2): Violin, Box
  • Matrix & 2D-density (4): Heatmap, Histogram2D, Histogram2DContour, Contour
  • Hierarchical (3): Sunburst, Treemap, Icicle
  • Categorical (5): Pie, Donut, Funnel, FunnelArea, Waterfall
  • Flow (1): Sankey
  • Multivariate (3): ScatterMatrix, ParCoords, ParCats
  • Financial (2): Candlestick, OHLC
  • Polar (2): ScatterPolar, BarPolar
  • Specialty coords (2): ScatterTernary, ScatterSmith
  • Geo (2): Choropleth, ScatterGeo
  • Data display (2): Indicator, Table
  • Escape hatches (2): Figure, PlotlyJSON

Architecture:

  • Tier-1 typed components map to Plotly traces with Plotly-Express-style prop shapes (Bar(rows, "x", "y", "color")).
  • Tier-2 Figure(data, layout) accepts full Plotly Graph-Objects JSON for any chart Tier-1 doesn't cover.
  • Tier-0 PlotlyJSON({ figure }) renders a fully-formed figure JSON verbatim — bridges backend-produced figures (Python fig.to_json()).

Bundle:

  • plotly.js-dist-min loaded lazily via React.lazy on first chart render (~3.5 MB minified, ~1 MB gzipped). Chat shell first paint is unaffected.
  • Compiled package itself: 96 KB ESM / 22 KB gzipped.

Bidirectional reactivity:

  • plotly_click / plotly_selected / plotly_relayout events flow into useTriggerAction() so the LLM can wire interactive cross-filters.

Plotly.js component library for OpenUI's generative UI runtime. Provides
47 LLM-addressable chart components plus a high-level <PlotlyChat /> wrapper
for one-line chat shells.

Coverage:
  - Layout (7): Stack, Card, CardHeader, Heading, Text, Callout, KPI
  - Cartesian (5): Bar, Line, Scatter, Area, Histogram
  - Distributions (2): Violin, Box
  - Matrix & 2D-density (4): Heatmap, Histogram2D, Histogram2DContour, Contour
  - Hierarchical (3): Sunburst, Treemap, Icicle
  - Categorical (5): Pie, Donut, Funnel, FunnelArea, Waterfall
  - Flow (1): Sankey
  - Multivariate (3): ScatterMatrix, ParCoords, ParCats
  - Financial (2): Candlestick, OHLC
  - Polar (2): ScatterPolar, BarPolar
  - Specialty coords (2): ScatterTernary, ScatterSmith
  - Geo (2): Choropleth, ScatterGeo
  - Data display (2): Indicator, Table
  - Escape hatches (2): Figure, PlotlyJSON

Architecture:
  - Tier-1 typed components map to Plotly traces with Plotly-Express-style
    prop shapes (`Bar(rows, "x", "y", "color")`).
  - Tier-2 `Figure(data, layout)` accepts full Plotly Graph-Objects JSON
    for any chart Tier-1 doesn't cover.
  - Tier-0 `PlotlyJSON({ figure })` renders a fully-formed figure JSON
    verbatim — bridges backend-produced figures (Python `fig.to_json()`).

Bundle:
  - plotly.js-dist-min loaded lazily via React.lazy on first chart render
    (~3.5 MB minified, ~1 MB gzipped). Chat shell first paint is unaffected.
  - Compiled package itself: 96 KB ESM / 22 KB gzipped.

Bidirectional reactivity:
  - plotly_click / plotly_selected / plotly_relayout events flow into
    useTriggerAction() so the LLM can wire interactive cross-filters.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant