From github updates

.gitattributes

@@ -1,35 +0,0 @@
-*.7z filter=lfs diff=lfs merge=lfs -text
-*.arrow filter=lfs diff=lfs merge=lfs -text
-*.bin filter=lfs diff=lfs merge=lfs -text
-*.bz2 filter=lfs diff=lfs merge=lfs -text
-*.ckpt filter=lfs diff=lfs merge=lfs -text
-*.ftz filter=lfs diff=lfs merge=lfs -text
-*.gz filter=lfs diff=lfs merge=lfs -text
-*.h5 filter=lfs diff=lfs merge=lfs -text
-*.joblib filter=lfs diff=lfs merge=lfs -text
-*.lfs.* filter=lfs diff=lfs merge=lfs -text
-*.mlmodel filter=lfs diff=lfs merge=lfs -text
-*.model filter=lfs diff=lfs merge=lfs -text
-*.msgpack filter=lfs diff=lfs merge=lfs -text
-*.npy filter=lfs diff=lfs merge=lfs -text
-*.npz filter=lfs diff=lfs merge=lfs -text
-*.onnx filter=lfs diff=lfs merge=lfs -text
-*.ot filter=lfs diff=lfs merge=lfs -text
-*.parquet filter=lfs diff=lfs merge=lfs -text
-*.pb filter=lfs diff=lfs merge=lfs -text
-*.pickle filter=lfs diff=lfs merge=lfs -text
-*.pkl filter=lfs diff=lfs merge=lfs -text
-*.pt filter=lfs diff=lfs merge=lfs -text
-*.pth filter=lfs diff=lfs merge=lfs -text
-*.rar filter=lfs diff=lfs merge=lfs -text
-*.safetensors filter=lfs diff=lfs merge=lfs -text
-saved_model/**/* filter=lfs diff=lfs merge=lfs -text
-*.tar.* filter=lfs diff=lfs merge=lfs -text
-*.tar filter=lfs diff=lfs merge=lfs -text
-*.tflite filter=lfs diff=lfs merge=lfs -text
-*.tgz filter=lfs diff=lfs merge=lfs -text
-*.wasm filter=lfs diff=lfs merge=lfs -text
-*.xz filter=lfs diff=lfs merge=lfs -text
-*.zip filter=lfs diff=lfs merge=lfs -text
-*.zst filter=lfs diff=lfs merge=lfs -text
-*tfevents* filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,98 @@
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[cod]
+
+# C extensions
+*.so
+
+# Distribution / packaging
+.Python
+env/
+.venv
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+*.egg-info/
+.installed.cfg
+*.egg'
+venv
+
+# PyInstaller
+#  Usually these files are written by a python script from a template
+#  before PyInstaller builds the exe, so as to inject date/other infos into it.
+*.manifest
+*.spec
+
+# Installer logs
+pip-log.txt
+pip-delete-this-directory.txt
+
+# Unit test / coverage reports
+htmlcov/
+.tox/
+.coverage
+.coverage.*
+.cache
+nosetests.xml
+coverage.xml
+*.cover
+
+# Translations
+*.mo
+*.pot
+
+# Django stuff:
+*.log
+
+# Sphinx documentation
+docs/_build/
+
+# PyBuilder
+target/
+
+# DotEnv configuration
+.env
+
+# Database
+*.db
+*.rdb
+
+# Pycharm
+.idea
+
+# VS Code
+.vscode/
+
+# Spyder
+.spyproject/
+
+# Jupyter NB Checkpoints
+.ipynb_checkpoints/
+
+# Mac OS-specific storage files
+.DS_Store
+
+# vim
+*.swp
+*.swo
+
+# Caches
+.mypy_cache/
+.pytest_cache/
+.ruff_cache/
+
+# Hydra logs
+outputs
+#Manual
+template.py
+templates/
+.streamlit/secrets.toml
+secrets.toml

.streamlit/config.toml

@@ -0,0 +1,22 @@
+[global]
+# disableWatchdogWarning = true
+[server]
+runOnSave =true
+[browser]
+gatherUsageStats = true
+
+[deprecation]
+# showfileUploaderEncoding = false
+# showPyplotGlobalUse =false
+[logger]
+# Default: "%(asctime)s %(message)s"
+# messageFormat = "%(asctime)s %(message)s"
+[theme]
+# Primary accent color for interactive elements.
+primaryColor = "#042940"
+# Background color for the main content area.
+backgroundColor = "#ecebe9"
+# Background color used for the sidebar and most interactive widgets.
+secondaryBackgroundColor = "#ecebe9"
+# Color used for almost all text.
+textColor = "#042940"

Dockerfile

@@ -0,0 +1,19 @@
+FROM python:3.11
+
+RUN pip install virtualenv
+ENV VIRTUAL_ENV=/venv
+RUN virtualenv venv -p python3
+ENV PATH="VIRTUAL_ENV/bin:$PATH"
+
+WORKDIR /app
+ADD . /app
+
+# Install dependencies
+RUN pip install -r requirements.txt
+RUN apt-get update
+
+# Expose port 
+ENV PORT 8501
+
+# Run the application:
+CMD ["streamlit","run","Home.py"]

README.md

