Implement time-aware slider ticks as found in eodash

elements/timecontrol/package.json

@@ -28,6 +28,7 @@
     "lint:fix": "eslint --ext .js,.ts . --fix"
   },
   "dependencies": {
+    "dayjs": "^1.11.9",
     "lit": "^3.0.2",
     "toolcool-range-slider": "^4.0.27"
   }

elements/timecontrol/src/main.ts

@@ -1,4 +1,4 @@
-import { LitElement, html } from "lit";
+import { LitElement, html, svg } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { Map } from "ol";
 import Layer from "ol/layer/Layer";
@@ -8,6 +8,13 @@ import { style } from "./style";
 import { styleEOX } from "./style.eox";
 import { UrlFunction } from "ol/Tile";
 
+import dayjs from "dayjs";
+import dayOfYear from "dayjs/plugin/dayOfYear";
+import isoWeek from "dayjs/plugin/isoWeek";
+
+dayjs.extend(dayOfYear);
+dayjs.extend(isoWeek);
+
 @customElement("eox-timecontrol")
 export class EOxTimeControl extends LitElement {
   /**
@@ -206,18 +213,25 @@ export class EOxTimeControl extends LitElement {
 
           ${this.slider
             ? html`
-                <tc-range-slider
-                  data="${this.animationValues}"
-                  part="slider"
-                  value="${this.animationValues[this._newTimeIndex]}"
-                  style="display: inline-block;"
-                  @change="${(evt: { detail: { value: string } }) =>
-                    this._updateStep(
-                      this.animationValues.findIndex(
-                        (v) => v === evt.detail.value
-                      ) - this._newTimeIndex
-                    )}"
-                ></tc-range-slider>
+                <div class="slider-col">
+                  <tc-range-slider
+                    data="${this.animationValues}"
+                    part="slider"
+                    value="${this.animationValues[this._newTimeIndex]}"
+                    style="display: inline-block;"
+                    @change="${(evt: { detail: { value: string } }) =>
+                      this._updateStep(
+                        this.animationValues.findIndex(
+                          (v) => v === evt.detail.value
+                        ) - this._newTimeIndex
+                      )}"
+                  ></tc-range-slider>
+
+                  <eox-sliderticks
+                    width="300"
+                    .times="${this.animationValues}"
+                  ></eox-sliderticks>
+                </div>
               `
             : ""}
 
@@ -229,3 +243,118 @@ export class EOxTimeControl extends LitElement {
     `;
   }
 }
+
+@customElement("eox-sliderticks")
+export class SliderTicks extends LitElement {
+  @property({ type: Number }) width: number = 0;
+  @property({ type: Array }) times: string[] = [];
+
+  @state() height = 6;
+  @state() svgWidth = 0;
+
+  connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener("resize", this.handleResize.bind(this));
+  }
+
+  disconnectedCallback() {
+    window.removeEventListener("resize", this.handleResize.bind(this));
+    super.disconnectedCallback();
+  }
+
+  firstUpdated() {
+    this.handleResize();
+  }
+
+  handleResize() {
+    this.svgWidth = this.shadowRoot.querySelector("svg").clientWidth;
+    this.height = this.shadowRoot.querySelector("svg").clientHeight;
+  }
+
+  get lines() {
+    const num = this.numLines > this.width / 2 ? this.width / 2 : this.numLines;
+
+    const spacing = this.width / (num - 1);
+    return Array.from({ length: this.numLines }, (_, i) => i * spacing);
+  }
+
+  get numLines() {
+    return this.times ? this.times.length : 0;
+  }
+
+  get yearMarks(): { label: number; position: number }[] {
+    const yearMarks: { label: number; position: number }[] = [];
+    let previousYear: number = null;
+
+    this.lines.forEach((line, index) => {
+      const currentTime = dayjs(this.times[index]);
+      const currentYear = currentTime.year();
+
+      // If it's the first tick or if the year has changed, add a year mark
+      if (index === 0 || currentYear !== previousYear) {
+        yearMarks.push({
+          label: currentYear,
+          position: line, // Assuming 'line' is the position of the tick
+        });
+      }
+
+      // Update previousYear for the next iteration
+      previousYear = currentYear;
+    });
+
+    // Filter out year marks that are too close together, in favor of the second one.
+    return yearMarks.filter((current, i) => {
+      const next = yearMarks[i + 1];
+
+      return !(next && next.position - current.position < 25);
+    });
+  }
+
+  isYearLine(line: number): boolean {
+    // Check if this line's position is approximately equal to any year mark position
+    const isYearMark = this.yearMarks.some(
+      (yearMark) => Math.abs(yearMark.position - line) < 1.0
+    );
+
+    return isYearMark;
+  }
+
+  render() {
+    return html`
+      <div class="fill-width" style="margin-top: 3px;">
+        <svg
+          style="width: ${this.width}px; height: 30px;"
+          viewBox="-1 0 ${this.width + 2} ${this.height}"
+        >
+          ${this.lines.map(
+            (line, index) => svg`
+            <line
+              key=${index}
+              x1=${line}
+              y1="0"
+              x2=${line}
+              y2=${this.isYearLine(line) ? 12 : 6}
+              stroke=${this.isYearLine(line) ? "#222" : "#7596A2"}
+              stroke-width=${this.isYearLine(line) ? 1 : 1}
+            ></line>
+          `
+          )}
+          ${this.yearMarks.map(
+            (year, index) => svg`
+            <text
+              key=${`y${index}`}
+              x=${year.position}
+              y=${this.height - 1}
+              fill="#555"
+              font-size="13"
+              font-weight="500"
+            >
+              ${year.label}
+            </text>
+          `
+          )}
+        </svg>
+      </div>
+    `;
+  }
+}

elements/timecontrol/timecontrol.stories.js

@@ -6,8 +6,37 @@ export default {
   title: "Elements/eox-timecontrol",
   tags: ["autodocs"],
   component: "eox-timecontrol",
-  render: () => html`
+};
+
+export const Primary = {
+  args: {
+    for: "eox-map#primary",
+    layer: "AWS_NO2-VISUALISATION",
+    animationProperty: "TIME",
+    animationValues: [
+      "2022-12-05",
+      "2022-12-12",
+      "2022-12-19",
+      "2022-12-26",
+      "2023-01-16",
+      "2023-01-23",
+      "2023-01-30",
+      "2023-02-06",
+      "2023-02-13",
+      "2023-02-27",
+      "2023-03-06",
+      "2023-03-13",
+      "2023-03-20",
+      "2023-03-27",
+      "2023-04-03",
+      "2023-04-10",
+      "2023-04-17",
+      "2023-04-24",
+    ],
+  },
+  render: (args) => html`
     <eox-map
+      id="primary"
       style="width: 400px; height: 300px;"
       zoom="3"
       center="[1000000, 6000000]"
@@ -34,29 +63,55 @@ export default {
   ]'
     ></eox-map>
     <eox-timecontrol
-      for="eox-map"
-      layer="AWS_NO2-VISUALISATION"
-      animation-property="TIME"
-      animation-values='[
-    "2023-01-16",
-    "2023-01-23",
-    "2023-01-30",
-    "2023-02-06",
-    "2023-02-13",
-    "2023-02-27",
-    "2023-03-06",
-    "2023-03-13",
-    "2023-03-20",
-    "2023-03-27",
-    "2023-04-03",
-    "2023-04-10",
-    "2023-04-17",
-    "2023-04-24"
-  ]'
+      .for=${args.for}
+      .layer=${args.layer}
+      .animationProperty=${args.animationProperty}
+      .animationValues=${args.animationValues}
+      .slider=${args.slider}
     ></eox-timecontrol>
   `,
 };
 
-export const Primary = {
-  args: {},
+export const Slider = {
+  args: {
+    ...Primary.args,
+    for: "eox-map#slider",
+    slider: true,
+  },
+  render: (args) => html`
+    <eox-map
+      id="slider"
+      style="width: 400px; height: 300px;"
+      zoom="3"
+      center="[1000000, 6000000]"
+      layers='[
+{
+  "type": "Tile",
+  "properties": {
+    "id":"AWS_NO2-VISUALISATION"
+  },
+  "source": {
+    "type": "TileWMS",
+    "url": "https://services.sentinel-hub.com/ogc/wms/0635c213-17a1-48ee-aef7-9d1731695a54",
+    "params": {
+      "LAYERS": "AWS_NO2-VISUALISATION"
+    }
+  }
+},
+{
+  "type":"Tile",
+  "source":{
+    "type":"OSM"
+  }
+}
+]'
+    ></eox-map>
+    <eox-timecontrol
+      .for=${args.for}
+      .layer=${args.layer}
+      .animationProperty=${args.animationProperty}
+      .animationValues=${args.animationValues}
+      .slider=${args.slider}
+    ></eox-timecontrol>
+  `,
 };