用Python和Gradio构建现代仪表板|迈向数据科学

第二个关于使用最新基于Python的GUI开发工具的简短系列的有关数据仪表板的简短系列。Gradio和Taipy 

每个仪表板的源数据集将相同，但以不同的格式存储。尽可能多地，我还尝试使每个工具的实际仪表板布局相似，并且具有相同的功能。

在本系列的第一部分中，我创建了一个简化的仪表板版本，该版本从本地的PostgreSQL数据库中检索其数据。您可以查看该文章这里。

这次，我们探索了Gradio库的使用。

该仪表板的数据将在本地CSV文件中，而PANDA将是我们的主要数据处理引擎。

如果您想查看该应用程序的快速演示，我将其部署到拥抱面孔的空间中。您可以使用下面的链接运行它，但是请注意，由于拥抱面部环境中的已知错误，两个输入日期选择器弹出窗口无效。仅在HF上部署应用程序的情况下，您仍然可以手动更改日期。在本地运行该应用程序正常运行，并且没有这个问题。

拥抱面上的仪表板演示

什么是Gradio？

Gradio是一个开源Python软件包，可简化用于机器学习模型，API或任何Python功能的构建演示或Web应用程序的过程。有了它，您可以创建演示或Web应用程序，而无需JavaScript，CSS或Web托管体验。通过仅编写几行Python代码，您可以解锁Gradio的功能，并无缝向更广泛的受众展示您的机器学习模型。

Gradio通过提供一个直观的框架来简化开发过程，该框架消除了与从头开始构建用户界面相关的复杂性。无论您是机器学习开发人员，研究人员还是爱好者，Gradio都可以使您创建美丽而互动的演示，从而增强机器学习模型的理解和可访问性。

此开源Python软件包可帮助您弥合机器学习专业知识与更广泛的受众之间的差距，从而使您的模型易于访问和可操作。

我们会开发的

我们正在开发一个数据仪表板。我们的源数据将是一个包含100,000个合成销售记录的CSV文件。

数据的实际来源不是那重要的。它可以很容易地是文本文件，excel文件，sqlite或您可以连接到的任何数据库。

这就是我们最终的仪表板的外观。

有四个主要部分。

• 顶行使用户能够分别使用日期选择器和下拉列表选择特定的开始和终点和/或产品类别。
• 第二行关键指标显示了所选数据的顶级摘要。
• 可视化部分允许用户选择三个图表之一以显示输入数据集。
• 原始数据部分正是它所声称的。所选数据的此表格表示有效地显示了基础CSV数据文件的快照。

使用仪表板很容易。最初，显示整个数据集的统计信息。然后，用户可以使用显示屏顶部的三个滤波器字段缩小数据焦点。图形，密钥指标和原始数据部分动态更新以反映用户在过滤器字段中的选择。

基础数据

如前所述，仪表板的源数据包含在单个逗号分隔值（CSV）文件中。数据包括100,000个与综合销售相关的记录。以下是文件的前十个记录，可以让您了解其外观。

+----------+-------------+-------------+---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|order_id |order_date |customer_id |customer_name |product_id |product_names |类别|数量|价格|总计|+----------+-------------+-------------+---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|0 |01/08/2022 |245 |customer_884 |201 |智能手机|电子|3 |90.02 |270.06 ||1 |19/02/2022 |701 |Customer_1672 |205 |打印机|电子|6 |12.74 |76.44 ||2 |2017年1月1日|184 |Customer_21720 |208 |笔记本|文具|8 |48.35 |386.8 ||3 |09/03/2013 |275 |Customer_23770 |200 |笔记本电脑|电子|3 |74.85 |224.55 ||4 |23/04/2022 |960 |Customer_23790 |210 |机柜|办公室|6 |53.77 |322.62 ||5 |10/07/2019 |197 |Customer_25587 |202 |桌子|办公室|3 |47.17 |141.51 ||6 |2014年12月11日|510 |Customer_6912 |204 |监视器|电子|5 |22.5 |112.5 ||7 |12/07/2016 |150 |Customer_17761 |200 |笔记本电脑|电子|9 |49.33 |443.97 ||8 |2016年12月11日|997 |Customer_23801 |209 |咖啡机|电子|7 |47.22 |330.54 ||9 |23/01/2017 |151 |Customer_30325 |207 |笔|文具|6 |3.5 |21 |+----------+-------------+-------------+---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

