@operato/chart 7.0.0-rc.9 → 7.0.1

package/src/scichart/ox-scichart.ts

@@ -2,7 +2,6 @@ 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
@@ -18,7 +17,7 @@ class OxSciChart extends LitElement {
   @property({ type: String, attribute: 'attr-y' }) attrY: string = 'y'
 
   private chart: any = null
-  dataSeries?: any
+  private dataSeries: any[] = []
 
   @query('div#container') container!: HTMLDivElement
 
@@ -65,7 +64,7 @@ class OxSciChart extends LitElement {
     const { chart, dataSeries } = (await buildSciChart(this.config, this.container, {})) || {}
 
     this.chart = chart
-    this.dataSeries = dataSeries
+    this.dataSeries = dataSeries!
 
     this.updateDataSeries()
   }
@@ -82,45 +81,50 @@ class OxSciChart extends LitElement {
   }
 
   updateDataSeries() {
-    if (!this.dataSeries) return
+    if (!this.dataSeries?.length) return
 
-    this.dataSeries.clear()
+    this.dataSeries.forEach(ds => ds.clear())
     const newData = this.dataSet
 
-    this.dataSeries.appendRange(
-      newData.map(d => d.xValue),
-      newData.map(d => d.yValue)
-    )
+    newData.forEach((data, index) => {
+      this.dataSeries[index].appendRange(
+        data.map(d => d.xValue),
+        data.map(d => d.yValue)
+      )
+    })
 
     this.chart?.sciChartSurface.zoomExtents()
     this.chart?.sciChartSurface.invalidateElement()
   }
 
-  get dataSet(): { xValue: number; yValue: number }[] {
-    const { attrX, attrY, data } = this
+  get dataSet(): { xValue: number; yValue: number }[][] {
+    const { attrX, data } = this
+    const datasets = this.config?.data?.datasets || []
 
     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 }[]
+    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() {

package/src/scichart/scichart-builder.ts

@@ -1,87 +1,141 @@
+import { TinyColor } from '@ctrl/tinycolor'
+import { format as formatText } from '../utils/text-formatter'
+
 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> {
+  { fontSize, fontFamily, fontColor = 'red' }: { fontSize?: number; fontFamily?: string; fontColor?: string }
+): Promise<{ chart: any; dataSeries: any[] } | undefined> {
   if (!config) {
     return
   }
 
   const {
     SciChartSurface,
-    SciChartDefaults,
-    chartBuilder,
     SciChartJsNavyTheme,
     XyDataSeries,
     FastLineRenderableSeries,
-    NumberRange,
+    FastColumnRenderableSeries,
+    NumericAxis,
+    DateTimeNumericAxis,
     EAutoRange,
     EAxisAlignment,
-    NumericAxis,
-    DateTimeNumericAxis
+    NumberRange,
+    MouseWheelZoomModifier,
+    RubberBandXyZoomModifier,
+    ZoomExtentsModifier,
+    RolloverModifier
   } = SciChart
 
   const { type: chartType, options, data: fromData } = config
-  const {
-    theme,
-    animation,
-    tooltip,
-    stacked,
-    legend,
-    scales: fromScales,
-    xGridLine,
-    yGridLine,
-    y2ndGridLine,
-    multiAxis
-  } = options || {}
+  const { theme, legend, scales: fromScales, xGridLine, yGridLine, y2ndGridLine } = 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
 
+  // X 축 설정
   xAxes.forEach((axis, index) => {
-    const { axisTitle, barSpacing, categorySpacing, barPercentage, ticks } = axis
-    const { autoMax, autoMin } = ticks || {}
+    const { axisTitle, ticks } = axis
+    const { autoMax, autoMin, min, max, stepSize, beginAtZero } = 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)
+      autoRange: autoMin || autoMax ? EAutoRange.Always : undefined,
+      axisAlignment: EAxisAlignment.Bottom,
+      visibleRange: min !== undefined && max !== undefined ? new NumberRange(min, max) : undefined,
+      majorDelta: stepSize,
+      growBy: beginAtZero ? new NumberRange(0.1, 0.1) : undefined,
+      labelStyle: {
+        fontFamily,
+        fontSize,
+        color: fontColor
+      },
+      axisTitleStyle: {
+        fontFamily,
+        fontSize,
+        color: fontColor
+      }
     })
 
     sciChartSurface.xAxes.add(xAxis)
   })
 
+  // Y 축 설정
   yAxes.forEach((axis, index) => {
-    const { axisTitle, barSpacing, categorySpacing, barPercentage, ticks } = axis
-    const { autoMax, autoMin } = ticks || {}
-
+    const { axisTitle, ticks } = axis
+    const { autoMax, autoMin, min, max, stepSize, beginAtZero } = 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
+      autoRange: autoMin || autoMax ? EAutoRange.Always : undefined,
+      axisAlignment: yAxes.length > 1 ? EAxisAlignment.Right : EAxisAlignment.Left,
+      visibleRange: min !== undefined && max !== undefined ? new NumberRange(min, max) : undefined,
+      majorDelta: stepSize,
+      growBy: beginAtZero ? new NumberRange(0.1, 0.1) : undefined,
+      labelStyle: {
+        fontFamily,
+        fontSize,
+        color: fontColor
+      },
+      axisTitleStyle: {
+        fontFamily,
+        fontSize,
+        color: fontColor
+      }
     })
     sciChartSurface.yAxes.add(yAxis)
   })
 
