How to create own date ranges

From SIMILE Widgets

Contents

Creating own date ranges

it's not so difficult, just have to understand how it works, here are 2 exemples :

QuarterHours (15 minutes)

Imported from the old wiki ([1]) : Timeline CustomDateRanges

Quarter (3 months)

This exemple shows how to add a new timeline unit for quarters.

→ original author can help

edit "date-time.js"

add a new constant :

before after 
Timeline.DateTime.MILLISECOND    = 0;
Timeline.DateTime.SECOND         = 1;
Timeline.DateTime.MINUTE         = 2;
Timeline.DateTime.HOUR           = 3;
Timeline.DateTime.DAY            = 4;
Timeline.DateTime.WEEK           = 5;
Timeline.DateTime.MONTH          = 6;
Timeline.DateTime.YEAR           = 7;
Timeline.DateTime.DECADE         = 8;
Timeline.DateTime.CENTURY        = 9;
Timeline.DateTime.MILLENNIUM     = 10;
Timeline.DateTime.MILLISECOND    = 0;
Timeline.DateTime.SECOND         = 1;
Timeline.DateTime.MINUTE         = 2;
Timeline.DateTime.HOUR           = 3;
Timeline.DateTime.DAY            = 4;
Timeline.DateTime.WEEK           = 5;
Timeline.DateTime.MONTH          = 6;
Timeline.DateTime.QUARTER        = 7;
Timeline.DateTime.YEAR           = 8;
Timeline.DateTime.DECADE         = 9;
Timeline.DateTime.CENTURY        = 10;
Timeline.DateTime.MILLENNIUM     = 11;

add matching rule :

before after 
Timeline.DateTime.gregorianUnitLengths = [];
    (function() {
        var d = Timeline.DateTime;
        var a = d.gregorianUnitLengths;
 
        a[d.MILLISECOND] = 1;
        a[d.SECOND]      = 1000;
        a[d.MINUTE]      = a[d.SECOND] * 60;
        a[d.HOUR]        = a[d.MINUTE] * 60;
        a[d.DAY]         = a[d.HOUR] * 24;
        a[d.WEEK]        = a[d.DAY] * 7;
        a[d.MONTH]       = a[d.DAY] * 31;
        a[d.YEAR]        = a[d.DAY] * 365;
        a[d.DECADE]      = a[d.YEAR] * 10;
        a[d.CENTURY]     = a[d.YEAR] * 100;
        a[d.MILLENNIUM]  = a[d.YEAR] * 1000;
    })();
Timeline.DateTime.gregorianUnitLengths = [];
    (function() {
        var d = Timeline.DateTime;
        var a = d.gregorianUnitLengths;
 
        a[d.MILLISECOND] = 1;
        a[d.SECOND]      = 1000;
        a[d.MINUTE]      = a[d.SECOND] * 60;
        a[d.HOUR]        = a[d.MINUTE] * 60;
        a[d.DAY]         = a[d.HOUR] * 24;
        a[d.WEEK]        = a[d.DAY] * 7;
        a[d.MONTH]       = a[d.DAY] * 31;
        a[d.QUARTER]     = a[d.MONTH] * 3;
        a[d.YEAR]        = a[d.DAY] * 365;
        a[d.DECADE]      = a[d.YEAR] * 10;
        a[d.CENTURY]     = a[d.YEAR] * 100;
        a[d.MILLENNIUM]  = a[d.YEAR] * 1000;
    })();

add a case in roundDownToInterval function :

before after 
    case Timeline.DateTime.MONTH:
        clearInDay(date2);
        date2.setUTCDate(1);
 
        var x = date2.getUTCMonth();
        date2.setUTCMonth(x - (x % multiple));
        break;
    case Timeline.DateTime.YEAR:
        clearInYear(date2);
 
        var x = date2.getUTCFullYear();
        date2.setUTCFullYear(x - (x % multiple));
        break;
    case Timeline.DateTime.MONTH:
        clearInDay(date2);
        date2.setUTCDate(1);
 
        var x = date2.getUTCMonth();
        date2.setUTCMonth(x - (x % multiple));
        break;
    case Timeline.DateTime.QUARTER:
        clearInDay(date2);
        date2.setUTCDate(1);
 
        var x = date2.getUTCMonth();
        x=(x-(x%3))/3;
        date2.setUTCMonth((x - (x % multiple))*3);
        break;
    case Timeline.DateTime.YEAR:
        clearInYear(date2);
 
        var x = date2.getUTCFullYear();
        date2.setUTCFullYear(x - (x % multiple));
        break;

add a case in incrementByInterval function :

before after 
    case Timeline.DateTime.MONTH:
        date.setUTCMonth(date.getUTCMonth() + 1);
        break;
    case Timeline.DateTime.YEAR:
        date.setUTCFullYear(date.getUTCFullYear() + 1);
        break;
    case Timeline.DateTime.MONTH:
        date.setUTCMonth(date.getUTCMonth() + 1);
        break;
    case Timeline.DateTime.QUARTER:
        date.setUTCMonth(date.getUTCMonth() + 3);
        break;
    case Timeline.DateTime.YEAR:
        date.setUTCFullYear(date.getUTCFullYear() + 1);
        break;

