@operato/chart 2.0.0-beta.25

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

@@ -0,0 +1,429 @@
+import '@material/web/icon/icon.js'
+import '@operato/i18n/ox-i18n.js'
+
+import { css, html } from 'lit'
+import { query } from 'lit/decorators.js'
+
+import { MdIcon } from '@material/web/icon/icon.js'
+
+import { InputChartAbstract } from './input-chart-abstract'
+
+export class InputChartMultiSeriesAbstract extends InputChartAbstract {
+  static styles = [...InputChartAbstract.styles]
+
+  @query('#tabs') tabs!: HTMLElement
+  @query('#tab-nav-left-button') tabNavLeftButton!: MdIcon
+  @query('#tab-nav-right-button') tabNavRightButton!: MdIcon
+
+  get tabContainer(): HTMLElement | null | undefined {
+    return this.tabs
+  }
+
+  firstUpdated() {
+    this.tabContainer?.addEventListener('scroll', e => {
+      this._onTabScroll(e)
+    })
+  }
+
+  subTemplate() {
+    const configurer = this.configurer
+
+    return html`
+      <input id="multi-axis" type="checkbox" value-key="multiAxis" ?checked=${configurer.multiAxis} />
+      <label for="multi-axis"> <ox-i18n msgid="label.multi-axis">Multi Axis</ox-i18n> </label>
+
+      <legend><ox-i18n msgid="label.series">Series</ox-i18n></legend>
+
+      ${this.multiSeriesTabTemplate()}
+
+      <legend><ox-i18n msgid="label.x-axes">X Axes</ox-i18n></legend>
+
+      <label for="label-data-key"> <ox-i18n msgid="label.data-key">Data Key</ox-i18n> </label>
+      <input id="label-data-key" type="text" value-key="labelDataKey" .value=${configurer.labelDataKey || ''} />
+
+      <label for="axis-title"> <ox-i18n msgid="label.title">Title</ox-i18n> </label>
+      <input id="axis-title" type="text" value-key="xAxes0.axisTitle" .value=${configurer.xAxes0.axisTitle || ''} />
+
+      <label for="x-axes0-thickness"> <ox-i18n msgid="label.thickness">Thickness</ox-i18n> </label>
+      <input
+        id="x-axes0-thickness"
+        type="number"
+        value-key="xAxes0.barPercentage"
+        .value=${configurer.xAxes0.barPercentage || 0}
+      />
+
+      <input
+        for="grid-line"
+        type="checkbox"
+        value-key="value.options.xGridLine"
+        ?checked=${configurer.config.options?.xGridLine}
+      />
+      <label id="grid-line"> <ox-i18n msgid="label.grid-line">Grid Line</ox-i18n> </label>
+
+      <input
+        for="x-axes0-ticks-display"
+        type="checkbox"
+        value-key="xAxes0.ticks.display"
+        ?checked=${configurer.xAxes0.ticks?.display}
+      />
+      <label id="x-axes0-ticks-display"> <ox-i18n msgid="label.display-tick">Display Tick</ox-i18n> </label>
+
+      <legend><ox-i18n msgid="label.y-axes">Y Axes</ox-i18n></legend>
+
+      <label for="y-axes0-axis-title"> <ox-i18n msgid="label.title">Title</ox-i18n> </label>
+      <input
+        id="y-axes0-axis-title"
+        type="text"
+        value-key="yAxes0.axisTitle"
+        .value=${configurer.yAxes0.axisTitle || ''}
+      />
+
+      <input
+        id="y-axes0-ticks-automin"
+        type="checkbox"
+        value-key="yAxes0.ticks.autoMin"
+        ?checked=${configurer.yAxes0.ticks?.autoMin}
+      />
+      <label for="y-axes0-ticks-automin"> <ox-i18n msgid="label.axis-min-auto">Min Auto</ox-i18n> </label>
+
+      <input
+        id="y-axes0-ticks-automax"
+        type="checkbox"
+        value-key="yAxes0.ticks.autoMax"
+        ?checked=${configurer.yAxes0.ticks?.autoMax}
+      />
+      <label for="y-axes0-ticks-automax"> <ox-i18n msgid="label.axis-max-auto">Max Auto</ox-i18n> </label>
+
+      ${!configurer.yAxes0.ticks?.autoMin
+        ? html`
+            <label for="y-axes0-ticks-min"> <ox-i18n msgid="label.axis-min">Min</ox-i18n> </label>
+            <input
+              id="y-axes0-ticks-min"
+              type="number"
+              value-key="yAxes0.ticks.min"
+              .value=${configurer.yAxes0.ticks?.min}
+            />
+          `
+        : html``}
+      ${!configurer.yAxes0.ticks?.autoMax
+        ? html`
+            <label for="y-axes0-ticks-max"> <ox-i18n msgid="label.axis-max">Max</ox-i18n> </label>
+            <input
+              id="y-axes0-ticks-max"
+              type="number"
+              value-key="yAxes0.ticks.max"
+              .value=${configurer.yAxes0.ticks?.max}
+            />
+          `
+        : html``}
+
+      <label for="y-axes0-ticks-step-size"> <ox-i18n msgid="label.axis-step-size">StepSize</ox-i18n> </label>
+      <input
+        id="y-axes0-ticks-step-size"
+        type="number"
+        value-key="yAxes0.ticks.stepSize"
+        .value=${configurer.yAxes0.ticks?.stepSize}
+      />
+
+      <input
+        id="y-grid-line"
+        type="checkbox"
+        value-key="value.options.yGridLine"
+        ?checked=${configurer.config.options?.yGridLine}
+      />
+      <label for="y-grid-line"> <ox-i18n msgid="label.grid-line">Grid Line</ox-i18n> </label>
+
+      <input
+        id="y-axes0-ticks-display"
+        type="checkbox"
+        value-key="yAxes0.ticks.display"
+        ?checked=${configurer.yAxes0.ticks?.display}
+      />
+      <label for="y-axes0-ticks-display"> <ox-i18n msgid="label.display-tick">Display Tick</ox-i18n> </label>
+
+      ${configurer.config.options?.multiAxis
+        ? html`
+            <legend><ox-i18n msgid="label.y-2nd-axes">Y 2nd Axes</ox-i18n></legend>
+
+            <label for="y-axes1.axis-title"> <ox-i18n msgid="label.title">Title</ox-i18n> </label>
+            <input
+              id="y-axes1.axis-title"
+              type="text"
+              value-key="yAxes1.axisTitle"
+              .value=${configurer.yAxes1.axisTitle || ''}
+            />
+
+            <input
+              id="axis-min-auto"
+              type="checkbox"
+              value-key="yAxes1.ticks.autoMin"
+              ?checked=${configurer.yAxes1.ticks?.autoMin}
+            />
+            <label for="axis-min-auto"> <ox-i18n msgid="label.axis-min-auto">Min Auto</ox-i18n> </label>
+
+            <input
+              id="axis-max-auto"
+              type="checkbox"
+              value-key="yAxes1.ticks.autoMax"
+              ?checked=${configurer.yAxes1.ticks?.autoMax}
+            />
+            <label for="axis-max-auto"> <ox-i18n msgid="label.axis-max-auto">Max Auto</ox-i18n> </label>
+
+            ${!configurer.yAxes1.ticks?.autoMin
+              ? html`
+                  <label for="y-axes1.ticks.min"> <ox-i18n msgid="label.axis-min">Min</ox-i18n> </label>
+                  <input
+                    id="y-axes1.ticks.min"
+                    type="number"
+                    value-key="yAxes1.ticks.min"
+                    .value=${configurer.yAxes1.ticks?.min}
+                  />
+                `
+              : html``}
+            ${!configurer.yAxes1.ticks?.autoMax
+              ? html`
+                  <label for="y-axes1-ticks-max"> <ox-i18n msgid="label.axis-max">Max</ox-i18n> </label>
+                  <input
+                    id="y-axes1-ticks-max"
+                    type="number"
+                    value-key="yAxes1.ticks.max"
+                    .value=${configurer.yAxes1.ticks?.max}
+                  />
+                `
+              : html``}
+
+            <label for="y-axes1-ticks-step-size"> <ox-i18n msgid="label.axis-step-size">StepSize</ox-i18n> </label>
+            <input
+              id="y-axes1-ticks-step-size"
+              type="number"
+              value-key="yAxes1.ticks.stepSize"
+              .value=${configurer.yAxes1.ticks?.stepSize}
+            />
+
+            <input
+              id="y2nd-grid-line"
+              type="checkbox"
+              value-key="value.options.y2ndGridLine"
+              ?checked=${configurer.config.options.y2ndGridLine}
+            />
+            <label for="y2nd-grid-line"> <ox-i18n msgid="label.grid-line">Grid Line</ox-i18n> </label>
+
+            <input
+              id="y-axes1.ticks.display"
+              type="checkbox"
+              value-key="yAxes1.ticks.display"
+              ?checked=${configurer.yAxes1.ticks?.display}
+            />
+            <label for="y-axes1.ticks.display"> <ox-i18n msgid="label.display-tick">Display Tick</ox-i18n> </label>
+          `
+        : html``}
+    `
+  }
+
+  multiSeriesTabTemplate() {
+    const configurer = this.configurer
+
+    return html`
+      <div id="series-properties-container" fullwidth>
+        <div id="tab-header">
+          <md-icon
+            id="tab-nav-left-button"
+            @tap=${(e: Event) => {
+              this._onTabScrollNavLeft(e)
+            }}
+            disabled
+            >chevron_left</md-icon
+          >
+          <div
+            id="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(e)}"> close </md-icon> `
+                    : html``}
+                </div>
+              `
+            )}
+          </div>
+          <md-icon
+            id="tab-nav-right-button"
+            @click=${(e: Event) => {
+              this._onTabScrollNavRight(e)
+            }}
+            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 || ''} />
+
+          ${configurer.config.type == 'mixed'
+            ? 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=${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=${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="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=${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) {
+    if (!this.tabContainer) {
+      return
+    }
+
+    if (this.tabContainer.clientWidth == this.tabContainer.scrollWidth) {
+      this.tabNavLeftButton.setAttribute('disabled', '')
+      this.tabNavRightButton.setAttribute('disabled', '')
+    }
+    // left-end
+    else if (this.tabContainer.scrollLeft == 0) {
+      this.tabNavLeftButton.setAttribute('disabled', '')
+      this.tabNavRightButton.removeAttribute('disabled')
+    }
+    // right-end
+    else if (this.tabContainer.scrollLeft + this.tabContainer.clientWidth >= this.tabContainer.scrollWidth) {
+      this.tabNavLeftButton.removeAttribute('disabled')
+      this.tabNavRightButton.setAttribute('disabled', '')
+    } else {
+      this.tabNavLeftButton.removeAttribute('disabled')
+      this.tabNavRightButton.removeAttribute('disabled')
+    }
+  }
+
+  _onTabScrollNavLeft(e: Event) {
+    if (!this.tabContainer) {
+      return
+    }
+
+    this.tabContainer.style.scrollBehavior = 'smooth'
+    this.tabContainer.scrollLeft -= this.tabContainer.clientWidth
+    this.tabContainer.style.scrollBehavior = 'auto'
+  }
+
+  _onTabScrollNavRight(e: Event) {
+    if (!this.tabContainer) {
+      return
+    }
+
+    this.tabContainer.style.scrollBehavior = 'smooth'
+    this.tabContainer.scrollLeft += this.tabContainer.clientWidth
+    this.tabContainer.style.scrollBehavior = 'auto'
+  }
+}

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

@@ -0,0 +1,167 @@
+import { css } from 'lit'
+
+export const InputChartStyles = css`
+  :host {
+    display: grid;
+    grid-template-columns: repeat(10, 1fr);
+    grid-gap: 5px;
+  }
+
+  :host > * {
+    box-sizing: border-box;
+    grid-column: span 7;
+  }
+
+  :host > label {
+    box-sizing: border-box;
+    grid-column: span 3;
+  }
+
+  :host > legend {
+    box-sizing: border-box;
+    grid-column: 1 / -1;
+    color: var(--md-sys-color-on-secondary-container, #e46c2e);
+    font: var(--property-sidebar-fieldset-legend, bold 13px var(--theme-font));
+    text-transform: capitalize;
+  }
+
+  #series-properties-container {
+    display: grid;
+    grid-template-columns: 1fr 25px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #series-properties-container > [tab-content] {
+    grid-column: span 2;
+  }
+
+  #tab-header {
+    display: grid;
+    grid-template-columns: 25px 1fr 25px;
+    grid-gap: 5px;
+    overflow: hidden;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    border-bottom: 0;
+    background-color: var(--md-sys-color-surface-variant);
+    color: var(--md-sys-color-on-surface);
+    box-sizing: border-box;
+    padding-top: 3px;
+    align-items: center;
+  }
+
+  #tab-header > div {
+    height: 25px;
+  }
+
+  #tab-header md-icon[disabled] {
+    opacity: 0.1;
+  }
+
+  #tabs {
+    display: flex;
+    overflow: hidden;
+  }
+
+  #tab-header #tabs [tab] md-icon {
+    margin-left: 5px;
+    padding: 2px;
+    color: var(--md-sys-color-on-surface);
+
+    --md-icon-size: 12px;
+  }
+
+  #add-series-button-container {
+    height: 100%;
+    box-sizing: border-box;
+    align-items: center;
+    justify-content: center;
+    padding-top: 3px;
+    display: flex;
+    border-bottom: rgba(0, 0, 0, 0.2) 1px solid;
+  }
+
+  #add-series-button {
+    width: 20px;
+    height: 20px;
+    padding: 0;
+    color: var(--md-sys-color-on-secondary-container);
+  }
+
+  .tab-content {
+    grid-column: 1 / -1;
+
+    background-color: rgba(255, 255, 255, 0.5);
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    border-width: 0 1px 1px 1px;
+    padding: 5px;
+    display: grid;
+    grid-template-columns: repeat(10, 1fr);
+    grid-gap: 5px;
+  }
+
+  .tab-content > * {
+    box-sizing: border-box;
+    grid-column: span 7;
+  }
+
+  label,
+  .tab-content > label {
+    grid-column: span 3;
+    text-align: right;
+    color: var(--md-sys-color-on-secondary-container);
+    font-size: 0.8em;
+    line-height: 2;
+    text-transform: capitalize;
+  }
+
+  input,
+  select {
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    border-radius: var(--spacing-small);
+  }
+
+  input[type='checkbox'],
+  .tab-content > input[type='checkbox'] {
+    grid-column: span 4;
+    justify-self: end;
+    align-self: center;
+  }
+
+  input[type='checkbox'] + label,
+  .tab-content > input[type='checkbox'] + label {
+    grid-column: span 6;
+
+    text-align: left;
+  }
+
+  [fullwidth] {
+    grid-column: 1 / -1;
+    margin: 0;
+    border: 0;
+  }
+
+  div[tab] {
+    display: flex;
+    align-items: center;
+    background-color: rgba(0, 0, 0, 0.2);
+    border-width: 1px 1px 0 1px;
+    padding: 0 5px;
+    color: var(--md-sys-color-on-surface);
+    box-sizing: border-box;
+    min-width: 45px;
+  }
+
+  div[tab][disabled] {
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+
+  div[tab]:last-child {
+    border-width: 0;
+  }
+
+  div[tab][selected] {
+    background-color: var(--md-sys-color-surface);
+    color: var(--md-sys-color-on-surface);
+  }
+`