How to create own date ranges

From SIMILE Widgets
Jump to: navigation, search

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
<source lang="javascript" lines=0>

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; </source>

<source lang="javascript" lines=0>

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; </source>

add matching rule :

before after
<source lang="javascript" lines=0>

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;
   })();

</source>

<source lang="javascript" lines=0>

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;
   })();

</source>

add a case in roundDownToInterval function :

before after
<source lang="javascript" lines=0>
   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;

</source>

<source lang="javascript" lines=0>
   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;

</source>

add a case in incrementByInterval function :

before after
<source lang="javascript" lines=0>
   case Timeline.DateTime.MONTH:
       date.setUTCMonth(date.getUTCMonth() + 1);
       break;
   case Timeline.DateTime.YEAR:
       date.setUTCFullYear(date.getUTCFullYear() + 1);
       break;

</source>

<source lang="javascript" lines=0>
   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;

</source>

edit "labellers.js"

add localized data accessors :

before after
<source lang="javascript" lines=0>

Timeline.GregorianDateLabeller.monthNames = []; Timeline.GregorianDateLabeller.dayNames = []; Timeline.GregorianDateLabeller.labelIntervalFunctions = [];

Timeline.GregorianDateLabeller.getMonthName = function(month, locale) {

   return Timeline.GregorianDateLabeller.monthNames[locale][month];

}; </source>

<source lang="javascript" lines=0>

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];

}; </source>


modify rendering cases :

before after
<source lang="javascript" lines=0>
   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;

</source>

<source lang="javascript" lines=0>
   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;

</source>

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

add localized strings : (each line in its file) <source lang="javascript" lines=0> 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 </source>

Personal tools
Namespaces
Variants
Actions
Navigation
Toolbox