From a9284fae60fbe6dc7b652a79f9ff4bea7ac8060d Mon Sep 17 00:00:00 2001 From: Zachary Blackwood Date: Mon, 21 Aug 2023 14:09:26 -0400 Subject: [PATCH 1/5] Add use_container_width column --- setup.py | 2 +- src/streamlit_vizzu/chart.py | 8 +++++++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/setup.py b/setup.py index a63604b..8b4b631 100644 --- a/setup.py +++ b/setup.py @@ -7,7 +7,7 @@ setuptools.setup( name="streamlit-vizzu", - version="0.1.3", + version="0.1.4", author="Zachary Blackwoood", author_email="zachary@streamlit.io", description=( diff --git a/src/streamlit_vizzu/chart.py b/src/streamlit_vizzu/chart.py index b1c57ef..076d3a7 100644 --- a/src/streamlit_vizzu/chart.py +++ b/src/streamlit_vizzu/chart.py @@ -29,6 +29,7 @@ def __init__( return_clicks: bool = True, rerun_on_click: bool = False, default_duration: float | None = None, + use_container_width: bool = False, **kwargs, ): """ @@ -55,8 +56,13 @@ def __init__( self.default_duration = default_duration self.ipyvizzu_version = StrictVersion(version("ipyvizzu")) + if use_container_width: + _width = "100%" + else: + _width = f"{width}px" + super().__init__( - width=f"{width}px", + width=_width, height=f"{self.chart_height}px", display=DisplayTarget.MANUAL, **kwargs, From 3d9e3bb05be88f16ad1e74378db648d7d7afd3b5 Mon Sep 17 00:00:00 2001 From: Zachary Blackwood Date: Mon, 21 Aug 2023 14:20:30 -0400 Subject: [PATCH 2/5] Lint everything --- 1-tutorial.py | 21 +++---- 3-drilldown.py | 40 -------------- football-transfers/football_transfers.py | 45 ++++++++------- football-transfers/pages/2-bug.py | 29 ++++++---- pages/2-slider.py | 16 +++--- pages/3-drilldown.py | 70 ++++++++++++------------ pages/4-explorer.py | 2 +- 7 files changed, 95 insertions(+), 128 deletions(-) delete mode 100644 3-drilldown.py diff --git a/1-tutorial.py b/1-tutorial.py index dc95dbd..6f693e2 100644 --- a/1-tutorial.py +++ b/1-tutorial.py @@ -6,26 +6,21 @@ chart = VizzuChart() # Generate some data and add it to the chart -df = pd.DataFrame({ - "cat": ["x", "y", "z"], - "val": [1, 2, 3]}) +df = pd.DataFrame({"cat": ["x", "y", "z"], "val": [1, 2, 3]}) data = Data() data.add_data_frame(df) chart.animate(data) -st.subheader('Visit [intro-to-vizzu-in.streamlit.app](https://intro-to-vizzu-in.streamlit.app/) to follow along') +st.subheader( + "Visit [intro-to-vizzu-in.streamlit.app](https://intro-to-vizzu-in.streamlit.app/) " + "to follow along" +) # Add some configuration to tell Vizzu how to display the data -chart.animate(Config({ - "x": "cat", - "y": "val", - "title": "Look at my plot!"})) +chart.animate(Config({"x": "cat", "y": "val", "title": "Look at my plot!"})) if st.checkbox("Swap"): - chart.animate(Config({ - "x": "val", - "y": "cat", - "title": "Swapped!"})) + chart.animate(Config({"x": "val", "y": "cat", "title": "Swapped!"})) # Show the chart in the app! output = chart.show() @@ -33,7 +28,7 @@ if output is not None and "marker" in output: st.write("value of clicked bar:", output["marker"]["values"]["val"]) -st.caption('Data shown on the chart') +st.caption("Data shown on the chart") st.dataframe(df) st.write( diff --git a/3-drilldown.py b/3-drilldown.py deleted file mode 100644 index 32da51d..0000000 --- a/3-drilldown.py +++ /dev/null @@ -1,40 +0,0 @@ -import pandas as pd -from streamlit_vizzu import Config, Data, VizzuChart - -chart = VizzuChart(rerun_on_click=True, default_duration=1) - -df = pd.DataFrame( - { - "a": ["x", "y", "z", "x", "y", "z"], - "b": [1, 2, 3, 4, 5, 6], - "c": ["A", "A", "B", "B", "C", "D"], - } -) - -data = Data() -data.add_data_frame(df) -chart.animate(data) - -bar_clicked = chart.get("marker.categories.a") - -if bar_clicked is None: - chart.animate(Data.filter()) - chart.animate( - Config({"x": "a", "y": "b", "title": "Look at my plot! Click!", "color": None}), - ) -else: - chart.animate(Data.filter(f"record['a'] == '{bar_clicked}'")) - chart.animate( - Config( - { - "x": "c", - "y": "b", - "title": f"Drilldown for a = {bar_clicked}", - "color": "c", - } - ) - ) - -chart.show() - -"Click on one of the bars to see the drilldown" diff --git a/football-transfers/football_transfers.py b/football-transfers/football_transfers.py index 8abbd9f..933a21a 100644 --- a/football-transfers/football_transfers.py +++ b/football-transfers/football_transfers.py @@ -4,7 +4,9 @@ from streamlit_vizzu import VizzuChart -data_frame = pd.read_csv("football-transfers/football_transfers_cleaned.csv", dtype={"year": str}) +data_frame = pd.read_csv( + "football-transfers/football_transfers_cleaned.csv", dtype={"year": str} +) data = Data() data.add_data_frame(data_frame) @@ -16,35 +18,38 @@ year = st.slider("Pick a year", min_value=1992, max_value=2022, value=2010) compare_by = st.radio("Compare by", ["Fees earned", "Fees spent", "Balance"], index=2) if compare_by == "Fees earned": - compare_title = "Transfer fees earned in " - x = "fee[m€]" - filter = f"record.year == '{year}' && record.transfer_movement == 'out'" + compare_title = "Transfer fees earned in " + x = "fee[m€]" + filter = f"record.year == '{year}' && record.transfer_movement == 'out'" elif compare_by == "Fees spent": - compare_title = "Transfer fees spent in " - x = "fee[m€]" - filter = f"record.year == '{year}' && record.transfer_movement == 'in' && record.club_name =='Arsenal FC'" + compare_title = "Transfer fees spent in " + x = "fee[m€]" + filter = ( + f"record.year == '{year}' && record.transfer_movement == 'in' " + "&& record.club_name =='Arsenal FC'" + ) else: - compare_title = "Balance of transfer fees in " - x = "fee_real[m€]" - filter = f"record.year == '{year}'" + compare_title = "Balance of transfer fees in " + x = "fee_real[m€]" + filter = f"record.year == '{year}'" chart.animate( - Data.filter(filter), + Data.filter(filter), Config( - {"x": [x,"player_name"], - "y": "club_name", - "color": "club_name", - "lightness":"player_name", - #"sort": "byValue", - "title": f"{compare_title}{year}"} + { + "x": [x, "player_name"], + "y": "club_name", + "color": "club_name", + "lightness": "player_name", + # "sort": "byValue", + "title": f"{compare_title}{year}", + } ), Style( { "plot": { - "xAxis": { - "label": { - "numberScale": "shortScaleSymbolUS"}}, + "xAxis": {"label": {"numberScale": "shortScaleSymbolUS"}}, "marker": { "colorPalette": ( "#b74c20FF #c47f58FF #1c9761FF #ea4549FF #875792FF #3562b6FF " diff --git a/football-transfers/pages/2-bug.py b/football-transfers/pages/2-bug.py index 441b1ba..0858bd9 100644 --- a/football-transfers/pages/2-bug.py +++ b/football-transfers/pages/2-bug.py @@ -4,7 +4,9 @@ from streamlit_vizzu import VizzuChart -data_frame = pd.read_csv("football-transfers/football_transfers_cleaned.csv", dtype={"year": str}) +data_frame = pd.read_csv( + "football-transfers/football_transfers_cleaned.csv", dtype={"year": str} +) data = Data() data.add_data_frame(data_frame) @@ -17,25 +19,28 @@ compare_title = "Transfer fees spent in " x = "fee[m€]" -filter = f"record.year == '{year}' && record.transfer_movement == 'in' && record.club_name =='Arsenal FC'" +filter = ( + f"record.year == '{year}' && record.transfer_movement == 'in' " + "&& record.club_name =='Arsenal FC'" +) chart.animate( - Data.filter(filter), + Data.filter(filter), Config( - {"x": x, - "y": "player_name", - "color": "player_name", - "sort": "byValue", - "label": x, - "title": f"{compare_title}{year}"} + { + "x": x, + "y": "player_name", + "color": "player_name", + "sort": "byValue", + "label": x, + "title": f"{compare_title}{year}", + } ), Style( { "plot": { - "xAxis": { - "label": { - "numberScale": "shortScaleSymbolUS"}}, + "xAxis": {"label": {"numberScale": "shortScaleSymbolUS"}}, "marker": { "colorPalette": ( "#b74c20FF #c47f58FF #1c9761FF #ea4549FF #875792FF #3562b6FF " diff --git a/pages/2-slider.py b/pages/2-slider.py index 44985f0..82676da 100644 --- a/pages/2-slider.py +++ b/pages/2-slider.py @@ -18,18 +18,18 @@ chart.animate( Data.filter(f"record.Year <= '{year}'"), Config.groupedBar( - {"x": "Revenue[$]", - "y": "Format", - "groupedBy": "Format", - "sort": "byValue", - "title": f"Music Revenues up to {year}"} + { + "x": "Revenue[$]", + "y": "Format", + "groupedBy": "Format", + "sort": "byValue", + "title": f"Music Revenues up to {year}", + } ), Style( { "plot": { - "xAxis": { - "label": { - "numberScale": "shortScaleSymbolUS"}}, + "xAxis": {"label": {"numberScale": "shortScaleSymbolUS"}}, "marker": { "colorPalette": ( "#b74c20FF #c47f58FF #1c9761FF #ea4549FF #875792FF #3562b6FF " diff --git a/pages/3-drilldown.py b/pages/3-drilldown.py index 152560f..3f83b80 100644 --- a/pages/3-drilldown.py +++ b/pages/3-drilldown.py @@ -8,28 +8,26 @@ data = Data() data.add_data_frame(data_frame) -style = Style({ - "plot": { - "xAxis": { - "label": { - "angle": "-1.1"}}, - "yAxis": { - "label": { - "numberScale": "shortScaleSymbolUS"}}, - "marker": { - "colorPalette": ( - "#b74c20FF #c47f58FF #1c9761FF #ea4549FF #875792FF #3562b6FF " - "#ee7c34FF #efae3aFF" - ), - "label": { - "numberFormat": "prefixed", - "maxFractionDigits": "1", - "numberScale": "shortScaleSymbolUS", - }, - }, - "paddingLeft": "8em", - } -}) +style = Style( + { + "plot": { + "xAxis": {"label": {"angle": "-1.1"}}, + "yAxis": {"label": {"numberScale": "shortScaleSymbolUS"}}, + "marker": { + "colorPalette": ( + "#b74c20FF #c47f58FF #1c9761FF #ea4549FF #875792FF #3562b6FF " + "#ee7c34FF #efae3aFF" + ), + "label": { + "numberFormat": "prefixed", + "maxFractionDigits": "1", + "numberScale": "shortScaleSymbolUS", + }, + }, + "paddingLeft": "8em", + } + } +) chart.animate(data, style) @@ -38,16 +36,20 @@ if bar_clicked is None: chart.animate( - Data.filter(), + Data.filter(), Config( - {"x": "Year", - "y": "Revenue[$]", - "sort" : "none", - "color": None, - "label": None, - "title": "Music Revenues"} - ),style, - delay="0") + { + "x": "Year", + "y": "Revenue[$]", + "sort": "none", + "color": None, + "label": None, + "title": "Music Revenues", + } + ), + style, + delay="0", + ) else: chart.animate(Data.filter(f"record['Year'] == '{bar_clicked}'")) chart.animate( @@ -55,9 +57,9 @@ { "x": "Format", "y": "Revenue[$]", - "groupedBy": "Format", - "sort":"byValue", - "title": f"Drilldown for Year {bar_clicked}" + "groupedBy": "Format", + "sort": "byValue", + "title": f"Drilldown for Year {bar_clicked}", } ) ) diff --git a/pages/4-explorer.py b/pages/4-explorer.py index 08dffc0..4d0e54b 100644 --- a/pages/4-explorer.py +++ b/pages/4-explorer.py @@ -20,7 +20,7 @@ col1, col2, col3, col4, col5 = st.columns(5) -measure: str = col1.radio("Measure", ["Sales", "Revenue [$]"]) +measure: str = col1.radio("Measure", ["Sales", "Revenue [$]"]) compare_by = col2.radio("Compare by", ["Product", "Region", "Both"]) coords = col3.radio("Coordinate system", ["Cartesian (desktop)", "Polar (mobile)"]) order = col4.radio("Order items", ["Alphabetically", "By value"]) From 8789e5ab86bb047135cf46c195e5057d637543b8 Mon Sep 17 00:00:00 2001 From: Zachary Blackwood Date: Mon, 21 Aug 2023 14:26:02 -0400 Subject: [PATCH 3/5] Specify version --- .pre-commit-config.yaml | 1 + filters.py | 2 ++ pages/4-explorer.py | 2 ++ 3 files changed, 5 insertions(+) diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml index 7d6564d..26eda49 100644 --- a/.pre-commit-config.yaml +++ b/.pre-commit-config.yaml @@ -14,6 +14,7 @@ repos: args: - --ignore-missing-imports - --follow-imports=silent + - --python-version=3.8 additional_dependencies: - types-all - repo: https://github.com/pre-commit/pre-commit-hooks diff --git a/filters.py b/filters.py index b2f00e0..8b2dfe2 100644 --- a/filters.py +++ b/filters.py @@ -1,3 +1,5 @@ +from __future__ import annotations + import pandas as pd import streamlit as st from streamlit_vizzu import Config, Data, Style, VizzuChart diff --git a/pages/4-explorer.py b/pages/4-explorer.py index 4d0e54b..b6c3506 100644 --- a/pages/4-explorer.py +++ b/pages/4-explorer.py @@ -1,3 +1,5 @@ +from __future__ import annotations + import pandas as pd import streamlit as st From 1d38273dd6b1003177ab3be9441560733edfd597 Mon Sep 17 00:00:00 2001 From: Zachary Blackwood Date: Mon, 21 Aug 2023 14:28:24 -0400 Subject: [PATCH 4/5] Set python version --- .github/workflows/linting.yml | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/.github/workflows/linting.yml b/.github/workflows/linting.yml index 4e6b7f7..f97098d 100644 --- a/.github/workflows/linting.yml +++ b/.github/workflows/linting.yml @@ -10,4 +10,6 @@ jobs: steps: - uses: actions/checkout@v3 - uses: actions/setup-python@v4 - - uses: pre-commit/action@v2.0.3 \ No newline at end of file + with: + python-version: "3.8" + - uses: pre-commit/action@v2.0.3 From 628d78685f64f36e5ed48cec8001dabb31e17750 Mon Sep 17 00:00:00 2001 From: Zachary Blackwood Date: Tue, 22 Aug 2023 09:05:39 -0400 Subject: [PATCH 5/5] Add more flexibility for width and height --- src/streamlit_vizzu/chart.py | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/src/streamlit_vizzu/chart.py b/src/streamlit_vizzu/chart.py index 076d3a7..60ba505 100644 --- a/src/streamlit_vizzu/chart.py +++ b/src/streamlit_vizzu/chart.py @@ -23,8 +23,8 @@ class VizzuChart(Chart): def __init__( self, - width: int = 700, - height: int = 480, + width: int | str = 700, + height: int | str = 480, key: str = "vizzu", return_clicks: bool = True, rerun_on_click: bool = False, @@ -51,19 +51,25 @@ def __init__( self.animations: list[str] = [] self.return_clicks = return_clicks self.height = height - self.chart_height = height - 20 self.rerun_on_click = rerun_on_click self.default_duration = default_duration self.ipyvizzu_version = StrictVersion(version("ipyvizzu")) if use_container_width: _width = "100%" - else: + elif isinstance(width, int): _width = f"{width}px" + else: + _width = width + + if isinstance(height, int): + _height = f"{height - 20}px" # account for padding + else: + _height = height super().__init__( width=_width, - height=f"{self.chart_height}px", + height=_height, display=DisplayTarget.MANUAL, **kwargs, )