@@ -1,12 +1,27 @@
----
-title: Streamlit Magic Cheat Sheet
-emoji: 🐢
-colorFrom: red
-colorTo: yellow
-sdk: streamlit
-sdk_version: 1.28.0
-app_file: app.py
-pinned: false
-license: apache-2.0
----
+# Streamlit Magic Cheat Sheets
+![Python](https://img.shields.io/badge/python-3670A0?style=for-the-badge&logo=python&logoColor=ffdd54)
+![Streamlit](https://img.shields.io/badge/Streamlit-FF4B4B.svg?style=for-the-badge&logo=Streamlit&logoColor=white)
+![CSS](https://img.shields.io/badge/CSS3-1572B6.svg?style=for-the-badge&logo=CSS3&logoColor=white)
+![HTML](https://img.shields.io/badge/HTML5-E34F26.svg?style=for-the-badge&logo=HTML5&logoColor=white)
+![Markdown](https://img.shields.io/badge/markdown-%23000000.svg?style=for-the-badge&logo=markdown&logoColor=white)
+![Visual Studio Code](https://img.shields.io/badge/Visual%20Studio%20Code-0078d7.svg?style=for-the-badge&logo=visual-studio-code&logoColor=white)
+## Deployment  [![Streamlit App](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://st-cheat-sheet.streamlit.app/)
+
+`Streamlit Magic Cheat Sheets` encapsulates the Streamlit documentation version 1.28.0, providing concise summaries along with exemplar implementations of Streamlit code snippets.
+
+`October, 2023 v1.1.1` - The development and maintenance of this application are solely undertaken by [Tushar Aggarwal](https://www.linkedin.com/in/tusharaggarwalinseec/)
+
+ 
+## Author  
+- [<ins><b>©2023 Tushar Aggarwal. All rights reserved</b></ins>](https://www.tushar-aggarwal.com/)
+- <b>[LinkedIn](https://www.linkedin.com/in/tusharaggarwalinseec/)</b>
+- <b>[Medium](https://medium.com/@tushar_aggarwal)</b> 
+- <b>[Tushar-Aggarwal.com](https://www.tushar-aggarwal.com/)</b>
+- <b>[X](https://twitter.com/TaggData)</b> 
+- <b>[Data Unboxed Newsletter](https://tadata.substack.com/)</b> 
+- <b>[HuggingFace](https://huggingface.co/tushar27)</b> 
+- <b>[DagsHub](https://dagshub.com/tushar27)</b> 
+- <b>[Hashnode](https://hashnode.com/@TAGG)</b> 
+- <b>[NovyPro](https://www.novypro.com/profile_projects/tusharagg)</b> 
+- <b>[New Kaggle](https://www.kaggle.com/tagg27)</b> 
 

app.py

@@ -1,151 +1,60 @@
-#Streamlit Magic Sheets by github.com/2704 & Tushar-Aggarwa.com
-import streamlit as st
-
-st.title("Streamlit Magic Sheets")
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+##© 2023 Tushar Aggarwal. All rights reserved.
+##Streamlit Magic Cheat Sheets
+#######################################################################################################
 
+#######################################################################################################
+#Importind required libraries
+#######################################################################################################
 
+import streamlit as st
+from pathlib import Path
+import base64
+import sys
+from pathlib import Path
+script_dir = Path(__file__).resolve().parent
+project_root = script_dir.parent
+sys.path.append(str(project_root))
+import warnings
+warnings.filterwarnings("ignore")
+#######################################################################################################
+#Importing from SRC
+#######################################################################################################
+from src.Streamlit_Magic_Sheet.components.header import *
+from src.Streamlit_Magic_Sheet.components.body import *
+from src.Streamlit_Magic_Sheet.components.navigation import *
+from src.Streamlit_Magic_Sheet.components.siderbar import *
+from src.Streamlit_Magic_Sheet.components.metrics import *
+from src.Streamlit_Magic_Sheet.components.charts import *
+from src.Streamlit_Magic_Sheet.components.test import *
+#######################################################################################################
+#Page Config of Streamlit-Magic-Sheet by github.com/tushar2704
+#######################################################################################################
 
 
+page_title="Streamlit Magic Cheat Sheets"
+page_icon="🪄"
+layout='wide'
 
 
+page_config(page_title=page_title,
+            page_icon=page_icon,
+            layout=layout)
 
+#######################################################################################################
+#Header of Streamlit-Magic-Sheet by github.com/tushar2704
+#######################################################################################################
 
 
 
+#main_header 
+main_header(title="Streamlit Magic Cheat Sheets",
+            header=None,
+            subheader=None,
+            markdown=None
+            )
 
 
+left_main_panel()
 
 
 
@@ -156,10 +65,16 @@ st.title("Streamlit Magic Sheets")
 
 
 
+#st.write(whole)
+#instance 
 
 
+# col1, col2=st.columns((1,2), gap="large")
 
+# inst=test_1()
+# col1=inst.cs_sidebar()
 
+# col2=inst.cs_sidebar2()
 
 
 

custom_styles.css

@@ -0,0 +1,34 @@
+/* Set the page width to 80% */
+.reportview-container {
+    width: 80%;
+}
+
+
+.stApp > header {
+    background-color: transparent;
+}
+.stApp {
+    margin: auto;
+    font-family: 'Roboto', sans-serif;
+    overflow: auto;
+    background: -webkit-linear-gradient(to right, #ecebe9, #f2f2f2, #dbdbdb, #eaeaea); /* Chrome 10-25, Safari 5.1-6 */
+    background: linear-gradient(to right, #f6f5f2, #f2f2f2, #dbdbdb, #eaeaea); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+    animation: gradient 15s ease infinite;
+    background-size: 400% 400%;
+    background-attachment: fixed;
+}
+
+/* Gradient background for Streamlit sidebar */
+.sidebar-content {
+    background-image: linear-gradient(to bottom, #ada996, #1041c8);
+    color: white;
+    padding: 20px;
+    border-radius: 10px;
+}
+
+.st-emotion-cache-16txtl3 {
+    padding: 0.01rem 0.01rem;
+}
+
+
+

requirements.txt

@@ -1,2 +1,16 @@
 streamlit
-
+pathlib
+pybase64
+requests
+streamlit-option-menu
+streamlit_antd_components
+altair
+plotly
+bokeh==2.4.3
+pydeck
+graphviz
+scipy
+datetime
+pandas
+numpy
+-e.

research/magic_sheet.py

@@ -0,0 +1,248 @@
+##© 2023 Tushar Aggarwal. All rights reserved.
+##Streamlit-Magic-Sheet
+#######################################################################################################
+
+#######################################################################################################
+#Importind required libraries
+#######################################################################################################
+
+import streamlit as st
+from pathlib import Path
+import base64
+import sys
+from pathlib import Path
+script_dir = Path(__file__).resolve().parent
+project_root = script_dir.parent
+sys.path.append(str(project_root))
+#######################################################################################################
+#Importing from SRC
+#######################################################################################################
+from src.Streamlit_Magic_Sheet.components.header import *
+from src.Streamlit_Magic_Sheet.components.body import *
+from src.Streamlit_Magic_Sheet.components.navigation import *
+from src.Streamlit_Magic_Sheet.components.siderbar import *
+from src.Streamlit_Magic_Sheet.components.metrics import *
+from src.Streamlit_Magic_Sheet.components.charts import *
+from src.Streamlit_Magic_Sheet.components.test import *
+
+#######################################################################################################
+#Research
+#######################################################################################################
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

setup.py

@@ -0,0 +1,29 @@
+import setuptools
+
+with open("README.md", "r", encoding="utf-8") as f:
+    long_description = f.read()
+
+
+__version__ = "1.0.0"
+
+REPO_NAME = "Streamlit-Magic-Sheet"
+AUTHOR_USER_NAME = "tushar2704"
+SRC_REPO = "Streamlit-Magic-Sheet"
+AUTHOR_EMAIL = "tushar.27041994@gmail.com"
+
+
+setuptools.setup(
+    name=SRC_REPO,
+    version=__version__,
+    author=AUTHOR_USER_NAME,
+    author_email=AUTHOR_EMAIL,
+    description="Streamlit-Magic-Sheet - ST App",
+    long_description=long_description,
+    long_description_content="text/markdown",
+    url=f"https://github.com/{AUTHOR_USER_NAME}/{REPO_NAME}",
+    project_urls={
+        "Bug Tracker": f"https://github.com/{AUTHOR_USER_NAME}/{REPO_NAME}/issues",
+    },
+    package_dir={"": "src"},
+    packages=setuptools.find_packages(where="src")
+)

src/Streamlit_Magic_Sheet/components/charts.py

@@ -0,0 +1,436 @@
+#Authot github.com/tushar2704
+##############################################################################################################
+#Importing required library
+##############################################################################################################
+import random
+# import duckdb
+# import pandas as pd
+# import plotly.express as px
+# import plotly.graph_objects as go
+# import streamlit as st
+import sys
+from pathlib import Path
+script_dir = Path(__file__).resolve().parent
+project_root = script_dir.parent
+sys.path.append(str(project_root))
+########################################################################################################
+#######################################################################################################
+#Importing from SRC
+#######################################################################################################
+from src.Streamlit_Magic_Sheet.components.header import *
+from src.Streamlit_Magic_Sheet.components.body import *
+from src.Streamlit_Magic_Sheet.components.navigation import *
+from src.Streamlit_Magic_Sheet.components.siderbar import *
+from src.Streamlit_Magic_Sheet.components.metrics import *
+from src.Streamlit_Magic_Sheet.components.charts import *
+from src.Streamlit_Magic_Sheet.components.test import *
+from src.Streamlit_Magic_Sheet.components.elements import *
+#######################################################################################################
+
+def plot_metric(label, value, prefix="", suffix="", show_graph=False, color_graph=""):
+    fig = go.Figure()
+
+    fig.add_trace(
+        go.Indicator(
+            value=value,
+            gauge={"axis": {"visible": False}},
+            number={
+                "prefix": prefix,
+                "suffix": suffix,
+                "font.size": 28,
+            },
+            title={
+                "text": label,
+                "font": {"size": 24},
+            },
+        )
+    )
+
+    if show_graph:
+        fig.add_trace(
+            go.Scatter(
+                y=random.sample(range(0, 101), 30),
+                hoverinfo="skip",
+                fill="tozeroy",
+                fillcolor=color_graph,
+                line={
+                    "color": color_graph,
+                },
+            )
+        )
+
+    fig.update_xaxes(visible=False, fixedrange=True)
+    fig.update_yaxes(visible=False, fixedrange=True)
+    fig.update_layout(
+        # paper_bgcolor="lightgrey",
+        margin=dict(t=30, b=0),
+        showlegend=False,
+        plot_bgcolor="white",
+        height=100,
+    )
+
+    st.plotly_chart(fig, use_container_width=True)
+
+
+def plot_gauge(
+    indicator_number, indicator_color, indicator_suffix, indicator_title, max_bound
+):
+    fig = go.Figure(
+        go.Indicator(
+            value=indicator_number,
+            mode="gauge+number",
+            domain={"x": [0, 1], "y": [0, 1]},
+            number={
+                "suffix": indicator_suffix,
+                "font.size": 26,
+            },
+            gauge={
+                "axis": {"range": [0, max_bound], "tickwidth": 1},
+                "bar": {"color": indicator_color},
+            },
+            title={
+                "text": indicator_title,
+                "font": {"size": 28},
+            },
+        )
+    )
+    fig.update_layout(
+        # paper_bgcolor="lightgrey",
+        height=200,
+        margin=dict(l=10, r=10, t=50, b=10, pad=8),
+    )
+    st.plotly_chart(fig, use_container_width=True)
+
+
+def plot_top_right():
+    sales_data = duckdb.sql(
+        f"""
+        WITH sales_data AS (
+            UNPIVOT ( 
+                SELECT 
+                    Scenario,
+                    business_unit,
+                    {','.join(all_months)} 
+                    FROM df 
+                    WHERE Year='2023' 
+                    AND Account='Sales' 
+                ) 
+            ON {','.join(all_months)}
+            INTO
+                NAME month
+                VALUE sales
+        ),
+
+        aggregated_sales AS (
+            SELECT
+                Scenario,
+                business_unit,
+                SUM(sales) AS sales
+            FROM sales_data
+            GROUP BY Scenario, business_unit
+        )
+        
+        SELECT * FROM aggregated_sales
+        """
+    ).df()
+
+    fig = px.bar(
+        sales_data,
+        x="business_unit",
+        y="sales",
+        color="Scenario",
+        barmode="group",
+        text_auto=".2s",
+        title="Sales for Year 2023",
+        height=400,
+    )
+    fig.update_traces(
+        textfont_size=12, textangle=0, textposition="outside", cliponaxis=False
+    )
+    st.plotly_chart(fig, use_container_width=True)
+
+
+def plot_bottom_left():
+    sales_data = duckdb.sql(
+        f"""
+        WITH sales_data AS (
+            SELECT 
+            Scenario,{','.join(all_months)} 
+            FROM df 
+            WHERE Year='2023' 
+            AND Account='Sales'
+            AND business_unit='Software'
+        )
+
+        UNPIVOT sales_data 
+        ON {','.join(all_months)}
+        INTO
+            NAME month
+            VALUE sales
+    """
+    ).df()
+
+    fig = px.line(
+        sales_data,
+        x="month",
+        y="sales",
+        color="Scenario",
+        markers=True,
+        text="sales",
+        title="Monthly Budget vs Forecast 2023",
+    )
+    fig.update_traces(textposition="top center")
+    st.plotly_chart(fig, use_container_width=True)
+
+
+def plot_bottom_right():
+    sales_data = duckdb.sql(
+        f"""
+        WITH sales_data AS (
+            UNPIVOT ( 
+                SELECT 
+                    Account,Year,{','.join([f'ABS({month}) AS {month}' for month in all_months])}
+                    FROM df 
+                    WHERE Scenario='Actuals'
+                    AND Account!='Sales'
+                ) 
+            ON {','.join(all_months)}
+            INTO
+                NAME year
+                VALUE sales
+        ),
+
+        aggregated_sales AS (
+            SELECT
+                Account,
+                Year,
+                SUM(sales) AS sales
+            FROM sales_data
+            GROUP BY Account, Year
+        )
+        
+        SELECT * FROM aggregated_sales
+    """
+    ).df()
+
+    fig = px.bar(
+        sales_data,
+        x="Year",
+        y="sales",
+        color="Account",
+        title="Actual Yearly Sales Per Account",
+    )
+    st.plotly_chart(fig, use_container_width=True)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

src/Streamlit_Magic_Sheet/components/elements.py

@@ -0,0 +1,1586 @@
+#Authot github.com/tushar2704
+##############################################################################################################
+#Importing required library
+##############################################################################################################
+import random
+
+import pandas as pd
+
+import numpy as np
+import altair as alt
+import plotly.figure_factory as ff
+from bokeh.plotting import figure
+import pydeck as pdk
+import graphviz
+import scipy
+import datetime
+import requests
+# import plotly.express as px
+# import plotly.graph_objects as go
+import streamlit as st
+import time
+import sys
+from pathlib import Path
+script_dir = Path(__file__).resolve().parent
+project_root = script_dir.parent
+sys.path.append(str(project_root))
+########################################################################################################
+#######################################################################################################
+# #Importing from SRC
+# #######################################################################################################
+# from src.Streamlit_Magic_Sheet.components.header import *
+# from src.Streamlit_Magic_Sheet.components.body import *
+# from src.Streamlit_Magic_Sheet.components.navigation import *
+# from src.Streamlit_Magic_Sheet.components.siderbar import *
+# from src.Streamlit_Magic_Sheet.components.metrics import *
+# from src.Streamlit_Magic_Sheet.components.charts import *
+# from src.Streamlit_Magic_Sheet.components.test import *
+# from src.Streamlit_Magic_Sheet.components.elements import *
+#######################################################################################################
+
+######################################################################################################
+# Elements
+######################################################################################################
+
+
+
+#################
+# Chart Elements
+#################
+def altair():
+    chart_data = pd.DataFrame(np.random.randn(20, 3), columns=["a", "b", "c"])
+
+    c = (
+    alt.Chart(chart_data)
+    .mark_circle()
+    .encode(x="a", y="b", size="c", color="c", tooltip=["a", "b", "c"])
+    )
+
+    st.altair_chart(c, use_container_width=True)
+    
+def vega_chart():
+    chart_data = pd.DataFrame(np.random.randn(200, 3), columns=["a", "b", "c"])
+
+    st.vega_lite_chart(
+    chart_data,
+    {
+        "mark": {"type": "circle", "tooltip": True},
+        "encoding": {
+            "x": {"field": "a", "type": "quantitative"},
+            "y": {"field": "b", "type": "quantitative"},
+            "size": {"field": "c", "type": "quantitative"},
+            "color": {"field": "c", "type": "quantitative"},
+        },
+    },
+    )
+
+def plotly():
+    # Add histogram data
+    x1 = np.random.randn(200) - 2
+    x2 = np.random.randn(200)
+    x3 = np.random.randn(200) + 2
+
+    # Group data together
+    hist_data = [x1, x2, x3]
+
+    group_labels = ['Group 1', 'Group 2', 'Group 3']
+
+    # Create distplot with custom bin_size
+    fig = ff.create_distplot(
+            hist_data, group_labels, bin_size=[.1, .25, .5])
+
+    # Plot!
+    st.plotly_chart(fig, use_container_width=True)
+    
+def bokeh():
+    
+
+    x = [1, 2, 3, 4, 5]
+    y = [6, 7, 2, 4, 5]
+
+    p = figure(
+        title='simple line example',
+        x_axis_label='x',
+        y_axis_label='y')
+
+    p.line(x, y, legend_label='Trend', line_width=2)
+
+    st.bokeh_chart(p, use_container_width=True)
+    
+def pydeck():
+    
+
+    
+
+    chart_data = pd.DataFrame(
+    np.random.randn(1000, 2) / [50, 50] + [37.76, -122.4],
+    columns=['lat', 'lon'])
+
+    st.pydeck_chart(pdk.Deck(
+        map_style=None,
+        initial_view_state=pdk.ViewState(
+            latitude=37.76,
+            longitude=-122.4,
+            zoom=11,
+            pitch=50,
+        ),
+        layers=[
+            pdk.Layer(
+            'HexagonLayer',
+            data=chart_data,
+            get_position='[lon, lat]',
+            radius=200,
+            elevation_scale=4,
+            elevation_range=[0, 1000],
+            pickable=True,
+            extruded=True,
+            ),
+            pdk.Layer(
+                'ScatterplotLayer',
+                data=chart_data,
+                get_position='[lon, lat]',
+                get_color='[200, 30, 0, 160]',
+                get_radius=200,
+            ),
+        ],
+    ))    
+
+def graphviz1():
+    
+
+    # Create a graphlib graph object
+    graph = graphviz.Digraph()
+    graph.edge('run', 'intr')
+    graph.edge('intr', 'runbl')
+    graph.edge('runbl', 'run')
+    graph.edge('run', 'kernel')
+    graph.edge('kernel', 'zombie')
+    graph.edge('kernel', 'sleep')
+    graph.edge('kernel', 'runmem')
+    graph.edge('sleep', 'swap')
+    graph.edge('swap', 'runswap')
+    graph.edge('runswap', 'new')
+    graph.edge('runswap', 'runmem')
+    graph.edge('new', 'runmem')
+    graph.edge('sleep', 'runmem')
+
+    st.graphviz_chart(graph)   
+
+def map():
+    df = pd.DataFrame(
+    np.random.randn(1000, 2) / [50, 50] + [37.76, -122.4],
+    columns=['lat', 'lon'])
+
+    st.map(df)
+
+#################
+# Input Elements
+#################
+def button():
+    st.button("Tushar", type="primary")
+    if st.button('Saying hello'):
+        st.write('Why hello there')
+    else:
+        st.write('Goodbye')
+
+def download():
+    text_contents = '''This is some text'''
+    st.download_button('Download some text', text_contents)
+
+def link():
+    st.link_button("Go to Tushar-Aggarwal.com", "https://tushar-aggarwal.com")
+
+def checkbox():
+    agree = st.checkbox('Tushar is great')
+
+    if agree:
+        st.write('Yes indeed!')
+
+def toggle():
+    on = st.toggle('Activate feature')
+
+    if on:
+        st.write('Feature activated!')
+
+def radio():
+
+    genre = st.radio(
+        "What's your favorite movie genre",
+        [":rainbow[Comedy]", "***Drama***", "Documentary :movie_camera:"],
+        captions = ["Laugh out loud.", "Get the popcorn.", "Never stop learning."])
+
+    if genre == ':rainbow[Comedy]':
+        st.write('You selected comedy.')
+    else:
+        st.write("You didn\'t select comedy.")
+
+def option():
+    option = st.selectbox(
+                    "How would you like to be contacted?",
+                    ("Email", "Home phone", "Mobile phone"),
+                    index=None,
+                    placeholder="Select contact method...",
+                    )
+
+    st.write('You selected:', option)
+
+def multiselect():
+    options = st.multiselect(
+                'What are your favorite colors',
+                ['Green', 'Yellow', 'Red', 'Blue'],
+                ['Yellow', 'Red'])
+
+    st.write('You selected:', options)
+
+def slider():
+    values = st.slider(
+    'Select a range of values',
+    0.0, 100.0, (25.0, 75.0))
+    st.write('Values:', values)
+
+def select_slider():
+    start_color, end_color = st.select_slider(
+    'Select a range of color wavelength',
+    options=['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'],
+    value=('red', 'blue'))
+    st.write('You selected wavelengths between', start_color, 'and', end_color)
+
+def text_input():
+    title = st.text_input('Movie title', 'Life of Brian')
+    st.write('The current movie title is', title)
+
+def number_input():
+    number = st.number_input('Insert a number')
+    st.write('The current number is ', number)
+
+def text_area():
+    txt = st.text_area(
+    "Text to analyze",
+    "It was the best of times, it was the worst of times, it was the age of "
+    "wisdom, it was the age of foolishness, it was the epoch of belief, it "
+    "was the epoch of incredulity, it was the season of Light, it was the "
+    "season of Darkness, it was the spring of hope, it was the winter of "
+    "despair, (...)",
+    )
+    st.write(f'You wrote {len(txt)} characters.')
+
+def date_input():
+    
+            
+    today = datetime.datetime.now()
+    next_year = today.year + 1
+    jan_1 = datetime.date(next_year, 1, 1)
+    dec_31 = datetime.date(next_year, 12, 31)
+
+    d = st.date_input(
+        "Select your vacation for next year",
+        (jan_1, datetime.date(next_year, 1, 7)),
+        jan_1,
+        dec_31,
+        format="MM.DD.YYYY",
+    )
+    d
+
+def time_input():
+    t = st.time_input('Set an alarm for', datetime.time(8, 45))
+
+    st.write('Alarm is set for', t)
+
+def file_upload():
+    uploaded_files = st.file_uploader("Choose a CSV file", accept_multiple_files=True)
+    for uploaded_file in uploaded_files:
+        bytes_data = uploaded_file.read()
+        st.write("filename:", uploaded_file.name)
+        st.write(bytes_data)
+
+def camera_input():
+    picture = st.camera_input("Take a picture")
+
+    if picture:
+        st.image(picture)
+
+def color_picker():
+    color = st.color_picker('Pick A Color', '#00f900')
+    st.write('The current color is', color)
+#################
+# Media Elements
+#################
+def image():
+    image_url = "https://images.unsplash.com/photo-1561564723-570b270e7c36"
+    st.image(image_url, caption='Amazing Sunrise', use_column_width=True)
+
+def audio():
+    def get_random_fma_track():
+        base_url = "https://files.freemusicarchive.org/"
+        endpoint = "random/track"
+        response = requests.get(f"{base_url}{endpoint}")
+        if response.status_code == 200:
+            track_url = response.url
+            return track_url
+        return None
+
+    # Get a random FMA track URL
+    random_audio_url = get_random_fma_track()
+
+    # Display the audio player
+    if random_audio_url:
+        st.audio(random_audio_url, format="audio/mp3")
+    else:
+        st.write("Failed to fetch a random audio track. Please try again later.")
+
+def video():
+    video_urls = [
+        "https://www.youtube.com/watch?v=VIDEO_ID_1",
+        "https://www.youtube.com/watch?v=VIDEO_ID_2",
+        "https://www.youtube.com/watch?v=VIDEO_ID_3",
+        # Add more YouTube video URLs here
+    ]
+
+    # Select a random video URL
+    random_video_url = random.choice(video_urls)
+
+    # Display the video
+    st.video(random_video_url)
+
+def sidebar():
+    
+
+    # Using object notation
+    add_selectbox = st.sidebar.selectbox(
+        "How would you like to be contacted?",
+        ("Email", "Home phone", "Mobile phone")
+    )
+
+    # Using "with" notation
+    with st.sidebar:
+        add_radio = st.radio(
+            "Choose a shipping method",
+            ("Standard (5-15 days)", "Express (2-5 days)")
+        )
+
+#################
+# Container Elements
+#################
+def columns():
+    cola, colb, colc = st.columns(3)
+
+    with cola:
+        st.header("A cat")
+        st.image("https://static.streamlit.io/examples/cat.jpg")
+
+    with colb:
+        st.header("A dog")
+        st.image("https://static.streamlit.io/examples/dog.jpg")
+
+    with colc:
+        st.header("An owl")
+        st.image("https://static.streamlit.io/examples/owl.jpg")
+
+def tab():
+    tab1, tab2, tab3 = st.tabs(["Cat", "Dog", "Owl"])
+
+    with tab1:
+        st.header("A cat")
+        st.image("https://static.streamlit.io/examples/cat.jpg", width=200)
+
+    with tab2:
+        st.header("A dog")
+        st.image("https://static.streamlit.io/examples/dog.jpg", width=200)
+
+    with tab3:
+        st.header("An owl")
+        st.image("https://static.streamlit.io/examples/owl.jpg", width=200)
+
+def expander():
+    chart = st.bar_chart({"data": [1, 5, 2, 6, 2, 1]})
+
+    
+    chart
+    st.write("The chart above shows some randon numbers. st.expander help to hide elements by default and show ony when expanded")
+
+def container():
+    with st.container():
+        st.write("This is inside the container")
+
+        # You can call any Streamlit command, including custom components:
+        st.bar_chart(np.random.randn(50, 3))
+
+    
+    st.write("This is outside the container")
+
+def empty():
+    placeholder = st.empty()
+
+    # Replace the placeholder with some text:
+    placeholder.text("Hello")
+
+    # Replace the text with a chart:
+    placeholder.line_chart({"data": [1, 5, 2, 6]})
+
+    # Replace the chart with several elements:
+    with placeholder.container():
+        st.write("This is one element")
+        st.write("This is another")
+
+    # Clear all those elements:
+    placeholder.empty()
+#################
+# Chat Elements
+#################
+def chat_message():
+    with st.chat_message("user"):
+        st.write("🤖 Hello 👋")
+        st.write("How may I help you today?")
+
+def chat_input():
+    prompt = st.chat_input("How may I help you today?")
+    if prompt:
+        st.write(f"User has sent the following prompt: {prompt}")
+
+#################
+# Status Elements
+#################
+
+def progress():
+    progress_text = "Operation in progress. Please wait."
+    my_bar = st.progress(0, text=progress_text)
+
+    for percent_complete in range(100):
+        time.sleep(0.01)
+        my_bar.progress(percent_complete + 1, text=progress_text)
+    time.sleep(1)
+    my_bar.empty()
+
+    st.button("Rerun")
+
+def spinner():
+    with st.spinner('Wait for it...'):
+        time.sleep(2)
+    st.success('Done!')
+
+def status():
+    st.status("Downloading data...")
+    st.write("Searching for data...")
+    time.sleep(1)
+    st.write("Found URL.")
+    time.sleep(1)
+    st.write("Downloading data...")
+    time.sleep(1)
+
+    st.button('Rerun', key='1')
+
+def toast():
+    st.toast('Your prompt was send for processing!', icon='😍')
+
+def error():
+    st.error('There is an error', icon="🚨")
+
+def warning():
+    st.warning('This task will utilize multiple resources, expect time delay', icon="⚠️")
+
+def info():
+    st.info('This task will utilize paid API', icon="💵")
+
+def success():
+    st.success('This is a success message!', icon="✅")
+
+def exception():
+    e = RuntimeError('This is an exception of type RuntimeError')
+    st.exception(e)
+
+#################
+# Control Flow Elements
+#################
+
+def form():
+    form = st.form("Try Form")
+    form.slider("Inside the form")
+    
+    st.slider("Outside the form")
+
+    # Now add a submit button to the form:
+    form.form_submit_button("Submit")
+
+#################
+# Utilities Elements
+#################
+
+def echo():
+    with st.echo():
+        st.write('Tushar is the best')
+
+def help():
+    st.help(st.write)
+
+
+#################
+# Mutate Charts Elements
+#################
+
+def add_rows():
+    df1 = pd.DataFrame(np.random.randn(50, 20), columns=("col %d" % i for i in range(20)))
+
+    my_table = st.table(df1)
+
+    df2 = pd.DataFrame(np.random.randn(50, 20), columns=("col %d" % i for i in range(20)))
+
+    my_table.add_rows(df2)
+
+#################
+# Performance Elements
+#################
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

src/Streamlit_Magic_Sheet/components/header.py

@@ -0,0 +1,48 @@
+#Authot github.com/tushar2704
+##############################################################################################################
+#Importing required library
+##############################################################################################################
+import streamlit as st
+import sys
+from pathlib import Path
+script_dir = Path(__file__).resolve().parent
+project_root = script_dir.parent
+sys.path.append(str(project_root))
+#######################################################################################################
+#Importing from SRC
+#######################################################################################################
+from src.Streamlit_Magic_Sheet.components.header import *
+from src.Streamlit_Magic_Sheet.components.body import *
+from src.Streamlit_Magic_Sheet.components.navigation import *
+from src.Streamlit_Magic_Sheet.components.siderbar import *
+from src.Streamlit_Magic_Sheet.components.metrics import *
+from src.Streamlit_Magic_Sheet.components.charts import *
+from src.Streamlit_Magic_Sheet.components.test import *
+from src.Streamlit_Magic_Sheet.components.elements import *
+#######################################################################################################
+
+##############################################################################################################
+#Application Title functions
+##############################################################################################################
+
+def main_header(title=None, header=None, subheader=None, markdown=None, write=None, code=None):
+    ''' 
+    Displaying Main Header conponents
+    '''
+    if title:
+        st.title(title)
+    
+    if header:
+        st.header(header)
+    
+    if subheader:
+        st.subheader(subheader)
+    
+    if markdown:
+        st.markdown(markdown)
+    
+    if write:
+        st.write(write)
+    
+    if code:
+        st.code(code)

src/Streamlit_Magic_Sheet/components/metrics.py

@@ -0,0 +1,33 @@
+#Authot github.com/tushar2704
+##############################################################################################################
+#Importing required library
+##############################################################################################################
+import random
+
+import pandas as pd
+# import plotly.express as px
+# import plotly.graph_objects as go
+import streamlit as st
+import sys
+from pathlib import Path
+script_dir = Path(__file__).resolve().parent
+project_root = script_dir.parent
+sys.path.append(str(project_root))
+########################################################################################################
+#######################################################################################################
+#Importing from SRC
+#######################################################################################################
+from src.Streamlit_Magic_Sheet.components.header import *
+from src.Streamlit_Magic_Sheet.components.body import *
+from src.Streamlit_Magic_Sheet.components.navigation import *
+from src.Streamlit_Magic_Sheet.components.siderbar import *
+from src.Streamlit_Magic_Sheet.components.metrics import *
+from src.Streamlit_Magic_Sheet.components.charts import *
+from src.Streamlit_Magic_Sheet.components.test import *
+from src.Streamlit_Magic_Sheet.components.elements import *
+#######################################################################################################
+
+######################################################################################################
+#Page Config
+######################################################################################################
+

src/Streamlit_Magic_Sheet/components/navigation.py

@@ -0,0 +1,213 @@
+#Authot github.com/tushar2704
+##############################################################################################################
+#Importing required library
+##############################################################################################################
+import random
+
+import pandas as pd
+# import plotly.express as px
+# import plotly.graph_objects as go
+import streamlit as st
+import sys
+from pathlib import Path
+script_dir = Path(__file__).resolve().parent
+project_root = script_dir.parent
+sys.path.append(str(project_root))
+########################################################################################################
+#######################################################################################################
+#Importing from SRC
+#######################################################################################################
+from src.Streamlit_Magic_Sheet.components.header import *
+from src.Streamlit_Magic_Sheet.components.body import *
+from src.Streamlit_Magic_Sheet.components.navigation import *
+from src.Streamlit_Magic_Sheet.components.siderbar import *
+from src.Streamlit_Magic_Sheet.components.metrics import *
+from src.Streamlit_Magic_Sheet.components.charts import *
+from src.Streamlit_Magic_Sheet.components.test import *
+from src.Streamlit_Magic_Sheet.components.elements import *
+#######################################################################################################
+
+######################################################################################################
+#Page Config
+######################################################################################################
+
+
+def page_config(page_title, page_icon, layout):
+    # Page config
+    st.set_page_config(
+        page_title=page_title,
+        page_icon=page_icon,
+        layout=layout
+    )
+    st.markdown('''<style>
+            div.block-container{padding-top:0.1rem;}
+            font-family: 'Roboto', sans-serif; /* Add Roboto font */
+            color: blue; /* Make the text blue */
+            </style>''',
+            unsafe_allow_html=True)
+    with open('custom_styles.css') as f:
+        css = f.read()
+    st.markdown(f'<style>{css}</style>', unsafe_allow_html=True)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

src/Streamlit_Magic_Sheet/components/siderbar.py

@@ -0,0 +1,379 @@
+#Authot github.com/tushar2704
+##############################################################################################################
+#Importing required library
+##############################################################################################################
+import streamlit as st
+from streamlit_option_menu import option_menu
+import base64
+import sys
+from pathlib import Path
+script_dir = Path(__file__).resolve().parent
+project_root = script_dir.parent
+sys.path.append(str(project_root))
+# import streamlit_antd_components as sac
+#######################################################################################################
+#Importing from SRC
+#######################################################################################################
+from src.Streamlit_Magic_Sheet.components.header import *
+from src.Streamlit_Magic_Sheet.components.body import *
+from src.Streamlit_Magic_Sheet.components.navigation import *
+from src.Streamlit_Magic_Sheet.components.metrics import *
+from src.Streamlit_Magic_Sheet.components.charts import *
+from src.Streamlit_Magic_Sheet.components.test import *
+from src.Streamlit_Magic_Sheet.components.elements import *
+#######################################################################################################
+
+##############################################################################################################
+#Sidebar functions
+##############################################################################################################
+
+
+def img_to_bytes(img_path):
+    img_bytes = Path(img_path).read_bytes()
+    encoded = base64.b64encode(img_bytes).decode()
+    return encoded
+
+
+#Left Panel Navigation
+def left_main_panel():
+    custom_css = f"""
+    <style>
+        .sidebar .stImage {{
+            display: block;
+            margin: 0;
+            padding: 0;
+        }}
+        .st-emotion-cache-10oheav {{padding: 0.1rem 0.2rem;}}
+        img{{
+            vertical-align: middle;
+            margin-right: 70px;
+            float:right;
+        }}
+    </style>
+    """
+
+      # Example usage in the Streamlit sidebar
+    st.sidebar.markdown(custom_css, unsafe_allow_html=True)
+    st.sidebar.markdown(f'''[<img src='data:image/png;base64,{img_to_bytes("src/Streamlit_Magic_Sheet/data unboxed.png")}' class='img-fluid' width=100 height=100>](https://Tushar-Aggarwal.com/)''', unsafe_allow_html=True)
+    
+    st.sidebar.markdown(f"##### <span style='margin-left: 45px;'>[Tushar-Aggarwal.com](https://tushar-aggarwal.com/)</span>", unsafe_allow_html=True)
+
+    with st.sidebar:
+        main_navbar =option_menu(
+            menu_title="",
+            options=['Magic Sheet','Write and Magic','Text Elements', 'Data Elements', 'Chart Elements', 
+           'Input Widgtes', 'Media Elements', 'Layouts and Containers',
+           'Chat Elements', 'Status Elements', 'Control Flow',
+           'Utilities', 'Mutate Charts', 'State Management',
+           'Performance', 'Personalization', 'Connections and Databases',
+           'App Menu', 'Button Behavior and Examples', 'Caching',
+           'Command Line Options', 'Configuration', 'Theming', 'Connecting To Data',
+           'Dataframes', 'Forms', 'Add Statefulness to Apps', 'Widget Behavior',
+           'Working With Timezones', 'Static File Serving',
+           'Https Support', 'Secrects Management', 'Security Reminders',
+           'Connect to Data Sources'],
+            icons=['magic','blockquote-left','body-text','bar-chart-line-fill', 'bar-chart', 
+           'input-cursor-text', 'collection-play-fill', 'columns-gap',
+           'chat-right-text', 'briefcase', 'diagram-3',
+           'collection', 'pie-chart-fill', 'kanban-fill',
+           'speedometer', 'columns', 'hdd',
+           'menu-button', 'check2-square', 'memory',
+           'list-columns', 'gear', 'columns-gap', 'gear-wide-connected',
+           'table', 'ui-checks', 'menu-app-fill', 'card-heading',
+           'calendar-date', 'file-earmark-arrow-down',
+           'ethernet', 'asterisk', 'key',
+           'hdd'],
+            menu_icon="house-fill",
+            default_index=0, 
+            )
+    
+
+
+    # sac.tabs([
+    #         sac.TabsItem(label=magic_sheet_uk(),icon='UK'),
+    #         sac.TabsItem(label='FR', icon='FRANCE'),
+    #         sac.TabsItem(label='DE', icon='GERMANY'),
+    #     ], format_func='title', align='end', shape='card')
+    
+    
+    if main_navbar=="Magic Sheet":
+        magic_sheet_uk()
+
+    if main_navbar=="Text Elements":
+        text_elements()
+    
+    if main_navbar=="Write and Magic":
+        write_and_magic()
+        
+    if main_navbar=="Data Elements":
+        data_elements()
+    
+    if main_navbar=="Chart Elements":
+        chart_elements()
+        
+    if main_navbar=="Input Widgtes":
+        input_widgtes()
+        
+    if main_navbar=="Media Elements":
+        media_elements()
+        
+    if main_navbar=="Layouts and Containers":
+        layouts_and_containers()
+        
+    if main_navbar=="Chat Elements":
+        chat_elements()
+        
+    if main_navbar=="Status Elements":
+        status_elements()
+        
+    if main_navbar=="Control Flow":
+        control_flow()
+        
+    if main_navbar=="Utilities":
+        utilities()
+        
+    if main_navbar=="Mutate Charts":
+        mutate_charts()
+        
+    if main_navbar=="State Management":
+        state_management()
+        
+    if main_navbar=="Performance":
+        performance()
+        
+    if main_navbar=="Personalization":
+        personalization()
+        
+    if main_navbar=="Connections and Databases":
+        connections_and_databases()
+        
+    if main_navbar=="App Menu":
+        app_menu()
+    
+    if main_navbar=="Button Behavior and Examples":
+        button_behavior_and_examples()
+        
+    if main_navbar=="Caching":
+        caching()
+        
+    if main_navbar=="Command Line Options,":
+        command_line_options()
+        
+    if main_navbar=="Configuration":
+        configuration()
+        
+    if main_navbar=="Theming":
+        theming()
+        
+    if main_navbar=="Connecting To Data":
+        connecting_to_data()
+        
+    if main_navbar=="Dataframes":
+        dataframes()
+        
+    if main_navbar=="Forms":
+        forms()
+        
+    if main_navbar=="Add Statefulness to Apps":
+        add_statefulness_to_apps()
+    
+    if main_navbar=="Widget Behavior":
+        widget_behavior()
+        
+    if main_navbar=="Working With Timezones":
+        working_with_timezones()
+        
+    if main_navbar=="Static File Serving":
+        static_file_serving()
+        
+    if main_navbar=="Https Support":
+        https_support()
+        
+    if main_navbar=="Secrects Management":
+        secrects_management()
+        
+    if main_navbar=="Security Reminders":
+        security_reminders()
+        
+    if main_navbar=="Connect to Data Sources":
+        connect_to_data_sources()
+        
+    
+        
+    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

src/Streamlit_Magic_Sheet/components/test.py

@@ -0,0 +1,845 @@
+#######################################################################################################
+#Importind required libraries
+#######################################################################################################
+
+import streamlit as st
+import base64
+import sys
+from pathlib import Path
+script_dir = Path(__file__).resolve().parent
+project_root = script_dir.parent
+sys.path.append(str(project_root))
+
+
+
+
+#######################################################################################################
+#Importing from SRC
+#######################################################################################################
+from src.Streamlit_Magic_Sheet.components.header import *
+from src.Streamlit_Magic_Sheet.components.body import *
+from src.Streamlit_Magic_Sheet.components.navigation import *
+from src.Streamlit_Magic_Sheet.components.siderbar import *
+from src.Streamlit_Magic_Sheet.components.metrics import *
+from src.Streamlit_Magic_Sheet.components.charts import *
+from src.Streamlit_Magic_Sheet.components.test import *
+from src.Streamlit_Magic_Sheet.components.elements import *
+#######################################################################################################
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+# Initial page config
+# class whole_app:
+    # st.set_page_config(
+    #     page_title='Streamlit cheat sheet',
+    #     layout="wide",
+    #     initial_sidebar_state="expanded",
+    # )
+
+    # def main():
+    #     cs_sidebar()
+    #     cs_body()
+
+    #     return None
+
+    # # Thanks to streamlitopedia for the following code snippet
+
+    # def img_to_bytes(img_path):
+    #     img_bytes = Path(img_path).read_bytes()
+    #     encoded = base64.b64encode(img_bytes).decode()
+    #     return encoded
+
+    # # sidebar
+
+    # def cs_sidebar():
+
+    #     #st.sidebar.markdown('''[<img src='data:image/png;base64,{}' class='img-fluid' width=32 height=32>](https://streamlit.io/)'''.format(img_to_bytes("logomark_website.png")), unsafe_allow_html=True)
+    #     st.sidebar.header('Streamlit cheat sheet')
+
+    #     st.sidebar.markdown('''
+    # <small>Summary of the [docs](https://docs.streamlit.io/), as of [Streamlit v1.25.0](https://www.streamlit.io/).</small>
+    #     ''', unsafe_allow_html=True)
+
+    #     st.sidebar.markdown('__Install and import__')
+
+    #     st.sidebar.code('$ pip install streamlit')
+
+    #     st.sidebar.code('''
+    # # Import convention
+    # >>> import streamlit as st
+    # ''')
+
+    #     st.sidebar.markdown('__Add widgets to sidebar__')
+    #     st.sidebar.code('''
+    # # Just add it after st.sidebar:
+    # >>> a = st.sidebar.radio(\'Choose:\',[1,2])
+    #     ''')
+
+    #     st.sidebar.markdown('__Magic commands__')
+    #     st.sidebar.code('''
+    # '_This_ is some __Markdown__'
+    # a=3
+    # 'dataframe:', data
+    # ''')
+
+    #     st.sidebar.markdown('__Command line__')
+    #     st.sidebar.code('''
+    # $ streamlit --help
+    # $ streamlit run your_script.py
+    # $ streamlit hello
+    # $ streamlit config show
+    # $ streamlit cache clear
+    # $ streamlit docs
+    # $ streamlit --version
+    #     ''')
+
+    #     st.sidebar.markdown('__Pre-release features__')
+    #     st.sidebar.code('''
+    # pip uninstall streamlit
+    # pip install streamlit-nightly --upgrade
+    #     ''')
+    #     st.sidebar.markdown('<small>Learn more about [experimental features](https://docs.streamlit.io/library/advanced-features/prerelease#beta-and-experimental-features)</small>', unsafe_allow_html=True)
+
+    #     st.sidebar.markdown('''<hr>''', unsafe_allow_html=True)
+    #     st.sidebar.markdown('''<small>[Cheat sheet v1.25.0](https://github.com/daniellewisDL/streamlit-cheat-sheet)  | Aug 2023 | [Daniel Lewis](https://daniellewisdl.github.io/)</small>''', unsafe_allow_html=True)
+
+    #     return None
+
+    # ##########################
+    # # Main body of cheat sheet
+    # ##########################
+
+    # def cs_body():
+
+    #     col1, col2, col3 = st.columns(3)
+
+    #     #######################################
+    #     # COLUMN 1
+    #     #######################################
+        
+    #     # Display text
+
+    #     col1.subheader('Display text')
+    #     col1.code('''
+    # st.text('Fixed width text')
+    # st.markdown('_Markdown_') # see #*
+    # st.caption('Balloons. Hundreds of them...')
+    # st.latex(r\'\'\' e^{i\pi} + 1 = 0 \'\'\')
+    # st.write('Most objects') # df, err, func, keras!
+    # st.write(['st', 'is <', 3]) # see *
+    # st.title('My title')
+    # st.header('My header')
+    # st.subheader('My sub')
+    # st.code('for i in range(8): foo()')
+
+    # # * optional kwarg unsafe_allow_html = True
+
+    #     ''')
+
+    #     # Display data
+
+    #     col1.subheader('Display data')
+    #     col1.code('''
+    # st.dataframe(my_dataframe)
+    # st.table(data.iloc[0:10])
+    # st.json({'foo':'bar','fu':'ba'})
+    # st.metric(label="Temp", value="273 K", delta="1.2 K")
+    #     ''')
+
+
+    #     # Display media
+
+    #     col1.subheader('Display media')
+    #     col1.code('''
+    # st.image('./header.png')
+    # st.audio(data)
+    # st.video(data)
+    #     ''')
+
+    #     # Columns
+
+    #     col1.subheader('Columns')
+    #     col1.code('''
+    # col1, col2 = st.columns(2)
+    # col1.write('Column 1')
+    # col2.write('Column 2')
+
+    # # Three columns with different widths
+    # col1, col2, col3 = st.columns([3,1,1])
+    # # col1 is wider
+                
+    # # Using 'with' notation:
+    # >>> with col1:
+    # >>>     st.write('This is column 1')
+                
+    # ''')
+
+    #     # Tabs
+        
+    #     col1.subheader('Tabs')
+    #     col1.code('''
+    # # Insert containers separated into tabs:
+    # >>> tab1, tab2 = st.tabs(["Tab 1", "Tab2"])
+    # >>> tab1.write("this is tab 1")
+    # >>> tab2.write("this is tab 2")
+
+    # # You can also use "with" notation:
+    # >>> with tab1:
+    # >>>   st.radio('Select one:', [1, 2])
+    # ''')
+
+    #     # Control flow
+
+    #     col1.subheader('Control flow')
+    #     col1.code('''
+    # # Stop execution immediately:
+    # st.stop()
+    # # Rerun script immediately:
+    # st.experimental_rerun()
+
+    # # Group multiple widgets:
+    # >>> with st.form(key='my_form'):
+    # >>>   username = st.text_input('Username')
+    # >>>   password = st.text_input('Password')
+    # >>>   st.form_submit_button('Login')
+    # ''')
+        
+    #     # Personalize apps for users
+
+    #     col1.subheader('Personalize apps for users')
+    #     col1.code('''
+    # # Show different content based on the user's email address.
+    # >>> if st.user.email == 'jane@email.com':
+    # >>>    display_jane_content()
+    # >>> elif st.user.email == 'adam@foocorp.io':
+    # >>>    display_adam_content()
+    # >>> else:
+    # >>>    st.write("Please contact us to get access!")
+    # ''')
+
+
+    #     #######################################
+    #     # COLUMN 2
+    #     #######################################
+
+    #     # Display interactive widgets
+
+    #     col2.subheader('Display interactive widgets')
+    #     col2.code('''
+    # st.button('Hit me')
+    # st.data_editor('Edit data', data)
+    # st.checkbox('Check me out')
+    # st.radio('Pick one:', ['nose','ear'])
+    # st.selectbox('Select', [1,2,3])
+    # st.multiselect('Multiselect', [1,2,3])
+    # st.slider('Slide me', min_value=0, max_value=10)
+    # st.select_slider('Slide to select', options=[1,'2'])
+    # st.text_input('Enter some text')
+    # st.number_input('Enter a number')
+    # st.text_area('Area for textual entry')
+    # st.date_input('Date input')
+    # st.time_input('Time entry')
+    # st.file_uploader('File uploader')
+    # st.download_button('On the dl', data)
+    # st.camera_input("一二三,茄子!")
+    # st.color_picker('Pick a color')
+    #     ''')
+
+    #     col2.code('''
+    # # Use widgets\' returned values in variables
+    # >>> for i in range(int(st.number_input('Num:'))): foo()
+    # >>> if st.sidebar.selectbox('I:',['f']) == 'f': b()
+    # >>> my_slider_val = st.slider('Quinn Mallory', 1, 88)
+    # >>> st.write(slider_val)
+    #     ''')
+    #     col2.code('''
+    # # Disable widgets to remove interactivity:
+    # >>> st.slider('Pick a number', 0, 100, disabled=True)
+    #             ''')
+
+    #     # Build chat-based apps
+
+    #     col2.subheader('Build chat-based apps')
+    #     col2.code('''
+    # # Insert a chat message container.
+    # >>> with st.chat_message("user"):
+    # >>>    st.write("Hello 👋")
+    # >>>    st.line_chart(np.random.randn(30, 3))
+
+    # # Display a chat input widget.
+    # >>> st.chat_input("Say something")          
+    # ''')
+
+    #     col2.markdown('<small>Learn how to [build chat-based apps](https://docs.streamlit.io/knowledge-base/tutorials/build-conversational-apps)</small>', unsafe_allow_html=True)
+
+    #     # Mutate data
+
+    #     col2.subheader('Mutate data')
+    #     col2.code('''
+    # # Add rows to a dataframe after
+    # # showing it.
+    # >>> element = st.dataframe(df1)
+    # >>> element.add_rows(df2)
+
+    # # Add rows to a chart after
+    # # showing it.
+    # >>> element = st.line_chart(df1)
+    # >>> element.add_rows(df2)
+    # ''')
+
+    #     # Display code
+
+    #     col2.subheader('Display code')
+    #     col2.code('''
+    # st.echo()
+    # >>> with st.echo():
+    # >>>     st.write('Code will be executed and printed')
+    #     ''')
+
+    #     # Placeholders, help, and options
+
+    #     col2.subheader('Placeholders, help, and options')
+    #     col2.code('''
+    # # Replace any single element.
+    # >>> element = st.empty()
+    # >>> element.line_chart(...)
+    # >>> element.text_input(...)  # Replaces previous.
+
+    # # Insert out of order.
+    # >>> elements = st.container()
+    # >>> elements.line_chart(...)
+    # >>> st.write("Hello")
+    # >>> elements.text_input(...)  # Appears above "Hello".
+
+    # st.help(pandas.DataFrame)
+    # st.get_option(key)
+    # st.set_option(key, value)
+    # st.set_page_config(layout='wide')
+    # st.experimental_show(objects)
+    # st.experimental_get_query_params()
+    # st.experimental_set_query_params(**params)
+    #     ''')
+
+    #     #######################################
+    #     # COLUMN 3
+    #     #######################################
+
+
+    #     # Connect to data sources
+        
+    #     col3.subheader('Connect to data sources')
+
+    #     col3.code('''
+    # st.experimental_connection('pets_db', type='sql')
+    # conn = st.experimental_connection('sql')
+    # conn = st.experimental_connection('snowpark')
+
+    # >>> class MyConnection(ExperimentalBaseConnection[myconn.MyConnection]):
+    # >>>    def _connect(self, **kwargs) -> MyConnection:
+    # >>>        return myconn.connect(**self._secrets, **kwargs)
+    # >>>    def query(self, query):
+    # >>>       return self._instance.query(query)
+    #             ''')
+
+
+    #     # Optimize performance
+
+    #     col3.subheader('Optimize performance')
+    #     col3.write('Cache data objects')
+    #     col3.code('''
+    # # E.g. Dataframe computation, storing downloaded data, etc.
+    # >>> @st.cache_data
+    # ... def foo(bar):
+    # ...   # Do something expensive and return data
+    # ...   return data
+    # # Executes foo
+    # >>> d1 = foo(ref1)
+    # # Does not execute foo
+    # # Returns cached item by value, d1 == d2
+    # >>> d2 = foo(ref1)
+    # # Different arg, so function foo executes
+    # >>> d3 = foo(ref2)
+    # # Clear all cached entries for this function
+    # >>> foo.clear()
+    # # Clear values from *all* in-memory or on-disk cached functions
+    # >>> st.cache_data.clear()
+    #     ''')
+    #     col3.write('Cache global resources')
+    #     col3.code('''
+    # # E.g. TensorFlow session, database connection, etc.
+    # >>> @st.cache_resource
+    # ... def foo(bar):
+    # ...   # Create and return a non-data object
+    # ...   return session
+    # # Executes foo
+    # >>> s1 = foo(ref1)
+    # # Does not execute foo
+    # # Returns cached item by reference, s1 == s2
+    # >>> s2 = foo(ref1)
+    # # Different arg, so function foo executes
+    # >>> s3 = foo(ref2)
+    # # Clear all cached entries for this function
+    # >>> foo.clear()
+    # # Clear all global resources from cache
+    # >>> st.cache_resource.clear()
+    #     ''')
+    #     col3.write('Deprecated caching')
+    #     col3.code('''
+    # >>> @st.cache
+    # ... def foo(bar):
+    # ...   # Do something expensive in here...
+    # ...   return data
+    # >>> # Executes foo
+    # >>> d1 = foo(ref1)
+    # >>> # Does not execute foo
+    # >>> # Returns cached item by reference, d1 == d2
+    # >>> d2 = foo(ref1)
+    # >>> # Different arg, so function foo executes
+    # >>> d3 = foo(ref2)
+    #     ''')
+
+
+    #     # Display progress and status
+
+    #     col3.subheader('Display progress and status')
+    #     col3.code('''
+    # # Show a spinner during a process
+    # >>> with st.spinner(text='In progress'):
+    # >>>   time.sleep(3)
+    # >>>   st.success('Done')
+
+    # # Show and update progress bar
+    # >>> bar = st.progress(50)
+    # >>> time.sleep(3)
+    # >>> bar.progress(100)
+
+    # st.balloons()
+    # st.snow()
+    # st.toast('Mr Stay-Puft')
+    # st.error('Error message')
+    # st.warning('Warning message')
+    # st.info('Info message')
+    # st.success('Success message')
+    # st.exception(e)
+    #     ''')
+
+
+    #     return None
+
+
+
+
+
+
+
+
+
+class test_1:
+    def __init__(self):
+        pass
+        
+    def func_1(self):
+        
+        st.write("test func_1")
+
+    def cs_sidebar(self):
+        st.write("test t")
+    def cs_sidebar2(self):
+        st.write("test t2")
+
+        
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+