Update Panels

Author: b-yogesh

dashi/src/lib/components/DashiPlot.tsx

@@ -24,10 +24,13 @@ export function DashiPlot({
     mode: "vega-lite",
     spec: spec,
   });
+  const handleSignal = (signalName: string, value: unknown) => {
+    console.log("signalName", signalName, value);
+  };
   const VegaChartWrapper = ({ id, style }: VegaChartWrapperProps) => {
     return (
       <div id={id} style={style}>
-        <Plot data={datasets} />
+        <Plot data={datasets} signalListeners={{ onClick: handleSignal }} />
       </div>
     );
   };

dashipy/my_extension/my_panel_1.py

@@ -49,15 +49,21 @@ def render_panel(ctx: Context) -> Component:
 )
 def make_figure(ctx: Context, selected_dataset: int = 0) -> alt.Chart:
     dataset = ctx.datasets[selected_dataset]
-    fig = alt.Chart(dataset).mark_bar().encode(
+    corner_slider = alt.binding_range(min=0, max=50, step=1)
+    corner_var = alt.param(bind=corner_slider, value=0, name="cornerRadius")
+    click_param = alt.selection_point(on="click", name="onClick", fields=["a", "b"])
+    fig = 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', title='a'),
-            alt.Tooltip('b:Q', title='b'),
-        ]
+            alt.Tooltip('a:N'),
+            alt.Tooltip('b:Q'),
+        ],
+        color='b:Q',
     ).properties(
-    width=400,
-    height=400
-)
+        width=300,
+        height=300,
+        title="Vega charts"
+    ).add_params(corner_var, click_param)
+    print(fig.to_json())
     return fig

dashipy/my_extension/my_panel_2.py

@@ -1,5 +1,4 @@
-import plotly.express as pe
-import plotly.graph_objects as go
+import altair as alt
 
 from dashipy import (Component, Input, Output)
 from dashipy.components import (Plot, Box, Dropdown)
@@ -48,8 +47,25 @@ def render_panel(ctx: Context) -> Component:
     Input("selected_dataset"),
     Output("plot", "figure"),
 )
-def make_figure(ctx: Context, selected_dataset: int) -> go.Figure:
+def make_figure(ctx: Context, selected_dataset: int = 0) -> alt.Chart:
     dataset = ctx.datasets[selected_dataset]
-    line = pe.line(x=[-1.0, 0.0, 1.0], y=dataset, title=f"DS #{selected_dataset + 1}")
-    line.update_layout(dict(margin=dict(t=40, r=4, b=4, l=4), autosize=True))
-    return line
+    slider = alt.binding_range(min=0, max=100, step=1, name='Cutoff ')
+    selector = alt.param(name='SelectorName', value=50, bind=slider)
+    fig = alt.Chart(dataset).mark_bar().encode(
+        x='a:N',
+        y='b:Q',
+        tooltip=['a:N','b:Q'],
+        color = alt.condition(
+            'datum.b < SelectorName',
+            alt.value('green'),
+            alt.value('yellow')
+        )
+    ).properties(
+    width=300,
+    height=300,
+    title="Vega charts using Shorthand syntax"
+    ).add_params(
+        selector,
+    ).interactive()
+    return fig
+