@operato/chart 2.0.0-beta.35 → 7.0.0-rc.10

package/dist/src/editors/input-chart-multi-series-abstract.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-chart-multi-series-abstract.js","sourceRoot":"","sources":["../../../src/editors/input-chart-multi-series-abstract.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,0BAA0B,CAAA;AAEjC,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1B,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAIzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AAE3D,MAAM,OAAO,6BAA8B,SAAQ,kBAAkB;aAC5D,WAAM,GAAG,CAAC,GAAG,kBAAkB,CAAC,MAAM,CAAC,CAAA;IAM9C,IAAI,YAAY;QACd,OAAO,IAAI,CAAC,IAAI,CAAA;IAClB,CAAC;IAED,YAAY;QACV,IAAI,CAAC,YAAY,EAAE,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE;YAChD,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAA;QACtB,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,WAAW;QACT,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAA;QAElC,OAAO,IAAI,CAAA;8EAC+D,UAAU,CAAC,SAAS;;;;;QAK1F,IAAI,CAAC,sBAAsB,EAAE;;;;;+EAK0C,UAAU,CAAC,YAAY,IAAI,EAAE;;;+EAG7B,UAAU,CAAC,MAAM,CAAC,SAAS,IAAI,EAAE;;;;;;;iBAO/F,UAAU,CAAC,MAAM,CAAC,aAAa,IAAI,CAAC;;;;;;;mBAOlC,UAAU,CAAC,MAAM,CAAC,OAAO,EAAE,SAAS;;;;;;;;mBAQpC,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO;;;;;;;;;;;iBAWlC,UAAU,CAAC,MAAM,CAAC,SAAS,IAAI,EAAE;;;;;;;mBAO/B,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO;;;;;;;;mBAQhC,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO;;;;QAI3C,CAAC,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO;YACjC,CAAC,CAAC,IAAI,CAAA;;;;;;uBAMS,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE,GAAG;;WAExC;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;QACR,CAAC,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO;YACjC,CAAC,CAAC,IAAI,CAAA;;;;;;uBAMS,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE,GAAG;;WAExC;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;;;;;;;iBAOC,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE,QAAQ;;;;;;;mBAO/B,UAAU,CAAC,MAAM,CAAC,OAAO,EAAE,SAAS;;;;;;;;mBAQpC,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO;;;;QAI3C,UAAU,CAAC,MAAM,CAAC,OAAO,EAAE,SAAS;YACpC,CAAC,CAAC,IAAI,CAAA;;;;;;;;uBAQS,UAAU,CAAC,MAAM,CAAC,SAAS,IAAI,EAAE;;;;;;;yBAO/B,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO;;;;;;;;yBAQhC,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO;;;;cAI3C,CAAC,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO;gBACjC,CAAC,CAAC,IAAI,CAAA;;;;;;6BAMS,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE,GAAG;;iBAExC;gBACH,CAAC,CAAC,IAAI,CAAA,EAAE;cACR,CAAC,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO;gBACjC,CAAC,CAAC,IAAI,CAAA;;;;;;6BAMS,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE,GAAG;;iBAExC;gBACH,CAAC,CAAC,IAAI,CAAA,EAAE;;;;;;;uBAOC,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE,QAAQ;;;;;;;yBAO/B,UAAU,CAAC,MAAM,CAAC,OAAO,CAAC,YAAY;;;;;;;;yBAQtC,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO;;;WAG9C;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;KACX,CAAA;IACH,CAAC;IAED,sBAAsB;QACpB,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAA;QAElC,OAAO,IAAI,CAAA;;;;;mBAKI,CAAC,CAAQ,EAAE,EAAE;YAClB,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAA;QAC7B,CAAC;;;;;;sBAMS,CAAC,CAAQ,EAAE,EAAE;YACrB,UAAU,CAAC,kBAAkB,GAAI,CAAC,CAAC,MAAc,CAAC,cAAc,CAAA;QAClE,CAAC;+BACkB,UAAU,CAAC,kBAAkB;;;cAG9C,UAAU,CAAC,QAAQ,CAAC,GAAG,CACvB,CAAC,OAAY,EAAE,KAAa,EAAE,EAAE,CAAC,IAAI,CAAA;;gCAEnB,KAAK,GAAG,CAAC;mCACN,KAAK;;8BAEV,KAAK,IAAI,UAAU,CAAC,kBAAkB;2BACzC,CAAC,CAAQ,EAAE,EAAE;YACpB,MAAM,MAAM,GAAG,CAAC,CAAC,MAAwB,CAAA;YACzC,IAAI,CAAC,UAAU,CAAC,qBAAqB,CAAC,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAA;YACpF,IAAI,CAAC,KAAK,GAAG,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,CAAA;QAC3C,CAAC;;oBAEC,KAAK,GAAG,CAAC;oBACT,CAAC,UAAU,CAAC,QAAQ,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,MAAM,IAAI,CAAC,IAAI,UAAU,CAAC,kBAAkB,IAAI,KAAK,CAAC;YACnG,CAAC,CAAC,IAAI,CAAA,mBAAmB,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,sBAAsB;YAC1F,CAAC,CAAC,IAAI,CAAA,EAAE;;eAEb,CACF;;;;qBAIQ,CAAC,CAAQ,EAAE,EAAE;YACpB,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAA;QAC9B,CAAC;;;;;;iDAMoC,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;;;;;wEAKV,UAAU,CAAC,OAAO,IAAI,EAAE;;YAEpF,IAAI,CAAC,SAAS,IAAI,MAAM,IAAI,IAAI,CAAC,SAAS,IAAI,KAAK;YACnD,CAAC,CAAC,IAAI,CAAA;;;;;;2BAMS,UAAU,CAAC,MAAM,CAAC,IAAI,IAAI,EAAE;;;;;eAKxC;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;;;iFAG6D,UAAU,CAAC,MAAM,CAAC,KAAK;;YAE5F,UAAU,CAAC,MAAM,CAAC,IAAI,IAAI,MAAM;YAChC,CAAC,CAAC,IAAI,CAAA;;;;;;2BAMS,UAAU,CAAC,MAAM,CAAC,WAAW,IAAI,CAAC;;;;;eAK9C;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;YACR,UAAU,CAAC,MAAM,CAAC,IAAI,IAAI,MAAM;YAChC,CAAC,CAAC,IAAI,CAAA;;;;;;2BAMS,UAAU,CAAC,MAAM,CAAC,WAAW,IAAI,CAAC;;eAE9C;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;;;uEAGmD,UAAU,CAAC,KAAK;;YAE3E,UAAU,CAAC,MAAM,CAAC,IAAI,IAAI,MAAM;YAChC,CAAC,CAAC,IAAI,CAAA;;;;;;2BAMS,UAAU,CAAC,MAAM,CAAC,UAAU,IAAI,EAAE;;;;;;;;;;;;;;;;;;2BAkBlC,UAAU,CAAC,MAAM,CAAC,WAAW,IAAI,CAAC;;eAE9C;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;iFAC6D,UAAU,CAAC,MAAM,CAAC,KAAK,IAAI,EAAE;YAClG,UAAU,CAAC,MAAM,CAAC,IAAI,IAAI,MAAM;YAChC,CAAC,CAAC,IAAI,CAAA;2FACyE,UAAU,CAAC,MAAM,CAAC,IAAI;;eAElG;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;YACR,UAAU,CAAC,SAAS;YACpB,CAAC,CAAC,IAAI,CAAA;;;;;;2BAMS,UAAU,CAAC,MAAM,CAAC,OAAO,IAAI,EAAE;;;;;eAK3C;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;YACR,IAAI,CAAC,oBAAoB,EAAE;;;KAGlC,CAAA;IACH,CAAC;IAED,YAAY,CAAC,CAAQ;QACnB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;YACvB,OAAM;QACR,CAAC;QAED,IAAI,IAAI,CAAC,YAAY,CAAC,WAAW,IAAI,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,CAAC;YACnE,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,CAAA;YAClD,IAAI,CAAC,iBAAiB,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,CAAA;QACrD,CAAC;QACD,WAAW;aACN,IAAI,IAAI,CAAC,YAAY,CAAC,UAAU,IAAI,CAAC,EAAE,CAAC;YAC3C,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,CAAA;YAClD,IAAI,CAAC,iBAAiB,CAAC,eAAe,CAAC,UAAU,CAAC,CAAA;QACpD,CAAC;QACD,YAAY;aACP,IAAI,IAAI,CAAC,YAAY,CAAC,UAAU,GAAG,IAAI,CAAC,YAAY,CAAC,WAAW,IAAI,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,CAAC;YACvG,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,UAAU,CAAC,CAAA;YACjD,IAAI,CAAC,iBAAiB,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,CAAA;QACrD,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,UAAU,CAAC,CAAA;YACjD,IAAI,CAAC,iBAAiB,CAAC,eAAe,CAAC,UAAU,CAAC,CAAA;QACpD,CAAC;IACH,CAAC;IAED,mBAAmB,CAAC,CAAQ;QAC1B,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;YACvB,OAAM;QACR,CAAC;QAED,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,cAAc,GAAG,QAAQ,CAAA;QACjD,IAAI,CAAC,YAAY,CAAC,UAAU,IAAI,IAAI,CAAC,YAAY,CAAC,WAAW,CAAA;QAC7D,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,cAAc,GAAG,MAAM,CAAA;IACjD,CAAC;IAED,oBAAoB,CAAC,CAAQ;QAC3B,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;YACvB,OAAM;QACR,CAAC;QAED,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,cAAc,GAAG,QAAQ,CAAA;QACjD,IAAI,CAAC,YAAY,CAAC,UAAU,IAAI,IAAI,CAAC,YAAY,CAAC,WAAW,CAAA;QAC7D,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,cAAc,GAAG,MAAM,CAAA;IACjD,CAAC;;AA9Ze;IAAf,KAAK,CAAC,OAAO,CAAC;2DAAmB;AACH;IAA9B,KAAK,CAAC,sBAAsB,CAAC;uEAA0B;AACxB;IAA/B,KAAK,CAAC,uBAAuB,CAAC;wEAA2B","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport { html } from 'lit'\nimport { query } from 'lit/decorators.js'\n\nimport { MdIcon } from '@material/web/icon/icon.js'\n\nimport { InputChartAbstract } from './input-chart-abstract'\n\nexport class InputChartMultiSeriesAbstract extends InputChartAbstract {\n  static styles = [...InputChartAbstract.styles]\n\n  @query('#tabs') tabs!: HTMLElement\n  @query('#tab-nav-left-button') tabNavLeftButton!: MdIcon\n  @query('#tab-nav-right-button') tabNavRightButton!: MdIcon\n\n  get tabContainer(): HTMLElement | null | undefined {\n    return this.tabs\n  }\n\n  firstUpdated() {\n    this.tabContainer?.addEventListener('scroll', e => {\n      this._onTabScroll(e)\n    })\n  }\n\n  subTemplate() {\n    const configurer = this.configurer\n\n    return html`\n      <input id=\"multi-axis\" type=\"checkbox\" value-key=\"multiAxis\" ?checked=${configurer.multiAxis} />\n      <label for=\"multi-axis\"> <ox-i18n msgid=\"label.multi-axis\">Multi Axis</ox-i18n> </label>\n\n      <legend><ox-i18n msgid=\"label.series\">Series</ox-i18n></legend>\n\n      ${this.multiSeriesTabTemplate()}\n\n      <legend><ox-i18n msgid=\"label.x-axes\">X Axes</ox-i18n></legend>\n\n      <label for=\"label-data-key\"> <ox-i18n msgid=\"label.data-key\">Data Key</ox-i18n> </label>\n      <input id=\"label-data-key\" type=\"text\" value-key=\"labelDataKey\" .value=${configurer.labelDataKey || ''} />\n\n      <label for=\"axis-title\"> <ox-i18n msgid=\"label.title\">Title</ox-i18n> </label>\n      <input id=\"axis-title\" type=\"text\" value-key=\"xAxes0.axisTitle\" .value=${configurer.xAxes0.axisTitle || ''} />\n\n      <label for=\"x-axes0-thickness\"> <ox-i18n msgid=\"label.thickness\">Thickness</ox-i18n> </label>\n      <input\n        id=\"x-axes0-thickness\"\n        type=\"number\"\n        value-key=\"xAxes0.barPercentage\"\n        .value=${configurer.xAxes0.barPercentage || 0}\n      />\n\n      <input\n        for=\"grid-line\"\n        type=\"checkbox\"\n        value-key=\"value.options.xGridLine\"\n        ?checked=${configurer.config.options?.xGridLine}\n      />\n      <label id=\"grid-line\"> <ox-i18n msgid=\"label.grid-line\">Grid Line</ox-i18n> </label>\n\n      <input\n        for=\"x-axes0-ticks-display\"\n        type=\"checkbox\"\n        value-key=\"xAxes0.ticks.display\"\n        ?checked=${configurer.xAxes0.ticks?.display}\n      />\n      <label id=\"x-axes0-ticks-display\"> <ox-i18n msgid=\"label.display-tick\">Display Tick</ox-i18n> </label>\n\n      <legend><ox-i18n msgid=\"label.y-axes\">Y Axes</ox-i18n></legend>\n\n      <label for=\"y-axes0-axis-title\"> <ox-i18n msgid=\"label.title\">Title</ox-i18n> </label>\n      <input\n        id=\"y-axes0-axis-title\"\n        type=\"text\"\n        value-key=\"yAxes0.axisTitle\"\n        .value=${configurer.yAxes0.axisTitle || ''}\n      />\n\n      <input\n        id=\"y-axes0-ticks-automin\"\n        type=\"checkbox\"\n        value-key=\"yAxes0.ticks.autoMin\"\n        ?checked=${configurer.yAxes0.ticks?.autoMin}\n      />\n      <label for=\"y-axes0-ticks-automin\"> <ox-i18n msgid=\"label.axis-min-auto\">Min Auto</ox-i18n> </label>\n\n      <input\n        id=\"y-axes0-ticks-automax\"\n        type=\"checkbox\"\n        value-key=\"yAxes0.ticks.autoMax\"\n        ?checked=${configurer.yAxes0.ticks?.autoMax}\n      />\n      <label for=\"y-axes0-ticks-automax\"> <ox-i18n msgid=\"label.axis-max-auto\">Max Auto</ox-i18n> </label>\n\n      ${!configurer.yAxes0.ticks?.autoMin\n        ? html`\n            <label for=\"y-axes0-ticks-min\"> <ox-i18n msgid=\"label.axis-min\">Min</ox-i18n> </label>\n            <input\n              id=\"y-axes0-ticks-min\"\n              type=\"number\"\n              value-key=\"yAxes0.ticks.min\"\n              .value=${configurer.yAxes0.ticks?.min}\n            />\n          `\n        : html``}\n      ${!configurer.yAxes0.ticks?.autoMax\n        ? html`\n            <label for=\"y-axes0-ticks-max\"> <ox-i18n msgid=\"label.axis-max\">Max</ox-i18n> </label>\n            <input\n              id=\"y-axes0-ticks-max\"\n              type=\"number\"\n              value-key=\"yAxes0.ticks.max\"\n              .value=${configurer.yAxes0.ticks?.max}\n            />\n          `\n        : html``}\n\n      <label for=\"y-axes0-ticks-step-size\"> <ox-i18n msgid=\"label.axis-step-size\">StepSize</ox-i18n> </label>\n      <input\n        id=\"y-axes0-ticks-step-size\"\n        type=\"number\"\n        value-key=\"yAxes0.ticks.stepSize\"\n        .value=${configurer.yAxes0.ticks?.stepSize}\n      />\n\n      <input\n        id=\"y-grid-line\"\n        type=\"checkbox\"\n        value-key=\"value.options.yGridLine\"\n        ?checked=${configurer.config.options?.yGridLine}\n      />\n      <label for=\"y-grid-line\"> <ox-i18n msgid=\"label.grid-line\">Grid Line</ox-i18n> </label>\n\n      <input\n        id=\"y-axes0-ticks-display\"\n        type=\"checkbox\"\n        value-key=\"yAxes0.ticks.display\"\n        ?checked=${configurer.yAxes0.ticks?.display}\n      />\n      <label for=\"y-axes0-ticks-display\"> <ox-i18n msgid=\"label.display-tick\">Display Tick</ox-i18n> </label>\n\n      ${configurer.config.options?.multiAxis\n        ? html`\n            <legend><ox-i18n msgid=\"label.y-2nd-axes\">Y 2nd Axes</ox-i18n></legend>\n\n            <label for=\"y-axes1.axis-title\"> <ox-i18n msgid=\"label.title\">Title</ox-i18n> </label>\n            <input\n              id=\"y-axes1.axis-title\"\n              type=\"text\"\n              value-key=\"yAxes1.axisTitle\"\n              .value=${configurer.yAxes1.axisTitle || ''}\n            />\n\n            <input\n              id=\"axis-min-auto\"\n              type=\"checkbox\"\n              value-key=\"yAxes1.ticks.autoMin\"\n              ?checked=${configurer.yAxes1.ticks?.autoMin}\n            />\n            <label for=\"axis-min-auto\"> <ox-i18n msgid=\"label.axis-min-auto\">Min Auto</ox-i18n> </label>\n\n            <input\n              id=\"axis-max-auto\"\n              type=\"checkbox\"\n              value-key=\"yAxes1.ticks.autoMax\"\n              ?checked=${configurer.yAxes1.ticks?.autoMax}\n            />\n            <label for=\"axis-max-auto\"> <ox-i18n msgid=\"label.axis-max-auto\">Max Auto</ox-i18n> </label>\n\n            ${!configurer.yAxes1.ticks?.autoMin\n              ? html`\n                  <label for=\"y-axes1.ticks.min\"> <ox-i18n msgid=\"label.axis-min\">Min</ox-i18n> </label>\n                  <input\n                    id=\"y-axes1.ticks.min\"\n                    type=\"number\"\n                    value-key=\"yAxes1.ticks.min\"\n                    .value=${configurer.yAxes1.ticks?.min}\n                  />\n                `\n              : html``}\n            ${!configurer.yAxes1.ticks?.autoMax\n              ? html`\n                  <label for=\"y-axes1-ticks-max\"> <ox-i18n msgid=\"label.axis-max\">Max</ox-i18n> </label>\n                  <input\n                    id=\"y-axes1-ticks-max\"\n                    type=\"number\"\n                    value-key=\"yAxes1.ticks.max\"\n                    .value=${configurer.yAxes1.ticks?.max}\n                  />\n                `\n              : html``}\n\n            <label for=\"y-axes1-ticks-step-size\"> <ox-i18n msgid=\"label.axis-step-size\">StepSize</ox-i18n> </label>\n            <input\n              id=\"y-axes1-ticks-step-size\"\n              type=\"number\"\n              value-key=\"yAxes1.ticks.stepSize\"\n              .value=${configurer.yAxes1.ticks?.stepSize}\n            />\n\n            <input\n              id=\"y2nd-grid-line\"\n              type=\"checkbox\"\n              value-key=\"value.options.y2ndGridLine\"\n              ?checked=${configurer.config.options.y2ndGridLine}\n            />\n            <label for=\"y2nd-grid-line\"> <ox-i18n msgid=\"label.grid-line\">Grid Line</ox-i18n> </label>\n\n            <input\n              id=\"y-axes1.ticks.display\"\n              type=\"checkbox\"\n              value-key=\"yAxes1.ticks.display\"\n              ?checked=${configurer.yAxes1.ticks?.display}\n            />\n            <label for=\"y-axes1.ticks.display\"> <ox-i18n msgid=\"label.display-tick\">Display Tick</ox-i18n> </label>\n          `\n        : html``}\n    `\n  }\n\n  multiSeriesTabTemplate() {\n    const configurer = this.configurer\n\n    return html`\n      <div id=\"series-properties-container\" fullwidth>\n        <div id=\"tab-header\">\n          <md-icon\n            id=\"tab-nav-left-button\"\n            @tap=${(e: Event) => {\n              this._onTabScrollNavLeft(e)\n            }}\n            disabled\n            >chevron_left</md-icon\n          >\n          <div\n            id=\"tabs\"\n            @change=${(e: Event) => {\n              configurer.currentSeriesIndex = (e.target as any).activeTabIndex\n            }}\n            active-tab-index=${configurer.currentSeriesIndex}\n            fit-container\n          >\n            ${configurer.datasets.map(\n              (dataset: any, index: number) => html`\n                <div\n                  data-series=${index + 1}\n                  data-tab-index=${index}\n                  tab\n                  ?selected=${index == configurer.currentSeriesIndex}\n                  @click=${(e: Event) => {\n                    const target = e.target as HTMLDivElement\n                    this.configurer.setCurrentSeriesIndex(Number(target.getAttribute('data-tab-index')))\n                    this.value = { ...this.configurer.value }\n                  }}\n                >\n                  ${index + 1}\n                  ${!configurer.datasets || (configurer.datasets.length != 1 && configurer.currentSeriesIndex == index)\n                    ? html` <md-icon @tap=\"${(e: Event) => this.onTapRemoveCurrentTab(e)}\"> close </md-icon> `\n                    : html``}\n                </div>\n              `\n            )}\n          </div>\n          <md-icon\n            id=\"tab-nav-right-button\"\n            @click=${(e: Event) => {\n              this._onTabScrollNavRight(e)\n            }}\n            disabled\n            >chevron_right</md-icon\n          >\n        </div>\n        <div id=\"add-series-button-container\">\n          <md-icon id=\"add-series-button\" @tap=${(e: Event) => this.onTapAddTab(e)}>add</md-icon>\n        </div>\n\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          ${this.chartType == 'line' || this.chartType == 'bar'\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            : html``}\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=${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=${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=\"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=${configurer.series.pointRadius || 0}\n                />\n              `\n            : html``} <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          ${configurer.series.type == 'line'\n            ? html`\n                <input id=\"seires-fill\" type=\"checkbox\" value-key=\"series.fill\" ?checked=${configurer.series.fill} />\n                <label for=\"seires-fill\"> <ox-i18n msgid=\"label.fill\">fill</ox-i18n> </label>\n              `\n            : html``}\n          ${configurer.multiAxis\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          ${this.displayValueTemplate()}\n        </div>\n      </div>\n    `\n  }\n\n  _onTabScroll(e: Event) {\n    if (!this.tabContainer) {\n      return\n    }\n\n    if (this.tabContainer.clientWidth == this.tabContainer.scrollWidth) {\n      this.tabNavLeftButton.setAttribute('disabled', '')\n      this.tabNavRightButton.setAttribute('disabled', '')\n    }\n    // left-end\n    else if (this.tabContainer.scrollLeft == 0) {\n      this.tabNavLeftButton.setAttribute('disabled', '')\n      this.tabNavRightButton.removeAttribute('disabled')\n    }\n    // right-end\n    else if (this.tabContainer.scrollLeft + this.tabContainer.clientWidth >= this.tabContainer.scrollWidth) {\n      this.tabNavLeftButton.removeAttribute('disabled')\n      this.tabNavRightButton.setAttribute('disabled', '')\n    } else {\n      this.tabNavLeftButton.removeAttribute('disabled')\n      this.tabNavRightButton.removeAttribute('disabled')\n    }\n  }\n\n  _onTabScrollNavLeft(e: Event) {\n    if (!this.tabContainer) {\n      return\n    }\n\n    this.tabContainer.style.scrollBehavior = 'smooth'\n    this.tabContainer.scrollLeft -= this.tabContainer.clientWidth\n    this.tabContainer.style.scrollBehavior = 'auto'\n  }\n\n  _onTabScrollNavRight(e: Event) {\n    if (!this.tabContainer) {\n      return\n    }\n\n    this.tabContainer.style.scrollBehavior = 'smooth'\n    this.tabContainer.scrollLeft += this.tabContainer.clientWidth\n    this.tabContainer.style.scrollBehavior = 'auto'\n  }\n}\n"]}
+{"version":3,"file":"input-chart-multi-series-abstract.js","sourceRoot":"","sources":["../../../src/editors/input-chart-multi-series-abstract.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport { html } from 'lit'\nimport { query } from 'lit/decorators.js'\n\nimport { MdIcon } from '@material/web/icon/icon.js'\n\nimport { InputChartAbstract } from './input-chart-abstract'\n\nexport class InputChartMultiSeriesAbstract extends InputChartAbstract {\n  static styles = [...InputChartAbstract.styles]\n\n  @query('#tabs') tabs!: HTMLElement\n  @query('#tab-nav-left-button') tabNavLeftButton!: MdIcon\n  @query('#tab-nav-right-button') tabNavRightButton!: MdIcon\n\n  get tabContainer(): HTMLElement | null | undefined {\n    return this.tabs\n  }\n\n  firstUpdated() {\n    this.tabContainer?.addEventListener('scroll', e => {\n      this._onTabScroll(e)\n    })\n  }\n\n  subTemplate() {\n    const configurer = this.configurer\n\n    return html`\n      <input id=\"multi-axis\" type=\"checkbox\" value-key=\"multiAxis\" ?checked=${configurer.multiAxis} />\n      <label for=\"multi-axis\"> <ox-i18n msgid=\"label.multi-axis\">Multi Axis</ox-i18n> </label>\n\n      <legend><ox-i18n msgid=\"label.series\">Series</ox-i18n></legend>\n\n      ${this.multiSeriesTabTemplate()}\n\n      <legend><ox-i18n msgid=\"label.x-axes\">X Axes</ox-i18n></legend>\n\n      <label for=\"label-data-key\"> <ox-i18n msgid=\"label.data-key\">Data Key</ox-i18n> </label>\n      <input id=\"label-data-key\" type=\"text\" value-key=\"labelDataKey\" .value=${configurer.labelDataKey || ''} />\n\n      <label for=\"axis-title\"> <ox-i18n msgid=\"label.title\">Title</ox-i18n> </label>\n      <input id=\"axis-title\" type=\"text\" value-key=\"xAxes0.axisTitle\" .value=${configurer.xAxes0.axisTitle || ''} />\n\n      <label for=\"x-axes0-thickness\"> <ox-i18n msgid=\"label.thickness\">Thickness</ox-i18n> </label>\n      <input\n        id=\"x-axes0-thickness\"\n        type=\"number\"\n        value-key=\"xAxes0.barPercentage\"\n        .value=${String(configurer.xAxes0.barPercentage || 0)}\n      />\n\n      <input\n        for=\"grid-line\"\n        type=\"checkbox\"\n        value-key=\"value.options.xGridLine\"\n        ?checked=${configurer.config.options?.xGridLine}\n      />\n      <label id=\"grid-line\"> <ox-i18n msgid=\"label.grid-line\">Grid Line</ox-i18n> </label>\n\n      <input\n        for=\"x-axes0-ticks-display\"\n        type=\"checkbox\"\n        value-key=\"xAxes0.ticks.display\"\n        ?checked=${configurer.xAxes0.ticks?.display}\n      />\n      <label id=\"x-axes0-ticks-display\"> <ox-i18n msgid=\"label.display-tick\">Display Tick</ox-i18n> </label>\n\n      <legend><ox-i18n msgid=\"label.y-axes\">Y Axes</ox-i18n></legend>\n\n      <label for=\"y-axes0-axis-title\"> <ox-i18n msgid=\"label.title\">Title</ox-i18n> </label>\n      <input\n        id=\"y-axes0-axis-title\"\n        type=\"text\"\n        value-key=\"yAxes0.axisTitle\"\n        .value=${configurer.yAxes0.axisTitle || ''}\n      />\n\n      <input\n        id=\"y-axes0-ticks-automin\"\n        type=\"checkbox\"\n        value-key=\"yAxes0.ticks.autoMin\"\n        ?checked=${configurer.yAxes0.ticks?.autoMin}\n      />\n      <label for=\"y-axes0-ticks-automin\"> <ox-i18n msgid=\"label.axis-min-auto\">Min Auto</ox-i18n> </label>\n\n      <input\n        id=\"y-axes0-ticks-automax\"\n        type=\"checkbox\"\n        value-key=\"yAxes0.ticks.autoMax\"\n        ?checked=${configurer.yAxes0.ticks?.autoMax}\n      />\n      <label for=\"y-axes0-ticks-automax\"> <ox-i18n msgid=\"label.axis-max-auto\">Max Auto</ox-i18n> </label>\n\n      ${!configurer.yAxes0.ticks?.autoMin\n        ? html`\n            <label for=\"y-axes0-ticks-min\"> <ox-i18n msgid=\"label.axis-min\">Min</ox-i18n> </label>\n            <input\n              id=\"y-axes0-ticks-min\"\n              type=\"number\"\n              value-key=\"yAxes0.ticks.min\"\n              .value=${String(configurer.yAxes0.ticks?.min)}\n            />\n          `\n        : html``}\n      ${!configurer.yAxes0.ticks?.autoMax\n        ? html`\n            <label for=\"y-axes0-ticks-max\"> <ox-i18n msgid=\"label.axis-max\">Max</ox-i18n> </label>\n            <input\n              id=\"y-axes0-ticks-max\"\n              type=\"number\"\n              value-key=\"yAxes0.ticks.max\"\n              .value=${String(configurer.yAxes0.ticks?.max)}\n            />\n          `\n        : html``}\n\n      <label for=\"y-axes0-ticks-step-size\"> <ox-i18n msgid=\"label.axis-step-size\">StepSize</ox-i18n> </label>\n      <input\n        id=\"y-axes0-ticks-step-size\"\n        type=\"number\"\n        value-key=\"yAxes0.ticks.stepSize\"\n        .value=${String(configurer.yAxes0.ticks?.stepSize)}\n      />\n\n      <input\n        id=\"y-grid-line\"\n        type=\"checkbox\"\n        value-key=\"value.options.yGridLine\"\n        ?checked=${configurer.config.options?.yGridLine}\n      />\n      <label for=\"y-grid-line\"> <ox-i18n msgid=\"label.grid-line\">Grid Line</ox-i18n> </label>\n\n      <input\n        id=\"y-axes0-ticks-display\"\n        type=\"checkbox\"\n        value-key=\"yAxes0.ticks.display\"\n        ?checked=${configurer.yAxes0.ticks?.display}\n      />\n      <label for=\"y-axes0-ticks-display\"> <ox-i18n msgid=\"label.display-tick\">Display Tick</ox-i18n> </label>\n\n      ${configurer.config.options?.multiAxis\n        ? html`\n            <legend><ox-i18n msgid=\"label.y-2nd-axes\">Y 2nd Axes</ox-i18n></legend>\n\n            <label for=\"y-axes1.axis-title\"> <ox-i18n msgid=\"label.title\">Title</ox-i18n> </label>\n            <input\n              id=\"y-axes1.axis-title\"\n              type=\"text\"\n              value-key=\"yAxes1.axisTitle\"\n              .value=${configurer.yAxes1.axisTitle || ''}\n            />\n\n            <input\n              id=\"axis-min-auto\"\n              type=\"checkbox\"\n              value-key=\"yAxes1.ticks.autoMin\"\n              ?checked=${configurer.yAxes1.ticks?.autoMin}\n            />\n            <label for=\"axis-min-auto\"> <ox-i18n msgid=\"label.axis-min-auto\">Min Auto</ox-i18n> </label>\n\n            <input\n              id=\"axis-max-auto\"\n              type=\"checkbox\"\n              value-key=\"yAxes1.ticks.autoMax\"\n              ?checked=${configurer.yAxes1.ticks?.autoMax}\n            />\n            <label for=\"axis-max-auto\"> <ox-i18n msgid=\"label.axis-max-auto\">Max Auto</ox-i18n> </label>\n\n            ${!configurer.yAxes1.ticks?.autoMin\n              ? html`\n                  <label for=\"y-axes1.ticks.min\"> <ox-i18n msgid=\"label.axis-min\">Min</ox-i18n> </label>\n                  <input\n                    id=\"y-axes1.ticks.min\"\n                    type=\"number\"\n                    value-key=\"yAxes1.ticks.min\"\n                    .value=${String(configurer.yAxes1.ticks?.min)}\n                  />\n                `\n              : html``}\n            ${!configurer.yAxes1.ticks?.autoMax\n              ? html`\n                  <label for=\"y-axes1-ticks-max\"> <ox-i18n msgid=\"label.axis-max\">Max</ox-i18n> </label>\n                  <input\n                    id=\"y-axes1-ticks-max\"\n                    type=\"number\"\n                    value-key=\"yAxes1.ticks.max\"\n                    .value=${String(configurer.yAxes1.ticks?.max)}\n                  />\n                `\n              : html``}\n\n            <label for=\"y-axes1-ticks-step-size\"> <ox-i18n msgid=\"label.axis-step-size\">StepSize</ox-i18n> </label>\n            <input\n              id=\"y-axes1-ticks-step-size\"\n              type=\"number\"\n              value-key=\"yAxes1.ticks.stepSize\"\n              .value=${String(configurer.yAxes1.ticks?.stepSize)}\n            />\n\n            <input\n              id=\"y2nd-grid-line\"\n              type=\"checkbox\"\n              value-key=\"value.options.y2ndGridLine\"\n              ?checked=${configurer.config.options.y2ndGridLine}\n            />\n            <label for=\"y2nd-grid-line\"> <ox-i18n msgid=\"label.grid-line\">Grid Line</ox-i18n> </label>\n\n            <input\n              id=\"y-axes1.ticks.display\"\n              type=\"checkbox\"\n              value-key=\"yAxes1.ticks.display\"\n              ?checked=${configurer.yAxes1.ticks?.display}\n            />\n            <label for=\"y-axes1.ticks.display\"> <ox-i18n msgid=\"label.display-tick\">Display Tick</ox-i18n> </label>\n          `\n        : html``}\n    `\n  }\n\n  multiSeriesTabTemplate() {\n    const configurer = this.configurer\n\n    return html`\n      <div id=\"series-properties-container\" fullwidth>\n        <div id=\"tab-header\">\n          <md-icon\n            id=\"tab-nav-left-button\"\n            @tap=${(e: Event) => {\n              this._onTabScrollNavLeft(e)\n            }}\n            disabled\n            >chevron_left</md-icon\n          >\n          <div\n            id=\"tabs\"\n            @change=${(e: Event) => {\n              configurer.currentSeriesIndex = (e.target as any).activeTabIndex\n            }}\n            active-tab-index=${configurer.currentSeriesIndex}\n            fit-container\n          >\n            ${configurer.datasets.map(\n              (dataset: any, index: number) => html`\n                <div\n                  data-series=${index + 1}\n                  data-tab-index=${index}\n                  tab\n                  ?selected=${index == configurer.currentSeriesIndex}\n                  @click=${(e: Event) => {\n                    const target = e.target as HTMLDivElement\n                    this.configurer.setCurrentSeriesIndex(Number(target.getAttribute('data-tab-index')))\n                    this.value = { ...this.configurer.value }\n                  }}\n                >\n                  ${index + 1}\n                  ${!configurer.datasets || (configurer.datasets.length != 1 && configurer.currentSeriesIndex == index)\n                    ? html` <md-icon @tap=\"${(e: Event) => this.onTapRemoveCurrentTab(e)}\"> close </md-icon> `\n                    : html``}\n                </div>\n              `\n            )}\n          </div>\n          <md-icon\n            id=\"tab-nav-right-button\"\n            @click=${(e: Event) => {\n              this._onTabScrollNavRight(e)\n            }}\n            disabled\n            >chevron_right</md-icon\n          >\n        </div>\n        <div id=\"add-series-button-container\">\n          <md-icon id=\"add-series-button\" @tap=${(e: Event) => this.onTapAddTab(e)}>add</md-icon>\n        </div>\n\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          ${this.chartType == 'line' || this.chartType == 'bar'\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            : html``}\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=\"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``} <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          ${configurer.series.type == 'line'\n            ? html`\n                <input id=\"seires-fill\" type=\"checkbox\" value-key=\"series.fill\" ?checked=${configurer.series.fill} />\n                <label for=\"seires-fill\"> <ox-i18n msgid=\"label.fill\">fill</ox-i18n> </label>\n              `\n            : html``}\n          ${configurer.multiAxis\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          ${this.displayValueTemplate()}\n        </div>\n      </div>\n    `\n  }\n\n  _onTabScroll(e: Event) {\n    if (!this.tabContainer) {\n      return\n    }\n\n    if (this.tabContainer.clientWidth == this.tabContainer.scrollWidth) {\n      this.tabNavLeftButton.setAttribute('disabled', '')\n      this.tabNavRightButton.setAttribute('disabled', '')\n    }\n    // left-end\n    else if (this.tabContainer.scrollLeft == 0) {\n      this.tabNavLeftButton.setAttribute('disabled', '')\n      this.tabNavRightButton.removeAttribute('disabled')\n    }\n    // right-end\n    else if (this.tabContainer.scrollLeft + this.tabContainer.clientWidth >= this.tabContainer.scrollWidth) {\n      this.tabNavLeftButton.removeAttribute('disabled')\n      this.tabNavRightButton.setAttribute('disabled', '')\n    } else {\n      this.tabNavLeftButton.removeAttribute('disabled')\n      this.tabNavRightButton.removeAttribute('disabled')\n    }\n  }\n\n  _onTabScrollNavLeft(e: Event) {\n    if (!this.tabContainer) {\n      return\n    }\n\n    this.tabContainer.style.scrollBehavior = 'smooth'\n    this.tabContainer.scrollLeft -= this.tabContainer.clientWidth\n    this.tabContainer.style.scrollBehavior = 'auto'\n  }\n\n  _onTabScrollNavRight(e: Event) {\n    if (!this.tabContainer) {\n      return\n    }\n\n    this.tabContainer.style.scrollBehavior = 'smooth'\n    this.tabContainer.scrollLeft += this.tabContainer.clientWidth\n    this.tabContainer.style.scrollBehavior = 'auto'\n  }\n}\n"]}

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

