@operato/chart 9.0.0-beta.7 → 9.0.0-beta.84

package/dist/src/editors/templates/series.js.map

@@ -1 +1 @@
-{"version":3,"file":"series.js","sourceRoot":"","sources":["../../../../src/editors/templates/series.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { LitElement, html, PropertyValues, nothing } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { keyed } from 'lit/directives/keyed.js'\nimport { MdIcon } from '@material/web/icon/icon.js'\nimport { random as randomColor, TinyColor } from '@ctrl/tinycolor'\n\nimport { Configurer } from '../configurer.js'\nimport './display-value.js'\n\n@customElement('ox-chart-series')\nexport class MultipleSeriesTemplate extends LitElement {\n  createRenderRoot() {\n    return this\n  }\n\n  @property({ type: Object }) configurer!: Configurer\n  @property({ type: String }) chartType?: OperatoChart.ChartType\n\n  @query('#series-tabs') seriesTabs!: HTMLElement\n  @query('#series-tab-nav-left-button') seriesTabNavLeftButton!: MdIcon\n  @query('#series-tab-nav-right-button') seriesTabNavRightButton!: MdIcon\n\n  protected updated(_changedProperties: PropertyValues): void {\n    if (_changedProperties.has('configurer') || _changedProperties.has('chartType')) {\n      this.requestUpdate()\n    }\n  }\n\n  get value() {\n    return this.configurer.datasets\n  }\n\n  render() {\n    return keyed(\n      this.configurer.currentSeriesIndex,\n      html`\n        <div id=\"series-properties-container\" fullwidth>\n          <div id=\"series-tab-header\" @wheel=${this._onWheelScroll}>\n            <md-icon id=\"series-tab-nav-left-button\" @click=${this._scrollLeft}>chevron_left</md-icon>\n            <div id=\"series-tabs\" active-tab-index=${this.configurer.currentSeriesIndex} fit-container>\n              ${this._renderTabs()}\n            </div>\n            <md-icon id=\"series-tab-nav-right-button\" @click=${this._scrollRight}>chevron_right</md-icon>\n          </div>\n          <div id=\"add-series-button-container\">\n            <md-icon id=\"add-series-button\" @click=${this._addSeries}>add</md-icon>\n          </div>\n          ${this._renderSeriesForm()}\n        </div>\n      `\n    )\n  }\n\n  private _renderTabs() {\n    return this.configurer.datasets.map(\n      (dataset: OperatoChart.Dataset, index: number) => html`\n        <div\n          data-series=${index + 1}\n          data-tab-index=${index}\n          tab\n          ?selected=${index === this.configurer.currentSeriesIndex}\n          @click=${() => this._selectTab(index)}\n        >\n          ${index + 1}\n          ${this.configurer.datasets.length > 1 && this.configurer.currentSeriesIndex === index\n            ? html`<md-icon @click=${() => this._removeSeries(index)}>close</md-icon>`\n            : html``}\n        </div>\n      `\n    )\n  }\n\n  private _renderSeriesForm() {\n    const configurer = this.configurer\n    const chartType = this.chartType\n\n    return html`\n      <div class=\"tab-content\">\n        <label for=\"data-key\"> <ox-i18n msgid=\"label.data-key\">Data Key</ox-i18n> </label>\n        <input id=\"data-key\" type=\"text\" value-key=\"dataKey\" .value=${configurer.dataKey || ''} />\n\n        ${chartType == 'horizontalBar' ||\n        chartType === 'doughnut' ||\n        chartType === 'pie' ||\n        chartType == 'radar' ||\n        chartType == 'polarArea'\n          ? nothing\n          : html`\n              <label for=\"series-type\"> <ox-i18n msgid=\"label.series-type\">Type</ox-i18n> </label>\n              <select\n                id=\"series-type\"\n                class=\"select-content\"\n                value-key=\"series.type\"\n                .value=${configurer.series.type || ''}\n              >\n                <option value=\"bar\" selected>Bar</option>\n                <option value=\"line\">Line</option>\n              </select>\n            `}\n\n        <label for=\"series-label\"> <ox-i18n msgid=\"label.label\">Label</ox-i18n> </label>\n        <input id=\"series-label\" type=\"text\" value-key=\"series.label\" .value=${configurer.series.label || ''} />\n\n        ${configurer.series.type === 'line'\n          ? html`\n              <label for=\"series-line-tension\"> <ox-i18n msgid=\"label.line-tension\">Line Tension</ox-i18n> </label>\n              <select\n                id=\"series-line-tension\"\n                class=\"select-content\"\n                value-key=\"series.lineTension\"\n                .value=${String(configurer.series.lineTension || 0)}\n              >\n                <option value=\"0.4\">Smooth</option>\n                <option value=\"0\">Angled</option>\n              </select>\n            `\n          : html``}\n        ${configurer.series.type === 'line'\n          ? html`\n              <label for=\"series-border-width\"> <ox-i18n msgid=\"label.border-width\">Border Width</ox-i18n> </label>\n              <input\n                id=\"series-border-width\"\n                type=\"number\"\n                value-key=\"series.borderWidth\"\n                .value=${String(configurer.series.borderWidth || 0)}\n              />\n            `\n          : html``}\n\n        <label for=\"series-color\"> <ox-i18n msgid=\"label.color\">Color</ox-i18n> </label>\n        <ox-input-color id=\"series-color\" value-key=\"color\" .value=${configurer.color}></ox-input-color>\n\n        ${configurer.series.type === 'line'\n          ? html`\n              <label for=\"series-point-style\"> <ox-i18n msgid=\"label.point-shape\">Point Shape</ox-i18n> </label>\n              <select\n                id=\"series-point-style\"\n                class=\"select-content\"\n                value-key=\"series.pointStyle\"\n                .value=${configurer.series.pointStyle || ''}\n              >\n                <option value=\"\">&nbsp;</option>\n                <option value=\"circle\">⚬</option>\n                <option value=\"triangle\">▵</option>\n                <option value=\"rect\">□</option>\n                <option value=\"rectRot\">◇</option>\n                <option value=\"cross\">+</option>\n                <option value=\"crossRot\">⨉</option>\n                <option value=\"star\">✱</option>\n                <option value=\"line\">―</option>\n                <option value=\"dash\">┄</option>\n              </select>\n\n              <label for=\"series-point-radius\"> <ox-i18n msgid=\"label.point-size\">Point Size</ox-i18n> </label>\n              <input\n                id=\"series-point-radius\"\n                type=\"number\"\n                value-key=\"series.pointRadius\"\n                .value=${String(configurer.series.pointRadius || 0)}\n              />\n            `\n          : html``}\n\n        <label for=\"series-stack\"> <ox-i18n msgid=\"label.stack-group\">Stack group</ox-i18n> </label>\n        <input id=\"series-stack\" type=\"text\" value-key=\"series.stack\" .value=${configurer.series.stack || ''} />\n\n        ${configurer.series.type === 'line'\n          ? html`\n              <input id=\"series-fill\" type=\"checkbox\" value-key=\"series.fill\" ?checked=${configurer.series.fill} />\n              <label for=\"series-fill\"> <ox-i18n msgid=\"label.fill\">Fill</ox-i18n> </label>\n            `\n          : html``}\n        ${configurer.multiAxis && configurer.series.type !== 'horizontalBar'\n          ? html`\n              <label for=\"series-y-axis-id\"> <ox-i18n msgid=\"label.target-axis\">Target Axis</ox-i18n> </label>\n              <select\n                id=\"series-y-axis-id\"\n                class=\"select-content\"\n                value-key=\"series.yAxisID\"\n                .value=${configurer.series.yAxisID || ''}\n              >\n                <option value=\"left\">Left</option>\n                <option value=\"right\">Right</option>\n              </select>\n            `\n          : html``}\n\n        <label></label>\n        <ox-chart-display-value .configurer=${configurer} fullwidth></ox-chart-display-value>\n      </div>\n    `\n  }\n\n  _getSeriesModel({\n    chartType,\n    datasetsLength,\n    lastSeriesColor\n  }: {\n    chartType: string\n    datasetsLength: number\n    lastSeriesColor: TinyColor\n  }) {\n    const addSeriesOption: any = {\n      label: `series ${datasetsLength + 1}`,\n      data: [],\n      borderWidth: 1,\n      dataKey: '',\n      yAxisID: 'left',\n      color: randomColor({\n        hue: lastSeriesColor.toHsv().h\n      }).toRgbString(),\n      stack: ''\n    }\n\n    addSeriesOption.type = addSeriesOption.chartType = chartType\n    return addSeriesOption\n  }\n\n  private _selectTab(index: number) {\n    this.configurer.setCurrentSeriesIndex(index)\n    this.requestUpdate()\n  }\n\n  private _removeSeries(index: number) {\n    this.configurer.removeSeries(index)\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n\n    this.requestUpdate()\n  }\n\n  private _addSeries() {\n    const configurer = this.configurer\n\n    if (!configurer.config.data.datasets) {\n      return\n    }\n\n    const lastSeriesIndex = configurer.config.data.datasets.length\n    const chartType = configurer.series.type || configurer.config.type\n    const color = configurer.datasets[lastSeriesIndex - 1]?.backgroundColor\n    const lastSeriesColor = new TinyColor(Array.isArray(color) ? color[0] : color)\n\n    const seriesModel = this._getSeriesModel({\n      chartType: chartType!,\n      datasetsLength: lastSeriesIndex,\n      lastSeriesColor\n    })\n\n    this.configurer.addSeries(seriesModel)\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n\n    this.requestUpdate()\n  }\n\n  private _onWheelScroll(event: WheelEvent) {\n    const tabContainer = this.seriesTabs\n    if (tabContainer) {\n      event.preventDefault()\n\n      tabContainer.scrollLeft += event.deltaY\n\n      this._onTabScroll()\n    }\n  }\n\n  private _scrollLeft() {\n    this._scrollTabContainer(-1)\n  }\n\n  private _scrollRight() {\n    this._scrollTabContainer(1)\n  }\n\n  private _scrollTabContainer(direction: number) {\n    const tabContainer = this.renderRoot!.querySelector<HTMLElement>('#series-tabs')\n    if (tabContainer) {\n      tabContainer.style.scrollBehavior = 'smooth'\n      tabContainer.scrollLeft += direction * tabContainer.clientWidth\n    }\n\n    setTimeout(() => {\n      tabContainer!.style.scrollBehavior = 'auto'\n      this._onTabScroll()\n    }, 300)\n  }\n\n  private _onTabScroll() {\n    let tabContainer: HTMLElement | null | undefined\n    let tabNavLeftButton: MdIcon\n    let tabNavRightButton: MdIcon\n\n    tabContainer = this.seriesTabs\n    tabNavLeftButton = this.seriesTabNavLeftButton\n    tabNavRightButton = this.seriesTabNavRightButton\n\n    if (!tabContainer) {\n      return\n    }\n\n    if (tabContainer.clientWidth == tabContainer.scrollWidth) {\n      tabNavLeftButton.setAttribute('disabled', '')\n      tabNavRightButton.setAttribute('disabled', '')\n    } else if (tabContainer.scrollLeft <= 0) {\n      tabNavLeftButton.setAttribute('disabled', '')\n      tabNavRightButton.removeAttribute('disabled')\n    } else if (tabContainer.scrollLeft + tabContainer.clientWidth >= tabContainer.scrollWidth) {\n      tabNavLeftButton.removeAttribute('disabled')\n      tabNavRightButton.setAttribute('disabled', '')\n    } else {\n      tabNavLeftButton.removeAttribute('disabled')\n      tabNavRightButton.removeAttribute('disabled')\n    }\n  }\n}\n"]}
+{"version":3,"file":"series.js","sourceRoot":"","sources":["../../../../src/editors/templates/series.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { LitElement, html, PropertyValues, nothing } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { keyed } from 'lit/directives/keyed.js'\nimport { MdIcon } from '@material/web/icon/icon.js'\nimport { random as randomColor, TinyColor } from '@ctrl/tinycolor'\n\nimport { Configurer } from '../configurer.js'\nimport type { OperatoChart } from '../../../types/types.d.ts'\n\nimport './display-value.js'\n\n@customElement('ox-chart-series')\nexport class MultipleSeriesTemplate extends LitElement {\n  createRenderRoot() {\n    return this\n  }\n\n  @property({ type: Object }) configurer!: Configurer\n  @property({ type: String }) chartType?: OperatoChart.ChartType\n\n  @query('#series-tabs') seriesTabs!: HTMLElement\n  @query('#series-tab-nav-left-button') seriesTabNavLeftButton!: MdIcon\n  @query('#series-tab-nav-right-button') seriesTabNavRightButton!: MdIcon\n\n  protected updated(_changedProperties: PropertyValues): void {\n    if (_changedProperties.has('configurer') || _changedProperties.has('chartType')) {\n      this.requestUpdate()\n    }\n  }\n\n  get value() {\n    return this.configurer.datasets\n  }\n\n  render() {\n    return keyed(\n      this.configurer.currentSeriesIndex,\n      html`\n        <div id=\"series-properties-container\" fullwidth>\n          <div id=\"series-tab-header\" @wheel=${this._onWheelScroll}>\n            <md-icon id=\"series-tab-nav-left-button\" @click=${this._scrollLeft}>chevron_left</md-icon>\n            <div id=\"series-tabs\" active-tab-index=${this.configurer.currentSeriesIndex} fit-container>\n              ${this._renderTabs()}\n            </div>\n            <md-icon id=\"series-tab-nav-right-button\" @click=${this._scrollRight}>chevron_right</md-icon>\n          </div>\n          <div id=\"add-series-button-container\">\n            <md-icon id=\"add-series-button\" @click=${this._addSeries}>add</md-icon>\n          </div>\n          ${this._renderSeriesForm()}\n        </div>\n      `\n    )\n  }\n\n  private _renderTabs() {\n    return this.configurer.datasets.map(\n      (dataset: OperatoChart.Dataset, index: number) => html`\n        <div\n          data-series=${index + 1}\n          data-tab-index=${index}\n          tab\n          ?selected=${index === this.configurer.currentSeriesIndex}\n          @click=${() => this._selectTab(index)}\n        >\n          ${index + 1}\n          ${this.configurer.datasets.length > 1 && this.configurer.currentSeriesIndex === index\n            ? html`<md-icon @click=${() => this._removeSeries(index)}>close</md-icon>`\n            : html``}\n        </div>\n      `\n    )\n  }\n\n  private _renderSeriesForm() {\n    const configurer = this.configurer\n    const chartType = this.chartType\n\n    return html`\n      <div class=\"tab-content\">\n        <label for=\"data-key\"> <ox-i18n msgid=\"label.data-key\">Data Key</ox-i18n> </label>\n        <input id=\"data-key\" type=\"text\" value-key=\"dataKey\" .value=${configurer.dataKey || ''} />\n\n        ${chartType == 'horizontalBar' ||\n        chartType === 'doughnut' ||\n        chartType === 'pie' ||\n        chartType == 'radar' ||\n        chartType == 'polarArea'\n          ? nothing\n          : html`\n              <label for=\"series-type\"> <ox-i18n msgid=\"label.series-type\">Type</ox-i18n> </label>\n              <select\n                id=\"series-type\"\n                class=\"select-content\"\n                value-key=\"series.type\"\n                .value=${configurer.series.type || ''}\n              >\n                <option value=\"bar\" selected>Bar</option>\n                <option value=\"line\">Line</option>\n              </select>\n            `}\n\n        <label for=\"series-label\"> <ox-i18n msgid=\"label.label\">Label</ox-i18n> </label>\n        <input id=\"series-label\" type=\"text\" value-key=\"series.label\" .value=${configurer.series.label || ''} />\n\n        ${configurer.series.type === 'line'\n          ? html`\n              <label for=\"series-line-tension\"> <ox-i18n msgid=\"label.line-tension\">Line Tension</ox-i18n> </label>\n              <select\n                id=\"series-line-tension\"\n                class=\"select-content\"\n                value-key=\"series.lineTension\"\n                .value=${String(configurer.series.lineTension || 0)}\n              >\n                <option value=\"0.4\">Smooth</option>\n                <option value=\"0\">Angled</option>\n              </select>\n            `\n          : html``}\n        ${configurer.series.type === 'line'\n          ? html`\n              <label for=\"series-border-width\"> <ox-i18n msgid=\"label.border-width\">Border Width</ox-i18n> </label>\n              <input\n                id=\"series-border-width\"\n                type=\"number\"\n                value-key=\"series.borderWidth\"\n                .value=${String(configurer.series.borderWidth || 0)}\n              />\n            `\n          : html``}\n\n        <label for=\"series-color\"> <ox-i18n msgid=\"label.color\">Color</ox-i18n> </label>\n        <ox-input-color id=\"series-color\" value-key=\"color\" .value=${configurer.color}></ox-input-color>\n\n        ${configurer.series.type === 'line'\n          ? html`\n              <label for=\"series-point-style\"> <ox-i18n msgid=\"label.point-shape\">Point Shape</ox-i18n> </label>\n              <select\n                id=\"series-point-style\"\n                class=\"select-content\"\n                value-key=\"series.pointStyle\"\n                .value=${configurer.series.pointStyle || ''}\n              >\n                <option value=\"\">&nbsp;</option>\n                <option value=\"circle\">⚬</option>\n                <option value=\"triangle\">▵</option>\n                <option value=\"rect\">□</option>\n                <option value=\"rectRot\">◇</option>\n                <option value=\"cross\">+</option>\n                <option value=\"crossRot\">⨉</option>\n                <option value=\"star\">✱</option>\n                <option value=\"line\">―</option>\n                <option value=\"dash\">┄</option>\n              </select>\n\n              <label for=\"series-point-radius\"> <ox-i18n msgid=\"label.point-size\">Point Size</ox-i18n> </label>\n              <input\n                id=\"series-point-radius\"\n                type=\"number\"\n                value-key=\"series.pointRadius\"\n                .value=${String(configurer.series.pointRadius || 0)}\n              />\n            `\n          : html``}\n\n        <label for=\"series-stack\"> <ox-i18n msgid=\"label.stack-group\">Stack group</ox-i18n> </label>\n        <input id=\"series-stack\" type=\"text\" value-key=\"series.stack\" .value=${configurer.series.stack || ''} />\n\n        ${configurer.series.type === 'line'\n          ? html`\n              <input id=\"series-fill\" type=\"checkbox\" value-key=\"series.fill\" ?checked=${configurer.series.fill} />\n              <label for=\"series-fill\"> <ox-i18n msgid=\"label.fill\">Fill</ox-i18n> </label>\n            `\n          : html``}\n        ${configurer.multiAxis && configurer.series.type !== 'horizontalBar'\n          ? html`\n              <label for=\"series-y-axis-id\"> <ox-i18n msgid=\"label.target-axis\">Target Axis</ox-i18n> </label>\n              <select\n                id=\"series-y-axis-id\"\n                class=\"select-content\"\n                value-key=\"series.yAxisID\"\n                .value=${configurer.series.yAxisID || ''}\n              >\n                <option value=\"left\">Left</option>\n                <option value=\"right\">Right</option>\n              </select>\n            `\n          : html``}\n\n        <label></label>\n        <ox-chart-display-value .configurer=${configurer} fullwidth></ox-chart-display-value>\n      </div>\n    `\n  }\n\n  _getSeriesModel({\n    chartType,\n    datasetsLength,\n    lastSeriesColor\n  }: {\n    chartType: string\n    datasetsLength: number\n    lastSeriesColor: TinyColor\n  }) {\n    const addSeriesOption: any = {\n      label: `series ${datasetsLength + 1}`,\n      data: [],\n      borderWidth: 1,\n      dataKey: '',\n      yAxisID: 'left',\n      color: randomColor({\n        hue: lastSeriesColor.toHsv().h\n      }).toRgbString(),\n      stack: ''\n    }\n\n    addSeriesOption.type = addSeriesOption.chartType = chartType\n    return addSeriesOption\n  }\n\n  private _selectTab(index: number) {\n    this.configurer.setCurrentSeriesIndex(index)\n    this.requestUpdate()\n  }\n\n  private _removeSeries(index: number) {\n    this.configurer.removeSeries(index)\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n\n    this.requestUpdate()\n  }\n\n  private _addSeries() {\n    const configurer = this.configurer\n\n    if (!configurer.config.data.datasets) {\n      return\n    }\n\n    const lastSeriesIndex = configurer.config.data.datasets.length\n    const chartType = configurer.series.type || configurer.config.type\n    const color = configurer.datasets[lastSeriesIndex - 1]?.backgroundColor\n    const lastSeriesColor = new TinyColor(Array.isArray(color) ? color[0] : color)\n\n    const seriesModel = this._getSeriesModel({\n      chartType: chartType!,\n      datasetsLength: lastSeriesIndex,\n      lastSeriesColor\n    })\n\n    this.configurer.addSeries(seriesModel)\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n\n    this.requestUpdate()\n  }\n\n  private _onWheelScroll(event: WheelEvent) {\n    const tabContainer = this.seriesTabs\n    if (tabContainer) {\n      event.preventDefault()\n\n      tabContainer.scrollLeft += event.deltaY\n\n      this._onTabScroll()\n    }\n  }\n\n  private _scrollLeft() {\n    this._scrollTabContainer(-1)\n  }\n\n  private _scrollRight() {\n    this._scrollTabContainer(1)\n  }\n\n  private _scrollTabContainer(direction: number) {\n    const tabContainer = this.renderRoot!.querySelector<HTMLElement>('#series-tabs')\n    if (tabContainer) {\n      tabContainer.style.scrollBehavior = 'smooth'\n      tabContainer.scrollLeft += direction * tabContainer.clientWidth\n    }\n\n    setTimeout(() => {\n      tabContainer!.style.scrollBehavior = 'auto'\n      this._onTabScroll()\n    }, 300)\n  }\n\n  private _onTabScroll() {\n    let tabContainer: HTMLElement | null | undefined\n    let tabNavLeftButton: MdIcon\n    let tabNavRightButton: MdIcon\n\n    tabContainer = this.seriesTabs\n    tabNavLeftButton = this.seriesTabNavLeftButton\n    tabNavRightButton = this.seriesTabNavRightButton\n\n    if (!tabContainer) {\n      return\n    }\n\n    if (tabContainer.clientWidth == tabContainer.scrollWidth) {\n      tabNavLeftButton.setAttribute('disabled', '')\n      tabNavRightButton.setAttribute('disabled', '')\n    } else if (tabContainer.scrollLeft <= 0) {\n      tabNavLeftButton.setAttribute('disabled', '')\n      tabNavRightButton.removeAttribute('disabled')\n    } else if (tabContainer.scrollLeft + tabContainer.clientWidth >= tabContainer.scrollWidth) {\n      tabNavLeftButton.removeAttribute('disabled')\n      tabNavRightButton.setAttribute('disabled', '')\n    } else {\n      tabNavLeftButton.removeAttribute('disabled')\n      tabNavRightButton.removeAttribute('disabled')\n    }\n  }\n}\n"]}

