Workflow 1

HR Recruitment Dashboard

Goal: To create a sample HR Recruitment Dashboard.

Data Source: ClickHouse database configured as a Data Connector.

Key Process: This workflow focuses on structuring the dashboard using various components. It involves creating multiple specialized datasets for KPIs (e.g., Employee Count KPI, Terminated Count KPI, Average Salary KPI).

Key Features: Utilization of Box components and Label components for visual styling. Implementation of a Tab Component to organize views into "Overview" and "Hires" groups. Integration of a Combo Box filter and the Timeline Chart. The final step is to add Filter Box Conditions to connections (e.g., for Hires Per Month and Yearly Distribution) to allow real-time filtering by team in the preview

This workflow demonstrates how BDB Platform users can create a sample HR Recruitment Dashboard by using the Dashboard Designer Plugin and the Data Center Plugin, with the ClickHouse database configured as the Data Connector.

Creating an HR Recruitment Dashboard

Plugin 1- Data Center Plugin

The Data Center Plugin is used to create connectors and establish a connection to the data source. The data source used is a ClickHouse database. To configure the connector, enter the Data Connector Name, Username, Password, IP/Host, Port, and Database Name, then save the configuration.

Note: Credential details for the Data Connectors can be obtained from the BDB DevOps Team.

Creating a Data Connector

  • Navigate to the BDB Home Page.

  • From the App Menu, go to Data Center to begin setting up your data connectors.

  • Click Create (+) → Data Connector.

  • Select ClickHouse Database as the connector type.

  • Enter a Name for the connector.

  • Provide the required connection details (Hostname, Username, Password, TCP Port). Review them carefully and click Save to complete the setup.

Creating Data sets through Data Connector

  • From the created Data Connector, click on the three-dot menu.

  • Select Create Dataset.

  • Provide a Dataset Name and write the required SQL query in the Query Editor.

  • Click Validate to check for errors.

  • Click on Save button.

  • To Publish a dataset, open the three-dot menu next to the dataset name and select Publish.

The following datasets need to be created for Workflow 1

Dataset 1 : Employee Count KPI

select count(*) as Total_Count from hiring_data where current_status in ('Terminated','Joined')

Dataset 2 : Terminated Count KPI

select count(*) as Total_Count from hiring_data where current_status = 'Terminated'

Dataset 3 : Joined Count KPI

select count(*) as JoinedCount from hiring_data where current_status ='Joined'

Dataset 4 : Average Salary KPI

Select avg(monthly_salary) as Average_Salary from hiring_data

Dataset 5 : Yearly Distribution by Team

SELECT MONTH(expected_joining_date) AS Month, YEAR(expected_joining_date)AS Year, SUM(`monthly_salary`) AS Total_Monthly_Salary,

SUM(`offered_ctc`) AS Total_offered_Salary,SUM(`previous_ctc`) AS Total_previous_Salary,DATE_FORMAT(expected_joining_date, '%b') AS Month1,DATE_FORMAT(expected_joining_date, '%Y-%b') AS Formatted_Date

FROM hiring_data

WHERE expected_joining_date IS NOT NULL and previous_ctc IS NOT NULL and team = @team@

GROUP BY MONTH(expected_joining_date), YEAR(expected_joining_date), Month1,Formatted_Date

order by YEAR(expected_joining_date),month

Dataset 6 : Top 10 Sources

SELECT source, COUNT(*) AS Employee_Count

FROM hiring_data

WHERE source IS NOT NULL

GROUP BY source

ORDER BY Employee_Count DESC

LIMIT 10;

Dataset 7: Filter Team

SELECT Distinct team FROM hiring_data

Dataset 8: Filter Year

select distinct YEAR(expected_joining_date) as year

FROM bdb_hiring.hiring_data

where YEAR(expected_joining_date)!='Null' and YEAR(expected_joining_date)!=2025

order by 1 desc

Dataset 9 : Hires Per Month

SELECT DATE_FORMAT(expected_joining_date , '%b') AS Month, COUNT(*) AS Hires FROM BDB_hir_data WHERE YEAR(expected_joining_date) =@year@ GROUP BY Month ORDER BY Month;

Plugin 2- Dashboard Designer Plugin

Creating a dashboard designer

  • Click on the Apps Menu at the top right of the BDB Platform.

  • Select the Designer App.

  • Click New to open a fresh designing page.

  • Double-click on the canvas to open the Properties Panel.

  • From the panel, update dashboard settings such as background color.

  • Adjust KPI settings as needed.

Adding the component in the designer page

Add a Box Component

· Go to the Components section on the right-hand side.

· In the search bar, type “box” to locate the component.

· Drag and drop the Box component onto the dashboard canvas.

· Adjust the KPI inside the box as required to reflect the data you want to display.

Add a label component

· Go to the Components section again.

· Scroll or search for the Label component.

· Drag and drop the Label onto the dashboard canvas.

· Click on the label and rename it “HR Recruitment Dashboard”.

· Position the label in the center of the screen for a clean layout.

· From the Properties Panel, adjust:

o Font size

o Font style

o Alignment

· Ensure the label looks visually balanced within the dashboard layout.

Add a Tab Component

· Go to the Components section again.

· Search for the Tab component.

· Drag and drop the Tab component onto the dashboard canvas.

· Adjust its size and dimensions to fit your layout.

· Configure tabs:

· Tab 1 → Name it Overview

· Tab 2 → Name it Hires

· Change the tab colors as required.

· Click Save to store the configuration.

Designing KPI Boxes and Labels

· Go to the Components section.

