☰

彩色表格 | 表格数据可视化

通过渐变填充列来增强表格可读性。点击任何列可根据单元格值应用颜色渐变。

  1. // ==UserScript==
  2. // @name         Colorful Table | Table Data Visualizer
  3. // @name:zh-CN   彩色表格 | 表格数据可视化
  4. // @description  Enhance table readability with interactive gradient-filled columns. Click on any column to apply a color gradient based on cell values.
  5. // @description:zh-CN  通过渐变填充列来增强表格可读性。点击任何列可根据单元格值应用颜色渐变。
  6. // @namespace    http://tampermonkey.net/
  7. // @version      0.5
  8. // @author       Yearly
  9. // @match        *://*/*
  10. // @icon         data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAwIiBoZWlnaHQ9IjgwMCIgdmlld0JveD0iMCAwIDExIDExIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGZpbGw9IiM0NEMiIGQ9Ik0wIDBoNHYzSDB6Ii8+PHBhdGggZmlsbD0iIzRDNCIgZD0iTTAgNGg0djNIMHoiLz48cGF0aCBmaWxsPSIjQzQ0IiBkPSJNMCA4aDR2M0gweiIvPjxwYXRoIGZpbGw9IiM0Q0MiIGQ9Ik01IDBoMTF2M0g1eiIvPjxwYXRoIGZpbGw9IiNDQzQiIGQ9Ik01IDRoMTF2M0g1eiIvPjxwYXRoIGZpbGw9IiNDNEMiIGQ9Ik01IDhoMTF2M0g1eiIvPjwvc3ZnPg==
  11. // @grant        none
  12. // @license      GPL-3.0
  13. // ==/UserScript==
  14.  
  15. (function() {
  16.     'use strict';
  17.  
  18.     const DEBOUNCE_DELAY = 300;
  19.     const POLL_INTERVAL = 1000;
  20.     const HUE_RANGE = 120;
  21.     const SATURATION = '80%';
  22.     const LIGHTNESS = '88%';
  23.  
  24.     function extractFirstFloat(str) {
  25.         const match = str.match(/[-+]?\d*\.?\d+/);
  26.         return match ? parseFloat(match[0]) : NaN;
  27.     }
  28.  
  29.     function applyGradient(table, column) {
  30.         const values = Array.from(table.rows)
  31.             .map(row => row.cells[column])
  32.             .filter(cell => cell)
  33.             .map(cell => extractFirstFloat(cell.textContent || cell.innerText))
  34.             .filter(val => !isNaN(val));
  35.  
  36.         if (values.length === 0) return;
  37.  
  38.         const min = Math.min(...values);
  39.         const max = Math.max(...values);
  40.         if (min === max) return;
  41.  
  42.         const headerCell = table.rows[0]?.cells[column];
  43.         if (!headerCell) return;
  44.  
  45.         headerCell.gradient_fill_increase = !headerCell.gradient_fill_increase;
  46.         const isIncreasing = headerCell.gradient_fill_increase;
  47.  
  48.         Array.from(table.rows).forEach(row => {
  49.             const cell = row.cells[column];
  50.             if (!cell) return;
  51.  
  52.             const value = extractFirstFloat(cell.textContent || cell.innerText);
  53.             if (isNaN(value)) return;
  54.  
  55.             const hue = isIncreasing
  56.                 ? HUE_RANGE - ((value - min) / (max - min)) * HUE_RANGE
  57.                 : ((value - min) / (max - min)) * HUE_RANGE;
  58.  
  59.             cell.style.backgroundColor = `hsl(${hue}, ${SATURATION}, ${LIGHTNESS})`;
  60.         });
  61.     }
  62.  
  63.     function debounce(func, delay) {
  64.         let timeoutId;
  65.         return function(...args) {
  66.             clearTimeout(timeoutId);
  67.             timeoutId = setTimeout(() => func.apply(this, args), delay);
  68.         };
  69.     }
  70.  
  71.     function initializeTable(table) {
  72.         if (table.hasAttribute('data-gradient-initialized')) return;
  73.         table.setAttribute('data-gradient-initialized', 'true');
  74.  
  75.         table.addEventListener('click', debounce(event => {
  76.             const column = event.target.cellIndex;
  77.             if (column !== undefined) {
  78.                 applyGradient(table, column);
  79.             }
  80.         }, DEBOUNCE_DELAY));
  81.     }
  82.  
  83.     function initializeTables() {
  84.         document.querySelectorAll('table:not([data-gradient-initialized])').forEach(initializeTable);
  85.     }
  86.  
  87.     // Initial call and setup interval
  88.     initializeTables();
  89.     setInterval(initializeTables, POLL_INTERVAL);
  90. })();