@operato/chart 2.0.0-beta.25

package/src/scichart/ox-scichart.ts

@@ -0,0 +1,143 @@
+import { LitElement, html, css } from 'lit'
+import { property, query, customElement } from 'lit/decorators.js'
+import { buildSciChart } from './scichart-builder'
+
+// 전역 변수로 SciChart 로딩 상태 관리
+declare global {
+  interface Window {
+    sciChartLoaded: boolean
+    sciChartLoadingPromise: Promise<void>
+  }
+}
+
+@customElement('ox-scichart')
+class OxSciChart extends LitElement {
+  @property({ type: Array }) data: { [attr: string]: any }[] = [
+    { x: 1718612376646, y: 10 },
+    { x: 1718612386646, y: 20 },
+    { x: 1718612396646, y: 15 },
+    { x: 1718612406646, y: 25 },
+    { x: 1718612416646, y: 22 },
+    { x: 1718612426646, y: 30 },
+    { x: 1718612436646, y: 28 }
+  ]
+  @property({ type: String }) attrX: string = 'x'
+  @property({ type: String }) attrY: string = 'y'
+  @property({ type: Object }) config: any = null
+
+  private chart: any = null
+  dataSeries?: any
+
+  @query('div#container') container!: HTMLDivElement
+
+  static styles = css`
+    :host {
+      display: block;
+    }
+
+    div {
+      width: 100%;
+      height: 100%;
+    }
+  `
+
+  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')) {
+      await this.initializeSciChart()
+    }
+
+    if (changedProperties.has('data')) {
+      this.updateDataSeries()
+      this.chart?.sciChartSurface.zoomExtents()
+    }
+  }
+
+  updateDataSeries() {
+    if (!this.dataSeries) return
+
+    this.dataSeries.clear()
+    const newData = this.dataSet
+
+    this.dataSeries.appendRange(
+      newData.map(d => d.xValue),
+      newData.map(d => d.yValue)
+    )
+
+    this.chart?.sciChartSurface.zoomExtents()
+    this.chart?.sciChartSurface.invalidateElement()
+  }
+
+  get dataSet(): { xValue: number; yValue: number }[] {
+    const { attrX, attrY, data } = this
+
+    if (!(data instanceof Array)) {
+      return []
+    }
+
+    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[attrY]
+        }
+      })
+      .filter(Boolean) as { xValue: number; yValue: number }[]
+  }
+
+  render() {
+    return html`<div id="container"></div>`
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ox-scichart': OxSciChart
+  }
+}

package/src/scichart/scichart-builder.ts

@@ -0,0 +1,87 @@
+export async function buildSciChart(
+  config: OperatoChart.ChartConfig | undefined | null,
+  container: any,
+  { fontSize, fontFamily, fontColor }: { fontSize?: number; fontFamily?: string; fontColor?: string }
+): Promise<{ chart: any; dataSeries: any } | undefined> {
+  if (!config) {
+    return
+  }
+
+  const {
+    SciChartSurface,
+    SciChartDefaults,
+    chartBuilder,
+    SciChartJsNavyTheme,
+    XyDataSeries,
+    FastLineRenderableSeries,
+    NumberRange,
+    EAutoRange,
+    EAxisAlignment,
+    NumericAxis,
+    DateTimeNumericAxis
+  } = SciChart
+
+  const { type: chartType, options, data: fromData } = config
+  const {
+    theme,
+    animation,
+    tooltip,
+    stacked,
+    legend,
+    scales: fromScales,
+    xGridLine,
+    yGridLine,
+    y2ndGridLine,
+    multiAxis
+  } = options || {}
+  const { datasets = [] } = fromData || {}
+
+  const { xAxes = [], yAxes = [] } = fromScales || {}
+  const toScales = {} as any
+
+  const chart = await SciChartSurface.create(container, {
+    theme: new SciChartJsNavyTheme()
+  })
+  const { sciChartSurface, wasmContext } = chart
+
+  xAxes.forEach((axis, index) => {
+    const { axisTitle, barSpacing, categorySpacing, barPercentage, ticks } = axis
+    const { autoMax, autoMin } = ticks || {}
+    const id = xAxes.length > 1 ? `x${index + 1}` : 'x'
+
+    const xAxis = new DateTimeNumericAxis(wasmContext, {
+      axisTitle,
+      autoRange: EAutoRange.Always,
+      axisAlignment: EAxisAlignment.Bottom
+
+      // visibleRange: new NumberRange(minDate.getTime() / 1000, maxDate.getTime() / 1000)
+    })
+
+    sciChartSurface.xAxes.add(xAxis)
+  })
+
+  yAxes.forEach((axis, index) => {
+    const { axisTitle, barSpacing, categorySpacing, barPercentage, ticks } = axis
+    const { autoMax, autoMin } = ticks || {}
+
+    const id = yAxes.length > 1 ? `right` : 'left'
+
+    const yAxis = new NumericAxis(wasmContext, {
+      axisTitle,
+      autoRange: EAutoRange.Always,
+      axisAlignment: yAxes.length > 1 ? EAxisAlignment.Right : EAxisAlignment.Left
+    })
+    sciChartSurface.yAxes.add(yAxis)
+  })
+
+  const dataSeries = new XyDataSeries(wasmContext)
+
+  const lineSeries = new FastLineRenderableSeries(wasmContext)
+  lineSeries.strokeThickness = 2
+  lineSeries.stroke = '#FF6600'
+  lineSeries.dataSeries = dataSeries
+
+  sciChartSurface.renderableSeries.add(lineSeries)
+
+  return { chart, dataSeries }
+}

