@operato/chart 2.0.0-beta.25

package/dist/src/editors/ox-input-chart-radar.js

@@ -0,0 +1,52 @@
+import { __decorate } from "tslib";
+import '@operato/i18n/ox-i18n.js';
+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';
+let OxInputChartRadar = class OxInputChartRadar extends InputChartMultiSeriesAbstract {
+    static { this.styles = InputChartMultiSeriesAbstract.styles; }
+    getChartType() {
+        return 'radar';
+    }
+    subTemplate() {
+        const configurer = this.configurer;
+        return html `
+      <legend><ox-i18n msgid="label.series">Series</ox-i18n></legend>
+
+      <div fullwidth>${this.multiSeriesTabTemplate()}</div>
+
+      <legend><ox-i18n msgid="label.axes">Axes</ox-i18n></legend>
+
+      <label for="series-data-key"> <ox-i18n msgid="label.data-key">Data Key</ox-i18n> </label>
+      <input id="series-data-key" type="text" value-key="labelDataKey" value=${ifDefined(configurer.labelDataKey)} />
+    `;
+    }
+    getDefaultDatasets() {
+        return [
+            {
+                label: 'Radar Series 1',
+                data: [10, 20, 30],
+                backgroundColor: 'rgba(255, 99, 132, 0.2)',
+                borderColor: 'rgba(255, 99, 132, 1)',
+                borderWidth: 1,
+                pointStyle: 'circle',
+                pointRadius: 3
+            },
+            {
+                label: 'Radar Series 2',
+                data: [15, 25, 35],
+                backgroundColor: 'rgba(54, 162, 235, 0.2)',
+                borderColor: 'rgba(54, 162, 235, 1)',
+                borderWidth: 1,
+                pointStyle: 'circle',
+                pointRadius: 3
+            }
+        ];
+    }
+};
+OxInputChartRadar = __decorate([
+    customElement('ox-input-chart-radar')
+], OxInputChartRadar);
+export default OxInputChartRadar;
+//# sourceMappingURL=ox-input-chart-radar.js.map

