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

package/src/editors/templates/series.ts

@@ -1,316 +0,0 @@
-import '@material/web/icon/icon.js'
-
-import { LitElement, html, PropertyValues, nothing } 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 { random as randomColor, TinyColor } from '@ctrl/tinycolor'
-
-import { Configurer } from '../configurer'
-import './display-value'
-
-@customElement('ox-chart-series')
-export class MultipleSeriesTemplate extends LitElement {
-  createRenderRoot() {
-    return this
-  }
-
-  @property({ type: Object }) configurer!: Configurer
-  @property({ type: String }) chartType?: OperatoChart.ChartType
-
-  @query('#series-tabs') seriesTabs!: HTMLElement
-  @query('#series-tab-nav-left-button') seriesTabNavLeftButton!: MdIcon
-  @query('#series-tab-nav-right-button') seriesTabNavRightButton!: MdIcon
-
-  protected updated(_changedProperties: PropertyValues): void {
-    if (_changedProperties.has('configurer') || _changedProperties.has('chartType')) {
-      this.requestUpdate()
-    }
-  }
-
-  get value() {
-    return this.configurer.datasets
-  }
-
-  render() {
-    return keyed(
-      this.configurer.currentSeriesIndex,
-      html`
-        <div id="series-properties-container" fullwidth>
-          <div id="series-tab-header" @wheel=${this._onWheelScroll}>
-            <md-icon id="series-tab-nav-left-button" @click=${this._scrollLeft}>chevron_left</md-icon>
-            <div id="series-tabs" active-tab-index=${this.configurer.currentSeriesIndex} fit-container>
-              ${this._renderTabs()}
-            </div>
-            <md-icon id="series-tab-nav-right-button" @click=${this._scrollRight}>chevron_right</md-icon>
-          </div>
-          <div id="add-series-button-container">
-            <md-icon id="add-series-button" @click=${this._addSeries}>add</md-icon>
-          </div>
-          ${this._renderSeriesForm()}
-        </div>
-      `
-    )
-  }
-
-  private _renderTabs() {
-    return this.configurer.datasets.map(
-      (dataset: OperatoChart.Dataset, index: number) => html`
-        <div
-          data-series=${index + 1}
-          data-tab-index=${index}
-          tab
-          ?selected=${index === this.configurer.currentSeriesIndex}
-          @click=${() => this._selectTab(index)}
-        >
-          ${index + 1}
-          ${this.configurer.datasets.length > 1 && this.configurer.currentSeriesIndex === index
-            ? html`<md-icon @click=${() => this._removeSeries(index)}>close</md-icon>`
-            : html``}
-        </div>
-      `
-    )
-  }
-
-  private _renderSeriesForm() {
-    const configurer = this.configurer
-    const chartType = this.chartType
-
-    return html`
-      <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 || ''} />
-
-        ${chartType == 'horizontalBar' ||
-        chartType === 'doughnut' ||
-        chartType === 'pie' ||
-        chartType == 'radar' ||
-        chartType == 'polarArea'
-          ? nothing
-          : 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>
-            `}
-
-        <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=${String(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=${String(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="">&nbsp;</option>
-                <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=${String(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="series-fill" type="checkbox" value-key="series.fill" ?checked=${configurer.series.fill} />
-              <label for="series-fill"> <ox-i18n msgid="label.fill">Fill</ox-i18n> </label>
-            `
-          : html``}
-        ${configurer.multiAxis && configurer.series.type !== 'horizontalBar'
-          ? 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``}
-
-        <label></label>
-        <ox-chart-display-value .configurer=${configurer} fullwidth></ox-chart-display-value>
-      </div>
-    `
-  }
-
-  _getSeriesModel({
-    chartType,
-    datasetsLength,
-    lastSeriesColor
-  }: {
-    chartType: string
-    datasetsLength: number
-    lastSeriesColor: TinyColor
-  }) {
-    const addSeriesOption: any = {
-      label: `series ${datasetsLength + 1}`,
-      data: [],
-      borderWidth: 1,
-      dataKey: '',
-      yAxisID: 'left',
-      color: randomColor({
-        hue: lastSeriesColor.toHsv().h
-      }).toRgbString(),
-      stack: ''
-    }
-
-    addSeriesOption.type = addSeriesOption.chartType = chartType
-    return addSeriesOption
-  }
-
-  private _selectTab(index: number) {
-    this.configurer.setCurrentSeriesIndex(index)
-    this.requestUpdate()
-  }
-
-  private _removeSeries(index: number) {
-    this.configurer.removeSeries(index)
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
-
-    this.requestUpdate()
-  }
-
-  private _addSeries() {
-    const configurer = this.configurer
-
-    if (!configurer.config.data.datasets) {
-      return
-    }
-
-    const lastSeriesIndex = configurer.config.data.datasets.length
-    const chartType = configurer.series.type || configurer.config.type
-    const color = configurer.datasets[lastSeriesIndex - 1]?.backgroundColor
-    const lastSeriesColor = new TinyColor(Array.isArray(color) ? color[0] : color)
-
-    const seriesModel = this._getSeriesModel({
-      chartType: chartType!,
-      datasetsLength: lastSeriesIndex,
-      lastSeriesColor
-    })
-
-    this.configurer.addSeries(seriesModel)
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
-
-    this.requestUpdate()
-  }
-
-  private _onWheelScroll(event: WheelEvent) {
-    const tabContainer = this.seriesTabs
-    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>('#series-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.seriesTabs
-    tabNavLeftButton = this.seriesTabNavLeftButton
-    tabNavRightButton = this.seriesTabNavRightButton
-
-    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/global.d.ts

@@ -1 +0,0 @@
-declare const SciChart: any

package/src/progress/ox-progress-circle.ts

@@ -1,133 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { PropertyValues, LitElement, css, html } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
-import { ScrollbarStyles } from '@operato/styles'
-
-/**
-A lightweight progress-circle WebComponent
-
-Example:
-  <ox-progress-circle
-    .value=${70}
-    titleText="전체"
-    suffix="%"
-    fontSize="29px"
-    fontColor="#4E5055"
-    borderStyle="none"
-    innerCircleSize="28%"
-    circleColor="#0595E5"
-    shadow="#00000026 4px 4px 4px"
-    background="#eaf5fd"
-  ></ox-progress-circle>
-*/
-@customElement('ox-progress-circle')
-export class OxProgressCircle extends LitElement {
-  static styles = [
-    ScrollbarStyles,
-    css`
-      :host {
-        display: flex;
-      }
-
-      div[circle] {
-        font-size: 29px;
-        font-weight: bold;
-        width: 100%;
-        aspect-ratio: 1;
-        display: flex;
-        border-radius: 50%;
-        border: 1px solid #353b48;
-        position: relative;
-        background: conic-gradient(yellowgreen 0deg, white 0deg);
-        box-shadow: #00000026 5px 5px 5px;
-      }
-      div[inner-circle] {
-        width: 90%;
-        aspect-ratio: 1;
-        border-radius: inherit;
-        background-color: #353b48;
-        margin: auto;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        color: white;
-        justify-content: center;
-        box-shadow: inset #00000026 -2px 2px 8px;
-      }
-
-      div[inner-circle] span {
-        display: flex;
-        align-items: center;
-      }
-
-      span[progress-title] {
-        font-size: 0.65em;
-        margin-bottom: -5%;
-      }
-    `
-  ]
-
-  @property({ type: Number }) value: number = 0
-  @property({ type: String }) suffix: string = ''
-  @property({ type: String }) titleText: string = ''
-  @property({ type: String }) fontSize: string = '10px'
-  @property({ type: String }) fontColor: string = ''
-  @property({ type: String }) borderStyle: string = ''
-  @property({ type: String }) innerCircleSize: string = '10%'
-  @property({ type: String }) shadow: string = ''
-  @property({ type: String }) circleColor: string = 'yellowgreen'
-  @property({ type: String }) background: string = ''
-
-  @query('div[circle]') circle!: HTMLDivElement
-  @query('div[inner-circle]') innerCircle!: HTMLDivElement
-  @query('span[progress-title]') progressTitle?: HTMLSpanElement
-
-  firstUpdated() {
-    if (this.fontSize) {
-      this.circle.style.fontSize = this.fontSize
-    }
-    if (this.fontColor) {
-      this.innerCircle.style.color = this.fontColor
-    }
-    if (this.borderStyle) {
-      this.circle.style.border = this.borderStyle
-    }
-    if (this.innerCircleSize) {
-      this.innerCircle.style.width = `calc(100% - ${this.innerCircleSize})`
-    }
-    if (this.shadow) {
-      this.circle.style.boxShadow = this.shadow
-    }
-    if (this.background) {
-      this.innerCircle.style.background = this.background
-    }
-    if (this.progressTitle && this.circleColor) {
-      this.progressTitle.style.color = this.circleColor
-    }
-  }
-
-  updated(changes: PropertyValues<this>) {
-    if (changes.has('value')) {
-      this.updateCircleBackground()
-    }
-  }
-
-  updateCircleBackground() {
-    const position = this.value * 3.6 // 360 = 100%
-    this.circle.style.background = `conic-gradient(${this.circleColor} ${position}deg, ${this.background} 0deg)`
-  }
-
-  render() {
-    return html`
-      <div circle>
-        <div inner-circle>
-          ${this.titleText ? html`<span progress-title>${this.titleText}</span>` : ''}
-          <span>${this.value}${this.suffix}</span>
-        </div>
-      </div>
-    `
-  }
-}

package/src/scichart/ox-scichart.ts

@@ -1,151 +0,0 @@
-import { LitElement, html, css } from 'lit'
-import { property, query, customElement } from 'lit/decorators.js'
-import { buildSciChart } from './scichart-builder'
-
-declare global {
-  interface Window {
-    sciChartLoaded: boolean
-    sciChartLoadingPromise: Promise<void>
-  }
-}
-
-@customElement('ox-scichart')
-class OxSciChart extends LitElement {
-  @property({ type: Object }) config: OperatoChart.ChartConfig | null = null
-  @property({ type: Array }) data: { [attr: string]: any }[] = []
-
-  private chart: any = null
-  private dataSeries: any[] = []
-
-  @query('div#container') container!: HTMLDivElement
-
-  static styles = css`
-    :host {
-      display: block;
-      width: 100%;
-      height: 100%;
-    }
-
-    .chart-container {
-      display: flex;
-      width: 100%;
-      height: 100%;
-    }
-
-    .chart-content {
-      flex: 1;
-      position: relative;
-    }
-  `
-
-  firstUpdated() {
-    this.loadSciChart()
-  }
-
-  async loadSciChart() {
-    if (!window.sciChartLoaded) {
-      if (!window.sciChartLoadingPromise) {
-        window.sciChartLoadingPromise = new Promise<void>(resolve => {
-          const script = document.createElement('script')
-          script.src = 'https://cdn.jsdelivr.net/npm/scichart/index.min.js'
-          script.crossOrigin = 'anonymous'
-          script.onload = () => {
-            window.sciChartLoaded = true
-
-            SciChart.SciChartSurface.UseCommunityLicense()
-
-            resolve()
-          }
-          document.head.appendChild(script)
-        })
-      }
-
-      await window.sciChartLoadingPromise
-    }
-
-    this.initializeSciChart()
-  }
-
-  async initializeSciChart() {
-    const { chart, dataSeries } = (await buildSciChart(this.config, this.container, {})) || {}
-
-    this.chart = chart
-    this.dataSeries = dataSeries!
-
-    this.updateDataSeries()
-  }
-
-  async updated(changedProperties: Map<string | number | symbol, unknown>) {
-    if (changedProperties.has('config') && this.config) {
-      await this.initializeSciChart()
-    }
-
-    if (changedProperties.has('data')) {
-      this.updateDataSeries()
-      this.chart?.sciChartSurface.zoomExtents()
-    }
-  }
-
-  async appendData(appendum: { [attr: string]: any }[]) {}
-
-  updateDataSeries() {
-    if (!this.dataSeries?.length) return
-
-    this.dataSeries.forEach(ds => ds.clear())
-    const newData = this.dataSet
-
-    newData.forEach((data, index) => {
-      const filteredData = data.filter(d => typeof d.yValue === 'number')
-
-      if (filteredData.length > 0) {
-        this.dataSeries[index].appendRange(
-          filteredData.map(d => d.xValue),
-          filteredData.map(d => d.yValue)
-        )
-      }
-    })
-
-    this.chart?.sciChartSurface.zoomExtents()
-    this.chart?.sciChartSurface.invalidateElement()
-  }
-
-  get dataSet(): { xValue: number; yValue: number }[][] {
-    const { config, data } = this
-    const { datasets = [], labelDataKey: attrX } = config?.data || {}
-
-    if (!(data instanceof Array) || !attrX) {
-      return []
-    }
-
-    return datasets.map(dataset => {
-      return data
-        .map(item => {
-          if (!item || typeof item !== 'object') {
-            return
-          }
-
-          const xValue = new Date(item[attrX])
-          if (isNaN(xValue.getTime())) {
-            console.error('Invalid date:', item[attrX])
-            return
-          }
-
-          return {
-            xValue: xValue.getTime() / 1000,
-            yValue: item[dataset.dataKey!]
-          }
-        })
-        .filter(Boolean) as { xValue: number; yValue: number }[]
-    })
-  }
-
-  render() {
-    return html` <div id="container" class="chart-container"></div> `
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'ox-scichart': OxSciChart
-  }
-}