Show Number of Days instead of dots in Jira tickets

Replace Jira "Days in Column" dots with exact numbers

您需要先安裝使用者腳本管理器擴展,如 TampermonkeyGreasemonkeyViolentmonkey 之後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyUserscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展,比如 Tampermonkey,才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

(我已經安裝了使用者腳本管理器,讓我安裝!)

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

(我已經安裝了使用者樣式管理器,讓我安裝!)

// ==UserScript==
// @name         Show Number of Days instead of dots in Jira tickets
// @namespace    http://anthonywong.net/
// @version      1.0
// @description  Replace Jira "Days in Column" dots with exact numbers
// @author       You
// @match        https://*.atlassian.net/*
// @grant        none
// @author       Anthony Wong <[email protected]>
// @license      GPLv2
// ==/UserScript==

(function() {
    'use strict';

    // Debounce function to limit how often updateDaysInColumn runs
    function debounce(func, wait) {
        let timeout;
        return function(...args) {
            clearTimeout(timeout);
            timeout = setTimeout(() => func.apply(this, args), wait);
        };
    }

    // Function to replace dots with numbers followed by 'd'
    function updateDaysInColumn() {
        // Target tooltips with "days in this column" in aria-label
        const tooltipElements = document.querySelectorAll('div[role="tooltip"][aria-label*="days in this column"]:not(.processed)');

        if (tooltipElements.length === 0) {
            console.log('No new "Days in Column" tooltips found.');
            return;
        }

        tooltipElements.forEach(tooltip => {
            // Extract the number from aria-label
            const ariaLabel = tooltip.getAttribute('aria-label');
            const daysMatch = ariaLabel.match(/(\d+)/);
            if (daysMatch) {
                const days = daysMatch[0];
                console.log(`Found tooltip with ${days} days:`, tooltip);

                // Replace dots with number followed by 'd' and mark as processed
                tooltip.innerHTML = `<span style="font-size: 12px; color: #172B4D; font-weight: bold;">${days}d</span>`;
                tooltip.classList.add('processed'); // Prevent re-processing
            } else {
                console.log('No number found in aria-label:', ariaLabel);
            }
        });

        console.log(`Processed ${tooltipElements.length} new "Days in Column" tooltips.`);
    }

    // Debounced version of the update function
    const debouncedUpdate = debounce(updateDaysInColumn, 500);

    // Initial run after delay to allow React to render
    setTimeout(() => {
        updateDaysInColumn(); // Run once immediately
    }, 2000);

    // Observe DOM changes with debouncing
    const observer = new MutationObserver(debouncedUpdate);

    const targetNode = document.body;
    if (targetNode) {
        observer.observe(targetNode, { childList: true, subtree: true });
    }

    // Cleanup on page unload
    window.addEventListener('unload', () => {
        observer.disconnect();
    });
})();