package/dist/src/editors/ox-input-chart-radar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-input-chart-radar.js","sourceRoot":"","sources":["../../../src/editors/ox-input-chart-radar.ts"],"names":[],"mappings":";AAAA,OAAO,0BAA0B,CAAA;AAEjC,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAExD,OAAO,EAAE,6BAA6B,EAAE,MAAM,qCAAqC,CAAA;AAGpE,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,6BAA6B;aACnE,WAAM,GAAG,6BAA6B,CAAC,MAAM,AAAvC,CAAuC;IAEpD,YAAY;QACV,OAAO,OAAO,CAAA;IAChB,CAAC;IAED,WAAW;QACT,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAA;QAElC,OAAO,IAAI,CAAA;;;uBAGQ,IAAI,CAAC,sBAAsB,EAAE;;;;;+EAK2B,SAAS,CAAC,UAAU,CAAC,YAAY,CAAC;KAC5G,CAAA;IACH,CAAC;IAED,kBAAkB;QAChB,OAAO;YACL;gBACE,KAAK,EAAE,gBAAgB;gBACvB,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;gBAClB,eAAe,EAAE,yBAAyB;gBAC1C,WAAW,EAAE,uBAAuB;gBACpC,WAAW,EAAE,CAAC;gBACd,UAAU,EAAE,QAAQ;gBACpB,WAAW,EAAE,CAAC;aACf;YACD;gBACE,KAAK,EAAE,gBAAgB;gBACvB,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;gBAClB,eAAe,EAAE,yBAAyB;gBAC1C,WAAW,EAAE,uBAAuB;gBACpC,WAAW,EAAE,CAAC;gBACd,UAAU,EAAE,QAAQ;gBACpB,WAAW,EAAE,CAAC;aACf;SACF,CAAA;IACH,CAAC;;AA3CkB,iBAAiB;IADrC,aAAa,CAAC,sBAAsB,CAAC;GACjB,iBAAiB,CA4CrC;eA5CoB,iBAAiB","sourcesContent":["import '@operato/i18n/ox-i18n.js'\n\nimport { html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { InputChartMultiSeriesAbstract } from './input-chart-multi-series-abstract'\n\n@customElement('ox-input-chart-radar')\nexport default class OxInputChartRadar extends InputChartMultiSeriesAbstract {\n  static styles = InputChartMultiSeriesAbstract.styles\n\n  getChartType(): 'bar' | 'line' | 'pie' | 'radar' {\n    return 'radar'\n  }\n\n  subTemplate() {\n    const configurer = this.configurer\n\n    return html`\n      <legend><ox-i18n msgid=\"label.series\">Series</ox-i18n></legend>\n\n      <div fullwidth>${this.multiSeriesTabTemplate()}</div>\n\n      <legend><ox-i18n msgid=\"label.axes\">Axes</ox-i18n></legend>\n\n      <label for=\"series-data-key\"> <ox-i18n msgid=\"label.data-key\">Data Key</ox-i18n> </label>\n      <input id=\"series-data-key\" type=\"text\" value-key=\"labelDataKey\" value=${ifDefined(configurer.labelDataKey)} />\n    `\n  }\n\n  getDefaultDatasets(): OperatoChart.Dataset[] {\n    return [\n      {\n        label: 'Radar Series 1',\n        data: [10, 20, 30],\n        backgroundColor: 'rgba(255, 99, 132, 0.2)',\n        borderColor: 'rgba(255, 99, 132, 1)',\n        borderWidth: 1,\n        pointStyle: 'circle',\n        pointRadius: 3\n      },\n      {\n        label: 'Radar Series 2',\n        data: [15, 25, 35],\n        backgroundColor: 'rgba(54, 162, 235, 0.2)',\n        borderColor: 'rgba(54, 162, 235, 1)',\n        borderWidth: 1,\n        pointStyle: 'circle',\n        pointRadius: 3\n      }\n    ]\n  }\n}\n"]}

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

@@ -0,0 +1,10 @@
+import '@operato/i18n/ox-i18n.js';
+import './ox-input-chart-hbar';
+import './ox-input-chart-mixed';
+import './ox-input-chart-pie';
+import './ox-input-chart-radar';
+import { OxPropertyEditor, PropertySpec } from '@operato/property-editor';
+export declare class ChartEditor extends OxPropertyEditor {
+    static styles: import("lit").CSSResult[];
+    editorTemplate(value: any, spec: PropertySpec): import("lit-html").TemplateResult<1>;
+}

package/dist/src/editors/ox-property-editor-chart.js

@@ -0,0 +1,79 @@
+import { __decorate } from "tslib";
+import '@operato/i18n/ox-i18n.js';
+import './ox-input-chart-hbar';
+import './ox-input-chart-mixed';
+import './ox-input-chart-pie';
+import './ox-input-chart-radar';
+import { css, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { OxPropertyEditor } from '@operato/property-editor';
+let ChartEditor = class ChartEditor extends OxPropertyEditor {
+    static { this.styles = [
+        css `
+      :host {
+        display: block;
+        padding: 5px;
+
+        --md-elevated-button-container-height: 20px;
+      }
+
+      #chart-type {
+        display: grid;
+        grid-template-columns: repeat(10, 1fr);
+        grid-gap: 5px;
+      }
+
+      #chart-type > label {
+        box-sizing: border-box;
+        grid-column: span 3;
+
+        text-align: right;
+
+        color: var(--md-sys-color-on-secondary-container);
+        font-size: 0.8em;
+        line-height: 2;
+        text-transform: capitalize;
+      }
+
+      #chart-type > input {
+        box-sizing: border-box;
+        grid-column: span 7;
+        border: 1px solid rgba(0, 0, 0, 0.2);
+      }
+    `
+    ]; }
+    editorTemplate(value, spec) {
+        return html `
+      ${value
+            ? html `
+            <div id="chart-type">
+              <label> <ox-i18n msgid="label.chart-type">Chart Type</ox-i18n> </label>
+              <input type="text" .value=${value.type} readonly />
+            </div>
+          `
+            : html ``}
+      ${!value
+            ? html ``
+            : value.type == 'line'
+                ? html ` <ox-input-chart-mixed .value=${value} fullwidth></ox-input-chart-mixed> `
+                : value.type == 'horizontalBar'
+                    ? html ` <ox-input-chart-hbar .value=${value} fullwidth></ox-input-chart-hbar> `
+                    : value.type == 'bar'
+                        ? html ` <ox-input-chart-mixed .value=${value} fullwidth></ox-input-chart-mixed> `
+                        : value.type == 'pie'
+                            ? html ` <ox-input-chart-pie .value=${value} fullwidth></ox-input-chart-pie> `
+                            : value.type == 'doughnut'
+                                ? html ` <ox-input-chart-pie .value=${value} fullwidth></ox-input-chart-pie> `
+                                : value.type == 'polarArea'
+                                    ? html ` <ox-input-chart-pie .value=${value} fullwidth></ox-input-chart-pie> `
+                                    : value.type == 'radar'
+                                        ? html ` <ox-input-chart-radar .value=${value} fullwidth></ox-input-chart-radar> `
+                                        : html ``}
+    `;
+    }
+};
+ChartEditor = __decorate([
+    customElement('ox-property-editor-chart')
+], ChartEditor);
+export { ChartEditor };
+//# sourceMappingURL=ox-property-editor-chart.js.map

package/dist/src/editors/ox-property-editor-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-property-editor-chart.js","sourceRoot":"","sources":["../../../src/editors/ox-property-editor-chart.ts"],"names":[],"mappings":";AAAA,OAAO,0BAA0B,CAAA;AAEjC,OAAO,uBAAuB,CAAA;AAC9B,OAAO,wBAAwB,CAAA;AAC/B,OAAO,sBAAsB,CAAA;AAC7B,OAAO,wBAAwB,CAAA;AAE/B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,EAAE,gBAAgB,EAAgB,MAAM,0BAA0B,CAAA;AAGlE,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,gBAAgB;aACxC,WAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+BF;KACF,AAjCY,CAiCZ;IAED,cAAc,CAAC,KAAU,EAAE,IAAkB;QAC3C,OAAO,IAAI,CAAA;QACP,KAAK;YACL,CAAC,CAAC,IAAI,CAAA;;;0CAG4B,KAAK,CAAC,IAAI;;WAEzC;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;QACR,CAAC,KAAK;YACN,CAAC,CAAC,IAAI,CAAA,EAAE;YACR,CAAC,CAAC,KAAK,CAAC,IAAI,IAAI,MAAM;gBACpB,CAAC,CAAC,IAAI,CAAA,iCAAiC,KAAK,qCAAqC;gBACjF,CAAC,CAAC,KAAK,CAAC,IAAI,IAAI,eAAe;oBAC7B,CAAC,CAAC,IAAI,CAAA,gCAAgC,KAAK,oCAAoC;oBAC/E,CAAC,CAAC,KAAK,CAAC,IAAI,IAAI,KAAK;wBACnB,CAAC,CAAC,IAAI,CAAA,iCAAiC,KAAK,qCAAqC;wBACjF,CAAC,CAAC,KAAK,CAAC,IAAI,IAAI,KAAK;4BACnB,CAAC,CAAC,IAAI,CAAA,+BAA+B,KAAK,mCAAmC;4BAC7E,CAAC,CAAC,KAAK,CAAC,IAAI,IAAI,UAAU;gCACxB,CAAC,CAAC,IAAI,CAAA,+BAA+B,KAAK,mCAAmC;gCAC7E,CAAC,CAAC,KAAK,CAAC,IAAI,IAAI,WAAW;oCACzB,CAAC,CAAC,IAAI,CAAA,+BAA+B,KAAK,mCAAmC;oCAC7E,CAAC,CAAC,KAAK,CAAC,IAAI,IAAI,OAAO;wCACrB,CAAC,CAAC,IAAI,CAAA,iCAAiC,KAAK,qCAAqC;wCACjF,CAAC,CAAC,IAAI,CAAA,EAAE;KACzB,CAAA;IACH,CAAC;;AAhEU,WAAW;IADvB,aAAa,CAAC,0BAA0B,CAAC;GAC7B,WAAW,CAiEvB","sourcesContent":["import '@operato/i18n/ox-i18n.js'\n\nimport './ox-input-chart-hbar'\nimport './ox-input-chart-mixed'\nimport './ox-input-chart-pie'\nimport './ox-input-chart-radar'\n\nimport { css, html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { OxPropertyEditor, PropertySpec } from '@operato/property-editor'\n\n@customElement('ox-property-editor-chart')\nexport class ChartEditor extends OxPropertyEditor {\n  static styles = [\n    css`\n      :host {\n        display: block;\n        padding: 5px;\n\n        --md-elevated-button-container-height: 20px;\n      }\n\n      #chart-type {\n        display: grid;\n        grid-template-columns: repeat(10, 1fr);\n        grid-gap: 5px;\n      }\n\n      #chart-type > label {\n        box-sizing: border-box;\n        grid-column: span 3;\n\n        text-align: right;\n\n        color: var(--md-sys-color-on-secondary-container);\n        font-size: 0.8em;\n        line-height: 2;\n        text-transform: capitalize;\n      }\n\n      #chart-type > input {\n        box-sizing: border-box;\n        grid-column: span 7;\n        border: 1px solid rgba(0, 0, 0, 0.2);\n      }\n    `\n  ]\n\n  editorTemplate(value: any, spec: PropertySpec) {\n    return html`\n      ${value\n        ? html`\n            <div id=\"chart-type\">\n              <label> <ox-i18n msgid=\"label.chart-type\">Chart Type</ox-i18n> </label>\n              <input type=\"text\" .value=${value.type} readonly />\n            </div>\n          `\n        : html``}\n      ${!value\n        ? html``\n        : value.type == 'line'\n          ? html` <ox-input-chart-mixed .value=${value} fullwidth></ox-input-chart-mixed> `\n          : value.type == 'horizontalBar'\n            ? html` <ox-input-chart-hbar .value=${value} fullwidth></ox-input-chart-hbar> `\n            : value.type == 'bar'\n              ? html` <ox-input-chart-mixed .value=${value} fullwidth></ox-input-chart-mixed> `\n              : value.type == 'pie'\n                ? html` <ox-input-chart-pie .value=${value} fullwidth></ox-input-chart-pie> `\n                : value.type == 'doughnut'\n                  ? html` <ox-input-chart-pie .value=${value} fullwidth></ox-input-chart-pie> `\n                  : value.type == 'polarArea'\n                    ? html` <ox-input-chart-pie .value=${value} fullwidth></ox-input-chart-pie> `\n                    : value.type == 'radar'\n                      ? html` <ox-input-chart-radar .value=${value} fullwidth></ox-input-chart-radar> `\n                      : html``}\n    `\n  }\n}\n"]}

package/dist/src/index.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=index.js.map

package/dist/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"","sourcesContent":[""]}

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

@@ -0,0 +1,35 @@
+import { LitElement } from 'lit';
+declare global {
+    interface Window {
+        sciChartLoaded: boolean;
+        sciChartLoadingPromise: Promise<void>;
+    }
+}
+declare class OxSciChart extends LitElement {
+    data: {
+        [attr: string]: any;
+    }[];
+    attrX: string;
+    attrY: string;
+    config: any;
+    private chart;
+    dataSeries?: any;
+    container: HTMLDivElement;
+    static styles: import("lit").CSSResult;
+    firstUpdated(): void;
+    loadSciChart(): Promise<void>;
+    initializeSciChart(): Promise<void>;
+    updated(changedProperties: Map<string | number | symbol, unknown>): Promise<void>;
+    updateDataSeries(): void;
+    get dataSet(): {
+        xValue: number;
+        yValue: number;
+    }[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ox-scichart': OxSciChart;
+    }
+}
+export {};

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

@@ -0,0 +1,122 @@
+import { __decorate } from "tslib";
+import { LitElement, html, css } from 'lit';
+import { property, query, customElement } from 'lit/decorators.js';
+import { buildSciChart } from './scichart-builder';
+let OxSciChart = class OxSciChart extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.data = [
+            { x: 1718612376646, y: 10 },
+            { x: 1718612386646, y: 20 },
+            { x: 1718612396646, y: 15 },
+            { x: 1718612406646, y: 25 },
+            { x: 1718612416646, y: 22 },
+            { x: 1718612426646, y: 30 },
+            { x: 1718612436646, y: 28 }
+        ];
+        this.attrX = 'x';
+        this.attrY = 'y';
+        this.config = null;
+        this.chart = null;
+    }
+    static { this.styles = css `
+    :host {
+      display: block;
+    }
+
+    div {
+      width: 100%;
+      height: 100%;
+    }
+  `; }
+    firstUpdated() {
+        this.loadSciChart();
+    }
+    async loadSciChart() {
+        if (!window.sciChartLoaded) {
+            if (!window.sciChartLoadingPromise) {
+                window.sciChartLoadingPromise = new Promise(resolve => {
+                    const script = document.createElement('script');
+                    script.src = 'https://cdn.jsdelivr.net/npm/scichart/index.min.js';
+                    script.crossOrigin = 'anonymous';
+                    script.onload = () => {
+                        window.sciChartLoaded = true;
+                        SciChart.SciChartSurface.UseCommunityLicense();
+                        resolve();
+                    };
+                    document.head.appendChild(script);
+                });
+            }
+            await window.sciChartLoadingPromise;
+        }
+        this.initializeSciChart();
+    }
+    async initializeSciChart() {
+        const { chart, dataSeries } = (await buildSciChart(this.config, this.container, {})) || {};
+        this.chart = chart;
+        this.dataSeries = dataSeries;
+        this.updateDataSeries();
+    }
+    async updated(changedProperties) {
+        if (changedProperties.has('config')) {
+            await this.initializeSciChart();
+        }
+        if (changedProperties.has('data')) {
+            this.updateDataSeries();
+            this.chart?.sciChartSurface.zoomExtents();
+        }
+    }
+    updateDataSeries() {
+        if (!this.dataSeries)
+            return;
+        this.dataSeries.clear();
+        const newData = this.dataSet;
+        this.dataSeries.appendRange(newData.map(d => d.xValue), newData.map(d => d.yValue));
+        this.chart?.sciChartSurface.zoomExtents();
+        this.chart?.sciChartSurface.invalidateElement();
+    }
+    get dataSet() {
+        const { attrX, attrY, data } = this;
+        if (!(data instanceof Array)) {
+            return [];
+        }
+        return data
+            .map(item => {
+            if (!item || typeof item !== 'object') {
+                return;
+            }
+            const xValue = new Date(item[attrX]);
+            if (isNaN(xValue.getTime())) {
+                console.error('Invalid date:', item[attrX]);
+                return;
+            }
+            return {
+                xValue: xValue.getTime() / 1000,
+                yValue: item[attrY]
+            };
+        })
+            .filter(Boolean);
+    }
+    render() {
+        return html `<div id="container"></div>`;
+    }
+};
+__decorate([
+    property({ type: Array })
+], OxSciChart.prototype, "data", void 0);
+__decorate([
+    property({ type: String })
+], OxSciChart.prototype, "attrX", void 0);
+__decorate([
+    property({ type: String })
+], OxSciChart.prototype, "attrY", void 0);
+__decorate([
+    property({ type: Object })
+], OxSciChart.prototype, "config", void 0);
+__decorate([
+    query('div#container')
+], OxSciChart.prototype, "container", void 0);
+OxSciChart = __decorate([
+    customElement('ox-scichart')
+], OxSciChart);
+//# sourceMappingURL=ox-scichart.js.map

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

