@operato/chart 7.0.37 → 7.0.40

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

@@ -176,4 +176,31 @@ export const InputChartStyles = css`
     background-color: var(--md-sys-color-surface);
     color: var(--md-sys-color-on-surface);
   }
+
+  #display-value-container {
+    display: grid;
+    grid-template-columns: repeat(10, 1fr);
+    grid-gap: 5px;
+
+    background-color: var(--ox-input-background-color, var(--md-sys-color-surface));
+    color: var(--ox-input-color, var(--md-sys-color-on-surface));
+  }
+
+  #display-value-container > * {
+    box-sizing: border-box;
+    grid-column: span 7;
+  }
+
+  #display-value-container > label {
+    box-sizing: border-box;
+    grid-column: span 3;
+  }
+
+  #display-value-container > 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;
+  }
 `

package/src/editors/ox-input-chart-hbar.ts

@@ -8,6 +8,8 @@ import { ifDefined } from 'lit/directives/if-defined.js'
 
 import { InputChartAbstract } from './input-chart-abstract'
 
+import './templates/display-value'
+
 @customElement('ox-input-chart-hbar')
 export class OxInputChartHBar extends InputChartAbstract {
   static styles = InputChartAbstract.styles
@@ -17,7 +19,7 @@ export class OxInputChartHBar extends InputChartAbstract {
 
     return html`
       <legend><ox-i18n msgid="label.series">Series</ox-i18n></legend>
-      ${this.multiSeriesTabTemplate()}
+      <ox-chart-series .configurer=${configurer} .chartType=${this.chartType} fullwidth></ox-chart-series>
 
       <legend><ox-i18n msgid="label.y-axes">Y Axes</ox-i18n></legend>
 
@@ -144,78 +146,6 @@ export class OxInputChartHBar extends InputChartAbstract {
     `
   }
 
-  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.onTapRemoveCurrentSeriesTab(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.onTapAddSeriesTab(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 || ''} />
-          <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 || ''} />
-          <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 || '#000'}></ox-input-color>
-          <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 || ''} />
-
-          ${this.displayValueTemplate()}
-        </div>
-      </div>
-    `
-  }
-
   getDefaultDatasets(): OperatoChart.Dataset[] {
     return [this.getDefaultDataset('horizontalBar')]
   }

package/src/editors/ox-input-chart-mixed.ts

@@ -5,6 +5,7 @@ import { customElement } from 'lit/decorators.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
 
 import { InputChartAbstract } from './input-chart-abstract'
+import './templates/series'
 
 @customElement('ox-input-chart-mixed')
 export class OxInputChartMixed extends InputChartAbstract {
@@ -18,8 +19,7 @@ export class OxInputChartMixed extends InputChartAbstract {
       <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>
-
-      <div fullwidth>${this.multiSeriesTabTemplate()}</div>
+      <ox-chart-series .configurer=${configurer} .chartType=${this.chartType} fullwidth></ox-chart-series>
 
       <legend><ox-i18n msgid="label.x-axes">X Axes</ox-i18n></legend>
 

package/src/editors/ox-input-chart-pie.ts

@@ -3,9 +3,9 @@ import '@operato/input/ox-input-multiple-colors.js'
 
 import { html } from 'lit'
 import { customElement } from 'lit/decorators.js'
-import { ifDefined } from 'lit/directives/if-defined.js'
 
 import { InputChartAbstract } from './input-chart-abstract'
+import './templates/display-value'
 
 @customElement('ox-input-chart-pie')
 export default class OxInputChartPie extends InputChartAbstract {
@@ -27,7 +27,8 @@ export default class OxInputChartPie extends InputChartAbstract {
         .value=${configurer.color || []}
       ></ox-input-multiple-colors>
 
-      ${this.displayValueTemplate()}
+      <label></label>
+      <ox-chart-display-value .configurer=${configurer} fullwidth></ox-chart-display-value>
 
       <legend><ox-i18n msgid="label.axes">Axes</ox-i18n></legend>
 

package/src/editors/ox-input-chart-radar.ts

@@ -6,6 +6,8 @@ import { ifDefined } from 'lit/directives/if-defined.js'
 
 import { InputChartAbstract } from './input-chart-abstract'
 
+import './templates/series'
+
 @customElement('ox-input-chart-radar')
 export default class OxInputChartRadar extends InputChartAbstract {
   static styles = InputChartAbstract.styles
@@ -15,8 +17,7 @@ export default class OxInputChartRadar extends InputChartAbstract {
 
     return html`
       <legend><ox-i18n msgid="label.series">Series</ox-i18n></legend>
