Create initial HTML file with styles

[Sazwan1996]

Add HTML structure and styles for the application.tambahkan data semuanya,sync_portfolio.pyrequest.url.pathws.onmessagews.onmessagegoogle.cloudbigquery_client.pyledger_doc.existsredis.asynciofastapi.middleware.corsmain.pysgae.identityNext.jsqualityReport.innerHTMLstatsContainer.innerHTMLpageInfo.textContentfilteredData.lengthfilteredRowsLabel.textContentfullData.lengthtotalRowsLabel.textContenttableBody.innerHTMLtableHeader.innerHTMLparsed.lengthrowCountDisplay.textContentfileNameDisplay.textContentreader.onloadfileInfo.style.displayuploadPrompt.style.displayfileInput.valueuploadArea.style.borderColorobj.fileNameobj.data.lengthdarkToggle.innerHTMLChart.js

<title>⚡ Data Dashboard Power</title> <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.4.1/papaparse.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script> <style> :root { --bg-body: #f4f6f9; --bg-card: #ffffff; --text-color: #212529; --border-color: #dee2e6; --shadow: 0 8px 24px rgba(0,0,0,0.08); } [data-theme="dark"] { --bg-body: #1a1d23; --bg-card: #2c3038; --text-color: #e9ecef; --border-color: #495057; --shadow: 0 8px 24px rgba(0,0,0,0.4); } body { background-color: var(--bg-body); color: var(--text-color); transition: background 0.3s, color 0.3s; padding: 1.5rem; } .card { background-color: var(--bg-card); border: 1px solid var(--border-color); box-shadow: var(--shadow); transition: background 0.3s, border 0.3s; border-radius: 16px; } .table { color: var(--text-color); font-size: 0.85rem; } .table th { background: #0d6efd; color: white; position: sticky; top: 0; z-index: 10; white-space: nowrap; } .table td { vertical-align: middle; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .table td .cell-full { display: none; white-space: normal; word-break: break-all; } .table td:hover .cell-full { display: block; } .table td:hover .cell-preview { display: none; } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.5rem; } .stats-item { background: var(--bg-body); padding: 0.5rem 0.75rem; border-radius: 8px; border-left: 4px solid #0d6efd; } .chart-container { position: relative; height: 250px; width: 100%; } .btn-icon { margin-right: 4px; } #uploadArea { border: 2px dashed var(--border-color); border-radius: 16px; padding: 2.5rem; text-align: center; cursor: pointer; transition: 0.3s; } #uploadArea:hover { background: rgba(13, 110, 253, 0.05); border-color: #0d6efd; } .dark-toggle { cursor: pointer; font-size: 1.5rem; } .badge-count { background: #0d6efd; color: white; padding: 0.25rem 0.75rem; border-radius: 20px; } @media (max-width: 768px) { body { padding: 0.5rem; } .table-wrapper { overflow-x: auto; } } </style>

Data Dashboard Power

Muat naik, analisis, eksport — semua dalam satu HTML

Reset

<!-- Upload Area -->
<div class="card p-4 mb-4" id="uploadArea">
    <div id="uploadPrompt">
        <i class="fas fa-cloud-upload-alt fa-3x text-primary mb-2"></i>
        <h5>Drag & drop atau klik untuk muat naik</h5>
        <p class="text-muted small">Sokongan: CSV, JSON (maks 5MB)</p>
        <input type="file" id="fileInput" accept=".csv,.json" style="display:none;">
    </div>
    <div id="fileInfo" style="display:none;">
        <i class="fas fa-file-alt fa-2x text-success me-2"></i>
        <span id="fileNameDisplay" class="fw-bold"></span>
        <span class="badge bg-secondary ms-2" id="rowCountDisplay">0 baris</span>
        <button class="btn btn-sm btn-outline-secondary ms-3" id="changeFileBtn"><i class="fas fa-exchange-alt"></i> Tukar fail</button>
    </div>
</div>

<!-- Stats & Quality Row -->
<div class="row g-4 mb-4">
    <div class="col-md-8">
        <div class="card p-3">
            <h6><i class="fas fa-chart-simple text-primary"></i> Ringkasan Lajur</h6>
            <div id="statsContainer" class="stats-grid"></div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card p-3">
            <h6><i class="fas fa-clipboard-check text-success"></i> Laporan Kualiti</h6>
            <div id="qualityReport">
                <p class="text-muted">Tiada data.</p>
            </div>
        </div>
    </div>
</div>

<!-- Charts -->
<div class="card p-3 mb-4">
    <h6><i class="fas fa-chart-bar text-info"></i> Visualisasi Automatik</h6>
    <div class="row g-3" id="chartContainer">
        <div class="col-md-6"><canvas id="chart1"></canvas></div>
        <div class="col-md-6"><canvas id="chart2"></canvas></div>
    </div>
</div>

<!-- Table Controls -->
<div class="d-flex flex-wrap justify-content-between align-items-center mb-3 gap-2">
    <div>
        <span class="badge bg-primary rounded-pill me-2" id="totalRowsLabel">0 baris</span>
        <span class="badge bg-secondary rounded-pill" id="filteredRowsLabel">0 ditapis</span>
    </div>
    <div class="d-flex flex-wrap gap-2">
        <input type="text" class="form-control form-control-sm" id="globalSearch" placeholder="Cari semua..." style="width:180px;">
        <button class="btn btn-sm btn-success" id="exportCsvBtn"><i class="fas fa-file-csv"></i> CSV</button>
        <button class="btn btn-sm btn-warning" id="exportExcelBtn"><i class="fas fa-file-excel"></i> Excel</button>
        <button class="btn btn-sm btn-info text-white" id="exportHtmlBtn"><i class="fas fa-code"></i> HTML</button>
    </div>
</div>

<!-- Table -->
<div class="card p-0 overflow-hidden">
    <div class="table-wrapper" style="max-height:500px; overflow-y:auto;">
        <table class="table table-hover table-striped mb-0" id="dataTable">
            <thead>
                <tr id="tableHeader"></tr>
            </thead>
            <tbody id="tableBody"></tbody>
        </table>
    </div>
    <!-- Pagination -->
    <div class="d-flex justify-content-between align-items-center p-3 border-top">
        <span id="pageInfo" class="small">Halaman 1 / 1</span>
        <div>
            <button class="btn btn-outline-primary btn-sm" id="prevPage"><i class="fas fa-chevron-left"></i></button>
            <button class="btn btn-outline-primary btn-sm" id="nextPage"><i class="fas fa-chevron-right"></i></button>
        </div>
    </div>
</div>

<div class="mt-4 text-center text-muted small">
    <i class="fas fa-database"></i> Data disimpan secara automatik di localStorage pelayar anda.
</div>

<script> // ============================================================ // STATE // ============================================================ let fullData = []; let filteredData = []; let columns = []; let currentPage = 1; const rowsPerPage = 10; let sortCol = null; let sortAsc = true; let columnFilters = {}; // { colName: searchString } let chartInstances = { chart1: null, chart2: null }; let currentFileName = ''; const STORAGE_KEY = 'power_dashboard_data'; // ============================================================ // DOM REFS // ============================================================ const fileInput = document.getElementById('fileInput'); const uploadArea = document.getElementById('uploadArea'); const uploadPrompt = document.getElementById('uploadPrompt'); const fileInfo = document.getElementById('fileInfo'); const fileNameDisplay = document.getElementById('fileNameDisplay'); const rowCountDisplay = document.getElementById('rowCountDisplay'); const changeFileBtn = document.getElementById('changeFileBtn'); const tableHeader = document.getElementById('tableHeader'); const tableBody = document.getElementById('tableBody'); const statsContainer = document.getElementById('statsContainer'); const qualityReport = document.getElementById('qualityReport'); const totalRowsLabel = document.getElementById('totalRowsLabel'); const filteredRowsLabel = document.getElementById('filteredRowsLabel'); const pageInfo = document.getElementById('pageInfo'); const prevPage = document.getElementById('prevPage'); const nextPage = document.getElementById('nextPage'); const globalSearch = document.getElementById('globalSearch'); const clearStorageBtn = document.getElementById('clearStorageBtn'); const darkToggle = document.getElementById('darkToggle'); const exportCsvBtn = document.getElementById('exportCsvBtn'); const exportExcelBtn = document.getElementById('exportExcelBtn'); const exportHtmlBtn = document.getElementById('exportHtmlBtn'); // ============================================================ // DARK MODE // ============================================================ let darkMode = localStorage.getItem('power_dashboard_dark') === 'true'; if (darkMode) document.documentElement.setAttribute('data-theme', 'dark'); darkToggle.innerHTML = darkMode ? '' : ''; darkToggle.addEventListener('click', () => { darkMode = !darkMode; localStorage.setItem('power_dashboard_dark', darkMode); document.documentElement.setAttribute('data-theme', darkMode ? 'dark' : ''); darkToggle.innerHTML = darkMode ? '' : ''; }); // ============================================================ // LOCAL STORAGE // ============================================================ function saveToStorage() { if (fullData.length > 0) { localStorage.setItem(STORAGE_KEY, JSON.stringify({ data: fullData, fileName: currentFileName })); } } function loadFromStorage() { const raw = localStorage.getItem(STORAGE_KEY); if (raw) { try { const obj = JSON.parse(raw); if (obj.data && obj.data.length > 0) { fullData = obj.data; currentFileName = obj.fileName || 'Disimpan'; return true; } } catch(e) {} } return false; } // ============================================================ // UPLOAD // ============================================================ uploadArea.addEventListener('click', () => fileInput.click()); uploadArea.addEventListener('dragover', (e) => { e.preventDefault(); uploadArea.style.borderColor = '#0d6efd'; }); uploadArea.addEventListener('dragleave', () => { uploadArea.style.borderColor = 'var(--border-color)'; }); uploadArea.addEventListener('drop', (e) => { e.preventDefault(); uploadArea.style.borderColor = 'var(--border-color)'; if (e.dataTransfer.files.length) handleFile(e.dataTransfer.files[0]); }); fileInput.addEventListener('change', (e) => { if (e.target.files.length) handleFile(e.target.files[0]); fileInput.value = ''; }); changeFileBtn.addEventListener('click', () => { fullData = []; filteredData = []; columns = []; currentFileName = ''; localStorage.removeItem(STORAGE_KEY); renderAll(); uploadPrompt.style.display = 'block'; fileInfo.style.display = 'none'; }); function handleFile(file) { const ext = file.name.split('.').pop().toLowerCase(); currentFileName = file.name; const reader = new FileReader(); reader.onload = (e) => { let parsed = []; if (ext === 'csv') { const result = Papa.parse(e.target.result, { header: true, dynamicTyping: true, skipEmptyLines: true }); if (result.errors.length > 0) { alert('Ralat CSV: ' + result.errors[0].message); return; } parsed = result.data; } else if (ext === 'json') { try { parsed = JSON.parse(e.target.result); } catch(err) { alert('JSON tidak sah: ' + err.message); return; } if (!Array.isArray(parsed)) { alert('JSON mestilah array objek.'); return; } } else { alert('Sila muat naik CSV atau JSON.'); return; } if (parsed.length === 0) { alert('Fail kosong.'); return; } fullData = parsed; saveToStorage(); renderAll(); uploadPrompt.style.display = 'none'; fileInfo.style.display = 'block'; fileNameDisplay.textContent = file.name; rowCountDisplay.textContent = parsed.length + ' baris'; }; reader.readAsText(file); } // ============================================================ // FILTER, SORT, PAGINATE // ============================================================ function processData() { let data = [...fullData]; if (data.length === 0) { filteredData = []; columns = []; return; } columns = Object.keys(data[0]); // Global search const global = globalSearch.value.toLowerCase().trim(); if (global) { data = data.filter(row => { return columns.some(col => { const val = row[col]; if (val === null || val === undefined) return false; return String(val).toLowerCase().includes(global); }); }); } // Column filters for (const [col, search] of Object.entries(columnFilters)) { if (search && search.trim() !== '') { const term = search.trim().toLowerCase(); data = data.filter(row => { const val = row[col]; if (val === null || val === undefined) return false; return String(val).toLowerCase().includes(term); }); } } // Sort if (sortCol) { data.sort((a, b) => { const va = a[sortCol] ?? ''; const vb = b[sortCol] ?? ''; if (typeof va === 'number' && typeof vb === 'number') { return sortAsc ? va - vb : vb - va; } const sa = String(va).toLowerCase(); const sb = String(vb).toLowerCase(); return sortAsc ? sa.localeCompare(sb) : sb.localeCompare(sa); }); } filteredData = data; } function getPaginatedData() { const start = (currentPage - 1) * rowsPerPage; return filteredData.slice(start, start + rowsPerPage); } function totalPages() { return Math.ceil(filteredData.length / rowsPerPage) || 1; } // ============================================================ // RENDER TABLE // ============================================================ function renderTable() { if (fullData.length === 0) { tableHeader.innerHTML = ''; tableBody.innerHTML = 'Tiada data. Muat naik fail CSV/JSON.'; return; } // Header with sort let headerHtml = ''; for (const col of columns) { let sortIcon = ''; if (sortCol === col) sortIcon = sortAsc ? ' ▲' : ' ▼'; headerHtml += `${col}${sortIcon}`; } headerHtml += ''; tableHeader.innerHTML = headerHtml; // Click sort tableHeader.querySelectorAll('th').forEach(th => { th.addEventListener('click', () => { const col = th.dataset.col; if (sortCol === col) sortAsc = !sortAsc; else { sortCol = col; sortAsc = true; } currentPage = 1; renderAll(); }); }); // Body const paginated = getPaginatedData(); if (paginated.length === 0) { tableBody.innerHTML = 'Tiada rekod sepadan.'; return; } let bodyHtml = ''; for (const row of paginated) { bodyHtml += ''; for (const col of columns) { let val = row[col]; if (val === null || val === undefined) val = ''; const display = String(val); bodyHtml += ` ${display.length > 30 ? display.substring(0,30)+'…' : display} ${display} `; } bodyHtml += ''; } tableBody.innerHTML = bodyHtml; // Update labels totalRowsLabel.textContent = fullData.length + ' baris'; filteredRowsLabel.textContent = filteredData.length + ' ditapis'; const tp = totalPages(); pageInfo.textContent = `Halaman ${currentPage} / ${tp}`; } // ============================================================ // RENDER STATS & QUALITY // ============================================================ function renderStats() { if (fullData.length === 0) { statsContainer.innerHTML = 'Tiada data.'; qualityReport.innerHTML = '

Tiada data.

'; return; } const

[microsoft-github-policy-service]

@Sazwan1996 please read the following Contributor License Agreement(CLA). If you agree with the CLA, please reply with the following information.

@microsoft-github-policy-service agree [company="{your company}"]

Options:

• (default - no company specified) I have sole ownership of intellectual property rights to my Submissions and I am not making Submissions in the course of work for my employer.

@microsoft-github-policy-service agree

• (when company given) I am making Submissions in the course of work for my employer (or my employer has intellectual property rights in my Submissions by contract or applicable law). I have permission from my employer to make Submissions and enter into this Agreement on behalf of my employer. By signing below, the defined term “You” includes me and my employer.

@microsoft-github-policy-service agree company="Microsoft"

Contributor License Agreement

Contribution License Agreement

This Contribution License Agreement (“Agreement”) is agreed to by the party signing below (“You”),
and conveys certain license rights to Microsoft Corporation and its affiliates (“Microsoft”) for Your
contributions to Microsoft open source projects. This Agreement is effective as of the latest signature
date below.

1. Definitions.
   “Code” means the computer software code, whether in human-readable or machine-executable form,
   that is delivered by You to Microsoft under this Agreement.
   “Project” means any of the projects owned or managed by Microsoft and offered under a license
   approved by the Open Source Initiative (www.opensource.org).
   “Submit” is the act of uploading, submitting, transmitting, or distributing code or other content to any
   Project, including but not limited to communication on electronic mailing lists, source code control
   systems, and issue tracking systems that are managed by, or on behalf of, the Project for the purpose of
   discussing and improving that Project, but excluding communication that is conspicuously marked or
   otherwise designated in writing by You as “Not a Submission.”
   “Submission” means the Code and any other copyrightable material Submitted by You, including any
   associated comments and documentation.
2. Your Submission. You must agree to the terms of this Agreement before making a Submission to any
   Project. This Agreement covers any and all Submissions that You, now or in the future (except as
   described in Section 4 below), Submit to any Project.
3. Originality of Work. You represent that each of Your Submissions is entirely Your original work.
   Should You wish to Submit materials that are not Your original work, You may Submit them separately
   to the Project if You (a) retain all copyright and license information that was in the materials as You
   received them, (b) in the description accompanying Your Submission, include the phrase “Submission
   containing materials of a third party:” followed by the names of the third party and any licenses or other
   restrictions of which You are aware, and (c) follow any other instructions in the Project’s written
   guidelines concerning Submissions.
4. Your Employer. References to “employer” in this Agreement include Your employer or anyone else
   for whom You are acting in making Your Submission, e.g. as a contractor, vendor, or agent. If Your
   Submission is made in the course of Your work for an employer or Your employer has intellectual
   property rights in Your Submission by contract or applicable law, You must secure permission from Your
   employer to make the Submission before signing this Agreement. In that case, the term “You” in this
   Agreement will refer to You and the employer collectively. If You change employers in the future and
   desire to Submit additional Submissions for the new employer, then You agree to sign a new Agreement
   and secure permission from the new employer before Submitting those Submissions.
5. Licenses.

• Copyright License. You grant Microsoft, and those who receive the Submission directly or
  indirectly from Microsoft, a perpetual, worldwide, non-exclusive, royalty-free, irrevocable license in the
  Submission to reproduce, prepare derivative works of, publicly display, publicly perform, and distribute
  the Submission and such derivative works, and to sublicense any or all of the foregoing rights to third
  parties.
• Patent License. You grant Microsoft, and those who receive the Submission directly or
  indirectly from Microsoft, a perpetual, worldwide, non-exclusive, royalty-free, irrevocable license under
  Your patent claims that are necessarily infringed by the Submission or the combination of the
  Submission with the Project to which it was Submitted to make, have made, use, offer to sell, sell and
  import or otherwise dispose of the Submission alone or with the Project.
• Other Rights Reserved. Each party reserves all rights not expressly granted in this Agreement.
  No additional licenses or rights whatsoever (including, without limitation, any implied licenses) are
  granted by implication, exhaustion, estoppel or otherwise.

6. Representations and Warranties. You represent that You are legally entitled to grant the above
   licenses. You represent that each of Your Submissions is entirely Your original work (except as You may
   have disclosed under Section 3). You represent that You have secured permission from Your employer to
   make the Submission in cases where Your Submission is made in the course of Your work for Your
   employer or Your employer has intellectual property rights in Your Submission by contract or applicable
   law. If You are signing this Agreement on behalf of Your employer, You represent and warrant that You
   have the necessary authority to bind the listed employer to the obligations contained in this Agreement.
   You are not expected to provide support for Your Submission, unless You choose to do so. UNLESS
   REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING, AND EXCEPT FOR THE WARRANTIES
   EXPRESSLY STATED IN SECTIONS 3, 4, AND 6, THE SUBMISSION PROVIDED UNDER THIS AGREEMENT IS
   PROVIDED WITHOUT WARRANTY OF ANY KIND, INCLUDING, BUT NOT LIMITED TO, ANY WARRANTY OF
   NONINFRINGEMENT, MERCHANTABILITY, OR FITNESS FOR A PARTICULAR PURPOSE.
7. Notice to Microsoft. You agree to notify Microsoft in writing of any facts or circumstances of which
   You later become aware that would make Your representations in this Agreement inaccurate in any
   respect.
8. Information about Submissions. You agree that contributions to Projects and information about
   contributions may be maintained indefinitely and disclosed publicly, including Your name and other
   information that You submit with Your Submission.
9. Governing Law/Jurisdiction. This Agreement is governed by the laws of the State of Washington, and
   the parties consent to exclusive jurisdiction and venue in the federal courts sitting in King County,
   Washington, unless no federal subject matter jurisdiction exists, in which case the parties consent to
   exclusive jurisdiction and venue in the Superior Court of King County, Washington. The parties waive all
   defenses of lack of personal jurisdiction and forum non-conveniens.
10. Entire Agreement/Assignment. This Agreement is the entire agreement between the parties, and
    supersedes any and all prior agreements, understandings or communications, written or oral, between
    the parties relating to the subject matter hereof. This Agreement may be assigned by Microsoft.