-  const dataSeries = new XyDataSeries(wasmContext)
+  // 시리즈 설정
+  const dataSeriesArray = datasets.map((dataset, index) => {
+    const dataSeries = new XyDataSeries(wasmContext, {
+      dataSeriesName: dataset.label,
+      containsNaN: false
+    })
+
+    let series: any
+    if (dataset.type === 'bar') {
+      series = new FastColumnRenderableSeries(wasmContext, {
+        dataSeries,
+        strokeThickness: dataset.borderWidth || 2,
+        fill: dataset.backgroundColor || '#FF6600'
+      })
+    } else {
+      series = new FastLineRenderableSeries(wasmContext, {
+        dataSeries,
+        strokeThickness: dataset.borderWidth || 2,
+        stroke: dataset.color || '#FF6600'
+      })
+    }
 
-  const lineSeries = new FastLineRenderableSeries(wasmContext)
-  lineSeries.strokeThickness = 2
-  lineSeries.stroke = '#FF6600'
-  lineSeries.dataSeries = dataSeries
+    sciChartSurface.renderableSeries.add(series)
+
+    const rolloverModifier = new RolloverModifier({
+      showTooltip: true,
+      showAxisLabels: true,
+      tooltipColor: 'white',
+      tooltipBackgroundColor: 'rgba(0, 0, 0, 0.7)',
+      rollOverDataSeries: dataSeries
+    })
+
+    sciChartSurface.chartModifiers.add(rolloverModifier)
+
+    return dataSeries
+  })
 
-  sciChartSurface.renderableSeries.add(lineSeries)
+  // 줌인/줌아웃 모디파이어 추가
+  sciChartSurface.chartModifiers.add(
+    new RubberBandXyZoomModifier(),
+    new MouseWheelZoomModifier(),
+    new ZoomExtentsModifier()
+  )
 
-  return { chart, dataSeries }
+  return { chart, dataSeries: dataSeriesArray }
 }

package/stories/common.ts

@@ -46,12 +46,39 @@ export function getDefaultAxisOptions(): OperatoChart.AxisOptions {
   }
 }
 
