TimelineJS is a populair tool from Knightlab. It has been used by more than 250,000 people to tell stories seen hundreds of millions of times, and is available in more than sixty languages.
"
27 | }
28 | },
29 | {
30 | "media": {
31 | "url": "https://www.youtube.com/watch?v=CmSKVW1v0xM",
32 | "caption": "Streamlit Components (credits)"
33 | },
34 | "start_date": {
35 | "year": "2020",
36 | "month":"7",
37 | "day":"13"
38 | },
39 | "text": {
40 | "headline": "Streamlit Components version 0.63.0",
41 | "text": "Streamlit lets you turn data scripts into sharable web apps in minutes, not weeks. It's all Python, open-source, and free! And once you've created an app you can use our free sharing platform to deploy, manage, and share your app with the world."
42 | }
43 | },
44 | {
45 | "media": {
46 | "url": "https://github.com/innerdoc/streamlit-timeline/raw/main/component-logo.png",
47 | "caption": "github/innerdoc (credits)"
48 | },
49 | "start_date": {
50 | "year": "2021",
51 | "month":"2"
52 | },
53 | "text": {
54 | "headline": "Streamlit TimelineJS component",
55 | "text": "Started with a demo on https://www.innerdoc.com/nlp-timeline/ . Then made a Streamlit component of it. Then made a PyPi package for it."
56 | }
57 | }
58 | ]
59 | }
--------------------------------------------------------------------------------
/example.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/innerdoc/streamlit-timeline/44a39d008b5c1c6dd0d03b332604aa8999e62272/example.png
--------------------------------------------------------------------------------
/example.py:
--------------------------------------------------------------------------------
1 | # Streamlit Timeline Component Example
2 |
3 | import streamlit as st
4 | from streamlit_timeline import timeline
5 |
6 |
7 | # use full page width
8 | st.set_page_config(page_title="Timeline Example", layout="wide")
9 |
10 | # load data
11 | with open('example.json', "r") as f:
12 | data = f.read()
13 |
14 | # render timeline
15 | timeline(data, height=800)
--------------------------------------------------------------------------------
/setup.py:
--------------------------------------------------------------------------------
1 |
2 | from os.path import dirname
3 | from os.path import join
4 | import setuptools
5 |
6 |
7 | def readme() -> str:
8 | """Utility function to read the README file.
9 | Used for the long_description. It's nice, because now 1) we have a top
10 | level README file and 2) it's easier to type in the README file than to put
11 | a raw string in below.
12 | :return: content of README.md
13 | """
14 | return open(join(dirname(__file__), "README.md")).read()
15 |
16 |
17 | setuptools.setup(
18 | name="streamlit-timeline",
19 | version="0.0.2",
20 | author="Rob van Zoest",
21 | author_email="",
22 | description="A Streamlit custom component to display a timeline",
23 | long_description=readme(),
24 | long_description_content_type="text/markdown",
25 | url="https://github.com/innerdoc/streamlit-timeline",
26 | project_urls={
27 | "Github":"https://github.com/innerdoc/streamlit-timeline",
28 | "Homepage":"https://www.innerdoc.com",
29 | "Twitter":"https://twitter.com/innerdoc_nlp",
30 | },
31 | packages=setuptools.find_packages(),
32 | include_package_data=True,
33 | classifiers=[
34 | "Programming Language :: Python :: 3",
35 | "Operating System :: OS Independent",
36 | ],
37 | python_requires=">=3.6",
38 | install_requires=[
39 | "streamlit >= 0.70",
40 | ],
41 | )
--------------------------------------------------------------------------------
/streamlit_timeline/__init__.py:
--------------------------------------------------------------------------------
1 | import json
2 | import streamlit.components.v1 as components
3 |
4 |
5 | def timeline(data, height=800):
6 |
7 | """Create a new timeline component.
8 |
9 | Parameters
10 | ----------
11 | data: str or dict
12 | String or dict in the timeline json format: https://timeline.knightlab.com/docs/json-format.html
13 | height: int or None
14 | Height of the timeline in px
15 |
16 | Returns
17 | -------
18 | static_component: Boolean
19 | Returns a static component with a timeline
20 | """
21 |
22 | # if string then to json
23 | if isinstance(data, str):
24 | data = json.loads(data)
25 |
26 | # json to string
27 | json_text = json.dumps(data)
28 |
29 | # load json
30 | source_param = 'timeline_json'
31 | source_block = f'var {source_param} = {json_text};'
32 |
33 | # load css + js
34 | cdn_path = 'https://cdn.knightlab.com/libs/timeline3/latest'
35 | css_block = f''
36 | js_block = f''
37 |
38 |
39 | # write html block
40 | htmlcode = css_block + '''
41 | ''' + js_block + '''
42 |
43 |
44 |
45 | '''
52 |
53 |
54 | # return rendered html
55 | static_component = components.html(htmlcode, height=height,)
56 |
57 | return static_component
58 |
--------------------------------------------------------------------------------