使用 ToolJet 构建员工敬业度调查仪表板
介绍
员工敬业度是任何组织成功的关键因素。它反映了员工对工作和组织目标的投入程度和积极性。为了有效衡量和了解员工敬业度，组织通常会开展调查，以收集员工的宝贵意见。然而，收集数据仅仅是第一步。对这些数据进行有意义的分析和呈现，对于做出能够提升员工满意度和生产力的明智决策至关重要。
本教程将引导您使用开源低代码平台ToolJet创建员工敬业度调查仪表盘。完成本教程后，您将拥有一个功能齐全的仪表盘，以可视化的方式呈现您的调查结果，帮助您识别趋势、改进领域和可执行的洞察。
先决条件：
- ToolJet（https://github.com/ToolJet/ToolJet）：一个开源的低代码平台，用于快速构建和部署内部工具。在此注册免费的 ToolJet 云帐户。
- 对 JavaScript 的基本了解：熟悉 JavaScript 概念将有助于您更有效地学习本教程。
以下是我们最终仪表盘的快速预览：
本教程将使用员工调查数据，其中包含对各种问题的回答，例如工作满意度、工作环境和薪酬。
员工数据将存储在ToolJet 数据库的表格中——ToolJet 的内置数据库，使数据管理变得简单高效。
设计用户界面
借助 ToolJet 的预构建组件，我们将为我们的应用程序设计一个简单的用户界面。
第一步是创建应用程序。登录您的 ToolJet 帐户以访问控制面板。点击“创建应用程序”按钮，我们将应用程序命名为“员工敬业度调查”。
应用准备就绪后，我们就可以开始创建用户界面了。
我们将从创建页眉开始。
1. 创建页眉
- 将组件库中的文本组件拖放到画布上。
- 将文本组件重命名为headerText，并将其数据属性更改为员工敬业度调查。
- 在“样式”部分，将字体大小更改为 25，字体粗细更改为粗体。
在应用程序开发过程中，重命名组件是一种有效的引用组件的方法。
2. 创建仪表盘面板
在此步骤中，我们将创建仪表板的布局。要设计仪表板，请按照以下步骤操作：
- 将容器组件拖放到画布上。容器用于对组件进行分组。
- 将容器组件放置到位后，拖放三个图表组件并将它们并排放置。分别将它们重命名为饼图、柱状图和折线图。
- 为这三个图表启用Plotly JSON 图表架构。我们将在教程后面根据所需图表修改JSON 描述。
- 要为图表组件添加整齐的边框，请在“样式”选项卡下调整其“盒阴影”属性。
- 将表格组件拖放到图表正下方的画布上。表格将显示存储在 ToolJet 数据库中的数据。
- 将 Table 组件重命名为employeeSurveyTable。
应用的用户界面已经准备就绪，现在是时候添加一些功能了。
获取并显示仪表盘中的数据
让我们从 ToolJetDB 的表中获取并显示数据。
1. 获取数据并将其显示在表格中
- 打开屏幕底部的查询面板，点击“+添加”按钮，创建一个新的 ToolJet 数据库查询，并将其重命名为fetchEmployeeData。
- 选择employeeSurveyData作为表名，列出行作为操作。
- 为确保每次应用程序加载时都运行此查询，请启用“在应用程序加载时运行此查询？”
- 点击“运行”按钮，查看从employeeSurveyData数据库中提取的数据。
- 获取到数据后，选择employeeSurveyTable组件，并在Data属性中添加以下代码：
{{queries.fetchEmployeeData.data}}。现在您应该可以在 Table 组件中看到查询返回的数据。
2. 通过图表展示数据
接下来，我们将把数据展示在图表上。
a.) 饼图
首先，我们将通过饼图展示基于“工作满意度”的数据。我们需要将获取的数据转换为Plotly JSON 图表模式，才能用于饼图。
- 展开查询面板，创建一个新的运行 JavaScript 代码查询，并将其重命名为pieChart。
- 在代码编辑器中，粘贴以下代码：
// run the fetchEmployeeData query
await queries.fetchEmployeeData.run();
const data = queries.fetchEmployeeData.getData();
function generatePlotlyPieChartData(data) {
// Step 1: Extract and count job satisfaction values
const jobSatisfactionCounts = data.reduce((acc, curr) => {
const satisfaction = curr.job_satisfaction;
if (acc[satisfaction]) {
acc[satisfaction]++;
} else {
acc[satisfaction] = 1;
}
return acc;
}, {});
// Step 2: Prepare labels and values for the pie chart
const labels = Object.keys(jobSatisfactionCounts);
const values = Object.values(jobSatisfactionCounts);
// Step 3: Generate Plotly pie chart schema
const plotlyPieChartSchema = {
type: 'pie',
labels: labels,
values: values,
textinfo: 'percent',
insidetextorientation: 'radial'
};
return plotlyPieChartSchema;
}
// Generate Plotly pie chart data
const plotlyPieChartData = generatePlotlyPieChartData(data);
// converts the plotlyPieChartData into a string
const finalData = JSON.stringify(plotlyPieChartData);
return finalData;
这段代码将“Job_Satisfaction”列中的数据转换为 Plotly 饼图可接受的格式。
- 为确保每次应用程序加载时都运行此查询，请启用“在应用程序加载时运行此查询？”
- 点击“运行”按钮，即可查看格式化为饼图的数据。
- 接下来，选择饼图组件，并在饼图组件的JSON 描述中，将“data”键下的值替换为.
{{queries.pieChart.data}} - 如果按照上述步骤正确操作，就可以看到以饼图形式显示的数据。
为了更好地理解，在饼图的属性面板中，将标题更改为“员工满意度指数”。
b.) 条形图
接下来，我们将根据“工作环境”这一变量，通过柱状图展示数据。首先，我们需要将获取的数据转换为Plotly JSON 图表模式，以便生成柱状图。
- 展开查询面板，创建另一个运行 JavaScript 代码查询，并将其重命名为barChart。
- 在代码编辑器中，粘贴以下代码：
// run the fetchEmployeeData query
await queries.fetchEmployeeData.run();
const data = queries.fetchEmployeeData.getData();
function generateWorkEnvironmentBarChartData(data) {
// Step 1: Extract and count job satisfaction values grouped by work_environment
const workEnvironmentCounts = data.reduce((acc, curr) => {
const workEnvironment = curr.work_environment;
if (acc[workEnvironment]) {
acc[workEnvironment]++;
} else {
acc[workEnvironment] = 1;
}
return acc;
}, {});
// Step 2: Prepare x (work environment levels) and y (counts) for the bar chart
const x = Object.keys(workEnvironmentCounts);
const y = Object.values(workEnvironmentCounts);
// Step 3: Generate Plotly bar chart schema
const plotlyBarChartSchema = {
type: 'bar',
x: x,
y: y,
marker: { color: 'blue' }
};
return plotlyBarChartSchema;
}
// Generate Plotly bar chart data
const plotlyBarChartData = generateWorkEnvironmentBarChartData(data);
// converts the plotlyBarChartData into a string
const finalData = JSON.stringify(plotlyBarChartData);
return finalData;
这段代码将“Work_Environment”列中的数据转换为条形图可接受的格式。
- 为确保每次应用程序加载时都运行此查询，请启用“在应用程序加载时运行此查询？”
- 点击“运行”按钮；现在您应该可以看到基于“work_environment”列的数据，并且格式为条形图可接受的格式。
- 接下来，在barChart组件的JSON Description中，将“data”键下的值替换为.
{{queries.barChart.data}} - 在“属性”面板中，将标题编辑为“工作环境索引”，以便更好地进行引用。
- 如果按照上述步骤正确操作，您可以看到“工作环境”列中的数据以条形图的形式显示。
c.) 折线图
最后，我们将通过折线图展示基于“薪酬”的数据。首先，我们必须将获取的数据转换为Plotly JSON 图表模式，以便绘制折线图。
- 展开查询面板，创建一个新的运行 JavaScript 代码查询，并将其重命名为lineChart。
- 在代码编辑器中，粘贴以下代码：
// run the fetchEmployeeData query
await queries.fetchEmployeeData.run();
const data = queries.fetchEmployeeData.getData();
function generatePlotlyLineChartData(data) {
// Step 1: Extract and count job satisfaction values grouped by compensation
const compensationCounts = data.reduce((acc, curr) => {
const compensation = curr.compensation;
if (acc[compensation]) {
acc[compensation]++;
} else {
acc[compensation] = 1;
}
return acc;
}, {});
// Step 2: Prepare x (compensation levels) and y (counts) for the line chart
const x = Object.keys(compensationCounts);
const y = Object.values(compensationCounts);
// Step 3: Generate Plotly line chart schema
const plotlyLineChartSchema = {
type: 'scatter',
mode: 'lines+markers',
x: x,
y: y,
marker: {color: 'blue'},
line: {shape: 'linear'}
};
return plotlyLineChartSchema;
}
// Generate Plotly line chart data
const plotlyLineChartData = generatePlotlyLineChartData(data);
// converts the plotlyLineChartData into a string
const finalData = JSON.stringify(plotlyLineChartData);
return finalData;
这段代码将“薪酬”列中的数据转换为折线图可接受的格式。
- 为确保每次应用程序加载时都运行此查询，请启用“在应用程序加载时运行此查询？”
- 点击“运行”按钮，即可查看基于“薪酬”列的数据，并以折线图可接受的格式显示。
- 接下来，在lineChart组件的JSON 描述中，将“data”值替换为.
{{queries.lineChart.data}} - 在“属性”面板中编辑“标题与补偿指数”，以便更好地理解。
- 如果按照上述步骤正确操作，您可以通过折线图看到基于“薪酬”的数据显示。
结论
恭喜！您已成功创建员工敬业度调查仪表盘。您可以利用 ToolJet 中的其他预置组件，根据自身需求自定义此仪表盘。如需了解更多 ToolJet 的功能，请参阅ToolJet 官方文档或通过Slack联系我们。
文章来源：https://dev.to/tooljet/build-an-employee-engagement-survey-dashboard-using-tooljet-5bed