@@ -0,0 +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'\n\n// 전역 변수로 SciChart 로딩 상태 관리\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: Array }) data: { [attr: string]: any }[] = [\n    { x: 1718612376646, y: 10 },\n    { x: 1718612386646, y: 20 },\n    { x: 1718612396646, y: 15 },\n    { x: 1718612406646, y: 25 },\n    { x: 1718612416646, y: 22 },\n    { x: 1718612426646, y: 30 },\n    { x: 1718612436646, y: 28 }\n  ]\n  @property({ type: String }) attrX: string = 'x'\n  @property({ type: String }) attrY: string = 'y'\n  @property({ type: Object }) config: any = null\n\n  private chart: any = null\n  dataSeries?: any\n\n  @query('div#container') container!: HTMLDivElement\n\n  static styles = css`\n    :host {\n      display: block;\n    }\n\n    div {\n      width: 100%;\n      height: 100%;\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')) {\n      await this.initializeSciChart()\n    }\n\n    if (changedProperties.has('data')) {\n      this.updateDataSeries()\n      this.chart?.sciChartSurface.zoomExtents()\n    }\n  }\n\n  updateDataSeries() {\n    if (!this.dataSeries) return\n\n    this.dataSeries.clear()\n    const newData = this.dataSet\n\n    this.dataSeries.appendRange(\n      newData.map(d => d.xValue),\n      newData.map(d => d.yValue)\n    )\n\n    this.chart?.sciChartSurface.zoomExtents()\n    this.chart?.sciChartSurface.invalidateElement()\n  }\n\n  get dataSet(): { xValue: number; yValue: number }[] {\n    const { attrX, attrY, data } = this\n\n    if (!(data instanceof Array)) {\n      return []\n    }\n\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[attrY]\n        }\n      })\n      .filter(Boolean) as { xValue: number; yValue: number }[]\n  }\n\n  render() {\n    return html`<div id=\"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