@@ -0,0 +1,7 @@
+import '@operato/i18n/ox-i18n.js';
+import { InputChartMultiSeriesAbstract } from './input-chart-multi-series-abstract';
+export declare class OxInputChartTimeseries extends InputChartMultiSeriesAbstract {
+    static styles: import("lit").CSSResult[];
+    subTemplate(): import("lit-html").TemplateResult<1>;
+    _hasBarSeries(config: any): boolean;
+}

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

@@ -0,0 +1,234 @@
+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 OxInputChartTimeseries = class OxInputChartTimeseries extends InputChartMultiSeriesAbstract {
+    static { this.styles = InputChartMultiSeriesAbstract.styles; }
+    subTemplate() {
+        const configurer = this.configurer;
+        return html `
+      <input id="multi-axis" type="checkbox" value-key="multiAxis" ?checked=${configurer.multiAxis} />
+      <label for="multi-axis"> <ox-i18n msgid="label.multi-axis">Multi Axis</ox-i18n> </label>
+
+      <legend><ox-i18n msgid="label.series">Series</ox-i18n></legend>
+
+      <div fullwidth>${this.multiSeriesTabTemplate()}</div>
+
+      <legend><ox-i18n msgid="label.x-axes">X 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)} />
+
+      <label for="x-axes0-axis-title"> <ox-i18n msgid="label.title">Title</ox-i18n> </label>
+      <input
+        id="x-axes0-axis-title"
+        type="text"
+        value-key="xAxes0.axisTitle"
+        value=${ifDefined(configurer.xAxes0.axisTitle)}
+      />
+
+      ${this._hasBarSeries(configurer.value)
+            ? html `
+            <label for="bar-spacing"><ox-i18n msgid="label.bar-spacing">Bar Spacing</ox-i18n></label>
+            <input
+              id="bar-spacing"
+              type="number"
+              min="0"
+              max="1"
+              step="0.1"
+              value-key="xAxes0.barSpacing"
+              value=${ifDefined(configurer.xAxes0.barSpacing)}
+            />
+            <label for="tick-spacing"><ox-i18n msgid="label.tick-spacing">Tick Spacing</ox-i18n></label>
+            <input
+              id="tick-spacing"
+              type="number"
+              min="0"
+              max="1"
+              step="0.1"
+              value-key="xAxes0.categorySpacing"
+              value=${ifDefined(configurer.xAxes0.categorySpacing)}
+            />
+          `
+            : html ``}
+
+      <input
+        id="x-grid-line"
+        type="checkbox"
+        value-key="value.options.xGridLine"
+        ?checked=${configurer.config.options?.xGridLine}
+      />
+      <label for="x-grid-line"> <ox-i18n msgid="label.grid-line">Grid Line</ox-i18n> </label>
+
+      <input
+        id="x-axes0-ticks-display"
+        type="checkbox"
+        value-key="xAxes0.ticks.display"
+        ?checked=${configurer.xAxes0.ticks?.display}
+      />
+      <label for="x-axes0-ticks-display"> <ox-i18n msgid="label.display-tick">Display Tick</ox-i18n> </label>
+
+      <legend><ox-i18n msgid="label.y-axes">Y Axes</ox-i18n></legend>
+
+      <label for="y-axes0-axis-title"> <ox-i18n msgid="label.title">Title</ox-i18n> </label>
+      <input
+        id="y-axes0-axis-title"
+        type="text"
+        value-key="yAxes0.axisTitle"
+        value=${configurer.yAxes0.axisTitle || ''}
+      />
+
+      <input
+        id="axis-min-auto"
+        type="checkbox"
+        value-key="yAxes0.ticks.autoMin"
+        ?checked=${configurer.yAxes0.ticks?.autoMin}
+      />
+      <label for="axis-min-auto"> <ox-i18n msgid="label.axis-min-auto">Min Auto</ox-i18n> </label>
+
+      <input
+        id="axis-max-auto"
+        type="checkbox"
+        value-key="yAxes0.ticks.autoMax"
+        ?checked=${configurer.yAxes0.ticks?.autoMax}
+      />
+      <label for="axis-max-auto"> <ox-i18n msgid="label.axis-max-auto">Max Auto</ox-i18n> </label>
+
+      ${!configurer.yAxes0.ticks?.autoMin
+            ? html `
+            <label for="y-axes0-ticks-min"> <ox-i18n msgid="label.axis-min">Min</ox-i18n> </label>
+            <input
+              id="y-axes0-ticks-min"
+              type="number"
+              value-key="yAxes0.ticks.min"
+              value=${ifDefined(configurer.yAxes0.ticks?.min)}
+            />
+          `
+            : html ``}
+      ${!configurer.yAxes0.ticks?.autoMax
+            ? html `
+            <label for="y-axes0-ticks-max"> <ox-i18n msgid="label.axis-max">Max</ox-i18n> </label>
+            <input
+              id="y-axes0-ticks-max"
+              type="number"
+              value-key="yAxes0.ticks.max"
+              value=${ifDefined(configurer.yAxes0.ticks?.max)}
+            />
+          `
+            : html ``}
+
+      <label for="y-axes0-ticks-step-size"> <ox-i18n msgid="label.axis-step-size">StepSize</ox-i18n> </label>
+      <input
+        id="y-axes0-ticks-step-size"
+        type="number"
+        value-key="yAxes0.ticks.stepSize"
+        value=${ifDefined(configurer.yAxes0.ticks?.stepSize)}
+      />
+
+      <input
+        id="y-grid-line"
+        type="checkbox"
+        value-key="value.options.yGridLine"
+        ?checked=${configurer.config.options?.yGridLine}
+      />
+      <label for="y-grid-line"> <ox-i18n msgid="label.grid-line">Grid Line</ox-i18n> </label>
+
+      <input
+        id="y-axes0-ticks-display"
+        type="checkbox"
+        value-key="yAxes0.ticks.display"
+        ?checked=${configurer.yAxes0.ticks?.display}
+      />
+      <label for="y-axes0-ticks-display"> <ox-i18n msgid="label.display-tick">Display Tick</ox-i18n> </label>
+
+      ${configurer.config.options?.multiAxis
+            ? html `
+            <legend><ox-i18n msgid="label.y-2nd-axes">Y 2nd Axes</ox-i18n></legend>
+
+            <label for="y-axes1.axis-title"> <ox-i18n msgid="label.title">Title</ox-i18n> </label>
+            <input
+              id="y-axes1.axis-title"
+              type="text"
+              value-key="yAxes1.axisTitle"
+              value=${ifDefined(configurer.yAxes1?.axisTitle)}
+            />
+
+            <input
+              id="y-axes1-ticks-auto-min"
+              type="checkbox"
+              value-key="yAxes1.ticks.autoMin"
+              ?checked=${configurer.yAxes1?.ticks?.autoMin}
+            />
+            <label for="y-axes1-ticks-auto-min"> <ox-i18n msgid="label.axis-min-auto">Min Auto</ox-i18n> </label>
+
+            <input
+              id="y-axes1-ticks-auto-max"
+              type="checkbox"
+              value-key="yAxes1.ticks.autoMax"
+              ?checked=${configurer.yAxes1?.ticks?.autoMax}
+            />
+            <label for="y-axes1-ticks-auto-max"> <ox-i18n msgid="label.axis-max-auto">Max Auto</ox-i18n> </label>
+
+            ${!configurer.yAxes1?.ticks?.autoMin
+                ? html `
+                  <label for="y-axes1-ticks-min"> <ox-i18n msgid="label.axis-min">Min</ox-i18n> </label>
+                  <input
+                    id="y-axes1-ticks-min"
+                    type="number"
+                    value-key="yAxes1.ticks.min"
+                    value=${ifDefined(configurer.yAxes1?.ticks?.min)}
+                  />
+                `
+                : html ``}
+            ${!configurer.yAxes1?.ticks?.autoMax
+                ? html `
+                  <label for="y-axes1-ticks-max"> <ox-i18n msgid="label.axis-max">Max</ox-i18n> </label>
+                  <input
+                    id="y-axes1-ticks-max"
+                    type="number"
+                    value-key="yAxes1.ticks.max"
+                    value=${ifDefined(configurer.yAxes1?.ticks?.max)}
+                  />
+                `
+                : html ``}
+
+            <label for="y-axes1-ticks-step-size"> <ox-i18n msgid="label.axis-step-size">StepSize</ox-i18n> </label>
+            <input
+              id="y-axes1-ticks-step-size"
+              type="number"
+              value-key="yAxes1.ticks.stepSize"
+              value=${ifDefined(configurer.yAxes1?.ticks?.stepSize)}
+            />
+
+            <input
+              id="y-2nd-grid-line"
+              type="checkbox"
+              value-key="value.options.y2ndGridLine"
+              ?checked=${configurer.config.options?.y2ndGridLine}
+            />
+            <label for="y-2nd-grid-line"> <ox-i18n msgid="label.grid-line">Grid Line</ox-i18n> </label>
+
+            <input
+              id="y-axes1-ticks-display"
+              type="checkbox"
+              value-key="yAxes1.ticks.display"
+              ?checked=${configurer.yAxes1?.ticks?.display}
+            />
+            <label for="y-axes1-ticks-display"> <ox-i18n msgid="label.display-tick">Display Tick</ox-i18n> </label>
+          `
+            : html ``}
+    `;
+    }
+    _hasBarSeries(config) {
+        var hasBarSeries = false;
+        hasBarSeries = config.data.datasets?.some((s) => s.type == 'bar');
+        return hasBarSeries;
+    }
+};
+OxInputChartTimeseries = __decorate([
+    customElement('ox-input-chart-timeseries')
+], OxInputChartTimeseries);
+export { OxInputChartTimeseries };
+//# sourceMappingURL=ox-input-chart-timeseries.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ox-input-chart-timeseries.js","sourceRoot":"","sources":["../../../src/editors/ox-input-chart-timeseries.ts"],"names":[],"mappings":"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","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-timeseries')\nexport class OxInputChartTimeseries extends InputChartMultiSeriesAbstract {\n  static styles = InputChartMultiSeriesAbstract.styles\n\n  subTemplate() {\n    const configurer = this.configurer\n\n    return html`\n      <input id=\"multi-axis\" type=\"checkbox\" value-key=\"multiAxis\" ?checked=${configurer.multiAxis} />\n      <label for=\"multi-axis\"> <ox-i18n msgid=\"label.multi-axis\">Multi Axis</ox-i18n> </label>\n\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.x-axes\">X 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      <label for=\"x-axes0-axis-title\"> <ox-i18n msgid=\"label.title\">Title</ox-i18n> </label>\n      <input\n        id=\"x-axes0-axis-title\"\n        type=\"text\"\n        value-key=\"xAxes0.axisTitle\"\n        value=${ifDefined(configurer.xAxes0.axisTitle)}\n      />\n\n      ${this._hasBarSeries(configurer.value)\n        ? html`\n            <label for=\"bar-spacing\"><ox-i18n msgid=\"label.bar-spacing\">Bar Spacing</ox-i18n></label>\n            <input\n              id=\"bar-spacing\"\n              type=\"number\"\n              min=\"0\"\n              max=\"1\"\n              step=\"0.1\"\n              value-key=\"xAxes0.barSpacing\"\n              value=${ifDefined(configurer.xAxes0.barSpacing)}\n            />\n            <label for=\"tick-spacing\"><ox-i18n msgid=\"label.tick-spacing\">Tick Spacing</ox-i18n></label>\n            <input\n              id=\"tick-spacing\"\n              type=\"number\"\n              min=\"0\"\n              max=\"1\"\n              step=\"0.1\"\n              value-key=\"xAxes0.categorySpacing\"\n              value=${ifDefined(configurer.xAxes0.categorySpacing)}\n            />\n          `\n        : html``}\n\n      <input\n        id=\"x-grid-line\"\n        type=\"checkbox\"\n        value-key=\"value.options.xGridLine\"\n        ?checked=${configurer.config.options?.xGridLine}\n      />\n      <label for=\"x-grid-line\"> <ox-i18n msgid=\"label.grid-line\">Grid Line</ox-i18n> </label>\n\n      <input\n        id=\"x-axes0-ticks-display\"\n        type=\"checkbox\"\n        value-key=\"xAxes0.ticks.display\"\n        ?checked=${configurer.xAxes0.ticks?.display}\n      />\n      <label for=\"x-axes0-ticks-display\"> <ox-i18n msgid=\"label.display-tick\">Display Tick</ox-i18n> </label>\n\n      <legend><ox-i18n msgid=\"label.y-axes\">Y Axes</ox-i18n></legend>\n\n      <label for=\"y-axes0-axis-title\"> <ox-i18n msgid=\"label.title\">Title</ox-i18n> </label>\n      <input\n        id=\"y-axes0-axis-title\"\n        type=\"text\"\n        value-key=\"yAxes0.axisTitle\"\n        value=${configurer.yAxes0.axisTitle || ''}\n      />\n\n      <input\n        id=\"axis-min-auto\"\n        type=\"checkbox\"\n        value-key=\"yAxes0.ticks.autoMin\"\n        ?checked=${configurer.yAxes0.ticks?.autoMin}\n      />\n      <label for=\"axis-min-auto\"> <ox-i18n msgid=\"label.axis-min-auto\">Min Auto</ox-i18n> </label>\n\n      <input\n        id=\"axis-max-auto\"\n        type=\"checkbox\"\n        value-key=\"yAxes0.ticks.autoMax\"\n        ?checked=${configurer.yAxes0.ticks?.autoMax}\n      />\n      <label for=\"axis-max-auto\"> <ox-i18n msgid=\"label.axis-max-auto\">Max Auto</ox-i18n> </label>\n\n      ${!configurer.yAxes0.ticks?.autoMin\n        ? html`\n            <label for=\"y-axes0-ticks-min\"> <ox-i18n msgid=\"label.axis-min\">Min</ox-i18n> </label>\n            <input\n              id=\"y-axes0-ticks-min\"\n              type=\"number\"\n              value-key=\"yAxes0.ticks.min\"\n              value=${ifDefined(configurer.yAxes0.ticks?.min)}\n            />\n          `\n        : html``}\n      ${!configurer.yAxes0.ticks?.autoMax\n        ? html`\n            <label for=\"y-axes0-ticks-max\"> <ox-i18n msgid=\"label.axis-max\">Max</ox-i18n> </label>\n            <input\n              id=\"y-axes0-ticks-max\"\n              type=\"number\"\n              value-key=\"yAxes0.ticks.max\"\n              value=${ifDefined(configurer.yAxes0.ticks?.max)}\n            />\n          `\n        : html``}\n\n      <label for=\"y-axes0-ticks-step-size\"> <ox-i18n msgid=\"label.axis-step-size\">StepSize</ox-i18n> </label>\n      <input\n        id=\"y-axes0-ticks-step-size\"\n        type=\"number\"\n        value-key=\"yAxes0.ticks.stepSize\"\n        value=${ifDefined(configurer.yAxes0.ticks?.stepSize)}\n      />\n\n      <input\n        id=\"y-grid-line\"\n        type=\"checkbox\"\n        value-key=\"value.options.yGridLine\"\n        ?checked=${configurer.config.options?.yGridLine}\n      />\n      <label for=\"y-grid-line\"> <ox-i18n msgid=\"label.grid-line\">Grid Line</ox-i18n> </label>\n\n      <input\n        id=\"y-axes0-ticks-display\"\n        type=\"checkbox\"\n        value-key=\"yAxes0.ticks.display\"\n        ?checked=${configurer.yAxes0.ticks?.display}\n      />\n      <label for=\"y-axes0-ticks-display\"> <ox-i18n msgid=\"label.display-tick\">Display Tick</ox-i18n> </label>\n\n      ${configurer.config.options?.multiAxis\n        ? html`\n            <legend><ox-i18n msgid=\"label.y-2nd-axes\">Y 2nd Axes</ox-i18n></legend>\n\n            <label for=\"y-axes1.axis-title\"> <ox-i18n msgid=\"label.title\">Title</ox-i18n> </label>\n            <input\n              id=\"y-axes1.axis-title\"\n              type=\"text\"\n              value-key=\"yAxes1.axisTitle\"\n              value=${ifDefined(configurer.yAxes1?.axisTitle)}\n            />\n\n            <input\n              id=\"y-axes1-ticks-auto-min\"\n              type=\"checkbox\"\n              value-key=\"yAxes1.ticks.autoMin\"\n              ?checked=${configurer.yAxes1?.ticks?.autoMin}\n            />\n            <label for=\"y-axes1-ticks-auto-min\"> <ox-i18n msgid=\"label.axis-min-auto\">Min Auto</ox-i18n> </label>\n\n            <input\n              id=\"y-axes1-ticks-auto-max\"\n              type=\"checkbox\"\n              value-key=\"yAxes1.ticks.autoMax\"\n              ?checked=${configurer.yAxes1?.ticks?.autoMax}\n            />\n            <label for=\"y-axes1-ticks-auto-max\"> <ox-i18n msgid=\"label.axis-max-auto\">Max Auto</ox-i18n> </label>\n\n            ${!configurer.yAxes1?.ticks?.autoMin\n              ? html`\n                  <label for=\"y-axes1-ticks-min\"> <ox-i18n msgid=\"label.axis-min\">Min</ox-i18n> </label>\n                  <input\n                    id=\"y-axes1-ticks-min\"\n                    type=\"number\"\n                    value-key=\"yAxes1.ticks.min\"\n                    value=${ifDefined(configurer.yAxes1?.ticks?.min)}\n                  />\n                `\n              : html``}\n            ${!configurer.yAxes1?.ticks?.autoMax\n              ? html`\n                  <label for=\"y-axes1-ticks-max\"> <ox-i18n msgid=\"label.axis-max\">Max</ox-i18n> </label>\n                  <input\n                    id=\"y-axes1-ticks-max\"\n                    type=\"number\"\n                    value-key=\"yAxes1.ticks.max\"\n                    value=${ifDefined(configurer.yAxes1?.ticks?.max)}\n                  />\n                `\n              : html``}\n\n            <label for=\"y-axes1-ticks-step-size\"> <ox-i18n msgid=\"label.axis-step-size\">StepSize</ox-i18n> </label>\n            <input\n              id=\"y-axes1-ticks-step-size\"\n              type=\"number\"\n              value-key=\"yAxes1.ticks.stepSize\"\n              value=${ifDefined(configurer.yAxes1?.ticks?.stepSize)}\n            />\n\n            <input\n              id=\"y-2nd-grid-line\"\n              type=\"checkbox\"\n              value-key=\"value.options.y2ndGridLine\"\n              ?checked=${configurer.config.options?.y2ndGridLine}\n            />\n            <label for=\"y-2nd-grid-line\"> <ox-i18n msgid=\"label.grid-line\">Grid Line</ox-i18n> </label>\n\n            <input\n              id=\"y-axes1-ticks-display\"\n              type=\"checkbox\"\n              value-key=\"yAxes1.ticks.display\"\n              ?checked=${configurer.yAxes1?.ticks?.display}\n            />\n            <label for=\"y-axes1-ticks-display\"> <ox-i18n msgid=\"label.display-tick\">Display Tick</ox-i18n> </label>\n          `\n        : html``}\n    `\n  }\n\n  _hasBarSeries(config: any) {\n    var hasBarSeries = false\n    hasBarSeries = config.data.datasets?.some((s: any) => s.type == 'bar')\n\n    return hasBarSeries\n  }\n}\n"]}

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