package/dist/src/index.d.ts

@@ -0,0 +1 @@
+export * from './editors/index.js';

package/dist/src/index.js

@@ -1,2 +1,3 @@
-"use strict";
+/* never export ox-chart-js.js and ox-scichart.js to prevent chart.js version conflict */
+export * from './editors/index.js';
 //# sourceMappingURL=index.js.map

package/dist/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"","sourcesContent":[""]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,yFAAyF;AACzF,cAAc,oBAAoB,CAAA","sourcesContent":["/* never export ox-chart-js.js and ox-scichart.js to prevent chart.js version conflict */\nexport * from './editors/index.js'\n"]}

package/dist/src/scichart/ox-scichart.d.ts

@@ -1,4 +1,5 @@
-import { LitElement } from 'lit';
+import { LitElement, PropertyValues } from 'lit';
+import type { OperatoChart } from '../../types/types.d.ts';
 declare global {
     interface Window {
         sciChartLoaded: boolean;
@@ -17,7 +18,7 @@ declare class OxSciChart extends LitElement {
     firstUpdated(): void;
     loadSciChart(): Promise<void>;
     initializeSciChart(): Promise<void>;
-    updated(changedProperties: Map<string | number | symbol, unknown>): Promise<void>;
+    updated(changedProperties: PropertyValues<this>): Promise<void>;
     appendData(appendum: {
         [attr: string]: any;
     }[]): Promise<void>;

package/dist/src/scichart/ox-scichart.js

@@ -51,7 +51,7 @@ let OxSciChart = class OxSciChart extends LitElement {
         this.initializeSciChart();
     }
     async initializeSciChart() {
-        const { chart, dataSeries } = (await buildSciChart(this.config, this.container, {})) || {};
+        const { chart, dataSeries } = (await buildSciChart(this.config, this.container, {}, this.data)) || {};
         this.chart = chart;
         this.dataSeries = dataSeries;
         this.updateDataSeries();
@@ -72,7 +72,7 @@ let OxSciChart = class OxSciChart extends LitElement {
         this.dataSeries.forEach(ds => ds.clear());
         const newData = this.dataSet;
         newData.forEach((data, index) => {
-            const filteredData = data.filter(d => typeof d.yValue === 'number');
+            const filteredData = data.filter(d => typeof d.yValue === 'number' && !isNaN(d.yValue) && d.yValue !== null);
             if (filteredData.length > 0) {
                 this.dataSeries[index].appendRange(filteredData.map(d => d.xValue), filteredData.map(d => d.yValue));
             }
@@ -97,9 +97,13 @@ let OxSciChart = class OxSciChart extends LitElement {
                     console.error('Invalid date:', item[attrX]);
                     return;
                 }
+                const yValue = item[dataset.dataKey];
+                if (yValue === null || yValue === undefined) {
+                    return;
+                }
                 return {
                     xValue: xValue.getTime() / 1000,
-                    yValue: item[dataset.dataKey]
+                    yValue: yValue
                 };
             })
                 .filter(Boolean);

package/dist/src/scichart/ox-scichart.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-scichart.js","sourceRoot":"","sources":["../../../src/scichart/ox-scichart.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { property, query, customElement } from 'lit/decorators.js'\nimport { buildSciChart } from './scichart-builder.js'\n\ndeclare global {\n  interface Window {\n    sciChartLoaded: boolean\n    sciChartLoadingPromise: Promise<void>\n  }\n}\n\n@customElement('ox-scichart')\nclass OxSciChart extends LitElement {\n  @property({ type: Object }) config: OperatoChart.ChartConfig | null = null\n  @property({ type: Array }) data: { [attr: string]: any }[] = []\n\n  private chart: any = null\n  private dataSeries: any[] = []\n\n  @query('div#container') container!: HTMLDivElement\n\n  static styles = css`\n    :host {\n      display: block;\n      width: 100%;\n      height: 100%;\n    }\n\n    .chart-container {\n      display: flex;\n      width: 100%;\n      height: 100%;\n    }\n\n    .chart-content {\n      flex: 1;\n      position: relative;\n    }\n  `\n\n  firstUpdated() {\n    this.loadSciChart()\n  }\n\n  async loadSciChart() {\n    if (!window.sciChartLoaded) {\n      if (!window.sciChartLoadingPromise) {\n        window.sciChartLoadingPromise = new Promise<void>(resolve => {\n          const script = document.createElement('script')\n          script.src = 'https://cdn.jsdelivr.net/npm/scichart/index.min.js'\n          script.crossOrigin = 'anonymous'\n          script.onload = () => {\n            window.sciChartLoaded = true\n\n            SciChart.SciChartSurface.UseCommunityLicense()\n\n            resolve()\n          }\n          document.head.appendChild(script)\n        })\n      }\n\n      await window.sciChartLoadingPromise\n    }\n\n    this.initializeSciChart()\n  }\n\n  async initializeSciChart() {\n    const { chart, dataSeries } = (await buildSciChart(this.config, this.container, {})) || {}\n\n    this.chart = chart\n    this.dataSeries = dataSeries!\n\n    this.updateDataSeries()\n  }\n\n  async updated(changedProperties: Map<string | number | symbol, unknown>) {\n    if (changedProperties.has('config') && this.config) {\n      await this.initializeSciChart()\n    }\n\n    if (changedProperties.has('data')) {\n      this.updateDataSeries()\n      this.chart?.sciChartSurface.zoomExtents()\n    }\n  }\n\n  async appendData(appendum: { [attr: string]: any }[]) {}\n\n  updateDataSeries() {\n    if (!this.dataSeries?.length) return\n\n    this.dataSeries.forEach(ds => ds.clear())\n    const newData = this.dataSet\n\n    newData.forEach((data, index) => {\n      const filteredData = data.filter(d => typeof d.yValue === 'number')\n\n      if (filteredData.length > 0) {\n        this.dataSeries[index].appendRange(\n          filteredData.map(d => d.xValue),\n          filteredData.map(d => d.yValue)\n        )\n      }\n    })\n\n    this.chart?.sciChartSurface.zoomExtents()\n    this.chart?.sciChartSurface.invalidateElement()\n  }\n\n  get dataSet(): { xValue: number; yValue: number }[][] {\n    const { config, data } = this\n    const { datasets = [], labelDataKey: attrX } = config?.data || {}\n\n    if (!(data instanceof Array) || !attrX) {\n      return []\n    }\n\n    return datasets.map(dataset => {\n      return data\n        .map(item => {\n          if (!item || typeof item !== 'object') {\n            return\n          }\n\n          const xValue = new Date(item[attrX])\n          if (isNaN(xValue.getTime())) {\n            console.error('Invalid date:', item[attrX])\n            return\n          }\n\n          return {\n            xValue: xValue.getTime() / 1000,\n            yValue: item[dataset.dataKey!]\n          }\n        })\n        .filter(Boolean) as { xValue: number; yValue: number }[]\n    })\n  }\n\n  render() {\n    return html` <div id=\"container\" class=\"chart-container\"></div> `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ox-scichart': OxSciChart\n  }\n}\n"]}
+{"version":3,"file":"ox-scichart.js","sourceRoot":"","sources":["../../../src/scichart/ox-scichart.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, PropertyValues } from 'lit'\nimport { property, query, customElement } from 'lit/decorators.js'\nimport { buildSciChart } from './scichart-builder.js'\nimport type { OperatoChart } from '../../types/types.d.ts'\n\ndeclare global {\n  interface Window {\n    sciChartLoaded: boolean\n    sciChartLoadingPromise: Promise<void>\n  }\n}\n\n@customElement('ox-scichart')\nclass OxSciChart extends LitElement {\n  @property({ type: Object }) config: OperatoChart.ChartConfig | null = null\n  @property({ type: Array }) data: { [attr: string]: any }[] = []\n\n  private chart: any = null\n  private dataSeries: any[] = []\n\n  @query('div#container') container!: HTMLDivElement\n\n  static styles = css`\n    :host {\n      display: block;\n      width: 100%;\n      height: 100%;\n    }\n\n    .chart-container {\n      display: flex;\n      width: 100%;\n      height: 100%;\n    }\n\n    .chart-content {\n      flex: 1;\n      position: relative;\n    }\n  `\n\n  firstUpdated() {\n    this.loadSciChart()\n  }\n\n  async loadSciChart() {\n    if (!window.sciChartLoaded) {\n      if (!window.sciChartLoadingPromise) {\n        window.sciChartLoadingPromise = new Promise<void>(resolve => {\n          const script = document.createElement('script')\n          script.src = 'https://cdn.jsdelivr.net/npm/scichart/index.min.js'\n          script.crossOrigin = 'anonymous'\n          script.onload = () => {\n            window.sciChartLoaded = true\n\n            SciChart.SciChartSurface.UseCommunityLicense()\n\n            resolve()\n          }\n          document.head.appendChild(script)\n        })\n      }\n\n      await window.sciChartLoadingPromise\n    }\n\n    this.initializeSciChart()\n  }\n\n  async initializeSciChart() {\n    const { chart, dataSeries } = (await buildSciChart(this.config, this.container, {}, this.data)) || {}\n\n    this.chart = chart\n    this.dataSeries = dataSeries!\n\n    this.updateDataSeries()\n  }\n\n  async updated(changedProperties: PropertyValues<this>) {\n    if (changedProperties.has('config') && this.config) {\n      await this.initializeSciChart()\n    }\n\n    if (changedProperties.has('data')) {\n      this.updateDataSeries()\n      this.chart?.sciChartSurface.zoomExtents()\n    }\n  }\n\n  async appendData(appendum: { [attr: string]: any }[]) {}\n\n  updateDataSeries() {\n    if (!this.dataSeries?.length) return\n\n    this.dataSeries.forEach(ds => ds.clear())\n    const newData = this.dataSet\n\n    newData.forEach((data, index) => {\n      const filteredData = data.filter(d => typeof d.yValue === 'number' && !isNaN(d.yValue) && d.yValue !== null)\n\n      if (filteredData.length > 0) {\n        this.dataSeries[index].appendRange(\n          filteredData.map(d => d.xValue),\n          filteredData.map(d => d.yValue)\n        )\n      }\n    })\n\n    this.chart?.sciChartSurface.zoomExtents()\n    this.chart?.sciChartSurface.invalidateElement()\n  }\n\n  get dataSet(): { xValue: number; yValue: number }[][] {\n    const { config, data } = this\n    const { datasets = [], labelDataKey: attrX } = config?.data || {}\n\n    if (!(data instanceof Array) || !attrX) {\n      return []\n    }\n\n    return datasets.map(dataset => {\n      return data\n        .map(item => {\n          if (!item || typeof item !== 'object') {\n            return\n          }\n\n          const xValue = new Date(item[attrX])\n          if (isNaN(xValue.getTime())) {\n            console.error('Invalid date:', item[attrX])\n            return\n          }\n\n          const yValue = item[dataset.dataKey!]\n          if (yValue === null || yValue === undefined) {\n            return\n          }\n\n          return {\n            xValue: xValue.getTime() / 1000,\n            yValue: yValue\n          }\n        })\n        .filter(Boolean) as { xValue: number; yValue: number }[]\n    })\n  }\n\n  render() {\n    return html` <div id=\"container\" class=\"chart-container\"></div> `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ox-scichart': OxSciChart\n  }\n}\n"]}

package/dist/src/scichart/scichart-builder.d.ts

@@ -1,8 +1,9 @@
+import type { OperatoChart } from '../../types/types.d.ts';
 export declare function buildSciChart(config: OperatoChart.ChartConfig | undefined | null, container: any, { fontSize, fontFamily, fontColor }: {
     fontSize?: number;
     fontFamily?: string;
     fontColor?: string;
-}): Promise<{
+}, rawData?: any[]): Promise<{
     chart: any;
     dataSeries: any[];
 } | undefined>;

package/dist/src/scichart/scichart-builder.js

@@ -23,12 +23,34 @@ function calculatePrecision(stepSize = 1) {
     // 소수점이 없는 경우, precision은 0
     return 0;
 }
-export async function buildSciChart(config, container, { fontSize = 14, fontFamily = 'Roboto', fontColor }) {
+export async function buildSciChart(config, container, { fontSize = 14, fontFamily = 'Roboto', fontColor }, rawData) {
     if (!config) {
         return;
     }
     const { SciChartSurface, SciChartJSLightTheme, SciChartJSDarkv2Theme, XyDataSeries, FastLineRenderableSeries, SplineLineRenderableSeries, FastColumnRenderableSeries, StackedColumnRenderableSeries, StackedMountainRenderableSeries, StackedColumnCollection, StackedMountainCollection, NumericAxis, DateTimeNumericAxis, ENumericFormat, EAutoRange, EAxisAlignment, ECoordinateMode, EHorizontalAnchorPoint, EVerticalAnchorPoint, NumberRange, MouseWheelZoomModifier, RubberBandXyZoomModifier, ZoomPanModifier, ZoomExtentsModifier, RolloverModifier, SmartDateLabelProvider, NumericLabelProvider, EllipsePointMarker, SquarePointMarker, TrianglePointMarker, CrossPointMarker, XPointMarker, WaveAnimation, LegendModifier, XAxisDragModifier, YAxisDragModifier, TextAnnotation, LineAnnotation, BoxAnnotation, HorizontalLineAnnotation, VerticalLineAnnotation } = SciChart;
+    // Helper 함수 - verticalAnchorPoint에 따라 적절한 y1 값을 반환
+    function getYPositionByAnchor(anchor) {
+        if (anchor === EVerticalAnchorPoint.Top) {
+            return 0.05; // 상단에서 5% 위치
+        }
+        else if (anchor === EVerticalAnchorPoint.Center) {
+            return 0.5; // 중앙
+        }
+        else if (anchor === EVerticalAnchorPoint.Bottom) {
+            return 0.95; // 차트 맨 아래
+        }
+        // 기본값 (Bottom이거나 값이 없는 경우)
+        return 0.95; // 바닥에서 5% 위치
+    }
+    // Helper 함수 - verticalAnchorPoint에 따라 적절한 좌표 모드 반환
+    function getYCoordModeByAnchor(anchor) {
+        // verticalAnchorPoint 값과 상관없이 상대 좌표 사용
+        return ECoordinateMode.Relative;
+    }
     class LocalTimeLabelProvider extends SmartDateLabelProvider {
+        constructor(options) {
+            super(options);
+        }
         formatLabel(value) {
             const date = new Date(value);
             try {
@@ -76,7 +98,7 @@ export async function buildSciChart(config, container, { fontSize = 14, fontFami
     xAxes.forEach((axis, index) => {
         const { axisTitle, ticks } = axis;
         const { autoMax, autoMin, min, max, stepSize, beginAtZero, color = fontColor, textStrokeColor = fontColor, display = !!axisTitle } = ticks || {};
-        const labelProvider = new SmartDateLabelProvider({
+        const labelProvider = new LocalTimeLabelProvider({
             showWiderDateOnFirstLabel: true,
             showYearOnWiderDate: true,
             dateOffset: getLocalTimeOffset()
@@ -301,67 +323,207 @@ export async function buildSciChart(config, container, { fontSize = 14, fontFami
                 : 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),
-                        xCoordinateMode: annotation.xCoordinateMode || ECoordinateMode.DataValue,
-                        yCoordinateMode: annotation.yCoordinateMode || ECoordinateMode.DataValue
-                    });
-                    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: annotation.xCoordinateMode || ECoordinateMode.DataValue,
-                        yCoordinateMode: annotation.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,
-                        xCoordinateMode: annotation.xCoordinateMode || ECoordinateMode.DataValue,
-                        yCoordinateMode: annotation.yCoordinateMode || ECoordinateMode.DataValue
-                    });
-                    break;
-                case 'horizontalLine':
-                    sciAnnotation = new HorizontalLineAnnotation({
-                        y1: annotation.y1,
-                        stroke: convertColor(annotation.stroke, '#FF0000'),
-                        strokeThickness: annotation.strokeThickness,
-                        xCoordinateMode: annotation.xCoordinateMode || ECoordinateMode.DataValue,
-                        yCoordinateMode: annotation.yCoordinateMode || ECoordinateMode.DataValue
-                    });
-                    break;
-                case 'verticalLine':
-                    sciAnnotation = new VerticalLineAnnotation({
-                        x1: annotation.x1,
-                        stroke: convertColor(annotation.stroke, '#FF0000'),
-                        strokeThickness: annotation.strokeThickness,
-                        xCoordinateMode: annotation.xCoordinateMode || ECoordinateMode.DataValue,
-                        yCoordinateMode: annotation.yCoordinateMode || ECoordinateMode.DataValue
-                    });
-                    break;
-                default:
-                    console.error('Unknown annotation type:', annotation.type);
-                    break;
+            // dataKey가 있는 경우 데이터와 연동
+            if (annotation.dataKey && rawData && rawData.length > 0) {
+                const attrX = fromData?.labelDataKey || ''; // X축 데이터 키 가져오기
+                if (annotation.type === 'verticalLine') {
+                    // 수직 라인: falsy => truthy 변화 지점에만 표시
+                    let prevFalsy = true; // 초기값을 true로 설정하여 첫 값이 truthy면 포함
+                    for (let i = 0; i < rawData.length; i++) {
+                        // 원본 데이터에서 직접 값 가져오기
+                        const currentValue = rawData[i][annotation.dataKey];
+                        const isTruthy = !!currentValue;
+                        if (isTruthy && prevFalsy) {
+                            // falsy에서 truthy로 변화한 지점
+                            // X 값은 인덱스나 타임스탬프 사용
+                            const xValue = attrX ? new Date(rawData[i][attrX]).getTime() / 1000 : i;
+                            // 수직선 추가
+                            const sciVerticalLine = new VerticalLineAnnotation({
+                                x1: xValue,
+                                stroke: convertColor(annotation.stroke, '#FF0000'),
+                                strokeThickness: annotation.strokeThickness,
+                                xCoordinateMode: annotation.xCoordinateMode || ECoordinateMode.DataValue,
+                                yCoordinateMode: annotation.yCoordinateMode || ECoordinateMode.DataValue
+                            });
+                            sciChartSurface.annotations.add(sciVerticalLine);
+                            // 텍스트 레이블 추가
+                            if (annotation.text !== undefined || currentValue !== undefined) {
+                                // 표시할 텍스트 결정
+                                const labelText = annotation.text || `${annotation.dataKey}: ${currentValue}`;
+                                // 텍스트 주석 추가 (수직선 상단에)
+                                const sciTextAnnotation = new TextAnnotation({
+                                    // 동일한 X 위치 사용
+                                    x1: xValue,
+                                    // verticalAnchorPoint에 따라 Y 위치 결정
+                                    y1: getYPositionByAnchor(annotation.verticalAnchorPoint),
+                                    text: labelText,
+                                    // 가운데 정렬
+                                    horizontalAnchorPoint: annotation.horizontalAnchorPoint || EHorizontalAnchorPoint.Center,
+                                    // 텍스트의 하단이 y1에 위치
+                                    verticalAnchorPoint: annotation.verticalAnchorPoint || EVerticalAnchorPoint.Bottom,
+                                    fontFamily: annotation.fontFamily || fontFamily,
+                                    fontSize: annotation.fontSize || 14,
+                                    textColor: convertColor(annotation.stroke, '#FF0000'),
+                                    background: 'rgba(255, 255, 255, 0.7)', // 텍스트 배경 추가
+                                    padding: { left: 5, top: 5, right: 5, bottom: 5 }, // 패딩 추가
+                                    xCoordinateMode: ECoordinateMode.DataValue,
+                                    // verticalAnchorPoint에 따라 좌표 모드 결정
+                                    yCoordinateMode: getYCoordModeByAnchor(annotation.verticalAnchorPoint)
+                                });
+                                sciChartSurface.annotations.add(sciTextAnnotation);
+                            }
+                        }
+                        prevFalsy = !isTruthy;
+                    }
+                    // 기본 annotation 처리 건너뛰기
+                    return;
+                }
+                else if (annotation.type === 'text') {
+                    // 텍스트: 해당 값을 그대로 출력
+                    for (let i = 0; i < rawData.length; i++) {
+                        // 원본 데이터에서 직접 값 가져오기
+                        const value = rawData[i][annotation.dataKey];
+                        // null이나 undefined가 아닌 값만 표시
+                        if (value !== undefined && value !== null) {
+                            // X 값은 인덱스나 타임스탬프 사용
+                            const xValue = attrX ? new Date(rawData[i][attrX]).getTime() / 1000 : i;
+                            const sciTextAnnotation = new TextAnnotation({
+                                x1: xValue,
+                                y1: value,
+                                text: String(value),
+                                horizontalAnchorPoint,
+                                verticalAnchorPoint,
+                                fontSize: annotation.fontSize,
+                                fontFamily: annotation.fontFamily,
+                                textColor: convertColor(annotation.stroke, fontColor),
+                                xCoordinateMode: annotation.xCoordinateMode || ECoordinateMode.DataValue,
+                                yCoordinateMode: annotation.yCoordinateMode || ECoordinateMode.DataValue
+                            });
+                            sciChartSurface.annotations.add(sciTextAnnotation);
+                        }
+                    }
+                    // 기본 annotation 처리 건너뛰기
+                    return;
+                }
+                else {
+                    // 다른 타입의 annotation은 원래 로직으로 처리
+                    // 원본 데이터에서 값 추출
+                    const dataValues = rawData.map(item => item[annotation.dataKey]).filter(v => v !== undefined);
+                    if (dataValues.length > 0) {
+                        // annotation 타입에 따라 데이터 값을 적용
+                        if (annotation.type === 'horizontalLine') {
+                            annotation.y1 = dataValues[0];
+                        }
+                        else if (annotation.type === 'line' || annotation.type === 'box') {
+                            // 데이터 값이 최소 한 개 이상인 경우에만 적용
+                            if (annotation.yCoordinateMode === 'DataValue') {
+                                annotation.y1 = dataValues[0];
+                            }
+                            if (annotation.xCoordinateMode === 'DataValue' && !annotation.x1) {
+                                annotation.x1 = 0;
+                            }
+                            // 두 번째 지점이 필요한 경우 (line, box)
+                            if (dataValues.length > 1) {
+                                if (annotation.yCoordinateMode === 'DataValue') {
+                                    annotation.y2 = dataValues[dataValues.length - 1];
+                                }
+                                if (annotation.xCoordinateMode === 'DataValue' && !annotation.x2) {
+                                    annotation.x2 = dataValues.length - 1;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+            else {
+                // 기본 annotation 생성 (dataKey가 없거나 rawData가 없는 경우)
+                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),
+                            xCoordinateMode: annotation.xCoordinateMode || ECoordinateMode.DataValue,
+                            yCoordinateMode: annotation.yCoordinateMode || ECoordinateMode.DataValue
+                        });
+                        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: annotation.xCoordinateMode || ECoordinateMode.DataValue,
+                            yCoordinateMode: annotation.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,
+                            xCoordinateMode: annotation.xCoordinateMode || ECoordinateMode.DataValue,
+                            yCoordinateMode: annotation.yCoordinateMode || ECoordinateMode.DataValue
+                        });
+                        break;
+                    case 'horizontalLine':
+                        sciAnnotation = new HorizontalLineAnnotation({
+                            y1: annotation.y1,
+                            stroke: convertColor(annotation.stroke, '#FF0000'),
+                            strokeThickness: annotation.strokeThickness,
+                            xCoordinateMode: annotation.xCoordinateMode || ECoordinateMode.DataValue,
+                            yCoordinateMode: annotation.yCoordinateMode || ECoordinateMode.DataValue
+                        });
+                        break;
+                    case 'verticalLine':
+                        sciAnnotation = new VerticalLineAnnotation({
+                            x1: annotation.x1,
+                            stroke: convertColor(annotation.stroke, '#FF0000'),
+                            strokeThickness: annotation.strokeThickness,
+                            xCoordinateMode: annotation.xCoordinateMode || ECoordinateMode.DataValue,
+                            yCoordinateMode: annotation.yCoordinateMode || ECoordinateMode.DataValue
+                        });
+                        // 텍스트가 있는 경우에만 텍스트 주석 추가
+                        if (annotation.text) {
+                            // 수직선을 먼저 추가
+                            if (sciAnnotation) {
+                                sciChartSurface.annotations.add(sciAnnotation);
+                            }
+                            // 텍스트 주석 생성
+                            const textAnnotation = new TextAnnotation({
+                                x1: annotation.x1,
+                                y1: getYPositionByAnchor(annotation.verticalAnchorPoint),
+                                text: annotation.text,
+                                horizontalAnchorPoint: annotation.horizontalAnchorPoint || EHorizontalAnchorPoint.Center,
+                                verticalAnchorPoint: annotation.verticalAnchorPoint || EVerticalAnchorPoint.Bottom,
+                                fontFamily: annotation.fontFamily || fontFamily,
+                                fontSize: annotation.fontSize || 14,
+                                textColor: convertColor(annotation.stroke, '#FF0000'),
+                                background: 'rgba(255, 255, 255, 0.7)', // 텍스트 배경 추가
+                                padding: { left: 5, top: 5, right: 5, bottom: 5 }, // 패딩 추가
+                                xCoordinateMode: annotation.xCoordinateMode || ECoordinateMode.DataValue,
+                                yCoordinateMode: getYCoordModeByAnchor(annotation.verticalAnchorPoint)
+                            });
+                            // 텍스트 주석 추가
+                            sciChartSurface.annotations.add(textAnnotation);
+                            sciAnnotation = null; // 이미 추가했으므로 아래에서 다시 추가하지 않도록 null로 설정
+                        }
+                        break;
+                    default:
+                        console.error('Unknown annotation type:', annotation.type);
+                        break;
+                }
             }
             if (sciAnnotation) {
                 sciChartSurface.annotations.add(sciAnnotation);