Create an HR Recruitment Dashboard Using BDB Dashboard Designer

The HR Recruitment Dashboard provides a visual overview of the hiring funnel and key talent metrics for managers to monitor performance and guide staffing decisions.

Purpose

This guide provides detailed steps to create a sample HR Recruitment Dashboard using the BDB Dashboard Designer Plugin and the Data Center Plugin, with a ClickHouse database configured as the primary Data Connector.

The dashboard visualizes HR recruitment data such as total employees, hires, terminations, and salary distribution. It demonstrates how to combine KPI tiles, charts, filters, and interactive tabs into a cohesive and professional HR dashboard.

Business Context

Recruitment analytics enables HR teams to make data-driven hiring decisions by tracking metrics like employee count, joining trends, and salary averages. This workflow demonstrates how HR stakeholders can leverage the BDB Platform to design a dynamic dashboard connected to live ClickHouse data—providing real-time visibility into workforce trends.

Key Highlights

Category
Feature

Data Source

ClickHouse database configured as Data Connector

Plugins Used

Data Center Plugin, Dashboard Designer Plugin

Key Components

KPI Boxes, Labels, Tabs, Combo Box Filter, Timeline Chart

Tabs Created

Tab 1: Overview, Tab 2: Hires

Interactive Filters

Real-time team-based filtering using Filter Box Conditions

Outcome

Interactive HR Dashboard ready for publication in the BDB Home Plugin

Workflow Overview

Plugins Used

  1. Data Center Plugin: Configure and manage ClickHouse connections and datasets.

  2. Dashboard Designer Plugin: Design and assemble the HR Recruitment Dashboard using components.

Step 1 – Configure ClickHouse Data Connector (Data Center Plugin)

  1. From the BDB Home Page, click the Apps Menu → select Data Center.

  2. Click Create (+) → choose Data Connector.

  3. Select ClickHouse Database as the connector type.

  4. Enter the following details:

    Field
    Description

    Connector Name

    A unique name (e.g., ClickHouse_HR_Connector)

    Hostname/IP

    Database host address

    Username / Password

    Credentials provided by DevOps

    Port (TCP)

    Default: 8123

    Database Name

    bdb_hiring or the configured HR schema

  5. Review the entries → Click Save.

  6. A success message confirms the connection.

Note: Contact the BDB DevOps Team to obtain valid credentials for ClickHouse.

Step 2 – Create Datasets from the Data Connector

  1. Locate the created ClickHouse Connector in the list.

  2. Click the three-dot (⋮) menu → select Create Dataset.

  3. Provide a Dataset Name and paste your SQL query in the Query Editor.

  4. Click Validate to ensure the query runs successfully.

  5. Click Save.

  6. Repeat the process for each dataset listed below.

Datasets Required for the HR Dashboard

Dataset
SQL Query
Description

Employee Count KPI

SELECT COUNT(*) AS Total_Count FROM hiring_data WHERE current_status IN ('Terminated','Joined');

Total employees processed.

Terminated Count KPI

SELECT COUNT(*) AS Total_Count FROM hiring_data WHERE current_status = 'Terminated';

Total terminated employees.

Joined Count KPI

SELECT COUNT(*) AS JoinedCount FROM hiring_data WHERE current_status ='Joined';

Total employees joined.

Average Salary KPI

SELECT AVG(monthly_salary) AS Average_Salary FROM hiring_data;

Average monthly salary.

Yearly Distribution by Team

(Parameterized Query) SQL 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;

Yearly metrics by team.

Top 10 Sources

SQL SELECT source, COUNT(*) AS Employee_Count FROM hiring_data WHERE source IS NOT NULL GROUP BY source ORDER BY Employee_Count DESC LIMIT 10;

Recruitment source analysis.

Filter Team

SELECT DISTINCT team FROM hiring_data;

Used for team-based filtering.

Filter Year

SQL 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;

Year filter dropdown.

Hires Per Month

SQL 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;

Monthly hiring data.

Step 3 – Design the HR Dashboard (Dashboard Designer Plugin)

3.1 Open the Designer

  1. From the Apps Menu, open the Designer Plugin.

  2. Click New to create a fresh dashboard.

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

  4. Set:

    • Background color (white or light grey)

    • Grid alignment for layout consistency

    • Default font and text style for labels

3.2 Add and Configure Base Components

Box Component

  • From the Components Library, search for Box.

  • Drag and drop it onto the canvas.

  • Adjust size and border properties.

  • Duplicate this box to create four KPI boxes aligned horizontally.

