@operato/chart 7.0.37 → 7.0.40

package/src/editors/templates/series.ts

@@ -0,0 +1,304 @@
+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 { 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?: 'bar' | 'horizontalBar' | 'line' | 'radar' | 'pie' | 'doughnut' | 'polarArea'
+
+  @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()
+    }
+  }
+
+  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 === 'line' || chartType === 'bar'
+          ? 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>
+            `
+          : html``}
+
+        <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.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.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/scichart/ox-scichart.ts

@@ -95,10 +95,14 @@ class OxSciChart extends LitElement {
     const newData = this.dataSet
 
     newData.forEach((data, index) => {
-      const xValues = data.map(d => d.xValue)
-      const yValues = data.map(d => d.yValue || 0)
+      const filteredData = data.filter(d => typeof d.yValue === 'number')
 
-      this.dataSeries[index].appendRange(xValues, yValues)
+      if (filteredData.length > 0) {
+        this.dataSeries[index].appendRange(
+          filteredData.map(d => d.xValue),
+          filteredData.map(d => d.yValue)
+        )
+      }
     })
 
     this.chart?.sciChartSurface.zoomExtents()

package/src/scichart/scichart-builder.ts

@@ -19,6 +19,19 @@ function getLocalTimeOffset() {
   return now.getTimezoneOffset() * -60
 }
 
+function calculatePrecision(stepSize: number = 1) {
+  // stepSize를 문자열로 변환한 다음, 소수점 이후 자릿수를 계산
+  const stepSizeString = stepSize.toString()
+
+  // 소수점이 있는 경우, 소수점 이후 자릿수 계산
+  if (stepSizeString.indexOf('.') !== -1) {
+    return stepSizeString.split('.')[1].length
+  }
+
+  // 소수점이 없는 경우, precision은 0
+  return 0
+}
+
 export async function buildSciChart(
   config: OperatoChart.ChartConfig | undefined | null,
   container: any,
@@ -55,6 +68,7 @@ export async function buildSciChart(
     ZoomExtentsModifier,
     RolloverModifier,
     SmartDateLabelProvider,
+    NumericLabelProvider,
     EllipsePointMarker,
     SquarePointMarker,
     TrianglePointMarker,
@@ -135,13 +149,12 @@ export async function buildSciChart(
     } = ticks || {}
 
     const labelProvider = new SmartDateLabelProvider({
-      labelFormat: ENumericFormat.Date_HHMMSS,
       showWiderDateOnFirstLabel: true,
       showYearOnWiderDate: true,
       dateOffset: getLocalTimeOffset()
     })
 
-    labelProvider.cursorNumericFormat = ENumericFormat.Date_DDMMHHMM
+    labelProvider.cursorNumericFormat = ENumericFormat.Date_MMHHSS
 
     const xAxis = new DateTimeNumericAxis(wasmContext, {
       axisTitle,
@@ -169,7 +182,15 @@ export async function buildSciChart(
   // Y 축 설정
   ;(multiAxis ? yAxes : [yAxes[0]]).forEach((axis, index) => {
     const { axisTitle, ticks } = axis
-    const { autoMax, autoMin, min, max, stepSize, beginAtZero } = ticks || {}
+    const { autoMax, autoMin, min, max, stepSize, beginAtZero, display } = ticks || {}
+
+    const labelProvider = display ? new NumericLabelProvider() : undefined
+
+    if (labelProvider) {
+      labelProvider.numericFormat = ENumericFormat.Decimal
+      labelProvider.precision = calculatePrecision(stepSize || 0.1)
+      labelProvider.cursorNumericFormat = ENumericFormat.NoFormat
+    }
 
     const yAxis = new NumericAxis(wasmContext, {
       id: index == 0 ? undefined : `yAxis${index}`,
@@ -177,9 +198,11 @@ export async function buildSciChart(
       autoRange: autoMin || autoMax ? EAutoRange.Always : undefined,
       axisAlignment: index === 0 ? EAxisAlignment.Left : EAxisAlignment.Right,
       visibleRange: min !== undefined && max !== undefined ? new NumberRange(min, max) : undefined,
-      majorDelta: stepSize,
+      majorDelta: stepSize || 0.1,
+      minorDelta: (stepSize || 1) * 0.1,
       growBy: beginAtZero ? new NumberRange(0.1, 0.1) : undefined,
       labelStyle: {
+        display: !!display,
         fontFamily,
         fontSize,
         color: fontColor
@@ -188,7 +211,8 @@ export async function buildSciChart(
         fontFamily,
         fontSize,
         color: fontColor
-      }
+      },
+      labelProvider
     })
 
     sciChartSurface.yAxes.add(yAxis)
@@ -321,7 +345,7 @@ export async function buildSciChart(
     if (tooltip) {
       const rolloverModifier = new RolloverModifier({
         showTooltip: true,
-        showAxisLabels: true,
+        showAxisLabel: false /* 한글의 크기를 잘 계산하지 못하므로 false */,
         tooltipColor: 'white',
         tooltipBackgroundColor: 'rgba(0, 0, 0, 0.7)',
         rollOverDataSeries: dataSeries

package/stories/common.ts

@@ -56,7 +56,10 @@ export function getDefaultAxisOptions(): OperatoChart.AxisOptions {
 //   { timestamp: 2016, count: 28, average: 90 }
 // ]
 // 랜덤한 범위의 숫자를 생성하는 함수
-function getRandomInRange(min: number, max: number) {
+function getRandomInRange(i: number, min: number, max: number) {
+  if (!(i % 11)) {
+    return null
+  }
   return Math.floor(Math.random() * (max - min + 1)) + min
 }
 
@@ -67,8 +70,8 @@ function generateRandomData(count: number) {
 
   for (let i = 0; i < count; i++) {
     const timestamp = startTimestamp + i * 360 * 30 * 1000 // 3초씩 증가하는 타임스탬프 설정
-    const randomCount = getRandomInRange(5, 35) // count 값을 5에서 35 사이로 랜덤 생성
-    const randomAverage = getRandomInRange(50, 150) // average 값을 50에서 150 사이로 랜덤 생성
+    const randomCount = getRandomInRange(i, 5, 35) // count 값을 5에서 35 사이로 랜덤 생성
+    const randomAverage = getRandomInRange(i, 50, 150) // average 값을 50에서 150 사이로 랜덤 생성
 
     randomData.push({
       timestamp: timestamp,

package/stories/ox-input-chart-timeseries.stories.ts

@@ -121,14 +121,14 @@ WithData.args = {
       datasets: [
         {
           dataKey: 'count',
-          label: 'Line Series count',
+          label: '라인 시리즈 카운트',
           type: 'line',
           color: 'rgba(255, 99, 132, 1)',
           borderWidth: 1
         },
         {
           dataKey: 'average',
-          label: 'Line Series average',
+          label: '라인 시리즈 평균값',
           type: 'line',
           color: 'rgba(54, 162, 235, 1)',
           fill: false,