feat: add docs and update demo (#14)

* docs: use markdown to show code

* docs: add JS api document

example/pages/10_ Funnel.py

@@ -58,8 +58,7 @@
 
 g2(options=options)
 
-source = st.expander("Source Code")
-source.markdown("""
+st.markdown("""
 ```py
 import streamlit as st
 from streamlit_g2 import g2

example/pages/11_Boxplot.py

@@ -30,8 +30,7 @@
 
 g2(options=options)
 
-source = st.expander("Source Code")
-source.markdown("""
+st.markdown("""
 ```py
 import streamlit as st
 from streamlit_g2 import g2

example/pages/12_Histogram.py

@@ -36,8 +36,7 @@
 
 g2(options=options)
 
-source = st.expander("Source Code")
-source.markdown("""
+st.markdown("""
 ```py
 import streamlit as st
 from streamlit_g2 import g2

example/pages/1_Bar.py

@@ -30,8 +30,7 @@
 
 g2(options=options)
 
-source = st.expander("Source Code")
-source.markdown("""
+st.markdown("""
 ```py
 import streamlit as st
 from streamlit_g2 import g2
@@ -97,8 +96,7 @@
 
 g2(options=options)
 
-source = st.expander("Source Code")
-source.markdown("""
+st.markdown("""
 ```py
 import streamlit as st
 from streamlit_g2 import g2
@@ -178,8 +176,7 @@
 
 g2(options=options)
 
-source = st.expander("Source Code")
-source.markdown("""
+st.markdown("""
 ```py
 import streamlit as st
 from streamlit_g2 import g2

example/pages/2_Column.py

@@ -35,8 +35,7 @@
 
 g2(options=options)
 
-source = st.expander("Source Code")
-source.markdown("""
+st.markdown("""
 ```py
 import streamlit as st
 from streamlit_g2 import g2
@@ -112,8 +111,7 @@
 
 g2(options=options)
 
-source = st.expander("Source Code")
-source.markdown("""
+st.markdown("""
 ```py
 import streamlit as st
 from streamlit_g2 import g2
@@ -203,8 +201,7 @@
 
 g2(options=options)
 
-source = st.expander("Source Code")
-source.markdown("""
+st.markdown("""
 ```py
 import streamlit as st
 from streamlit_g2 import g2

example/pages/3_Line.py

@@ -24,8 +24,7 @@
 
 g2(options=options)
 
-source = st.expander("Source Code")
-source.markdown("""
+st.markdown("""
 ```py
 import streamlit as st
 from streamlit_g2 import g2

example/pages/4_Area.py

@@ -23,8 +23,7 @@
 
 g2(options=options)
 
-source = st.expander("Source Code")
-source.markdown("""
+st.markdown("""
 ```py
 import streamlit as st
 from streamlit_g2 import g2

example/pages/5_Pie.py

@@ -50,8 +50,7 @@
 
 g2(options=options)
 
-source = st.expander("Source Code")
-source.markdown("""
+st.markdown("""
 ```py
 import streamlit as st
 from streamlit_g2 import g2

example/pages/6_Scatter.py

@@ -25,8 +25,7 @@
 
 g2(options=options)
 
-source = st.expander("Source Code")
-source.markdown("""
+st.markdown("""
 ```py
 import streamlit as st
 from streamlit_g2 import g2

example/pages/7_DualAxes.py

@@ -165,8 +165,7 @@
 
 g2(options=options)
 
-source = st.expander("Source Code")
-source.markdown("""
+st.markdown("""
 ```py
 import streamlit as st
 from streamlit_g2 import g2

example/pages/8_Liquid.py

@@ -23,8 +23,7 @@
 
 g2(options=options)
 
-source = st.expander("Source Code")
-source.markdown("""
+st.markdown("""
 ```py
 import streamlit as st
 from streamlit_g2 import g2

example/pages/9_Ring.py

@@ -75,8 +75,7 @@
 
 g2(options=options)
 
-source = st.expander("Source Code")
-source.markdown("""
+st.markdown("""
 ```py
 import streamlit as st
 from streamlit_g2 import g2

readme.md

@@ -49,7 +49,7 @@ options = {
     }
 }
 
-g2(options=options, style=None, key="streamlit_g2")
+g2(options=options, style=None)
 ```
 
 <img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*XqCnTbkpAkQAAAAAAAAAAAAADmJ7AQ/fmt.webp" width="640" alt="example">
@@ -64,6 +64,34 @@ Now, There is only one API for `streamlit-g2`, named `g2`, see the `options` in
 | options  | the [options](https://g2.antv.antgroup.com/manual/core/api) for the visualization, say `chart.options(options)` | `G2options` \| `null` | -       |
 | style    | the style of the container                                                                                      | `CSSProperties`       | -       |
 
+## FAQ
+
+- How to use Javascript callback function?
+
+```py
+import streamlit as st
+from streamlit_g2 import g2, JS
+
+options = {
+    "type": "interval",
+    "data": [
+        { "genre": 'Sports', "sold": 275 },
+        { "genre": 'Strategy', "sold": 115 },
+        { "genre": 'Action', "sold": 120 },
+        { "genre": 'Shooter', "sold": 350 },
+        { "genre": 'Other', "sold": 150 },
+    ],
+    "encode": {
+        "x": "genre",
+        "y": "sold",
+        # Use Javascript function.
+        "color": JS('''(d) => d.sold > 300 ? "red" : "green"'''),
+    }
+}
+
+g2(options=option)
+```
+
 
 ## Development