@operato/chart 7.0.1 → 7.0.2

package/src/scichart/custom-point-markers.ts.xxx

@@ -0,0 +1,178 @@
+import { BasePointMarker, TSciChart, IRenderableSeries, EPointMarkerType } from 'scichart'
+
+interface PointMarkerOptions {
+  width?: number
+  height?: number
+  strokeThickness?: number
+  fill?: string
+  stroke?: string
+}
+
+abstract class CustomPointMarker extends BasePointMarker {
+  private _width: number
+  private _height: number
+  private _strokeThickness: number
+  private _fill: string
+  private _stroke: string
+
+  constructor(wasmContext: TSciChart, options: PointMarkerOptions = {}) {
+    super(wasmContext)
+    this._width = options.width ?? 10
+    this._height = options.height ?? 10
+    this._strokeThickness = options.strokeThickness ?? 2
+    this._fill = options.fill ?? '#FF6600'
+    this._stroke = options.stroke ?? '#000000'
+  }
+
+  get width(): number {
+    return this._width
+  }
+  set width(value: number) {
+    this._width = value
+  }
+
+  get height(): number {
+    return this._height
+  }
+  set height(value: number) {
+    this._height = value
+  }
+
+  get strokeThickness(): number {
+    return this._strokeThickness
+  }
+  set strokeThickness(value: number) {
+    this._strokeThickness = value
+  }
+
+  get fill(): string {
+    return this._fill
+  }
+  set fill(value: string) {
+    this._fill = value
+  }
+
+  get stroke(): string {
+    return this._stroke
+  }
+  set stroke(value: string) {
+    this._stroke = value
+  }
+
+  get type(): EPointMarkerType {
+    return EPointMarkerType.Custom
+  }
+
+  drawSprite(
+    context: CanvasRenderingContext2D,
+    x: number,
+    y: number,
+    stroke: string,
+    dpiAdjustedStrokeThickness: number,
+    fill: string
+  ): void {
+    this.draw(context, null as any, x, y)
+  }
+
+  abstract draw(
+    context: CanvasRenderingContext2D,
+    renderableSeries: IRenderableSeries,
+    xCoord: number,
+    yCoord: number
+  ): void
+}
+
+// Rotated Square Point Marker
+export class RotatedSquarePointMarker extends CustomPointMarker {
+  draw(context: CanvasRenderingContext2D, renderableSeries: IRenderableSeries, xCoord: number, yCoord: number): void {
+    context.save()
+    context.translate(xCoord, yCoord)
+    context.rotate(Math.PI / 4) // 45 degrees rotation
+    context.fillStyle = this.fill
+    context.strokeStyle = this.stroke
+    context.lineWidth = this.strokeThickness
+    context.beginPath()
+    context.rect(-this.width / 2, -this.height / 2, this.width, this.height)
+    context.fill()
+    context.stroke()
+    context.restore()
+  }
+}
+
+// Cross Rot Point Marker
+export class CrossRotPointMarker extends CustomPointMarker {
+  draw(context: CanvasRenderingContext2D, renderableSeries: IRenderableSeries, xCoord: number, yCoord: number): void {
+    context.save()
+    context.translate(xCoord, yCoord)
+    context.rotate(Math.PI / 4) // 45 degrees rotation
+    context.strokeStyle = this.stroke
+    context.lineWidth = this.strokeThickness
+    context.beginPath()
+    context.moveTo(-this.width / 2, 0)
+    context.lineTo(this.width / 2, 0)
+    context.moveTo(0, -this.height / 2)
+    context.lineTo(0, this.height / 2)
+    context.stroke()
+    context.restore()
+  }
+}
+
+// Star Point Marker
+export class StarPointMarker extends CustomPointMarker {
+  draw(context: CanvasRenderingContext2D, renderableSeries: IRenderableSeries, xCoord: number, yCoord: number): void {
+    const spikes = 5
+    const outerRadius = this.width / 2
+    const innerRadius = outerRadius / 2
+    context.save()
+    context.translate(xCoord, yCoord)
+    context.fillStyle = this.fill
+    context.strokeStyle = this.stroke
+    context.lineWidth = this.strokeThickness
+    context.beginPath()
+    for (let i = 0; i < spikes; i++) {
+      context.lineTo(
+        Math.cos((i * 2 * Math.PI) / spikes) * outerRadius,
+        Math.sin((i * 2 * Math.PI) / spikes) * outerRadius
+      )
+      context.lineTo(
+        Math.cos(((i * 2 + 1) * Math.PI) / spikes) * innerRadius,
+        Math.sin(((i * 2 + 1) * Math.PI) / spikes) * innerRadius
+      )
+    }
+    context.closePath()
+    context.fill()
+    context.stroke()
+    context.restore()
+  }
+}
+
+// Line Point Marker
+export class LinePointMarker extends CustomPointMarker {
+  draw(context: CanvasRenderingContext2D, renderableSeries: IRenderableSeries, xCoord: number, yCoord: number): void {
+    context.save()
+    context.translate(xCoord, yCoord)
+    context.strokeStyle = this.stroke
+    context.lineWidth = this.strokeThickness
+    context.beginPath()
+    context.moveTo(-this.width / 2, 0)
+    context.lineTo(this.width / 2, 0)
+    context.stroke()
+    context.restore()
+  }
+}
+
+// Dash Point Marker
+export class DashPointMarker extends CustomPointMarker {
+  draw(context: CanvasRenderingContext2D, renderableSeries: IRenderableSeries, xCoord: number, yCoord: number): void {
+    context.save()
+    context.translate(xCoord, yCoord)
+    context.strokeStyle = this.stroke
+    context.lineWidth = this.strokeThickness
+    context.setLineDash([this.width / 4, this.width / 4])
+    context.beginPath()
+    context.moveTo(-this.width / 2, 0)
+    context.lineTo(this.width / 2, 0)
+    context.stroke()
+    context.restore()
+  }
+}

