@operato/chart 7.0.12 → 7.0.13

package/src/editors/ox-input-chart-hbar.ts

@@ -6,11 +6,11 @@ import { html } from 'lit'
 import { customElement } from 'lit/decorators.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
 
-import { InputChartMultiSeriesAbstract } from './input-chart-multi-series-abstract'
+import { InputChartAbstract } from './input-chart-abstract'
 
 @customElement('ox-input-chart-hbar')
-export class OxInputChartHBar extends InputChartMultiSeriesAbstract {
-  static styles = [...InputChartMultiSeriesAbstract.styles]
+export class OxInputChartHBar extends InputChartAbstract {
+  static styles = InputChartAbstract.styles
 
   subTemplate() {
     const configurer = this.configurer
@@ -149,17 +149,17 @@ export class OxInputChartHBar extends InputChartMultiSeriesAbstract {
 
     return html`
       <div id="series-properties-container" fullwidth>
-        <div id="tab-header">
+        <div id="series-tab-header">
           <md-icon
-            id="tab-nav-left-button"
+            id="series-tab-nav-left-button"
             @tap=${(e: Event) => {
-              this._onTabScrollNavLeft(e)
+              this._onTabScrollNavLeft(e, 'series')
             }}
             disabled
             >chevron_left</md-icon
           >
           <div
-            id="tabs"
+            id="series-tabs"
             @change=${(e: Event) => {
               configurer.currentSeriesIndex = (e.target as any).activeTabIndex
             }}
@@ -181,16 +181,16 @@ export class OxInputChartHBar extends InputChartMultiSeriesAbstract {
                 >
                   ${index + 1}
                   ${!configurer.datasets || (configurer.datasets.length != 1 && configurer.currentSeriesIndex == index)
-                    ? html` <md-icon @tap="${(e: Event) => this.onTapRemoveCurrentTab(index)}"> close </md-icon> `
+                    ? html` <md-icon @tap=${(e: Event) => this.onTapRemoveCurrentTab(index)}> close </md-icon> `
                     : html``}
                 </div>
               `
             )}
           </div>
           <md-icon
-            id="tab-nav-right-button"
+            id="series-tab-nav-right-button"
             @click=${(e: Event) => {
-              this._onTabScrollNavRight(e)
+              this._onTabScrollNavRight(e, 'series')
             }}
             disabled
             >chevron_right</md-icon

package/src/editors/ox-input-chart-mixed.ts

@@ -4,11 +4,11 @@ import { html } from 'lit'
 import { customElement } from 'lit/decorators.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
 
-import { InputChartMultiSeriesAbstract } from './input-chart-multi-series-abstract'
+import { InputChartAbstract } from './input-chart-abstract'
 
 @customElement('ox-input-chart-mixed')
-export class OxInputChartMixed extends InputChartMultiSeriesAbstract {
-  static styles = InputChartMultiSeriesAbstract.styles
+export class OxInputChartMixed extends InputChartAbstract {
+  static styles = InputChartAbstract.styles
 
   subTemplate() {
     const configurer = this.configurer

package/src/editors/ox-input-chart-radar.ts

@@ -4,11 +4,11 @@ import { html } from 'lit'
 import { customElement } from 'lit/decorators.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
 
-import { InputChartMultiSeriesAbstract } from './input-chart-multi-series-abstract'
+import { InputChartAbstract } from './input-chart-abstract'
 
 @customElement('ox-input-chart-radar')
-export default class OxInputChartRadar extends InputChartMultiSeriesAbstract {
-  static styles = InputChartMultiSeriesAbstract.styles
+export default class OxInputChartRadar extends InputChartAbstract {
+  static styles = InputChartAbstract.styles
 
   subTemplate() {
     const configurer = this.configurer

package/src/editors/ox-input-chart-timeseries.ts

@@ -4,11 +4,11 @@ import { html } from 'lit'
 import { customElement } from 'lit/decorators.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
 
-import { InputChartMultiSeriesAbstract } from './input-chart-multi-series-abstract'
+import { InputChartAbstract } from './input-chart-abstract'
 
 @customElement('ox-input-chart-timeseries')
-export class OxInputChartTimeseries extends InputChartMultiSeriesAbstract {
-  static styles = InputChartMultiSeriesAbstract.styles
+export class OxInputChartTimeseries extends InputChartAbstract {
+  static styles = InputChartAbstract.styles
 
   subTemplate() {
     const configurer = this.configurer
@@ -18,9 +18,11 @@ export class OxInputChartTimeseries extends InputChartMultiSeriesAbstract {
       <label for="multi-axis"> <ox-i18n msgid="label.multi-axis">Multi Axis</ox-i18n> </label>
 
       <legend><ox-i18n msgid="label.series">Series</ox-i18n></legend>
-
       <div fullwidth>${this.multiSeriesTabTemplate()}</div>
 
+      <legend><ox-i18n msgid="label.chart-annotation">Annotations</ox-i18n></legend>
+      <div fullwidth>${this.annotationsTabTemplate()}</div>
+
       <legend><ox-i18n msgid="label.x-axes">X Axes</ox-i18n></legend>
 
       <label for="series-data-key"> <ox-i18n msgid="label.data-key">Data Key</ox-i18n> </label>

package/src/scichart/scichart-builder.ts

@@ -39,6 +39,7 @@ export async function buildSciChart(
     DateTimeNumericAxis,
     EAutoRange,
     EAxisAlignment,
+    ECoordinateMode,
     NumberRange,
     MouseWheelZoomModifier,
     RubberBandXyZoomModifier,
@@ -54,7 +55,12 @@ export async function buildSciChart(
     WaveAnimation,
     LegendModifier,
     XAxisDragModifier,
-    YAxisDragModifier
+    YAxisDragModifier,
+    TextAnnotation,
+    LineAnnotation,
+    BoxAnnotation,
+    HorizontalLineAnnotation,
+    VerticalLineAnnotation
   } = SciChart
 
   const { type: chartType, options, data: fromData } = config
@@ -68,7 +74,9 @@ export async function buildSciChart(
     xGridLine,
     yGridLine,
     y2ndGridLine,
-    stacked
+    stacked,
+    multiAxis,
+    annotations
   } = options || {}
 
   var baseColor = getBaseColorFromTheme(theme)
@@ -125,7 +133,7 @@ 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 || {}
 
@@ -159,7 +167,7 @@ export async function buildSciChart(
       containsNaN: false
     })
 
-    const yAxisId = dataset.yAxisID == 'right' ? 'yAxis1' : undefined
+    const yAxisId = dataset.yAxisID == 'right' && multiAxis ? 'yAxis1' : undefined
     const stackGroupId = dataset.stack || `__stack${index}__`
 
     let series: any
@@ -313,6 +321,68 @@ 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(),

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;
-}