fluency-v8-components 1.5.9 → 1.6.1

package/dist/index.css

@@ -1 +1 @@
-.x-center[data-v-59ba8a5f]{transform:translate(-50%)}.left-tooltip[data-v-59ba8a5f]{transform:translate(-120%)}.right-tooltip[data-v-59ba8a5f]{transform:translate(20%)}.prism-editor-wrapper{width:100%;height:100%;display:flex;align-items:flex-start;overflow:auto;-o-tab-size:1.5em;tab-size:1.5em;-moz-tab-size:1.5em}@media (-ms-high-contrast:active),(-ms-high-contrast:none){.prism-editor-wrapper .prism-editor__textarea{color:transparent!important}.prism-editor-wrapper .prism-editor__textarea::-moz-selection{background-color:#accef7!important;color:transparent!important}.prism-editor-wrapper .prism-editor__textarea::selection{background-color:#accef7!important;color:transparent!important}}.prism-editor-wrapper .prism-editor__container{position:relative;text-align:left;box-sizing:border-box;padding:0;overflow:hidden;width:100%}.prism-editor-wrapper .prism-editor__line-numbers{height:100%;overflow:hidden;flex-shrink:0;padding-top:4px;margin-top:0;margin-right:10px}.prism-editor-wrapper .prism-editor__line-number{text-align:right;white-space:nowrap}.prism-editor-wrapper .prism-editor__textarea{position:absolute;top:0;left:0;height:100%;width:100%;resize:none;color:inherit;overflow:hidden;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-text-fill-color:transparent}.prism-editor-wrapper .prism-editor__editor,.prism-editor-wrapper .prism-editor__textarea{margin:0;border:0;background:none;box-sizing:inherit;display:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-variant-ligatures:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;-moz-tab-size:inherit;-o-tab-size:inherit;tab-size:inherit;text-indent:inherit;text-rendering:inherit;text-transform:inherit;white-space:pre-wrap;word-wrap:keep-all;overflow-wrap:break-word;padding:0}.prism-editor-wrapper .prism-editor__textarea--empty{-webkit-text-fill-color:inherit!important}.prism-editor-wrapper .prism-editor__editor{position:relative;pointer-events:none}pre[class*=language-],code[class*=language-]{color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo,Monaco,Consolas,Andale Mono,Ubuntu Mono,Courier New,monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]::selection,code[class*=language-]::selection,pre[class*=language-] *::selection,code[class*=language-] *::selection{text-shadow:none;background:#264f78}@media print{pre[class*=language-],code[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e}:not(pre)>code[class*=language-]{padding:.1em .3em;border-radius:.3em;color:#db4c69;background:#1e1e1e}.namespace{opacity:.7}.token.doctype .token.doctype-tag{color:#569cd6}.token.doctype .token.name{color:#9cdcfe}.token.comment,.token.prolog,.token.timestamp{color:#6a9955}.token.errors{color:#c10015}.token.punctuation,.language-html .language-css,.language-html .language-javascript{color:#fdbe23}.token.property,.token.tag,.token.boolean,.token.number,.token.constant,.token.symbol,.token.inserted,.token.unit{color:#b5cea8}.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.deleted{color:#ce9178}.language-css .token.string.url{text-decoration:underline}.token.operator,.token.entity{color:#d4d4d4}.token.operator.arrow{color:#569cd6}.token.atrule{color:#ce9178}.token.atrule .token.rule{color:#c586c0}.token.atrule .token.url{color:#9cdcfe}.token.atrule .token.url .token.function{color:#dcdcaa}.token.atrule .token.url .token.punctuation{color:#d4d4d4}.token.keyword.module,.token.keyword.control-flow{color:#c586c0}.token.function,.token.function .token.maybe-class-name,.token.brackets{color:#e9d299}.token.builtinfunction{color:#ce92d8}.token.keyword,.token.curlybraces{color:#569cd6}.token.regex{color:#d16969}.token.important{color:#569cd6}.token.italic{font-style:italic}.token.constant{color:#9cdcfe}.token.class-name,.token.maybe-class-name{color:#4ec9b0}.token.console,.token.parameter,.token.interpolation{color:#9cdcfe}.token.punctuation.interpolation-punctuation,.token.boolean{color:#569cd6}.token.property,.token.variable,.token.imports .token.maybe-class-name,.token.exports .token.maybe-class-name{color:#9cdcfe}.token.selector,.token.escape{color:#d7ba7d}.token.tag{color:#569cd6}.token.tag .token.punctuation,.token.cdata{color:gray}.token.attr-name{color:#9cdcfe}.token.attr-value,.token.attr-value .token.punctuation{color:#ce9178}.token.attr-value .token.punctuation.attr-equals{color:#d4d4d4}.token.entity{color:#569cd6}.token.namespace{color:#4ec9b0}pre[class*=language-javascript],code[class*=language-javascript],pre[class*=language-jsx],code[class*=language-jsx],pre[class*=language-typescript],code[class*=language-typescript],pre[class*=language-tsx],code[class*=language-tsx]{color:#9cdcfe}pre[class*=language-css],code[class*=language-css]{color:#ce9178}pre[class*=language-html],code[class*=language-html]{color:#d4d4d4}.language-regex .token.anchor{color:#dcdcaa}.language-html .token.punctuation{color:gray}pre[class*=language-]>code[class*=language-]{position:relative;z-index:1}.line-highlight.line-highlight{background:#f7ebc6;box-shadow:inset 5px 0 #f7d87c;z-index:0}.primary[data-v-2890730f]{font-weight:400;padding-top:5px}.primary[data-v-2890730f]:first-child{font-weight:400}
+.x-center[data-v-59ba8a5f]{transform:translate(-50%)}.left-tooltip[data-v-59ba8a5f]{transform:translate(-120%)}.right-tooltip[data-v-59ba8a5f]{transform:translate(20%)}.prism-editor-wrapper{width:100%;height:100%;display:flex;align-items:flex-start;overflow:auto;-o-tab-size:1.5em;tab-size:1.5em;-moz-tab-size:1.5em}@media (-ms-high-contrast:active),(-ms-high-contrast:none){.prism-editor-wrapper .prism-editor__textarea{color:transparent!important}.prism-editor-wrapper .prism-editor__textarea::-moz-selection{background-color:#accef7!important;color:transparent!important}.prism-editor-wrapper .prism-editor__textarea::selection{background-color:#accef7!important;color:transparent!important}}.prism-editor-wrapper .prism-editor__container{position:relative;text-align:left;box-sizing:border-box;padding:0;overflow:hidden;width:100%}.prism-editor-wrapper .prism-editor__line-numbers{height:100%;overflow:hidden;flex-shrink:0;padding-top:4px;margin-top:0;margin-right:10px}.prism-editor-wrapper .prism-editor__line-number{text-align:right;white-space:nowrap}.prism-editor-wrapper .prism-editor__textarea{position:absolute;top:0;left:0;height:100%;width:100%;resize:none;color:inherit;overflow:hidden;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-text-fill-color:transparent}.prism-editor-wrapper .prism-editor__editor,.prism-editor-wrapper .prism-editor__textarea{margin:0;border:0;background:none;box-sizing:inherit;display:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-variant-ligatures:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;-moz-tab-size:inherit;-o-tab-size:inherit;tab-size:inherit;text-indent:inherit;text-rendering:inherit;text-transform:inherit;white-space:pre-wrap;word-wrap:keep-all;overflow-wrap:break-word;padding:0}.prism-editor-wrapper .prism-editor__textarea--empty{-webkit-text-fill-color:inherit!important}.prism-editor-wrapper .prism-editor__editor{position:relative;pointer-events:none}pre[class*=language-],code[class*=language-]{color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo,Monaco,Consolas,Andale Mono,Ubuntu Mono,Courier New,monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]::selection,code[class*=language-]::selection,pre[class*=language-] *::selection,code[class*=language-] *::selection{text-shadow:none;background:#264f78}@media print{pre[class*=language-],code[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e}:not(pre)>code[class*=language-]{padding:.1em .3em;border-radius:.3em;color:#db4c69;background:#1e1e1e}.namespace{opacity:.7}.token.doctype .token.doctype-tag{color:#569cd6}.token.doctype .token.name{color:#9cdcfe}.token.comment,.token.prolog,.token.timestamp{color:#6a9955}.token.errors{color:#c10015}.token.punctuation,.language-html .language-css,.language-html .language-javascript{color:#fdbe23}.token.property,.token.tag,.token.boolean,.token.number,.token.constant,.token.symbol,.token.inserted,.token.unit{color:#b5cea8}.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.deleted{color:#ce9178}.language-css .token.string.url{text-decoration:underline}.token.operator,.token.entity{color:#d4d4d4}.token.operator.arrow{color:#569cd6}.token.atrule{color:#ce9178}.token.atrule .token.rule{color:#c586c0}.token.atrule .token.url{color:#9cdcfe}.token.atrule .token.url .token.function{color:#dcdcaa}.token.atrule .token.url .token.punctuation{color:#d4d4d4}.token.keyword.module,.token.keyword.control-flow{color:#c586c0}.token.function,.token.function .token.maybe-class-name,.token.brackets{color:#e9d299}.token.builtinfunction{color:#ce92d8}.token.keyword,.token.curlybraces{color:#569cd6}.token.regex{color:#d16969}.token.important{color:#569cd6}.token.italic{font-style:italic}.token.constant{color:#9cdcfe}.token.class-name,.token.maybe-class-name{color:#4ec9b0}.token.console,.token.parameter,.token.interpolation{color:#9cdcfe}.token.punctuation.interpolation-punctuation,.token.boolean{color:#569cd6}.token.property,.token.variable,.token.imports .token.maybe-class-name,.token.exports .token.maybe-class-name{color:#9cdcfe}.token.selector,.token.escape{color:#d7ba7d}.token.tag{color:#569cd6}.token.tag .token.punctuation,.token.cdata{color:gray}.token.attr-name{color:#9cdcfe}.token.attr-value,.token.attr-value .token.punctuation{color:#ce9178}.token.attr-value .token.punctuation.attr-equals{color:#d4d4d4}.token.entity{color:#569cd6}.token.namespace{color:#4ec9b0}pre[class*=language-javascript],code[class*=language-javascript],pre[class*=language-jsx],code[class*=language-jsx],pre[class*=language-typescript],code[class*=language-typescript],pre[class*=language-tsx],code[class*=language-tsx]{color:#9cdcfe}pre[class*=language-css],code[class*=language-css]{color:#ce9178}pre[class*=language-html],code[class*=language-html]{color:#d4d4d4}.language-regex .token.anchor{color:#dcdcaa}.language-html .token.punctuation{color:gray}pre[class*=language-]>code[class*=language-]{position:relative;z-index:1}.line-highlight.line-highlight{background:#f7ebc6;box-shadow:inset 5px 0 #f7d87c;z-index:0}.primary[data-v-2890730f]{font-weight:400;padding-top:5px}.primary[data-v-2890730f]:first-child{font-weight:400}.rangeslider-container .axis path,.rangeslider-container .axis line{fill:none;stroke:#000;shape-rendering:crispEdges}.rangeslider-container .axis text{font:9px sans-serif}.rangeslider-container line.selected{stroke:#ff4800;stroke-width:4}.rangeslider-container .axis.path,.rangeslider-container .axis.line{fill:none;stroke:#000;shape-rendering:crispEdges}.rangeslider-container .axis.text{font:9px sans-serif}.rangeslider-container line.selected{stroke:#027be3;stroke-width:2}.rangeslider-container .brush .extent{fill-opacity:.125;shape-rendering:crispEdges}.rangeslider-container .resize{display:inline!important;fill:#027be3;fill-opacity:1;stroke:gray;stroke-width:0px}.resize:focus-visible{outline:3px solid black}

package/dist/{index.es-C9xsQDxF.mjs → index.es-DW6Ls8hH.mjs}

@@ -1,4 +1,4 @@
-import { c as Da, _ as Va, g as il } from "./index-Bhs-DoPS.mjs";
+import { c as Da, _ as Va, g as il } from "./index-BAGLjhJi.mjs";
 var fn = {}, cn = {}, cr, vn;
 function Q() {
   if (vn) return cr;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fluency-v8-components",
-  "version": "1.5.9",
+  "version": "1.6.1",
   "main": "dist/fluency-v8-components.umd.js",
   "module": "dist/fluency-v8-components.es.js",
   "types": "dist/index.d.ts",

package/src/assets/main.css

@@ -144,7 +144,7 @@
 }
 
 @utility std-light {
-  @apply bg-blue-50;
+  @apply bg-blue-100;
 }
 
 @utility std-dark {
@@ -325,6 +325,10 @@
   @apply w-10 h-10;
 }
 
+@utility link {
+  @apply text-blue-400 hover:underline;
+}
+
 @font-face {
   font-family: "Open Sans";
   src: url("/OpenSans-VariableFont_wdth,wght.ttf");
@@ -510,22 +514,22 @@
   }
 
   .chip {
-    @apply text-sm font-medium px-2 py-1 rounded-full flex flex-row;
+    @apply inline-flex items-center rounded-md px-2 py-1 font-medium ring-1 ring-inset;
   }
   .select-chip {
     @apply px-1 text-sm font-medium rounded-full bg-sky-200 dark:bg-sky-700;
   }
   .green-chip {
-    @apply bg-green-200 text-green-700 dark:bg-green-800 dark:text-green-300;
+    @apply bg-green-400/10 ring-green-500/20 text-green-400;
   }
   .red-chip {
-    @apply bg-red-200 text-red-600 dark:bg-red-800 dark:text-red-300;
+    @apply bg-red-400/10 ring-red-500/20 text-red-400;
   }
   .yellow-chip {
-    @apply bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300;
+    @apply bg-yellow-400/10 ring-yellow-500/20 text-yellow-400;
   }
   .blue-chip {
-    @apply bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300;
+    @apply bg-blue-400/10 ring-blue-500/20 text-blue-400;
   }
 
   .image-position-box {

package/src/components/charts/RangeSlider.vue

@@ -0,0 +1,513 @@
+<template>
+  <div
+    :id="chartID"
+    class="rangeslider-container"
+    style="max-height: 135px; max-width: 1185px;"
+  />
+</template>
+
+<script>
+import { extent } from 'd3-array'
+import { axisBottom } from 'd3-axis'
+import { brushX } from 'd3-brush'
+import { scaleLinear, scaleTime } from 'd3-scale'
+import { pointer, select } from 'd3-selection'
+import { timeHour } from 'd3-time'
+import { timeFormat } from 'd3-time-format'
+
+const ONE_HOUR_MS = 60 * 60 * 1000;
+const ONE_DAY_MS = 24 * 60 * 60 * 1000;
+
+export default {
+  props: {
+    chartData: {
+      type: Array,
+      default: () => []
+    },
+    chartID: {
+      type: String,
+      default: 'range-slider'
+    },
+    from: {
+      type: Number,
+      required: true
+    },
+    to: {
+      type: Number,
+      required: true
+    },
+    theme: {
+      type: String,
+      default: "light"
+    }
+  },
+  data () {
+    return {
+      currentTS: new Date(),
+      handleWidth: 10,
+      interval: 4,
+      margin: { top: 10, right: 15, bottom: 45, left: 15 },
+      maxTo: null,
+      minFrom: null,
+      previousSelectionValue: null,
+      startTimeIsDifferent: false,
+      endTimeIsDifferent: false,
+      size: { height: 100, width: 1000 },
+      week: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+      xScaleTime: null,
+      knownFrom: this.from,
+      knownTo: this.to
+    }
+  },
+  computed: {
+    start () {
+      if (this.from < this.minFrom) {
+        return this.minFrom
+      } else {
+        return this.from
+      }
+    },
+    end () {
+      if (this.to > this.maxTo) {
+        return this.maxTo
+      } else {
+        return this.to
+      }
+    },
+    isDark () {
+      return this.theme === "dark"
+    },
+  },
+  watch: {
+    chartData () {
+      const canvas = select(`#${this.chartID}`)
+      canvas.select('svg').remove()
+      this.drawChart()
+    },
+    from () {
+      this.updateSlider()
+    },
+    to () {
+      this.updateSlider()
+    },
+    theme () {
+      const canvas = select(`#${this.chartID}`)
+      canvas.select('svg').remove()
+      this.drawChart()
+    },
+  },
+  mounted () {
+    this.drawChart()
+  },
+  methods: {
+    determineTickTimeIntervalHours (timeDomain) {
+      const days = Math.round((timeDomain[1] - timeDomain[0]) / ONE_DAY_MS)
+
+      let interval = 4
+
+      if (days > 6 && days <= 12) {
+        interval = 8
+      } else if (days > 12 && days <= 20) {
+        interval = 12
+      } else if (days > 20) {
+        interval = 24
+      }
+
+      return interval
+    },
+    roundTimeMillisecends (interval, time) {
+      return this.roundTime(interval, new Date(time))
+    },
+    roundTimeDate (interval, date) {
+      return new Date(this.roundTime(interval, date))
+    },
+    roundTime (interval, date) {
+      const newDate = new Date(date)
+      const h =
+        newDate.getHours() +
+        newDate.getMinutes() / 60 +
+        newDate.getSeconds() / 3600 +
+        newDate.getMilliseconds() / 3600000
+
+      newDate.setHours(Math.round(h / interval) * interval)
+      newDate.setMinutes(0)
+      newDate.setSeconds(0)
+      newDate.setMilliseconds(0)
+
+      return newDate.getTime()
+    },
+    drawChart () {
+      const canvas = select(`#${this.chartID}`)
+
+      let textColor = 'black'
+      let bgColor = 'white'
+      if (this.isDark) {
+        textColor = 'white'
+        bgColor = '#303030'
+      }
+
+      console.log('textColor', textColor)
+
+      const svg = canvas
+        .append('svg')
+        .attr('preserveAspectRatio', 'xMinYMin meet')
+
+        .attr('viewBox', `0 0 ${this.size.width} ${this.size.height + 10}`)
+        .append('g')
+        .attr('background-color', bgColor)
+        .attr('transform', 'translate(' + this.margin.left + ',' + this.margin.top + ')')
+
+      const height = this.size.height - this.margin.top - this.margin.bottom
+      const width = this.size.width - this.margin.left - this.margin.right
+      const flowLine = this.chartData.map((d, i, arr) => {
+        const next = arr[i + 1]
+        const prev = arr[i - 1]
+
+        return {
+          x: d[0],
+          y: d[1],
+          x1: d[0],
+          y1: d[1],
+          x2: next ? next[0] : prev[0],
+          y2: next ? next[1] : prev[1]
+        }
+      })
+
+      const timeSeries = this.chartData.map(d => d[0])
+      const maxDate = timeSeries[timeSeries.length - 1]
+
+      // add an extra hour to the end since the interval is 1 hour
+      // this allows a full selection to the current time
+      if (Date.now() - maxDate <= ONE_HOUR_MS) {
+        const oneHourAhead = maxDate + ONE_HOUR_MS
+        timeSeries.push(oneHourAhead)
+      }
+
+      // scales the time range to pixels
+      const xScaleTime = scaleTime()
+        .domain(extent(timeSeries))
+        .range([0, width])
+      this.xScaleTime = xScaleTime
+
+      const interval = this.determineTickTimeIntervalHours(xScaleTime.domain())
+      this.interval = interval
+
+      this.maxTo = timeSeries[timeSeries.length - 1]
+      this.minFrom = timeSeries[0]
+      this.currentTS = this.maxTo
+
+      const timeFormatted = timeFormat('%H')
+
+      const xAxis = axisBottom(xScaleTime)
+        .ticks(timeFormatted.hours, interval)
+        .tickFormat(d => {
+          const hours = d.getHours()
+
+          if (hours === 0) {
+            return d.toLocaleString('en-us', { month: 'short' }) + ' ' + d.getDate() + ' ' + this.week[d.getDay()]
+          } else {
+            if (hours >= 12) {
+              return hours + ' pm'
+            } else {
+              return hours < 10 ? '0' + hours + ' am' : hours + ' am'
+            }
+          }
+        })
+
+      // yScale for upper histogram chart
+      const yScaleLinear = scaleLinear()
+        .domain(extent(this.chartData, d => d[1]))
+        .range([height - 2, 0])
+      this.yScaleLinear = yScaleLinear
+
+      // draws the x-axis in the middle with black/red text labeling
+      svg
+        .append('g')
+        .attr('class', 'xAxis')
+        .attr('transform', 'translate(0,' + height + ')')
+        .call(xAxis)
+        .selectAll('text')
+        .style('text-anchor', 'end')
+        .attr('dx', '-.8em')
+        .attr('dy', '.15em')
+        .attr('transform', 'rotate(-35)')
+        .style('fill', d => (d.getHours() === 0 ? '#027be3' : textColor))
+
+      // draws the histogram lines
+      const lines = svg
+        .append('g')
+        .selectAll('line')
+        .data(flowLine)
+        .enter()
+        .append('line')
+        .attr('class', 'flow-line')
+        .attr('x1', d => this.xScaleTime(d.x1))
+        .attr('y1', d => this.yScaleLinear(d.y1))
+        .attr('x2', d => this.xScaleTime(d.x2))
+        .attr('y2', d => this.yScaleLinear(d.y2))
+        .attr('stroke', '#9e9e9e')
+        .attr('stroke-width', '1')
+
+      // create brush handle (blue vertical bars)
+      const brushResizePath = (_, i) => {
+        return (
+          'M0,0h' +
+          (i <= 0 ? '-' : '') +
+          this.handleWidth +
+          'v' +
+          (height + 10) +
+          'h' +
+          (i <= 0 ? '' : '-') +
+          this.handleWidth +
+          'z'
+        )
+      }
+
+      const brush = brushX()
+        .extent([[0, -9], [width, height - 1]])
+        .on('start brush', event => brushMoved(event, this))
+        .on('end', event => brushEnd(event, this))
+      this.brush = brush
+
+      // create a brush for the draggable range selection / sliding window
+      const gBrush = svg
+        .append('g')
+        .attr('class', 'brush')
+        .call(brush)
+        .call(g =>
+          g
+            .select('.overlay')
+            .datum({ type: 'selection' })
+            .on('mousedown touchstart', beforeBrushStarted)
+        )
+      this.gBrush = gBrush
+
+      // adds the blue bars to each end of the slider
+      const handle = gBrush
+        .selectAll('.handle--custom')
+        .data([{ type: 'w' }, { type: 'e' }])
+        .enter()
+        .append('path')
+        .attr('id', (_, index) => index === 0 ? 'handle-left' : 'handle-right')
+        .attr('class', 'resize')
+        .attr('cursor', 'ew-resize')
+        .attr('d', brushResizePath)
+        .attr('focusable', 'true')
+        .attr('tabindex', 0)
+        .attr('role', 'slider')
+        .attr('aria-label', (_, index) => index === 0 ? 'from date/time value' : 'to date/time value')
+        .on('keydown', (event) => {
+          let startTime = new Date(this.from)
+          let endTime = new Date(this.to)
+
+          console.log('keydown event', event)
+
+          let STEP
+          if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {
+            STEP = -1
+          } else if (event.key === 'ArrowRight' || event.key === 'ArrowUp') {
+            STEP = 1
+          } else if (event.key === 'PageUp') {
+            STEP = 10
+          } else if (event.key === 'PageDown') {
+            STEP = -10
+          }
+
+          const isLeftHandle = document.activeElement.id === 'handle-left'
+          if (isLeftHandle) {
+            startTime = timeHour.offset(startTime, STEP)
+          } else {
+            endTime = timeHour.offset(endTime, STEP)
+          }
+
+          // only allow updates if the time delta is an hour or more
+          const deltaSeconds = (endTime - startTime) / 1000
+          if (deltaSeconds > 60 * 60 * Math.abs(STEP)) {
+            this.$emit('sliderChanged', { from: startTime, to: endTime })
+          }
+        })
+
+      // highlight area between startTime and endTime
+      gBrush.call(brush.move, [xScaleTime(this.start), xScaleTime(this.end)])
+
+      // if chart is clicked outside of selection re-center the selection
+      function beforeBrushStarted (event) {
+        const dx = xScaleTime(1) - xScaleTime(0)
+        const [cx] = pointer(event, this)
+
+        let [x0, x1] = [cx - dx / 2, cx + dx / 2]
+        const [X0, X1] = xScaleTime.range()
+
+        while (Math.abs(x0 - x1) < 60) {
+          if (x0 > X0 && x0 - 1 > X0) {
+            x0 -= 1
+          } else if (x0 > X0) {
+            x0 = X0
+          }
+
+          if (x1 < X1 && x1 + 1 < X1) {
+            x1 += 1
+          } else if (x1 < X1) {
+            x1 = X1
+          }
+        }
+        select(this.parentNode).call(brush.move, x1 > X1 ? [X1 - dx, X1] : x0 < X0 ? [X0, X0 + dx] : [x0, x1])
+      }
+
+      function brushMoved (selection, oldState) {
+        // keep blue
+        // brush handles aligned with selection ends
+
+        if (isNaN(selection.selection[0]) || isNaN(selection.selection[1])) {
+          selection.selection[0] = oldState.knownFrom
+          selection.selection[1] = oldState.knownTo
+        } else {
+          oldState.knownFrom = selection.selection[0]
+          oldState.knownTo = selection.selection[1]
+        }
+
+        handle.attr('display', null).attr('transform', function (_, i) {
+          return 'translate(' + [selection.selection[i], -height / 5] + ')'
+        })
+
+        handle.attr('aria-valuenow', (_, index) => index === 0 ? oldState.from / 1000 : oldState.to / 1000) // should be unixEpochTime
+        handle.attr('aria-valuemin', oldState.minFrom / 1000) // unixEpochTime
+        handle.attr('aria-valuemax', oldState.maxTo / 1000) // unixEpochTime
+        handle.attr('aria-valuetext', (_, index) => {
+          const formatTime = timeFormat('%Y/%m/%d %H:%M')
+          return index === 0 ? formatTime(new Date(oldState.from)) : formatTime(new Date(oldState.to))
+        })
+
+        // changes the line color to red when selected ... looking for true false
+
+        // lines.classed('selected', false)
+
+        lines.classed('selected', (data, index, localLines) => {
+          const start = selection.selection[0]
+          const end = selection.selection[1]
+          const line = select(localLines[index])
+          const x1 = line.attr('x1'),
+            x2 = line.attr('x2')
+          return x1 && x1 >= start && x2 <= end
+        })
+
+        // only emit when the slider is moved and not for incoming updates
+        if (selection.sourceEvent) {
+          const brushEnds = selection.selection.map(oldState.xScaleTime.invert)
+          oldState.emitSliderChange(brushEnds)
+        }
+      }
+
+      // end event handler
+      function brushEnd (event, oldState) {
+        if (!event.sourceEvent || !event.selection) {
+          return
+        }
+
+        const brushEnds = event.selection.map(oldState.xScaleTime.invert)
+        oldState.emitSliderChange(brushEnds)
+      }
+    },
+
+    emitSliderChange (brushEnds) {
+      let startTime = brushEnds[0]
+      let endTime = brushEnds[1]
+
+      // round the start/end selection time only if it was moved
+      if (this.startTimeIsDifferent) {
+        startTime = this.roundTimeDate(1, startTime)
+      }
+
+      if (this.endTimeIsDifferent) {
+        endTime = this.roundTimeDate(1, endTime)
+      }
+
+      // reach the left border
+      if (endTime.getTime() >= this.maxTo) {
+        endTime = new Date(this.currentTS)
+
+        // make sure currentTS is not out of display bound
+        if (this.currentTS >= this.maxTo + this.interval * 3600000) {
+          endTime = new Date(this.maxTo)
+        }
+      }
+
+      // emit selection changed event
+      if (this.timeout) {
+        clearTimeout(this.timeout)
+      }
+
+      // debounce for performance
+      this.timeout = setTimeout(() => {
+        this.$emit('sliderChanged', { from: startTime, to: endTime })
+      }, 10)
+    },
+    updateSlider () {
+      this.gBrush.call(this.brush.move, [this.xScaleTime(this.start), this.xScaleTime(this.end)])
+    }
+  }
+}
+</script>
+
+<style>
+  .rangeslider-container {
+    .axis path, .axis line {
+      fill: none;
+      stroke: #000;
+      shape-rendering: crispEdges;
+    }
+
+    .axis text {
+      font: 9px sans-serif;
+    }
+
+    line.selected {
+      stroke:#ff4800;
+      stroke-width: 4;
+    }
+
+    .brush .extent {
+      fill-opacity: .125;
+      shape-rendering: crispEdges;
+    }
+
+    .resize {
+      display: inline !important; /* show when empty */
+      fill: #027be3;
+      fill-opacity: 1.0;
+      stroke: #808080;
+      stroke-width: 0px;
+    }
+  }
+
+  .rangeslider-container .axis.path{
+    fill: none;stroke: #000;
+    shape-rendering: crispEdges;
+  }
+  .rangeslider-container .axis.line{
+    fill: none;stroke: #000;
+    shape-rendering: crispEdges;
+  }
+  .rangeslider-container .axis.text{
+    font: 9px sans-serif;
+  }
+  .rangeslider-container line.selected{
+    stroke:#027be3;
+    stroke-width: 2;
+  }
+  .rangeslider-container .brush .extent {
+    fill-opacity: .125;
+    shape-rendering: crispEdges;
+  }
+  .rangeslider-container .resize{
+    display: inline !important; /* show when empty */
+    fill: #027be3;
+    fill-opacity: 1.0;
+    stroke: #808080;
+    stroke-width: 0px;
+  }
+
+  .resize:focus-visible {
+    outline: 3px solid black;
+  }
+</style>

package/src/components/charts/TimelineChart.vue

@@ -27,6 +27,14 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  width: {
+    type: Number,
+    default: 1200,
+  },
+  height: {
+    type: Number,
+    default: 300,
+  },
   theme: {
     type: String,
     default: "light",
@@ -201,8 +209,8 @@ function plotGraph() {
   const plot = Plot.plot({
     marginLeft,
     marginRight,
-    width: 1200,
-    height: 320,
+    width: props.width,
+    height: props.height,
     marginBottom: 50,
     inset: 20,
     style: {