package/src/scichart/ox-scichart.ts

@@ -20,16 +20,43 @@ class OxSciChart extends LitElement {
   private dataSeries: any[] = []
 
   @query('div#container') container!: HTMLDivElement
+  @query('div#legend') legendContainer!: HTMLDivElement
 
   static styles = css`
     :host {
       display: block;
+      width: 100%;
+      height: 100%;
     }
 
-    div {
+    .chart-container {
+      display: flex;
       width: 100%;
       height: 100%;
     }
+
+    .chart-content {
+      flex: 1;
+      position: relative;
+    }
+
+    .legend {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .legend-top,
+    .legend-bottom {
+      width: 100%;
+      height: 50px;
+    }
+
+    .legend-right,
+    .legend-left {
+      width: 150px;
+      height: 100%;
+    }
   `
 
   firstUpdated() {
@@ -70,8 +97,9 @@ class OxSciChart extends LitElement {
   }
 
   async updated(changedProperties: Map<string | number | symbol, unknown>) {
-    if (changedProperties.has('config')) {
+    if (changedProperties.has('config') && this.config) {
       await this.initializeSciChart()
+      this.updateLegend()
     }
 
     if (changedProperties.has('data')) {
@@ -127,8 +155,27 @@ class OxSciChart extends LitElement {
     })
   }
 
+  updateLegend() {
+    const legendPosition = this.config?.options?.legend?.position || 'right'
+    const legendElement = this.shadowRoot?.getElementById('legend')
+    if (legendElement) {
+      legendElement.className = `legend legend-${legendPosition}`
+    }
+  }
+
   render() {
-    return html`<div id="container"></div>`
+    const legendPosition = this.config?.options?.legend?.position || 'right'
+    return html`
+      <div class="chart-container">
+        ${legendPosition === 'left' ? html`<div id="legend" class="legend legend-left"></div>` : ''}
+        <div class="chart-content">
+          ${legendPosition === 'top' ? html`<div id="legend" class="legend legend-top"></div>` : ''}
+          <div id="container"></div>
+          ${legendPosition === 'bottom' ? html`<div id="legend" class="legend legend-bottom"></div>` : ''}
+        </div>
+        ${legendPosition === 'right' ? html`<div id="legend" class="legend legend-right"></div>` : ''}
+      </div>
+    `
   }
 }
 

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 사이로 랜덤 생성