package/src/types.d.ts

@@ -0,0 +1,74 @@
+declare namespace OperatoChart {
+  export interface ChartConfig {
+    data: ChartData
+    options?: ChartOptions
+    type?: string
+  }
+
+  export interface ChartData {
+    labels?: Array<string | string[]>
+    datasets: Dataset[]
+    labelDataKey?: string
+  }
+
+  export interface Dataset {
+    label?: string
+    data?: any[]
+    borderWidth?: number
+    dataKey?: string
+    yAxisID?: string
+    color?: string | string[]
+    type?: 'bar' | 'horizontalBar' | 'line' | 'radar' | 'pie' | 'mixed'
+    backgroundColor?: string | string[]
+    stack?: string
+    fill?: boolean
+    lineTension?: number
+    pointStyle?: string
+    pointRadius?: number
+    valuePrefix?: string
+    valueSuffix?: string
+    displayValue?: boolean
+    [key: string]: any
+  }
+
+  export interface ChartOptions {
+    theme?: 'dark' | 'light'
+    tooltip?: boolean
+    animation?: boolean
+    legend?: LegendOptions
+    scales?: ScalesOptions
+    stacked?: boolean
+    xGridLine?: boolean
+    yGridLine?: boolean
+    y2ndGridLine?: boolean
+    multiAxis?: boolean
+  }
+
+  export interface LegendOptions {
+    display?: boolean
+    position?: 'top' | 'right' | 'bottom' | 'left'
+  }
+
+  export interface ScalesOptions {
+    xAxes?: AxisOptions[]
+    yAxes?: AxisOptions[]
+  }
+
+  export interface AxisOptions {
+    axisTitle?: string
+    barSpacing?: number
+    categorySpacing?: number
+    barPercentage?: number
+    ticks?: TickOptions
+  }
+
+  export interface TickOptions {
+    display?: boolean
+    autoMin?: boolean
+    autoMax?: boolean
+    min?: number
+    max?: number
+    stepSize?: number
+    beginAtZero?: boolean
+  }
+}

package/stories/common.ts

@@ -0,0 +1,47 @@
+export function getDefaultChartConfig(
+  type: 'bar' | 'line' | 'pie' | 'radar' | 'mixed',
+  datasets?: OperatoChart.Dataset[]
+): OperatoChart.ChartConfig {
+  return {
+    data: {
+      datasets: datasets || [],
+      labelDataKey: ''
+    },
+    options: {
+      theme: 'light',
+      tooltip: true,
+      animation: true,
+      legend: {
+        display: true,
+        position: 'top'
+      },
+      scales: {
+        xAxes: [getDefaultAxisOptions()],
+        yAxes: [getDefaultAxisOptions(), getDefaultAxisOptions()] // Two y-axes for multi-axis support
+      },
+      stacked: false,
+      xGridLine: true,
+      yGridLine: true,
+      y2ndGridLine: false,
+      multiAxis: false
+    },
+    type
+  }
+}
+
+export function getDefaultAxisOptions(): OperatoChart.AxisOptions {
+  return {
+    axisTitle: '',
+    barSpacing: 0,
+    categorySpacing: 0,
+    barPercentage: 0.9,
+    ticks: {
+      display: true,
+      autoMin: true,
+      autoMax: true,
+      min: undefined,
+      max: undefined,
+      stepSize: undefined
+    }
+  }
+}

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