-
-      <div fullwidth>${this.multiSeriesTabTemplate()}</div>
+      <ox-chart-series .configurer=${configurer} .chartType=${this.chartType} fullwidth></ox-chart-series>
 
       <legend><ox-i18n msgid="label.axes">Axes</ox-i18n></legend>
 

package/src/editors/ox-input-chart-timeseries.ts

@@ -6,6 +6,9 @@ import { ifDefined } from 'lit/directives/if-defined.js'
 
 import { InputChartAbstract } from './input-chart-abstract'
 
+import './templates/annotations'
+import './templates/series'
+
 @customElement('ox-input-chart-timeseries')
 export class OxInputChartTimeseries extends InputChartAbstract {
   static styles = [
@@ -22,7 +25,7 @@ export class OxInputChartTimeseries extends InputChartAbstract {
         margin: 0;
       }
 
-      div[collapsed] {
+      [collapsed] {
         display: none;
       }
     `
@@ -38,7 +41,7 @@ export class OxInputChartTimeseries extends InputChartAbstract {
       <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>
-      <div fullwidth>${this.multiSeriesTabTemplate()}</div>
+      <ox-chart-series .configurer=${configurer} .chartType=${this.chartType} fullwidth></ox-chart-series>
 
       <legend><ox-i18n msgid="label.x-axes">X Axes</ox-i18n></legend>
 
@@ -253,7 +256,11 @@ export class OxInputChartTimeseries extends InputChartAbstract {
           >${this.annotationExpanded ? 'expand_less' : 'expand_more'}</md-icon
         >
       </legend>
-      <div fullwidth ?collapsed=${!this.annotationExpanded}>${this.annotationsTabTemplate()}</div>
+      <ox-chart-annotations
+        .configurer=${configurer}
+        ?collapsed=${!this.annotationExpanded}
+        fullwidth
+      ></ox-chart-annotations>
     `
   }
 

package/src/editors/ox-property-editor-chart.ts

@@ -6,7 +6,7 @@ import './ox-input-chart-pie'
 import './ox-input-chart-radar'
 import './ox-input-chart-timeseries'
 
-import { css, html, nothing } from 'lit'
+import { css, html } from 'lit'
 import { customElement } from 'lit/decorators.js'
 
 import { OxPropertyEditor, PropertySpec } from '@operato/property-editor'

package/src/editors/templates/annotations.ts

@@ -0,0 +1,287 @@
+import '@material/web/icon/icon.js'
+
+import { LitElement, html, PropertyValues } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
+import { keyed } from 'lit/directives/keyed.js'
+import { MdIcon } from '@material/web/icon/icon.js'
+
+import { Configurer } from '../configurer'
+
+@customElement('ox-chart-annotations')
+export class AnnotationsTemplate extends LitElement {
+  createRenderRoot() {
+    return this
+  }
+
+  @property({ type: Object }) configurer!: Configurer
+
+  @query('#annotations-tabs') annotationsTabs!: HTMLElement
+  @query('#annotations-tab-nav-left-button') annotationsTabNavLeftButton!: MdIcon
+  @query('#annotations-tab-nav-right-button') annotationsTabNavRightButton!: MdIcon
+
+  protected updated(_changedProperties: PropertyValues): void {
+    if (_changedProperties.has('configurer')) {
+      this.requestUpdate()
+    }
+  }
+
+  render() {
+    return keyed(
+      this.configurer.currentAnnotationIndex,
+      html`
+        <div id="annotations-properties-container" fullwidth>
+          <div id="annotations-tab-header" @wheel=${this._onWheelScroll}>
+            <md-icon id="annotations-tab-nav-left-button" @click=${this._scrollLeft}>chevron_left</md-icon>
+            <div id="annotations-tabs" active-tab-index=${this.configurer.currentAnnotationIndex} fit-container>
+              ${this._renderTabs()}
+            </div>
+            <md-icon id="annotations-tab-nav-right-button" @click=${this._scrollRight}>chevron_right</md-icon>
+          </div>
+          <div id="add-annotation-button-container">
+            <md-icon id="add-annotation-button" @click=${this._addAnnotation}>add</md-icon>
+          </div>
+          ${this._renderAnnotationForm()}
+        </div>
+      `
+    )
+  }
+
+  private _renderTabs() {
+    return this.configurer.annotations.map(
+      (annotation: OperatoChart.Annotation, index: number) => html`
+        <div
+          data-annotation=${index + 1}
+          data-tab-index=${index}
+          tab
+          ?selected=${index === this.configurer.currentAnnotationIndex}
+          @click=${() => this._selectTab(index)}
+        >
+          ${index + 1}
+          ${this.configurer.annotations.length > 0 && this.configurer.currentAnnotationIndex === index
+            ? html`<md-icon @click=${() => this._removeAnnotation(index)}>close</md-icon>`
+            : html``}
+        </div>
+      `
+    )
+  }
+
+  private _renderAnnotationForm() {
+    const currentAnnotation =
+      this.configurer.currentAnnotationIndex >= 0
+        ? this.configurer.annotations[this.configurer.currentAnnotationIndex]
+        : undefined
+
+    if (!currentAnnotation) {
+      return html`<p>No annotations available. Add one using the button above.</p>`
+    }
+
+    return html`
+      <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="">&nbsp;</option>
+          <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>
+        </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="">&nbsp;</option>
+          <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="">&nbsp;</option>
+          <option value="Top">Top</option>
+          <option value="Center">Center</option>
+          <option value="Bottom">Bottom</option>
+        </select>
+
+        <label for="annotation-x-coordinate-mode">X Coordinate Mode</label>
+        <select
+          id="annotation-x-coordinate-mode"
+          class="select-content"
+          value-key="annotation.xCoordinateMode"
+          .value=${currentAnnotation!.xCoordinateMode || 'DataValue'}
+        >
+          <option value="">&nbsp;</option>
+          <option value="DataValue">DataValue</option>
+          <option value="Pixel">Pixel</option>
+          <option value="Relative">Relative</option>
+        </select>
+
+        <label for="annotation-y-coordinate-mode">Y Coordinate Mode</label>
+        <select
+          id="annotation-y-coordinate-mode"
+          class="select-content"
+          value-key="annotation.yCoordinateMode"
+          .value=${currentAnnotation!.yCoordinateMode || 'DataValue'}
+        >
+          <option value="">&nbsp;</option>
+          <option value="DataValue">DataValue</option>
+          <option value="Pixel">Pixel</option>
+          <option value="Relative">Relative</option>
+        </select>
+      </div>
+    `
+  }
+
+  private _selectTab(index: number) {
+    this.configurer.setCurrentAnnotationIndex(index)
+    this.requestUpdate()
+  }
+
+  private _removeAnnotation(index: number) {
+    this.configurer.removeAnnotation(index)
+    this.requestUpdate()
+  }
+
+  private _addAnnotation() {
+    this.configurer.addAnnotation()
+    this.requestUpdate()
+  }
+
+  private _onWheelScroll(event: WheelEvent) {
+    const tabContainer = this.annotationsTabs
+    if (tabContainer) {
+      event.preventDefault()
+
+      tabContainer.scrollLeft += event.deltaY
+
+      this._onTabScroll()
+    }
+  }
+
+  private _scrollLeft() {
+    this._scrollTabContainer(-1)
+  }
+
+  private _scrollRight() {
+    this._scrollTabContainer(1)
+  }
+
+  private _scrollTabContainer(direction: number) {
+    const tabContainer = this.renderRoot!.querySelector<HTMLElement>('#annotations-tabs')
+    if (tabContainer) {
+      tabContainer.style.scrollBehavior = 'smooth'
+      tabContainer.scrollLeft += direction * tabContainer.clientWidth
+    }
+
+    setTimeout(() => {
+      tabContainer!.style.scrollBehavior = 'auto'
+      this._onTabScroll()
+    }, 300)
+  }
+
+  private _onTabScroll() {
+    let tabContainer: HTMLElement | null | undefined
+    let tabNavLeftButton: MdIcon
+    let tabNavRightButton: MdIcon
+
+    tabContainer = this.annotationsTabs
+    tabNavLeftButton = this.annotationsTabNavLeftButton
+    tabNavRightButton = this.annotationsTabNavRightButton
+
+    if (!tabContainer) {
+      return
+    }
+
+    if (tabContainer.clientWidth == tabContainer.scrollWidth) {
+      tabNavLeftButton.setAttribute('disabled', '')
+      tabNavRightButton.setAttribute('disabled', '')
+    } else if (tabContainer.scrollLeft <= 0) {
+      tabNavLeftButton.setAttribute('disabled', '')
+      tabNavRightButton.removeAttribute('disabled')
+    } else if (tabContainer.scrollLeft + tabContainer.clientWidth >= tabContainer.scrollWidth) {
+      tabNavLeftButton.removeAttribute('disabled')
+      tabNavRightButton.setAttribute('disabled', '')
+    } else {
+      tabNavLeftButton.removeAttribute('disabled')
+      tabNavRightButton.removeAttribute('disabled')
+    }
+  }
+}

package/src/editors/templates/display-value.ts

@@ -0,0 +1,110 @@
+import { LitElement, html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+import { Configurer } from '../configurer' // Configurer 경로에 맞게 수정하세요.
+
+@customElement('ox-chart-display-value')
+export class DisplayValue extends LitElement {
+  createRenderRoot() {
+    return this
+  }
+
+  @property({ type: Object }) configurer!: Configurer
+
+  render() {
+    const configurer = this.configurer
+
+    return html`
+      <div id="display-value-container">
+        <label for="value-format"> <ox-i18n msgid="label.value-format">Value Format</ox-i18n> </label>
+        <input
+          id="value-format"
+          type="text"
+          value-key="series.valueFormat"
+          .value=${configurer.series.valueFormat || ''}
+          list="format-list"
+        />
+        <datalist id="format-list">
+          <option value="#,###."></option>
+          <option value="#,###.#"></option>
+          <option value="#,###.0"></option>
+          <option value="#,##0.#"></option>
+          <option value="#,##0.0"></option>
+          <option value="#,##0.0%"></option>
+        </datalist>
+
+        <label for="value-prefix"> <ox-i18n msgid="label.value-prefix">Value Prefix</ox-i18n> </label>
+        <input
+          id="value-prefix"
+          type="text"
+          value-key="series.valuePrefix"
+          .value=${configurer.series.valuePrefix || ''}
+        />
+
+        <label for="value-suffix"> <ox-i18n msgid="label.value-suffix">Value Suffix</ox-i18n> </label>
+        <input
+          id="value-suffix"
+          type="text"
+          value-key="series.valueSuffix"
+          .value=${configurer.series.valueSuffix || ''}
+        />
+
+        <input
+          id="display-value"
+          type="checkbox"
+          value-key="series.displayValue"
+          ?checked=${!!configurer.series.displayValue}
+        />
+        <label for="display-value"> <ox-i18n msgid="label.value-display">Value Display</ox-i18n> </label>
+
+        ${configurer.series.displayValue
+          ? html`
+              <label for="font-color"> <ox-i18n msgid="label.font-color">Font Color</ox-i18n> </label>
+              <ox-input-color
+                id="font-color"
+                value-key="series.defaultFontColor"
+                .value=${configurer.series.defaultFontColor || '#000'}
+              ></ox-input-color>
+              <label for="font-size"> <ox-i18n msgid="label.font-size">Font Size</ox-i18n> </label>
+              <input
+                id="font-size"
+                type="number"
+                value-key="series.defaultFontSize"
+                .value=${configurer.series.defaultFontSize || 10}
+              />
+              <label for="data-label-anchor"> <ox-i18n msgid="label.data-label-anchor">Position</ox-i18n> </label>
+              <select
+                id="data-label-anchor"
+                value-key="series.dataLabelAnchor"
+                .value=${configurer.series.dataLabelAnchor || 'center'}
+              >
+                <option value="center">Center</option>
+                <option value="start">Start</option>
+                <option value="end">End</option>
+              </select>
+              <label for="data-label-offset"> <ox-i18n msgid="label.data-label-offset">Offset</ox-i18n> </label>
+              <input
+                id="data-label-offset"
+                type="number"
+                value-key="series.dataLabelOffset"
+                .value=${configurer.series.dataLabelOffset || 0}
+              />
+              <label for="data-label-rotation"> <ox-i18n msgid="label.data-label-rotation">Rotation</ox-i18n> </label>
+              <input
+                id="data-label-rotation"
+                type="number"
+                value-key="series.dataLabelRotation"
+                .value=${configurer.series.dataLabelRotation || 0}
+              />
+            `
+          : html``}
+      </div>
+    `
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ox-chart-display-value': DisplayValue
+  }
+}