@@ -0,0 +1,8 @@
+export declare function buildSciChart(config: OperatoChart.ChartConfig | undefined | null, container: any, { fontSize, fontFamily, fontColor }: {
+    fontSize?: number;
+    fontFamily?: string;
+    fontColor?: string;
+}): Promise<{
+    chart: any;
+    dataSeries: any;
+} | undefined>;

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

@@ -0,0 +1,46 @@
+export async function buildSciChart(config, container, { fontSize, fontFamily, fontColor }) {
+    if (!config) {
+        return;
+    }
+    const { SciChartSurface, SciChartDefaults, chartBuilder, SciChartJsNavyTheme, XyDataSeries, FastLineRenderableSeries, NumberRange, EAutoRange, EAxisAlignment, NumericAxis, DateTimeNumericAxis } = SciChart;
+    const { type: chartType, options, data: fromData } = config;
+    const { theme, animation, tooltip, stacked, legend, scales: fromScales, xGridLine, yGridLine, y2ndGridLine, multiAxis } = options || {};
+    const { datasets = [] } = fromData || {};
+    const { xAxes = [], yAxes = [] } = fromScales || {};
+    const toScales = {};
+    const chart = await SciChartSurface.create(container, {
+        theme: new SciChartJsNavyTheme()
+    });
+    const { sciChartSurface, wasmContext } = chart;
+    xAxes.forEach((axis, index) => {
+        const { axisTitle, barSpacing, categorySpacing, barPercentage, ticks } = axis;
+        const { autoMax, autoMin } = ticks || {};
+        const id = xAxes.length > 1 ? `x${index + 1}` : 'x';
+        const xAxis = new DateTimeNumericAxis(wasmContext, {
+            axisTitle,
+            autoRange: EAutoRange.Always,
+            axisAlignment: EAxisAlignment.Bottom
+            // visibleRange: new NumberRange(minDate.getTime() / 1000, maxDate.getTime() / 1000)
+        });
+        sciChartSurface.xAxes.add(xAxis);
+    });
+    yAxes.forEach((axis, index) => {
+        const { axisTitle, barSpacing, categorySpacing, barPercentage, ticks } = axis;
+        const { autoMax, autoMin } = ticks || {};
+        const id = yAxes.length > 1 ? `right` : 'left';
+        const yAxis = new NumericAxis(wasmContext, {
+            axisTitle,
+            autoRange: EAutoRange.Always,
+            axisAlignment: yAxes.length > 1 ? EAxisAlignment.Right : EAxisAlignment.Left
+        });
+        sciChartSurface.yAxes.add(yAxis);
+    });
+    const dataSeries = new XyDataSeries(wasmContext);
+    const lineSeries = new FastLineRenderableSeries(wasmContext);
+    lineSeries.strokeThickness = 2;
+    lineSeries.stroke = '#FF6600';
+    lineSeries.dataSeries = dataSeries;
+    sciChartSurface.renderableSeries.add(lineSeries);
+    return { chart, dataSeries };
+}
+//# sourceMappingURL=scichart-builder.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"scichart-builder.js","sourceRoot":"","sources":["../../../src/scichart/scichart-builder.ts"],"names":[],"mappings":"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","sourcesContent":["export async function buildSciChart(\n  config: OperatoChart.ChartConfig | undefined | null,\n  container: any,\n  { fontSize, fontFamily, fontColor }: { fontSize?: number; fontFamily?: string; fontColor?: string }\n): Promise<{ chart: any; dataSeries: any } | undefined> {\n  if (!config) {\n    return\n  }\n\n  const {\n    SciChartSurface,\n    SciChartDefaults,\n    chartBuilder,\n    SciChartJsNavyTheme,\n    XyDataSeries,\n    FastLineRenderableSeries,\n    NumberRange,\n    EAutoRange,\n    EAxisAlignment,\n    NumericAxis,\n    DateTimeNumericAxis\n  } = SciChart\n\n  const { type: chartType, options, data: fromData } = config\n  const {\n    theme,\n    animation,\n    tooltip,\n    stacked,\n    legend,\n    scales: fromScales,\n    xGridLine,\n    yGridLine,\n    y2ndGridLine,\n    multiAxis\n  } = options || {}\n  const { datasets = [] } = fromData || {}\n\n  const { xAxes = [], yAxes = [] } = fromScales || {}\n  const toScales = {} as any\n\n  const chart = await SciChartSurface.create(container, {\n    theme: new SciChartJsNavyTheme()\n  })\n  const { sciChartSurface, wasmContext } = chart\n\n  xAxes.forEach((axis, index) => {\n    const { axisTitle, barSpacing, categorySpacing, barPercentage, ticks } = axis\n    const { autoMax, autoMin } = ticks || {}\n    const id = xAxes.length > 1 ? `x${index + 1}` : 'x'\n\n    const xAxis = new DateTimeNumericAxis(wasmContext, {\n      axisTitle,\n      autoRange: EAutoRange.Always,\n      axisAlignment: EAxisAlignment.Bottom\n\n      // visibleRange: new NumberRange(minDate.getTime() / 1000, maxDate.getTime() / 1000)\n    })\n\n    sciChartSurface.xAxes.add(xAxis)\n  })\n\n  yAxes.forEach((axis, index) => {\n    const { axisTitle, barSpacing, categorySpacing, barPercentage, ticks } = axis\n    const { autoMax, autoMin } = ticks || {}\n\n    const id = yAxes.length > 1 ? `right` : 'left'\n\n    const yAxis = new NumericAxis(wasmContext, {\n      axisTitle,\n      autoRange: EAutoRange.Always,\n      axisAlignment: yAxes.length > 1 ? EAxisAlignment.Right : EAxisAlignment.Left\n    })\n    sciChartSurface.yAxes.add(yAxis)\n  })\n\n  const dataSeries = new XyDataSeries(wasmContext)\n\n  const lineSeries = new FastLineRenderableSeries(wasmContext)\n  lineSeries.strokeThickness = 2\n  lineSeries.stroke = '#FF6600'\n  lineSeries.dataSeries = dataSeries\n\n  sciChartSurface.renderableSeries.add(lineSeries)\n\n  return { chart, dataSeries }\n}\n"]}

