@operato/chart 7.0.1 → 7.0.4

package/src/scichart/scichart-builder.ts

@@ -1,10 +1,18 @@
 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 = 'red' }: { fontSize?: number; fontFamily?: string; fontColor?: string }
+  { fontSize, fontFamily, fontColor }: { fontSize?: number; fontFamily?: string; fontColor?: string }
 ): Promise<{ chart: any; dataSeries: any[] } | undefined> {
   if (!config) {
     return
@@ -12,10 +20,16 @@ export async function buildSciChart(
 
   const {
     SciChartSurface,
-    SciChartJsNavyTheme,
+    SciChartJSLightTheme,
+    SciChartJSDarkv2Theme,
     XyDataSeries,
     FastLineRenderableSeries,
+    SplineLineRenderableSeries,
     FastColumnRenderableSeries,
+    StackedColumnRenderableSeries,
+    StackedMountainRenderableSeries,
+    StackedColumnCollection,
+    StackedMountainCollection,
     NumericAxis,
     DateTimeNumericAxis,
     EAutoRange,
@@ -24,25 +38,60 @@ export async function buildSciChart(
     MouseWheelZoomModifier,
     RubberBandXyZoomModifier,
     ZoomExtentsModifier,
-    RolloverModifier
+    RolloverModifier,
+    SmartDateLabelProvider,
+    EllipsePointMarker,
+    SquarePointMarker,
+    TrianglePointMarker,
+    CrossPointMarker,
+    XPointMarker,
+    WaveAnimation,
+    LegendModifier
   } = SciChart
 
   const { type: chartType, options, data: fromData } = config
-  const { theme, legend, scales: fromScales, xGridLine, yGridLine, y2ndGridLine } = options || {}
   const { datasets = [] } = fromData || {}
+  var {
+    theme,
+    tooltip,
+    animation,
+    legend,
+    scales: fromScales,
+    xGridLine,
+    yGridLine,
+    y2ndGridLine,
+    stacked
+  } = options || {}
+
+  var baseColor = getBaseColorFromTheme(theme)
+
+  if (theme === 'auto') {
+    theme = getThemeFromBrowser()
+  }
+
+  fontColor = fontColor || baseColor.clone().toString()
 
   const { xAxes = [], yAxes = [] } = fromScales || {}
 
   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, ticks } = axis
-    const { autoMax, autoMin, min, max, stepSize, beginAtZero } = ticks || {}
-    const id = xAxes.length > 1 ? `x${index + 1}` : 'x'
+    const {
+      autoMax,
+      autoMin,
+      min,
+      max,
+      stepSize,
+      beginAtZero,
+      color = fontColor,
+      textStrokeColor = fontColor,
+      display = !!axisTitle
+    } = ticks || {}
 
     const xAxis = new DateTimeNumericAxis(wasmContext, {
       axisTitle,
@@ -54,13 +103,14 @@ export async function buildSciChart(
       labelStyle: {
         fontFamily,
         fontSize,
-        color: fontColor
+        color
       },
       axisTitleStyle: {
         fontFamily,
         fontSize,
-        color: fontColor
-      }
+        color: textStrokeColor
+      },
+      labelProvider: new SmartDateLabelProvider()
     })
 
     sciChartSurface.xAxes.add(xAxis)
@@ -70,12 +120,12 @@ export async function buildSciChart(
   yAxes.forEach((axis, index) => {
     const { axisTitle, ticks } = axis
     const { autoMax, autoMin, min, max, stepSize, beginAtZero } = ticks || {}
-    const id = yAxes.length > 1 ? `right` : 'left'
 
     const yAxis = new NumericAxis(wasmContext, {
+      id: `yAxis${index}`,
       axisTitle,
       autoRange: autoMin || autoMax ? EAutoRange.Always : undefined,
-      axisAlignment: yAxes.length > 1 ? EAxisAlignment.Right : EAxisAlignment.Left,
+      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,
@@ -90,6 +140,7 @@ export async function buildSciChart(
         color: fontColor
       }
     })
+
     sciChartSurface.yAxes.add(yAxis)
   })
 
@@ -100,36 +151,158 @@ export async function buildSciChart(
       containsNaN: false
     })
 
+    const yAxisId = dataset.yAxisID || 'yAxis0'
+    const stackGroupId = dataset.stack || `__stack${index}__`
+
     let series: any
     if (dataset.type === 'bar') {
-      series = new FastColumnRenderableSeries(wasmContext, {
-        dataSeries,
-        strokeThickness: dataset.borderWidth || 2,
-        fill: dataset.backgroundColor || '#FF6600'
-      })
+      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 {
-      series = new FastLineRenderableSeries(wasmContext, {
-        dataSeries,
-        strokeThickness: dataset.borderWidth || 2,
-        stroke: dataset.color || '#FF6600'
-      })
+      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'
+          })
+      }
+
+      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)
 
-    const rolloverModifier = new RolloverModifier({
-      showTooltip: true,
-      showAxisLabels: true,
-      tooltipColor: 'white',
-      tooltipBackgroundColor: 'rgba(0, 0, 0, 0.7)',
-      rollOverDataSeries: dataSeries
-    })
+    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)
+      sciChartSurface.chartModifiers.add(rolloverModifier)
+    }
 
     return dataSeries
   })
 