· Select a Box and drag & drop it onto the dashboard.

· Create a thin border using the box.

· Adjust border thickness and color as shown in the video.

· Select another Box component and add it to the dashboard.

· Duplicate this box three more times to make a total of four boxes.

· Drag and position all boxes neatly across the layout.

· Adjust the dimensions of all boxes to maintain visual balance and alignment.

· From the Components section, select the Label component.

· Insert four labels, placing one inside each box.

· Rename the labels as follows:

  • Employee Count

  • Join Count

  • Terminated Count

  • Average Count

· Duplicate the Label component again to create four additional labels (one for each box).

· Delete the label name by clearing the Title field so the new labels appear invisible.

· Set the border thickness to zero so the labels blend seamlessly with the background.

Customizing Dashboard Layout, Styles, and Appearance

· Select each box and go to Box Properties → Style.

· Change the box color to match the label.

· Repeat the process for all four boxes.

· Adjust the size and dimensions to ensure a balanced design.

· Save your changes.

· Select a label and open Properties → General.

· Increase font size using the Font Size setting.

· Use the Text Align option (under General) to align text properly.

· Double-tap on the canvas to open Properties.

· Change the background color to improve visual appeal.

Adding Timeline Chart, Legend, Labels, and Combo Box

· From the Components Library, select the Timeline Chart.

· Drag and drop it onto the dashboard.

· Adjust its size and position as needed.

· Go to the Dashboard Library.

· Search for Legend.

· Drag and drop it onto the dashboard.

· Adjust its size and position.

· In the Components Library, search for Label.

· Drag and drop it above the Timeline Chart.

· Set the title as Time.

· Modify the styling as shown in the video.

· Change the background color to blend with the box.

· From the Components Library, select the Combo Box.

· Drag and drop it onto the dashboard.

· Adjust its size and dimensions.

· Click Save to save the dashboard.

· Go to the Properties of the Time label.

· Change its title to Team

Grouping Components for Tab 1

· Select all the relevant components on the dashboard.

· Click Manage Dashboard Components.

· Click Add Group (top left corner).

· Rename the group to Tab 1.

· Use the eye icon to manage visibility.

· Hide the group and save the dashboard.

Adding Components for Tab 2

· From the Components Library, search for Box.

· Add it to the dashboard, duplicate it, and position it as shown in the video.

· Add a Label with the title Year.

· Align it to the right side of the dashboard.

· Adjust the background color to blend with the dashboard design.

· From the Components Library, add a Combo Box.

· Adjust its size and placement appropriately.

· Search for Bar Component in the Components Library.

· Drag and drop it inside the box.

· Adjust the size accordingly.

· Add a Pie Component from the library.

· Adjust its size and position.

· Add a Legend for the Pie Chart

Group Components for Tab 2

· Select all the newly added components (Box, Label, Combo Box, Bar Chart, Pie Chart, Legend).

· Click Manage Dashboard Components.

· Create a new group and name it Tab 2.

· Save the dashboard.

Turn off the initial visibility of components as shown. This prevents conflict between Overview and Hires tabs.

Associating Groups with Tabs

· Click on the Tab Component on the dashboard.

· Go to the General section in Properties.

· Use the Associate Groups option.

· Link Tab 1 to Group 1 and Tab 2 to Group 2.

· Save the changes to finalize the tab-group association.

Adding Export and Image Components in Tab 1

Enhance your dashboard in Tab 1 by adding Export and Image components.

· From the Components Library, drag and drop the Export component onto the dashboard.

· Adjust its size and placement.

· Match the background color as shown in the video.

· From the Components Library, drag and drop the Image component beside the Export component.

· Duplicate the Image component and place one in the top-right corner of each KPI box.

· Go to Properties → General, then browse and upload an image from your device.

· Repeat the same process for each Image component.

Adding Data Connections to the Dashboard

· First Connection (Team Filter)

· Select the appropriate connector and dataset.

· Click the “+” icon to create a new data service.

· Repeat the Process for the following datasets:

o Yearly Distribution

o Top 10 Sources

o Employee Count

o Join Count

o Termination Count

o Average Count

o Hires Per Month

· Once all connections are made, save the dashboard

Add the following scripts to the respective dataset connections:

For Employee Count (Label 13):

sdk.setValue("label13", changedItem.attributes.data[0].total_count);

For Terminated Count (Label 14): sdk.setValue("label14", changedItem.attributes.data[0].total_count);

For Joinee Count (Label 15): sdk.setValue("label15", changedItem.attributes.data[0].total_count);

For Average Salary (Label 16): sdk.setValue("label16", changedItem.attributes.data[0].Average_Salary);

Map Datasets to Components

· Timeline Chart: Add Yearly Distribution dataset.

· Year Combo Box (Tab 2): Add the Year dataset.

· Bar Chart: Use the Hires Per Month dataset.

· Pie Chart: Use the Top 10 Sources dataset.

· Re-add image components in Tab 1 if needed.

Update Chart Titles and Properties

· Bar Chart:

· Title → Monthly Hiring Trends

o X-Axis → Month

o Y-Axis → Hires

· Pie Chart: Apply the suggested title.

· Timeline Chart:

o Title → Yearly Sales Distribution

Associate each Legend with its respective chart via the Associate option under General.

Save and preview the dashboard.

Finally, add Filter Box Conditions to the connections for Hires Per Month and Yearly Distribution. Enable actions via the checkbox to allow real-time filtering by team in preview.

The Dashboard once completed can be published to the home plugin.

PreviousDashboard DesignerNextWorkflow 2

Last updated