Creating a real-time dashboard is a powerful way to visualize live data and enhance user experience. SolidJS is an excellent framework for building such dashboards due to its reactive and efficient architecture. In this tutorial, we will guide you through the process of building a real-time dashboard using SolidJS from scratch.

Prerequisites

  • Basic knowledge of JavaScript and HTML
  • Familiarity with Node.js and npm
  • Understanding of React or similar frameworks (helpful but not required)
  • Text editor (VS Code recommended)

Setting Up the Project

First, create a new directory for your project and initialize it with npm:

mkdir solidjs-dashboard
cd solidjs-dashboard
npm init -y

Install SolidJS and a development server:

npm install solid-js
npm install -D vite

Next, create an index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SolidJS Real-Time Dashboard</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/main.jsx"></script>
</body>
</html>

Create a main.jsx file to bootstrap the app:

import { render } from "solid-js/web";
import App from "./App.jsx";

render(() => <App />, document.getElementById("app"));

Building the Dashboard Component

Create App.jsx in the same directory:

import { createSignal, createEffect } from "solid-js";

function App() {
  const [data, setData] = createSignal([]);
  const [isConnected, setIsConnected] = createSignal(false);

  // Simulate real-time data updates
  createEffect(() => {
    const interval = setInterval(() => {
      const newPoint = {
        timestamp: new Date().toLocaleTimeString(),
        value: Math.floor(Math.random() * 100)
      };
      setData(prev => [...prev, newPoint]);
    }, 1000);

    return () => clearInterval(interval);
  });

  return (
    <div style={{ padding: "20px" }}>
      <h1>Real-Time Dashboard</h1>
      <div>
        <h2>Live Data</h2>
        <ul>
          {data().map(point => (
            <li key={point.timestamp}>
              {point.timestamp}: {point.value}
            </li>
          ))}</ul>
        </div>
      </div>
  );
}

export default App;

Enhancing the Dashboard

To make the dashboard more informative, add charts using a library like Chart.js or D3.js. For simplicity, we'll outline the steps for integrating Chart.js:

  • Install Chart.js: npm install chart.js
  • Create a ChartComponent.jsx that renders a line chart with the data
  • Embed the chart component into App.jsx

Here's a basic example of integrating Chart.js:

import { createSignal, onMount } from "solid-js";
import Chart from "chart.js/auto";

function ChartComponent({ data }) {
  let canvasRef;

  onMount(() => {
    const ctx = canvasRef.getContext("2d");
    new Chart(ctx, {
      type: "line",
      data: {
        labels: data().map(p => p.timestamp),
        datasets: [{
          label: "Value",
          data: data().map(p => p.value),
          fill: false,
          borderColor: "blue"
        }]
      },
      options: {
        responsive: true,
        animation: false
      }
    });
  });

  return <canvas ref={el => (canvasRef = el)} />;
}

export default ChartComponent;

In App.jsx, import and include ChartComponent:

import ChartComponent from "./ChartComponent.jsx";

// inside App component's return
<ChartComponent data={data} />

Running the Application

Start the development server with Vite:

npx vite

Open your browser at http://localhost:3000 to see your real-time dashboard in action. The data updates every second, and the chart reflects the latest values.

Conclusion

Building a real-time dashboard with SolidJS is straightforward and efficient. Its reactive system makes it easy to handle live data streams and update visualizations instantly. With additional features like filtering, multiple data sources, and advanced charts, you can create comprehensive dashboards tailored to your needs.