@operato/chart 8.0.0-beta.0 → 8.0.0-beta.2

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

@@ -1,72 +0,0 @@
-import '@operato/i18n/ox-i18n.js'
-
-import './ox-input-chart-hbar'
-import './ox-input-chart-mixed'
-import './ox-input-chart-pie'
-import './ox-input-chart-radar'
-import './ox-input-chart-timeseries'
-
-import { css, html } from 'lit'
-import { customElement } from 'lit/decorators.js'
-
-import { OxPropertyEditor, PropertySpec } from '@operato/property-editor'
-
-@customElement('ox-property-editor-chart')
-export class ChartEditor extends OxPropertyEditor {
-  static styles = [
-    css`
-      :host {
-        display: block;
-        padding: 5px;
-
-        --md-elevated-button-container-height: 20px;
-      }
-
-      #chart-type {
-        display: grid;
-        grid-template-columns: repeat(10, 1fr);
-        grid-gap: 5px;
-      }
-
-      #chart-type > label {
-        box-sizing: border-box;
-        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;
-      }
-
-      #chart-type > input {
-        box-sizing: border-box;
-        grid-column: span 7;
-        border: 1px solid rgba(0, 0, 0, 0.2);
-      }
-    `
-  ]
-
-  editorTemplate(value: any, spec: PropertySpec) {
-    switch (value.type) {
-      case 'line':
-      case 'bar':
-        return html` <ox-input-chart-mixed .value=${value} chart-type=${value.type} fullwidth></ox-input-chart-mixed> `
-      case 'horizontalBar':
-        return html` <ox-input-chart-hbar .value=${value} chart-type=${value.type} fullwidth></ox-input-chart-hbar> `
-      case 'pie':
-      case 'doughnut':
-      case 'polarArea':
-        return html` <ox-input-chart-pie .value=${value} chart-type=${value.type} fullwidth></ox-input-chart-pie> `
-      case 'radar':
-        return html` <ox-input-chart-radar .value=${value} chart-type=${value.type} fullwidth></ox-input-chart-radar> `
-      case 'timeseries':
-        return html`
-          <ox-input-chart-timeseries .value=${value} chart-type=${value.type} fullwidth></ox-input-chart-timeseries>
-        `
-    }
-
-    return html``
-  }
-}

package/src/editors/templates/annotations.ts

@@ -1,295 +0,0 @@
-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()
-    }
-  }
-
-  get value() {
-    return this.configurer.annotations
-  }
-
-  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.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
-
-    this.requestUpdate()
-  }
-
-  private _addAnnotation() {
-    this.configurer.addAnnotation()
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
-
-    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

@@ -1,111 +0,0 @@
-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
-    const displayValue = configurer.series.displayValue
-    configurer.series.displayValue = displayValue === true ? 'T' : displayValue === false ? 'F' : displayValue
-
-    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 || ''}
-        />
-
-        <label for="display-value"> <ox-i18n msgid="label.value-display">Value Display</ox-i18n> </label>
-        <select id="display-value" value-key="series.displayValue" .value=${configurer.series.displayValue || 'F'}>
-          <option value="T">Show</option>
-          <option value="F">Hide</option>
-          <option value="auto">Hide to Overlap</option>
-        </select>
-
-        ${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
-  }
-}