@@ -43,35 +43,24 @@ let ChartEditor = class ChartEditor extends OxPropertyEditor {
     `
     ]; }
     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} chart-type="line" fullwidth></ox-input-chart-mixed> `
-                : value.type == 'horizontalBar'
-                    ? html ` <ox-input-chart-hbar .value=${value} chart-type="horizontalBar" fullwidth></ox-input-chart-hbar> `
-                    : value.type == 'bar'
-                        ? html ` <ox-input-chart-mixed .value=${value} chart-type="bar" fullwidth></ox-input-chart-mixed> `
-                        : value.type == 'pie'
-                            ? html ` <ox-input-chart-pie .value=${value} chart-type="pie" fullwidth></ox-input-chart-pie> `
-                            : value.type == 'doughnut'
-                                ? html ` <ox-input-chart-pie .value=${value} chart-type="doughnut" fullwidth></ox-input-chart-pie> `
-                                : value.type == 'polarArea'
-                                    ? html ` <ox-input-chart-pie .value=${value} chart-type="polarArea" fullwidth></ox-input-chart-pie> `
-                                    : value.type == 'radar'
-                                        ? html `
-                          <ox-input-chart-radar .value=${value} chart-type="radar" fullwidth></ox-input-chart-radar>
-                        `
-                                        : html ``}
-    `;
+        switch (value) {
+            case 'line':
+            case 'bar':
+                return html ` <ox-input-chart-mixed .value=${value} chart-type=${value} fullwidth></ox-input-chart-mixed> `;
+            case 'horizontalBar':
+                return html ` <ox-input-chart-hbar .value=${value} chart-type=${value} fullwidth></ox-input-chart-hbar> `;
+            case 'pie':
+            case 'doughnut':
+            case 'polarArea':
+                return html ` <ox-input-chart-pie .value=${value} chart-type=${value} fullwidth></ox-input-chart-pie> `;
+            case 'radar':
+                return html ` <ox-input-chart-radar .value=${value} chart-type=${value} fullwidth></ox-input-chart-radar> `;
+            case 'timeseries':
+                return html `
+          <ox-input-chart-timeseries .value=${value} chart-type=${value} fullwidth></ox-input-chart-timeseries>
+        `;
+        }
+        return html ``;
     }
 };
 ChartEditor = __decorate([

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

@@ -1 +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,uDAAuD;gBACnG,CAAC,CAAC,KAAK,CAAC,IAAI,IAAI,eAAe;oBAC7B,CAAC,CAAC,IAAI,CAAA,gCAAgC,KAAK,+DAA+D;oBAC1G,CAAC,CAAC,KAAK,CAAC,IAAI,IAAI,KAAK;wBACnB,CAAC,CAAC,IAAI,CAAA,iCAAiC,KAAK,sDAAsD;wBAClG,CAAC,CAAC,KAAK,CAAC,IAAI,IAAI,KAAK;4BACnB,CAAC,CAAC,IAAI,CAAA,+BAA+B,KAAK,oDAAoD;4BAC9F,CAAC,CAAC,KAAK,CAAC,IAAI,IAAI,UAAU;gCACxB,CAAC,CAAC,IAAI,CAAA,+BAA+B,KAAK,yDAAyD;gCACnG,CAAC,CAAC,KAAK,CAAC,IAAI,IAAI,WAAW;oCACzB,CAAC,CAAC,IAAI,CAAA,+BAA+B,KAAK,0DAA0D;oCACpG,CAAC,CAAC,KAAK,CAAC,IAAI,IAAI,OAAO;wCACrB,CAAC,CAAC,IAAI,CAAA;yDAC6B,KAAK;yBACrC;wCACH,CAAC,CAAC,IAAI,CAAA,EAAE;KACzB,CAAA;IACH,CAAC;;AAlEU,WAAW;IADvB,aAAa,CAAC,0BAA0B,CAAC;GAC7B,WAAW,CAmEvB","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} chart-type=\"line\" fullwidth></ox-input-chart-mixed> `\n          : value.type == 'horizontalBar'\n            ? html` <ox-input-chart-hbar .value=${value} chart-type=\"horizontalBar\" fullwidth></ox-input-chart-hbar> `\n            : value.type == 'bar'\n              ? html` <ox-input-chart-mixed .value=${value} chart-type=\"bar\" fullwidth></ox-input-chart-mixed> `\n              : value.type == 'pie'\n                ? html` <ox-input-chart-pie .value=${value} chart-type=\"pie\" fullwidth></ox-input-chart-pie> `\n                : value.type == 'doughnut'\n                  ? html` <ox-input-chart-pie .value=${value} chart-type=\"doughnut\" fullwidth></ox-input-chart-pie> `\n                  : value.type == 'polarArea'\n                    ? html` <ox-input-chart-pie .value=${value} chart-type=\"polarArea\" fullwidth></ox-input-chart-pie> `\n                    : value.type == 'radar'\n                      ? html`\n                          <ox-input-chart-radar .value=${value} chart-type=\"radar\" fullwidth></ox-input-chart-radar>\n                        `\n                      : html``}\n    `\n  }\n}\n"]}
+{"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,EAAW,MAAM,KAAK,CAAA;AACxC,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,QAAQ,KAAK,EAAE,CAAC;YACd,KAAK,MAAM,CAAC;YACZ,KAAK,KAAK;gBACR,OAAO,IAAI,CAAA,iCAAiC,KAAK,eAAe,KAAK,qCAAqC,CAAA;YAC5G,KAAK,eAAe;gBAClB,OAAO,IAAI,CAAA,gCAAgC,KAAK,eAAe,KAAK,oCAAoC,CAAA;YAC1G,KAAK,KAAK,CAAC;YACX,KAAK,UAAU,CAAC;YAChB,KAAK,WAAW;gBACd,OAAO,IAAI,CAAA,+BAA+B,KAAK,eAAe,KAAK,mCAAmC,CAAA;YACxG,KAAK,OAAO;gBACV,OAAO,IAAI,CAAA,iCAAiC,KAAK,eAAe,KAAK,qCAAqC,CAAA;YAC5G,KAAK,YAAY;gBACf,OAAO,IAAI,CAAA;8CAC2B,KAAK,eAAe,KAAK;SAC9D,CAAA;QACL,CAAC;QAED,OAAO,IAAI,CAAA,EAAE,CAAA;IACf,CAAC;;AAxDU,WAAW;IADvB,aAAa,CAAC,0BAA0B,CAAC;GAC7B,WAAW,CAyDvB","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, nothing } 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    switch (value) {\n      case 'line':\n      case 'bar':\n        return html` <ox-input-chart-mixed .value=${value} chart-type=${value} fullwidth></ox-input-chart-mixed> `\n      case 'horizontalBar':\n        return html` <ox-input-chart-hbar .value=${value} chart-type=${value} fullwidth></ox-input-chart-hbar> `\n      case 'pie':\n      case 'doughnut':\n      case 'polarArea':\n        return html` <ox-input-chart-pie .value=${value} chart-type=${value} fullwidth></ox-input-chart-pie> `\n      case 'radar':\n        return html` <ox-input-chart-radar .value=${value} chart-type=${value} fullwidth></ox-input-chart-radar> `\n      case 'timeseries':\n        return html`\n          <ox-input-chart-timeseries .value=${value} chart-type=${value} fullwidth></ox-input-chart-timeseries>\n        `\n    }\n\n    return html``\n  }\n}\n"]}

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

@@ -6,12 +6,12 @@ declare global {
     }
 }
 declare class OxSciChart extends LitElement {
+    config: OperatoChart.ChartConfig | null;
     data: {
         [attr: string]: any;
     }[];
     attrX: string;
     attrY: string;
-    config: any;
     private chart;
     dataSeries?: any;
     container: HTMLDivElement;

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

@@ -5,18 +5,10 @@ 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.config = null;
+        this.data = [];
         this.attrX = 'x';
         this.attrY = 'y';
-        this.config = null;
         this.chart = null;
     }
     static { this.styles = css `