@@ -0,0 +1,185 @@
+import { html, TemplateResult } from 'lit'
+
+import '../src/editors/ox-input-chart-hbar.js'
+import '../src/chartjs/ox-chart-js.js'
+import '../src/scichart/ox-scichart.js'
+import { convertConfigure } from '../src/chartjs/config-converter.js'
+
+import { getDefaultChartConfig } from './common.js'
+
+export default {
+  title: 'ox-input-chart-hbar',
+  component: 'ox-input-chart-hbar',
+  argTypes: {
+    value: { control: 'object' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  value: OperatoChart.ChartConfig
+}
+
+const Template: Story<ArgTypes> = ({ value }: ArgTypes) => html`
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+
+  <link href="/themes/light.css" rel="stylesheet" />
+  <link href="/themes/dark.css" rel="stylesheet" />
+  <link href="/themes/spacing.css" rel="stylesheet" />
+
+  <style>
+    .container {
+      width: 100%;
+      height: 100%;
+
+      display: flex;
+      flex-direction: row;
+      overflow-y: auto;
+      padding: var(--spacing-medium);
+    }
+
+    .container.dark {
+      background-color: black;
+    }
+
+    #editor {
+      width: 300px;
+    }
+
+    #charts {
+      flex: 1;
+
+      display: flex;
+      flex-direction: column;
+      padding: 10px;
+    }
+
+    #chartjs {
+      flex: 1;
+    }
+
+    #scichart {
+      flex: 1;
+    }
+  </style>
+
+  <div class="container light">
+    <ox-input-chart-hbar
+      id="editor"
+      .value=${value}
+      @change=${async (e: CustomEvent) => {
+        const target = e.currentTarget as any
+        const config = target.value
+        const chartjs = document.querySelector('#chartjs') as HTMLElement
+        if (chartjs) {
+          ;(chartjs as any).config = convertConfigure(config, {})
+        }
+        const scichart = document.querySelector('#scichart') as HTMLElement
+        if (scichart) {
+          ;(scichart as any).config = config
+        }
+
+        const container = document.querySelector('.container') as HTMLElement
+        if (container) {
+          const theme = config.options.theme
+          if (theme == 'dark') {
+            container.classList.remove('light')
+            container.classList.add('dark')
+          } else {
+            container.classList.remove('dark')
+            container.classList.add('light')
+          }
+        }
+      }}
+    ></ox-input-chart-hbar>
+    <div id="charts">
+      <ox-chart-js id="chartjs"></ox-chart-js>
+      <ox-scichart id="scichart"></ox-scichart>
+    </div>
+  </div>
+`
+
+export const Default = Template.bind({})
+Default.args = {}
+
+// 다양한 데이터셋과 함께 사용하는 스토리
+export const WithData = Template.bind({})
+WithData.args = {
+  value: {
+    ...getDefaultChartConfig('bar'),
+    data: {
+      datasets: [
+        {
+          label: 'Series 1',
+          data: [10, 20, 30],
+          backgroundColor: 'rgba(255, 99, 132, 0.2)',
+          borderColor: 'rgba(255, 99, 132, 1)',
+          borderWidth: 1
+        },
+        {
+          label: 'Series 2',
+          data: [15, 25, 35],
+          backgroundColor: 'rgba(54, 162, 235, 0.2)',
+          borderColor: 'rgba(54, 162, 235, 1)',
+          borderWidth: 1
+        }
+      ],
+      labelDataKey: 'labels'
+    },
+    options: {
+      scales: {
+        xAxes: [{ ticks: { beginAtZero: true } }],
+        yAxes: [{ ticks: { beginAtZero: true } }]
+      },
+      legend: { display: true }
+    }
+  }
+}
+
+export const MultiAxis = Template.bind({})
+MultiAxis.args = {
+  value: {
+    ...getDefaultChartConfig('bar'),
+    options: {
+      ...getDefaultChartConfig('bar').options,
+      multiAxis: true
+    },
+    data: {
+      datasets: [
+        {
+          label: 'Series 1',
+          data: [10, 20, 30],
+          backgroundColor: 'rgba(255, 99, 132, 0.2)',
+          borderColor: 'rgba(255, 99, 132, 1)',
+          borderWidth: 1,
+          yAxisID: 'left'
+        },
+        {
+          label: 'Series 2',
+          data: [15, 25, 35],
+          backgroundColor: 'rgba(54, 162, 235, 0.2)',
+          borderColor: 'rgba(54, 162, 235, 1)',
+          borderWidth: 1,
+          yAxisID: 'right'
+        }
+      ],
+      labelDataKey: 'labels'
+    }
+  }
+}