@operato/chart 7.0.11 → 7.0.13

package/src/scichart/scichart-builder.ts

@@ -9,6 +9,11 @@ function getThemeFromBrowser() {
   return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
 }
 
+function convertColor(color: string | string[] | undefined, defaultColor?: string) {
+  const tinyColor = new TinyColor(color as string)
+  return tinyColor.toHex8String() || defaultColor
+}
+
 export async function buildSciChart(
   config: OperatoChart.ChartConfig | undefined | null,
   container: any,
@@ -34,9 +39,11 @@ export async function buildSciChart(
     DateTimeNumericAxis,
     EAutoRange,
     EAxisAlignment,
+    ECoordinateMode,
     NumberRange,
     MouseWheelZoomModifier,
     RubberBandXyZoomModifier,
+    ZoomPanModifier,
     ZoomExtentsModifier,
     RolloverModifier,
     SmartDateLabelProvider,
@@ -46,7 +53,14 @@ export async function buildSciChart(
     CrossPointMarker,
     XPointMarker,
     WaveAnimation,
-    LegendModifier
+    LegendModifier,
+    XAxisDragModifier,
+    YAxisDragModifier,
+    TextAnnotation,
+    LineAnnotation,
+    BoxAnnotation,
+    HorizontalLineAnnotation,
+    VerticalLineAnnotation
   } = SciChart
 
   const { type: chartType, options, data: fromData } = config
@@ -60,7 +74,9 @@ export async function buildSciChart(
     xGridLine,
     yGridLine,
     y2ndGridLine,
-    stacked
+    stacked,
+    multiAxis,
+    annotations
   } = options || {}
 
   var baseColor = getBaseColorFromTheme(theme)
@@ -117,12 +133,12 @@ export async function buildSciChart(
   })
 
   // Y 축 설정
-  yAxes.forEach((axis, index) => {
+  ;(multiAxis ? yAxes : [yAxes[0]]).forEach((axis, index) => {
     const { axisTitle, ticks } = axis
     const { autoMax, autoMin, min, max, stepSize, beginAtZero } = ticks || {}
 
     const yAxis = new NumericAxis(wasmContext, {
-      id: `yAxis${index}`,
+      id: index == 0 ? undefined : `yAxis${index}`,
       axisTitle,
       autoRange: autoMin || autoMax ? EAutoRange.Always : undefined,
       axisAlignment: index === 0 ? EAxisAlignment.Left : EAxisAlignment.Right,
@@ -151,7 +167,7 @@ export async function buildSciChart(
       containsNaN: false
     })
 
-    const yAxisId = dataset.yAxisID || 'yAxis0'
+    const yAxisId = dataset.yAxisID == 'right' && multiAxis ? 'yAxis1' : undefined
     const stackGroupId = dataset.stack || `__stack${index}__`
 
     let series: any
@@ -160,7 +176,7 @@ export async function buildSciChart(
         series = new StackedColumnRenderableSeries(wasmContext, {
           dataSeries,
           strokeThickness: dataset.borderWidth || 2,
-          fill: dataset.backgroundColor || '#FF6600',
+          fill: convertColor(dataset.backgroundColor, '#FF6600'),
           yAxisId,
           stackedGroupId: stackGroupId
         })
@@ -168,68 +184,68 @@ export async function buildSciChart(
         series = new FastColumnRenderableSeries(wasmContext, {
           dataSeries,
           strokeThickness: dataset.borderWidth || 2,
-          fill: dataset.backgroundColor || '#FF6600',
+          stroke: convertColor(dataset.backgroundColor, '#FF6600'),
           animation: animation && new WaveAnimation({ duration: 1000, fadeEffect: true }),
           yAxisId
         })
       }
     } else {
-      const { pointStyle, lineTension } = dataset
+      const { pointStyle, pointRadius = 10, lineTension } = dataset
       let pointMarker = null // 초기값을 null로 설정
 
       if (pointStyle) {
         switch (pointStyle) {
           case 'circle':
             pointMarker = new EllipsePointMarker(wasmContext, {
-              width: 10,
-              height: 10,
+              width: pointRadius,
+              height: pointRadius,
               strokeThickness: 2,
-              fill: dataset.color || '#FF6600',
+              fill: convertColor(dataset.color, '#FF6600'),
               stroke: '#000000'
             })
             break
           case 'triangle':
             pointMarker = new TrianglePointMarker(wasmContext, {
-              width: 10,
-              height: 10,
+              width: pointRadius,
+              height: pointRadius,
               strokeThickness: 2,
-              fill: dataset.color || '#FF6600',
+              fill: convertColor(dataset.color, '#FF6600'),
               stroke: '#000000'
             })
             break
           case 'rect':
             pointMarker = new SquarePointMarker(wasmContext, {
-              width: 10,
-              height: 10,
+              width: pointRadius,
+              height: pointRadius,
               strokeThickness: 2,
-              fill: dataset.color || '#FF6600',
+              fill: convertColor(dataset.color, '#FF6600'),
               stroke: '#000000'
             })
             break
           case 'cross':
             pointMarker = new CrossPointMarker(wasmContext, {
-              width: 10,
-              height: 10,
+              width: pointRadius,
+              height: pointRadius,
               strokeThickness: 2,
-              fill: dataset.color || '#FF6600',
+              fill: convertColor(dataset.color, '#FF6600'),
               stroke: '#000000'
             })
             break
           case 'crossRot':
             pointMarker = new XPointMarker(wasmContext, {
-              width: 10,
-              height: 10,
+              width: pointRadius,
+              height: pointRadius,
               strokeThickness: 2,
-              fill: dataset.color || '#FF6600',
+              fill: convertColor(dataset.color, '#FF6600'),
               stroke: '#000000'
             })
             break
           default:
             pointMarker = new EllipsePointMarker(wasmContext, {
-              width: 10,
-              height: 10,
+              width: pointRadius,
+              height: pointRadius,
               strokeThickness: 2,
-              fill: dataset.color || '#FF6600',
+              fill: convertColor(dataset.color, '#FF6600'),
               stroke: '#000000'
             })
         }
@@ -239,7 +255,7 @@ export async function buildSciChart(
         series = new StackedMountainRenderableSeries(wasmContext, {
           dataSeries,
           strokeThickness: dataset.borderWidth || 2,
-          stroke: dataset.color || '#FF6600',
+          stroke: convertColor(dataset.color, '#FF6600'),
           fill: dataset.backgroundColor || '#FF6600',
           yAxisId,
           stackedGroupId: stackGroupId
@@ -250,7 +266,7 @@ export async function buildSciChart(
             ? new SplineLineRenderableSeries(wasmContext, {
                 dataSeries,
                 strokeThickness: dataset.borderWidth || 2,
-                stroke: dataset.color || '#FF6600',
+                stroke: convertColor(dataset.color, '#FF6600'),
                 pointMarker,
                 animation: animation && new WaveAnimation({ duration: 1000, fadeEffect: true }),
                 yAxisId
@@ -258,7 +274,7 @@ export async function buildSciChart(
             : new FastLineRenderableSeries(wasmContext, {
                 dataSeries,
                 strokeThickness: dataset.borderWidth || 2,
-                stroke: dataset.color || '#FF6600',
+                stroke: convertColor(dataset.color, '#FF6600'),
                 pointMarker,
                 animation: animation && new WaveAnimation({ duration: 1000, fadeEffect: true }),
                 yAxisId
@@ -305,11 +321,76 @@ export async function buildSciChart(
     }
   }
 
+  if (annotations) {
+    annotations.forEach(annotation => {
+      let sciAnnotation: any
+      switch (annotation.type) {
+        case 'text':
+          sciAnnotation = new TextAnnotation({
+            x1: annotation.x1,
+            y1: annotation.y1,
+            text: annotation.text,
+            horizontalAnchorPoint: annotation.horizontalAnchorPoint,
+            verticalAnchorPoint: annotation.verticalAnchorPoint,
+            fontSize: annotation.fontSize,
+            fontFamily: annotation.fontFamily,
+            textColor: convertColor(annotation.stroke, fontColor)
+          })
+          break
+        case 'line':
+          sciAnnotation = new LineAnnotation({
+            x1: annotation.x1,
+            y1: annotation.y1,
+            x2: annotation.x2,
+            y2: annotation.y2,
+            stroke: convertColor(annotation.stroke, '#FF0000'),
+            strokeThickness: annotation.strokeThickness,
+            xCoordinateMode: ECoordinateMode.Relative,
+            yCoordinateMode: ECoordinateMode.DataValue
+          })
+          break
+        case 'box':
+          sciAnnotation = new BoxAnnotation({
+            x1: annotation.x1,
+            y1: annotation.y1,
+            x2: annotation.x2,
+            y2: annotation.y2,
+            fill: convertColor(annotation.fill, '#FF0000'),
+            stroke: convertColor(annotation.stroke, '#FF0000'),
+            strokeThickness: annotation.strokeThickness
+          })
+          break
+        case 'horizontalLine':
+          sciAnnotation = new HorizontalLineAnnotation({
+            y1: annotation.y1,
+            stroke: convertColor(annotation.stroke, '#FF0000'),
+            strokeThickness: annotation.strokeThickness
+          })
+          break
+        case 'verticalLine':
+          sciAnnotation = new VerticalLineAnnotation({
+            x1: annotation.x1,
+            stroke: convertColor(annotation.stroke, '#FF0000'),
+            strokeThickness: annotation.strokeThickness
+          })
+          break
+        default:
+          break
+      }
+      if (sciAnnotation) {
+        sciChartSurface.annotations.add(sciAnnotation)
+      }
+    })
+  }
+
   // 줌인/줌아웃 모디파이어 추가
   sciChartSurface.chartModifiers.add(
-    new RubberBandXyZoomModifier(),
+    // new RubberBandXyZoomModifier(),
+    new ZoomPanModifier(),
     new MouseWheelZoomModifier(),
-    new ZoomExtentsModifier()
+    new ZoomExtentsModifier(),
+    new XAxisDragModifier(),
+    new YAxisDragModifier()
   )
 
   // Legend 설정

package/src/types.d.ts

@@ -1,5 +1,6 @@
 declare namespace OperatoChart {
   export type ChartType = 'bar' | 'horizontalBar' | 'line' | 'radar' | 'pie' | 'doughnut' | 'polarArea' | undefined
+
   export interface ChartConfig {
     data: ChartData
     options?: ChartOptions
@@ -56,6 +57,7 @@ declare namespace OperatoChart {
     multiAxis?: boolean
     maintainAspectRatio?: boolean
     plugins?: { [plugin: string]: any }
+    annotations?: Annotation[]
   }
 
   export interface LegendOptions {
@@ -87,4 +89,21 @@ declare namespace OperatoChart {
     color?: string
     textStrokeColor?: string
   }
+
+  export interface Annotation {
+    type: AnnotationType
+    x1: number
+    y1: number
+    x2?: number
+    y2?: number
+    stroke?: string
+    strokeThickness?: number
+    fill?: string
+    text?: string
+    horizontalAnchorPoint?: 'Left' | 'Center' | 'Right'
+    verticalAnchorPoint?: 'Top' | 'Center' | 'Bottom'
+    [key: string]: any
+  }
+
+  export type AnnotationType = 'line' | 'text' | 'box' | 'horizontalLine' | 'verticalLine' | 'custom' | undefined
 }

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

@@ -151,10 +151,6 @@ WithData.args = {
           {
             axisTitle: 'count',
             ticks: { beginAtZero: true }
-          },
-          {
-            axisTitle: 'average',
-            ticks: { beginAtZero: true }
           }
         ]
       },

package/translations/ko.json

@@ -9,6 +9,13 @@
   "label.chart": "차트",
   "label.chart-style": "차트 스타일",
   "label.chart-type": "차트 유형",
+  "label.chart-annotation": "어노테이션",
+  "label.chart-annotation-type": "어노테이션 타입",
+  "label.stroke-style": "선 스타일",
+  "label.stroke-thickness": "선 두께",
+  "label.annotation-text": "텍스트",
+  "label.horizontal-anchor": "수평 기준점",
+  "label.vertical-anchor": "수직 기준점",
   "label.color": "색상",
   "label.data-key": "데이터 참조",
   "label.display-tick": "눈금 표시",

package/dist/src/editors/input-chart-multi-series-abstract.d.ts

@@ -1,17 +0,0 @@
-import '@material/web/icon/icon.js';
-import '@operato/i18n/ox-i18n.js';
-import { MdIcon } from '@material/web/icon/icon.js';
-import { InputChartAbstract } from './input-chart-abstract';
-export declare class InputChartMultiSeriesAbstract extends InputChartAbstract {
-    static styles: import("lit").CSSResult[];
-    tabs: HTMLElement;
-    tabNavLeftButton: MdIcon;
-    tabNavRightButton: MdIcon;
-    get tabContainer(): HTMLElement | null | undefined;
-    firstUpdated(): void;
-    subTemplate(): import("lit-html").TemplateResult<1>;
-    multiSeriesTabTemplate(): import("lit-html").TemplateResult<1>;
-    _onTabScroll(e: Event): void;
-    _onTabScrollNavLeft(e: Event): void;
-    _onTabScrollNavRight(e: Event): void;
-}