Remove day from dates (#1175)

* Remove day from dates

* Potential fix for code scanning alert no. 72: Unused variable, import, function or class

Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>

* Update src/js/timeseries.js

Co-authored-by: Max Ostapenko <1611259+max-ostapenko@users.noreply.github.com>

* Fixes

* Fix mock dates

---------

Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>
Co-authored-by: Max Ostapenko <1611259+max-ostapenko@users.noreply.github.com>

Author: 3 people

package-lock.json

@@ -38,9 +38,8 @@ def mock_get_dates(start_year, end_year, today, month_delta=0):
                 current_month_in_year = "0{}".format(current_month_in_year)
 
             months.append("{}_{}_01".format(year, current_month_in_year))
-            if year == end_year and current_month_in_year == month_delta and today < 15:
-                continue
-            months.append("{}_{}_15".format(year, current_month_in_year))
+            if year < 2019:
+                months.append("{}_{}_15".format(year, current_month_in_year))
 
             if month % 12 == 0:
                 year = year + 1

server/dates.py

@@ -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] = 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>`;
+
+        // Use short format (month + year) for dates from 2019 onwards when
+        // we switched to monthly crawls. Show full date for older data that
+        // may have had mid-month crawls.
+        const formattedDate = this.x >= Date.UTC(2019, 0, 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,21 @@ 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);
+  if (YYYY > '2018') {
+    const d = new Date(Date.UTC(YYYY, MM - 1));
+    return prettyShortDateFormatter.format(d);
+  } else {
+    const d = new Date(Date.UTC(YYYY, MM - 1, DD));
+    return prettyDateFormatter.format(d);
+  }
 };
 
 export const getFullDate = d => {