Feat date

README.md

@@ -163,6 +163,8 @@ The component has the following properties that can be set at design time in App
 | `Future Time Range (Years)`     | Adjusts the end date             | Picklist (0.25 - 10)                   |
 | `Zoom Based On`                 | Adjusts the position of the zoom | Picklist (First Date, Current Date, Last Activity) |
 | `Zoom Range (Days)`             | Adjusts the extent of the zoom   | Integer min 15 max 365                 |
+| `Show Today`             | Plots a line for the current date/time   | Picklist (Yes/No)                 |
+| `Today Colour`             | Adjusts colour of line used for today   | Picklist (Various Colours)                 |
 
 #### Custom Labels
 

changelog.md

@@ -1,5 +1,16 @@
 # Change Log
 
+## XX Xxx 202X v1.14.0
+
+**WHAT'S NEW**
+-   Changed Salesforce API to v59.0 from v58.0
+-   Added the ability to plot today's date
+-   Added the ability to change the colour used for today's date
+-   Documentation improvements
+
+**BUG FIXES**
+-   Fixed WCAG colour schemes used in Winter '24
+
 ## 26 Jun 2023 v1.12.0
 
 **WHAT'S NEW**

force-app/main/default/lwc/timeline/timeline.js

@@ -42,6 +42,8 @@ export default class timeline extends NavigationMixin(LightningElement) {
     @api latestRange; //How far into the future to go
     @api zoomTo; //Zoom to current dat or latest activity
     @api daysToShow; //number of days to plot for the default zoom
+    @api showToday; //should today's date be plotted
+    @api showTodayColour; //if today's date is shown - what colour
 
     //Component calculated attributes
     @api recordId; //current record id of lead, case, opportunity, contact or account
@@ -97,6 +99,8 @@ export default class timeline extends NavigationMixin(LightningElement) {
     illustrationSubHeader; //Sub Header to display when an info box appears
     illustrationType; //Type of illustration to display, 'error' or 'no data'
 
+    todaysColour;
+
     label = {
         DAYS,
         SHOWING,
@@ -219,6 +223,7 @@ export default class timeline extends NavigationMixin(LightningElement) {
         }
 
         if (!this._d3Rendered) {
+            this.todaysColour = this.getTodaysColour();
             //set the height of the component as the height is dynamic based on the attributes
             let timelineDIV = this.template.querySelector('div.timeline-canvas');
             this.currentParentField = this.timelineParent;
@@ -498,6 +503,30 @@ export default class timeline extends NavigationMixin(LightningElement) {
             return false;
         };
 
+        let currentDate = new Date();
+
+        if ( this.showToday === "Yes" ) {
+            let today = timelineCanvas.append('g')
+            .attr('class', 'timeline-canvas-current-date')
+            .attr('transform', 'translate(' + timelineCanvas.x(currentDate) + ')' );
+
+            today.append("line")
+                .style("stroke", this.todaysColour)
+                .style("stroke-width", "1.5px")
+                .style("stroke-dasharray", "7, 7")
+                .style("shape-rendering", "crispEdges")
+                .attr("y2", timelineHeight);
+
+            today.append("rect")
+                .style("fill", this.todaysColour)
+                .style("width", "8")
+                .style("height", "13")
+                .style("rx", "3")
+                .style("ry", "3")
+                .style("x", "-4")
+                .style("y", timelineHeight - 8)
+        }
+
         timelineCanvas.redraw = function (domain) {
             var i = 0;
             var swimlane = 0;
@@ -523,6 +552,10 @@ export default class timeline extends NavigationMixin(LightningElement) {
 
             me.totalZoomedRecords = data.length;
 
+            timelineCanvas.currentDate = timelineCanvas
+                .selectAll('[class~=timeline-canvas-current-date]')
+                .attr('transform', 'translate(' + timelineCanvas.x(currentDate) + ')' );
+
             data.sort(me.sortByValue('time'));
 
             data.forEach(function (entry) {
@@ -841,6 +874,42 @@ export default class timeline extends NavigationMixin(LightningElement) {
         }
     }
 
+    getTodaysColour() {
+        let colour;
+
+        switch (this.showTodayColour) {
+            case "Blue":
+                colour = "#107cad";
+                break;
+            case "Green":
+                colour = "#2e844a";
+                break;
+            case "Black":
+                colour = "#444444";
+                break;
+            case "Purple":
+                colour = "#9050e9";
+                break;
+            case "Indigo":
+                colour = "#5867e8";
+                break;
+            case "Teal":
+                colour = "#0b827c";
+                break;
+            case "Pink":
+                colour = "#e3066a";
+                break;
+            case "Red":
+                colour = "#ea001e";
+                break;
+            default:
+                colour = "#107cad";
+                break;
+        }
+
+        return colour;
+    }
+
     getPreferredHeight() {
         let height;
 
@@ -892,12 +961,31 @@ export default class timeline extends NavigationMixin(LightningElement) {
         timelineMap.width = timelineMapDIV.offsetWidth;
         timelineMap.height = timelineMapDIV.offsetHeight;
 
+        let currentDate = new Date();
+
+        if ( this.showToday === "Yes" ) {
+            let today = timelineMap.append('g')
+                .attr('class', 'timeline-map-current-date')
+                .attr('transform', 'translate(' + timelineMap.x(currentDate) + ')' );
+
+            today.append("line")
+                .style("stroke", this.todaysColour)
+                .style("stroke-width", "1.5px")
+                .style("stroke-dasharray", "2, 2")
+                .style("shape-rendering", "crispEdges")
+                .attr("y2", timelineMap.height);
+        }
+
         timelineMap.redraw = function () {
             var i = 0;
             var swimlane = 0;
             let swimlanes = [];
             const unitInterval = (timelineMap.x.domain()[1] - timelineMap.x.domain()[0]) / timelineMap.width;
 
+            timelineMap.currentDate = timelineMap
+                .selectAll('[class~=timeline-map-current-date]')
+                .attr('transform', 'translate(' + timelineMap.x(currentDate) + ')' );
+
             let data = timelineData.data
                 .filter(function (d) {
                     d.endTime = new Date(d.time.getTime() + unitInterval * 10);

force-app/main/default/lwc/timeline/timeline.js-meta.xml

@@ -19,6 +19,9 @@
             <property name="zoomTo" label="Zoom Based On" default="Current Date" required="true" type="String" datasource="Current Date, Last Activity, First Activity" description="Zoom to the last record found (even if it's in the past or future) OR zoom to the current date (even if there are no records)."/>
             <property name="daysToShow" label="Zoom Range (Days)" default="60" required="true" type="Integer" min="7" max="365" description="Specify how many days to zoom to by default. e.g. 60 days would show 30 days prior to and 30 days after the specified 'zoom based on' setting."/>
 
+            <property name="showToday" label="Show Today" default="Yes" required="true" type="String" description="Show today's date." datasource="Yes, No"/>
+            <property name="showTodayColour" label="Today Colour" default="Blue" required="true" type="String" datasource="Blue, Black, Green, Indigo, Pink, Purple, Teal, Red" />
+
             <supportedFormFactors>
                 <supportedFormFactor type="Large" />
             </supportedFormFactors>