Feat: init eox-timeslider

[srijitcoder]

Implemented changes

Screenshots/Videos

Checklist before requesting a review

• I have performed a self-review of my code
• I have added a test related to this feature/fix
• For new features: I have created a story showcasing this new feature
• All checks have passed
• The PR title follows conventional commit style and reflects the type of change (major/minor/patch, breaking)
• The PR title describes the change within this element (each merged PR equals one entry in the element's changelog!)

[netlify]

✅ Deploy Preview for eoxelements ready!

Name	Link
🔨 Latest commit	6f5bbb8
🔍 Latest deploy log	https://app.netlify.com/projects/eoxelements/deploys/6909f67c1c5a270008a58f2d
😎 Deploy Preview	https://deploy-preview-1820--eoxelements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[A-Behairi]

API overview:
passing the map to the component via for attribute/property, parsing layers and getting timeControlValues from the layer properties, which is a list of timestamps and additional metadata for filtering (e.g. cloud cover) and a timeControlProperty; only layers with a timeControlValues property are displayed on the picker/timeline. If compare mode is enabled for the map, also gets the layers of the linked map. In simple/casual mode, only a date picker is displayed, in expert mode, a timeline and animation rendering options will be shown additionally.

Layers params gets updated by default on datetime change using the timeControlProperty property from the layer. And an additional attribute/property to disable this to be done externally (for e.g external-map-rendering).

When rendering the animation, getting the canvas of the map as frames (single map) or combination of maps (compare mode)

[silvester-pari]

Some points to consider:

• different colors for different datasets(?) -> support color property, if not present fall back to primary
• for filtered out entries: find way to use opacity instead of hard-coded color (current hack: lighter color), maybe automatic calculation color + lightness/darkness
• timeslider: group together entries if they are too close inside a chunk/bin (configurable bin width)?
• support full/empty/percentage-filled dots? -> decided to only support filter, and hdie/filter out respective dots
• maximum number of dots per date (e.g. maximum 3, if it is more than 3, then show 2 plus a "+" sign)?
• if multiple per day: show information about individual entries (e.g. time of the individual entries, list etc.) in a popup/tooltip? -> using vanilla calendar pro's "popup functionality"
• if navigating in picker/slider, the element should emit an event so we can fetch more available dates (e.g. when navigating to a different year, since in the beginning we only fetch a month of available dates or so in the example story)

cc @miskovica @srijitcoder