@operato/scene-chartjs 0.0.5

package/src/editors/property-editor-chartjs-multi-series-abstract.ts

@@ -0,0 +1,393 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import '@polymer/iron-icon/iron-icon'
+import '@polymer/iron-pages/iron-pages'
+import '@polymer/paper-button/paper-button'
+import '@polymer/paper-icon-button/paper-icon-button'
+import '@polymer/paper-tabs/paper-tabs'
+
+import { css, html } from 'lit'
+import { query } from 'lit/decorators.js'
+
+import { PaperIconButtonElement } from '@polymer/paper-icon-button/paper-icon-button'
+
+import PropertyEditorChartJSAbstract from './property-editor-chartjs-abstract'
+
+export default class PropertyEditorChartJSMultiSeriesAbstract extends PropertyEditorChartJSAbstract {
+  static styles = [
+    ...PropertyEditorChartJSAbstract.styles,
+    css`
+      paper-tabs {
+        background-color: rgb(204, 204, 204);
+      }
+      input[type='text'],
+      input[type='number'] {
+        border: 1px solid rgba(0, 0, 0, 0.2);
+      }
+    `
+  ]
+
+  constructor() {
+    super()
+
+    this.value = {
+      options: {
+        legend: {},
+        scales: {
+          xAxes: [
+            {
+              ticks: {}
+            }
+          ],
+          yAxes: [
+            {
+              ticks: {}
+            }
+          ]
+        }
+      },
+      data: {
+        datasets: []
+      }
+    }
+  }
+
+  @query('#tabs') tabs!: HTMLElement
+  @query('#tab-nav-left-button') tabNavLeftButton!: PaperIconButtonElement
+  @query('#tab-nav-right-button') tabNavRightButton!: PaperIconButtonElement
+
+  get color() {
+    var oldVersionColor = this.series.backgroundColor
+    if (this.series.type == 'line') oldVersionColor = this.series.borderColor
+    if (this.series.type == 'radar') oldVersionColor = this.series.borderColor
+    return this.series.color || oldVersionColor
+  }
+
+  set color(color) {
+    this.series.color = color
+    delete this.series.backgroundColor
+    delete this.series.borderColor
+  }
+
+  get xAxes0() {
+    return this.scales.xAxes[0]
+  }
+
+  set xAxes0(xAxes0) {
+    this.scales.xAxes[0] = xAxes0
+  }
+
+  get yAxes0() {
+    return this.scales.yAxes[0]
+  }
+
+  set yAxes0(yAxes0) {
+    this.scales.yAxes[0] = yAxes0
+  }
+
+  get yAxes1() {
+    return this.scales.yAxes[1]
+  }
+
+  set yAxes1(yAxes1) {
+    this.scales.yAxes[1] = yAxes1
+  }
+
+  get multiAxis() {
+    return this.value.options.multiAxis
+  }
+
+  set multiAxis(multiAxis) {
+    this.value.options.multiAxis = multiAxis
+  }
+
+  get tabContainer(): HTMLElement | null | undefined {
+    return this.tabs.shadowRoot?.querySelector('#tabsContainer')
+  }
+
+  firstUpdated() {
+    this.tabContainer?.addEventListener('scroll', e => {
+      this._onTabScroll(e)
+    })
+  }
+
+  editorTemplate(props: any) {
+    return html`
+      <input type="checkbox" value-key="multiAxis" .checked=${this.multiAxis} />
+      <label> <i18n-msg msgid="label.multi-axis">Multi Axis</i18n-msg> </label>
+
+      <legend><i18n-msg msgid="label.series">Series</i18n-msg></legend>
+
+      ${this.multiSeriesTabTemplate()}
+
+      <legend><i18n-msg msgid="label.x-axes">X Axes</i18n-msg></legend>
+
+      <label> <i18n-msg msgid="label.data-key">Data Key</i18n-msg> </label>
+      <input type="text" value-key="labelDataKey" .value=${this.labelDataKey} />
+
+      <label> <i18n-msg msgid="label.title">Title</i18n-msg> </label>
+      <input type="text" value-key="xAxes0.axisTitle" .value=${this.xAxes0.axisTitle || ''} />
+
+      <label> <i18n-msg msgid="label.thickness">Thickness</i18n-msg> </label>
+      <input type="number" value-key="xAxes0.barPercentage" .value=${this.xAxes0.barPercentage} />
+
+      <input type="checkbox" value-key="value.options.xGridLine" .checked=${this.value.options.xGridLine} />
+      <label> <i18n-msg msgid="label.grid-line">Grid Line</i18n-msg> </label>
+
+      <input type="checkbox" value-key="xAxes0.ticks.display" .checked=${this.xAxes0.ticks.display} />
+      <label> <i18n-msg msgid="label.display-tick">Display Tick</i18n-msg> </label>
+
+      <legend><i18n-msg msgid="label.y-axes">Y Axes</i18n-msg></legend>
+
+      <label> <i18n-msg msgid="label.title">Title</i18n-msg> </label>
+      <input type="text" value-key="yAxes0.axisTitle" .value=${this.yAxes0.axisTitle || ''} />
+
+      <input type="checkbox" value-key="yAxes0.ticks.autoMin" .checked=${this.yAxes0.ticks.autoMin} />
+      <label> <i18n-msg msgid="label.axis-min-auto">Min Auto</i18n-msg> </label>
+
+      <input type="checkbox" value-key="yAxes0.ticks.autoMax" .checked=${this.yAxes0.ticks.autoMax} />
+      <label> <i18n-msg msgid="label.axis-max-auto">Max Auto</i18n-msg> </label>
+
+      ${!this.yAxes0.ticks.autoMin
+        ? html`
+            <label> <i18n-msg msgid="label.axis-min">Min</i18n-msg> </label>
+            <input type="number" value-key="yAxes0.ticks.min" .value=${this.yAxes0.ticks.min} />
+          `
+        : html``}
+      ${!this.yAxes0.ticks.autoMax
+        ? html`
+            <label> <i18n-msg msgid="label.axis-max">Max</i18n-msg> </label>
+            <input type="number" value-key="yAxes0.ticks.max" .value=${this.yAxes0.ticks.max} />
+          `
+        : html``}
+
+      <label> <i18n-msg msgid="label.axis-step-size">StepSize</i18n-msg> </label>
+      <input type="number" value-key="yAxes0.ticks.stepSize" .value=${this.yAxes0.ticks.stepSize} />
+
+      <input type="checkbox" value-key="value.options.yGridLine" .checked=${this.value.options.yGridLine} />
+      <label> <i18n-msg msgid="label.grid-line">Grid Line</i18n-msg> </label>
+
+      <input type="checkbox" value-key="yAxes0.ticks.display" .checked=${this.yAxes0.ticks.display} />
+      <label> <i18n-msg msgid="label.display-tick">Display Tick</i18n-msg> </label>
+
+      ${this.value.options.multiAxis
+        ? html`
+            <legend><i18n-msg msgid="label.y-2nd-axes">Y 2nd Axes</i18n-msg></legend>
+
+            <label> <i18n-msg msgid="label.title">Title</i18n-msg> </label>
+            <input type="text" value-key="yAxes1.axisTitle" .value=${this.yAxes1.axisTitle || ''} />
+
+            <input type="checkbox" value-key="yAxes1.ticks.autoMin" .checked=${this.yAxes1.ticks.autoMin} />
+            <label> <i18n-msg msgid="label.axis-min-auto">Min Auto</i18n-msg> </label>
+
+            <input type="checkbox" value-key="yAxes1.ticks.autoMax" .checked=${this.yAxes1.ticks.autoMax} />
+            <label> <i18n-msg msgid="label.axis-max-auto">Max Auto</i18n-msg> </label>
+
+            ${!this.yAxes1.ticks.autoMin
+              ? html`
+                  <label> <i18n-msg msgid="label.axis-min">Min</i18n-msg> </label>
+                  <input type="number" value-key="yAxes1.ticks.min" .value=${this.yAxes1.ticks.min} />
+                `
+              : html``}
+            ${!this.yAxes1.ticks.autoMax
+              ? html`
+                  <label> <i18n-msg msgid="label.axis-max">Max</i18n-msg> </label>
+                  <input type="number" value-key="yAxes1.ticks.max" .value=${this.yAxes1.ticks.max} />
+                `
+              : html``}
+
+            <label> <i18n-msg msgid="label.axis-step-size">StepSize</i18n-msg> </label>
+            <input type="number" value-key="yAxes1.ticks.stepSize" .value=${this.yAxes1.ticks.stepSize} />
+
+            <input type="checkbox" value-key="value.options.y2ndGridLine" .checked=${this.value.options.y2ndGridLine} />
+            <label> <i18n-msg msgid="label.grid-line">Grid Line</i18n-msg> </label>
+
+            <input type="checkbox" value-key="yAxes1.ticks.display" .checked=${this.yAxes1.ticks.display} />
+            <label> <i18n-msg msgid="label.display-tick">Display Tick</i18n-msg> </label>
+          `
+        : html``}
+    `
+  }
+
+  multiSeriesTabTemplate() {
+    return html`
+      <div id="series-properties-container" fullwidth>
+        <div id="tab-header">
+          <paper-icon-button
+            id="tab-nav-left-button"
+            icon="chevron-left"
+            @click=${(e: Event) => {
+              this._onTabScrollNavLeft(e)
+            }}
+            disabled
+          ></paper-icon-button>
+          <paper-tabs
+            id="tabs"
+            @iron-select=${(e: Event) => (this.currentSeriesIndex = (e.target as any).selected)}
+            .selected=${this.currentSeriesIndex}
+            no-bar
+            noink
+            scrollable
+            hide-scroll-buttons
+            fit-container
+          >
+            ${this.datasets.map(
+              (dataset: any, index: number) => html`
+                <paper-tab data-series="${index + 1}" noink
+                  >${index + 1}
+                  ${!this.datasets || (this.datasets.length != 1 && this.currentSeriesIndex == index)
+                    ? html`
+                        <paper-icon-button icon="close" @tap=${(e: Event) => this.onTapRemoveCurrentTab(e)}>
+                        </paper-icon-button>
+                      `
+                    : html``}
+                </paper-tab>
+              `
+            )}
+          </paper-tabs>
+          <paper-icon-button
+            id="tab-nav-right-button"
+            icon="chevron-right"
+            @click=${(e: Event) => {
+              this._onTabScrollNavRight(e)
+            }}
+            disabled
+          ></paper-icon-button>
+        </div>
+        <div id="add-series-button-container">
+          <paper-icon-button
+            id="add-series-button"
+            icon="add"
+            @tap=${(e: Event) => this.onTapAddTab(e)}
+          ></paper-icon-button>
+        </div>
+
+        <iron-pages .selected=${this.currentSeriesIndex} .attr-for-selected="series-index">
+          ${this.datasets.map(
+            (dataset: any, index: number) => html`
+              <div class="tab-content" series-index="${index}">
+                <label> <i18n-msg msgid="label.data-key">Data Key</i18n-msg> </label>
+                <input type="text" value-key="dataKey" .value=${this.dataKey} />
+
+                ${this.value.type == 'bar'
+                  ? html`
+                      <label> <i18n-msg msgid="label.type">type</i18n-msg> </label>
+                      <select class="select-content" value-key="series.type" .value=${this.series.type}>
+                        <option value="bar" selected>bar</option>
+                        <option value="line">line</option>
+                      </select>
+                    `
+                  : html``}
+
+                <label> <i18n-msg msgid="label.label">label</i18n-msg> </label>
+                <input type="text" value-key="series.label" .value=${this.series.label} />
+
+                ${this.series.type == 'line'
+                  ? html`
+                      <label> <i18n-msg msgid="label.line-tension">line tension</i18n-msg> </label>
+                      <select class="select-content" value-key="series.lineTension" .value=${this.series.lineTension}>
+                        <option value="0.4">smooth</option>
+                        <option value="0">angled</option>
+                      </select>
+                    `
+                  : html``}
+                ${this.series.type == 'line'
+                  ? html`
+                      <label> <i18n-msg msgid="label.border-width">border width</i18n-msg> </label>
+                      <input type="number" value-key="series.borderWidth" .value=${this.series.borderWidth} />
+                    `
+                  : html``}
+
+                <label> <i18n-msg msgid="label.color">color</i18n-msg> </label>
+                <things-editor-color value-key="color" .value=${this.color}></things-editor-color>
+
+                ${this.series.type == 'line'
+                  ? html`
+                      <label> <i18n-msg msgid="label.point-shape">point shape</i18n-msg> </label>
+                      <select class="select-content" value-key="series.pointStyle" .value=${this.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> <i18n-msg msgid="label.point-size">point size</i18n-msg> </label>
+                      <input type="number" value-key="series.pointRadius" .value=${this.series.pointRadius} />
+                    `
+                  : html``} <label> <i18n-msg msgid="label.stack-group">Stack group</i18n-msg> </label>
+                <input type="text" value-key="series.stack" .value=${this.series.stack || ''} /> ${this.series.type ==
+                'line'
+                  ? html`
+                      <input type="checkbox" value-key="series.fill" .checked=${this.series.fill} />
+                      <label> <i18n-msg msgid="label.fill">fill</i18n-msg> </label>
+                    `
+                  : html``}
+                ${this.multiAxis
+                  ? html`
+                      <label> <i18n-msg msgid="label.target-axis">target axis</i18n-msg> </label>
+                      <select class="select-content" value-key="series.yAxisID" .value=${this.series.yAxisID}>
+                        <option value="left">left</option>
+                        <option value="right">right</option>
+                      </select>
+                    `
+                  : html``}
+                ${this.displayValueTemplate()}
+              </div>
+            `
+          )}
+        </iron-pages>
+      </div>
+    `
+  }
+
+  _onTabScroll(e: Event) {
+    if (!this.tabContainer) {
+      return
+    }
+
+    if (this.tabContainer.clientWidth == this.tabContainer.scrollWidth) {
+      this.tabNavLeftButton.disabled = true
+      this.tabNavRightButton.disabled = true
+    }
+    // left-end
+    else if (this.tabContainer.scrollLeft == 0) {
+      this.tabNavLeftButton.disabled = true
+      this.tabNavRightButton.disabled = false
+    }
+    // right-end
+    else if (this.tabContainer.scrollLeft + this.tabContainer.clientWidth >= this.tabContainer.scrollWidth) {
+      this.tabNavLeftButton.disabled = false
+      this.tabNavRightButton.disabled = true
+    } else {
+      this.tabNavLeftButton.disabled = false
+      this.tabNavRightButton.disabled = false
+    }
+  }
+
+  _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/property-editor-chartjs-pie.ts

@@ -0,0 +1,79 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import { html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+
+import PropertyEditorChartJSAbstract from './property-editor-chartjs-abstract'
+
+@customElement('property-editor-chartjs-pie')
+export default class PropertyEditorChartJSPie extends PropertyEditorChartJSAbstract {
+  static styles = PropertyEditorChartJSAbstract.styles
+
+  constructor() {
+    super()
+
+    this.value = {
+      options: {
+        legend: {}
+      },
+      data: {
+        datasets: []
+      }
+    }
+
+    this.currentSeriesIndex = 0
+  }
+
+  get valuePrefix() {
+    return this.series.valuePrefix
+  }
+
+  set valuePrefix(valuePrefix) {
+    this.series.valuePrefix = valuePrefix
+  }
+
+  get valueSuffix() {
+    return this.series.valueSuffix
+  }
+
+  set valueSuffix(valueSuffix) {
+    this.series.valueSuffix = valueSuffix
+  }
+
+  get color() {
+    return this.series.color || this.series.backgroundColor
+  }
+
+  set color(color) {
+    this.series.color = color
+    delete this.series.backgroundColor
+  }
+
+  get displayValue() {
+    return this.series.displayValue
+  }
+
+  set displayValue(displayValue) {
+    this.series.displayValue = displayValue
+  }
+
+  editorTemplate(props: any) {
+    return html`
+      <legend><i18n-msg msgid="label.series">Series</i18n-msg></legend>
+
+      <label> <i18n-msg msgid="label.data-key">Data Key</i18n-msg> </label>
+      <input type="text" value-key="dataKey" .value=${this.series.dataKey} />
+
+      <label> <i18n-msg msgid="label.color">color</i18n-msg> </label>
+      <things-editor-multiple-color value-key="color" .values=${this.color}></things-editor-multiple-color>
+
+      ${this.displayValueTemplate()}
+
+      <legend><i18n-msg msgid="label.axes">Axes</i18n-msg></legend>
+
+      <label> <i18n-msg msgid="label.data-key">Data Key</i18n-msg> </label>
+      <input type="text" value-key="labelDataKey" .value=${this.labelDataKey} />
+    `
+  }
+}

package/src/editors/property-editor-chartjs-radar.ts

@@ -0,0 +1,43 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import '@polymer/iron-icon/iron-icon'
+import '@polymer/paper-button/paper-button'
+import '@polymer/paper-icon-button/paper-icon-button'
+import '@polymer/paper-tabs/paper-tabs'
+
+import { html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+
+import PropertyEditorChartJSMultiSeriesAbstract from './property-editor-chartjs-multi-series-abstract'
+
+@customElement('property-editor-chartjs-radar')
+export default class PropertyEditorChartJSRadar extends PropertyEditorChartJSMultiSeriesAbstract {
+  static styles = PropertyEditorChartJSMultiSeriesAbstract.styles
+
+  constructor() {
+    super()
+
+    this.value = {
+      options: {
+        legend: {}
+      },
+      data: {
+        datasets: []
+      }
+    }
+  }
+
+  editorTemplate(props: any) {
+    return html`
+      <legend><i18n-msg msgid="label.series">Series</i18n-msg></legend>
+
+      <div fullwidth>${this.multiSeriesTabTemplate()}</div>
+
+      <legend><i18n-msg msgid="label.axes">Axes</i18n-msg></legend>
+
+      <label> <i18n-msg msgid="label.data-key">Data Key</i18n-msg> </label>
+      <input type="text" value-key="labelDataKey" .value=${this.labelDataKey} />
+    `
+  }
+}

package/src/editors/property-editor-chartjs-styles.ts

@@ -0,0 +1,165 @@
+import { css } from 'lit'
+
+export const PropertyEditorChartJSStyles = 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(--secondary-text-color, #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 > iron-pages {
+    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: #ccc;
+    box-sizing: border-box;
+    padding-top: 3px;
+    align-items: center;
+  }
+
+  #tab-header > paper-tabs {
+    height: 25px;
+  }
+
+  #tab-header > paper-icon-button {
+    padding: 0px;
+    width: 25px;
+    height: 25px;
+  }
+
+  #tab-header paper-tabs paper-icon-button {
+    display: flex;
+    margin-left: 5px;
+    width: 15px;
+    height: 15px;
+    padding: 2px;
+    color: #585858;
+  }
+
+  #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(--primary-text-color);
+  }
+
+  .tab-content {
+    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(--primary-text-color);
+    font-size: 0.8em;
+    line-height: 2;
+    text-transform: capitalize;
+  }
+
+  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;
+  }
+
+  select {
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    background: url(/images/bg-input-select.png) 100% 50% no-repeat #fff;
+  }
+  input[type='text'] {
+    border: 1px solid rgba(0, 0, 0, 0.2);
+  }
+
+  paper-tab {
+    background-color: rgba(0, 0, 0, 0.2);
+    background-color: #ccc;
+    border-width: 1px 1px 0 1px;
+    padding: 0 5px;
+    color: #fff;
+    font-size: 13px;
+    box-sizing: border-box;
+    min-width: 45px;
+  }
+
+  paper-tab[disabled] {
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+
+  paper-tab:last-child {
+    border-width: 0;
+  }
+
+  paper-tabs paper-tab.iron-selected {
+    background-color: #f6f8f9;
+    border-radius: 5px 5px 0 0;
+    color: #585858;
+  }
+`