package/dist/stories/common.d.ts

@@ -0,0 +1,2 @@
+export declare function getDefaultChartConfig(type: 'bar' | 'line' | 'pie' | 'radar' | 'mixed', datasets?: OperatoChart.Dataset[]): OperatoChart.ChartConfig;
+export declare function getDefaultAxisOptions(): OperatoChart.AxisOptions;

package/dist/stories/common.js

@@ -0,0 +1,44 @@
+export function getDefaultChartConfig(type, datasets) {
+    return {
+        data: {
+            datasets: datasets || [],
+            labelDataKey: ''
+        },
+        options: {
+            theme: 'light',
+            tooltip: true,
+            animation: true,
+            legend: {
+                display: true,
+                position: 'top'
+            },
+            scales: {
+                xAxes: [getDefaultAxisOptions()],
+                yAxes: [getDefaultAxisOptions(), getDefaultAxisOptions()] // Two y-axes for multi-axis support
+            },
+            stacked: false,
+            xGridLine: true,
+            yGridLine: true,
+            y2ndGridLine: false,
+            multiAxis: false
+        },
+        type
+    };
+}
+export function getDefaultAxisOptions() {
+    return {
+        axisTitle: '',
+        barSpacing: 0,
+        categorySpacing: 0,
+        barPercentage: 0.9,
+        ticks: {
+            display: true,
+            autoMin: true,
+            autoMax: true,
+            min: undefined,
+            max: undefined,
+            stepSize: undefined
+        }
+    };
+}
+//# sourceMappingURL=common.js.map

