Upload CSV data and interactively build a dashboard with multiple linked charts (bar, line, pie, scatter).
Act as an expert web developer specializing in creating fully standalone, single-file web applications with zero external dependencies or setup (beyond CDN libraries). Your task is to create the complete HTML, CSS3 (inline `<style>`), and modern ES6 JavaScript (inline `<script>`) code for the following application, delivered as a single, self-contained HTML file: **App Title:** Live CSV Dashboard Builder **Main Purpose:** Upload CSV data and interactively build a dashboard with multiple linked charts (bar, line, pie, scatter). **Key Features to Implement:** * CSV upload (PapaParse) * Column selection for axes/values * Chart type selection per panel * Dynamic filtering controls (sliders, dropdowns) * Dashboard layout persistence (LocalStorage) * Chart image export * Glassmorphism UI panels * Ability to handle user input via interactive controls (sliders, forms, buttons, drag-drop, etc., as appropriate). * Dynamic updates to the UI based on user actions or internal state changes. * Client-side data processing and logic as required by the features. * Data persistence using LocalStorage where appropriate (e.g., saving user settings, data, or state). * File input using FileReader API if data import (like CSV) is explicitly mentioned or implied. * File output/download using Blobs if data/image/file export is explicitly mentioned or implied. **Primary Libraries to Use (via Zero-Config CDN):** * Chart.js (use latest zero-config CDN link) * PapaParse (use latest zero-config CDN link) * Ensure all external libraries are loaded via reliable, versioned CDN links (e.g., from cdnjs, jsdelivr, unpkg). **Technical & Style Requirements:** * **Single File:** All HTML, CSS, and JavaScript MUST be contained within a single `.html` file. CSS must be within `<style>` tags in the `<head>`, and JavaScript within `<script>` tags near the end of the `<body>`. Use ES6 modules within the script tag if it helps organize complex code. * **Zero Setup:** The app must run directly when the HTML file is opened in a modern browser (Chrome, Firefox, Edge). No build steps, installations, or API keys allowed. * **Modern Code:** Use HTML5 semantic elements, modern CSS3 features (Flexbox/Grid for layout), and ES6+ JavaScript syntax (const/let, arrow functions, classes, async/await where appropriate). * **Visual Polish:** Implement a clean, modern, and responsive UI. Incorporate CSS3 Glassmorphism effects (subtle background blur and transparency on relevant containers, panels, or modals) for a contemporary aesthetic. Ensure good readability, contrast, and usability across different screen sizes. * **Complexity & Interactivity:** The implementation should match the complexity implied by the features, comparable to an advanced interactive tool or dashboard. Ensure the app feels responsive and interactive. * **Error Handling:** Include basic client-side error handling (e.g., for file parsing issues, invalid user input, potential API errors if using browser APIs). * **Comments:** Add comments to explain key sections and complex logic within the JavaScript code. Generate the complete HTML file content starting with `<!DOCTYPE html>` and ending with `</html>`. Ensure the code is well-formatted and functional.
Develop a modern sidebar dashboard interface using HTML, CSS, and JavaScript, focusing on user experience and responsive design.
Create a modern, sophisticated HTML monitoring dashboard for Linux Ubuntu with React, featuring real-time disk IO throughput graphs and customizable refresh rates.