edit "labellers.js"

add localized data accessors :

before after 
Timeline.GregorianDateLabeller.monthNames = [];
Timeline.GregorianDateLabeller.dayNames = [];
Timeline.GregorianDateLabeller.labelIntervalFunctions = [];
 
Timeline.GregorianDateLabeller.getMonthName = function(month, locale) {
    return Timeline.GregorianDateLabeller.monthNames[locale][month];
};
Timeline.GregorianDateLabeller.monthNames = [];
Timeline.GregorianDateLabeller.quarterSymbol = [];
Timeline.GregorianDateLabeller.dayNames = [];
Timeline.GregorianDateLabeller.labelIntervalFunctions = [];
 
Timeline.GregorianDateLabeller.getMonthName = function(month, locale) {
    return Timeline.GregorianDateLabeller.monthNames[locale][month];
};
Timeline.GregorianDateLabeller.getQuarterSymbol = function(locale) {
    return Timeline.GregorianDateLabeller.quarterSymbol[locale];
};


modify rendering cases :

before after 
    case Timeline.DateTime.WEEK:
        text = Timeline.GregorianDateLabeller.getMonthName(date.getUTCMonth(),
                this._locale) + " " + date.getUTCDate();
        break;
    case Timeline.DateTime.MONTH:
        var m = date.getUTCMonth();
        if (m != 0) {
            text = Timeline.GregorianDateLabeller.getMonthName(m, this._locale);
            break;
        } // else, fall through
    case Timeline.DateTime.YEAR:
    case Timeline.DateTime.DECADE:
    case Timeline.DateTime.CENTURY:
    case Timeline.DateTime.MILLENNIUM:
        var y = date.getUTCFullYear();
        if (y > 0) {
            text = date.getUTCFullYear();
        } else {
            text = (1 - y) + "BC";
        }
        emphasized = 
            (intervalUnit == Timeline.DateTime.MONTH) ||
            (intervalUnit == Timeline.DateTime.DECADE && y % 100 == 0) || 
            (intervalUnit == Timeline.DateTime.CENTURY && y % 1000 == 0);
        break;
    case Timeline.DateTime.WEEK:
        text = Timeline.GregorianDateLabeller.getMonthName(date.getUTCMonth(),
                this._locale) + " " + date.getUTCDate();
        break;
    case Timeline.DateTime.QUARTER:
    case Timeline.DateTime.MONTH:
        var m = date.getUTCMonth();
        if (m != 0) {
            if (intervalUnit==Timeline.DateTime.QUARTER) {
                text = Timeline.GregorianDateLabeller.getQuarterSymbol(this._locale) + ((m / 3) + 1);
            }else{
                text = Timeline.GregorianDateLabeller.getMonthName(m, this._locale);
            }
            break;
        } // else, fall through ('january' or 'Q1' replaced by the year)
    case Timeline.DateTime.YEAR:
    case Timeline.DateTime.DECADE:
    case Timeline.DateTime.CENTURY:
    case Timeline.DateTime.MILLENNIUM:
        var y = date.getUTCFullYear();
        if (y > 0) {
            text = date.getUTCFullYear();
        } else {
            text = (1 - y) + "BC";
        }
        emphasized = 
            (intervalUnit == Timeline.DateTime.MONTH) ||
            (intervalUnit == Timeline.DateTime.QUARTER) ||
            (intervalUnit == Timeline.DateTime.DECADE && y % 100 == 0) || 
            (intervalUnit == Timeline.DateTime.CENTURY && y % 1000 == 0);
        break;

edit each "i10n/[lang]/labellers.js"

add localized strings : (each line in its file) 

Timeline.GregorianDateLabeller.quarterSymbol["en"] = "Q";//Quarter
Timeline.GregorianDateLabeller.quarterSymbol["fr"] = "T";//Trimestre
Timeline.GregorianDateLabeller.quarterSymbol["es"] = "T";//Trimestre
Timeline.GregorianDateLabeller.quarterSymbol["de"] = "T";//Trimester
Timeline.GregorianDateLabeller.quarterSymbol["cs"] = "Q";//??? "en"=Quarter
Timeline.GregorianDateLabeller.quarterSymbol["it"] = "T";//Trimestre
Timeline.GregorianDateLabeller.quarterSymbol["ru"] = "Ч";//??? "en"=Quarter "ru"=Квартал
Timeline.GregorianDateLabeller.quarterSymbol["se"] = "Q";//??? "en"=Quarter
Timeline.GregorianDateLabeller.quarterSymbol["vi"] = "Q";//??? "en"=Quarter
Timeline.GregorianDateLabeller.quarterSymbol["zh"] = "季";//??? ["en"]="Q" Quarter -> Season -> 季
Timeline.GregorianDateLabeller.quarterSymbol["nl"] = "Q";//??? "en"=Quarter
Timeline.GregorianDateLabeller.quarterSymbol["tr"] = "Q";//??? "en"=Quarter
Retrieved from "http://www.simile-widgets.org/wiki/How_to_create_own_date_ranges"
Personal tools
TOOLBOX
LANGUAGES