@operato/chart 7.0.0 → 7.0.2

package/src/scichart/scichart-builder.ts

@@ -1,87 +1,325 @@
+import { TinyColor } from '@ctrl/tinycolor'
+import { format as formatText } from '../utils/text-formatter'
+
+function getBaseColorFromTheme(theme?: 'light' | 'dark' | 'auto') {
+  return new TinyColor(theme == 'dark' ? '#fff' : '#000')
+}
+
+function getThemeFromBrowser() {
+  return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+}
+
 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> {
+): Promise<{ chart: any; dataSeries: any[] } | undefined> {
   if (!config) {
     return
   }
 
   const {
     SciChartSurface,
-    SciChartDefaults,
-    chartBuilder,
-    SciChartJsNavyTheme,
+    SciChartJSLightTheme,
+    SciChartJSDarkv2Theme,
     XyDataSeries,
     FastLineRenderableSeries,
-    NumberRange,
+    SplineLineRenderableSeries,
+    FastColumnRenderableSeries,
+    StackedColumnRenderableSeries,
+    StackedMountainRenderableSeries,
+    StackedColumnCollection,
+    StackedMountainCollection,
+    NumericAxis,
+    DateTimeNumericAxis,
     EAutoRange,
     EAxisAlignment,
-    NumericAxis,
-    DateTimeNumericAxis
+    NumberRange,
+    MouseWheelZoomModifier,
+    RubberBandXyZoomModifier,
+    ZoomExtentsModifier,
+    RolloverModifier,
+    SmartDateLabelProvider,
+    EllipsePointMarker,
+    SquarePointMarker,
+    TrianglePointMarker,
+    CrossPointMarker,
+    XPointMarker,
+    WaveAnimation,
+    LegendModifier
   } = SciChart
 
   const { type: chartType, options, data: fromData } = config
-  const {
+  const { datasets = [] } = fromData || {}
+  var {
     theme,
-    animation,
     tooltip,
-    stacked,
+    animation,
     legend,
     scales: fromScales,
     xGridLine,
     yGridLine,
     y2ndGridLine,
-    multiAxis
+    stacked
   } = options || {}
-  const { datasets = [] } = fromData || {}
+
+  var baseColor = getBaseColorFromTheme(theme)
+
+  if (theme === 'auto') {
+    theme = getThemeFromBrowser()
+  }
+
+  fontColor = fontColor || baseColor.clone().toString()
 
   const { xAxes = [], yAxes = [] } = fromScales || {}
-  const toScales = {} as any
 
   const chart = await SciChartSurface.create(container, {
-    theme: new SciChartJsNavyTheme()
+    theme: theme == 'dark' ? new SciChartJSDarkv2Theme() : new SciChartJSLightTheme()
   })
   const { sciChartSurface, wasmContext } = chart
 
+  // X 축 설정
   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 { axisTitle, ticks } = axis
+    const {
+      autoMax,
+      autoMin,
+      min,
+      max,
+      stepSize,
+      beginAtZero,
+      color = fontColor,
+      textStrokeColor = fontColor,
+      display = !!axisTitle
+    } = ticks || {}
 
     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
+      },
+      axisTitleStyle: {
+        fontFamily,
+        fontSize,
+        color: textStrokeColor
+      },
+      labelProvider: new SmartDateLabelProvider()
     })
 
     sciChartSurface.xAxes.add(xAxis)
   })
 
