使用 ToolJet 和 Python 库创建 CSV 到图形生成器应用程序 🚀

在本教程中，我们将使用 ToolJet 和 Python 代码创建一个 CSV 转图形生成器应用。该应用允许用户上传 CSV 文件并生成各种类型的图形，包括折线图、散点图、条形图、直方图和箱线图。由于 ToolJet 开箱即用地支持 Python（和 JavaScript）代码，我们将结合 Python 代码和matplotlib库来处理图形生成。此外，我们将使用 ToolJet 可定制的预构建组件，在几分钟内设计出一个直观的用户界面。

以下是完整应用程序的快速预览：

查看本教程，了解如何使用 ToolJet 开发二维码生成器。

先决条件

• ToolJet ( https://github.com/ToolJet/ToolJet )：一款开源、低代码的商业应用程序构建器。您可以注册一个免费的 ToolJet 云帐户，或使用 Docker在本地机器上运行 ToolJet 。

• Python基础知识。

首先创建一个名为CSV To Graph Generator 的应用程序。

步骤1：设计用户界面

让我们使用 ToolJet 的可视化应用程序构建器来快速设计 UI。

设计标题

• 将一个文本 组件拖放到标题画布上。重命名该组件并将headerText其文本设置为“CSV TO GRAPH GENERATOR”。
• 自定义其样式属性：
  • 文字大小：25
  • 字体粗细：更粗
  • 文字颜色：#375fcfff
  • 文本对齐方式：右

这将作为您的应用程序的标题文本。

• 添加一个Icon组件，并将其命名为logo。将图标设置为 ，IconChartAreaFilled并将图标颜色设置为 #375fcfff 。将其放置在画布上的适当位置，以补充标题文本。

创建 CSV 上传部分

• 将一个Container组件拖到画布上。使用以下样式设置此容器的样式：
  • 边框半径：7
  • 背景颜色：#fff
  • 盒子阴影：2px 2px 1px 1px #aec0f5ff

该容器将容纳所有输入字段和输出预览。

• 在容器内，添加一个文件选择器组件并将其重命名为fileUploader。将其“接受文件类型”属性设置为 ，{"csv/*"}以接受 CSV 文件。启用“解析内容”开关，并选择“文件类型”为 CSV。

• 接下来，在文件选择器旁边添加一个DropdowngraphSelectionDropdown组件，并将其重命名为。将组件的Option 值设置为["line", "scatter", "bar", "histogram", "box"]，并将Option 标签设置为["Line", "Scatter", "Bar", "Histogram", "Box"]。

• 在下拉菜单下方，添加一个按钮组件并将其重命名为generateGraphButton。将其文本设置为“生成图表”。

ToolJet 中的双花括号用于传递自定义代码以及引用或访问值。

创建图像预览

要显示生成的图形，请在文件选择器和按钮下方添加一个图像组件。

UI 现已准备就绪！

步骤 2：通过查询使用 Python 库

ToolJet 的查询构建器提供了一种便捷的方式，可以使用自定义代码或连接外部数据源、服务和库。我们将使用它创建一个 Python 查询，该查询使用 CSV 数据并与 matplotlib 库交互以生成图表。

• 展开底部的查询面板，创建一个名为 的新查询generateGraph，并选择Python作为数据源。

• 在您的 Python 查询中输入以下代码：
  
  

  import matplotlib.pyplot as plt
  import pandas as pd
  import numpy as np
  from io import BytesIO
  import base64
  import io
  
  def create_plot():
      try:
          csv_string = components.fileUploader.file[0].content
          graph_type = components.graphSelectionDropdown.value
          print("Debug info:", csv_string, graph_type)
  
          df = pd.read_csv(io.StringIO(csv_string))
          columns = df.columns.tolist()
  
          if len(columns) < 2:
              raise ValueError("CSV must contain at least two columns")
  
          x_column = columns[0]
          y_columns = columns[1:]
  
          plt.figure(figsize=(12, 6))
  
          if graph_type == 'line':
              for col in y_columns:
                  plt.plot(df[x_column], df[col], label=col)
              plt.title(f'Line Plot: {x_column} vs {", ".join(y_columns)}')
              plt.legend()
              plt.xticks(rotation=45, ha='right')
          elif graph_type == 'scatter':
              if len(y_columns) >= 2:
                  plt.scatter(df[y_columns[0]], df[y_columns[1]])
                  plt.title(f'Scatter Plot: {y_columns[0]} vs {y_columns[1]}')
                  plt.xlabel(y_columns[0])
                  plt.ylabel(y_columns[1])
              else:
                  plt.scatter(df[x_column], df[y_columns[0]])
                  plt.title(f'Scatter Plot: {x_column} vs {y_columns[0]}')
                  plt.xlabel(x_column)
                  plt.ylabel(y_columns[0])
          elif graph_type == 'bar':
              x = range(len(df[x_column]))
              width = 0.8 / len(y_columns)
              for i, col in enumerate(y_columns):
                  plt.bar([xi + i*width for xi in x], df[col], width, label=col)
              plt.xlabel(x_column)
              plt.ylabel('Value')
              plt.title(f'Bar Plot: {", ".join(y_columns)}')
              plt.xticks([xi + width*(len(y_columns)-1)/2 for xi in x], df[x_column], rotation=45, ha='right')
              plt.legend()
          elif graph_type == 'histogram':
              for col in y_columns:
                  plt.hist(df[col], bins=10, alpha=0.5, label=col)
              plt.title(f'Histogram: {", ".join(y_columns)}')
              plt.xlabel('Value')
              plt.ylabel('Frequency')
              plt.legend()
          elif graph_type == 'box':
              plt.boxplot([df[col] for col in y_columns])
              plt.title(f'Box Plot: {", ".join(y_columns)}')
              plt.xticks(range(1, len(y_columns) + 1), y_columns, rotation=45, ha='right')
              plt.ylabel('Value')
          else:
              raise ValueError(f"Invalid graph type: {graph_type}. Choose 'line', 'scatter', 'bar', 'histogram', or 'box'.")
  
          plt.grid(True)
          plt.tight_layout()
  
          buffer = BytesIO()
          plt.savefig(buffer, format='png')
          buffer.seek(0)
  
          img_str = base64.b64encode(buffer.getvalue()).decode('utf-8')
  
          plt.close()
  
          return img_str
      except Exception as e:
          print(f"Error in create_plot: {str(e)}")
          return None
  
  create_plot()
  

配置完成后，您可以在文件选择器中选择一个 CSV 文件，选择图表类型，然后单击查询面板中的“运行”按钮。您可以在预览中看到查询生成的输出。

步骤 3：将 UI 组件与查询连接起来

是时候将查询绑定到组件了。

配置图像预览

• 在Image组件的Data属性中，输入以下代码来绑定查询的结果：
  
  

  {{'data:image;base64,' + queries.generateGraph.data}}
  

• 对于Image组件的Loading状态属性，点击fx按钮输入自定义代码，输入以下代码：
  
  

  {{queries.generateGraph.isLoading}}
  

根据按钮点击触发查询

通过添加触发generateGraph查询的on Click事件，将查询绑定到generateGraphButton。此设置可确保单击按钮时脚本运行并生成图表。

完成此设置后，每次上传 CSV 文件、选择图形类型并单击generateGraphButton时，都会创建图形并在图像组件中显示预览。

结论

通过遵循这些步骤，我们成功地使用 ToolJet 构建了一个动态且用户友好的 CSV 转图形生成器应用。我们利用 ToolJet 的可视化应用构建器打造了优雅直观的用户界面，使用查询构建器集成了用于图形生成的 Python 库，并演示了如何自定义 ToolJet 应用以提供流畅的用户体验。

要了解和探索有关 ToolJet 的更多信息，请查看ToolJet 文档或与我们联系并在我们的Slack 频道上发布您的疑问。