package/dist/stories/common.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"common.js","sourceRoot":"","sources":["../../stories/common.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,qBAAqB,CACnC,IAAgD,EAChD,QAAiC;IAEjC,OAAO;QACL,IAAI,EAAE;YACJ,QAAQ,EAAE,QAAQ,IAAI,EAAE;YACxB,YAAY,EAAE,EAAE;SACjB;QACD,OAAO,EAAE;YACP,KAAK,EAAE,OAAO;YACd,OAAO,EAAE,IAAI;YACb,SAAS,EAAE,IAAI;YACf,MAAM,EAAE;gBACN,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,KAAK;aAChB;YACD,MAAM,EAAE;gBACN,KAAK,EAAE,CAAC,qBAAqB,EAAE,CAAC;gBAChC,KAAK,EAAE,CAAC,qBAAqB,EAAE,EAAE,qBAAqB,EAAE,CAAC,CAAC,oCAAoC;aAC/F;YACD,OAAO,EAAE,KAAK;YACd,SAAS,EAAE,IAAI;YACf,SAAS,EAAE,IAAI;YACf,YAAY,EAAE,KAAK;YACnB,SAAS,EAAE,KAAK;SACjB;QACD,IAAI;KACL,CAAA;AACH,CAAC;AAED,MAAM,UAAU,qBAAqB;IACnC,OAAO;QACL,SAAS,EAAE,EAAE;QACb,UAAU,EAAE,CAAC;QACb,eAAe,EAAE,CAAC;QAClB,aAAa,EAAE,GAAG;QAClB,KAAK,EAAE;YACL,OAAO,EAAE,IAAI;YACb,OAAO,EAAE,IAAI;YACb,OAAO,EAAE,IAAI;YACb,GAAG,EAAE,SAAS;YACd,GAAG,EAAE,SAAS;YACd,QAAQ,EAAE,SAAS;SACpB;KACF,CAAA;AACH,CAAC","sourcesContent":["export function getDefaultChartConfig(\n  type: 'bar' | 'line' | 'pie' | 'radar' | 'mixed',\n  datasets?: OperatoChart.Dataset[]\n): OperatoChart.ChartConfig {\n  return {\n    data: {\n      datasets: datasets || [],\n      labelDataKey: ''\n    },\n    options: {\n      theme: 'light',\n      tooltip: true,\n      animation: true,\n      legend: {\n        display: true,\n        position: 'top'\n      },\n      scales: {\n        xAxes: [getDefaultAxisOptions()],\n        yAxes: [getDefaultAxisOptions(), getDefaultAxisOptions()] // Two y-axes for multi-axis support\n      },\n      stacked: false,\n      xGridLine: true,\n      yGridLine: true,\n      y2ndGridLine: false,\n      multiAxis: false\n    },\n    type\n  }\n}\n\nexport function getDefaultAxisOptions(): OperatoChart.AxisOptions {\n  return {\n    axisTitle: '',\n    barSpacing: 0,\n    categorySpacing: 0,\n    barPercentage: 0.9,\n    ticks: {\n      display: true,\n      autoMin: true,\n      autoMax: true,\n      min: undefined,\n      max: undefined,\n      stepSize: undefined\n    }\n  }\n}\n"]}

package/dist/stories/ox-input-chart-hbar.stories.d.ts

@@ -0,0 +1,25 @@
+import { TemplateResult } from 'lit';
+import '../src/editors/ox-input-chart-hbar.js';
+import '../src/chartjs/ox-chart-js.js';
+import '../src/scichart/ox-scichart.js';
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        value: {
+            control: string;
+        };
+    };
+};
+export default _default;
+interface Story<T> {
+    (args: T): TemplateResult;
+    args?: Partial<T>;
+    argTypes?: Record<string, unknown>;
+}
+interface ArgTypes {
+    value: OperatoChart.ChartConfig;
+}
+export declare const Default: Story<ArgTypes>;
+export declare const WithData: Story<ArgTypes>;
+export declare const MultiAxis: Story<ArgTypes>;