From bf9c869ca79187b03e63b3b855624586624dceff Mon Sep 17 00:00:00 2001 From: "sebastian.serfling" Date: Wed, 14 Aug 2024 16:16:46 +0200 Subject: [PATCH] ADD css, config.toml --- .streamlit/config.toml | 7 +++ main.py | 122 ++++++++++++++++++++++++++--------------- style.css | 35 ++++++++++++ 3 files changed, 121 insertions(+), 43 deletions(-) create mode 100644 .streamlit/config.toml create mode 100644 style.css diff --git a/.streamlit/config.toml b/.streamlit/config.toml new file mode 100644 index 0000000..fe7c2dc --- /dev/null +++ b/.streamlit/config.toml @@ -0,0 +1,7 @@ +[theme] +base="dark" +primaryColor="#1abc9c" +backgroundColor="#2c3e50" +secondaryBackgroundColor="#34495e" +textColor="#ffffff" +font="sans serif" \ No newline at end of file diff --git a/main.py b/main.py index 3c8fb82..9b210b1 100644 --- a/main.py +++ b/main.py @@ -8,6 +8,16 @@ from dotenv import load_dotenv # Load environment variables from .env file load_dotenv() +# Set Page Name +st.set_page_config(page_title="Reporting") + + +# Load custom CSS +def load_css(file_name): + with open(file_name) as f: + st.markdown(f'', unsafe_allow_html=True) + +load_css('style.css') # Function to get filtered data from the database def get_filtered_data(customer_id, service_id, start_date, end_date): @@ -59,7 +69,7 @@ def get_initial_data(): SELECT c.customer_ID, c.customer, co.companyname FROM Kunden.company co JOIN Kunden.customers c ON co.customer_ID = c.customer_ID - JOIN Kunden.`services.reporting` sr ON sr.customer_ID = co.customer_ID + JOIN Kunden.`services.reporting`sr ON sr.customer_ID = co.customer_ID GROUP BY c.customer_ID, c.customer, co.companyname; """ customers = pd.read_sql_query(customer_query, mydb) @@ -68,6 +78,7 @@ def get_initial_data(): date_query = """ SELECT MIN(reportingdate) AS min_date, MAX(reportingdate) AS max_date FROM Kunden.`services.reporting` + WHERE customer_ID = 5 """ date_range = pd.read_sql_query(date_query, mydb) mydb.close() @@ -75,57 +86,82 @@ def get_initial_data(): return service_ids, customers, date_range -# Get initial data for widgets -initial_service_ids, customers, initial_date_range = get_initial_data() +# Define page functions +def home(): + st.title("Home Page") + st.write("Welcome to the Home Page!") -# Combine service_ID and name for display -service_options = initial_service_ids.apply(lambda row: f"{row['service_ID']} - {row['name']}", axis=1) +def services_reporting(): + st.title("Reporting :mag_right:") + # Get initial data for widgets + initial_service_ids, customers, initial_date_range = get_initial_data() + # Combine service_ID and name for display + service_options = initial_service_ids.apply(lambda row: f"{row['service_ID']} - {row['name']}", axis=1) -# Add selection widget for customer ID -selected_customer = st.selectbox( - 'Select Customer', - customers.apply(lambda row: f"{row['customer_ID']} - {row['companyname']} - {row['customer']}", axis=1).tolist() -) + # Add selection widget for customer ID + selected_customer = st.selectbox( + 'Select Customer', + customers.apply(lambda row: f"{row['customer_ID']} - {row['companyname']} - {row['customer']}", axis=1).tolist() + ) -# Extract customer_ID from selected option -selected_customer_id = int(selected_customer.split(' - ')[0]) + # Extract customer_ID from selected option + selected_customer_id = int(selected_customer.split(' - ')[0]) -# Add selection widget for service ID -selected_service = st.selectbox( - 'Select Service', - service_options.tolist() -) + # Add selection widget for service ID + selected_service = st.selectbox( + 'Select Service', + service_options.tolist() + ) -# Extract service_ID from selected option -selected_service_id = int(selected_service.split(' - ')[0]) + # Extract service_ID from selected option + selected_service_id = int(selected_service.split(' - ')[0]) -# Convert date range to datetime objects -min_date = initial_date_range['min_date'][0] -max_date = initial_date_range['max_date'][0] + # Convert date range to datetime objects + min_date = initial_date_range['min_date'][0] + max_date = initial_date_range['max_date'][0] -# Add date range selection widget -selected_date_range = st.date_input( - 'Select date range', - value=[min_date, max_date], - min_value=min_date, - max_value=max_date -) + # Add date range selection widget + selected_date_range = st.date_input( + 'Select date range', + value=[min_date, max_date], + min_value=min_date, + max_value=max_date + ) -# Format the selected dates as 'YYYY-MM-DD' -start_date_str = selected_date_range[0].strftime("%Y-%m-%d") -end_date_str = selected_date_range[1].strftime("%Y-%m-%d") + # Format the selected dates as 'YYYY-MM-DD' + start_date_str = selected_date_range[0].strftime("%Y-%m-%d") + end_date_str = selected_date_range[1].strftime("%Y-%m-%d") -# Add a button to apply filters -if st.button('Apply Filters'): - # Fetch filtered data from the database - filtered_data = get_filtered_data(selected_customer_id, selected_service_id, start_date_str, end_date_str) + # Add a button to apply filters + if st.button('Apply Filters'): + # Fetch filtered data from the database + filtered_data = get_filtered_data(selected_customer_id, selected_service_id, start_date_str, end_date_str) - # Sort the data by month - filtered_data = filtered_data.sort_values('month') + # Sort the data by month + filtered_data = filtered_data.sort_values('month') - # Create a bar chart with the filtered data - if not filtered_data.empty: - st.bar_chart(filtered_data.set_index('month')['count']) - else: - st.write("No data available for the selected filters.") + # Create a bar chart with the filtered data + if not filtered_data.empty: + st.bar_chart(filtered_data.set_index('month')['count']) + else: + st.write("No data available for the selected filters.") + + + + +if 'page' not in st.session_state: + st.session_state.page = 'Home' + +# Sidebar navigation +st.sidebar.title("Navigation") +if st.sidebar.button('Home'): + st.session_state.page = 'Home' +if st.sidebar.button('Services Reporting'): + st.session_state.page = 'Services Reporting' + +# Page display logic +if st.session_state.page == 'Home': + home() +elif st.session_state.page == 'Services Reporting': + services_reporting() diff --git a/style.css b/style.css new file mode 100644 index 0000000..6f30cc1 --- /dev/null +++ b/style.css @@ -0,0 +1,35 @@ +/* style.css */ +.sidebar .sidebar-content { + background-color: #f8f9fa; +} + +.stButton>button { + color: white; + background-color: #00000000; + border-bottom-color: #fcbb2e; + border-radius: 5px; + padding: 10px 20px; + font-size: 16px; + cursor: pointer; +} + +.stButton>button:hover { + color: white; + background-color: #00000029; + border-color: #00000029; +} + +.stButton>button:focus:not(:active) { + color: white; + background-color: #00000000; + border-bottom-color: #fcbb2e; + border-color: unset; + border-radius: 5px; + padding: 10px 20px; + font-size: 16px; + cursor: pointer; + +} +.st-d7 , .st-d6 ,.st-d5 ,.st-d4 { + border-color: #fcbb2e; +} \ No newline at end of file