feat: add showWeekScale option (#278)

docs/graph2d/index.html

@@ -539,6 +539,12 @@ <h3 id="graph2dOptions">Graph2d Options</h3>
             <td>true</td>
             <td>Toggle the drawing of the major labels on the Y axis.</td>
         </tr>
+        <tr parent="dataAxis" class="hidden">
+            <td class="indent">dataAxis.showWeekScale</td>
+            <td>Boolean</td>
+            <td>false</td>
+            <td>Toggle the drawing of the week scales on the Y axis.</td>
+        </tr>
         <tr parent="dataAxis" class="hidden">
             <td class="indent">dataAxis.visible</td>
             <td>Boolean</td>

docs/timeline/index.html

@@ -1124,6 +1124,16 @@ <h2 id="Configuration_Options">Configuration Options</h2>
         visible.</td>
     </tr>
 
+    <tr>
+      <td>showWeekScale</td>
+      <td>boolean</td>
+      <td><code>false</code></td>
+      <td>By default, the timeline doesn't show week number scale in the date labels on the
+        time axis.
+        When <code>showWeekScale</code> is <code>true</code>, week number labels
+        are shown.</td>
+    </tr>
+
     <tr>
       <td>showTooltips</td>
       <td>boolean</td>

lib/timeline/TimeStep.js

@@ -30,11 +30,12 @@ class TimeStep {
     * @param {Date} [end]           The end date
     * @param {number} [minimumStep] Optional. Minimum step size in milliseconds
     * @param {Date|Array.<Date>} [hiddenDates] Optional.
-    * @param {{showMajorLabels: boolean}} [options] Optional.
+    * @param {{showMajorLabels: boolean, showWeekScale: boolean}} [options] Optional.
     * @constructor  TimeStep
     */
   constructor(start, end, minimumStep, hiddenDates, options) {
     this.moment = (options && options.moment) || moment;
+    this.options = options ? options : {};
 
     // variables
     this.current = this.moment();
@@ -63,8 +64,6 @@ class TimeStep {
     }
 
     this.format = TimeStep.FORMAT; // default formatting
-    this.options = options ? options : {};
-
   }
 
   /**
@@ -319,7 +318,7 @@ class TimeStep {
     if (stepYear > minimumStep)             {this.scale = 'year';        this.step = 1;}
     if (stepMonth*3 > minimumStep)          {this.scale = 'month';       this.step = 3;}
     if (stepMonth > minimumStep)            {this.scale = 'month';       this.step = 1;}
-    if (stepDay*7 > minimumStep)            {this.scale = 'week';        this.step = 1;}
+    if (stepDay*7 > minimumStep && this.options.showWeekScale)            {this.scale = 'week';        this.step = 1;}
     if (stepDay*2 > minimumStep)            {this.scale = 'day';         this.step = 2;}
     if (stepDay > minimumStep)              {this.scale = 'day';         this.step = 1;}
     if (stepDay/2 > minimumStep)            {this.scale = 'weekday';     this.step = 1;}

lib/timeline/component/DataAxis.js

@@ -25,6 +25,7 @@ class DataAxis extends Component {
       orientation: 'left',  // supported: 'left', 'right'
       showMinorLabels: true,
       showMajorLabels: true,
+      showWeekScale: false,
       icons: false,
       majorLinesOffset: 7,
       minorLinesOffset: 4,

lib/timeline/component/TimeAxis.js

@@ -43,6 +43,7 @@ class TimeAxis extends Component {
       },  // axis orientation: 'top' or 'bottom'
       showMinorLabels: true,
       showMajorLabels: true,
+      showWeekScale: false,
       maxMinorChars: 7,
       format: TimeStep.FORMAT,
       moment,
@@ -65,13 +66,15 @@ class TimeAxis extends Component {
    *                          {string} [orientation.axis]
    *                          {boolean} [showMinorLabels]
    *                          {boolean} [showMajorLabels]
+   *                          {boolean} [showWeekScale]
    */
   setOptions(options) {
     if (options) {
       // copy all options that we know
       util.selectiveExtend([
         'showMinorLabels',
         'showMajorLabels',
+        'showWeekScale',
         'maxMinorChars',
         'hiddenDates',
         'timeAxis',

lib/timeline/optionsGraph2d.js

@@ -62,6 +62,7 @@ let allOptions = {
   dataAxis: {
     showMinorLabels: {'boolean': bool},
     showMajorLabels: {'boolean': bool},
+    showWeekScale: {'boolean': bool},
     icons: {'boolean': bool},
     width: {string, number},
     visible: {'boolean': bool},
@@ -157,6 +158,7 @@ let allOptions = {
   showCurrentTime: {'boolean': bool},
   showMajorLabels: {'boolean': bool},
   showMinorLabels: {'boolean': bool},
+  showWeekScale: {'boolean': bool},
   start: {date, number, string, moment},
   timeAxis: {
     scale: {string,'undefined': 'undefined'},
@@ -202,6 +204,7 @@ let configureOptions = {
     dataAxis: {
       showMinorLabels: true,
       showMajorLabels: true,
+      showWeekScale: false,
       icons: false,
       width: [40,0,200,1],
       visible: true,
@@ -272,6 +275,7 @@ let configureOptions = {
     showCurrentTime: false,
     showMajorLabels: true,
     showMinorLabels: true,
+    showWeekScale: false,
     start: '',
     width: '100%',
     zoomable: true,

lib/timeline/optionsTimeline.js

@@ -146,6 +146,7 @@ let allOptions = {
   showCurrentTime: { 'boolean': bool},
   showMajorLabels: { 'boolean': bool},
   showMinorLabels: { 'boolean': bool},
+  showWeekScale: { 'boolean': bool},
   stack: { 'boolean': bool},
   stackSubgroups: { 'boolean': bool},
   cluster: { 

types/index.d.ts

@@ -303,6 +303,7 @@ export interface TimelineOptions {
   showCurrentTime?: boolean;
   showMajorLabels?: boolean;
   showMinorLabels?: boolean;
+  showWeekScale?: boolean;
   showTooltips?: boolean;
   stack?: boolean;
   stackSubgroups?: boolean;
@@ -416,6 +417,7 @@ export interface Graph2dDataAxisOption {
   orientation?: TimelineOptionsOrientationType;
   showMinorLabels?: boolean;
   showMajorLabels?: boolean;
+  showWeekScale?: boolean;
   majorLinesOffset?: number;
   minorLinesOffset?: number;
   labelOffsetX?: number;
@@ -475,6 +477,7 @@ export interface Graph2dOptions {
   showCurrentTime?: boolean;
   showMajorLabels?: boolean;
   showMinorLabels?: boolean;
+  showWeekScale?: boolean;
   sort?: boolean;
   stack?: boolean;
   start?: DateType;