Label Component

  • Add a Label to the center-top of the dashboard.

  • Rename it to HR Recruitment Dashboard.

  • Center-align the text and increase font size (e.g., 24pt bold).

Tab Component

  • Add a Tab component to the layout.

  • Create two tabs:

    • Tab 1: Overview

    • Tab 2: Hires

  • Adjust tab colors and save the configuration.

Step 4 – Design KPI Boxes and Labels (Tab 1: Overview)

4.1 KPI Labels

  1. Insert four labels inside the KPI boxes:

    • Employee Count

    • Join Count

    • Terminated Count

    • Average Salary

  2. Duplicate the labels to display numeric values (linked via SDK script).

  3. Remove borders and titles for a seamless appearance.

4.2 Style Enhancements

  • Adjust box background and border colors for visual contrast.

  • Increase label font size for clarity.

  • Align all elements symmetrically.

  • Set the dashboard background to a soft neutral tone.

Step 5 – Add Charts and Filters (Tab 2: Hires)

5.1 Components to Add

Component
Purpose

Box

Container for chart grouping.

Label (Year)

Indicates Year selection filter.

Combo Box

Dropdown for selecting Year.

Bar Chart

Visualize Monthly Hiring Trends.

Pie Chart

Show Top 10 Recruitment Sources.

Legend

Support chart understanding.

5.2 Chart Configuration

  • Bar Chart:

    • Dataset: Hires Per Month

    • Title: Monthly Hiring Trends

    • X-Axis: Month

    • Y-Axis: Hires

  • Pie Chart:

    • Dataset: Top 10 Sources

    • Title: Top Recruitment Sources

  • Associate respective legends using the Associate Component option.

Step 6 – Group Components by Tabs

6.1 Grouping Steps

  1. Select all components for Tab 1 → Click Manage Dashboard Components → Add Group → Name: Group_Overview.

  2. Repeat for Tab 2 → Name: Group_Hires.

  3. Use the eye icon to toggle visibility between groups.

6.2 Associate Tabs with Groups

  1. Select the Tab Component.

  2. In Properties → General, associate:

    • Tab 1 → Group_Overview

    • Tab 2 → Group_Hires

  3. Save changes.

Step 7 – Add Export and Image Components (Optional Enhancements)

  1. From the Components Library, drag the Export component to the dashboard header.

  2. Customize background and button color.

  3. Add Image components near KPI boxes (e.g., icons for Employee, Salary, etc.).

  4. Upload custom icons via Properties → General → Browse.

Step 8 – Add Data Connections

For each dataset created in the Data Center:

Dataset
Dashboard Component
Action

Employee Count

Label13

Update via script

Terminated Count

Label14

Update via script

Joined Count

Label15

Update via script

Average Salary

Label16

Update via script

Yearly Distribution

Timeline Chart

Bind data

Filter Year

Year Combo Box

Assign data source

Hires Per Month

Bar Chart

Bind dataset

Top 10 Sources

Pie Chart

Bind dataset

SDK Scripts for Labels

Add the following scripts under each dataset connection:

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

// Terminated Count
sdk.setValue("label14", changedItem.attributes.data[0].total_count);

// Joinee Count
sdk.setValue("label15", changedItem.attributes.data[0].total_count);

// Average Salary
sdk.setValue("label16", changedItem.attributes.data[0].Average_Salary);

Step 9 – Configure Chart Filters

  1. Add Filter Box Conditions for datasets:

    • Hires Per Month

    • Yearly Distribution by Team

  2. Enable filtering by Team (using a parameter @team@) for real-time interactivity.

  3. Enable the checkbox for actions to apply filters dynamically in Preview Mode.

Step 10 – Final Preview and Publish

  1. Save the dashboard.

  2. Click Preview → interact with filters to validate real-time updates.

  3. Verify that:

    • Tabs switch views correctly.

    • Charts and KPIs update dynamically.

    • Filters apply without lag.

  4. Once verified, click Publish to deploy the dashboard to the Home Plugin.

Outcome

Next Steps

  • Connect this dashboard with the Business Story Plugin to integrate narratives.

  • Add advanced drill-through charts or AI-powered insights via BDB Data Agents.

  • Schedule data refreshes via Data Pipeline for continuous updates.

PreviousDashboard DesignerNextBuild a Real-Time Feedback Analysis Dashboard Using API Ingestion and WebSocket