add panel H

Author: clarasb

chartlets.py/demo/my_extension/__init__.py

@@ -6,6 +6,7 @@
 from .my_panel_5 import panel as my_panel_5
 from .my_panel_6 import panel as my_panel_6
 from .my_panel_7 import panel as my_panel_7
+from .my_panel_8 import panel as my_panel_8
 
 
 ext = Extension(__name__)
@@ -16,3 +17,4 @@
 ext.add(my_panel_5)
 ext.add(my_panel_6)
 ext.add(my_panel_7)
+ext.add(my_panel_8)

chartlets.py/demo/my_extension/my_panel_8.py

@@ -0,0 +1,50 @@
+import altair as alt
+import pandas as pd
+from chartlets import Component, Input, State, Output
+from chartlets.components import Tabs, Tab, Typography, Box, VegaChart
+
+from server.context import Context
+from server.panel import Panel
+
+
+panel = Panel(__name__, title="Panel H")
+
+
+@panel.layout(State("@app", "selectedDatasetId"))
+def render_panel(
+    ctx: Context,
+    selected_dataset_id: str = "",
+) -> Component:
+    dataset = ctx.datasets.get(selected_dataset_id)
+
+    c = (
+        alt.Chart(dataset)
+        .mark_bar()
+        .encode(
+            x=alt.X("x:N", title="x"),
+            y=alt.Y("a:Q", title="a"))
+    )
+
+    chart = VegaChart(
+        id="chart1", chart=c, style={"flexGrow": 1}
+    )
+
+    info_text = Typography(id="info_text", children=["hallo"])
+
+    tab1=Tab(id = "tab1",label="Plot 1", children=["Hallo"])
+    tab2=Tab(id = "tab2",label="Plot 2", children=[info_text])
+    tab3 = Tab(id="tab3", label="Plot 3", children=[chart])
+
+    select = Tabs(id = "tab", value = 0, children=[tab1,tab2,tab3])
+
+
+    return Box(
+        style={
+            "display": "flex",
+            "flexDirection": "column",
+            "width": "100%",
+            "height": "100%",
+        },
+        children=[chart, info_text, select,tab2],
+    )
+