@operato/chart 7.0.12 → 7.0.13

package/src/editors/configurer.ts

@@ -1,6 +1,9 @@
+import { ChartConfiguration } from 'chart.js'
+
 export class Configurer {
   public value: OperatoChart.ChartConfig
   public currentSeriesIndex: number = 0
+  public currentAnnotationIndex: number = 0
   public initializer: () => OperatoChart.ChartConfig
 
   constructor(value: OperatoChart.ChartConfig | null, initializer: () => OperatoChart.ChartConfig) {
@@ -13,6 +16,11 @@ export class Configurer {
     this.series = this.datasets[this.currentSeriesIndex]!
   }
 
+  setCurrentAnnotationIndex(currentAnnotationIndex: number) {
+    this.currentAnnotationIndex = currentAnnotationIndex
+    this.series = this.datasets[this.currentAnnotationIndex]!
+  }
+
   get series() {
     return this.datasets[this.currentSeriesIndex]! || {}
   }
@@ -25,6 +33,18 @@ export class Configurer {
     }
   }
 
+  get annotation() {
+    return this.annotations[this.currentAnnotationIndex]! || {}
+  }
+
+  set annotation(annotation) {
+    if (!this.annotations) {
+      this.annotations = [annotation]
+    } else {
+      this.annotations[this.currentAnnotationIndex] = annotation
+    }
+  }
+
   get config() {
     if (!this.value) {
       this.value = this.initializer.call(this)
@@ -48,7 +68,7 @@ export class Configurer {
   }
 
   set datasets(datasets) {
-    this.datasets = datasets
+    this.data.datasets = datasets
   }
 
   set dataKey(key) {
@@ -205,6 +225,9 @@ export class Configurer {
   }
 
   set yAxes1(yAxes1) {
+    if (!this.scales!.yAxes![1]) {
+      this.scales!.yAxes![1] = {}
+    }
     this.scales!.yAxes![1] = yAxes1
   }
 
@@ -213,6 +236,12 @@ export class Configurer {
   }
 
   set multiAxis(multiAxis) {
+    if (!multiAxis) {
+      this.scales!.yAxes = [this.yAxes0]
+    } else if (!this.yAxes1) {
+      this.yAxes1 = {}
+    }
+
     this.config.options!.multiAxis = multiAxis
   }
 
@@ -232,7 +261,7 @@ export class Configurer {
     this.series.valueSuffix = valueSuffix
   }
 
-  get valueForamt() {
+  get valueFormat() {
     return this.series.valueFormat
   }
 
@@ -247,4 +276,46 @@ export class Configurer {
   set displayValue(displayValue) {
     this.series.displayValue = displayValue
   }
+
+  get annotations(): OperatoChart.Annotation[] {
+    if (!this.config.options) {
+      this.config.options = {}
+    }
+    if (!this.config.options.annotations) {
+      this.config.options.annotations = []
+    }
+
+    return this.config.options.annotations!
+  }
+
+  set annotations(annotations) {
+    if (!this.config.options) {
+      this.config.options = {}
+    }
+    if (!this.config.options.annotations) {
+      this.config.options.annotations = []
+    }
+    this.config.options.annotations = annotations
+  }
+
+  get currentAnnotation() {
+    return this.annotations[this.currentAnnotationIndex]
+  }
+
+  addAnnotation(annotation: OperatoChart.Annotation) {
+    if (!this.config.options) {
+      this.config.options = {}
+    }
+    if (!this.config.options.annotations) {
+      this.config.options.annotations = []
+    }
+
+    this.config.options.annotations!.push(annotation)
+  }
+
+  removeAnnotation(index: number) {
+    if (this.config.options && this.config.options.annotations) {
+      this.config.options.annotations.splice(index, 1)
+    }
+  }
 }

package/src/editors/input-chart-abstract.ts

@@ -1,8 +1,9 @@
 import '@operato/i18n/ox-i18n.js'
 
-import { html } from 'lit'
-import { property } from 'lit/decorators.js'
+import { html, PropertyValues } from 'lit'
+import { property, query } from 'lit/decorators.js'
 import { random as randomColor, TinyColor } from '@ctrl/tinycolor'
+import { MdIcon } from '@material/web/icon/icon.js'
 
 import { InputChartStyles } from './input-chart-styles'
 import { Configurer } from './configurer'
@@ -14,6 +15,14 @@ export class InputChartAbstract extends OxFormField {
   @property({ type: Object }) value: OperatoChart.ChartConfig | null = null
   @property({ type: String, attribute: 'chart-type' }) chartType: OperatoChart.ChartType
 
+  @query('#annotations-tabs') annotationsTabs!: HTMLElement
+  @query('#annotations-tab-nav-left-button') annotationsTabNavLeftButton!: MdIcon
+  @query('#annotations-tab-nav-right-button') annotationsTabNavRightButton!: MdIcon
+
+  @query('#series-tabs') seriesTabs!: HTMLElement
+  @query('#series-tab-nav-left-button') seriesTabNavLeftButton!: MdIcon
+  @query('#series-tab-nav-right-button') seriesTabNavRightButton!: MdIcon
+
   private _configurer?: Configurer
 
   get configurer() {
@@ -71,6 +80,24 @@ export class InputChartAbstract extends OxFormField {
     this.renderRoot.addEventListener('change', this.onValuesChanged.bind(this))
   }
 
+  protected firstUpdated(_changedProperties: PropertyValues): void {
+    this.seriesTabContainer?.addEventListener('scroll', e => {
+      this._onTabScroll(e, 'series')
+    })
+
+    this.annotationsTabContainer?.addEventListener('scroll', e => {
+      this._onTabScroll(e, 'annotations')
+    })
+  }
+
+  get seriesTabContainer(): HTMLElement | null | undefined {
+    return this.seriesTabs
+  }
+
+  get annotationsTabContainer(): HTMLElement | null | undefined {
+    return this.annotationsTabs
+  }
+
   displayValueTemplate() {
     const configurer = this.configurer
 
@@ -290,6 +317,33 @@ export class InputChartAbstract extends OxFormField {
     this.requestUpdate()
   }
 
+  onTapAddAnnotation(e: Event) {
+    const configurer = this.configurer
+
+    const lastAnnotationIndex = configurer.annotations.length
+    configurer.annotations.push({ type: 'line', x1: 0, y1: 0 })
+
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
+    configurer.currentAnnotationIndex = lastAnnotationIndex
+
+    this.value = { ...this.configurer.value }
+  }
+
+  onTapRemoveCurrentAnnotation(index: number) {
+    const configurer = this.configurer
+
+    if (!configurer.config.data.datasets) {
+      return
+    }
+
+    this.configurer.data.datasets.splice(index, 1)
+
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
+    configurer.currentSeriesIndex = Math.max(0, configurer.currentSeriesIndex - 1)
+
+    this.requestUpdate()
+  }
+
   _getSeriesModel({
     chartType,
     datasetsLength,
@@ -330,4 +384,407 @@ export class InputChartAbstract extends OxFormField {
         return (element as any).value
     }
   }
+
+  annotationsTabTemplate() {
+    const configurer = this.configurer
+    const currentAnnotation = configurer.annotations[configurer.currentAnnotationIndex] || {}
+
+    return html`
+      <div id="annotations-properties-container" fullwidth>
+        <div id="annotations-tab-header">
+          <md-icon
+            id="annotations-tab-nav-left-button"
+            @tap=${(e: Event) => {
+              this._onTabScrollNavLeft(e, 'annotations')
+            }}
+            disabled
+            >chevron_left</md-icon
+          >
+          <div
+            id="annotations-tabs"
+            @change=${(e: Event) => {
+              configurer.currentAnnotationIndex = (e.target as any).activeTabIndex
+            }}
+            active-tab-index=${configurer.currentAnnotationIndex}
+            fit-container
+          >
+            ${configurer.annotations!.map(
+              (annotation: any, index: number) => html`
+                <div
+                  data-annotation=${index + 1}
+                  data-tab-index=${index}
+                  tab
+                  ?selected=${index == configurer.currentAnnotationIndex}
+                  @click=${(e: Event) => {
+                    const target = e.target as HTMLDivElement
+                    this.configurer.setCurrentAnnotationIndex(Number(target.getAttribute('data-tab-index')))
+                    this.value = { ...this.configurer.value }
+                  }}
+                >
+                  ${index + 1}
+                  ${!configurer.annotations ||
+                  (configurer.annotations.length != 1 && configurer.currentAnnotationIndex == index)
+                    ? html` <md-icon @tap=${(e: Event) => this.onTapRemoveCurrentAnnotation(index)}> close </md-icon> `
+                    : html``}
+                </div>
+              `
+            )}
+          </div>
+          <md-icon
+            id="annotations-tab-nav-right-button"
+            @click=${(e: Event) => {
+              this._onTabScrollNavRight(e, 'annotations')
+            }}
+            disabled
+            >chevron_right</md-icon
+          >
+        </div>
+        <div id="add-annotation-button-container">
+          <md-icon id="add-annotation-button" @tap=${(e: Event) => this.onTapAddAnnotation(e)}>add</md-icon>
+        </div>
+
+        <div class="tab-content">
+          <label for="annotation-type"> <ox-i18n msgid="label.chart-annotation-type">Type</ox-i18n> </label>
+          <select
+            id="annotation-type"
+            class="select-content"
+            value-key="annotation.type"
+            .value=${currentAnnotation.type || ''}
+          >
+            <option value="line">Line</option>
+            <option value="text">Text</option>
+            <option value="box">Box</option>
+            <option value="horizontalLine">Horizontal Line</option>
+            <option value="verticalLine">Vertical Line</option>
+            <option value="custom">Custom</option>
+          </select>
+
+          <label for="annotation-x1">X1</label>
+          <input
+            id="annotation-x1"
+            type="number"
+            value-key="annotation.x1"
+            .value=${String(currentAnnotation.x1 || 0)}
+          />
+
+          <label for="annotation-y1">Y1</label>
+          <input
+            id="annotation-y1"
+            type="number"
+            value-key="annotation.y1"
+            .value=${String(currentAnnotation.y1 || 0)}
+          />
+
+          <label for="annotation-x2">X2</label>
+          <input
+            id="annotation-x2"
+            type="number"
+            value-key="annotation.x2"
+            .value=${String(currentAnnotation.x2 || 0)}
+          />
+
+          <label for="annotation-y2">Y2</label>
+          <input
+            id="annotation-y2"
+            type="number"
+            value-key="annotation.y2"
+            .value=${String(currentAnnotation.y2 || 0)}
+          />
+
+          <label for="annotation-stroke"> <ox-i18n msgid="label.stroke-style">Stroke Style</ox-i18n> </label>
+          <ox-input-color
+            id="annotation-stroke"
+            value-key="annotation.stroke"
+            .value=${currentAnnotation.stroke}
+          ></ox-input-color>
+
+          <label for="annotation-stroke-thickness">
+            <ox-i18n msgid="label.stroke-thickness">Stroke Thickness</ox-i18n>
+          </label>
+          <input
+            id="annotation-stroke-thickness"
+            type="number"
+            value-key="annotation.strokeThickness"
+            .value=${String(currentAnnotation.strokeThickness || 1)}
+          />
+
+          <label for="annotation-fill"> <ox-i18n msgid="label.fill">Fill</ox-i18n> </label>
+          <ox-input-color
+            id="annotation-fill"
+            value-key="annotation.fill"
+            .value=${currentAnnotation.fill}
+          ></ox-input-color>
+
+          <label for="annotation-text"> <ox-i18n msgid="label.annotation-text">Text</ox-i18n> </label>
+          <input id="annotation-text" type="text" value-key="annotation.text" .value=${currentAnnotation.text || ''} />
+
+          <label for="annotation-horizontal-anchor">
+            <ox-i18n msgid="label.horizontal-anchor">Horizontal Anchor</ox-i18n>
+          </label>
+          <select
+            id="annotation-horizontal-anchor"
+            class="select-content"
+            value-key="annotation.horizontalAnchorPoint"
+            .value=${currentAnnotation.horizontalAnchorPoint || ''}
+          >
+            <option value="Left">Left</option>
+            <option value="Center">Center</option>
+            <option value="Right">Right</option>
+          </select>
+
+          <label for="annotation-vertical-anchor">
+            <ox-i18n msgid="label.vertical-anchor">Vertical Anchor</ox-i18n>
+          </label>
+          <select
+            id="annotation-vertical-anchor"
+            class="select-content"
+            value-key="annotation.verticalAnchorPoint"
+            .value=${currentAnnotation.verticalAnchorPoint || ''}
+          >
+            <option value="Top">Top</option>
+            <option value="Center">Center</option>
+            <option value="Bottom">Bottom</option>
+          </select>
+        </div>
+      </div>
+    `
+  }
+
+  multiSeriesTabTemplate() {
+    const configurer = this.configurer
+
+    return html`
+      <div id="series-properties-container" fullwidth>
+        <div id="series-tab-header">
+          <md-icon
+            id="series-tab-nav-left-button"
+            @tap=${(e: Event) => {
+              this._onTabScrollNavLeft(e, 'series')
+            }}
+            disabled
+            >chevron_left</md-icon
+          >
+          <div
+            id="series-tabs"
+            @change=${(e: Event) => {
+              configurer.currentSeriesIndex = (e.target as any).activeTabIndex
+            }}
+            active-tab-index=${configurer.currentSeriesIndex}
+            fit-container
+          >
+            ${configurer.datasets.map(
+              (dataset: any, index: number) => html`
+                <div
+                  data-series=${index + 1}
+                  data-tab-index=${index}
+                  tab
+                  ?selected=${index == configurer.currentSeriesIndex}
+                  @click=${(e: Event) => {
+                    const target = e.target as HTMLDivElement
+                    this.configurer.setCurrentSeriesIndex(Number(target.getAttribute('data-tab-index')))
+                    this.value = { ...this.configurer.value }
+                  }}
+                >
+                  ${index + 1}
+                  ${!configurer.datasets || (configurer.datasets.length != 1 && configurer.currentSeriesIndex == index)
+                    ? html` <md-icon @tap=${(e: Event) => this.onTapRemoveCurrentTab(index)}> close </md-icon> `
+                    : html``}
+                </div>
+              `
+            )}
+          </div>
+          <md-icon
+            id="series-tab-nav-right-button"
+            @click=${(e: Event) => {
+              this._onTabScrollNavRight(e, 'series')
+            }}
+            disabled
+            >chevron_right</md-icon
+          >
+        </div>
+        <div id="add-series-button-container">
+          <md-icon id="add-series-button" @tap=${(e: Event) => this.onTapAddTab(e)}>add</md-icon>
+        </div>
+
+        <div class="tab-content">
+          <label for="data-key"> <ox-i18n msgid="label.data-key">Data Key</ox-i18n> </label>
+          <input id="data-key" type="text" value-key="dataKey" .value=${configurer.dataKey || ''} />
+
+          ${this.chartType == 'line' || this.chartType == 'bar'
+            ? html`
+                <label for="series-type"> <ox-i18n msgid="label.series-type">Type</ox-i18n> </label>
+                <select
+                  id="series-type"
+                  class="select-content"
+                  value-key="series.type"
+                  .value=${configurer.series.type || ''}
+                >
+                  <option value="bar" selected>Bar</option>
+                  <option value="line">Line</option>
+                </select>
+              `
+            : html``}
+
+          <label for="series-label"> <ox-i18n msgid="label.label">Label</ox-i18n> </label>
+          <input id="series-label" type="text" value-key="series.label" .value=${configurer.series.label || ''} />
+
+          ${configurer.series.type == 'line'
+            ? html`
+                <label for="series-line-tension"> <ox-i18n msgid="label.line-tension">Line Tension</ox-i18n> </label>
+                <select
+                  id="series-line-tension"
+                  class="select-content"
+                  value-key="series.lineTension"
+                  .value=${String(configurer.series.lineTension || 0)}
+                >
+                  <option value="0.4">Smooth</option>
+                  <option value="0">Angled</option>
+                </select>
+              `
+            : html``}
+          ${configurer.series.type == 'line'
+            ? html`
+                <label for="series-border-width"> <ox-i18n msgid="label.border-width">Border Width</ox-i18n> </label>
+                <input
+                  id="series-border-width"
+                  type="number"
+                  value-key="series.borderWidth"
+                  .value=${String(configurer.series.borderWidth || 0)}
+                />
+              `
+            : html``}
+
+          <label for="series-color"> <ox-i18n msgid="label.color">Color</ox-i18n> </label>
+          <ox-input-color id="series-color" value-key="color" .value=${configurer.color}></ox-input-color>
+
+          ${configurer.series.type == 'line'
+            ? html`
+                <label for="series-point-style"> <ox-i18n msgid="label.point-shape">Point Shape</ox-i18n> </label>
+                <select
+                  id="series-point-style"
+                  class="select-content"
+                  value-key="series.pointStyle"
+                  .value=${configurer.series.pointStyle || ''}
+                >
+                  <option value="">&nbsp;</option>
+                  <option value="circle">⚬</option>
+                  <option value="triangle">▵</option>
+                  <option value="rect">□</option>
+                  <option value="rectRot">◇</option>
+                  <option value="cross">+</option>
+                  <option value="crossRot">⨉</option>
+                  <option value="star">✱</option>
+                  <option value="line">―</option>
+                  <option value="dash">┄</option>
+                </select>
+
+                <label for="series-point-radius"> <ox-i18n msgid="label.point-size">Point Size</ox-i18n> </label>
+                <input
+                  id="series-point-radius"
+                  type="number"
+                  value-key="series.pointRadius"
+                  .value=${String(configurer.series.pointRadius || 0)}
+                />
+              `
+            : html``} <label for="series-stack"> <ox-i18n msgid="label.stack-group">Stack group</ox-i18n> </label>
+          <input id="series-stack" type="text" value-key="series.stack" .value=${configurer.series.stack || ''} />
+          ${configurer.series.type == 'line'
+            ? html`
+                <input id="seires-fill" type="checkbox" value-key="series.fill" ?checked=${configurer.series.fill} />
+                <label for="seires-fill"> <ox-i18n msgid="label.fill">Fill</ox-i18n> </label>
+              `
+            : html``}
+          ${configurer.multiAxis
+            ? html`
+                <label for="series-y-axis-id"> <ox-i18n msgid="label.target-axis">Target Axis</ox-i18n> </label>
+                <select
+                  id="series-y-axis-id"
+                  class="select-content"
+                  value-key="series.yAxisID"
+                  .value=${configurer.series.yAxisID || ''}
+                >
+                  <option value="left">Left</option>
+                  <option value="right">Right</option>
+                </select>
+              `
+            : html``}
+          ${this.displayValueTemplate()}
+        </div>
+      </div>
+    `
+  }
+
+  _onTabScroll(e: Event, type: 'series' | 'annotations') {
+    let tabContainer: HTMLElement | null | undefined
+    let tabNavLeftButton: MdIcon
+    let tabNavRightButton: MdIcon
+
+    if (type === 'series') {
+      tabContainer = this.seriesTabContainer
+      tabNavLeftButton = this.seriesTabNavLeftButton
+      tabNavRightButton = this.seriesTabNavRightButton
+    } else {
+      tabContainer = this.annotationsTabContainer
+      tabNavLeftButton = this.annotationsTabNavLeftButton
+      tabNavRightButton = this.annotationsTabNavRightButton
+    }
+
+    if (!tabContainer) {
+      return
+    }
+
+    if (tabContainer.clientWidth == tabContainer.scrollWidth) {
+      tabNavLeftButton.setAttribute('disabled', '')
+      tabNavRightButton.setAttribute('disabled', '')
+    }
+    // left-end
+    else if (tabContainer.scrollLeft == 0) {
+      tabNavLeftButton.setAttribute('disabled', '')
+      tabNavRightButton.removeAttribute('disabled')
+    }
+    // right-end
+    else if (tabContainer.scrollLeft + tabContainer.clientWidth >= tabContainer.scrollWidth) {
+      tabNavLeftButton.removeAttribute('disabled')
+      tabNavRightButton.setAttribute('disabled', '')
+    } else {
+      tabNavLeftButton.removeAttribute('disabled')
+      tabNavRightButton.removeAttribute('disabled')
+    }
+  }
+
+  _onTabScrollNavLeft(e: Event, type: 'series' | 'annotations') {
+    let tabContainer: HTMLElement | null | undefined
+
+    if (type === 'series') {
+      tabContainer = this.seriesTabContainer
+    } else {
+      tabContainer = this.annotationsTabContainer
+    }
+
+    if (!tabContainer) {
+      return
+    }
+
+    tabContainer.style.scrollBehavior = 'smooth'
+    tabContainer.scrollLeft -= tabContainer.clientWidth
+    tabContainer.style.scrollBehavior = 'auto'
+  }
+
+  _onTabScrollNavRight(e: Event, type: 'series' | 'annotations') {
+    let tabContainer: HTMLElement | null | undefined
+
+    if (type === 'series') {
+      tabContainer = this.seriesTabContainer
+    } else {
+      tabContainer = this.annotationsTabContainer
+    }
+
+    if (!tabContainer) {
+      return
+    }
+
+    tabContainer.style.scrollBehavior = 'smooth'
+    tabContainer.scrollLeft += tabContainer.clientWidth
+    tabContainer.style.scrollBehavior = 'auto'
+  }
 }

package/src/editors/input-chart-styles.ts

@@ -28,18 +28,21 @@ export const InputChartStyles = css`
     text-transform: capitalize;
   }
 
-  #series-properties-container {
+  #series-properties-container,
+  #annotations-properties-container {
     display: grid;
     grid-template-columns: 1fr 25px;
     align-items: center;
     justify-content: center;
   }
 
-  #series-properties-container > [tab-content] {
+  #series-properties-container > [tab-content],
+  #annotations-properties-container > [tab-content] {
     grid-column: span 2;
   }
 
-  #tab-header {
+  #series-tab-header,
+  #annotations-tab-header {
     display: grid;
     grid-template-columns: 25px 1fr 25px;
     grid-gap: 5px;
@@ -53,20 +56,24 @@ export const InputChartStyles = css`
     align-items: center;
   }
 
-  #tab-header > div {
+  #series-tab-header > div,
+  #annotations-tab-header > div {
     height: 25px;
   }
 
-  #tab-header md-icon[disabled] {
+  #series-tab-header md-icon[disabled],
+  #annotations-tab-header md-icon[disabled] {
     opacity: 0.1;
   }
 
-  #tabs {
+  #series-tabs,
+  #annotations-tabs {
     display: flex;
     overflow: hidden;
   }
 
-  #tab-header #tabs [tab] md-icon {
+  #series-tab-header #series-tabs [tab] md-icon,
+  #annotations-tab-header #annotations-tabs [tab] md-icon {
     margin-left: auto;
     padding: 2px;
     color: var(--md-sys-color-on-surface);
@@ -74,7 +81,8 @@ export const InputChartStyles = css`
     --md-icon-size: 12px;
   }
 
-  #add-series-button-container {
+  #add-series-button-container,
+  #add-annotation-button-container {
     height: 100%;
     box-sizing: border-box;
     align-items: center;
@@ -84,7 +92,8 @@ export const InputChartStyles = css`
     border-bottom: rgba(0, 0, 0, 0.2) 1px solid;
   }
 
-  #add-series-button {
+  #add-series-button,
+  #add-annotation-button {
     width: 20px;
     height: 20px;
     padding: 0;