simple-elevation-chart/src/elevation-chart.js

Very simple SVG-based elevation chart

customElements.define(
  'elevation-chart',
  class extends HTMLElement {
    constructor() {
      super()
      this.addEventListener('DataAvailable', this)
    }

    async handleEvent(event) {
      this.data = event.detail.data
      this.distance = this.data.reduce((acc, [ele, dist]) => acc + dist, 0)
      let prev
      this.gain = 0
      this.loss = 0
      for (const [ele, dist] of this.data) {
        if (prev !== undefined) {
          const diff = ele - prev
          if (diff > 0) {
            this.gain += diff
          } else {
            this.loss += diff
          }
        }
        prev = ele
      }
      this.innerHTML = `
        <p>
          Distance : ${Math.round(this.distance / 1000, 1)} km •
          Gain: ${Math.round(this.gain, 0)} m ↗ •
          Loss: ${Math.round(this.loss, 0)} m ↘ •
          Altitude : <span id="altitude">0</span> meters
        </p>
        <object data="elevation.svg" data-elevation="${JSON.stringify(this.data)}" type="image/svg+xml">
      `
      const object = this.querySelector('object')

      object.addEventListener('chart:over', (event) => {
        const dataset = event.detail.element.dataset
        const [ele, dist] = this.data[dataset.index] || [0, 0]
        this.querySelector('#altitude').textContent = ele.toFixed(0)
      })
    }
  },
)