@operato/scene-chartjs 2.0.0-beta.0 → 2.0.0-beta.7

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

@@ -1,14 +1,11 @@
-import '@material/web/button/elevated-button.js'
-import '@polymer/iron-pages/iron-pages'
-import '@polymer/paper-tabs/paper-tabs'
-
+import '@material/web/icon/icon.js'
 import '@operato/i18n/ox-i18n.js'
 
 import { css, html } from 'lit'
 import { query } from 'lit/decorators.js'
 
 import { Properties } from '@hatiolab/things-scene'
-import { MdElevatedButton } from '@material/web/button/elevated-button.js'
+import { MdIcon } from '@material/web/icon/icon.js'
 
 import PropertyEditorChartJSAbstract from './property-editor-chartjs-abstract'
 
@@ -16,7 +13,7 @@ export default class PropertyEditorChartJSMultiSeriesAbstract extends PropertyEd
   static styles = [
     ...PropertyEditorChartJSAbstract.styles,
     css`
-      paper-tabs {
+      md-tabs {
         background-color: rgb(204, 204, 204);
       }
       input[type='text'],
@@ -52,8 +49,8 @@ export default class PropertyEditorChartJSMultiSeriesAbstract extends PropertyEd
   }
 
   @query('#tabs') tabs!: HTMLElement
-  @query('#tab-nav-left-button') tabNavLeftButton!: MdElevatedButton
-  @query('#tab-nav-right-button') tabNavRightButton!: MdElevatedButton
+  @query('#tab-nav-left-button') tabNavLeftButton!: MdIcon
+  @query('#tab-nav-right-button') tabNavRightButton!: MdIcon
 
   get color() {
     var oldVersionColor = this.series.backgroundColor
@@ -101,7 +98,7 @@ export default class PropertyEditorChartJSMultiSeriesAbstract extends PropertyEd
   }
 
   get tabContainer(): HTMLElement | null | undefined {
-    return this.tabs.shadowRoot?.querySelector('#tabsContainer')
+    return this.tabs
   }
 
   firstUpdated() {
@@ -214,133 +211,127 @@ export default class PropertyEditorChartJSMultiSeriesAbstract extends PropertyEd
     return html`
       <div id="series-properties-container" fullwidth>
         <div id="tab-header">
-          <md-elevated-button
+          <md-icon
             id="tab-nav-left-button"
-            @click=${(e: Event) => {
+            @tap=${(e: Event) => {
               this._onTabScrollNavLeft(e)
             }}
             disabled
-            ><md-icon>chevron_left</md-icon></md-elevated-button
+            >chevron_left</md-icon
           >
-          <paper-tabs
+          <div
             id="tabs"
-            @iron-select=${(e: Event) => (this.currentSeriesIndex = (e.target as any).selected)}
-            .selected=${this.currentSeriesIndex}
-            no-bar
-            noink
-            scrollable
-            hide-scroll-buttons
+            @change=${(e: Event) => {
+              this.currentSeriesIndex = (e.target as any).activeTabIndex
+            }}
+            active-tab-index=${this.currentSeriesIndex}
             fit-container
           >
             ${this.datasets.map(
               (dataset: any, index: number) => html`
-                <paper-tab data-series="${index + 1}" noink
-                  >${index + 1}
+                <div
+                  data-series=${index + 1}
+                  data-tab-index=${index}
+                  tab
+                  ?selected=${index == this.currentSeriesIndex}
+                  @click=${(e: Event) => {
+                    const target = e.target as HTMLDivElement
+                    this.currentSeriesIndex = Number(target.getAttribute('data-tab-index'))
+                  }}
+                >
+                  ${index + 1}
                   ${!this.datasets || (this.datasets.length != 1 && this.currentSeriesIndex == index)
-                    ? html`
-                        <md-elevated-button @tap=${(e: Event) => this.onTapRemoveCurrentTab(e)}>
-                          <md-icon>close</md-icon>
-                        </md-elevated-button>
-                      `
+                    ? html` <md-icon @tap="${(e: Event) => this.onTapRemoveCurrentTab(e)}"> close </md-icon> `
                     : html``}
-                </paper-tab>
+                </div>
               `
             )}
-          </paper-tabs>
-          <md-elevated-button
+          </div>
+          <md-icon
             id="tab-nav-right-button"
             @click=${(e: Event) => {
               this._onTabScrollNavRight(e)
             }}
             disabled
-            ><md-icon>chevron_right</md-icon></md-elevated-button
+            >chevron_right</md-icon
           >
         </div>
         <div id="add-series-button-container">
-          <md-elevated-button id="add-series-button" @tap=${(e: Event) => this.onTapAddTab(e)}
-            ><md-icon>add</md-icon></md-elevated-button
-          >
+          <md-icon id="add-series-button" @tap=${(e: Event) => this.onTapAddTab(e)}>add</md-icon>
         </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> <ox-i18n msgid="label.data-key">Data Key</ox-i18n> </label>
-                <input type="text" value-key="dataKey" .value=${this.dataKey} />
-
-                ${this.value.type == 'bar'
-                  ? html`
-                      <label> <ox-i18n msgid="label.type">type</ox-i18n> </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> <ox-i18n msgid="label.label">label</ox-i18n> </label>
-                <input type="text" value-key="series.label" .value=${this.series.label} />
-
-                ${this.series.type == 'line'
-                  ? html`
-                      <label> <ox-i18n msgid="label.line-tension">line tension</ox-i18n> </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> <ox-i18n msgid="label.border-width">border width</ox-i18n> </label>
-                      <input type="number" value-key="series.borderWidth" .value=${this.series.borderWidth} />
-                    `
-                  : html``}
-
-                <label> <ox-i18n msgid="label.color">color</ox-i18n> </label>
-                <ox-input-color value-key="color" .value=${this.color}></ox-input-color>
-
-                ${this.series.type == 'line'
-                  ? html`
-                      <label> <ox-i18n msgid="label.point-shape">point shape</ox-i18n> </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> <ox-i18n msgid="label.point-size">point size</ox-i18n> </label>
-                      <input type="number" value-key="series.pointRadius" .value=${this.series.pointRadius} />
-                    `
-                  : html``} <label> <ox-i18n msgid="label.stack-group">Stack group</ox-i18n> </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> <ox-i18n msgid="label.fill">fill</ox-i18n> </label>
-                    `
-                  : html``}
-                ${this.multiAxis
-                  ? html`
-                      <label> <ox-i18n msgid="label.target-axis">target axis</ox-i18n> </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 class="tab-content">
+          <label> <ox-i18n msgid="label.data-key">Data Key</ox-i18n> </label>
+          <input type="text" value-key="dataKey" .value=${this.dataKey} />
+
+          ${this.value.type == 'bar'
+            ? html`
+                <label> <ox-i18n msgid="label.type">type</ox-i18n> </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> <ox-i18n msgid="label.label">label</ox-i18n> </label>
+          <input type="text" value-key="series.label" .value=${this.series.label} />
+
+          ${this.series.type == 'line'
+            ? html`
+                <label> <ox-i18n msgid="label.line-tension">line tension</ox-i18n> </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> <ox-i18n msgid="label.border-width">border width</ox-i18n> </label>
+                <input type="number" value-key="series.borderWidth" .value=${this.series.borderWidth} />
+              `
+            : html``}
+
+          <label> <ox-i18n msgid="label.color">color</ox-i18n> </label>
+          <ox-input-color value-key="color" .value=${this.color}></ox-input-color>
+
+          ${this.series.type == 'line'
+            ? html`
+                <label> <ox-i18n msgid="label.point-shape">point shape</ox-i18n> </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> <ox-i18n msgid="label.point-size">point size</ox-i18n> </label>
+                <input type="number" value-key="series.pointRadius" .value=${this.series.pointRadius} />
+              `
+            : html``} <label> <ox-i18n msgid="label.stack-group">Stack group</ox-i18n> </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> <ox-i18n msgid="label.fill">fill</ox-i18n> </label>
+              `
+            : html``}
+          ${this.multiAxis
+            ? html`
+                <label> <ox-i18n msgid="label.target-axis">target axis</ox-i18n> </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>
       </div>
     `
   }
@@ -351,21 +342,21 @@ export default class PropertyEditorChartJSMultiSeriesAbstract extends PropertyEd
     }
 
     if (this.tabContainer.clientWidth == this.tabContainer.scrollWidth) {
-      this.tabNavLeftButton.disabled = true
-      this.tabNavRightButton.disabled = true
+      this.tabNavLeftButton.setAttribute('disabled', '')
+      this.tabNavRightButton.setAttribute('disabled', '')
     }
     // left-end
     else if (this.tabContainer.scrollLeft == 0) {
-      this.tabNavLeftButton.disabled = true
-      this.tabNavRightButton.disabled = false
+      this.tabNavLeftButton.setAttribute('disabled', '')
+      this.tabNavRightButton.removeAttribute('disabled')
     }
     // right-end
     else if (this.tabContainer.scrollLeft + this.tabContainer.clientWidth >= this.tabContainer.scrollWidth) {
-      this.tabNavLeftButton.disabled = false
-      this.tabNavRightButton.disabled = true
+      this.tabNavLeftButton.removeAttribute('disabled')
+      this.tabNavRightButton.setAttribute('disabled', '')
     } else {
-      this.tabNavLeftButton.disabled = false
-      this.tabNavRightButton.disabled = false
+      this.tabNavLeftButton.removeAttribute('disabled')
+      this.tabNavRightButton.removeAttribute('disabled')
     }
   }
 

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

@@ -5,9 +5,6 @@ export const PropertyEditorChartJSStyles = css`
     display: grid;
     grid-template-columns: repeat(10, 1fr);
     grid-gap: 5px;
-
-    --mdc-icon-button-size: 24px;
-    --mdc-icon-size: 24px;
   }
 
   :host > * {
@@ -23,7 +20,7 @@ export const PropertyEditorChartJSStyles = css`
   :host > legend {
     box-sizing: border-box;
     grid-column: 1 / -1;
-    color: var(--secondary-text-color, #e46c2e);
+    color: var(--md-sys-color-on-secondary-container, #e46c2e);
     font: var(--property-sidebar-fieldset-legend, bold 13px var(--theme-font));
     text-transform: capitalize;
   }
@@ -35,7 +32,7 @@ export const PropertyEditorChartJSStyles = css`
     justify-content: center;
   }
 
-  #series-properties-container > iron-pages {
+  #series-properties-container > [tab-content] {
     grid-column: span 2;
   }
 
@@ -46,23 +43,32 @@ export const PropertyEditorChartJSStyles = css`
     overflow: hidden;
     border: 1px solid rgba(0, 0, 0, 0.2);
     border-bottom: 0;
-    background-color: #ccc;
+    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 > paper-tabs {
+  #tab-header > div {
     height: 25px;
   }
 
-  #tab-header paper-tabs mwc-icon-button {
+  #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: #585858;
+    color: var(--md-sys-color-on-surface);
 
-    --mdc-icon-size: 16px;
+    --md-icon-size: 12px;
   }
 
   #add-series-button-container {
@@ -79,10 +85,12 @@ export const PropertyEditorChartJSStyles = css`
     width: 20px;
     height: 20px;
     padding: 0;
-    color: var(--primary-text-color);
+    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;
@@ -101,12 +109,18 @@ export const PropertyEditorChartJSStyles = css`
   .tab-content > label {
     grid-column: span 3;
     text-align: right;
-    color: var(--primary-text-color);
+    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;
@@ -127,35 +141,27 @@ export const PropertyEditorChartJSStyles = css`
     border: 0;
   }
 
-  select {
-    border: 1px solid rgba(0, 0, 0, 0.2);
-  }
-  input[type='text'] {
-    border: 1px solid rgba(0, 0, 0, 0.2);
-  }
-
-  paper-tab {
+  div[tab] {
+    display: flex;
+    align-items: center;
     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;
+    color: var(--md-sys-color-on-surface);
     box-sizing: border-box;
     min-width: 45px;
   }
 
-  paper-tab[disabled] {
+  div[tab][disabled] {
     background-color: rgba(0, 0, 0, 0.1);
   }
 
-  paper-tab:last-child {
+  div[tab]:last-child {
     border-width: 0;
   }
 
-  paper-tabs paper-tab.iron-selected {
-    background-color: #f6f8f9;
-    border-radius: 5px 5px 0 0;
-    color: #585858;
+  div[tab][selected] {
+    background-color: var(--md-sys-color-surface);
+    color: var(--md-sys-color-on-surface);
   }
 `

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

@@ -17,6 +17,8 @@ export default class ChartJSEditor extends OxPropertyEditor {
       :host {
         display: block;
         padding: 5px;
+
+        --md-elevated-button-container-height: 20px;
       }
 
       #chart-type {
@@ -31,7 +33,7 @@ export default class ChartJSEditor extends OxPropertyEditor {
 
         text-align: right;
 
-        color: var(--primary-text-color);
+        color: var(--md-sys-color-on-secondary-container);
         font-size: 0.8em;
         line-height: 2;
         text-transform: capitalize;