Merge pull request #19 from bcdev/yogesh-dashi-vega

Use Vega instead of Plotly

Author: forman

dashi/package-lock.json

@@ -50,7 +50,8 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-plotly.js": "^2.6.0",
-    "zustand": "^5.0.0"
+    "zustand": "^5.0.0",
+    "react-vega": "^7.6.0"
   },
   "peerDependencies": {
     "react": ">=18",

dashi/package.json

@@ -17,7 +17,7 @@ const componentState: ComponentState = {
   type: "Box",
   id: "b1",
   components: [
-    { type: "Plot", id: "p1", figure: null } as PlotState,
+    { type: "Plot", id: "p1", chart: null } as PlotState,
     {
       type: "Box",
       id: "b2",

dashi/src/lib/actions/applyPropertyChange.test.ts

@@ -1,4 +1,4 @@
-import Plot from "react-plotly.js";
+import { VegaLite } from "react-vega";
 
 import { type PlotState } from "@/lib/types/state/component";
 import { type PropertyChangeHandler } from "@/lib/types/model/event";
@@ -10,29 +10,30 @@ export interface DashiPlotProps extends Omit<PlotState, "type"> {
 export function DashiPlot({
   id,
   style,
-  figure,
+  chart,
   onPropertyChange,
 }: DashiPlotProps) {
-  if (!figure) {
+  if (!chart) {
     return <div id={id} style={style} />;
   }
+  const { datasets, ...spec } = chart;
+  const handleSignal = (_signalName: string, value: unknown) => {
+    if (id) {
+      return onPropertyChange({
+        componentType: "Plot",
+        componentId: id,
+        propertyName: "points",
+        propertyValue: value,
+      });
+    }
+  };
   return (
-    <Plot
-      divId={id}
+    <VegaLite
+      spec={spec}
+      data={datasets}
       style={style}
-      data={figure.data}
-      layout={figure.layout}
-      config={figure.config}
-      onClick={(event) => {
-        if (id) {
-          onPropertyChange({
-            componentType: "Plot",
-            componentId: id,
-            propertyName: "points",
-            propertyValue: event.points,
-          });
-        }
-      }}
+      signalListeners={{ onClick: handleSignal }}
+      actions={false}
     />
   );
 }

dashi/src/lib/components/DashiPlot.tsx

@@ -1,5 +1,5 @@
 import { type CSSProperties } from "react";
-import { type Config, type Layout, type PlotData } from "plotly.js";
+import type { VisualizationSpec } from "react-vega";
 
 export type ComponentType = "Button" | "Checkbox" | "Dropdown" | "Plot" | "Box";
 
@@ -37,11 +37,11 @@ export interface CheckboxState extends ComponentState {
 
 export interface PlotState extends ComponentState {
   type: "Plot";
-  figure: {
-    data: PlotData[];
-    layout: Partial<Layout>;
-    config: Partial<Config>;
-  } | null;
+  chart:
+    | (VisualizationSpec & {
+        datasets?: Record<string, unknown>; // Add the datasets property
+      })
+    | null;
 }
 
 export interface BoxState extends ContainerState {

dashi/src/lib/types/state/component.ts

@@ -205,8 +205,8 @@ def _parameter_to_dict(parameter: inspect.Parameter) -> dict[str, Any]:
 }
 
 _object_types = {
-    "Figure": "Figure",
     "Component": "Component",
+    "Chart": "Chart"
 }
 
 

dashipy/dashipy/callback.py

@@ -1,19 +1,19 @@
 from dataclasses import dataclass
 from typing import Any
 
-import plotly.graph_objects as go
+import altair as alt
 
 from dashipy import Component
 
 
 @dataclass(frozen=True)
 class Plot(Component):
-    figure: go.Figure | None = None
+    chart: alt.Chart | None = None
 
     def to_dict(self) -> dict[str, Any]:
         d = super().to_dict()
-        if self.figure is not None:
-            d.update(figure=self.figure.to_dict())
+        if self.chart is not None:
+            d.update(chart=self.chart.to_dict())
         else:
-            d.update(figure=None)
+            d.update(chart=None)
         return d

dashipy/dashipy/components/plot.py

@@ -1,7 +1,16 @@
+from typing import Union
+import pandas as pd
+
+
 class Context:
     def __init__(self):
-        self.datasets: dict[int, list[int]] = {
-            0: [10, 20, 30],
-            1: [20, 30, 10],
-            2: [30, 10, 20],
+        self.datasets= {
+            0: pd.DataFrame({
+                'a': ['A', 'B', 'C', 'D', 'E'],
+                'b': [28, 55, 43, 91, 81]
+            }),
+            1: pd.DataFrame({
+                'a': ['V', 'W', 'X', 'Y', 'Z'],
+                'b': [99, 1, 7, 43, 49]
+            })
         }

dashipy/dashipy/demo/context.py

@@ -2,10 +2,10 @@ name: dashi
 channels:
   - conda-forge
 dependencies:
-  - python
+  - python >=3.12,<3.13
   # Dependencies
   - pandas
-  - plotly
+  - altair
   - pyaml
   - tornado
   # Dev Dependencies

dashipy/environment.yml

@@ -1,5 +1,4 @@
-import plotly.graph_objects as go
-from plotly.graph_objs import Layout
+import altair as alt
 
 from dashipy import (Component, Input, Output)
 from dashipy.components import (Plot, Box, Dropdown)
@@ -14,7 +13,7 @@
 def render_panel(ctx: Context) -> Component:
     selected_dataset: int = 0
     plot = Plot(
-        id="plot", figure=make_figure(ctx, selected_dataset), style={"flexGrow": 1}
+        id="plot", chart=make_figure(ctx, selected_dataset), style={"flexGrow": 1}
     )
     dropdown = Dropdown(
         id="selected_dataset",
@@ -46,16 +45,33 @@ def render_panel(ctx: Context) -> Component:
 
 @panel.callback(
     Input("selected_dataset"),
-    Output("plot", "figure"),
+    Output("plot", "chart"),
 )
-def make_figure(ctx: Context, selected_dataset: int = 0) -> go.Figure:
+def make_figure(ctx: Context, selected_dataset: int = 0) -> alt.Chart:
     dataset = ctx.datasets[selected_dataset]
-    fig = go.Figure(
-        layout=Layout(
-            title=f"DS #{selected_dataset + 1}",
-            margin=dict(t=40, r=4, b=4, l=4),
-            autosize=True,
-        )
-    )
-    fig.add_trace(go.Bar(x=["A", "B", "C"], y=dataset))
-    return fig
+
+    # Create a slider
+    corner_slider = alt.binding_range(min=0, max=50, step=1)
+    # Create a parameter and bind that to the slider
+    corner_var = alt.param(bind=corner_slider, value=0, name="cornerRadius")
+    # Create another parameter to handle the click events and send the data as
+    # specified in the fields
+    click_param = alt.selection_point(on="click", name="onClick",
+                                      fields=["a", "b"])
+    # Create a chart type using mark_* where * could be any kind of chart
+    # supported by Vega. We can add properties and parameters as shown below.
+    chart = alt.Chart(dataset).mark_bar(cornerRadius=corner_var).encode(
+        x=alt.X('a:N', title='a'),
+        y=alt.Y('b:Q', title='b'),
+        tooltip=[
+            alt.Tooltip('a:N'),
+            alt.Tooltip('b:Q'),
+        ],
+        color='b:Q',
+    ).properties(
+        width=300,
+        height=300,
+        title="Vega charts"
+    ).add_params(corner_var, click_param)
+
+    return chart