JSFiddle - React, Tailwind, and code Playground

by NinjaFish

HTML

<div id="years"></div>
<div id="quarters"></div>
<div id="months"></div>
<div id="weeks"></div>
<div id="days"></div>
<div id="scale"></div>

<table id="debug"></table>

CSS

div, td {
    padding: 0.5em;
}

JavaScript

Date.prototype.getDayOfYear = function() {
    return Math.ceil((this - new Date(this.getFullYear(), 0, 1)) / 86400000);
};

Date.prototype.getWeek = function() {
    var onejan = new Date(this.getFullYear(), 0, 1);
    return Math.ceil((((this - onejan) / 86400000) + onejan.getDay() + 1) / 7);
}

function getDefaultTrendScale(start, end) {
    //if (cp.daysBetween(start, end) > (365 * 5)) {
    //    return "Year";
    //}
    var groups = {};
    var date = start;
    while (date <= end) {
        var y = date.getFullYear(),
            q = Math.floor(date.getMonth() / 3),
            m = date.getMonth(),
            w = date.getWeek(),
            d = date.getDayOfYear();

        var log = $("<tr></tr>").append($("<td></td>").text(y)).append($("<td></td>").text(q)).append($("<td></td>").text(m)).append($("<td></td>").text(w)).append($("<td></td>").text(d));
        $("#debug").append(log);

        var year = groups[y] || (groups[y] = {
            quarters: [],
            months: [],
            weeks: [],
            days: []
        });

        pushValue(q, year.quarters);
        pushValue(m, year.months);
        pushValue(w, year.weeks);
        pushValue(d, year.days);

        date.setDate(date.getDate() + 1);
    }

    var counts = [
        {
        name: "Year",
        count: Object.keys(groups).length},
    {
        name: "Quarter",
        count: 0},
    {
        name: "Month",
        count: 0},
    {
        name: "Week",
        count: 0},
    {
        name: "Day",
        count: 0}
    ];

    $.each(groups, function(index, item) {
        counts[1].count += item.quarters.length;
        counts[2].count += item.months.length;
        counts[3].count += item.weeks.length;
        counts[4].count += item.days.length;
    });

    $("#years").text(counts[0].count);
    $("#quarters").text(counts[1].count);
    $("#months").text(counts[2].count);
    $("#weeks").text(counts[3].count);
    $("#days").text(counts[4].count);

    var inRange...