[fit] update to plotly.js 2.20.0

Author: Hugo Le Bars

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}<br>x: %{x}<br>y: %{y}<br>z: %{z}<extra></extra>",
+        )
+    )
+    plot_name_holder5 = st.empty()
+    clickedPoint5 = plotly_events(fig5, click_event=True, key="heatmap with text")
+    plot_name_holder5.write(f"Clicked Point: {clickedPoint5}")

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": "."
-}
+}

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"
       />
     )

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"
+  ]
 }