<commit_before><link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../object-translate/object-translate.html">
<dom-module id="yotilo-statistics">
    <template>
        <style>
        :host {
            display: block;
            max-width:128rem;
            margin:0 auto;
            border:var(--color-border) 1px solid;
            font-size:14px;
            line-height:2rem;
            padding:2rem;
            box-sizing: border-box;
            margin:0 auto 6rem auto;
            border-radius: 4px;
        }

        #ratio {
            height:8rem;
        }

        #ratio > div {
            float:left;
        }



        #ratio > div span {
            display:block;
            height:4rem;
            background:#333;
            color:#FFF;
            font-size:12px;
            font-weight:700;
            line-height: 4rem;
            padding:0 1rem;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-font-smoothing:antialiased;
            white-space: nowrap
        }

        #ratio > div:first-of-type span {
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
        }

        #ratio > div:last-of-type span {
            border-top-right-radius: 4px;
            border-bottom-right-radius: 4px;
        }

        #ratio > div:nth-child(1) span { background:#B35947; }
        #ratio > div:nth-child(2) span { background:#68B359; }
        #ratio > div:nth-child(3) span { background:#477DB3; }
        #ratio > div:nth-child(4) span { background:#B359A4; }
        #ratio > div:nth-child(5) span { background:#B37D47; }
        #ratio > div:nth-child(6) span { background:#47B359; }
        #ratio > div:nth-child(7) span { background:#4759B3; }
        #ratio > div:nth-child(8) span { background:#B3477D; }
        #ratio > div:nth-child(9) span { background:#B3A147; }
        #ratio > div:nth-child(10) span { background:#47B37D; }
        #ratio > div:nth-child(11) span { background:#5947B3; }
        #ratio > div:nth-child(12) span { background:#B34759; }
        #ratio > div:nth-child(13) span { background:#A1B347; }
        #ratio > div:nth-child(14) span { background:#47B3A1; }
        #ratio > div:nth-child(14) span { background:#7D47B3; }
        #ratio > div:nth-child(14) span { background:#7DB347; }
        #ratio > div:nth-child(14) span { background:#47A1B3; }
        #ratio > div:nth-child(14) span { background:#A147B3; }



        #ratio > div p {
            padding:0;
            margin:0;
            font-size:12px;
            line-height:4rem;
            max-width:100%;
            overflow: hidden;
            text-overflow: ellipsis;
            color:#333;
            white-space: nowrap
        }

        #ratio > div:nth-child(1) p { color:#B35947; }
        #ratio > div:nth-child(2) p { color:#68B359; }
        #ratio > div:nth-child(3) p { color:#477DB3; }
        #ratio > div:nth-child(4) p { color:#B359A4; }
        #ratio > div:nth-child(5) p { color:#B37D47; }
        #ratio > div:nth-child(6) p { color:#47B359; }
        #ratio > div:nth-child(7) p { color:#4759B3; }
        #ratio > div:nth-child(8) p { color:#B3477D; }
        #ratio > div:nth-child(9) p { color:#B3A147; }
        #ratio > div:nth-child(10) p { color:#47B37D; }
        #ratio > div:nth-child(11) p { color:#5947B3; }
        #ratio > div:nth-child(12) p { color:#B34759; }
        #ratio > div:nth-child(13) p { color:#A1B347; }
        #ratio > div:nth-child(14) p { color:#47B3A1; }
        #ratio > div:nth-child(14) p { color:#7D47B3; }
        #ratio > div:nth-child(14) p { color:#7DB347; }
        #ratio > div:nth-child(14) p { color:#47A1B3; }
        #ratio > div:nth-child(14) p { color:#A147B3; }



        #total {
            text-align: center;
            margin:3rem 0 0 0;
            padding:2rem 0 0 0;
            border-top:var(--color-border) 1px solid;
            font-weight:700;
            font-size:16px;
            line-height:2rem;
        }

        </style>

        <object-translate data="[[ projectsTotals ]]" output="{{ projectsTotalsArray }}"></object-translate>

        <div id="ratio">
            <template is="dom-repeat" items="[[projectsTotalsArray]]">
                <div style$="width:[[_calculateWidth(item, total)]]%">
                    <span>[[_displayTotal(item.total)]]</span>
                    <p>[[_displayProject(item.id, projects, projects.*)]]</p>
                </div>
            </template>
        </div>

        <div id="total">
            [[_displayTotal(total)]] total
        </div>
      
    </template>
    <script>
    Polymer({
        is: 'yotilo-statistics',

        properties: {
            total: {
                type: Number,
                value: 0
            },
            totalsProjects: {
                type: Object,
                value: function() {
                    return {};
                }
            },
            totalsTasks: {
                type: Object,
                value: function() {
                    return {};
                }
            },
            daysTotal: {
                type: Object,
                value: function(){
                    return {};
                }
            }
        },

        observers: [
            '_calculateTotal(daysTotal, daysTotal.*)'
        ],

        ready: function() {

            this.listen(document.body, 'set-durations', '_setDurations');
        },

        _displayTotal: function(total) {

            var hours = Math.floor(total / 3600);
            total -= hours * 3600;
            var minutes = Math.floor(total / 60);
            if (minutes < 10) {
                minutes = '0' + minutes;
            }
            return hours + ':' + minutes;<commit_msg>Add style for statistics if no time is tracked<commit_after><link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../object-translate/object-translate.html">
<dom-module id="yotilo-statistics">
    <template>
        <style>
        :host {
            display: block;
            max-width:128rem;
            margin:0 auto;
            border:var(--color-border) 1px solid;
            font-size:14px;
            line-height:2rem;
            padding:2rem;
            box-sizing: border-box;
            margin:0 auto 6rem auto;
            border-radius: 4px;
            background:var(--color-bg);
        }

        #ratio {
            height:8rem;
        }

        #ratio > div {
            float:left;
        }



        #ratio > div span {
            display:block;
            height:4rem;
            background:#333;
            color:#FFF;
            font-size:12px;
            font-weight:700;
            line-height: 4rem;
            padding:0 1rem;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-font-smoothing:antialiased;
            white-space: nowrap
        }

        #ratio > div:first-of-type span {
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
        }

        #ratio > div:last-of-type span {
            border-top-right-radius: 4px;
            border-bottom-right-radius: 4px;
        }

        #ratio > div:nth-child(1) span { background:#B35947; }
        #ratio > div:nth-child(2) span { background:#68B359; }
        #ratio > div:nth-child(3) span { background:#477DB3; }
        #ratio > div:nth-child(4) span { background:#B359A4; }
        #ratio > div:nth-child(5) span { background:#B37D47; }
        #ratio > div:nth-child(6) span { background:#47B359; }
        #ratio > div:nth-child(7) span { background:#4759B3; }
        #ratio > div:nth-child(8) span { background:#B3477D; }
        #ratio > div:nth-child(9) span { background:#B3A147; }
        #ratio > div:nth-child(10) span { background:#47B37D; }
        #ratio > div:nth-child(11) span { background:#5947B3; }
        #ratio > div:nth-child(12) span { background:#B34759; }
        #ratio > div:nth-child(13) span { background:#A1B347; }
        #ratio > div:nth-child(14) span { background:#47B3A1; }
        #ratio > div:nth-child(14) span { background:#7D47B3; }
        #ratio > div:nth-child(14) span { background:#7DB347; }
        #ratio > div:nth-child(14) span { background:#47A1B3; }
        #ratio > div:nth-child(14) span { background:#A147B3; }



        #ratio > div p {
            padding:0;
            margin:0;
            font-size:12px;
            line-height:4rem;
            max-width:100%;
            overflow: hidden;
            text-overflow: ellipsis;
            color:#333;
            white-space: nowrap
        }

        #ratio > div:nth-child(1) p { color:#B35947; }
        #ratio > div:nth-child(2) p { color:#68B359; }
        #ratio > div:nth-child(3) p { color:#477DB3; }
        #ratio > div:nth-child(4) p { color:#B359A4; }
        #ratio > div:nth-child(5) p { color:#B37D47; }
        #ratio > div:nth-child(6) p { color:#47B359; }
        #ratio > div:nth-child(7) p { color:#4759B3; }
        #ratio > div:nth-child(8) p { color:#B3477D; }
        #ratio > div:nth-child(9) p { color:#B3A147; }
        #ratio > div:nth-child(10) p { color:#47B37D; }
        #ratio > div:nth-child(11) p { color:#5947B3; }
        #ratio > div:nth-child(12) p { color:#B34759; }
        #ratio > div:nth-child(13) p { color:#A1B347; }
        #ratio > div:nth-child(14) p { color:#47B3A1; }
        #ratio > div:nth-child(14) p { color:#7D47B3; }
        #ratio > div:nth-child(14) p { color:#7DB347; }
        #ratio > div:nth-child(14) p { color:#47A1B3; }
        #ratio > div:nth-child(14) p { color:#A147B3; }

        #ratio.hidden {
            display:none;
        }

        #ratio.hidden + #total {
            border-top:0;
            margin:0;
            padding:0;
        }



        #total {
            text-align: center;
            margin:3rem 0 0 0;
            padding:2rem 0 0 0;
            border-top:var(--color-border) 1px solid;
            font-weight:700;
            font-size:16px;
            line-height:2rem;
        }

        </style>

        <object-translate data="[[ projectsTotals ]]" output="{{ projectsTotalsArray }}"></object-translate>

        <div id="ratio" class$="[[_calculateClass(total)]]">
            <template is="dom-repeat" items="[[projectsTotalsArray]]">
                <div style$="width:[[_calculateWidth(item, total)]]%">
                    <span>[[_displayTotal(item.total)]]</span>
                    <p>[[_displayProject(item.id, projects, projects.*)]]</p>
                </div>
            </template>
        </div>

        <div id="total">
            [[_displayTotal(total)]] total
        </div>
      
    </template>
    <script>
    Polymer({
        is: 'yotilo-statistics',

        properties: {
            total: {
                type: Number,
                value: 0
            },
            totalsProjects: {
                type: Object,
                value: function() {
                    return {};
                }
            },
            totalsTasks: {
                type: Object,
                value: function() {
                    return {};
                }
            },
            daysTotal: {
                type: Object,
                value: function(){
                    return {};
                }
            }
        },

        observers: [
            '_calculateTotal(daysTotal, daysTotal.*)'
        ],

        ready: function() {

            this.listen(document.body, 'set-durations', '_setDurations');
        },

        _calculateClass: function(total) {
            if( total == 0) {
                return 'hidden';
            } else {
                return '';
            }
        },

        _displayTotal: function(total) {

            var hours = Math.floor(total / 3600);
            total -= hours * 3600;
            var minutes = Math.floor(total / 60);
            if (minutes < 10) {
                minutes = '0' + minutes;
            }
            return hours + ':' + minutes;
{'fraction_non_alphanumeric': 0.1443010929410798, 'fraction_numerical': 0.0461829238228285, 'mean_word_length': 1.5370022930998541, 'pattern_counts': {'":': 0, '<': 49, '<?xml version=': 0, '>': 129, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7482655', 'n_tokens_mistral': 4287, 'n_tokens_neox': 3824, 'n_words': 687}