From 8f1a7de9bd2395435ae48234344fab7da8280605 Mon Sep 17 00:00:00 2001
From: Alexandre Capt <acapt@adobe.com>
Date: Fri, 13 Sep 2024 11:22:47 +0200
Subject: [PATCH 01/20] feat: first shot of time range picker

---
 tools/rum/elements/timerange-picker.css | 133 +++++++++++++
 tools/rum/elements/timerange-picker.js  | 245 ++++++++++++++++++++++++
 tools/rum/elements/url-selector.js      |   6 +-
 3 files changed, 381 insertions(+), 3 deletions(-)
 create mode 100644 tools/rum/elements/timerange-picker.css
 create mode 100644 tools/rum/elements/timerange-picker.js

diff --git a/tools/rum/elements/timerange-picker.css b/tools/rum/elements/timerange-picker.css
new file mode 100644
index 00000000..84e4e2c5
--- /dev/null
+++ b/tools/rum/elements/timerange-picker.css
@@ -0,0 +1,133 @@
+.form-field.picker-field {
+  position: relative;
+  display: block;
+}
+
+.form-field.picker-field input {
+  width: 100%;
+  font: inherit;
+  border-color: var(--gray-100);
+  border: 2px solid var(--gray-300);
+  padding: 0.4em 0.85em;
+  background-color: var(--gray-100);
+  cursor: pointer;
+  transition: border-color 0.2s, background-color 0.2s;
+  border-radius: 4px;
+  min-width: 200px;
+}
+
+@media (width >= 900px) {
+  .timeframe-wrapper {
+    grid-area: timeframe;
+  }
+  
+  @media (width >= 900px) {
+      .log-viewer form#timeframe-form > .timeframe-wrapper {
+          grid-area: timeframe;
+      }
+  }
+}
+
+.timeframe-wrapper {
+  display: grid;
+
+  /* grid-template-columns: auto 1fr auto; */
+  align-items: end;
+  gap: var(--spacing-l);
+}
+
+.picker-field  ul.menu li:last-child {
+  position: relative;
+  margin-top: 16px;
+}
+
+.picker-field ul.menu li:last-child::before {
+  content: '';
+  position: absolute;
+  top: calc((-0.5 * 16px) - (2px / 2));
+  left: 0;
+  right: 0;
+  height: 2px;
+  background-color: var(--gray-200);
+}
+
+.picker-field .datetime-wrapper {
+  display: none;
+  min-width: 500px;
+  background-color: white;
+}
+
+.picker-field input[data-custom='true'] ~ .datetime-wrapper {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 16px 12px;
+  left: 0;
+  right: 0;
+  top: calc(100% + 8px);
+  margin-top: 4px;
+  border-radius: 4px;
+  padding: calc(0.4em + 2px);
+  background-color: white;
+  box-shadow: var(--grey-700);
+  z-index: 10;
+}
+
+.picker-field ul {
+  list-style: none;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: calc(100% + 8px);
+  margin: 0;
+  border-radius: 8px;
+  padding: calc(0.4em + 2px);
+  background-color: white;
+  box-shadow: var(--grey-700);
+  z-index: 20;
+}
+
+.picker-field ul.menu:not([hidden]) + .datetime-wrapper {
+  display: none;
+}
+
+.picker-field input ~ .datetime-wrapper .form-field {
+  margin-top: 0;
+}
+
+@media (width >= 740px) {
+  .datetime-wrapper {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .picker-field input[data-custom='true'] ~ .datetime-wrapper {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (width >= 900px) {
+  .picker-field input[data-custom='true'] ~ .datetime-wrapper {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+@media (width >= 1200px) {
+  .picker-field input[data-custom='true'] ~ .datetime-wrapper {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    position: absolute;
+  }
+}
+
+.picker-field .datetime-wrapper .datetime-field {
+  display: block;
+}
+
+.picker-field .datetime-wrapper .datetime-field label {
+  display: block;
+  margin-bottom: 0.5em;
+}
+
+.form-field.picker-field input ~ ul li {
+  padding: 0.4em 0;
+  padding-left: 2rem;
+  cursor: pointer;
+}
\ No newline at end of file
diff --git a/tools/rum/elements/timerange-picker.js b/tools/rum/elements/timerange-picker.js
new file mode 100644
index 00000000..0b3d16e6
--- /dev/null
+++ b/tools/rum/elements/timerange-picker.js
@@ -0,0 +1,245 @@
+// date management
+function pad(number) {
+  return number.toString().padStart(2, '0');
+}
+
+function toDateTimeLocal(date) {
+  // convert date
+  const year = date.getFullYear();
+  const month = pad(date.getMonth() + 1);
+  const day = pad(date.getDate());
+  // convert time
+  const hours = pad(date.getHours());
+  const minutes = pad(date.getMinutes());
+
+  return `${year}-${month}-${day}T${hours}:${minutes}`;
+}
+
+function calculatePastDate(days, hours, mins, now = new Date()) {
+  const newDate = now;
+  if (days > 0) newDate.setDate(newDate.getDate() - days);
+  if (hours > 0) newDate.setHours(newDate.getHours() - hours);
+  if (mins > 0) newDate.seMinutes(newDate.geMinutes() - mins);
+  return newDate;
+}
+
+const TEMPLATE = `
+  <div class="form-field picker-field">
+    <input
+      type="text"
+      aria-haspopup="listbox"
+      readonly />
+    <ul class="menu" id="timeframe-menu" aria-labelledby="timeframe" role="listbox" hidden></ul>
+    <div class="form-field datetime-wrapper" hidden>
+      <div class="form-field datetime-field" aria-hidden="true">
+        <label for="date-from">From</label>
+        <input name="date-from" type="datetime-local" readonly />
+      </div>
+      <div class="form-field datetime-field" aria-hidden="true">
+        <label for="date-to">To</label>
+        <input name="date-to" type="datetime-local" readonly />
+      </div>
+    </div>
+  </div>
+`;
+
+export default class TimeRangePicker extends HTMLElement {
+  constructor() {
+    super();
+
+    this.inputElement = null;
+    this.dropdownElement = null;
+    this.fromElement = null;
+    this.toElement = null;
+    this.datetimeWrapperElement = null;
+
+    this.id = this.getAttribute('id');
+    console.log('id', this.id);
+  }
+
+  connectedCallback() {
+    this.initDOM();
+    this.initValue();
+  }
+
+  initDOM() {
+    console.log('initDOM');
+
+    const section = document.createElement('section');
+    section.className = 'form-field timeframe-wrapper';
+    section.innerHTML = TEMPLATE;
+
+    const sul = section.querySelector('ul');
+    const options = this.querySelectorAll('ul li');
+
+    let defaultValue = null;
+    options.forEach((option) => {
+      if (option.getAttribute('aria-selected') === 'true') {
+        defaultValue = option.dataset.value;
+      } else {
+        option.setAttribute('aria-selected', false);
+      }
+      option.dataset.role = 'option';
+      sul.appendChild(option);
+    });
+
+    console.log('defaultValue', defaultValue);
+
+    this.innerHTML = '';
+    this.appendChild(section);
+
+    this.inputElement = this.querySelector('input');
+    this.dropdownElement = this.querySelector('ul');
+    this.fromElement = this.querySelector('[name="date-from"]');
+    this.toElement = this.querySelector('[name="date-to"]');
+    this.datetimeWrapperElement = this.querySelector('.datetime-wrapper');
+
+    this.registerListeners();
+
+    if (defaultValue) {
+      // defaultOption.dispatchEvent(new Event('click'));
+      // this.updateTimeframe(value);
+      this.value = defaultValue;
+    }
+  }
+
+  initValue() {
+    const { toElement } = this;
+    toElement.value = toDateTimeLocal(new Date());
+  }
+
+  registerListeners() {
+    const { inputElement, dropdownElement } = this;
+    const options = dropdownElement.querySelectorAll('li');
+
+    inputElement.addEventListener('click', () => {
+      const expanded = inputElement.getAttribute('aria-expanded') === 'true';
+      inputElement.setAttribute('aria-expanded', !expanded);
+      dropdownElement.hidden = expanded;
+    });
+
+    const $this = this;
+    options.forEach((option) => {
+      option.addEventListener('click', () => {
+        $this.value = option.dataset.value;
+
+        // update to and from
+        // $this.updateTimeframe(option.dataset.value);
+
+        // inputElement.value = option.textContent;
+        // inputElement.setAttribute('aria-expanded', false);
+        // dropdownElement.hidden = true;
+        // options.forEach((o) => o.setAttribute('aria-selected', o === option));
+
+        // inputElement.dispatchEvent(new Event('change', { detail: option.dataset.value }));
+      });
+    });
+  }
+
+  get value() {
+    return this.inputElement.dataset.value;
+  }
+
+  set value(value) {
+    console.log('set value', value);
+
+    const { inputElement, dropdownElement } = this;
+    const option = dropdownElement.querySelector(`li[data-value="${value}"]`);
+    if (!option) {
+      console.error('Invalid value', value);
+      return;
+    }
+
+    inputElement.value = option.textContent;
+    inputElement.dataset.value = option.dataset.value;
+    inputElement.setAttribute('aria-expanded', false);
+
+    const options = dropdownElement.querySelectorAll('li');
+    options.forEach((o) => o.setAttribute('aria-selected', o === option));
+
+    dropdownElement.hidden = true;
+
+    this.updateTimeframe(value);
+
+    this.dispatchEvent(new Event('change', {
+      detail: {
+        value,
+        from: this.fromElement.value,
+        to: this.toElement.value,
+      },
+    }));
+  }
+
+  updateTimeframe(value) {
+    console.log('updateTimeframe', value);
+    const { fromElement, toElement } = this;
+
+    const now = new Date();
+
+    [fromElement, toElement].forEach((field) => {
+      field.readOnly = true;
+    });
+    toElement.value = toDateTimeLocal(now);
+    this.toggleCustomTimeframe(value === 'custom');
+    if (value.includes(':')) {
+      const [days, hours, mins] = value.split(':').map((v) => parseInt(v, 10));
+      const date = calculatePastDate(days, hours, mins);
+      fromElement.value = toDateTimeLocal(date);
+    } else if (value === 'today') {
+      const midnight = now;
+      midnight.setHours(0, 0, 0, 0);
+      fromElement.value = toDateTimeLocal(midnight);
+    } else if (value === 'week') {
+      const lastWeek = now;
+      lastWeek.setHours(7 * 24, 0, 0, 0);
+      fromElement.value = toDateTimeLocal(lastWeek);
+    } else if (value === 'month') {
+      const lastMonth = now;
+      lastMonth.setMonth(now.getMonth() - 1);
+      fromElement.value = toDateTimeLocal(lastMonth);
+    } else if (value === 'year') {
+      const lastYear = now;
+      lastYear.setFullYear(now.getFullYear() - 1);
+      fromElement.value = toDateTimeLocal(lastYear);
+    } else if (value === 'custom') {
+      [fromElement, toElement].forEach((field) => {
+        field.removeAttribute('readonly');
+      });
+    }
+  }
+
+  toggleCustomTimeframe(enabled) {
+    const { inputElement, datetimeWrapperElement } = this;
+
+    inputElement.dataset.custom = enabled;
+    datetimeWrapperElement.hidden = !enabled;
+    [...datetimeWrapperElement.children].forEach((child) => {
+      child.setAttribute('aria-hidden', !enabled);
+    });
+  }
+}
+
+// function keepToFromCurrent(doc) {
+//   const to = doc.getElementById('date-to');
+//   to.setAttribute('max', toDateTimeLocal(new Date()));
+//   const timeframe = doc.getElementById('view');
+//   if (timeframe.value !== 'Custom') {
+//     const options = [...timeframe.parentElement.querySelectorAll('ul > li')];
+//     const { value } = options.find((o) => o.textContent === timeframe.value).dataset;
+//     updateTimeframe(value);
+//   }
+// }
+
+// registerListeners(document);
+
+// function initDateTo(doc) {
+//   const to = doc.getElementById('date-to');
+//   to.value = toDateTimeLocal(new Date());
+
+//   // setInterval(() => {
+//   //   keepToFromCurrent(doc);
+//   // }, 60 * 100);
+// }
+
+// initDateTo(document);
+// updateTimeframe('1:00:00');
diff --git a/tools/rum/elements/url-selector.js b/tools/rum/elements/url-selector.js
index ec5c7655..738a51a8 100644
--- a/tools/rum/elements/url-selector.js
+++ b/tools/rum/elements/url-selector.js
@@ -7,12 +7,12 @@ export default class URLSelector extends HTMLElement {
     super();
     this.template = `
       <style>
-        label {
+        url-selector label {
           display: block;
           margin-right: 8px;
         }
 
-        input {
+        url-selector input {
           width: 100%;
           display: block;
           font: inherit;
@@ -22,7 +22,7 @@ export default class URLSelector extends HTMLElement {
           border: 0;
         }
 
-        input:disabled {
+        url-selector input:disabled {
           background-color: transparent;
           color: black;
         }

From 4e14f7de51ced9fa598c0d6ff3b7b4a93c72027d Mon Sep 17 00:00:00 2001
From: Alexandre Capt <acapt@adobe.com>
Date: Fri, 13 Sep 2024 11:23:03 +0200
Subject: [PATCH 02/20] feat: first shot of time range picker

---
 tools/rum/explorer.html  | 22 +++++++++++++++++++--
 tools/rum/rum-slicer.css | 41 ++++++++++------------------------------
 tools/rum/slicer.js      |  4 +++-
 3 files changed, 33 insertions(+), 34 deletions(-)

diff --git a/tools/rum/explorer.html b/tools/rum/explorer.html
index 3a46fd0b..5885504d 100644
--- a/tools/rum/explorer.html
+++ b/tools/rum/explorer.html
@@ -21,6 +21,7 @@
     import VitalsFacet from './elements/vitals-facet.js';
     import FileFacet from './elements/file-facet.js';
     import URLSelector from './elements/url-selector.js';
+    import TimeRangePicker from './elements/timerange-picker.js';
     window.slicer = {
       Chart: SkylineChart,
     };
@@ -33,9 +34,11 @@
     customElements.define('vitals-facet', VitalsFacet);
     customElements.define('file-facet', FileFacet);
     customElements.define('url-selector', URLSelector);
+    customElements.define('time-range-picker', TimeRangePicker);
   </script>
   <script src="./slicer.js" type="module"></script>
   <link rel="stylesheet" href="./rum-slicer.css">
+  <link rel="stylesheet" href="./elements/timerange-picker.css">
   </head>
 
 <body>
@@ -47,11 +50,25 @@
             <div class="title">
               <url-selector>www.aem.live</url-selector>
               <div>
-                <select id="view">
+                <!-- <select id="view" style="display: none;">
                   <option value="week">Week</option>
                   <option value="month">Month</option>
                   <option value="year">Year</option>
-                </select>
+                </select> -->
+                <time-range-picker id="view">
+                  <ul>
+                    <li data-value="0:12:00">Last 12 hours</li>
+                    <li data-value="0:24:00" aria-selected="true" >Last 24 hours</li>
+                    <li data-value="today">Today</li>
+                    <!-- <li data-value="2:00:00">Last 2 days</li> -->
+                    <li data-value="3:00:00">Last 3 days</li>
+                    <!-- <li data-value="5:00:00">Last 5 days</li> -->
+                    <li data-value="week">Last week</li>
+                    <li data-value="month">Last month</li>
+                    <li data-value="year">Last year</li>
+                    <li data-value="custom">Custom</li>
+                  </ul>
+                </time-range-picker>                
                 <incognito-checkbox></incognito-checkbox>
               </div>
             </div>
@@ -269,6 +286,7 @@ <h2>TTFB</h2>
   <div id="shared-toast" class="toast" aria-hidden="true">
     Link copied to clipboard, ready to share
   </div>
+  <!-- <script src="./elements/timerange-picker.js"></script> -->
 </body>
 
 </html>
\ No newline at end of file
diff --git a/tools/rum/rum-slicer.css b/tools/rum/rum-slicer.css
index feb4515f..eb523f75 100644
--- a/tools/rum/rum-slicer.css
+++ b/tools/rum/rum-slicer.css
@@ -25,6 +25,14 @@
   --light-indigo: #d3d5ff;
   --medium-indigo: #acafff;
   --dark-indigo: #4046ca;
+  --gray-100: #e9e9e9;
+  --gray-200: #e1e1e1;
+  --gray-300: #dadada;
+  --gray-400: #c6c6c6;
+  --gray-500: #8f8f8f;
+  --gray-600: #717171;
+  --gray-700: #505050;
+
 }
 
 body {
@@ -45,19 +53,16 @@ body main > .section {
 /* general performance */
 
 main li.score-good, vitals-facet div[data-value^="good"] label {
-  opacity: 1;
   color: var(--dark-green);
   background-color: var(--light-green);
 }
 
 main li.score-ni, vitals-facet div[data-value^="ni"] label {
-  opacity: 1;
   color: var(--dark-orange);
   background-color: var(--light-orange);
 }
 
 main li.score-poor, vitals-facet div[data-value^="poor"] label {
-  opacity: 1;
   color: var(--dark-red);
   background-color: var(--light-red);
 }
@@ -161,7 +166,6 @@ main .key-metrics ul > * p {
 main .key-metrics ul > * p span.extra {
   font-weight: normal;
   font-size: 80%;
-  opacity: 0.6;
 }
 
 main .key-metrics ul > * p span.extra::before {
@@ -302,7 +306,6 @@ figcaption span.lab {
   background-color: var(--light-indigo);
   padding: 0 1em;
   text-align: end;
-  opacity: 0.6;
   margin-right: 0.5em;
   margin-bottom: 0.5em;
   white-space: nowrap;
@@ -320,15 +323,6 @@ figcaption span.lab {
   background-color: var(--light-purple);
 }
 
-.filter-tags > span.filter-tag-lcp,
-.filter-tags > span.filter-tag-cls,
-.filter-tags > span.filter-tag-inp,
-.filter-tags > span.filter-tag-conversions,
-.filter-tags > span.filter-tag-visits {
-  opacity: 1;
-}
-
-
 /* filters */
 
 .quick-filter {
@@ -400,14 +394,9 @@ vitals-facet label {
   background-color: #eee;
   padding: 2px 6px;
   text-align: end;
-  opacity: 0.2;
   font-size: 12px;
 }
 
-fieldset li[class$="-"] {
-  opacity: 0.2;
-}
-
 fieldset li.interesting {
   border-width: 2px;
   padding: 2px 16px;
@@ -464,26 +453,16 @@ vitals-facet label::before {
   word-break: break-all;
 }
 
-#facets fieldset label span.count, #facets fieldset label span.extra {
-  opacity: 0.6;
-}
-
-#facets fieldset div:hover span.count, #facets fieldset div:hover span.extra {
-  opacity: 1;
-}
-
 #facets fieldset label span.extra {
   display: none;
 }
 
 #facets fieldset label span.extra.interesting {
   display: inline;
-  opacity: 0.8;
 }
 
 #facets fieldset label span.extra.significant {
   display: inline;
-  opacity: 0.9;
 }
 
 #facets fieldset label span.count::before,
@@ -600,7 +579,6 @@ vitals-facet fieldset label {
 }
 
 #facets vitals-facet fieldset input[type=checkbox] {
-  opacity: 0.1;
   width: 0;
   height: 0;
 }
@@ -776,6 +754,7 @@ vitals-facet fieldset label {
   border: 2px solid;
   top: 8px;
   left: 8px;
+  z-index: 1;
 }
 
 .clipboard::after {
@@ -791,6 +770,7 @@ vitals-facet fieldset label {
   border-right: 0;
   top: 5px;
   left: 5px;
+  z-index: 1;
 }
 
 /* toasts */
@@ -805,7 +785,6 @@ vitals-facet fieldset label {
   max-width: 80%;
   background-color: #444;
   color: white;
-  opacity: 1;
   top: 32px;
   left: 0;
   right: 0;
diff --git a/tools/rum/slicer.js b/tools/rum/slicer.js
index f362903a..9aa8d7a8 100644
--- a/tools/rum/slicer.js
+++ b/tools/rum/slicer.js
@@ -361,7 +361,9 @@ const io = new IntersectionObserver((entries) => {
       draw();
     });
 
-    elems.viewSelect.addEventListener('input', () => {
+    console.log('elems.viewSelect', elems.viewSelect);
+    elems.viewSelect.addEventListener('change', () => {
+      console.log('view change');
       updateState();
       window.location.reload();
     });

From e960ceb26d541a8b987823c70a2da7c1be45ca4a Mon Sep 17 00:00:00 2001
From: Alexandre Capt <acapt@adobe.com>
Date: Tue, 17 Sep 2024 16:10:05 +0200
Subject: [PATCH 03/20] feat: optimized chart

---
 tools/rum/charts/skyline.js            | 88 ++++++++++++++++++++++----
 tools/rum/elements/timerange-picker.js | 53 +++++++++++-----
 tools/rum/explorer.html                | 12 ++--
 tools/rum/loader.js                    | 54 ++++++++++++++++
 tools/rum/slicer.js                    | 46 +++++++++++---
 5 files changed, 211 insertions(+), 42 deletions(-)

diff --git a/tools/rum/charts/skyline.js b/tools/rum/charts/skyline.js
index 7d4b4bc6..ccb7f509 100644
--- a/tools/rum/charts/skyline.js
+++ b/tools/rum/charts/skyline.js
@@ -56,12 +56,19 @@ 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);
+      } else {
+        startDate = new Date(this.chartConfig.startDate);
+      }
+
       const slots = new Set(existing);
       const slotTime = new Date(startDate);
       // return Array.from(slots);
@@ -466,13 +473,58 @@ export default class SkylineChart extends AbstractChart {
   }
 
   async draw() {
+    console.log('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');
+
+    // const view = ['week', 'month', 'year'].indexOf(params.get('view')) !== -1
+    //   ? params.get('view')
+    //   : 'week';
+
     // eslint-disable-next-line no-unused-vars
-    const endDate = params.get('endDate') ? `${params.get('endDate')}T00:00:00` : null;
+    let startDate = null;
+    let endDate = null;
+    if (view === 'custom') {
+      startDate = params.get('startDate');
+      endDate = params.get('endDate');
+    }
+
+    console.log('startDate', startDate);
+    console.log('endDate', 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
+        console.log('chart draw - less than a day');
+        customView = 'hour';
+        unit = 'hour';
+        units = 24;
+      } else if (diff < (1000 * 60 * 60 * 24 * 7)) {
+        // less than a week
+        console.log('chart draw - week view', (diff / (1000 * 60 * 60)));
+        customView = 'week';
+        unit = 'hour';
+        units = (diff / (1000 * 60 * 60));
+      } else if (diff < (1000 * 60 * 60 * 24 * 31)) {
+        // less than a month
+        console.log('chart draw - less than a month');
+        customView = 'month';
+        unit = 'day';
+        units = 30;
+      } else if (diff < (1000 * 60 * 60 * 24 * 365)) {
+        // less than a year
+        console.log('chart draw - less than a year');
+        customView = 'year';
+        unit = 'month';
+        units = 12;
+      }
+    }
+
     const focus = params.get('focus');
 
     if (this.dataChunks.filtered.length < 1000) {
@@ -487,6 +539,7 @@ export default class SkylineChart extends AbstractChart {
         unit: 'day',
         units: 30,
         focus,
+        startDate,
         endDate,
       },
       week: {
@@ -494,6 +547,7 @@ export default class SkylineChart extends AbstractChart {
         unit: 'hour',
         units: 24 * 7,
         focus,
+        startDate,
         endDate,
       },
       year: {
@@ -501,6 +555,15 @@ export default class SkylineChart extends AbstractChart {
         unit: 'week',
         units: 52,
         focus,
+        startDate,
+        endDate,
+      },
+      custom: {
+        view: customView,
+        unit,
+        units,
+        focus,
+        startDate,
         endDate,
       },
     };
@@ -574,6 +637,9 @@ export default class SkylineChart extends AbstractChart {
     this.stepSize = undefined;
     this.clsAlreadyLabeled = false;
     this.lcpAlreadyLabeled = false;
+
+    console.log('this.chart.data', this.chart.data);
+
     this.chart.update();
   }
 }
diff --git a/tools/rum/elements/timerange-picker.js b/tools/rum/elements/timerange-picker.js
index 0b3d16e6..95565f49 100644
--- a/tools/rum/elements/timerange-picker.js
+++ b/tools/rum/elements/timerange-picker.js
@@ -54,7 +54,6 @@ export default class TimeRangePicker extends HTMLElement {
     this.datetimeWrapperElement = null;
 
     this.id = this.getAttribute('id');
-    console.log('id', this.id);
   }
 
   connectedCallback() {
@@ -96,11 +95,11 @@ export default class TimeRangePicker extends HTMLElement {
 
     this.registerListeners();
 
-    if (defaultValue) {
-      // defaultOption.dispatchEvent(new Event('click'));
-      // this.updateTimeframe(value);
-      this.value = defaultValue;
-    }
+    // if (defaultValue) {
+    //   // defaultOption.dispatchEvent(new Event('click'));
+    //   // this.updateTimeframe(value);
+    //   this.value = defaultValue;
+    // }
   }
 
   initValue() {
@@ -121,7 +120,11 @@ export default class TimeRangePicker extends HTMLElement {
     const $this = this;
     options.forEach((option) => {
       option.addEventListener('click', () => {
-        $this.value = option.dataset.value;
+        $this.value = {
+          value: option.dataset.value,
+          from: $this.fromElement.value || null,
+          to: $this.toElement.value || null,
+        };
 
         // update to and from
         // $this.updateTimeframe(option.dataset.value);
@@ -137,13 +140,20 @@ export default class TimeRangePicker extends HTMLElement {
   }
 
   get value() {
-    return this.inputElement.dataset.value;
+    return {
+      value: this.inputElement.dataset.value,
+      from: this.fromElement.value,
+      to: this.toElement.value,
+    };
   }
 
-  set value(value) {
-    console.log('set value', value);
+  set value(config) {
+    console.log('set value', config);
+    const { value, from, to } = config;
+    const {
+      inputElement, dropdownElement, fromElement, toElement,
+    } = this;
 
-    const { inputElement, dropdownElement } = this;
     const option = dropdownElement.querySelector(`li[data-value="${value}"]`);
     if (!option) {
       console.error('Invalid value', value);
@@ -159,7 +169,19 @@ export default class TimeRangePicker extends HTMLElement {
 
     dropdownElement.hidden = true;
 
-    this.updateTimeframe(value);
+    if (from) {
+      fromElement.value = toDateTimeLocal(new Date(from));
+    }
+
+    if (to) {
+      toElement.value = toDateTimeLocal(new Date(to));
+    }
+
+    this.updateTimeframe({
+      value,
+      from,
+      to,
+    });
 
     this.dispatchEvent(new Event('change', {
       detail: {
@@ -170,8 +192,7 @@ export default class TimeRangePicker extends HTMLElement {
     }));
   }
 
-  updateTimeframe(value) {
-    console.log('updateTimeframe', value);
+  updateTimeframe({ value, to = null }) {
     const { fromElement, toElement } = this;
 
     const now = new Date();
@@ -179,7 +200,9 @@ export default class TimeRangePicker extends HTMLElement {
     [fromElement, toElement].forEach((field) => {
       field.readOnly = true;
     });
-    toElement.value = toDateTimeLocal(now);
+    if (!to) {
+      toElement.value = toDateTimeLocal(now);
+    }
     this.toggleCustomTimeframe(value === 'custom');
     if (value.includes(':')) {
       const [days, hours, mins] = value.split(':').map((v) => parseInt(v, 10));
diff --git a/tools/rum/explorer.html b/tools/rum/explorer.html
index 5885504d..e02eb508 100644
--- a/tools/rum/explorer.html
+++ b/tools/rum/explorer.html
@@ -56,15 +56,15 @@
                   <option value="year">Year</option>
                 </select> -->
                 <time-range-picker id="view">
-                  <ul>
-                    <li data-value="0:12:00">Last 12 hours</li>
-                    <li data-value="0:24:00" aria-selected="true" >Last 24 hours</li>
-                    <li data-value="today">Today</li>
+                  <ul hidden>
+                    <!-- <li data-value="0:12:00">Last 12 hours</li> -->
+                    <!-- <li data-value="0:24:00">Last 24 hours</li> -->
+                    <!-- <li data-value="today">Today</li> -->
                     <!-- <li data-value="2:00:00">Last 2 days</li> -->
-                    <li data-value="3:00:00">Last 3 days</li>
+                    <!-- <li data-value="3:00:00">Last 3 days</li> -->
                     <!-- <li data-value="5:00:00">Last 5 days</li> -->
                     <li data-value="week">Last week</li>
-                    <li data-value="month">Last month</li>
+                    <li data-value="month" aria-selected="true">Last month</li>
                     <li data-value="year">Last year</li>
                     <li data-value="custom">Custom</li>
                   </ul>
diff --git a/tools/rum/loader.js b/tools/rum/loader.js
index 8c920a7c..1e8b8cc9 100644
--- a/tools/rum/loader.js
+++ b/tools/rum/loader.js
@@ -125,4 +125,58 @@ export default class DataLoader {
     const chunks = Promise.all(promises);
     return chunks;
   }
+
+  async fetchPeriod(startDate, endDate) {
+    const start = new Date(startDate);
+    const end = endDate ? new Date(endDate) : new Date();
+
+    const diff = end.getTime() - start.getTime();
+    if (diff < 0) {
+      throw new Error('Start date must be before end date');
+    }
+
+    const promises = [];
+
+    console.log('fetchPeriod', start.toString(), end.toString());
+
+    if (diff < (1000 * 60 * 60 * 24)) {
+      // less than a day
+      const hours = Math.round(diff / (1000 * 60 * 60));
+
+      for (let i = 0; i < hours; i += 1) {
+        console.log('fetching hour', start.toString());
+        promises.push(this.fetchUTCHour(start.toISOString()));
+        start.setTime(start.getTime() + (1000 * 60 * 60));
+      }
+    } else if (diff < (1000 * 60 * 60 * 24 * 7)) {
+      // less than a week
+      const days = Math.round(diff / (1000 * 60 * 60 * 24));
+
+      for (let i = 0; i < days; i += 1) {
+        console.log('fetching day', start.toString());
+        promises.push(this.fetchUTCDay(start.toISOString()));
+        start.setDate(start.getDate() + 1);
+      }
+    } else if (diff < (1000 * 60 * 60 * 24 * 31)) {
+      // less than a month
+      const days = Math.round(diff / (1000 * 60 * 60 * 24));
+
+      for (let i = 0; i < days; i += 1) {
+        console.log('fetching day', start.toString());
+        promises.push(this.fetchUTCDay(start.toISOString()));
+        start.setDate(start.getDate() + 1);
+      }
+    } else {
+      const months = end.getMonth() - start.getMonth() + 1;
+
+      for (let i = 0; i < months; i += 1) {
+        console.log('fetching month', start.toString());
+        promises.push(this.fetchUTCMonth(start.toISOString()));
+        start.setMonth(start.getMonth() + 1);
+      }
+    }
+
+    const chunks = Promise.all(promises);
+    return chunks;
+  }
 }
diff --git a/tools/rum/slicer.js b/tools/rum/slicer.js
index 9aa8d7a8..b62a5243 100644
--- a/tools/rum/slicer.js
+++ b/tools/rum/slicer.js
@@ -272,9 +272,13 @@ export async function draw() {
   console.log(`full ui updated in ${new Date() - startTime}ms`);
 }
 
-async function loadData(scope) {
+async function loadData(config) {
+  console.log('loadData', config);
+
+  const scope = config.value;
   const params = new URL(window.location.href).searchParams;
-  const endDate = params.get('endDate') ? `${params.get('endDate')}T00:00:00` : null;
+  const startDate = params.get('startDate') ? `${params.get('startDate')}` : null;
+  const endDate = params.get('endDate') ? `${params.get('endDate')}` : null;
 
   if (scope === 'week') {
     dataChunks.load(await loader.fetchLastWeek(endDate));
@@ -286,6 +290,10 @@ async function loadData(scope) {
     dataChunks.load(await loader.fetchPrevious12Months(endDate));
   }
 
+  if (scope === 'custom') {
+    dataChunks.load(await loader.fetchPeriod(startDate, endDate));
+  }
+
   draw();
 }
 
@@ -294,8 +302,14 @@ export function updateState() {
   const { searchParams } = new URL(window.location.href);
   url.searchParams.set('domain', DOMAIN);
   url.searchParams.set('filter', elems.filterInput.value);
-  url.searchParams.set('view', elems.viewSelect.value);
-  if (searchParams.get('endDate')) url.searchParams.set('endDate', searchParams.get('endDate'));
+
+  const viewConfig = elems.viewSelect.value;
+  url.searchParams.set('view', viewConfig.value);
+  if (viewConfig.value === 'custom') {
+    url.searchParams.set('startDate', viewConfig.from);
+    url.searchParams.set('endDate', viewConfig.to);
+  }
+  // if (searchParams.get('endDate')) url.searchParams.set('endDate', searchParams.get('endDate'));
   if (searchParams.get('metrics')) url.searchParams.set('metrics', searchParams.get('metrics'));
 
   elems.sidebar.querySelectorAll('input').forEach((e) => {
@@ -334,11 +348,21 @@ const io = new IntersectionObserver((entries) => {
     elems.filterInput = sidebar.elems.filterInput;
 
     const params = new URL(window.location).searchParams;
-    const view = params.get('view') || 'week';
+    let view = params.get('view');
+    if (!view) {
+      view = 'week';
+      params.set('view', view);
+      const url = new URL(window.location.href);
+      url.search = params.toString();
+      window.history.replaceState({}, '', url);
+    }
+
+    const startDate = params.get('startDate') ? `${params.get('startDate')}` : null;
+    const endDate = params.get('endDate') ? `${params.get('endDate')}` : null;
 
     elems.incognito.addEventListener('change', async () => {
       loader.domainKey = elems.incognito.getAttribute('domainkey');
-      await loadData(view);
+      await loadData(elems.viewSelect.value);
       herochart.draw();
     });
 
@@ -346,14 +370,18 @@ const io = new IntersectionObserver((entries) => {
     // sidebar.updateFacets();
 
     elems.filterInput.value = params.get('filter');
-    elems.viewSelect.value = view;
+    elems.viewSelect.value = {
+      value: view,
+      from: startDate,
+      to: endDate,
+    };
     setDomain(params.get('domain') || 'www.thinktanked.org', params.get('domainkey') || '');
 
     const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
     elems.timezoneElement.textContent = timezone;
 
     if (elems.incognito.getAttribute('domainkey')) {
-      loadData(view);
+      loadData(elems.viewSelect.value);
     }
 
     elems.filterInput.addEventListener('input', () => {
@@ -361,9 +389,7 @@ const io = new IntersectionObserver((entries) => {
       draw();
     });
 
-    console.log('elems.viewSelect', elems.viewSelect);
     elems.viewSelect.addEventListener('change', () => {
-      console.log('view change');
       updateState();
       window.location.reload();
     });

From ab9b4a740cafa5253ca00f9b68b07c68e9272db3 Mon Sep 17 00:00:00 2001
From: Alexandre Capt <acapt@adobe.com>
Date: Thu, 19 Sep 2024 10:19:35 +0200
Subject: [PATCH 04/20] feat: more

---
 tools/rum/charts/skyline.js |  2 +-
 tools/rum/loader.js         | 47 ++++++++++++++++++++++++++-----------
 tools/rum/slicer.js         | 16 ++++++++++++-
 3 files changed, 49 insertions(+), 16 deletions(-)

diff --git a/tools/rum/charts/skyline.js b/tools/rum/charts/skyline.js
index 3f4c998c..368ce7d5 100644
--- a/tools/rum/charts/skyline.js
+++ b/tools/rum/charts/skyline.js
@@ -509,7 +509,7 @@ export default class SkylineChart extends AbstractChart {
         console.log('chart draw - week view', (diff / (1000 * 60 * 60)));
         customView = 'week';
         unit = 'hour';
-        units = (diff / (1000 * 60 * 60));
+        units = Math.round(diff / (1000 * 60 * 60));
       } else if (diff < (1000 * 60 * 60 * 24 * 31)) {
         // less than a month
         console.log('chart draw - less than a month');
diff --git a/tools/rum/loader.js b/tools/rum/loader.js
index 1e8b8cc9..bd1f26de 100644
--- a/tools/rum/loader.js
+++ b/tools/rum/loader.js
@@ -54,7 +54,19 @@ export default class DataLoader {
     return u.toString();
   }
 
-  async fetchUTCMonth(utcISOString) {
+  // eslint-disable-next-line class-methods-use-this
+  filterByDateRange(data, start, end) {
+    if (start || end) {
+      const filtered = data.filter((bundle) => {
+        const time = new Date(bundle.timeSlot);
+        return ((start ? time >= start : true) && (end ? time <= end : true));
+      });
+      return filtered;
+    }
+    return data;
+  }
+
+  async fetchUTCMonth(utcISOString, start, end) {
     const [date] = utcISOString.split('T');
     const dateSplits = date.split('-');
     dateSplits.pop();
@@ -64,10 +76,10 @@ export default class DataLoader {
     const json = await resp.json();
     const { rumBundles } = json;
     rumBundles.forEach((bundle) => addCalculatedProps(bundle));
-    return { date, rumBundles };
+    return { date, rumBundles: this.filterByDateRange(rumBundles, start, end) };
   }
 
-  async fetchUTCDay(utcISOString) {
+  async fetchUTCDay(utcISOString, start, end) {
     const [date] = utcISOString.split('T');
     const datePath = date.split('-').join('/');
     const apiRequestURL = this.apiURL(datePath);
@@ -75,10 +87,10 @@ export default class DataLoader {
     const json = await resp.json();
     const { rumBundles } = json;
     rumBundles.forEach((bundle) => addCalculatedProps(bundle));
-    return { date, rumBundles };
+    return { date, rumBundles: this.filterByDateRange(rumBundles, start, end) };
   }
 
-  async fetchUTCHour(utcISOString) {
+  async fetchUTCHour(utcISOString, start, end) {
     const [date, time] = utcISOString.split('T');
     const datePath = date.split('-').join('/');
     const hour = time.split(':')[0];
@@ -87,7 +99,7 @@ export default class DataLoader {
     const json = await resp.json();
     const { rumBundles } = json;
     rumBundles.forEach((bundle) => addCalculatedProps(bundle));
-    return { date, hour, rumBundles };
+    return { date, hour, rumBundles: this.filterByDateRange(rumBundles, start, end) };
   }
 
   async fetchLastWeek() {
@@ -128,6 +140,7 @@ export default class DataLoader {
 
   async fetchPeriod(startDate, endDate) {
     const start = new Date(startDate);
+    const originalStart = new Date(start);
     const end = endDate ? new Date(endDate) : new Date();
 
     const diff = end.getTime() - start.getTime();
@@ -139,39 +152,45 @@ export default class DataLoader {
 
     console.log('fetchPeriod', start.toString(), end.toString());
 
+    // for all cases: +2 to cover bondary cases: start and end might be on a different UTC day
+    // (will be filtered out by start / end range filter)
+
     if (diff < (1000 * 60 * 60 * 24)) {
       // less than a day
-      const hours = Math.round(diff / (1000 * 60 * 60));
+      const hours = (end.getTime() - start.getTime()) / (1000 * 60 * 60) + 2;
 
       for (let i = 0; i < hours; i += 1) {
         console.log('fetching hour', start.toString());
-        promises.push(this.fetchUTCHour(start.toISOString()));
+        promises.push(this.fetchUTCHour(start.toISOString(), originalStart, end));
         start.setTime(start.getTime() + (1000 * 60 * 60));
       }
     } else if (diff < (1000 * 60 * 60 * 24 * 7)) {
       // less than a week
-      const days = Math.round(diff / (1000 * 60 * 60 * 24));
+      // +2 to cover bondary cases: start and end might be on a different UTC day
+      const days = end.getDate() - start.getDate() + 2;
 
       for (let i = 0; i < days; i += 1) {
         console.log('fetching day', start.toString());
-        promises.push(this.fetchUTCDay(start.toISOString()));
+        promises.push(this.fetchUTCDay(start.toISOString(), originalStart, end));
+        // promises.push(this.fetchUTCDay(start.toISOString()));
         start.setDate(start.getDate() + 1);
       }
     } else if (diff < (1000 * 60 * 60 * 24 * 31)) {
       // less than a month
-      const days = Math.round(diff / (1000 * 60 * 60 * 24));
+      const days = end.getDate() - start.getDate() + 2;
 
       for (let i = 0; i < days; i += 1) {
         console.log('fetching day', start.toString());
-        promises.push(this.fetchUTCDay(start.toISOString()));
+        promises.push(this.fetchUTCDay(start.toISOString(), originalStart, end));
+        // promises.push(this.fetchUTCDay(start.toISOString()));
         start.setDate(start.getDate() + 1);
       }
     } else {
-      const months = end.getMonth() - start.getMonth() + 1;
+      const months = end.getMonth() - start.getMonth() + 2;
 
       for (let i = 0; i < months; i += 1) {
         console.log('fetching month', start.toString());
-        promises.push(this.fetchUTCMonth(start.toISOString()));
+        promises.push(this.fetchUTCMonth(start.toISOString(), originalStart, end));
         start.setMonth(start.getMonth() + 1);
       }
     }
diff --git a/tools/rum/slicer.js b/tools/rum/slicer.js
index 0973db98..cd476d93 100644
--- a/tools/rum/slicer.js
+++ b/tools/rum/slicer.js
@@ -355,9 +355,22 @@ const io = new IntersectionObserver((entries) => {
       window.history.replaceState({}, '', url);
     }
 
-    const startDate = params.get('startDate') ? `${params.get('startDate')}` : null;
+    let startDate = params.get('startDate') ? `${params.get('startDate')}` : null;
     const endDate = params.get('endDate') ? `${params.get('endDate')}` : null;
 
+    if (startDate && endDate) {
+      const start = new Date(startDate);
+      const end = new Date(endDate);
+      if (start > end) {
+        start.setTime(end.getTime() - 1000 * 60 * 60 * 24);
+        startDate = start.toISOString();
+        params.set('startDate', startDate);
+        const url = new URL(window.location.href);
+        url.search = params.toString();
+        window.history.replaceState({}, '', url);
+      }
+    }
+
     elems.incognito.addEventListener('change', async () => {
       loader.domainKey = elems.incognito.getAttribute('domainkey');
 
@@ -374,6 +387,7 @@ const io = new IntersectionObserver((entries) => {
       from: startDate,
       to: endDate,
     };
+
     setDomain(params.get('domain') || 'www.thinktanked.org', params.get('domainkey') || '');
 
     const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;

From b16da214ecf1165441d84f014e266a4247f885e6 Mon Sep 17 00:00:00 2001
From: Alexandre Capt <acapt@adobe.com>
Date: Thu, 19 Sep 2024 11:06:38 +0200
Subject: [PATCH 05/20] feat: no time

---
 tools/rum/charts/skyline.js            | 14 ++---
 tools/rum/elements/timerange-picker.js | 86 +++++---------------------
 tools/rum/explorer.html                | 11 ----
 tools/rum/loader.js                    | 18 +-----
 4 files changed, 25 insertions(+), 104 deletions(-)

diff --git a/tools/rum/charts/skyline.js b/tools/rum/charts/skyline.js
index 368ce7d5..c8630925 100644
--- a/tools/rum/charts/skyline.js
+++ b/tools/rum/charts/skyline.js
@@ -65,6 +65,7 @@ export default class SkylineChart extends AbstractChart {
         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);
       }
@@ -79,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
@@ -478,10 +480,6 @@ export default class SkylineChart extends AbstractChart {
     const params = new URL(window.location).searchParams;
     const view = params.get('view');
 
-    // const view = ['week', 'month', 'year'].indexOf(params.get('view')) !== -1
-    //   ? params.get('view')
-    //   : 'week';
-
     // eslint-disable-next-line no-unused-vars
     let startDate = null;
     let endDate = null;
@@ -519,9 +517,9 @@ export default class SkylineChart extends AbstractChart {
       } else if (diff < (1000 * 60 * 60 * 24 * 365)) {
         // less than a year
         console.log('chart draw - less than a year');
-        customView = 'year';
-        unit = 'month';
-        units = 12;
+        customView = 'week';
+        unit = 'week';
+        units = Math.round(diff / (1000 * 60 * 60 * 24 * 7));
       }
     }
 
@@ -570,6 +568,8 @@ export default class SkylineChart extends AbstractChart {
 
     const config = configs[view];
 
+    console.log('config', config);
+
     this.config = config;
     this.defineSeries();
 
diff --git a/tools/rum/elements/timerange-picker.js b/tools/rum/elements/timerange-picker.js
index 95565f49..215f360d 100644
--- a/tools/rum/elements/timerange-picker.js
+++ b/tools/rum/elements/timerange-picker.js
@@ -3,24 +3,17 @@ function pad(number) {
   return number.toString().padStart(2, '0');
 }
 
-function toDateTimeLocal(date) {
+function toDateString(date) {
   // convert date
   const year = date.getFullYear();
   const month = pad(date.getMonth() + 1);
   const day = pad(date.getDate());
   // convert time
-  const hours = pad(date.getHours());
-  const minutes = pad(date.getMinutes());
+  // const hours = pad(date.getHours());
+  // const minutes = pad(date.getMinutes());
 
-  return `${year}-${month}-${day}T${hours}:${minutes}`;
-}
-
-function calculatePastDate(days, hours, mins, now = new Date()) {
-  const newDate = now;
-  if (days > 0) newDate.setDate(newDate.getDate() - days);
-  if (hours > 0) newDate.setHours(newDate.getHours() - hours);
-  if (mins > 0) newDate.seMinutes(newDate.geMinutes() - mins);
-  return newDate;
+  // return `${year}-${month}-${day}T${hours}:${minutes}`;
+  return `${year}-${month}-${day}`;
 }
 
 const TEMPLATE = `
@@ -33,11 +26,11 @@ const TEMPLATE = `
     <div class="form-field datetime-wrapper" hidden>
       <div class="form-field datetime-field" aria-hidden="true">
         <label for="date-from">From</label>
-        <input name="date-from" type="datetime-local" readonly />
+        <input name="date-from" type="date" readonly />
       </div>
       <div class="form-field datetime-field" aria-hidden="true">
         <label for="date-to">To</label>
-        <input name="date-to" type="datetime-local" readonly />
+        <input name="date-to" type="date" readonly />
       </div>
     </div>
   </div>
@@ -94,17 +87,11 @@ export default class TimeRangePicker extends HTMLElement {
     this.datetimeWrapperElement = this.querySelector('.datetime-wrapper');
 
     this.registerListeners();
-
-    // if (defaultValue) {
-    //   // defaultOption.dispatchEvent(new Event('click'));
-    //   // this.updateTimeframe(value);
-    //   this.value = defaultValue;
-    // }
   }
 
   initValue() {
     const { toElement } = this;
-    toElement.value = toDateTimeLocal(new Date());
+    toElement.value = toDateString(new Date());
   }
 
   registerListeners() {
@@ -125,16 +112,6 @@ export default class TimeRangePicker extends HTMLElement {
           from: $this.fromElement.value || null,
           to: $this.toElement.value || null,
         };
-
-        // update to and from
-        // $this.updateTimeframe(option.dataset.value);
-
-        // inputElement.value = option.textContent;
-        // inputElement.setAttribute('aria-expanded', false);
-        // dropdownElement.hidden = true;
-        // options.forEach((o) => o.setAttribute('aria-selected', o === option));
-
-        // inputElement.dispatchEvent(new Event('change', { detail: option.dataset.value }));
       });
     });
   }
@@ -170,11 +147,11 @@ export default class TimeRangePicker extends HTMLElement {
     dropdownElement.hidden = true;
 
     if (from) {
-      fromElement.value = toDateTimeLocal(new Date(from));
+      fromElement.value = toDateString(new Date(from));
     }
 
     if (to) {
-      toElement.value = toDateTimeLocal(new Date(to));
+      toElement.value = toDateString(new Date(to));
     }
 
     this.updateTimeframe({
@@ -201,29 +178,21 @@ export default class TimeRangePicker extends HTMLElement {
       field.readOnly = true;
     });
     if (!to) {
-      toElement.value = toDateTimeLocal(now);
+      toElement.value = toDateString(now);
     }
     this.toggleCustomTimeframe(value === 'custom');
-    if (value.includes(':')) {
-      const [days, hours, mins] = value.split(':').map((v) => parseInt(v, 10));
-      const date = calculatePastDate(days, hours, mins);
-      fromElement.value = toDateTimeLocal(date);
-    } else if (value === 'today') {
-      const midnight = now;
-      midnight.setHours(0, 0, 0, 0);
-      fromElement.value = toDateTimeLocal(midnight);
-    } else if (value === 'week') {
+    if (value === 'week') {
       const lastWeek = now;
       lastWeek.setHours(7 * 24, 0, 0, 0);
-      fromElement.value = toDateTimeLocal(lastWeek);
+      fromElement.value = toDateString(lastWeek);
     } else if (value === 'month') {
       const lastMonth = now;
       lastMonth.setMonth(now.getMonth() - 1);
-      fromElement.value = toDateTimeLocal(lastMonth);
+      fromElement.value = toDateString(lastMonth);
     } else if (value === 'year') {
       const lastYear = now;
       lastYear.setFullYear(now.getFullYear() - 1);
-      fromElement.value = toDateTimeLocal(lastYear);
+      fromElement.value = toDateString(lastYear);
     } else if (value === 'custom') {
       [fromElement, toElement].forEach((field) => {
         field.removeAttribute('readonly');
@@ -241,28 +210,3 @@ export default class TimeRangePicker extends HTMLElement {
     });
   }
 }
-
-// function keepToFromCurrent(doc) {
-//   const to = doc.getElementById('date-to');
-//   to.setAttribute('max', toDateTimeLocal(new Date()));
-//   const timeframe = doc.getElementById('view');
-//   if (timeframe.value !== 'Custom') {
-//     const options = [...timeframe.parentElement.querySelectorAll('ul > li')];
-//     const { value } = options.find((o) => o.textContent === timeframe.value).dataset;
-//     updateTimeframe(value);
-//   }
-// }
-
-// registerListeners(document);
-
-// function initDateTo(doc) {
-//   const to = doc.getElementById('date-to');
-//   to.value = toDateTimeLocal(new Date());
-
-//   // setInterval(() => {
-//   //   keepToFromCurrent(doc);
-//   // }, 60 * 100);
-// }
-
-// initDateTo(document);
-// updateTimeframe('1:00:00');
diff --git a/tools/rum/explorer.html b/tools/rum/explorer.html
index e02eb508..b4fab3da 100644
--- a/tools/rum/explorer.html
+++ b/tools/rum/explorer.html
@@ -50,19 +50,8 @@
             <div class="title">
               <url-selector>www.aem.live</url-selector>
               <div>
-                <!-- <select id="view" style="display: none;">
-                  <option value="week">Week</option>
-                  <option value="month">Month</option>
-                  <option value="year">Year</option>
-                </select> -->
                 <time-range-picker id="view">
                   <ul hidden>
-                    <!-- <li data-value="0:12:00">Last 12 hours</li> -->
-                    <!-- <li data-value="0:24:00">Last 24 hours</li> -->
-                    <!-- <li data-value="today">Today</li> -->
-                    <!-- <li data-value="2:00:00">Last 2 days</li> -->
-                    <!-- <li data-value="3:00:00">Last 3 days</li> -->
-                    <!-- <li data-value="5:00:00">Last 5 days</li> -->
                     <li data-value="week">Last week</li>
                     <li data-value="month" aria-selected="true">Last month</li>
                     <li data-value="year">Last year</li>
diff --git a/tools/rum/loader.js b/tools/rum/loader.js
index bd1f26de..67d9d6dc 100644
--- a/tools/rum/loader.js
+++ b/tools/rum/loader.js
@@ -155,38 +155,26 @@ export default class DataLoader {
     // for all cases: +2 to cover bondary cases: start and end might be on a different UTC day
     // (will be filtered out by start / end range filter)
 
-    if (diff < (1000 * 60 * 60 * 24)) {
-      // less than a day
-      const hours = (end.getTime() - start.getTime()) / (1000 * 60 * 60) + 2;
-
-      for (let i = 0; i < hours; i += 1) {
-        console.log('fetching hour', start.toString());
-        promises.push(this.fetchUTCHour(start.toISOString(), originalStart, end));
-        start.setTime(start.getTime() + (1000 * 60 * 60));
-      }
-    } else if (diff < (1000 * 60 * 60 * 24 * 7)) {
+    if (diff < (1000 * 60 * 60 * 24 * 7)) {
       // less than a week
-      // +2 to cover bondary cases: start and end might be on a different UTC day
       const days = end.getDate() - start.getDate() + 2;
 
       for (let i = 0; i < days; i += 1) {
         console.log('fetching day', start.toString());
         promises.push(this.fetchUTCDay(start.toISOString(), originalStart, end));
-        // promises.push(this.fetchUTCDay(start.toISOString()));
         start.setDate(start.getDate() + 1);
       }
     } else if (diff < (1000 * 60 * 60 * 24 * 31)) {
       // less than a month
-      const days = end.getDate() - start.getDate() + 2;
+      const days = Math.round((diff / (1000 * 60 * 60 * 24))) + 1;
 
       for (let i = 0; i < days; i += 1) {
         console.log('fetching day', start.toString());
         promises.push(this.fetchUTCDay(start.toISOString(), originalStart, end));
-        // promises.push(this.fetchUTCDay(start.toISOString()));
         start.setDate(start.getDate() + 1);
       }
     } else {
-      const months = end.getMonth() - start.getMonth() + 2;
+      const months = Math.round(diff / (1000 * 60 * 60 * 24 * 31)) + 1;
 
       for (let i = 0; i < months; i += 1) {
         console.log('fetching month', start.toString());

From da1a6217e428ff24862f0bbce343e15f40b3a3f6 Mon Sep 17 00:00:00 2001
From: Alexandre Capt <acapt@adobe.com>
Date: Thu, 19 Sep 2024 11:34:07 +0200
Subject: [PATCH 06/20] chore: rename

---
 ...imerange-picker.js => daterange-picker.js} | 165 ++++++++++++++++--
 tools/rum/elements/timerange-picker.css       | 133 --------------
 tools/rum/explorer.html                       |   9 +-
 3 files changed, 155 insertions(+), 152 deletions(-)
 rename tools/rum/elements/{timerange-picker.js => daterange-picker.js} (57%)
 delete mode 100644 tools/rum/elements/timerange-picker.css

diff --git a/tools/rum/elements/timerange-picker.js b/tools/rum/elements/daterange-picker.js
similarity index 57%
rename from tools/rum/elements/timerange-picker.js
rename to tools/rum/elements/daterange-picker.js
index 215f360d..f396b7e4 100644
--- a/tools/rum/elements/timerange-picker.js
+++ b/tools/rum/elements/daterange-picker.js
@@ -8,21 +8,153 @@ function toDateString(date) {
   const year = date.getFullYear();
   const month = pad(date.getMonth() + 1);
   const day = pad(date.getDate());
-  // convert time
-  // const hours = pad(date.getHours());
-  // const minutes = pad(date.getMinutes());
 
-  // return `${year}-${month}-${day}T${hours}:${minutes}`;
   return `${year}-${month}-${day}`;
 }
 
+const STYLES = `
+  .form-field.picker-field {
+    position: relative;
+    display: block;
+  }
+
+  .form-field.picker-field input {
+    width: 100%;
+    font: inherit;
+    border-color: var(--gray-100);
+    border: 2px solid var(--gray-300);
+    padding: 0.4em 0.85em;
+    background-color: var(--gray-100);
+    cursor: pointer;
+    transition: border-color 0.2s, background-color 0.2s;
+    border-radius: 4px;
+    min-width: 200px;
+  }
+
+  @media (width >= 900px) {
+    .daterange-wrapper {
+      grid-area: daterange;
+    }
+    
+    @media (width >= 900px) {
+        .log-viewer form#daterange-form > .daterange-wrapper {
+            grid-area: daterange;
+        }
+    }
+  }
+
+  .daterange-wrapper {
+    display: grid;
+
+    /* grid-template-columns: auto 1fr auto; */
+    align-items: end;
+    gap: var(--spacing-l);
+  }
+
+  .form-field.picker-field input ~ ul li {
+    padding: 0.4em 0;
+    padding-left: 2rem;
+    cursor: pointer;
+  }
+
+  .picker-field  ul.menu li:last-child {
+    position: relative;
+    margin-top: 16px;
+  }
+
+  .picker-field ul.menu li:last-child::before {
+    content: '';
+    position: absolute;
+    top: calc((-0.5 * 16px) - (2px / 2));
+    left: 0;
+    right: 0;
+    height: 2px;
+    background-color: var(--gray-200);
+  }
+
+  .picker-field .datetime-wrapper {
+    display: none;
+    min-width: 500px;
+    background-color: white;
+  }
+
+  .picker-field input[data-custom='true'] ~ .datetime-wrapper {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: 16px 12px;
+    left: 0;
+    right: 0;
+    top: calc(100% + 8px);
+    margin-top: 4px;
+    border-radius: 4px;
+    padding: calc(0.4em + 2px);
+    background-color: white;
+    box-shadow: var(--grey-700);
+    z-index: 10;
+  }
+
+  .picker-field ul {
+    list-style: none;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: calc(100% + 8px);
+    margin: 0;
+    border-radius: 8px;
+    padding: calc(0.4em + 2px);
+    background-color: white;
+    box-shadow: var(--grey-700);
+    z-index: 20;
+  }
+
+  .picker-field ul.menu:not([hidden]) + .datetime-wrapper {
+    display: none;
+  }
+
+  .picker-field input ~ .datetime-wrapper .form-field {
+    margin-top: 0;
+  }
+
+  @media (width >= 740px) {
+    .datetime-wrapper {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    .picker-field input[data-custom='true'] ~ .datetime-wrapper {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
+  @media (width >= 900px) {
+    .picker-field input[data-custom='true'] ~ .datetime-wrapper {
+      grid-template-columns: minmax(0, 1fr);
+    }
+  }
+
+  @media (width >= 1200px) {
+    .picker-field input[data-custom='true'] ~ .datetime-wrapper {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      position: absolute;
+    }
+  }
+
+  .picker-field .datetime-wrapper .datetime-field {
+    display: block;
+  }
+
+  .picker-field .datetime-wrapper .datetime-field label {
+    display: block;
+    margin-bottom: 0.5em;
+  }
+`;
+
 const TEMPLATE = `
   <div class="form-field picker-field">
     <input
       type="text"
       aria-haspopup="listbox"
       readonly />
-    <ul class="menu" id="timeframe-menu" aria-labelledby="timeframe" role="listbox" hidden></ul>
+    <ul class="menu" id="daterange-menu" aria-labelledby="daterange" role="listbox" hidden></ul>
     <div class="form-field datetime-wrapper" hidden>
       <div class="form-field datetime-field" aria-hidden="true">
         <label for="date-from">From</label>
@@ -55,10 +187,13 @@ export default class TimeRangePicker extends HTMLElement {
   }
 
   initDOM() {
-    console.log('initDOM');
+    this.attachShadow({ mode: 'open' });
+
+    const style = document.createElement('style');
+    style.textContent = STYLES;
 
     const section = document.createElement('section');
-    section.className = 'form-field timeframe-wrapper';
+    section.className = 'form-field daterange-wrapper';
     section.innerHTML = TEMPLATE;
 
     const sul = section.querySelector('ul');
@@ -77,14 +212,16 @@ export default class TimeRangePicker extends HTMLElement {
 
     console.log('defaultValue', defaultValue);
 
-    this.innerHTML = '';
-    this.appendChild(section);
+    this.shadowRoot.innerHTML = '';
+    // this.innerHTML = '';
+    this.shadowRoot.appendChild(style);
+    this.shadowRoot.appendChild(section);
 
-    this.inputElement = this.querySelector('input');
-    this.dropdownElement = this.querySelector('ul');
-    this.fromElement = this.querySelector('[name="date-from"]');
-    this.toElement = this.querySelector('[name="date-to"]');
-    this.datetimeWrapperElement = this.querySelector('.datetime-wrapper');
+    this.inputElement = this.shadowRoot.querySelector('input');
+    this.dropdownElement = this.shadowRoot.querySelector('ul');
+    this.fromElement = this.shadowRoot.querySelector('[name="date-from"]');
+    this.toElement = this.shadowRoot.querySelector('[name="date-to"]');
+    this.datetimeWrapperElement = this.shadowRoot.querySelector('.datetime-wrapper');
 
     this.registerListeners();
   }
diff --git a/tools/rum/elements/timerange-picker.css b/tools/rum/elements/timerange-picker.css
deleted file mode 100644
index 84e4e2c5..00000000
--- a/tools/rum/elements/timerange-picker.css
+++ /dev/null
@@ -1,133 +0,0 @@
-.form-field.picker-field {
-  position: relative;
-  display: block;
-}
-
-.form-field.picker-field input {
-  width: 100%;
-  font: inherit;
-  border-color: var(--gray-100);
-  border: 2px solid var(--gray-300);
-  padding: 0.4em 0.85em;
-  background-color: var(--gray-100);
-  cursor: pointer;
-  transition: border-color 0.2s, background-color 0.2s;
-  border-radius: 4px;
-  min-width: 200px;
-}
-
-@media (width >= 900px) {
-  .timeframe-wrapper {
-    grid-area: timeframe;
-  }
-  
-  @media (width >= 900px) {
-      .log-viewer form#timeframe-form > .timeframe-wrapper {
-          grid-area: timeframe;
-      }
-  }
-}
-
-.timeframe-wrapper {
-  display: grid;
-
-  /* grid-template-columns: auto 1fr auto; */
-  align-items: end;
-  gap: var(--spacing-l);
-}
-
-.picker-field  ul.menu li:last-child {
-  position: relative;
-  margin-top: 16px;
-}
-
-.picker-field ul.menu li:last-child::before {
-  content: '';
-  position: absolute;
-  top: calc((-0.5 * 16px) - (2px / 2));
-  left: 0;
-  right: 0;
-  height: 2px;
-  background-color: var(--gray-200);
-}
-
-.picker-field .datetime-wrapper {
-  display: none;
-  min-width: 500px;
-  background-color: white;
-}
-
-.picker-field input[data-custom='true'] ~ .datetime-wrapper {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  gap: 16px 12px;
-  left: 0;
-  right: 0;
-  top: calc(100% + 8px);
-  margin-top: 4px;
-  border-radius: 4px;
-  padding: calc(0.4em + 2px);
-  background-color: white;
-  box-shadow: var(--grey-700);
-  z-index: 10;
-}
-
-.picker-field ul {
-  list-style: none;
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: calc(100% + 8px);
-  margin: 0;
-  border-radius: 8px;
-  padding: calc(0.4em + 2px);
-  background-color: white;
-  box-shadow: var(--grey-700);
-  z-index: 20;
-}
-
-.picker-field ul.menu:not([hidden]) + .datetime-wrapper {
-  display: none;
-}
-
-.picker-field input ~ .datetime-wrapper .form-field {
-  margin-top: 0;
-}
-
-@media (width >= 740px) {
-  .datetime-wrapper {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  .picker-field input[data-custom='true'] ~ .datetime-wrapper {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
-
-@media (width >= 900px) {
-  .picker-field input[data-custom='true'] ~ .datetime-wrapper {
-    grid-template-columns: minmax(0, 1fr);
-  }
-}
-
-@media (width >= 1200px) {
-  .picker-field input[data-custom='true'] ~ .datetime-wrapper {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    position: absolute;
-  }
-}
-
-.picker-field .datetime-wrapper .datetime-field {
-  display: block;
-}
-
-.picker-field .datetime-wrapper .datetime-field label {
-  display: block;
-  margin-bottom: 0.5em;
-}
-
-.form-field.picker-field input ~ ul li {
-  padding: 0.4em 0;
-  padding-left: 2rem;
-  cursor: pointer;
-}
\ No newline at end of file
diff --git a/tools/rum/explorer.html b/tools/rum/explorer.html
index b4fab3da..f490b562 100644
--- a/tools/rum/explorer.html
+++ b/tools/rum/explorer.html
@@ -21,7 +21,7 @@
     import VitalsFacet from './elements/vitals-facet.js';
     import FileFacet from './elements/file-facet.js';
     import URLSelector from './elements/url-selector.js';
-    import TimeRangePicker from './elements/timerange-picker.js';
+    import DateRangePicker from './elements/daterange-picker.js';
     window.slicer = {
       Chart: SkylineChart,
     };
@@ -34,11 +34,10 @@
     customElements.define('vitals-facet', VitalsFacet);
     customElements.define('file-facet', FileFacet);
     customElements.define('url-selector', URLSelector);
-    customElements.define('time-range-picker', TimeRangePicker);
+    customElements.define('daterange-picker', DateRangePicker);
   </script>
   <script src="./slicer.js" type="module"></script>
   <link rel="stylesheet" href="./rum-slicer.css">
-  <link rel="stylesheet" href="./elements/timerange-picker.css">
   </head>
 
 <body>
@@ -50,14 +49,14 @@
             <div class="title">
               <url-selector>www.aem.live</url-selector>
               <div>
-                <time-range-picker id="view">
+                <daterange-picker id="view">
                   <ul hidden>
                     <li data-value="week">Last week</li>
                     <li data-value="month" aria-selected="true">Last month</li>
                     <li data-value="year">Last year</li>
                     <li data-value="custom">Custom</li>
                   </ul>
-                </time-range-picker>                
+                </daterange-picker>                
                 <incognito-checkbox></incognito-checkbox>
               </div>
             </div>

From 1f666358ebd3c7163ca0b6fda376f77b93e8e48a Mon Sep 17 00:00:00 2001
From: Alexandre Capt <acapt@adobe.com>
Date: Thu, 19 Sep 2024 11:47:17 +0200
Subject: [PATCH 07/20] chore: refactor

---
 tools/rum/elements/daterange-picker.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/tools/rum/elements/daterange-picker.js b/tools/rum/elements/daterange-picker.js
index f396b7e4..2282cc75 100644
--- a/tools/rum/elements/daterange-picker.js
+++ b/tools/rum/elements/daterange-picker.js
@@ -149,6 +149,7 @@ const STYLES = `
 `;
 
 const TEMPLATE = `
+<section classs="form-field daterange-wrapper">
   <div class="form-field picker-field">
     <input
       type="text"
@@ -166,6 +167,7 @@ const TEMPLATE = `
       </div>
     </div>
   </div>
+  </section>
 `;
 
 export default class TimeRangePicker extends HTMLElement {
@@ -192,9 +194,7 @@ export default class TimeRangePicker extends HTMLElement {
     const style = document.createElement('style');
     style.textContent = STYLES;
 
-    const section = document.createElement('section');
-    section.className = 'form-field daterange-wrapper';
-    section.innerHTML = TEMPLATE;
+    const section = document.createRange().createContextualFragment(TEMPLATE);
 
     const sul = section.querySelector('ul');
     const options = this.querySelectorAll('ul li');
@@ -213,7 +213,7 @@ export default class TimeRangePicker extends HTMLElement {
     console.log('defaultValue', defaultValue);
 
     this.shadowRoot.innerHTML = '';
-    // this.innerHTML = '';
+
     this.shadowRoot.appendChild(style);
     this.shadowRoot.appendChild(section);
 

From b784af479f2c1b8ecdbff3c0165ae607a91a2e0c Mon Sep 17 00:00:00 2001
From: Alexandre Capt <acapt@adobe.com>
Date: Thu, 19 Sep 2024 11:58:30 +0200
Subject: [PATCH 08/20] chore: simplify dom

---
 tools/rum/elements/daterange-picker.js | 92 +++++++++++---------------
 1 file changed, 39 insertions(+), 53 deletions(-)

diff --git a/tools/rum/elements/daterange-picker.js b/tools/rum/elements/daterange-picker.js
index 2282cc75..58a60756 100644
--- a/tools/rum/elements/daterange-picker.js
+++ b/tools/rum/elements/daterange-picker.js
@@ -13,12 +13,18 @@ function toDateString(date) {
 }
 
 const STYLES = `
-  .form-field.picker-field {
+  .daterange-wrapper {
+    display: grid;
+    align-items: end;
+    gap: var(--spacing-l);
+  }
+
+  .input-wrapper, .daterange-wrapper {
     position: relative;
     display: block;
   }
 
-  .form-field.picker-field input {
+  input {
     width: 100%;
     font: inherit;
     border-color: var(--gray-100);
@@ -43,26 +49,18 @@ const STYLES = `
     }
   }
 
-  .daterange-wrapper {
-    display: grid;
-
-    /* grid-template-columns: auto 1fr auto; */
-    align-items: end;
-    gap: var(--spacing-l);
-  }
-
-  .form-field.picker-field input ~ ul li {
+  input ~ ul li {
     padding: 0.4em 0;
     padding-left: 2rem;
     cursor: pointer;
   }
 
-  .picker-field  ul.menu li:last-child {
+  ul.menu li:last-child {
     position: relative;
     margin-top: 16px;
   }
 
-  .picker-field ul.menu li:last-child::before {
+  ul.menu li:last-child::before {
     content: '';
     position: absolute;
     top: calc((-0.5 * 16px) - (2px / 2));
@@ -72,13 +70,13 @@ const STYLES = `
     background-color: var(--gray-200);
   }
 
-  .picker-field .datetime-wrapper {
+  .input-wrapper {
     display: none;
     min-width: 500px;
     background-color: white;
   }
 
-  .picker-field input[data-custom='true'] ~ .datetime-wrapper {
+  input[data-custom='true'] ~ .input-wrapper {
     display: grid;
     grid-template-columns: minmax(0, 1fr);
     gap: 16px 12px;
@@ -93,7 +91,7 @@ const STYLES = `
     z-index: 10;
   }
 
-  .picker-field ul {
+  ul {
     list-style: none;
     position: absolute;
     left: 0;
@@ -107,67 +105,62 @@ const STYLES = `
     z-index: 20;
   }
 
-  .picker-field ul.menu:not([hidden]) + .datetime-wrapper {
+  ul.menu:not([hidden]) + .input-wrapper {
     display: none;
   }
 
-  .picker-field input ~ .datetime-wrapper .form-field {
-    margin-top: 0;
-  }
-
   @media (width >= 740px) {
-    .datetime-wrapper {
+    .input-wrapper {
       grid-template-columns: repeat(2, 1fr);
     }
 
-    .picker-field input[data-custom='true'] ~ .datetime-wrapper {
+   input[data-custom='true'] ~ .input-wrapper {
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
   }
 
   @media (width >= 900px) {
-    .picker-field input[data-custom='true'] ~ .datetime-wrapper {
+    input[data-custom='true'] ~ .input-wrapper {
       grid-template-columns: minmax(0, 1fr);
     }
   }
 
   @media (width >= 1200px) {
-    .picker-field input[data-custom='true'] ~ .datetime-wrapper {
+    input[data-custom='true'] ~ .input-wrapper {
       grid-template-columns: repeat(2, minmax(0, 1fr));
       position: absolute;
     }
   }
 
-  .picker-field .datetime-wrapper .datetime-field {
+ .date-field {
     display: block;
+    margin-top: 0;
   }
 
-  .picker-field .datetime-wrapper .datetime-field label {
+  .date-field label {
     display: block;
     margin-bottom: 0.5em;
   }
 `;
 
 const TEMPLATE = `
-<section classs="form-field daterange-wrapper">
-  <div class="form-field picker-field">
-    <input
-      type="text"
-      aria-haspopup="listbox"
-      readonly />
-    <ul class="menu" id="daterange-menu" aria-labelledby="daterange" role="listbox" hidden></ul>
-    <div class="form-field datetime-wrapper" hidden>
-      <div class="form-field datetime-field" aria-hidden="true">
-        <label for="date-from">From</label>
-        <input name="date-from" type="date" readonly />
-      </div>
-      <div class="form-field datetime-field" aria-hidden="true">
-        <label for="date-to">To</label>
-        <input name="date-to" type="date" readonly />
-      </div>
+<section class="daterange-wrapper">
+  <input
+    type="text"
+    aria-haspopup="listbox"
+    readonly />
+  <ul class="menu" aria-labelledby="daterange" role="listbox" hidden></ul>
+  <div class="input-wrapper" hidden>
+    <div class="date-field" aria-hidden="true">
+      <label for="date-from">From</label>
+      <input name="date-from" type="date" readonly />
+    </div>
+    <div class="date-field" aria-hidden="true">
+      <label for="date-to">To</label>
+      <input name="date-to" type="date" readonly />
     </div>
   </div>
-  </section>
+</section>
 `;
 
 export default class TimeRangePicker extends HTMLElement {
@@ -199,19 +192,14 @@ export default class TimeRangePicker extends HTMLElement {
     const sul = section.querySelector('ul');
     const options = this.querySelectorAll('ul li');
 
-    let defaultValue = null;
     options.forEach((option) => {
-      if (option.getAttribute('aria-selected') === 'true') {
-        defaultValue = option.dataset.value;
-      } else {
+      if (option.getAttribute('aria-selected') !== 'true') {
         option.setAttribute('aria-selected', false);
       }
       option.dataset.role = 'option';
       sul.appendChild(option);
     });
 
-    console.log('defaultValue', defaultValue);
-
     this.shadowRoot.innerHTML = '';
 
     this.shadowRoot.appendChild(style);
@@ -221,7 +209,7 @@ export default class TimeRangePicker extends HTMLElement {
     this.dropdownElement = this.shadowRoot.querySelector('ul');
     this.fromElement = this.shadowRoot.querySelector('[name="date-from"]');
     this.toElement = this.shadowRoot.querySelector('[name="date-to"]');
-    this.datetimeWrapperElement = this.shadowRoot.querySelector('.datetime-wrapper');
+    this.datetimeWrapperElement = this.shadowRoot.querySelector('.input-wrapper');
 
     this.registerListeners();
   }
@@ -262,7 +250,6 @@ export default class TimeRangePicker extends HTMLElement {
   }
 
   set value(config) {
-    console.log('set value', config);
     const { value, from, to } = config;
     const {
       inputElement, dropdownElement, fromElement, toElement,
@@ -270,7 +257,6 @@ export default class TimeRangePicker extends HTMLElement {
 
     const option = dropdownElement.querySelector(`li[data-value="${value}"]`);
     if (!option) {
-      console.error('Invalid value', value);
       return;
     }
 

From 961ed1041ab3eb3ded3d61b80dadf18247a6fac5 Mon Sep 17 00:00:00 2001
From: Alexandre Capt <acapt@adobe.com>
Date: Thu, 19 Sep 2024 15:11:18 +0200
Subject: [PATCH 09/20] feat: fine tuning

---
 tools/rum/charts/skyline.js            |  8 ++------
 tools/rum/elements/daterange-picker.js | 21 +++++++++++++++++++++
 tools/rum/loader.js                    |  6 +++---
 tools/rum/slicer.js                    |  2 +-
 4 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/tools/rum/charts/skyline.js b/tools/rum/charts/skyline.js
index c8630925..6c6edb5b 100644
--- a/tools/rum/charts/skyline.js
+++ b/tools/rum/charts/skyline.js
@@ -481,12 +481,8 @@ export default class SkylineChart extends AbstractChart {
     const view = params.get('view');
 
     // eslint-disable-next-line no-unused-vars
-    let startDate = null;
-    let endDate = null;
-    if (view === 'custom') {
-      startDate = params.get('startDate');
-      endDate = params.get('endDate');
-    }
+    const startDate = params.get('startDate');
+    const endDate = params.get('endDate');
 
     console.log('startDate', startDate);
     console.log('endDate', endDate);
diff --git a/tools/rum/elements/daterange-picker.js b/tools/rum/elements/daterange-picker.js
index 58a60756..348abd75 100644
--- a/tools/rum/elements/daterange-picker.js
+++ b/tools/rum/elements/daterange-picker.js
@@ -1,3 +1,13 @@
+function debounce(func, wait) {
+  let timeout;
+  // eslint-disable-next-line func-names
+  return function (...args) {
+    const context = this;
+    clearTimeout(timeout);
+    timeout = setTimeout(() => func.apply(context, args), wait);
+  };
+}
+
 // date management
 function pad(number) {
   return number.toString().padStart(2, '0');
@@ -239,6 +249,17 @@ export default class TimeRangePicker extends HTMLElement {
         };
       });
     });
+
+    const setValue = () => {
+      $this.value = {
+        value: 'custom',
+        from: this.fromElement.value,
+        to: this.toElement.value,
+      };
+    };
+
+    this.fromElement.addEventListener('change', debounce(setValue, 500));
+    this.toElement.addEventListener('change', debounce(setValue, 500));
   }
 
   get value() {
diff --git a/tools/rum/loader.js b/tools/rum/loader.js
index 67d9d6dc..b91bf79e 100644
--- a/tools/rum/loader.js
+++ b/tools/rum/loader.js
@@ -102,8 +102,8 @@ export default class DataLoader {
     return { date, hour, rumBundles: this.filterByDateRange(rumBundles, start, end) };
   }
 
-  async fetchLastWeek() {
-    const date = new Date();
+  async fetchLastWeek(endDate) {
+    const date = endDate ? new Date(endDate) : new Date();
     const hoursInWeek = 7 * 24;
     const promises = [];
     for (let i = 0; i < hoursInWeek; i += 1) {
@@ -128,7 +128,7 @@ export default class DataLoader {
 
   async fetchPrevious12Months(endDate) {
     const date = endDate ? new Date(endDate) : new Date();
-    const months = 12;
+    const months = 13; // 13 to include 2 partial months (first and last)
     const promises = [];
     for (let i = 0; i < months; i += 1) {
       promises.push(this.fetchUTCMonth(date.toISOString()));
diff --git a/tools/rum/slicer.js b/tools/rum/slicer.js
index cd476d93..2eea5c7f 100644
--- a/tools/rum/slicer.js
+++ b/tools/rum/slicer.js
@@ -358,7 +358,7 @@ const io = new IntersectionObserver((entries) => {
     let startDate = params.get('startDate') ? `${params.get('startDate')}` : null;
     const endDate = params.get('endDate') ? `${params.get('endDate')}` : null;
 
-    if (startDate && endDate) {
+    if (startDate || endDate) {
       const start = new Date(startDate);
       const end = new Date(endDate);
       if (start > end) {

From 5a4aaafcd2d68b2c4dee897e783ed6c8c807c6ff Mon Sep 17 00:00:00 2001
From: Alexandre Capt <acapt@adobe.com>
Date: Thu, 19 Sep 2024 15:23:52 +0200
Subject: [PATCH 10/20] feat: start date

---
 tools/rum/slicer.js | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/tools/rum/slicer.js b/tools/rum/slicer.js
index 2eea5c7f..2dae8d8f 100644
--- a/tools/rum/slicer.js
+++ b/tools/rum/slicer.js
@@ -280,19 +280,15 @@ async function loadData(config) {
   const startDate = params.get('startDate') ? `${params.get('startDate')}` : null;
   const endDate = params.get('endDate') ? `${params.get('endDate')}` : null;
 
-  if (scope === 'week') {
+  if (startDate && endDate) {
+    dataChunks.load(await loader.fetchPeriod(startDate, endDate));
+  } else if (scope === 'week') {
     dataChunks.load(await loader.fetchLastWeek(endDate));
-  }
-  if (scope === 'month') {
+  } else if (scope === 'month') {
     dataChunks.load(await loader.fetchPrevious31Days(endDate));
-  }
-  if (scope === 'year') {
+  } else if (scope === 'year') {
     dataChunks.load(await loader.fetchPrevious12Months(endDate));
   }
-
-  if (scope === 'custom') {
-    dataChunks.load(await loader.fetchPeriod(startDate, endDate));
-  }
 }
 
 export function updateState() {

From 1ef1067356b01d159cbb8ef0843df599bfde3781 Mon Sep 17 00:00:00 2001
From: Alexandre Capt <acapt@adobe.com>
Date: Thu, 19 Sep 2024 15:33:07 +0200
Subject: [PATCH 11/20] chore: initial state

---
 tools/rum/elements/daterange-picker.js | 40 +++++++++++++++++---------
 tools/rum/slicer.js                    | 15 +---------
 2 files changed, 28 insertions(+), 27 deletions(-)

diff --git a/tools/rum/elements/daterange-picker.js b/tools/rum/elements/daterange-picker.js
index 348abd75..56a8cf84 100644
--- a/tools/rum/elements/daterange-picker.js
+++ b/tools/rum/elements/daterange-picker.js
@@ -313,7 +313,8 @@ export default class TimeRangePicker extends HTMLElement {
     }));
   }
 
-  updateTimeframe({ value, to = null }) {
+  updateTimeframe({ value }) {
+    // maintain the readonly state of the date fields and default value
     const { fromElement, toElement } = this;
 
     const now = new Date();
@@ -321,22 +322,35 @@ export default class TimeRangePicker extends HTMLElement {
     [fromElement, toElement].forEach((field) => {
       field.readOnly = true;
     });
-    if (!to) {
-      toElement.value = toDateString(now);
-    }
     this.toggleCustomTimeframe(value === 'custom');
+
     if (value === 'week') {
-      const lastWeek = now;
-      lastWeek.setHours(7 * 24, 0, 0, 0);
-      fromElement.value = toDateString(lastWeek);
+      if (!fromElement.value) {
+        const lastWeek = now;
+        lastWeek.setHours(7 * 24, 0, 0, 0);
+        fromElement.value = toDateString(lastWeek);
+      }
+      if (!toElement.value) {
+        toElement.value = toDateString(now);
+      }
     } else if (value === 'month') {
-      const lastMonth = now;
-      lastMonth.setMonth(now.getMonth() - 1);
-      fromElement.value = toDateString(lastMonth);
+      if (!fromElement.value) {
+        const lastMonth = now;
+        lastMonth.setMonth(now.getMonth() - 1);
+        fromElement.value = toDateString(lastMonth);
+      }
+      if (!toElement.value) {
+        toElement.value = toDateString(now);
+      }
     } else if (value === 'year') {
-      const lastYear = now;
-      lastYear.setFullYear(now.getFullYear() - 1);
-      fromElement.value = toDateString(lastYear);
+      if (!fromElement.value) {
+        const lastYear = now;
+        lastYear.setFullYear(now.getFullYear() - 1);
+        fromElement.value = toDateString(lastYear);
+      }
+      if (!toElement.value) {
+        toElement.value = toDateString(now);
+      }
     } else if (value === 'custom') {
       [fromElement, toElement].forEach((field) => {
         field.removeAttribute('readonly');
diff --git a/tools/rum/slicer.js b/tools/rum/slicer.js
index 2dae8d8f..3b59f1a6 100644
--- a/tools/rum/slicer.js
+++ b/tools/rum/slicer.js
@@ -351,22 +351,9 @@ const io = new IntersectionObserver((entries) => {
       window.history.replaceState({}, '', url);
     }
 
-    let startDate = params.get('startDate') ? `${params.get('startDate')}` : null;
+    const startDate = params.get('startDate') ? `${params.get('startDate')}` : null;
     const endDate = params.get('endDate') ? `${params.get('endDate')}` : null;
 
-    if (startDate || endDate) {
-      const start = new Date(startDate);
-      const end = new Date(endDate);
-      if (start > end) {
-        start.setTime(end.getTime() - 1000 * 60 * 60 * 24);
-        startDate = start.toISOString();
-        params.set('startDate', startDate);
-        const url = new URL(window.location.href);
-        url.search = params.toString();
-        window.history.replaceState({}, '', url);
-      }
-    }
-
     elems.incognito.addEventListener('change', async () => {
       loader.domainKey = elems.incognito.getAttribute('domainkey');
 

From ada416b0629fa97ef85f0ede60c3857ba55a6cb1 Mon Sep 17 00:00:00 2001
From: Alexandre Capt <acapt@adobe.com>
Date: Thu, 19 Sep 2024 17:07:16 +0200
Subject: [PATCH 12/20] feat: styling

---
 tools/rum/elements/daterange-picker.js | 19 ++++---------------
 1 file changed, 4 insertions(+), 15 deletions(-)

diff --git a/tools/rum/elements/daterange-picker.js b/tools/rum/elements/daterange-picker.js
index 56a8cf84..8b060111 100644
--- a/tools/rum/elements/daterange-picker.js
+++ b/tools/rum/elements/daterange-picker.js
@@ -47,18 +47,6 @@ const STYLES = `
     min-width: 200px;
   }
 
-  @media (width >= 900px) {
-    .daterange-wrapper {
-      grid-area: daterange;
-    }
-    
-    @media (width >= 900px) {
-        .log-viewer form#daterange-form > .daterange-wrapper {
-            grid-area: daterange;
-        }
-    }
-  }
-
   input ~ ul li {
     padding: 0.4em 0;
     padding-left: 2rem;
@@ -90,14 +78,14 @@ const STYLES = `
     display: grid;
     grid-template-columns: minmax(0, 1fr);
     gap: 16px 12px;
-    left: 0;
     right: 0;
     top: calc(100% + 8px);
     margin-top: 4px;
     border-radius: 4px;
     padding: calc(0.4em + 2px);
     background-color: white;
-    box-shadow: var(--grey-700);
+    border: 1px solid var(--gray-100);
+    box-shadow: 5px 5px 5px var(--gray-700);
     z-index: 10;
   }
 
@@ -111,7 +99,8 @@ const STYLES = `
     border-radius: 8px;
     padding: calc(0.4em + 2px);
     background-color: white;
-    box-shadow: var(--grey-700);
+    border: 1px solid var(--gray-100);
+    box-shadow: 5px 5px 5px var(--gray-700);
     z-index: 20;
   }
 

From 8b2bbce5265453a3ecccd990a496ddc3187eba6d Mon Sep 17 00:00:00 2001
From: Alexandre Capt <acapt@adobe.com>
Date: Thu, 19 Sep 2024 17:27:17 +0200
Subject: [PATCH 13/20] fix: week to custom toggle

---
 tools/rum/elements/daterange-picker.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tools/rum/elements/daterange-picker.js b/tools/rum/elements/daterange-picker.js
index 8b060111..d0ae4383 100644
--- a/tools/rum/elements/daterange-picker.js
+++ b/tools/rum/elements/daterange-picker.js
@@ -316,7 +316,7 @@ export default class TimeRangePicker extends HTMLElement {
     if (value === 'week') {
       if (!fromElement.value) {
         const lastWeek = now;
-        lastWeek.setHours(7 * 24, 0, 0, 0);
+        lastWeek.setHours(-7 * 24, 0, 0, 0);
         fromElement.value = toDateString(lastWeek);
       }
       if (!toElement.value) {

From 3be8e846ae9623d5adc2a691cc16fad7fef525b6 Mon Sep 17 00:00:00 2001
From: Alexandre Capt <acapt@adobe.com>
Date: Thu, 19 Sep 2024 17:27:57 +0200
Subject: [PATCH 14/20] chore: adjust range

---
 tools/rum/elements/daterange-picker.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tools/rum/elements/daterange-picker.js b/tools/rum/elements/daterange-picker.js
index d0ae4383..6e008a7d 100644
--- a/tools/rum/elements/daterange-picker.js
+++ b/tools/rum/elements/daterange-picker.js
@@ -316,7 +316,7 @@ export default class TimeRangePicker extends HTMLElement {
     if (value === 'week') {
       if (!fromElement.value) {
         const lastWeek = now;
-        lastWeek.setHours(-7 * 24, 0, 0, 0);
+        lastWeek.setHours(-6 * 24, 0, 0, 0);
         fromElement.value = toDateString(lastWeek);
       }
       if (!toElement.value) {

From f65dd9d110a8cd955defb153db3147bd4c1cd1a4 Mon Sep 17 00:00:00 2001
From: Alexandre Capt <acapt@adobe.com>
Date: Thu, 19 Sep 2024 17:31:40 +0200
Subject: [PATCH 15/20] fix: adjust boundaries

---
 tools/rum/charts/skyline.js            | 4 ++--
 tools/rum/elements/daterange-picker.js | 2 +-
 tools/rum/loader.js                    | 9 +++------
 3 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/tools/rum/charts/skyline.js b/tools/rum/charts/skyline.js
index 6c6edb5b..c9f2fc43 100644
--- a/tools/rum/charts/skyline.js
+++ b/tools/rum/charts/skyline.js
@@ -498,13 +498,13 @@ export default class SkylineChart extends AbstractChart {
         customView = 'hour';
         unit = 'hour';
         units = 24;
-      } else if (diff < (1000 * 60 * 60 * 24 * 7)) {
+      } else if (diff <= (1000 * 60 * 60 * 24 * 7)) {
         // less than a week
         console.log('chart draw - week view', (diff / (1000 * 60 * 60)));
         customView = 'week';
         unit = 'hour';
         units = Math.round(diff / (1000 * 60 * 60));
-      } else if (diff < (1000 * 60 * 60 * 24 * 31)) {
+      } else if (diff <= (1000 * 60 * 60 * 24 * 31)) {
         // less than a month
         console.log('chart draw - less than a month');
         customView = 'month';
diff --git a/tools/rum/elements/daterange-picker.js b/tools/rum/elements/daterange-picker.js
index 6e008a7d..d0ae4383 100644
--- a/tools/rum/elements/daterange-picker.js
+++ b/tools/rum/elements/daterange-picker.js
@@ -316,7 +316,7 @@ export default class TimeRangePicker extends HTMLElement {
     if (value === 'week') {
       if (!fromElement.value) {
         const lastWeek = now;
-        lastWeek.setHours(-6 * 24, 0, 0, 0);
+        lastWeek.setHours(-7 * 24, 0, 0, 0);
         fromElement.value = toDateString(lastWeek);
       }
       if (!toElement.value) {
diff --git a/tools/rum/loader.js b/tools/rum/loader.js
index b91bf79e..1fcf8d85 100644
--- a/tools/rum/loader.js
+++ b/tools/rum/loader.js
@@ -152,19 +152,16 @@ export default class DataLoader {
 
     console.log('fetchPeriod', start.toString(), end.toString());
 
-    // for all cases: +2 to cover bondary cases: start and end might be on a different UTC day
-    // (will be filtered out by start / end range filter)
-
-    if (diff < (1000 * 60 * 60 * 24 * 7)) {
+    if (diff <= (1000 * 60 * 60 * 24 * 7)) {
       // less than a week
-      const days = end.getDate() - start.getDate() + 2;
+      const days = Math.round((diff / (1000 * 60 * 60 * 24))) + 1;
 
       for (let i = 0; i < days; i += 1) {
         console.log('fetching day', start.toString());
         promises.push(this.fetchUTCDay(start.toISOString(), originalStart, end));
         start.setDate(start.getDate() + 1);
       }
-    } else if (diff < (1000 * 60 * 60 * 24 * 31)) {
+    } else if (diff <= (1000 * 60 * 60 * 24 * 31)) {
       // less than a month
       const days = Math.round((diff / (1000 * 60 * 60 * 24))) + 1;
 

From f2d37d5550ab57a2a2e8d8232f83201332dc28d5 Mon Sep 17 00:00:00 2001
From: Alexandre Capt <acapt@adobe.com>
Date: Mon, 23 Sep 2024 16:31:09 +0200
Subject: [PATCH 16/20] feat: swap from and to if not chronological

---
 tools/rum/elements/daterange-picker.js | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/tools/rum/elements/daterange-picker.js b/tools/rum/elements/daterange-picker.js
index d0ae4383..e68697b6 100644
--- a/tools/rum/elements/daterange-picker.js
+++ b/tools/rum/elements/daterange-picker.js
@@ -279,18 +279,26 @@ export default class TimeRangePicker extends HTMLElement {
 
     dropdownElement.hidden = true;
 
+    let dateFrom = new Date(from);
+    let dateTo = new Date(to);
+    if (dateFrom > dateTo) {
+      // swap the 2 dates
+      dateFrom = new Date(to);
+      dateTo = new Date(from);
+    }
+
     if (from) {
-      fromElement.value = toDateString(new Date(from));
+      fromElement.value = toDateString(dateFrom);
     }
 
     if (to) {
-      toElement.value = toDateString(new Date(to));
+      toElement.value = toDateString(dateTo);
     }
 
     this.updateTimeframe({
       value,
-      from,
-      to,
+      from: this.fromElement.value,
+      to: this.toElement.value,
     });
 
     this.dispatchEvent(new Event('change', {

From d287f08cef0dccb9ac628744aa0b2414431321d2 Mon Sep 17 00:00:00 2001
From: Alexandre Capt <acapt@adobe.com>
Date: Tue, 24 Sep 2024 10:24:39 +0200
Subject: [PATCH 17/20] feat: mobile

---
 tools/rum/elements/daterange-picker.js | 41 ++++++++++++++++++--------
 tools/rum/explorer.html                | 20 ++++++-------
 tools/rum/rum-slicer.css               | 37 +++++++++++++++++------
 3 files changed, 66 insertions(+), 32 deletions(-)

diff --git a/tools/rum/elements/daterange-picker.js b/tools/rum/elements/daterange-picker.js
index e68697b6..1b730c88 100644
--- a/tools/rum/elements/daterange-picker.js
+++ b/tools/rum/elements/daterange-picker.js
@@ -27,6 +27,7 @@ const STYLES = `
     display: grid;
     align-items: end;
     gap: var(--spacing-l);
+    font-size: var(--type-body-s-size);
   }
 
   .input-wrapper, .daterange-wrapper {
@@ -44,7 +45,6 @@ const STYLES = `
     cursor: pointer;
     transition: border-color 0.2s, background-color 0.2s;
     border-radius: 4px;
-    min-width: 200px;
   }
 
   input ~ ul li {
@@ -70,7 +70,6 @@ const STYLES = `
 
   .input-wrapper {
     display: none;
-    min-width: 500px;
     background-color: white;
   }
 
@@ -108,6 +107,15 @@ const STYLES = `
     display: none;
   }
 
+  .date-field {
+    display: block;
+    margin-top: 0;
+  }
+
+  .date-field label {
+    display: block;
+  }
+
   @media (width >= 740px) {
     .input-wrapper {
       grid-template-columns: repeat(2, 1fr);
@@ -119,9 +127,25 @@ const STYLES = `
   }
 
   @media (width >= 900px) {
+    .daterange-wrapper {
+      font-size: var(--type-body-l-size);
+    }
+
+    input {
+      min-width: 200px;
+    }
+
+    .input-wrapper {
+      min-width: 500px;
+    }
+
     input[data-custom='true'] ~ .input-wrapper {
       grid-template-columns: minmax(0, 1fr);
     }
+
+    .date-field label {
+      margin-bottom: 0.5em;
+    }
   }
 
   @media (width >= 1200px) {
@@ -130,16 +154,6 @@ const STYLES = `
       position: absolute;
     }
   }
-
- .date-field {
-    display: block;
-    margin-top: 0;
-  }
-
-  .date-field label {
-    display: block;
-    margin-bottom: 0.5em;
-  }
 `;
 
 const TEMPLATE = `
@@ -189,6 +203,7 @@ export default class TimeRangePicker extends HTMLElement {
     const section = document.createRange().createContextualFragment(TEMPLATE);
 
     const sul = section.querySelector('ul');
+    const ul = this.querySelector('ul');
     const options = this.querySelectorAll('ul li');
 
     options.forEach((option) => {
@@ -199,6 +214,8 @@ export default class TimeRangePicker extends HTMLElement {
       sul.appendChild(option);
     });
 
+    ul.remove();
+
     this.shadowRoot.innerHTML = '';
 
     this.shadowRoot.appendChild(style);
diff --git a/tools/rum/explorer.html b/tools/rum/explorer.html
index f490b562..477b257b 100644
--- a/tools/rum/explorer.html
+++ b/tools/rum/explorer.html
@@ -48,17 +48,15 @@
           <div class="output">
             <div class="title">
               <url-selector>www.aem.live</url-selector>
-              <div>
-                <daterange-picker id="view">
-                  <ul hidden>
-                    <li data-value="week">Last week</li>
-                    <li data-value="month" aria-selected="true">Last month</li>
-                    <li data-value="year">Last year</li>
-                    <li data-value="custom">Custom</li>
-                  </ul>
-                </daterange-picker>                
-                <incognito-checkbox></incognito-checkbox>
-              </div>
+              <daterange-picker id="view">
+                <ul hidden>
+                  <li data-value="week">Last week</li>
+                  <li data-value="month" aria-selected="true">Last month</li>
+                  <li data-value="year">Last year</li>
+                  <li data-value="custom">Custom</li>
+                </ul>
+              </daterange-picker>
+              <incognito-checkbox></incognito-checkbox>
             </div>
             <div class="key-metrics">
               <ul>
diff --git a/tools/rum/rum-slicer.css b/tools/rum/rum-slicer.css
index eb523f75..d6483323 100644
--- a/tools/rum/rum-slicer.css
+++ b/tools/rum/rum-slicer.css
@@ -67,9 +67,12 @@ main li.score-poor, vitals-facet div[data-value^="poor"] label {
   background-color: var(--light-red);
 }
 
-/* heading */
-main .title div {
+main .title {
+  padding-top: 8px;
   display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-flow: row wrap;
   gap: 1ch;
 }
 
@@ -83,6 +86,15 @@ main .title select {
   font: inherit;
 }
 
+main .title > * {
+  flex: 2 0px;
+}
+
+main .title daterange-picker {
+  flex: 1 100%;
+  order: 3;
+}
+
 main .title incognito-checkbox {
   display: none;
   margin-bottom: 10px;
@@ -93,13 +105,6 @@ main .title incognito-checkbox[mode="incognito"] {
   display: inline-block;
 }
 
-main .title {
-  padding-top: 8px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
 main .title url-selector {
   margin-top: 8px;
   margin-bottom: 8px;
@@ -108,6 +113,7 @@ main .title url-selector {
   display: flex;
   align-items: center;
   width: 100%;
+  flex-grow: 50;
 }
 
 main .title url-selector img {
@@ -822,6 +828,19 @@ facet-sidebar[aria-disabled="true"] div.quick-filter {
 }
 
 @media (min-width: 900px) {
+  main .title {
+    flex-wrap: nowrap;
+  }
+
+  main .title > * {
+    flex: 3 0;
+  }
+
+  main .title daterange-picker {
+    flex: unset;
+    order: unset;
+  }
+
   main .title url-selector input {
     font-size: var(--type-heading-xl-size);
   }

From c0f9a8a1f9387408e8ca3afb6104f12daf06b0b5 Mon Sep 17 00:00:00 2001
From: Alexandre Capt <acapt@adobe.com>
Date: Tue, 24 Sep 2024 14:44:32 +0200
Subject: [PATCH 18/20] chore: cleanup

---
 tools/rum/charts/skyline.js | 13 -------------
 tools/rum/loader.js         |  8 +-------
 tools/rum/slicer.js         |  5 +----
 3 files changed, 2 insertions(+), 24 deletions(-)

diff --git a/tools/rum/charts/skyline.js b/tools/rum/charts/skyline.js
index c9f2fc43..372ef747 100644
--- a/tools/rum/charts/skyline.js
+++ b/tools/rum/charts/skyline.js
@@ -475,8 +475,6 @@ export default class SkylineChart extends AbstractChart {
   }
 
   async draw() {
-    console.log('draw');
-
     const params = new URL(window.location).searchParams;
     const view = params.get('view');
 
@@ -484,9 +482,6 @@ export default class SkylineChart extends AbstractChart {
     const startDate = params.get('startDate');
     const endDate = params.get('endDate');
 
-    console.log('startDate', startDate);
-    console.log('endDate', endDate);
-
     let customView = 'year';
     let unit = 'month';
     let units = 12;
@@ -494,25 +489,21 @@ export default class SkylineChart extends AbstractChart {
       const diff = endDate ? new Date(endDate).getTime() - new Date(startDate).getTime() : 0;
       if (diff < (1000 * 60 * 60 * 24)) {
         // less than a day
-        console.log('chart draw - less than a day');
         customView = 'hour';
         unit = 'hour';
         units = 24;
       } else if (diff <= (1000 * 60 * 60 * 24 * 7)) {
         // less than a week
-        console.log('chart draw - week view', (diff / (1000 * 60 * 60)));
         customView = 'week';
         unit = 'hour';
         units = Math.round(diff / (1000 * 60 * 60));
       } else if (diff <= (1000 * 60 * 60 * 24 * 31)) {
         // less than a month
-        console.log('chart draw - less than a month');
         customView = 'month';
         unit = 'day';
         units = 30;
       } else if (diff < (1000 * 60 * 60 * 24 * 365)) {
         // less than a year
-        console.log('chart draw - less than a year');
         customView = 'week';
         unit = 'week';
         units = Math.round(diff / (1000 * 60 * 60 * 24 * 7));
@@ -564,8 +555,6 @@ export default class SkylineChart extends AbstractChart {
 
     const config = configs[view];
 
-    console.log('config', config);
-
     this.config = config;
     this.defineSeries();
 
@@ -638,8 +627,6 @@ export default class SkylineChart extends AbstractChart {
     this.clsAlreadyLabeled = false;
     this.lcpAlreadyLabeled = false;
 
-    console.log('this.chart.data', this.chart.data);
-
     this.chart.update();
   }
 }
diff --git a/tools/rum/loader.js b/tools/rum/loader.js
index 1fcf8d85..1ebbe416 100644
--- a/tools/rum/loader.js
+++ b/tools/rum/loader.js
@@ -150,14 +150,11 @@ export default class DataLoader {
 
     const promises = [];
 
-    console.log('fetchPeriod', start.toString(), end.toString());
-
     if (diff <= (1000 * 60 * 60 * 24 * 7)) {
       // less than a week
       const days = Math.round((diff / (1000 * 60 * 60 * 24))) + 1;
 
       for (let i = 0; i < days; i += 1) {
-        console.log('fetching day', start.toString());
         promises.push(this.fetchUTCDay(start.toISOString(), originalStart, end));
         start.setDate(start.getDate() + 1);
       }
@@ -166,7 +163,6 @@ export default class DataLoader {
       const days = Math.round((diff / (1000 * 60 * 60 * 24))) + 1;
 
       for (let i = 0; i < days; i += 1) {
-        console.log('fetching day', start.toString());
         promises.push(this.fetchUTCDay(start.toISOString(), originalStart, end));
         start.setDate(start.getDate() + 1);
       }
@@ -174,13 +170,11 @@ export default class DataLoader {
       const months = Math.round(diff / (1000 * 60 * 60 * 24 * 31)) + 1;
 
       for (let i = 0; i < months; i += 1) {
-        console.log('fetching month', start.toString());
         promises.push(this.fetchUTCMonth(start.toISOString(), originalStart, end));
         start.setMonth(start.getMonth() + 1);
       }
     }
 
-    const chunks = Promise.all(promises);
-    return chunks;
+    return Promise.all(promises);
   }
 }
diff --git a/tools/rum/slicer.js b/tools/rum/slicer.js
index 3b59f1a6..a791a57c 100644
--- a/tools/rum/slicer.js
+++ b/tools/rum/slicer.js
@@ -34,7 +34,7 @@ const isDefaultConversion = Object.keys(conversionSpec).length === 1
   && conversionSpec.checkpoint
   && conversionSpec.checkpoint[0] === 'click';
 
-window.addEventListener('pageshow', () => elems.canvas && herochart.render());
+window.addEventListener('pageshow', () => !elems.canvas && herochart.render());
 
 // set up metrics for dataChunks
 dataChunks.addSeries('pageViews', (bundle) => bundle.weight);
@@ -273,8 +273,6 @@ export async function draw() {
 }
 
 async function loadData(config) {
-  console.log('loadData', config);
-
   const scope = config.value;
   const params = new URL(window.location.href).searchParams;
   const startDate = params.get('startDate') ? `${params.get('startDate')}` : null;
@@ -362,7 +360,6 @@ const io = new IntersectionObserver((entries) => {
     });
 
     herochart.render();
-    // sidebar.updateFacets();
 
     elems.filterInput.value = params.get('filter');
     elems.viewSelect.value = {

From 2eea36c4341c6a09bb212ee5b63add85c8435725 Mon Sep 17 00:00:00 2001
From: Alexandre Capt <acapt@adobe.com>
Date: Tue, 24 Sep 2024 14:57:02 +0200
Subject: [PATCH 19/20] feat: improve elements visibility

---
 tools/rum/elements/daterange-picker.js | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/tools/rum/elements/daterange-picker.js b/tools/rum/elements/daterange-picker.js
index 1b730c88..80c50667 100644
--- a/tools/rum/elements/daterange-picker.js
+++ b/tools/rum/elements/daterange-picker.js
@@ -40,7 +40,7 @@ const STYLES = `
     font: inherit;
     border-color: var(--gray-100);
     border: 2px solid var(--gray-300);
-    padding: 0.4em 0.85em;
+    padding: 0.4em 0.85em 0.1em;
     background-color: var(--gray-100);
     cursor: pointer;
     transition: border-color 0.2s, background-color 0.2s;
@@ -78,7 +78,6 @@ const STYLES = `
     grid-template-columns: minmax(0, 1fr);
     gap: 16px 12px;
     right: 0;
-    top: calc(100% + 8px);
     margin-top: 4px;
     border-radius: 4px;
     padding: calc(0.4em + 2px);
@@ -89,11 +88,10 @@ const STYLES = `
   }
 
   ul {
+    position: relative;
     list-style: none;
-    position: absolute;
     left: 0;
     right: 0;
-    top: calc(100% + 8px);
     margin: 0;
     border-radius: 8px;
     padding: calc(0.4em + 2px);
@@ -131,20 +129,30 @@ const STYLES = `
       font-size: var(--type-body-l-size);
     }
 
+    ul {
+      position: absolute;
+    }
+
     input {
       min-width: 200px;
     }
 
     .input-wrapper {
-      min-width: 500px;
+      min-width: 600px;
     }
 
     input[data-custom='true'] ~ .input-wrapper {
       grid-template-columns: minmax(0, 1fr);
     }
 
+    .date-field {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+    }
+
     .date-field label {
-      margin-bottom: 0.5em;
+      margin-top: 4px;
     }
   }
 

From 96cc8fa61c47d847591e2189ad50c3d28d8e808a Mon Sep 17 00:00:00 2001
From: Alexandre Capt <acapt@adobe.com>
Date: Tue, 24 Sep 2024 17:16:47 +0200
Subject: [PATCH 20/20] feat: week view up to 3 years

---
 tools/rum/charts/skyline.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/tools/rum/charts/skyline.js b/tools/rum/charts/skyline.js
index 372ef747..c0b903db 100644
--- a/tools/rum/charts/skyline.js
+++ b/tools/rum/charts/skyline.js
@@ -502,8 +502,8 @@ export default class SkylineChart extends AbstractChart {
         customView = 'month';
         unit = 'day';
         units = 30;
-      } else if (diff < (1000 * 60 * 60 * 24 * 365)) {
-        // less than a year
+      } 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));