diff --git a/src/streamlit_plotly_events/__init__.py b/src/streamlit_plotly_events/__init__.py
index abd03c49..da589fcb 100644
--- a/src/streamlit_plotly_events/__init__.py
+++ b/src/streamlit_plotly_events/__init__.py
@@ -1,7 +1,8 @@
import os
-import streamlit.components.v1 as components
from json import loads
+import streamlit.components.v1 as components
+
# Create a _RELEASE constant. We'll set this to False while we're developing
# the component, and True when we're ready to package and distribute it.
# (This is, of course, optional - there are innumerable ways to manage your
@@ -113,8 +114,9 @@ def plotly_events(
# During development, we can run this just as we would any other Streamlit
# app: `$ streamlit run src/streamlit_plotly_events/__init__.py`
if not _RELEASE:
- import streamlit as st
import plotly.express as px
+ import plotly.graph_objects as go
+ import streamlit as st
st.set_page_config(layout="wide")
@@ -148,3 +150,32 @@ def plotly_events(
fig4, key="hover", click_event=False, hover_event=True
)
plot_name_holder4.write(f"Hovered Point: {clickedPoint4}")
+ st.subheader("# Plotly Heatmap with click Event and text")
+ z = [
+ [0.1, 0.3, 0.5, 0.7, 0.9],
+ [1, 0.8, 0.6, 0.4, 0.2],
+ [0.2, 0, 0.5, 0.7, 0.9],
+ [0.9, 0.8, 0.4, 0.2, 0],
+ [0.3, 0.4, 0.5, 0.7, 1],
+ ]
+
+ y = [
+ ["t", "a", "b", "j", "h"],
+ ["d", "d", "d", "k", "h"],
+ ["n", "b", "r", "b", "b"],
+ ["d", "t", "y", "m", "g"],
+ ["s", "q", "b", "b", "h"],
+ ]
+ fig5 = go.Figure()
+ fig5.add_trace(
+ go.Heatmap(
+ z=z,
+ texttemplate="%{text}",
+ text=y,
+ colorscale="viridis",
+ hovertemplate="%{text}
x: %{x}
y: %{y}
z: %{z}",
+ )
+ )
+ plot_name_holder5 = st.empty()
+ clickedPoint5 = plotly_events(fig5, click_event=True, key="heatmap with text")
+ plot_name_holder5.write(f"Clicked Point: {clickedPoint5}")
diff --git a/src/streamlit_plotly_events/frontend/package.json b/src/streamlit_plotly_events/frontend/package.json
index 0ef89395..11aa9575 100644
--- a/src/streamlit_plotly_events/frontend/package.json
+++ b/src/streamlit_plotly_events/frontend/package.json
@@ -10,13 +10,13 @@
"@types/node": "^12.0.0",
"@types/react": "^16.9.0",
"@types/react-dom": "^16.9.0",
- "plotly.js": "^1.58.2",
+ "plotly.js": "^2.20.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-plotly.js": "^2.4.0",
- "react-scripts": "3.4.1",
- "streamlit-component-lib": "^1.2.0",
- "typescript": "~3.7.2"
+ "react-scripts": "~4.0.1",
+ "streamlit-component-lib": "^1.3.0",
+ "typescript": "^4.2.0"
},
"devDependencies": {
"@types/plotly.js": "^1.50.16",
@@ -44,4 +44,4 @@
]
},
"homepage": "."
-}
+}
\ No newline at end of file
diff --git a/src/streamlit_plotly_events/frontend/src/StreamlitPlotlyEventsComponent.tsx b/src/streamlit_plotly_events/frontend/src/StreamlitPlotlyEventsComponent.tsx
index 41cd66c0..ba93f207 100644
--- a/src/streamlit_plotly_events/frontend/src/StreamlitPlotlyEventsComponent.tsx
+++ b/src/streamlit_plotly_events/frontend/src/StreamlitPlotlyEventsComponent.tsx
@@ -25,10 +25,10 @@ class StreamlitPlotlyEventsComponent extends StreamlitComponentBase {
layout={plot_obj.layout}
config={plot_obj.config}
frames={plot_obj.frames}
- onClick={click_event ? this.plotlyEventHandler : function(){}}
- onSelected={select_event ? this.plotlyEventHandler : function(){}}
- onHover={hover_event ? this.plotlyEventHandler : function(){}}
- style={{width: override_width, height: override_height}}
+ onClick={click_event ? this.plotlyEventHandler : function () { }}
+ onSelected={select_event ? this.plotlyEventHandler : function () { }}
+ onHover={hover_event ? this.plotlyEventHandler : function () { }}
+ style={{ width: override_width, height: override_height }}
className="stPlotlyChart"
/>
)
diff --git a/src/streamlit_plotly_events/frontend/tsconfig.json b/src/streamlit_plotly_events/frontend/tsconfig.json
index af10394b..e18c413e 100644
--- a/src/streamlit_plotly_events/frontend/tsconfig.json
+++ b/src/streamlit_plotly_events/frontend/tsconfig.json
@@ -1,7 +1,11 @@
{
"compilerOptions": {
"target": "es5",
- "lib": ["dom", "dom.iterable", "esnext"],
+ "lib": [
+ "dom",
+ "dom.iterable",
+ "esnext"
+ ],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
@@ -13,7 +17,10 @@
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
- "jsx": "react"
+ "jsx": "react-jsx",
+ "noFallthroughCasesInSwitch": true
},
- "include": ["src"]
+ "include": [
+ "src"
+ ]
}