Remove day from dates

Author: tunetheweb

package-lock.json

@@ -81,7 +81,7 @@ class TableLinked {
       }
 
       if(timestamp) {
-        timestamp.textContent = this.dataArray[1]?.[0]?.date;
+        timestamp.textContent = UIUtils.printMonthYear(this.dataArray[1]?.[0]?.date);
       }
 
       this.dataArray.forEach(technology => {

src/js/techreport/tableLinked.js

@@ -131,7 +131,7 @@ class Timeseries {
       container.innerHTML = '';
 
       /* Update the date to the most recent timestamp in the dataset */
-      viz.querySelector('[data-slot="timestamp"]').innerHTML = sorted?.[0]?.date;
+      viz.querySelector('[data-slot="timestamp"]').innerHTML = UIUtils.printMonthYear(sorted?.[0]?.date);
 
       /* For each of the breakdowns, add a component with the latest data */
       config.series.values.forEach(breakdown => {
@@ -239,7 +239,7 @@ class Timeseries {
           value.classList.add('undefined');
           value.textContent = 'No data';
         }
-        timestamp.textContent = latest.date;
+        timestamp.textContent = UIUtils.printMonthYear(latest.date);
         const techColor = UIUtils.getAppColor(app, this.pageFilters.app, this.pageConfig.colors);
         const fallback = this.pageConfig.colors.app[index];
         card.style.setProperty('--breakdown-color', techColor || fallback);
@@ -314,7 +314,7 @@ class Timeseries {
         const wrapper = document.createElement('div');
         wrapper.className = 'tooltip-wrapper';
 
-        const d =  Highcharts.dateFormat('%b %e, %Y', this.x);
+        const d =  Highcharts.dateFormat('%b %Y', this.x);
 
         const dateEl = document.createElement('p');
         dateEl.innerHTML = d;

src/js/techreport/timeseries.js

@@ -61,9 +61,23 @@ function capitalizeFirstLetter(theString) {
   return theString && typeof theString === 'string' ? theString.charAt(0)?.toUpperCase() + theString.slice(1) : theString;
 }
 
+function printMonthYear(theDate) {
+  if (!theDate || theDate.length != 10) return;
+
+  const [year, month, day] = theDate.split('-');
+  const date = new Date(year, month - 1);
+  const formattedDate = date.toLocaleString('default', {
+    month: 'long',
+    year: 'numeric'
+  });
+
+  return formattedDate;
+}
+
 export const UIUtils = {
   getAppColor,
   updateReportComponents,
   getChangeStatus,
   capitalizeFirstLetter,
+  printMonthYear,
 }

src/js/techreport/utils/ui.js

@@ -317,7 +317,14 @@ function drawChart(options, series) {
         }
 
         const changelog = flags[this.x];
-        const tooltip = `<p style="font-size: smaller; text-align: center;">${Highcharts.dateFormat('%b %e, %Y', this.x)}</p>`;
+
+        // Drop the 1st day from dates as data is for month, rather than
+        // specific date. However, include the non-01 dates from when we
+        // used to run an early (01) and late (15 typically) crawl.
+        const formattedDate = Highcharts.dateFormat('%e', this.x) === ' 1' ?
+          Highcharts.dateFormat('%b  %Y', this.x) :
+          Highcharts.dateFormat('%b %e, %Y', this.x);
+        const tooltip = `<p style="font-size: smaller; text-align: center;">${formattedDate}</p>`;
 
         // Handle changelog tooltips first.
         if (!this.points) {
@@ -390,7 +397,8 @@ function drawChart(options, series) {
       }, {
         type: 'all',
         text: 'All'
-      }]
+      }],
+      inputDateFormat: '%b %Y',
     },
     xAxis: {
       type: 'datetime',

src/js/timeseries.js

@@ -7,10 +7,19 @@ const prettyDateFormatter = new Intl.DateTimeFormat(undefined, {
   timeZone: 'UTC'
 });
 
+const prettyShortDateFormatter = new Intl.DateTimeFormat(undefined, {
+  month: 'short',
+  year: 'numeric',
+  timeZone: 'UTC'
+});
+
 export const prettyDate = YYYY_MM_DD => {
   const [YYYY, MM, DD] = YYYY_MM_DD.split('_');
   const d = new Date(Date.UTC(YYYY, MM - 1, DD));
-  return getFullDate(d);
+  const formattedDate = DD === '01' ?
+    prettyShortDateFormatter.format(d) :
+    prettyDateFormatter.format(d);
+  return formattedDate;
 };
 
 export const getFullDate = d => {