-export const data = [
-  { year: 2010, count: 10, average: 120 },
-  { year: 2011, count: 20, average: 110 },
-  { year: 2012, count: 15, average: 80 },
-  { year: 2013, count: 25, average: 130 },
-  { year: 2014, count: 22, average: 120 },
-  { year: 2015, count: 30, average: 60 },
-  { year: 2016, count: 28, average: 90 }
-]
+// export const data = [
+//   { timestamp: 2010, count: 10, average: 120 },
+//   { timestamp: 2011, count: 20, average: 110 },
+//   { timestamp: 2012, count: 15, average: 80 },
+//   { timestamp: 2013, count: 25, average: 130 },
+//   { timestamp: 2014, count: 22, average: 120 },
+//   { timestamp: 2015, count: 30, average: 60 },
+//   { timestamp: 2016, count: 28, average: 90 }
+// ]
+// 랜덤한 범위의 숫자를 생성하는 함수
+function getRandomInRange(min: number, max: number) {
+  return Math.floor(Math.random() * (max - min + 1)) + min
+}
+
+// 랜덤 데이터를 생성하는 함수
+function generateRandomData(count: number) {
+  const randomData = []
+  const startTimestamp = Math.floor(Date.now() / 1000) // 현재 시간을 Unix 타임스탬프로 설정
+
+  for (let i = 0; i < count; i++) {
+    const timestamp = startTimestamp + i * 3 // 3초씩 증가하는 타임스탬프 설정
+    const randomCount = getRandomInRange(5, 35) // count 값을 5에서 35 사이로 랜덤 생성
+    const randomAverage = getRandomInRange(50, 150) // average 값을 50에서 150 사이로 랜덤 생성
+
+    randomData.push({
+      timestamp: timestamp,
+      count: randomCount,
+      average: randomAverage
+    })
+  }
+
+  return randomData
+}
+
+// 100개의 랜덤 데이터를 생성
+export const data = generateRandomData(100)

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

@@ -24,6 +24,19 @@ interface ArgTypes {
   value: OperatoChart.ChartConfig
 }
 
+function showCharts(e: Event) {
+  const target = e.currentTarget as any
+  const config = target.value
+  const chartjs = document.querySelector('#chartjs') as HTMLElement
+  if (chartjs) {
+    ;(chartjs as any).config = { ...config }
+  }
+  const scichart = document.querySelector('#scichart') as HTMLElement
+  if (scichart) {
+    ;(scichart as any).config = config
+  }
+}
+
 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"
@@ -43,18 +56,21 @@ const Template: Story<ArgTypes> = ({ value }: ArgTypes) => html`
   <link href="/themes/spacing.css" rel="stylesheet" />
 
   <style>
-    .container {
-      width: 100%;
-      height: 100%;
+    .desc {
+      color: var(--md-sys-color-background);
+      background-color: var(--md-sys-color-on-background);
+      padding: var(--spacing-small);
+    }
 
+    .container {
       display: flex;
       flex-direction: row;
       overflow-y: auto;
       padding: var(--spacing-medium);
-    }
+      gap: var(--spacing-medium);
 
-    .container.dark {
-      background-color: black;
+      color: var(--md-sys-color-on-background);
+      background-color: var(--md-sys-color-background);
     }
 
     #editor {
@@ -66,7 +82,7 @@ const Template: Story<ArgTypes> = ({ value }: ArgTypes) => html`
 
       display: flex;
       flex-direction: column;
-      padding: 10px;
+      gap: var(--spacing-medium);
     }
 
     #chartjs {
