feat(rum-explorer): date range picker

tools/rum/charts/skyline.js

@@ -56,12 +56,20 @@ export default class SkylineChart extends AbstractChart {
 
     groupFn.fillerFn = (existing) => {
       const endDate = this.chartConfig.endDate ? new Date(this.chartConfig.endDate) : new Date();
-      // set start date depending on the unit
-      const startDate = new Date(endDate);
-      // roll back to beginning of time
-      if (this.chartConfig.unit === 'day') startDate.setDate(endDate.getDate() - 30);
-      if (this.chartConfig.unit === 'hour') startDate.setDate(endDate.getDate() - 7);
-      if (this.chartConfig.unit === 'week') startDate.setMonth(endDate.getMonth() - 12);
+
+      let startDate;
+      if (!this.chartConfig.startDate) {
+        // set start date depending on the unit
+        startDate = new Date(endDate);
+        // roll back to beginning of time
+        if (this.chartConfig.unit === 'day') startDate.setDate(endDate.getDate() - 30);
+        if (this.chartConfig.unit === 'hour') startDate.setDate(endDate.getDate() - 7);
+        if (this.chartConfig.unit === 'week') startDate.setMonth(endDate.getMonth() - 12);
+        if (this.chartConfig.unit === 'month') startDate.setMonth(endDate.getMonth() - 1);
+      } else {
+        startDate = new Date(this.chartConfig.startDate);
+      }
+
       const slots = new Set(existing);
       const slotTime = new Date(startDate);
       // return Array.from(slots);
@@ -72,6 +80,7 @@ export default class SkylineChart extends AbstractChart {
         if (this.chartConfig.unit === 'day') slotTime.setDate(slotTime.getDate() + 1);
         if (this.chartConfig.unit === 'hour') slotTime.setHours(slotTime.getHours() + 1);
         if (this.chartConfig.unit === 'week') slotTime.setDate(slotTime.getDate() + 7);
+        if (this.chartConfig.unit === 'month') slotTime.setMonth(slotTime.getMonth() + 1);
         maxSlots -= 1;
         if (maxSlots < 0) {
           // eslint-disable-next-line no-console
@@ -467,12 +476,40 @@ export default class SkylineChart extends AbstractChart {
 
   async draw() {
     const params = new URL(window.location).searchParams;
-    const view = ['week', 'month', 'year'].indexOf(params.get('view')) !== -1
-      ? params.get('view')
-      : 'week';
-    // TODO re-add. I think this should be a filter
+    const view = params.get('view');
+
     // eslint-disable-next-line no-unused-vars
-    const endDate = params.get('endDate') ? `${params.get('endDate')}T00:00:00` : null;
+    const startDate = params.get('startDate');
+    const endDate = params.get('endDate');
+
+    let customView = 'year';
+    let unit = 'month';
+    let units = 12;
+    if (view === 'custom') {
+      const diff = endDate ? new Date(endDate).getTime() - new Date(startDate).getTime() : 0;
+      if (diff < (1000 * 60 * 60 * 24)) {
+        // less than a day
+        customView = 'hour';
+        unit = 'hour';
+        units = 24;
+      } else if (diff <= (1000 * 60 * 60 * 24 * 7)) {
+        // less than a week
+        customView = 'week';
+        unit = 'hour';
+        units = Math.round(diff / (1000 * 60 * 60));
+      } else if (diff <= (1000 * 60 * 60 * 24 * 31)) {
+        // less than a month
+        customView = 'month';
+        unit = 'day';
+        units = 30;
+      } else if (diff <= (1000 * 60 * 60 * 24 * 365 * 3)) {
+        // less than 3 years
+        customView = 'week';
+        unit = 'week';
+        units = Math.round(diff / (1000 * 60 * 60 * 24 * 7));
+      }
+    }
+
     const focus = params.get('focus');
 
     if (this.dataChunks.filtered.length < 1000) {
@@ -487,20 +524,31 @@ export default class SkylineChart extends AbstractChart {
         unit: 'day',
         units: 30,
         focus,
+        startDate,
         endDate,
       },
       week: {
         view,
         unit: 'hour',
         units: 24 * 7,
         focus,
+        startDate,
         endDate,
       },
       year: {
         view,
         unit: 'week',
         units: 52,
         focus,
+        startDate,
+        endDate,
+      },
+      custom: {
+        view: customView,
+        unit,
+        units,
+        focus,
+        startDate,
         endDate,
       },
     };
@@ -578,6 +626,7 @@ export default class SkylineChart extends AbstractChart {
     this.stepSize = undefined;
     this.clsAlreadyLabeled = false;
     this.lcpAlreadyLabeled = false;
+
     this.chart.update();
   }
 }