evolutionColor

evolutionColor : Javascript Version. Script développé par Bladepianist (Bright RYMER) et permettant de mettre en couleur différente phase d'un tableau. Les pourcentages jouent aussi le role d'indicateurs d'avancement. Ainsi, sur une ligne, la colonne avec le plus gros pourcentage aura la couleur opaque, et inversement. S'intègre facilement avec ou sans Bootstrap.

by Bright RYMER

HTML

<table class="table table-bordered table-responsive table-striped table-condensed" rules="all" id="MainContent_gvFluxPhaseSIC" style="border-collapse:collapse;" border="1" cellspacing="0">
    <tbody>
        <tr>
            <th scope="col">Nature</th>
            <th scope="col">Phase 0</th>
            <th scope="col">Phase 10</th>
            <th scope="col">Phase 60</th>
            <th scope="col">Phase 70</th>
            <th scope="col">Phase 90</th>
            <th scope="col">Total</th>
        </tr>
        <tr>
            <td>BT</td>
            <td>1 <strong>(7,69%)</strong>

            </td>
            <td>0 <strong>(0%)</strong>

            </td>
            <td>0 <strong>(0%)</strong>

            </td>
            <td>12 <strong>(92,31%)</strong>

            </td>
            <td>0 <strong>(0%)</strong>

            </td>
            <td>13</td>
        </tr>
        <tr>
            <td>GA</td>
            <td>4 <strong>(0,48%)</strong>

            </td>
            <td>0 <strong>(0%)</strong>

            </td>
            <td>0 <strong>(0%)</strong>

            </td>
            <td>829 <strong>(99,52%)</strong>

            </td>
            <td>0 <strong>(0%)</strong>

            </td>
            <td>833</td>
        </tr>
        <tr>
            <td>LQ</td>
            <td>436 <strong>(78,56%)</strong>

            </td>
            <td>91 <strong>(16,4%)</strong>

            </td>
            <td>0 <strong>(0%)</strong>

            </td>
            <td>28 <strong>(5,05%)</strong>

            </td>
            <td>0 <strong>(0%)</strong>

            </td>
            <td>555</td>
        </tr>
        <tr>
            <td>CC</td>
            <td>0 <strong>(0%)</strong>

            </td>
            <td>0 <strong>(0%)</strong>

            </td>
            <td>0 <strong>(0%)</strong>

            </td>
            <td>2 <strong>(100%)</strong>

            </td>
            <td>0 <strong>(0%)</strong>

            </td>
    ...

JavaScript

if (typeof jQuery === 'undefined') { throw new Error('evolutionColor\'s JavaScript requires jQuery') }

function hexToRgb(hex) { // By Tim Down - Stack Overflow

    if (hex === null) { // Add by Bladepianist. Useful when looping on this and "hex" being not fed up sometimes.

        hex = "#fff";
    }
    // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
    var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
    hex = hex.replace(shorthandRegex, function (m, r, g, b) {
        return r + r + g + g + b + b;
    });

    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
    } : null;
}

$.fn.evolutionColor = function (options) {
    // parameters est un objet littéral

    var defauts = { // Définition paramètres par défaut
        "balise": "em",
        "color": ["#F00", "#FF6200", "#FFC400", "#D4FF00", "#37FF00"],
        "callback": null
    };

    // On fusionne paramètres par défaut et paramètres saisis
    var params = $.extend(defauts, options);
    
    var seuil = 5 / 100;

    return this.each(function () {

        var element = $(this); // Sauvegarde de notre élement

        $(this).find("tr").slice(1).each(function () { // A améliorer en offset variable
            $(this).find(params.balise).parent().each(function (j) {

                var couleur = params.color[j];
                var alpha = $(this).find("strong").text().replace(",", ".").replace("(", "").replace(")", "").replace("%", "");
                alpha = parseFloat(alpha).toFixed(4) / 100;

                if(alpha > seuil && alpha != 0) {
                    couleur = "rgba(" + hexToRgb(couleur).r + "," + hexToRgb(couleur).g + "," + hexToRgb(couleur).b + "," + alpha + ")";
                    $(this).css("background-color", couleur);
                }
            });
        });

        if (params.callback) {
      ...