这是您可以用来生成类似数据集的一些Python代码。确保首先安装Numpy和Pandas库。

＃生成100k记录CSV文件＃导入POL作为PL导入numpy作为NP从DateTime Import DateTime，TimeDeltadef生成（nrows：int，文件名：str）：名称= np.Asarray（[“笔记本电脑”，“手机”，“桌子”，“椅子”，“监视器”，“打印机”，“纸”，“笔”，“笔记本”，“咖啡机”，“内阁”，“塑料杯”，这是给出的）类别= np.Asarray（[“电子”，“电子”，“办公室”，“办公室”，“电子”，“电子”，“静止的”，“静止的”，“静止的”，“电子”，“办公室”，“杂物”，这是给出的）product_id = np.random.randint（len（names），size = nrows）数量= np.random.randint（1，11，size = nrows）价格= np.random.randint（199，10000，size = nrows） / 100＃在2010-01-01和2023-12-31之间生成随机日期start_date = dateTime（2010，1，1）end_date = dateTime（2023，12，31）date_range =（end_date -start_date）.day＃创建随机日期为np.array并转换为字符串格式order_dates = np.array（[[（（start_date + timeDELTA）（days = np.random.randint（0，date_range））。＃定义列列= {“ order_id”：np.arange（nrows），“ order_date”：order_dates，“ customer_id”：np.random.randint（100，1000，size = nrows），“ customer_name”：[f“ customer_ {i}” for np.random.randint（2 ** 15，size = nrows）]，“ product_id”：product_id + 200，“ product_names”：名称[product_id]，“类别”：类别[product_id]，“数量”：数量，“价格”：价格，“总”：价格 *数量，}＃创建Polars DataFrame并使用显式定界符写入CSVdf = pl.dataframe（列）df.write_csv（文件名，saparator ='，'，include_header = true）＃确保逗号用作定界符＃用随机订单_date生成100,000行数据并保存到CSV生成（100_000，“/mnt/d/sales_data/sales_data.csv”）

安装和使用Gradio

安装Gradio很容易使用pip，但对于编码，最好的做法是为您的所有工作建立一个单独的Python环境。我将Miniconda用于此目的，但可以随意使用适合您的工作练习的任何方法。

如果您想沿着Conda路线沿着它的路线，并且必须先安装Miniconda（推荐）或Anaconda。 

请注意，在写作时，Gradio至少需要安装Python 3.8才能正确工作。

创建环境后，使用激活命令，然后运行PIP安装到 安装我们所需的Python库。

＃创建我们的测试环境（基础）c：\ users \ thoma> conda create -n gradio_dashboard python = 3.12 -y＃现在激活它（基础）c：\ users \ thoma> conda激活gradio_dashboard＃安装python库等...（gradio_dashboard）c：\ users \ thoma> pip安装gradio pandas matplotlib cachetools

简化和gradio之间的关键差异

正如我在本文中所展示的那样，可以使用简化和Gradio生成非常相似的数据仪表板。但是，他们的精神在几种关键方面有所不同。

重点

• Gradio专门针对机器学习模型创建界面，而精简的设计更专门用于通用数据应用程序和可视化。

易用性

• Gradio以其简单性和快速的原型制作功能而闻名，使初学者更容易使用。简化提供了更高级的功能和自定义选项，这可能需要更陡峭的学习曲线。

互动

• 简化使用反应性编程模型任何输入更改会触发完整的脚本重播，立即更新所有组件。默认情况下，Gradio仅在用户单击提交按钮时才更新，尽管可以为实时更新进行配置。

定制

• Gradio专注于预先构建的组件，以快速展示AI模型。简化为复杂项目提供了更广泛的自定义选项和灵活性。

部署

• 在部署了简化和Gradio应用程序之后，我会说部署简化应用程序比Gradio应用程序更容易。在简化中，可以通过简化的社区云单击单击部署。此功能内置在您创建的任何简化应用中。Gradio使用拥抱的面部空间提供部署，但涉及更多的工作。但是，这两种方法都不特别复杂。

用例

简化的功能擅长为复杂项目创建以数据为中心的应用程序和交互式仪表板。Gradio非常适合快速展示机器学习模型和构建更简单的应用程序。

Gradio仪表板代码

我会将代码分解为部分，并在进行过程中解释每个部分。

我们首先要导入所需的外部库，然后将整个数据集从CSV文件加载到PANDAS DataFrame中。

导入Gradio作为GR导入大熊猫作为pd导入matplotlib.pyplot作为PLT导入日期进口警告导入操作系统导入tempfile从cachetools导入缓存，ttlcachewarnings.filterwarnings（“忽略”，类别= FutureWarning，Module =“ Seaborn”）＃---------------------------------------------------------------------------------------------------------------＃1）加载CSV数据一次＃---------------------------------------------------------------------------------------------------------------csv_data =无def load_csv_data（）：全局CSV_DATA＃可选：指定列dtypes如果已知；根据需要进行调整dtype_dict = {“ order_id”：“ int64”，“ customer_id”：“ int64”，“ product_id”：“ int64”，“数量”：“ int64”，“价格”：“ float”，“总计”：“ float”，“ customer_name”：“字符串”，“ product_names”：“字符串”，“类别”：“字符串”}csv_data = pd.read_csv（“ d：/sales_data/sales_data.csv”，parse_dates = [“ order_date”]，dayfirst = true，＃如果您的日期为dd/mm/yyyy格式low_memory = false，dtype = dtype_dict）load_csv_data（）

接下来，我们配置了一个最多128个项目和300秒的到期时间。这用于存储昂贵的功能调用的结果并加快重复查找

这get_unique_categories函数返回``csv_data“ dataframe）的唯一清洁（大写）类别的列表，从而缓存了结果以更快地访问。

这get_date_range函数返回数据集的最低和最大订单日期，或者如果数据不可用，则无需返回。

这filter_data函数基于指定的日期范围和可选类别过滤CSV_DATA数据框架，从而返回过滤后的数据框架。

这get_dashboard_stats功能检索摘要指标的总收入，总订单，平均订单值和最高类别的指标。它在内部使用filter_data（）为了范围数据集，然后计算这些关键统计信息。

这get_data_for_table fUNICTER返回过滤销售数据的详细数据框架，由order_id和order_date，包括每次销售的额外收入。

这get_plot_data功能格式化数据以通过将收入汇总为随着时间的时间，按日期分组来生成图。

这get_revenue_by_category功能汇总和按类别返回收入，在指定的日期范围和类别内按收入排序。

这get_top_products功能按收入返回前十种产品，按日期范围和类别进行过滤。

基于方向参数，create_matplotlib_figure函数从数据中生成条形图，并将其保存为垂直或水平的图像文件。

cache = ttlcache（maxsize = 128，ttl = 300）@cached（缓存）def get_unique_categories（）：全局CSV_DATA如果CSV_DATA无：返回 []cats = sorted（csv_data ['categories']。dropna（）。unique（）。tolist（））猫= [猫的Cat.capitalize（）猫中的猫]返回猫def get_date_range（）：全局CSV_DATA如果CSV_DATA不或CSV_DATA.Empty：没有返回，没有返回csv_data ['order_date']。min（），csv_data ['order_date']。max（）def filter_data（start_date，end_date，类别）：全局CSV_DATA如果IsInstance（start_date，str）：start_date = dateTime.dateTime.strptime（start_date，'％y-％m-％d'）。date（）如果Isinstance（end_date，str）：end_date = dateTime.dateTime.strptime（end_date，'％y-％m-％d'）。date（）df = csv_data.loc [（csv_data ['order_date']> = pd.to_dateethime（start_date））＆（csv_data ['order_date'] <= pd.to_dateTime（end_date））]。复制（）如果类别！=“所有类别”：df = df.loc [df ['categories']。str.capitalize（）== category] ​​.copy（）返回DFdef get_dashboard_stats（start_date，end_date，类别）：df = filter_data（start_date，end_date，类别）如果DF.Empty：返回（0，0，0，“ n/a”）df ['收入'] = df ['price'] * df ['数量']total_revenue = df ['收入']。sum（）total_orders = df ['order_id']。nunique（）avg_order_value = total_revenue / total_orders如果total_orders elsecat_revenues = df.groupby（'类别'）['revenue']。top_category = cat_revenues.index [0]如果不是cat_revenues.empty其他“ n/a”返回（total_revenue，total_orders，avg_order_value，top_category.capitalize（））def get_data_for_table（start_date，end_date，类别）：df = filter_data（start_date，end_date，类别）如果DF.Empty：返回pd.dataframe（）df = df.sort_values（by = [“ order_id”，“ order_date”]，apcending = [true，false]）。复制（）columns_order = [“ order_id”，“ order_date”，“ customer_id”，“ customer_name”，“ product_id”，“ product_names”，“类别”，“数量”，“价格”，“总”这是给出的columns_order = [col in Columns_order中的col，如果df.columns中的col]df = df [columns_order] .copy（）df ['收入'] = df ['price'] * df ['数量']返回DFdef get_plot_data（start_date，end_date，类别）：df = filter_data（start_date，end_date，类别）如果DF.Empty：返回pd.dataframe（）df ['收入'] = df ['price'] * df ['数量']plot_data = df.groupby（df ['order_date']。dt.date）['revenue']。sum（）。reset_index（）plot_data.rename（columns = {'order_date'：'date'}，inplace = true）返回plot_datadef get_revenue_by_category（start_date，end_date，类别）：df = filter_data（start_date，end_date，类别）如果DF.Empty：返回pd.dataframe（）df ['收入'] = df ['price'] * df ['数量']cat_data = df.groupby（'categories'）['revenue']。sum（）。reset_index（）CAT_DATA = CAT_DATA.SORT_VALUES（by ='Revenue'，Ascending = false）返回cat_datadef get_top_products（start_date，end_date，类别）：df = filter_data（start_date，end_date，类别）如果DF.Empty：返回pd.dataframe（）df ['收入'] = df ['price'] * df ['数量']prod_data = df.groupby（'product_names'）['revenue']。sum（）。reset_index（）prod_data = prod_data.sort_values（by ='Revenue'，Ascending = false）.head（10）返回prod_datadef create_matplotlib_figure（data，x_col，y_col，title，xlabel，ylabel，entientation ='v'）：plt.figure（无花果=（10，6））如果data.empty：plt.text（0.5，0.5，'无数据可用'，ha ='Center'，va ='Center'）别的：如果方向=='v'：plt.bar（数据[x_col]，数据[y_col]）plt.xticks（旋转= 45，ha ='right'）别的：plt.barh（数据[x_col]，数据[y_col]）plt.gca（）。invert_yaxis（）plt.title（标题）plt.xlabel（xlabel）plt.ylabel（Ylabel）plt.tight_layout（）使用tempfile.MegedTemporaryFile（delete = false，suffix =“。png”）作为tmpfile：plt.savefig（tmpfile.name）plt.close（）返回tmpfile.name

这update_dashboard功能通过调用电话检索关键销售统计数据（总收入，总订单，平均订单值和顶级类别）get_dashboard_stats功能。它收集了三种不同可视化的数据（随着时间的推移收入，类别的收入和最高产品），然后使用create_matplotlib_figure生成图。它准备并返回数据表（通过get_data_for_table（）功能）以及所有生成的图和统计数据，因此可以在仪表板中显示。

这create_dashboard功能设置日期边界（最小和最大日期），并建立初始默认过滤器值。它使用Gradio构建了一个用户界面（UI），其中包含日期选择器，类别下拉列表，密钥公制显示，绘图选项卡和数据表。然后将其固定到过滤器，以便更改它们中的任何一个都会触发呼叫update_dashboard功能，确保仪表板的视觉效果和指标始终与所选过滤器保持同步。最后，它返回以Web应用程序启动的组装级界面。

def update_dashboard（start_date，end_date，类别）：total_revenue，total_orders，avg_order_value，top_category = get_dashboard_stats（start_date，end_date，end_date，centory）＃生成图revenue_data = get_plot_data（start_date，end_date，centory）category_data = get_revenue_by_category（start_date，end_date，cattory）top_products_data = get_top_products（start_date，end_date，类别）Revenue_over_time_path = create_matplotlib_figure（Revenue_data，“日期”，“收入”，“随着时间的收入”，“日期”，“收入”）Revenue_by_category_path = create_matplotlib_figure（类别_data，“类别”，“收入”，“按类别收入”，“类别”，“收入”）top_products_path = create_matplotlib_figure（top_products_data，'product_names'，'收入'，“顶级产品”，“收入”，“产品名称”，Orientation ='H'）＃数据表table_data = get_data_for_table（start_date，end_date，类别）返回 （Revenue_over_time_path，Revenue_by_category_path，top_products_path，table_data，total_revenue，total_orders，avg_order_value，top_category）def create_dashboard（）：min_date，max_date = get_date_range（）如果min_date无或max_date是无：min_date = dateTime.dateTime.now（）max_date = dateTime.dateTime.now（）default_start_date = min_datedefault_end_date = max_date使用Gr.Blocks（CSS =“”“”页脚{display：无！重要;}.tabs {border：none！重要;}.gr-plot {border：none！盒子阴影：无！重要;}“”）作为仪表板：Gr.markDown（“＃销售性能仪表板”）＃过滤行使用Gr.Row（）：start_date = gr.dateTime（标签=“开始日期”，value = default_start_date.strftime（'％y-％m-％d'），include_time = false，type =“ dateTime”）end_date = gr.dateTime（标签=“结束日期”，value = default_end_date.strftime（'％y-％m-％d'），include_time = false，type =“ dateTime”）category_filter = gr.dropdown（选择= [“所有类别”] + get_unique_categories（），标签=“类别”，值=“所有类别”）Gr.markDown（“＃键指标”）＃Stats Row使用Gr.Row（）：total_revenue = gr.number（label =“总收入”，值= 0）total_orders = gr.number（label =“总订单”，值= 0）avg_order_value = gr.number（label =“平均订单值”，value = 0）top_category = gr.textbox（label =“ top category”，value =“ n/a”）Gr.markDown（“＃可视化”）＃图选项卡使用gr.tabs（）：与gr.tab（“随着时间的收入”）：Revenue_over_time_image = gr.image（label =“收入随着时间的推移”，容器= false）与gr.tab（“按类别收入”）：Revenue_by_category_image = gr.image（label =“按类别收入”，容器= false）与gr.tab（“顶级产品”）：top_products_image = gr.image（label =“ Top Products”，Container = false）Gr.markDown（“＃原始数据”）＃数据表（图下方）data_table = gr.dataframe（标签=“销售数据”，type =“ pandas”，Interactive = false）＃滤波器更改时，更新所有内容对于[start_date，end_date，category_filter]：f.change（fn = lambda s，e，c：update_dashboard（s，e，c），输入= [start_date，end_date，category_filter]，输出= [Revenue_over_time_image，Revenue_by_category_image，top_products_image，data_table，total_revenue，total_orders，avg_order_value，top_category这是给出的）＃初始加载dashboard.load（fn = lambda：update_dashboard（default_start_date，default_end_date，“所有类别”），输出= [Revenue_over_time_image，Revenue_by_category_image，top_products_image，data_table，total_revenue，total_orders，avg_order_value，top_category这是给出的）返回仪表板如果__name__ ==“ __ -main __”：仪表板= create_dashboard（）dashboard.launch（share = false）

运行该程序

创建一个Python文件，例如gradio_test.py，并插入以上所有代码段。保存并这样运行，

（gradio_dashboard）$ python gradio_test.py*在本地URL上运行：http：//127.0.0.1:7860要创建一个公共链接，请在`启动（）中设置`share = true'。

单击显示的本地URL，仪表板将在浏览器中打开全屏。

概括

本文提供了一份综合指南，以使用Gradio和CSV文件作为其源数据来构建交互式销售性能仪表板。

Gradio是一个现代化的基于Python的开源框架，可简化数据驱动的仪表板和GUI应用程序的创建。我开发的仪表板允许用户按日期范围和产品类别进行过滤数据，查看关键指标，例如总收入和表现最佳类别，探索诸如收入趋势和最佳产品之类的可视化，并浏览带有分页的原始数据。

我还提到了使用Gradio和Seamlit开发可视化工具（另一个流行的前端Python库）之间的一些关键差异。

本指南提供了Gradio数据仪表板的全面实现，从创建示例数据到开发用于查询数据，生成图和处理用户输入的Python功能的整个过程。这种逐步的方法演示了如何利用Gradio的功能来创建用户友好和动态的仪表板，这是希望构建交互式数据应用程序的数据工程师和科学家的理想选择。

尽管我将CSV文件用于数据，但要修改代码以使用其他数据源，例如SQLITE等关系数据库管理系统（RDBMS），应该很简单。例如，在我在本系列中的另一篇文章中，关于使用Sparlit创建类似仪表板的文章，数据源是PostgreSQL数据库。