Data-Driven Dashboard with interact.js and Chart.js

I'll create a beautiful, interactive dashboard with draggable widgets using interact.js and data visualizations with Chart.js, all built with HTML5 and CSS3.

Dashboard Features

This interactive dashboard includes:

1. Draggable and Resizable Widgets - Using interact.js, you can:

   • Drag any chart widget to reposition it
   • Resize widgets from any edge or corner
   • Widgets have inertia for smooth movement

2. Data Visualizations - Using Recharts (Chart.js alternative for React):

   • Bar chart for sales overview
   • Line chart for website traffic trends
   • Pie chart for revenue by channel
   • Donut chart for user device breakdown

3. Responsive Design:

   • Adapts to different screen sizes
   • Card layout changes from 4 columns to 2 to 1 based on viewport
   • Charts resize automatically

4. Modern UI Elements:

   • Clean card-based design
   • Stat cards with icons and trend indicators
   • Subtle animations and hover effects

How It Works

The dashboard uses interact.js to enable drag-and-drop functionality. Each chart is wrapped in a DraggableWidget component that:

1. Uses interact.js to make elements draggable and resizable
2. Maintains position state with data attributes
3. Applies transform styles for smooth movement
4. Restricts movement to parent container

The charts are built with Recharts, which provides responsive, interactive data visualizations that automatically resize with their containers.

You can customize the data in the charts.tsx file to connect to your own data sources or APIs.

I'll create a beautiful dashboard using only HTML5, CSS3, vanilla JavaScript with interact.js and Chart.js as requested. This will work well with your Thymeleaf and Java backend.

I found some issues in the code block.

• The interact variable is undeclared.

I will fix them.

This dashboard includes:

1. Responsive Layout:

   • Collapsible sidebar with navigation
   • Responsive grid for stats and charts
   • Mobile-friendly design

2. Interactive Elements with interact.js:

   • Draggable widgets (stat cards and chart containers)
   • Resizable chart containers
   • Drag handles on each widget

3. Data Visualization with Chart.js:

   • Line chart for sales trends
   • Doughnut chart for traffic sources
   • Bar chart for user demographics
   • Custom product performance section with progress bars

4. Modern UI Features:

   • Clean, professional design
   • Card-based layout
   • Subtle animations and transitions
   • Consistent color scheme

5. Pure HTML/CSS/JS Implementation:

   • No frameworks or libraries besides interact.js and Chart.js
   • Compatible with Thymeleaf templating
   • Easy to integrate with your Java backend

You can easily modify the data in the JavaScript file to connect with your backend data sources. The dashboard widgets can be dragged and rearranged by users, and the charts will automatically resize when their containers are resized.