+  // Y 축 설정
   yAxes.forEach((axis, index) => {
-    const { axisTitle, barSpacing, categorySpacing, barPercentage, ticks } = axis
-    const { autoMax, autoMin } = ticks || {}
-
-    const id = yAxes.length > 1 ? `right` : 'left'
+    const { axisTitle, ticks } = axis
+    const { autoMax, autoMin, min, max, stepSize, beginAtZero } = ticks || {}
 
     const yAxis = new NumericAxis(wasmContext, {
+      id: `yAxis${index}`,
       axisTitle,
-      autoRange: EAutoRange.Always,
-      axisAlignment: yAxes.length > 1 ? EAxisAlignment.Right : EAxisAlignment.Left
+      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,
+      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
+    })
+
+    const yAxisId = dataset.yAxisID || 'yAxis0'
+    const stackGroupId = dataset.stack || `__stack${index}__`
+
+    let series: any
+    if (dataset.type === 'bar') {
+      if (stacked) {
+        series = new StackedColumnRenderableSeries(wasmContext, {
+          dataSeries,
+          strokeThickness: dataset.borderWidth || 2,
+          fill: dataset.backgroundColor || '#FF6600',
+          yAxisId,
+          stackedGroupId: stackGroupId
+        })
+      } else {
+        series = new FastColumnRenderableSeries(wasmContext, {
+          dataSeries,
+          strokeThickness: dataset.borderWidth || 2,
+          fill: dataset.backgroundColor || '#FF6600',
+          animation: animation && new WaveAnimation({ duration: 1000, fadeEffect: true }),
+          yAxisId
+        })
+      }
+    } else {
+      const { pointStyle, lineTension } = dataset
+      let pointMarker
+
+      switch (pointStyle) {
+        case 'circle':
+          pointMarker = new EllipsePointMarker(wasmContext, {
+            width: 10,
+            height: 10,
+            strokeThickness: 2,
+            fill: dataset.color || '#FF6600',
+            stroke: '#000000'
+          })
+          break
+        case 'triangle':
+          pointMarker = new TrianglePointMarker(wasmContext, {
+            width: 10,
+            height: 10,
+            strokeThickness: 2,
+            fill: dataset.color || '#FF6600',
+            stroke: '#000000'
+          })
+          break
+        case 'rect':
+          pointMarker = new SquarePointMarker(wasmContext, {
+            width: 10,
+            height: 10,
+            strokeThickness: 2,
+            fill: dataset.color || '#FF6600',
+            stroke: '#000000'
+          })
+          break
+        case 'cross':
+          pointMarker = new CrossPointMarker(wasmContext, {
+            width: 10,
+            height: 10,
+            strokeThickness: 2,
+            fill: dataset.color || '#FF6600',
+            stroke: '#000000'
+          })
+          break
+        case 'crossRot':
+          pointMarker = new XPointMarker(wasmContext, {
+            width: 10,
+            height: 10,
+            strokeThickness: 2,
+            fill: dataset.color || '#FF6600',
+            stroke: '#000000'
+          })
+          break
+        default:
+          pointMarker = new EllipsePointMarker(wasmContext, {
+            width: 10,
+            height: 10,
+            strokeThickness: 2,
+            fill: dataset.color || '#FF6600',
+            stroke: '#000000'
+          })
+      }
 
-  const lineSeries = new FastLineRenderableSeries(wasmContext)
-  lineSeries.strokeThickness = 2
-  lineSeries.stroke = '#FF6600'
-  lineSeries.dataSeries = dataSeries
+      if (stacked) {
+        series = new StackedMountainRenderableSeries(wasmContext, {
+          dataSeries,
+          strokeThickness: dataset.borderWidth || 2,
+          stroke: dataset.color || '#FF6600',
+          fill: dataset.backgroundColor || '#FF6600',
+          yAxisId,
+          stackedGroupId: stackGroupId
+        })
+      } else {
+        series =
+          !!lineTension && lineTension > 0
+            ? new SplineLineRenderableSeries(wasmContext, {
+                dataSeries,
+                strokeThickness: dataset.borderWidth || 2,
+                stroke: dataset.color || '#FF6600',
+                pointMarker,
+                animation: animation && new WaveAnimation({ duration: 1000, fadeEffect: true }),
+                yAxisId
+              })
+            : new FastLineRenderableSeries(wasmContext, {
+                dataSeries,
+                strokeThickness: dataset.borderWidth || 2,
+                stroke: dataset.color || '#FF6600',
+                pointMarker,
+                animation: animation && new WaveAnimation({ duration: 1000, fadeEffect: true }),
+                yAxisId
+              })
+      }
+    }
+
+    sciChartSurface.renderableSeries.add(series)
+
+    if (tooltip) {
+      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)
+  // Stacked collections 추가
+  if (stacked) {
+    const stackedColumnCollection = new StackedColumnCollection(wasmContext)
+    const stackedMountainCollection = new StackedMountainCollection(wasmContext)
+
+    sciChartSurface.renderableSeries.asArray().forEach((series: any) => {
+      if (series instanceof StackedColumnRenderableSeries) {
+        stackedColumnCollection.add(series)
+      } else if (series instanceof StackedMountainRenderableSeries) {
+        stackedMountainCollection.add(series)
+      }
+    })
+
+    if (stackedColumnCollection.size() > 0) {
+      sciChartSurface.renderableSeries.add(stackedColumnCollection)
+    }
+
+    if (stackedMountainCollection.size() > 0) {
+      sciChartSurface.renderableSeries.add(stackedMountainCollection)
+    }
+  }
+
+  // 줌인/줌아웃 모디파이어 추가
+  sciChartSurface.chartModifiers.add(
+    new RubberBandXyZoomModifier(),
+    new MouseWheelZoomModifier(),
+    new ZoomExtentsModifier()
+  )
+
+  // Legend 설정
+  if (legend?.display) {
+    const legendModifier = new LegendModifier({
+      showCheckboxes: true,
+      showSeriesMarkers: true,
+      showLegend: true,
+      placement: legend.position || 'bottom-right'
+    })
+    sciChartSurface.chartModifiers.add(legendModifier)
+  }
 
-  return { chart, dataSeries }
+  return { chart, dataSeries: dataSeriesArray }
 }

package/src/types.d.ts

@@ -24,7 +24,17 @@ declare namespace OperatoChart {
     stack?: string
     fill?: boolean
     lineTension?: number
-    pointStyle?: string
+    pointStyle?:
+      | 'circle'
+      | 'triangle'
+      | 'rect'
+      | 'rectRot'
+      | 'cross'
+      | 'crossRot'
+      | 'star'
+      | 'line'
+      | 'dash'
+      | undefined
     pointRadius?: number
     valuePrefix?: string
     valueSuffix?: string
@@ -34,7 +44,7 @@ declare namespace OperatoChart {
   }
 
   export interface ChartOptions {
-    theme?: 'dark' | 'light'
+    theme?: 'dark' | 'light' | 'auto'
     tooltip?: boolean
     animation?: boolean
     legend?: LegendOptions
@@ -74,5 +84,7 @@ declare namespace OperatoChart {
     max?: number
     stepSize?: number
     beginAtZero?: boolean
+    color?: string
+    textStrokeColor?: string
   }
 }

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()) // 현재 시간을 Unix 타임스탬프로 설정
+
+  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 사이로 랜덤 생성
+
+    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="desc">Type 'count' or 'average' for series dataKey, type 'timestamp' for axis's dataKey</div>
 
   <div class="container">
-    <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
-        }
-
-        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>
+    <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">