Expose option urlTarget to be able to set the target attribute when l…

…abels are rendered as links.

CHANGELOG.md

@@ -1,6 +1,6 @@
 ## [`main`](https://github.com/walterra/d3-milestones/tree/main)
 
-No public interface changes since `v1.2.1`.
+No public interface changes since `v1.2.2`.
 
 ## [`v1.2.2`](https://github.com/walterra/d3-milestones/tree/v1.2.2)
 

README.md

@@ -117,6 +117,10 @@ Specifies the formatter for the timestamp field. The specifier string is expecte
 
 The `labelFormat` for the time label for each milestones defaults to `'%Y-%m-%d %H:%M'`. Using `aggregateBy`, `labelFormat` will be set automatically to a reasonable format corresponding to the aggregation level. Still, this method is available to override this behavior with a custom `labelFormat`.
 
+<a name="urlTarget" href="#urlTarget">#</a> vis.<b>urlTarget</b>(<i>string</i>)
+
+Customizes the `target` attribute when labels are provided with a URL. Can be `_blank`, `_self`, `_parent` or  `_top`.
+
 <a name="useLabels" href="#useLabels">#</a> vis.<b>useLabels</b>(<i>boolean</i>)
 
 Enables/Disables the display of labels.

src/_defaults.js

@@ -13,4 +13,5 @@ export const DEFAULTS = {
   USE_LABELS: true,
   AGGREGATE_BY: 'minute',
   AUTO_RESIZE: true,
+  URL_TARGET: '_self',
 };

src/main.js

@@ -73,6 +73,17 @@ export default function milestones(selector) {
   }
   setUseLabels(DEFAULTS.USE_LABELS);
 
+  let urlTarget;
+  function setUrlTarget(d) {
+    if (
+      typeof d === 'string' &&
+      ['_blank', '_self', '_parent', '_top'].includes(d.toLowerCase())
+    ) {
+      urlTarget = d;
+    }
+  }
+  setUrlTarget(DEFAULTS.URL_TARGET);
+
   // set callback for event mouseover
   let callBackMouseOver;
   function setEventMouseOverCallback(callback) {
@@ -386,6 +397,7 @@ export default function milestones(selector) {
                 .classed('milestones-label', true)
                 .classed('milestones-link-label', true)
                 .attr('href', v[mapping.url])
+                .attr('target', urlTarget)
                 .text(t);
             } else {
               item = element
@@ -497,6 +509,7 @@ export default function milestones(selector) {
     distribution: setDistribution,
     parseTime: setParseTime,
     labelFormat: setLabelFormat,
+    urlTarget: setUrlTarget,
     useLabels: setUseLabels,
     range: setRange,
     render: render,

src/stories/example-00-milestones.stories.js

@@ -22,5 +22,6 @@ MilestonesReleases.args = {
     text: 'detail',
     url: 'giturl',
   },
+  urlTarget: '_blank',
   data,
 };

src/stories/milestones.js

@@ -43,6 +43,10 @@ export const argTypes = {
   data: {
     control: { type: 'object' },
   },
+  urlTarget: {
+    options: ['_blank', '_self', '_parent', '_top'],
+    control: { type: 'radio' },
+  },
 };
 
 export const createMilestones = (
@@ -60,6 +64,7 @@ export const createMilestones = (
     orientation,
     parseTime,
     autoResize,
+    urlTarget,
   },
   DIV_ID = 'timeline',
   style = ''
@@ -81,6 +86,7 @@ export const createMilestones = (
     orientation && m.orientation(orientation);
     parseTime && m.parseTime(parseTime);
     autoResize && m.autoResize(autoResize);
+    urlTarget && m.urlTarget(urlTarget);
 
     m.render(data);
   }