@@ -101,18 +93,18 @@ let OxSciChart = class OxSciChart extends LitElement {
         return html `<div id="container"></div>`;
     }
 };
+__decorate([
+    property({ type: Object })
+], OxSciChart.prototype, "config", void 0);
 __decorate([
     property({ type: Array })
 ], OxSciChart.prototype, "data", void 0);
 __decorate([
-    property({ type: String })
+    property({ type: String, attribute: 'attr-x' })
 ], OxSciChart.prototype, "attrX", void 0);
 __decorate([
-    property({ type: String })
+    property({ type: String, attribute: 'attr-y' })
 ], OxSciChart.prototype, "attrY", void 0);
-__decorate([
-    property({ type: Object })
-], OxSciChart.prototype, "config", void 0);
 __decorate([
     query('div#container')
 ], OxSciChart.prototype, "container", void 0);

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":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAClE,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAWlD,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QAC6B,SAAI,GAA8B;YAC3D,EAAE,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,EAAE,EAAE;YAC3B,EAAE,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,EAAE,EAAE;YAC3B,EAAE,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,EAAE,EAAE;YAC3B,EAAE,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,EAAE,EAAE;YAC3B,EAAE,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,EAAE,EAAE;YAC3B,EAAE,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,EAAE,EAAE;YAC3B,EAAE,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,EAAE,EAAE;SAC5B,CAAA;QAC2B,UAAK,GAAW,GAAG,CAAA;QACnB,UAAK,GAAW,GAAG,CAAA;QACnB,WAAM,GAAQ,IAAI,CAAA;QAEtC,UAAK,GAAQ,IAAI,CAAA;IA6G3B,CAAC;aAxGQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;GASlB,AATY,CASZ;IAED,YAAY;QACV,IAAI,CAAC,YAAY,EAAE,CAAA;IACrB,CAAC;IAED,KAAK,CAAC,YAAY;QAChB,IAAI,CAAC,MAAM,CAAC,cAAc,EAAE,CAAC;YAC3B,IAAI,CAAC,MAAM,CAAC,sBAAsB,EAAE,CAAC;gBACnC,MAAM,CAAC,sBAAsB,GAAG,IAAI,OAAO,CAAO,OAAO,CAAC,EAAE;oBAC1D,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAA;oBAC/C,MAAM,CAAC,GAAG,GAAG,oDAAoD,CAAA;oBACjE,MAAM,CAAC,WAAW,GAAG,WAAW,CAAA;oBAChC,MAAM,CAAC,MAAM,GAAG,GAAG,EAAE;wBACnB,MAAM,CAAC,cAAc,GAAG,IAAI,CAAA;wBAE5B,QAAQ,CAAC,eAAe,CAAC,mBAAmB,EAAE,CAAA;wBAE9C,OAAO,EAAE,CAAA;oBACX,CAAC,CAAA;oBACD,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAA;gBACnC,CAAC,CAAC,CAAA;YACJ,CAAC;YAED,MAAM,MAAM,CAAC,sBAAsB,CAAA;QACrC,CAAC;QAED,IAAI,CAAC,kBAAkB,EAAE,CAAA;IAC3B,CAAC;IAED,KAAK,CAAC,kBAAkB;QACtB,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,CAAC,MAAM,aAAa,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,IAAI,EAAE,CAAA;QAE1F,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;QAClB,IAAI,CAAC,UAAU,GAAG,UAAU,CAAA;QAE5B,IAAI,CAAC,gBAAgB,EAAE,CAAA;IACzB,CAAC;IAED,KAAK,CAAC,OAAO,CAAC,iBAAyD;QACrE,IAAI,iBAAiB,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;YACpC,MAAM,IAAI,CAAC,kBAAkB,EAAE,CAAA;QACjC,CAAC;QAED,IAAI,iBAAiB,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC;YAClC,IAAI,CAAC,gBAAgB,EAAE,CAAA;YACvB,IAAI,CAAC,KAAK,EAAE,eAAe,CAAC,WAAW,EAAE,CAAA;QAC3C,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,IAAI,CAAC,UAAU;YAAE,OAAM;QAE5B,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,CAAA;QACvB,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAA;QAE5B,IAAI,CAAC,UAAU,CAAC,WAAW,CACzB,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,EAC1B,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAC3B,CAAA;QAED,IAAI,CAAC,KAAK,EAAE,eAAe,CAAC,WAAW,EAAE,CAAA;QACzC,IAAI,CAAC,KAAK,EAAE,eAAe,CAAC,iBAAiB,EAAE,CAAA;IACjD,CAAC;IAED,IAAI,OAAO;QACT,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,IAAI,CAAA;QAEnC,IAAI,CAAC,CAAC,IAAI,YAAY,KAAK,CAAC,EAAE,CAAC;YAC7B,OAAO,EAAE,CAAA;QACX,CAAC;QAED,OAAO,IAAI;aACR,GAAG,CAAC,IAAI,CAAC,EAAE;YACV,IAAI,CAAC,IAAI,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE,CAAC;gBACtC,OAAM;YACR,CAAC;YAED,MAAM,MAAM,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAA;YACpC,IAAI,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC;gBAC5B,OAAO,CAAC,KAAK,CAAC,eAAe,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAA;gBAC3C,OAAM;YACR,CAAC;YAED,OAAO;gBACL,MAAM,EAAE,MAAM,CAAC,OAAO,EAAE,GAAG,IAAI;gBAC/B,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC;aACpB,CAAA;QACH,CAAC,CAAC;aACD,MAAM,CAAC,OAAO,CAAyC,CAAA;IAC5D,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,4BAA4B,CAAA;IACzC,CAAC;;AAzH0B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;wCAQzB;AAC2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAoB;AACnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAoB;AACnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAmB;AAKtB;IAAvB,KAAK,CAAC,eAAe,CAAC;6CAA2B;AAjB9C,UAAU;IADf,aAAa,CAAC,aAAa,CAAC;GACvB,UAAU,CA2Hf","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"]}
+{"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: Object }) config: OperatoChart.ChartConfig | null = null\n  @property({ type: Array }) data: { [attr: string]: any }[] = []\n  @property({ type: String, attribute: 'attr-x' }) attrX: string = 'x'\n  @property({ type: String, attribute: 'attr-y' }) attrY: string = 'y'\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/utils/text-formatter.d.ts

@@ -0,0 +1 @@
+export declare function format(mask: string, value: number): string;