@@ -78,40 +94,10 @@ const Template: Story<ArgTypes> = ({ value }: ArgTypes) => html`
     }
   </style>
 
-  <div style="background-color: black; color: white;">
-    Type 'count' or 'average' for series dataKey, type 'year' for axis's dataKey
-  </div>
-
-  <div class="container light">
-    <ox-input-chart-mixed
-      chart-type="bar"
-      id="editor"
-      .value=${value}
-      @change=${(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 = { ...config }
-        }
-        const scichart = document.querySelector('#scichart') as HTMLElement
-        if (scichart) {
-          ;(scichart as any).config = config
-        }
+  <div class="desc">Type 'count' or 'average' for series dataKey, type 'timestamp' for axis's dataKey</div>
 
-        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-mixed>
+  <div class="container">
+    <ox-input-chart-mixed chart-type="bar" id="editor" .value=${value} @change=${showCharts}></ox-input-chart-mixed>
     <div id="charts">
       <ox-chart-js id="chartjs" .data=${data}></ox-chart-js>
       <ox-scichart id="scichart"></ox-scichart>
@@ -135,7 +121,7 @@ WithData.args = {
         {
           label: 'Bar Series',
           type: 'bar',
-          // data: [10, 20, 30],
+          dataKey: 'count',
           backgroundColor: 'rgba(255, 99, 132, 0.2)',
           borderColor: 'rgba(255, 99, 132, 1)',
           borderWidth: 1
@@ -143,7 +129,7 @@ WithData.args = {
         {
           label: 'Line Series',
           type: 'line',
-          // data: [15, 25, 35],
+          dataKey: 'average',
           borderColor: 'rgba(54, 162, 235, 1)',
           borderWidth: 1,
           fill: false,
@@ -152,7 +138,7 @@ WithData.args = {
           pointRadius: 3
         }
       ],
-      labelDataKey: 'labels'
+      labelDataKey: 'timestamp'
     },
     options: {
       scales: {
@@ -177,7 +163,7 @@ MultiAxis.args = {
         {
           label: 'Bar Series',
           type: 'bar',
-          // data: [10, 20, 30],
+          dataKey: 'count',
           backgroundColor: 'rgba(255, 99, 132, 0.2)',
           borderColor: 'rgba(255, 99, 132, 1)',
           borderWidth: 1,
@@ -186,7 +172,7 @@ MultiAxis.args = {
         {
           label: 'Line Series',
           type: 'line',
-          // data: [15, 25, 35],
+          dataKey: 'average',
           borderColor: 'rgba(54, 162, 235, 1)',
           borderWidth: 1,
           fill: false,
@@ -196,7 +182,7 @@ MultiAxis.args = {
           yAxisID: 'right'
         }
       ],
-      labelDataKey: 'labels'
+      labelDataKey: 'timestamp'
     }
   }
 }

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

@@ -68,7 +68,7 @@ const Template: Story<ArgTypes> = ({ value, currentSeriesIndex }: ArgTypes) => h
   </style>
 
   <div style="background-color: black; color: white;">
-    Type 'count' or 'average' for series dataKey, type 'year' for axis's dataKey
+    Type 'count' or 'average' for series dataKey, type 'timestamp' for axis's dataKey
   </div>
 
   <div class="container light">

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

@@ -79,7 +79,7 @@ const Template: Story<ArgTypes> = ({ value }: ArgTypes) => html`
   </style>
 
   <div style="background-color: black; color: white;">
-    Type 'count' or 'average' for series dataKey, type 'year' for axis's dataKey
+    Type 'count' or 'average' for series dataKey, type 'timestamp' for axis's dataKey
   </div>
   <div class="container light">
     <ox-input-chart-hbar

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

@@ -79,7 +79,7 @@ const Template: Story<ArgTypes> = ({ value }: ArgTypes) => html`
   </style>
 
   <div style="background-color: black; color: white;">
-    Type 'count' or 'average' for series dataKey, type 'year' for axis's dataKey
+    Type 'count' or 'average' for series dataKey, type 'timestamp' for axis's dataKey
   </div>
 
   <div class="container light">

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

@@ -68,7 +68,7 @@ const Template: Story<ArgTypes> = ({ value, currentSeriesIndex }: ArgTypes) => h
   </style>
 
   <div style="background-color: black; color: white;">
-    Type 'count' or 'average' for series dataKey, type 'year' for axis's dataKey
+    Type 'count' or 'average' for series dataKey, type 'timestamp' for axis's dataKey
   </div>
 
   <div class="container light">

package/stories/ox-input-chart-polar-area.stories.ts

@@ -68,7 +68,7 @@ const Template: Story<ArgTypes> = ({ value, currentSeriesIndex }: ArgTypes) => h
   </style>
 
   <div style="background-color: black; color: white;">
-    Type 'count' or 'average' for series dataKey, type 'year' for axis's dataKey
+    Type 'count' or 'average' for series dataKey, type 'timestamp' for axis's dataKey
   </div>
 
   <div class="container light">

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

@@ -68,7 +68,7 @@ const Template: Story<ArgTypes> = ({ value, currentSeriesIndex }: ArgTypes) => h
   </style>
 
   <div style="background-color: black; color: white;">
-    Type 'count' or 'average' for series dataKey, type 'year' for axis's dataKey
+    Type 'count' or 'average' for series dataKey, type 'timestamp' for axis's dataKey
   </div>
 
   <div class="container light">