@operato/chart 7.0.12 → 7.0.14

package/src/editors/ox-property-editor-chart.ts

@@ -4,6 +4,7 @@ import './ox-input-chart-hbar'
 import './ox-input-chart-mixed'
 import './ox-input-chart-pie'
 import './ox-input-chart-radar'
+import './ox-input-chart-timeseries'
 
 import { css, html, nothing } from 'lit'
 import { customElement } from 'lit/decorators.js'

package/src/scichart/scichart-builder.ts

@@ -39,6 +39,9 @@ export async function buildSciChart(
     DateTimeNumericAxis,
     EAutoRange,
     EAxisAlignment,
+    ECoordinateMode,
+    EHorizontalAnchorPoint,
+    EVerticalAnchorPoint,
     NumberRange,
     MouseWheelZoomModifier,
     RubberBandXyZoomModifier,
@@ -54,7 +57,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 +76,9 @@ export async function buildSciChart(
     xGridLine,
     yGridLine,
     y2ndGridLine,
-    stacked
+    stacked,
+    multiAxis,
+    annotations
   } = options || {}
 
   var baseColor = getBaseColorFromTheme(theme)
@@ -125,7 +135,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 +169,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 +323,81 @@ export async function buildSciChart(
     }
   }
 
+  if (annotations) {
+    annotations.forEach(annotation => {
+      let sciAnnotation: any
+      let horizontalAnchorPoint =
+        annotation.horizontalAnchorPoint == 'Right'
+          ? EHorizontalAnchorPoint.Right
+          : annotation.horizontalAnchorPoint == 'Left'
+            ? EHorizontalAnchorPoint.Left
+            : EHorizontalAnchorPoint.Center
+      let verticalAnchorPoint =
+        annotation.verticalAnchorPoint == 'Top'
+          ? EVerticalAnchorPoint.Top
+          : annotation.verticalAnchorPoint == 'Bottom'
+            ? EVerticalAnchorPoint.Bottom
+            : EVerticalAnchorPoint.Center
+
+      switch (annotation.type) {
+        case 'text':
+          sciAnnotation = new TextAnnotation({
+            x1: annotation.x1,
+            y1: annotation.y1,
+            text: annotation.text,
+            horizontalAnchorPoint,
+            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/en.json

@@ -1,45 +1,52 @@
 {
+  "label.animation": "animation effect",
+  "label.annotation-text": "text",
   "label.axes": "axes",
-  "label.axis-max": "max",
-  "label.axis-max-auto": "max auto",
-  "label.axis-min": "min",
-  "label.axis-min-auto": "min auto",
-  "label.axis-step-size": "step",
+  "label.axis-max": "maximum value",
+  "label.axis-max-auto": "maximum value auto",
+  "label.axis-min": "minimum value",
+  "label.axis-min-auto": "minimum value auto",
+  "label.axis-step-size": "step size",
+  "label.bar-spacing": "bar spacing",
   "label.border-width": "border width",
   "label.chart": "chart",
+  "label.chart-annotation": "annotation",
+  "label.chart-annotation-type": "annotation type",
   "label.chart-style": "chart style",
   "label.chart-type": "chart type",
   "label.color": "color",
-  "label.data-key": "data key",
+  "label.data-key": "data reference",
   "label.display-tick": "display tick",
   "label.fill": "fill",
   "label.font-color": "font color",
-  "label.font-size": "font size",
+  "label.font-size": "size",
   "label.grid-line": "grid line",
+  "label.horizontal-anchor": "horizontal anchor",
   "label.label": "label",
   "label.legend": "legend",
-  "label.line-tension": "line tension",
-  "label.multi-axis": "multi axis",
-  "label.point-shape": "point Shape",
-  "label.point-size": "point Size",
+  "label.line-tension": "tension",
+  "label.multi-axis": "dual axis",
+  "label.point-shape": "point shape",
+  "label.point-size": "point size",
   "label.position": "position",
   "label.series": "series",
-  "label.stack-group": "stack group",
-  "label.bar-spacing": "bar spacing",
   "label.series-type": "series type",
+  "label.stack-group": "stack group",
   "label.stacked": "stacked",
+  "label.stroke-style": "line style",
+  "label.stroke-thickness": "line thickness",
   "label.target-axis": "target axis",
   "label.theme": "theme",
   "label.tick-spacing": "tick spacing",
   "label.title": "title",
   "label.tooltip": "tooltip",
-  "label.value-display": "display Value",
+  "label.value-display": "value display",
   "label.value-format": "value format",
   "label.value-prefix": "value prefix",
   "label.value-suffix": "value suffix",
+  "label.vertical-anchor": "vertical anchor",
   "label.x-axes": "X axes",
-  "label.y-2nd-axes": "Y 2nd axes",
+  "label.y-2nd-axes": "Y secondary axes",
   "label.y-axes": "Y axes",
-  "label.z-axes": "Z axes",
-  "label.animation": "animation"
+  "label.z-axes": "Z axes"
 }

package/translations/ja.json

@@ -1,45 +1,52 @@
 {
+  "label.animation": "アニメーション効果",
+  "label.annotation-text": "テキスト",
   "label.axes": "軸",
   "label.axis-max": "最大値",
   "label.axis-max-auto": "最大値自動",
   "label.axis-min": "最小値",
   "label.axis-min-auto": "最小値自動",
   "label.axis-step-size": "ステップ",
-  "label.border-width": "境界部分の広さ",
+  "label.bar-spacing": "バー間隔",
+  "label.border-width": "境界部分の幅",
   "label.chart": "チャート",
-  "label.chart-style": "チャート スタイル",
-  "label.chart-type": "チャート タイプ",
+  "label.chart-annotation": "アノテーション",
+  "label.chart-annotation-type": "アノテーションタイプ",
+  "label.chart-style": "チャートスタイル",
+  "label.chart-type": "チャートタイプ",
   "label.color": "色",
   "label.data-key": "データ参照",
-  "label.display-tick": "目盛り表示",
-  "label.fill": "塗りつぶし’",
-  "label.font-color": "フォントの色",
+  "label.display-tick": "目盛表示",
+  "label.fill": "塗り",
+  "label.font-color": "フォント色",
   "label.font-size": "サイズ",
-  "label.grid-line": "グリッド ライン",
+  "label.grid-line": "グリッドライン",
+  "label.horizontal-anchor": "水平アンカー",
   "label.label": "ラベル",
   "label.legend": "凡例",
   "label.line-tension": "緊張度",
   "label.multi-axis": "2軸",
-  "label.point-shape": "ポイント模様",
-  "label.point-size": "Pointサイズ",
+  "label.point-shape": "ポイント形状",
+  "label.point-size": "ポイントサイズ",
   "label.position": "位置",
   "label.series": "シリーズ",
-  "label.series-type": "シリー タイプ",
-  "label.stack-group": "スタックグループ",
-  "label.bar-spacing": "バー間隔",
+  "label.series-type": "シリーズタイプ",
+  "label.stack-group": "積み重ねグループ",
   "label.stacked": "積み重ね",
+  "label.stroke-style": "線スタイル",
+  "label.stroke-thickness": "線の太さ",
   "label.target-axis": "対象軸",
   "label.theme": "テーマ",
-  "label.tick-spacing": "目盛り間隔",
+  "label.tick-spacing": "目盛間隔",
   "label.title": "タイトル",
   "label.tooltip": "ツールチップ",
   "label.value-display": "値表示",
-  "label.value-format": "値の形式",
-  "label.value-prefix": "値接頭辞",
-  "label.value-suffix": "値接尾辞",
+  "label.value-format": "値形式",
+  "label.value-prefix": "値プレフィックス",
+  "label.value-suffix": "値サフィックス",
+  "label.vertical-anchor": "垂直アンカー",
   "label.x-axes": "X軸",
   "label.y-2nd-axes": "Y補助軸",
   "label.y-axes": "Y軸",
-  "label.z-axes": "Z軸",
-  "label.animation": "アニメーション"
+  "label.z-axes": "Z軸"
 }

package/translations/ko.json

@@ -1,12 +1,17 @@
 {
+  "label.animation": "애니메이션 효과",
+  "label.annotation-text": "텍스트",
   "label.axes": "축",
   "label.axis-max": "최대값",
   "label.axis-max-auto": "최대값 자동",
   "label.axis-min": "최소값",
   "label.axis-min-auto": "최소값 자동",
   "label.axis-step-size": "스텝",
+  "label.bar-spacing": "막대 간격",
   "label.border-width": "경계부분 넓이",
   "label.chart": "차트",
+  "label.chart-annotation": "어노테이션",
+  "label.chart-annotation-type": "어노테이션 타입",
   "label.chart-style": "차트 스타일",
   "label.chart-type": "차트 유형",
   "label.color": "색상",
@@ -16,6 +21,7 @@
   "label.font-color": "폰트 색상",
   "label.font-size": "크기",
   "label.grid-line": "그리드 라인",
+  "label.horizontal-anchor": "수평 기준점",
   "label.label": "라벨",
   "label.legend": "범례",
   "label.line-tension": "긴장도",
@@ -26,20 +32,21 @@
   "label.series": "시리즈",
   "label.series-type": "시리즈 유형",
   "label.stack-group": "누적 그룹",
-  "label.bar-spacing": "막대 간격",
   "label.stacked": "누적",
+  "label.stroke-style": "선 스타일",
+  "label.stroke-thickness": "선 두께",
   "label.target-axis": "대상 축",
+  "label.theme": "테마",
   "label.tick-spacing": "눈금 간격",
   "label.title": "제목",
-  "label.theme": "테마",
   "label.tooltip": "툴팁",
   "label.value-display": "값 표시",
   "label.value-format": "값 형식",
   "label.value-prefix": "값 접두사",
   "label.value-suffix": "값 접미사",
+  "label.vertical-anchor": "수직 기준점",
   "label.x-axes": "X 축",
   "label.y-2nd-axes": "Y 보조축",
   "label.y-axes": "Y 축",
-  "label.z-axes": "Z 축",
-  "label.animation": "애니메이션 효과"
+  "label.z-axes": "Z 축"
 }

package/translations/ms.json

@@ -1,45 +1,52 @@
 {
+  "label.animation": "kesan animasi",
+  "label.annotation-text": "teks",
   "label.axes": "paksi",
-  "label.axis-max": "maks",
-  "label.axis-max-auto": "maks auto",
-  "label.axis-min": "min",
-  "label.axis-min-auto": "min auto",
-  "label.axis-step-size": "saiz langkah",
+  "label.axis-max": "nilai maksimum",
+  "label.axis-max-auto": "nilai maksimum auto",
+  "label.axis-min": "nilai minimum",
+  "label.axis-min-auto": "nilai minimum auto",
+  "label.axis-step-size": "langkah",
+  "label.bar-spacing": "jarak bar",
   "label.border-width": "lebar sempadan",
   "label.chart": "carta",
+  "label.chart-annotation": "anotasi",
+  "label.chart-annotation-type": "jenis anotasi",
   "label.chart-style": "gaya carta",
   "label.chart-type": "jenis carta",
   "label.color": "warna",
-  "label.data-key": "kunci data",
-  "label.display-tick": "papar tanda",
-  "label.fill": "isi",
+  "label.data-key": "rujukan data",
+  "label.display-tick": "paparan tanda",
+  "label.fill": "isian",
   "label.font-color": "warna fon",
-  "label.font-size": "saiz fon",
+  "label.font-size": "saiz",
   "label.grid-line": "garis grid",
+  "label.horizontal-anchor": "jangkar mendatar",
   "label.label": "label",
   "label.legend": "legenda",
-  "label.line-tension": "ketegangan garis",
-  "label.multi-axis": "paksi pelbagai",
+  "label.line-tension": "ketegangan",
+  "label.multi-axis": "2 paksi",
   "label.point-shape": "bentuk titik",
   "label.point-size": "saiz titik",
   "label.position": "kedudukan",
   "label.series": "siri",
-  "label.stack-group": "kumpulan timbunan",
-  "label.bar-spacing": "jarak bar",
   "label.series-type": "jenis siri",
-  "label.stacked": "bertindan",
+  "label.stack-group": "kumpulan terkumpul",
+  "label.stacked": "bertingkat",
+  "label.stroke-style": "gaya garis",
+  "label.stroke-thickness": "ketebalan garis",
   "label.target-axis": "paksi sasaran",
   "label.theme": "tema",
   "label.tick-spacing": "jarak tanda",
   "label.title": "tajuk",
   "label.tooltip": "tooltip",
-  "label.value-display": "papar nilai",
+  "label.value-display": "paparan nilai",
   "label.value-format": "format nilai",
   "label.value-prefix": "awalan nilai",
   "label.value-suffix": "akhiran nilai",
+  "label.vertical-anchor": "jangkar menegak",
   "label.x-axes": "paksi X",
-  "label.y-2nd-axes": "paksi Y ke-2",
+  "label.y-2nd-axes": "paksi Y kedua",
   "label.y-axes": "paksi Y",
-  "label.z-axes": "paksi Z",
-  "label.animation": "animasi"
+  "label.z-axes": "paksi Z"
 }

package/translations/zh.json

@@ -1,45 +1,52 @@
 {
+  "label.animation": "动画效果",
+  "label.annotation-text": "文本",
   "label.axes": "轴",
-  "label.axis-max": "最大",
-  "label.axis-max-auto": "自动计算最大值",
-  "label.axis-min": "最小",
-  "label.axis-min-auto": "自动计算最小值",
-  "label.axis-step-size": "刻度大小",
-  "label.border-width": "线厚度",
-  "label.chart": "图标",
-  "label.chart-style": "图标风格",
+  "label.axis-max": "最大值",
+  "label.axis-max-auto": "最大值自动",
+  "label.axis-min": "最小值",
+  "label.axis-min-auto": "最小值自动",
+  "label.axis-step-size": "步长",
+  "label.bar-spacing": "条形间距",
+  "label.border-width": "边框宽度",
+  "label.chart": "图表",
+  "label.chart-annotation": "注释",
+  "label.chart-annotation-type": "注释类型",
+  "label.chart-style": "图表样式",
   "label.chart-type": "图表类型",
   "label.color": "颜色",
-  "label.data-key": "数据键",
+  "label.data-key": "数据引用",
   "label.display-tick": "显示刻度",
   "label.fill": "填充",
   "label.font-color": "字体颜色",
   "label.font-size": "大小",
   "label.grid-line": "网格线",
+  "label.horizontal-anchor": "水平锚点",
   "label.label": "标签",
-  "label.legend": "范例",
-  "label.line-tension": "线张力",
-  "label.multi-axis": "多轴",
+  "label.legend": "图例",
+  "label.line-tension": "张力",
+  "label.multi-axis": "双轴",
   "label.point-shape": "点形状",
   "label.point-size": "点大小",
   "label.position": "位置",
   "label.series": "系列",
   "label.series-type": "系列类型",
   "label.stack-group": "堆叠组",
-  "label.bar-spacing": "柱间距",
   "label.stacked": "堆叠",
-  "label.target-axis": "对象轴",
+  "label.stroke-style": "线条样式",
+  "label.stroke-thickness": "线条厚度",
+  "label.target-axis": "目标轴",
+  "label.theme": "主题",
   "label.tick-spacing": "刻度间距",
   "label.title": "标题",
-  "label.theme": "主题",
   "label.tooltip": "工具提示",
-  "label.value-display": "显示值",
+  "label.value-display": "值显示",
   "label.value-format": "值格式",
-  "label.value-prefix": "数据前缀",
-  "label.value-suffix": "数据后缀",
-  "label.x-axes": "X轴",
-  "label.y-2nd-axes": "Y辅助轴",
-  "label.y-axes": "Y轴",
-  "label.z-axes": "Z轴",
-  "label.animation": "动画"
+  "label.value-prefix": "值前缀",
+  "label.value-suffix": "值后缀",
+  "label.vertical-anchor": "垂直锚点",
+  "label.x-axes": "X 轴",
+  "label.y-2nd-axes": "Y 辅助轴",
+  "label.y-axes": "Y 轴",
+  "label.z-axes": "Z 轴"
 }

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