+  // 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(),
@@ -137,5 +310,16 @@ export async function buildSciChart(
     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: 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

@@ -63,10 +63,10 @@ function getRandomInRange(min: number, max: number) {
 // 랜덤 데이터를 생성하는 함수
 function generateRandomData(count: number) {
   const randomData = []
-  const startTimestamp = Math.floor(Date.now() / 1000) // 현재 시간을 Unix 타임스탬프로 설정
+  const startTimestamp = Math.floor(Date.now()) // 현재 시간을 Unix 타임스탬프로 설정
 
   for (let i = 0; i < count; i++) {
-    const timestamp = startTimestamp + i * 3 // 3초씩 증가하는 타임스탬프 설정
+    const timestamp = startTimestamp + i * 360 * 30 * 1000 // 3초씩 증가하는 타임스탬프 설정
     const randomCount = getRandomInRange(5, 35) // count 값을 5에서 35 사이로 랜덤 생성
     const randomAverage = getRandomInRange(50, 150) // average 값을 50에서 150 사이로 랜덤 생성
 

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

@@ -105,7 +105,7 @@ const Template: Story<ArgTypes> = ({ value }: ArgTypes) => html`
     ></ox-input-chart-timeseries>
     <div id="charts">
       <ox-scichart id="scichart" .data=${data} attr-x="timestamp" attr-y="count"></ox-scichart>
-      <ox-chart-js id="chartjs" .data=${data}></ox-chart-js>
+      <!-- <ox-chart-js id="chartjs" .data=${data}></ox-chart-js> -->
     </div>
   </div>
 `
@@ -141,8 +141,22 @@ WithData.args = {
     },
     options: {
       scales: {
-        xAxes: [{ ticks: { beginAtZero: true } }],
-        yAxes: [{ ticks: { beginAtZero: true } }]
+        xAxes: [
+          {
+            axisTitle: 'timestamp',
+            ticks: { beginAtZero: true }
+          }
+        ],
+        yAxes: [
+          {
+            axisTitle: 'count',
+            ticks: { beginAtZero: true }
+          },
+          {
+            axisTitle: 'average',
+            ticks: { beginAtZero: true }
+          }
+        ]
       },
       legend: { display: true }
     }
@@ -153,16 +167,13 @@ export const MultiAxis = Template.bind({})
 MultiAxis.args = {
   value: {
     ...getDefaultChartConfig('line'),
-    options: {
-      ...getDefaultChartConfig('line').options,
-      multiAxis: true
-    },
     data: {
       datasets: [
         {
           label: 'Bar Series',
           type: 'bar',
           dataKey: 'count',
+          axisTitle: 'count',
           backgroundColor: 'rgba(255, 99, 132, 0.2)',
           borderColor: 'rgba(255, 99, 132, 1)',
           borderWidth: 1,
@@ -172,16 +183,39 @@ MultiAxis.args = {
           label: 'Line Series',
           type: 'line',
           dataKey: 'average',
+          axisTitle: 'average',
           color: 'rgba(54, 162, 235, 1)',
           borderWidth: 1,
           fill: false,
           lineTension: 0.4,
-          pointStyle: 'circle',
+          pointStyle: 'rect',
           pointRadius: 3,
           yAxisID: 'right'
         }
       ],
       labelDataKey: 'timestamp'
+    },
+    options: {
+      scales: {
+        xAxes: [
+          {
+            axisTitle: 'timestamp',
+            ticks: { beginAtZero: true }
+          }
+        ],
+        yAxes: [
+          {
+            axisTitle: 'count',
+            ticks: { beginAtZero: true }
+          },
+          {
+            axisTitle: 'average',
+            ticks: { beginAtZero: true }
+          }
+        ]
+      },
+      multiAxis: true,
+      legend: { display: true }
     }
   }
 }