@operato/chart 7.0.0 → 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

@@ -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,19 +17,46 @@ 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
+  @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() {
@@ -65,14 +91,15 @@ class OxSciChart extends LitElement {
     const { chart, dataSeries } = (await buildSciChart(this.config, this.container, {})) || {}
 
     this.chart = chart
-    this.dataSeries = dataSeries
+    this.dataSeries = dataSeries!
 
     this.updateDataSeries()
   }
 
   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')) {
@@ -82,49 +109,73 @@ 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 }[]
+    })
+  }
+
+  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>
+    `
   }
 }