@operato/chart 7.0.37 → 7.0.40

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

@@ -1 +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, css } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { InputChartAbstract } from './input-chart-abstract'\n\n@customElement('ox-input-chart-timeseries')\nexport class OxInputChartTimeseries extends InputChartAbstract {\n  static styles = [\n    ...InputChartAbstract.styles,\n    css`\n      legend[collapsable] {\n        box-sizing: border-box;\n        width: 100%;\n      }\n\n      legend[collapsable] md-icon {\n        float: right;\n        font-size: medium;\n        margin: 0;\n      }\n\n      div[collapsed] {\n        display: none;\n      }\n    `\n  ]\n\n  @state() annotationExpanded = false\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      <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      <legend collapsable>\n        <ox-i18n msgid=\"label.chart-annotation\">Annotations</ox-i18n>\n        <md-icon\n          @tap=${() => {\n            this.annotationExpanded = !this.annotationExpanded\n          }}\n          >${this.annotationExpanded ? 'expand_less' : 'expand_more'}</md-icon\n        >\n      </legend>\n      <div fullwidth ?collapsed=${!this.annotationExpanded}>${this.annotationsTabTemplate()}</div>\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"]}
+{"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, css } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { InputChartAbstract } from './input-chart-abstract'\n\nimport './templates/annotations'\nimport './templates/series'\n\n@customElement('ox-input-chart-timeseries')\nexport class OxInputChartTimeseries extends InputChartAbstract {\n  static styles = [\n    ...InputChartAbstract.styles,\n    css`\n      legend[collapsable] {\n        box-sizing: border-box;\n        width: 100%;\n      }\n\n      legend[collapsable] md-icon {\n        float: right;\n        font-size: medium;\n        margin: 0;\n      }\n\n      [collapsed] {\n        display: none;\n      }\n    `\n  ]\n\n  @state() annotationExpanded = false\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      <ox-chart-series .configurer=${configurer} .chartType=${this.chartType} fullwidth></ox-chart-series>\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      <legend collapsable>\n        <ox-i18n msgid=\"label.chart-annotation\">Annotations</ox-i18n>\n        <md-icon\n          @tap=${() => {\n            this.annotationExpanded = !this.annotationExpanded\n          }}\n          >${this.annotationExpanded ? 'expand_less' : 'expand_more'}</md-icon\n        >\n      </legend>\n      <ox-chart-annotations\n        .configurer=${configurer}\n        ?collapsed=${!this.annotationExpanded}\n        fullwidth\n      ></ox-chart-annotations>\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.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;AAC/B,OAAO,6BAA6B,CAAA;AAEpC,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,CAAC,IAAI,EAAE,CAAC;YACnB,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'\nimport './ox-input-chart-timeseries'\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.type) {\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"]}
+{"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;AAC/B,OAAO,6BAA6B,CAAA;AAEpC,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,QAAQ,KAAK,CAAC,IAAI,EAAE,CAAC;YACnB,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'\nimport './ox-input-chart-timeseries'\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    switch (value.type) {\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/editors/templates/annotations.d.ts

@@ -0,0 +1,23 @@
+import '@material/web/icon/icon.js';
+import { LitElement, PropertyValues } from 'lit';
+import { MdIcon } from '@material/web/icon/icon.js';
+import { Configurer } from '../configurer';
+export declare class AnnotationsTemplate extends LitElement {
+    createRenderRoot(): this;
+    configurer: Configurer;
+    annotationsTabs: HTMLElement;
+    annotationsTabNavLeftButton: MdIcon;
+    annotationsTabNavRightButton: MdIcon;
+    protected updated(_changedProperties: PropertyValues): void;
+    render(): import("lit-html/directive").DirectiveResult<typeof import("lit-html/directives/keyed").Keyed>;
+    private _renderTabs;
+    private _renderAnnotationForm;
+    private _selectTab;
+    private _removeAnnotation;
+    private _addAnnotation;
+    private _onWheelScroll;
+    private _scrollLeft;
+    private _scrollRight;
+    private _scrollTabContainer;
+    private _onTabScroll;
+}

package/dist/src/editors/templates/annotations.js

@@ -0,0 +1,270 @@
+import { __decorate } from "tslib";
+import '@material/web/icon/icon.js';
+import { LitElement, html } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { keyed } from 'lit/directives/keyed.js';
+let AnnotationsTemplate = class AnnotationsTemplate extends LitElement {
+    createRenderRoot() {
+        return this;
+    }
+    updated(_changedProperties) {
+        if (_changedProperties.has('configurer')) {
+            this.requestUpdate();
+        }
+    }
+    render() {
+        return keyed(this.configurer.currentAnnotationIndex, html `
+        <div id="annotations-properties-container" fullwidth>
+          <div id="annotations-tab-header" @wheel=${this._onWheelScroll}>
+            <md-icon id="annotations-tab-nav-left-button" @click=${this._scrollLeft}>chevron_left</md-icon>
+            <div id="annotations-tabs" active-tab-index=${this.configurer.currentAnnotationIndex} fit-container>
+              ${this._renderTabs()}
+            </div>
+            <md-icon id="annotations-tab-nav-right-button" @click=${this._scrollRight}>chevron_right</md-icon>
+          </div>
+          <div id="add-annotation-button-container">
+            <md-icon id="add-annotation-button" @click=${this._addAnnotation}>add</md-icon>
+          </div>
+          ${this._renderAnnotationForm()}
+        </div>
+      `);
+    }
+    _renderTabs() {
+        return this.configurer.annotations.map((annotation, index) => html `
+        <div
+          data-annotation=${index + 1}
+          data-tab-index=${index}
+          tab
+          ?selected=${index === this.configurer.currentAnnotationIndex}
+          @click=${() => this._selectTab(index)}
+        >
+          ${index + 1}
+          ${this.configurer.annotations.length > 0 && this.configurer.currentAnnotationIndex === index
+            ? html `<md-icon @click=${() => this._removeAnnotation(index)}>close</md-icon>`
+            : html ``}
+        </div>
+      `);
+    }
+    _renderAnnotationForm() {
+        const currentAnnotation = this.configurer.currentAnnotationIndex >= 0
+            ? this.configurer.annotations[this.configurer.currentAnnotationIndex]
+            : undefined;
+        if (!currentAnnotation) {
+            return html `<p>No annotations available. Add one using the button above.</p>`;
+        }
+        return html `
+      <div class="tab-content">
+        <label for="annotation-type"> <ox-i18n msgid="label.chart-annotation-type">Type</ox-i18n> </label>
+        <select
+          id="annotation-type"
+          class="select-content"
+          value-key="annotation.type"
+          .value=${currentAnnotation.type || ''}
+        >
+          <option value="">&nbsp;</option>
+          <option value="line">Line</option>
+          <option value="text">Text</option>
+          <option value="box">Box</option>
+          <option value="horizontalLine">Horizontal Line</option>
+          <option value="verticalLine">Vertical Line</option>
+        </select>
+
+        <label for="annotation-x1">X1</label>
+        <input
+          id="annotation-x1"
+          type="number"
+          value-key="annotation.x1"
+          .value=${String(currentAnnotation.x1 || 0)}
+        />
+
+        <label for="annotation-y1">Y1</label>
+        <input
+          id="annotation-y1"
+          type="number"
+          value-key="annotation.y1"
+          .value=${String(currentAnnotation.y1 || 0)}
+        />
+
+        <label for="annotation-x2">X2</label>
+        <input
+          id="annotation-x2"
+          type="number"
+          value-key="annotation.x2"
+          .value=${String(currentAnnotation.x2 || 0)}
+        />
+
+        <label for="annotation-y2">Y2</label>
+        <input
+          id="annotation-y2"
+          type="number"
+          value-key="annotation.y2"
+          .value=${String(currentAnnotation.y2 || 0)}
+        />
+
+        <label for="annotation-stroke"> <ox-i18n msgid="label.stroke-style">Stroke Style</ox-i18n> </label>
+        <ox-input-color
+          id="annotation-stroke"
+          value-key="annotation.stroke"
+          .value=${currentAnnotation.stroke}
+        ></ox-input-color>
+
+        <label for="annotation-stroke-thickness">
+          <ox-i18n msgid="label.stroke-thickness">Stroke Thickness</ox-i18n>
+        </label>
+        <input
+          id="annotation-stroke-thickness"
+          type="number"
+          value-key="annotation.strokeThickness"
+          .value=${String(currentAnnotation.strokeThickness || 1)}
+        />
+
+        <label for="annotation-fill"> <ox-i18n msgid="label.fill">Fill</ox-i18n> </label>
+        <ox-input-color
+          id="annotation-fill"
+          value-key="annotation.fill"
+          .value=${currentAnnotation.fill}
+        ></ox-input-color>
+
+        <label for="annotation-text"> <ox-i18n msgid="label.annotation-text">Text</ox-i18n> </label>
+        <input id="annotation-text" type="text" value-key="annotation.text" .value=${currentAnnotation.text || ''} />
+
+        <label for="annotation-horizontal-anchor">
+          <ox-i18n msgid="label.horizontal-anchor">Horizontal Anchor</ox-i18n>
+        </label>
+        <select
+          id="annotation-horizontal-anchor"
+          class="select-content"
+          value-key="annotation.horizontalAnchorPoint"
+          .value=${currentAnnotation.horizontalAnchorPoint || ''}
+        >
+          <option value="">&nbsp;</option>
+          <option value="Left">Left</option>
+          <option value="Center">Center</option>
+          <option value="Right">Right</option>
+        </select>
+
+        <label for="annotation-vertical-anchor">
+          <ox-i18n msgid="label.vertical-anchor">Vertical Anchor</ox-i18n>
+        </label>
+        <select
+          id="annotation-vertical-anchor"
+          class="select-content"
+          value-key="annotation.verticalAnchorPoint"
+          .value=${currentAnnotation.verticalAnchorPoint || ''}
+        >
+          <option value="">&nbsp;</option>
+          <option value="Top">Top</option>
+          <option value="Center">Center</option>
+          <option value="Bottom">Bottom</option>
+        </select>
+
+        <label for="annotation-x-coordinate-mode">X Coordinate Mode</label>
+        <select
+          id="annotation-x-coordinate-mode"
+          class="select-content"
+          value-key="annotation.xCoordinateMode"
+          .value=${currentAnnotation.xCoordinateMode || 'DataValue'}
+        >
+          <option value="">&nbsp;</option>
+          <option value="DataValue">DataValue</option>
+          <option value="Pixel">Pixel</option>
+          <option value="Relative">Relative</option>
+        </select>
+
+        <label for="annotation-y-coordinate-mode">Y Coordinate Mode</label>
+        <select
+          id="annotation-y-coordinate-mode"
+          class="select-content"
+          value-key="annotation.yCoordinateMode"
+          .value=${currentAnnotation.yCoordinateMode || 'DataValue'}
+        >
+          <option value="">&nbsp;</option>
+          <option value="DataValue">DataValue</option>
+          <option value="Pixel">Pixel</option>
+          <option value="Relative">Relative</option>
+        </select>
+      </div>
+    `;
+    }
+    _selectTab(index) {
+        this.configurer.setCurrentAnnotationIndex(index);
+        this.requestUpdate();
+    }
+    _removeAnnotation(index) {
+        this.configurer.removeAnnotation(index);
+        this.requestUpdate();
+    }
+    _addAnnotation() {
+        this.configurer.addAnnotation();
+        this.requestUpdate();
+    }
+    _onWheelScroll(event) {
+        const tabContainer = this.annotationsTabs;
+        if (tabContainer) {
+            event.preventDefault();
+            tabContainer.scrollLeft += event.deltaY;
+            this._onTabScroll();
+        }
+    }
+    _scrollLeft() {
+        this._scrollTabContainer(-1);
+    }
+    _scrollRight() {
+        this._scrollTabContainer(1);
+    }
+    _scrollTabContainer(direction) {
+        const tabContainer = this.renderRoot.querySelector('#annotations-tabs');
+        if (tabContainer) {
+            tabContainer.style.scrollBehavior = 'smooth';
+            tabContainer.scrollLeft += direction * tabContainer.clientWidth;
+        }
+        setTimeout(() => {
+            tabContainer.style.scrollBehavior = 'auto';
+            this._onTabScroll();
+        }, 300);
+    }
+    _onTabScroll() {
+        let tabContainer;
+        let tabNavLeftButton;
+        let tabNavRightButton;
+        tabContainer = this.annotationsTabs;
+        tabNavLeftButton = this.annotationsTabNavLeftButton;
+        tabNavRightButton = this.annotationsTabNavRightButton;
+        if (!tabContainer) {
+            return;
+        }
+        if (tabContainer.clientWidth == tabContainer.scrollWidth) {
+            tabNavLeftButton.setAttribute('disabled', '');
+            tabNavRightButton.setAttribute('disabled', '');
+        }
+        else if (tabContainer.scrollLeft <= 0) {
+            tabNavLeftButton.setAttribute('disabled', '');
+            tabNavRightButton.removeAttribute('disabled');
+        }
+        else if (tabContainer.scrollLeft + tabContainer.clientWidth >= tabContainer.scrollWidth) {
+            tabNavLeftButton.removeAttribute('disabled');
+            tabNavRightButton.setAttribute('disabled', '');
+        }
+        else {
+            tabNavLeftButton.removeAttribute('disabled');
+            tabNavRightButton.removeAttribute('disabled');
+        }
+    }
+};
+__decorate([
+    property({ type: Object })
+], AnnotationsTemplate.prototype, "configurer", void 0);
+__decorate([
+    query('#annotations-tabs')
+], AnnotationsTemplate.prototype, "annotationsTabs", void 0);
+__decorate([
+    query('#annotations-tab-nav-left-button')
+], AnnotationsTemplate.prototype, "annotationsTabNavLeftButton", void 0);
+__decorate([
+    query('#annotations-tab-nav-right-button')
+], AnnotationsTemplate.prototype, "annotationsTabNavRightButton", void 0);
+AnnotationsTemplate = __decorate([
+    customElement('ox-chart-annotations')
+], AnnotationsTemplate);
+export { AnnotationsTemplate };
+//# sourceMappingURL=annotations.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"annotations.js","sourceRoot":"","sources":["../../../../src/editors/templates/annotations.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { LitElement, html, PropertyValues } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { keyed } from 'lit/directives/keyed.js'\nimport { MdIcon } from '@material/web/icon/icon.js'\n\nimport { Configurer } from '../configurer'\n\n@customElement('ox-chart-annotations')\nexport class AnnotationsTemplate extends LitElement {\n  createRenderRoot() {\n    return this\n  }\n\n  @property({ type: Object }) configurer!: Configurer\n\n  @query('#annotations-tabs') annotationsTabs!: HTMLElement\n  @query('#annotations-tab-nav-left-button') annotationsTabNavLeftButton!: MdIcon\n  @query('#annotations-tab-nav-right-button') annotationsTabNavRightButton!: MdIcon\n\n  protected updated(_changedProperties: PropertyValues): void {\n    if (_changedProperties.has('configurer')) {\n      this.requestUpdate()\n    }\n  }\n\n  render() {\n    return keyed(\n      this.configurer.currentAnnotationIndex,\n      html`\n        <div id=\"annotations-properties-container\" fullwidth>\n          <div id=\"annotations-tab-header\" @wheel=${this._onWheelScroll}>\n            <md-icon id=\"annotations-tab-nav-left-button\" @click=${this._scrollLeft}>chevron_left</md-icon>\n            <div id=\"annotations-tabs\" active-tab-index=${this.configurer.currentAnnotationIndex} fit-container>\n              ${this._renderTabs()}\n            </div>\n            <md-icon id=\"annotations-tab-nav-right-button\" @click=${this._scrollRight}>chevron_right</md-icon>\n          </div>\n          <div id=\"add-annotation-button-container\">\n            <md-icon id=\"add-annotation-button\" @click=${this._addAnnotation}>add</md-icon>\n          </div>\n          ${this._renderAnnotationForm()}\n        </div>\n      `\n    )\n  }\n\n  private _renderTabs() {\n    return this.configurer.annotations.map(\n      (annotation: OperatoChart.Annotation, index: number) => html`\n        <div\n          data-annotation=${index + 1}\n          data-tab-index=${index}\n          tab\n          ?selected=${index === this.configurer.currentAnnotationIndex}\n          @click=${() => this._selectTab(index)}\n        >\n          ${index + 1}\n          ${this.configurer.annotations.length > 0 && this.configurer.currentAnnotationIndex === index\n            ? html`<md-icon @click=${() => this._removeAnnotation(index)}>close</md-icon>`\n            : html``}\n        </div>\n      `\n    )\n  }\n\n  private _renderAnnotationForm() {\n    const currentAnnotation =\n      this.configurer.currentAnnotationIndex >= 0\n        ? this.configurer.annotations[this.configurer.currentAnnotationIndex]\n        : undefined\n\n    if (!currentAnnotation) {\n      return html`<p>No annotations available. Add one using the button above.</p>`\n    }\n\n    return html`\n      <div class=\"tab-content\">\n        <label for=\"annotation-type\"> <ox-i18n msgid=\"label.chart-annotation-type\">Type</ox-i18n> </label>\n        <select\n          id=\"annotation-type\"\n          class=\"select-content\"\n          value-key=\"annotation.type\"\n          .value=${currentAnnotation!.type || ''}\n        >\n          <option value=\"\">&nbsp;</option>\n          <option value=\"line\">Line</option>\n          <option value=\"text\">Text</option>\n          <option value=\"box\">Box</option>\n          <option value=\"horizontalLine\">Horizontal Line</option>\n          <option value=\"verticalLine\">Vertical Line</option>\n        </select>\n\n        <label for=\"annotation-x1\">X1</label>\n        <input\n          id=\"annotation-x1\"\n          type=\"number\"\n          value-key=\"annotation.x1\"\n          .value=${String(currentAnnotation!.x1 || 0)}\n        />\n\n        <label for=\"annotation-y1\">Y1</label>\n        <input\n          id=\"annotation-y1\"\n          type=\"number\"\n          value-key=\"annotation.y1\"\n          .value=${String(currentAnnotation!.y1 || 0)}\n        />\n\n        <label for=\"annotation-x2\">X2</label>\n        <input\n          id=\"annotation-x2\"\n          type=\"number\"\n          value-key=\"annotation.x2\"\n          .value=${String(currentAnnotation!.x2 || 0)}\n        />\n\n        <label for=\"annotation-y2\">Y2</label>\n        <input\n          id=\"annotation-y2\"\n          type=\"number\"\n          value-key=\"annotation.y2\"\n          .value=${String(currentAnnotation!.y2 || 0)}\n        />\n\n        <label for=\"annotation-stroke\"> <ox-i18n msgid=\"label.stroke-style\">Stroke Style</ox-i18n> </label>\n        <ox-input-color\n          id=\"annotation-stroke\"\n          value-key=\"annotation.stroke\"\n          .value=${currentAnnotation!.stroke}\n        ></ox-input-color>\n\n        <label for=\"annotation-stroke-thickness\">\n          <ox-i18n msgid=\"label.stroke-thickness\">Stroke Thickness</ox-i18n>\n        </label>\n        <input\n          id=\"annotation-stroke-thickness\"\n          type=\"number\"\n          value-key=\"annotation.strokeThickness\"\n          .value=${String(currentAnnotation!.strokeThickness || 1)}\n        />\n\n        <label for=\"annotation-fill\"> <ox-i18n msgid=\"label.fill\">Fill</ox-i18n> </label>\n        <ox-input-color\n          id=\"annotation-fill\"\n          value-key=\"annotation.fill\"\n          .value=${currentAnnotation!.fill}\n        ></ox-input-color>\n\n        <label for=\"annotation-text\"> <ox-i18n msgid=\"label.annotation-text\">Text</ox-i18n> </label>\n        <input id=\"annotation-text\" type=\"text\" value-key=\"annotation.text\" .value=${currentAnnotation!.text || ''} />\n\n        <label for=\"annotation-horizontal-anchor\">\n          <ox-i18n msgid=\"label.horizontal-anchor\">Horizontal Anchor</ox-i18n>\n        </label>\n        <select\n          id=\"annotation-horizontal-anchor\"\n          class=\"select-content\"\n          value-key=\"annotation.horizontalAnchorPoint\"\n          .value=${currentAnnotation!.horizontalAnchorPoint || ''}\n        >\n          <option value=\"\">&nbsp;</option>\n          <option value=\"Left\">Left</option>\n          <option value=\"Center\">Center</option>\n          <option value=\"Right\">Right</option>\n        </select>\n\n        <label for=\"annotation-vertical-anchor\">\n          <ox-i18n msgid=\"label.vertical-anchor\">Vertical Anchor</ox-i18n>\n        </label>\n        <select\n          id=\"annotation-vertical-anchor\"\n          class=\"select-content\"\n          value-key=\"annotation.verticalAnchorPoint\"\n          .value=${currentAnnotation!.verticalAnchorPoint || ''}\n        >\n          <option value=\"\">&nbsp;</option>\n          <option value=\"Top\">Top</option>\n          <option value=\"Center\">Center</option>\n          <option value=\"Bottom\">Bottom</option>\n        </select>\n\n        <label for=\"annotation-x-coordinate-mode\">X Coordinate Mode</label>\n        <select\n          id=\"annotation-x-coordinate-mode\"\n          class=\"select-content\"\n          value-key=\"annotation.xCoordinateMode\"\n          .value=${currentAnnotation!.xCoordinateMode || 'DataValue'}\n        >\n          <option value=\"\">&nbsp;</option>\n          <option value=\"DataValue\">DataValue</option>\n          <option value=\"Pixel\">Pixel</option>\n          <option value=\"Relative\">Relative</option>\n        </select>\n\n        <label for=\"annotation-y-coordinate-mode\">Y Coordinate Mode</label>\n        <select\n          id=\"annotation-y-coordinate-mode\"\n          class=\"select-content\"\n          value-key=\"annotation.yCoordinateMode\"\n          .value=${currentAnnotation!.yCoordinateMode || 'DataValue'}\n        >\n          <option value=\"\">&nbsp;</option>\n          <option value=\"DataValue\">DataValue</option>\n          <option value=\"Pixel\">Pixel</option>\n          <option value=\"Relative\">Relative</option>\n        </select>\n      </div>\n    `\n  }\n\n  private _selectTab(index: number) {\n    this.configurer.setCurrentAnnotationIndex(index)\n    this.requestUpdate()\n  }\n\n  private _removeAnnotation(index: number) {\n    this.configurer.removeAnnotation(index)\n    this.requestUpdate()\n  }\n\n  private _addAnnotation() {\n    this.configurer.addAnnotation()\n    this.requestUpdate()\n  }\n\n  private _onWheelScroll(event: WheelEvent) {\n    const tabContainer = this.annotationsTabs\n    if (tabContainer) {\n      event.preventDefault()\n\n      tabContainer.scrollLeft += event.deltaY\n\n      this._onTabScroll()\n    }\n  }\n\n  private _scrollLeft() {\n    this._scrollTabContainer(-1)\n  }\n\n  private _scrollRight() {\n    this._scrollTabContainer(1)\n  }\n\n  private _scrollTabContainer(direction: number) {\n    const tabContainer = this.renderRoot!.querySelector<HTMLElement>('#annotations-tabs')\n    if (tabContainer) {\n      tabContainer.style.scrollBehavior = 'smooth'\n      tabContainer.scrollLeft += direction * tabContainer.clientWidth\n    }\n\n    setTimeout(() => {\n      tabContainer!.style.scrollBehavior = 'auto'\n      this._onTabScroll()\n    }, 300)\n  }\n\n  private _onTabScroll() {\n    let tabContainer: HTMLElement | null | undefined\n    let tabNavLeftButton: MdIcon\n    let tabNavRightButton: MdIcon\n\n    tabContainer = this.annotationsTabs\n    tabNavLeftButton = this.annotationsTabNavLeftButton\n    tabNavRightButton = this.annotationsTabNavRightButton\n\n    if (!tabContainer) {\n      return\n    }\n\n    if (tabContainer.clientWidth == tabContainer.scrollWidth) {\n      tabNavLeftButton.setAttribute('disabled', '')\n      tabNavRightButton.setAttribute('disabled', '')\n    } else if (tabContainer.scrollLeft <= 0) {\n      tabNavLeftButton.setAttribute('disabled', '')\n      tabNavRightButton.removeAttribute('disabled')\n    } else if (tabContainer.scrollLeft + tabContainer.clientWidth >= tabContainer.scrollWidth) {\n      tabNavLeftButton.removeAttribute('disabled')\n      tabNavRightButton.setAttribute('disabled', '')\n    } else {\n      tabNavLeftButton.removeAttribute('disabled')\n      tabNavRightButton.removeAttribute('disabled')\n    }\n  }\n}\n"]}

package/dist/src/editors/templates/display-value.d.ts

@@ -0,0 +1,12 @@
+import { LitElement } from 'lit';
+import { Configurer } from '../configurer';
+export declare class DisplayValue extends LitElement {
+    createRenderRoot(): this;
+    configurer: Configurer;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ox-chart-display-value': DisplayValue;
+    }
+}

package/dist/src/editors/templates/display-value.js

@@ -0,0 +1,105 @@
+import { __decorate } from "tslib";
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+let DisplayValue = class DisplayValue extends LitElement {
+    createRenderRoot() {
+        return this;
+    }
+    render() {
+        const configurer = this.configurer;
+        return html `
+      <div id="display-value-container">
+        <label for="value-format"> <ox-i18n msgid="label.value-format">Value Format</ox-i18n> </label>
+        <input
+          id="value-format"
+          type="text"
+          value-key="series.valueFormat"
+          .value=${configurer.series.valueFormat || ''}
+          list="format-list"
+        />
+        <datalist id="format-list">
+          <option value="#,###."></option>
+          <option value="#,###.#"></option>
+          <option value="#,###.0"></option>
+          <option value="#,##0.#"></option>
+          <option value="#,##0.0"></option>
+          <option value="#,##0.0%"></option>
+        </datalist>
+
+        <label for="value-prefix"> <ox-i18n msgid="label.value-prefix">Value Prefix</ox-i18n> </label>
+        <input
+          id="value-prefix"
+          type="text"
+          value-key="series.valuePrefix"
+          .value=${configurer.series.valuePrefix || ''}
+        />
+
+        <label for="value-suffix"> <ox-i18n msgid="label.value-suffix">Value Suffix</ox-i18n> </label>
+        <input
+          id="value-suffix"
+          type="text"
+          value-key="series.valueSuffix"
+          .value=${configurer.series.valueSuffix || ''}
+        />
+
+        <input
+          id="display-value"
+          type="checkbox"
+          value-key="series.displayValue"
+          ?checked=${!!configurer.series.displayValue}
+        />
+        <label for="display-value"> <ox-i18n msgid="label.value-display">Value Display</ox-i18n> </label>
+
+        ${configurer.series.displayValue
+            ? html `
+              <label for="font-color"> <ox-i18n msgid="label.font-color">Font Color</ox-i18n> </label>
+              <ox-input-color
+                id="font-color"
+                value-key="series.defaultFontColor"
+                .value=${configurer.series.defaultFontColor || '#000'}
+              ></ox-input-color>
+              <label for="font-size"> <ox-i18n msgid="label.font-size">Font Size</ox-i18n> </label>
+              <input
+                id="font-size"
+                type="number"
+                value-key="series.defaultFontSize"
+                .value=${configurer.series.defaultFontSize || 10}
+              />
+              <label for="data-label-anchor"> <ox-i18n msgid="label.data-label-anchor">Position</ox-i18n> </label>
+              <select
+                id="data-label-anchor"
+                value-key="series.dataLabelAnchor"
+                .value=${configurer.series.dataLabelAnchor || 'center'}
+              >
+                <option value="center">Center</option>
+                <option value="start">Start</option>
+                <option value="end">End</option>
+              </select>
+              <label for="data-label-offset"> <ox-i18n msgid="label.data-label-offset">Offset</ox-i18n> </label>
+              <input
+                id="data-label-offset"
+                type="number"
+                value-key="series.dataLabelOffset"
+                .value=${configurer.series.dataLabelOffset || 0}
+              />
+              <label for="data-label-rotation"> <ox-i18n msgid="label.data-label-rotation">Rotation</ox-i18n> </label>
+              <input
+                id="data-label-rotation"
+                type="number"
+                value-key="series.dataLabelRotation"
+                .value=${configurer.series.dataLabelRotation || 0}
+              />
+            `
+            : html ``}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Object })
+], DisplayValue.prototype, "configurer", void 0);
+DisplayValue = __decorate([
+    customElement('ox-chart-display-value')
+], DisplayValue);
+export { DisplayValue };
+//# sourceMappingURL=display-value.js.map

package/dist/src/editors/templates/display-value.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"display-value.js","sourceRoot":"","sources":["../../../../src/editors/templates/display-value.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAKpD,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAC1C,gBAAgB;QACd,OAAO,IAAI,CAAA;IACb,CAAC;IAID,MAAM;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAA;QAElC,OAAO,IAAI,CAAA;;;;;;;mBAOI,UAAU,CAAC,MAAM,CAAC,WAAW,IAAI,EAAE;;;;;;;;;;;;;;;;;mBAiBnC,UAAU,CAAC,MAAM,CAAC,WAAW,IAAI,EAAE;;;;;;;;mBAQnC,UAAU,CAAC,MAAM,CAAC,WAAW,IAAI,EAAE;;;;;;;qBAOjC,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,YAAY;;;;UAI3C,UAAU,CAAC,MAAM,CAAC,YAAY;YAC9B,CAAC,CAAC,IAAI,CAAA;;;;;yBAKS,UAAU,CAAC,MAAM,CAAC,gBAAgB,IAAI,MAAM;;;;;;;yBAO5C,UAAU,CAAC,MAAM,CAAC,eAAe,IAAI,EAAE;;;;;;yBAMvC,UAAU,CAAC,MAAM,CAAC,eAAe,IAAI,QAAQ;;;;;;;;;;;yBAW7C,UAAU,CAAC,MAAM,CAAC,eAAe,IAAI,CAAC;;;;;;;yBAOtC,UAAU,CAAC,MAAM,CAAC,iBAAiB,IAAI,CAAC;;aAEpD;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;;KAEb,CAAA;IACH,CAAC;CACF,CAAA;AA5F6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAwB;AALxC,YAAY;IADxB,aAAa,CAAC,wBAAwB,CAAC;GAC3B,YAAY,CAiGxB","sourcesContent":["import { LitElement, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { Configurer } from '../configurer' // Configurer 경로에 맞게 수정하세요.\n\n@customElement('ox-chart-display-value')\nexport class DisplayValue extends LitElement {\n  createRenderRoot() {\n    return this\n  }\n\n  @property({ type: Object }) configurer!: Configurer\n\n  render() {\n    const configurer = this.configurer\n\n    return html`\n      <div id=\"display-value-container\">\n        <label for=\"value-format\"> <ox-i18n msgid=\"label.value-format\">Value Format</ox-i18n> </label>\n        <input\n          id=\"value-format\"\n          type=\"text\"\n          value-key=\"series.valueFormat\"\n          .value=${configurer.series.valueFormat || ''}\n          list=\"format-list\"\n        />\n        <datalist id=\"format-list\">\n          <option value=\"#,###.\"></option>\n          <option value=\"#,###.#\"></option>\n          <option value=\"#,###.0\"></option>\n          <option value=\"#,##0.#\"></option>\n          <option value=\"#,##0.0\"></option>\n          <option value=\"#,##0.0%\"></option>\n        </datalist>\n\n        <label for=\"value-prefix\"> <ox-i18n msgid=\"label.value-prefix\">Value Prefix</ox-i18n> </label>\n        <input\n          id=\"value-prefix\"\n          type=\"text\"\n          value-key=\"series.valuePrefix\"\n          .value=${configurer.series.valuePrefix || ''}\n        />\n\n        <label for=\"value-suffix\"> <ox-i18n msgid=\"label.value-suffix\">Value Suffix</ox-i18n> </label>\n        <input\n          id=\"value-suffix\"\n          type=\"text\"\n          value-key=\"series.valueSuffix\"\n          .value=${configurer.series.valueSuffix || ''}\n        />\n\n        <input\n          id=\"display-value\"\n          type=\"checkbox\"\n          value-key=\"series.displayValue\"\n          ?checked=${!!configurer.series.displayValue}\n        />\n        <label for=\"display-value\"> <ox-i18n msgid=\"label.value-display\">Value Display</ox-i18n> </label>\n\n        ${configurer.series.displayValue\n          ? html`\n              <label for=\"font-color\"> <ox-i18n msgid=\"label.font-color\">Font Color</ox-i18n> </label>\n              <ox-input-color\n                id=\"font-color\"\n                value-key=\"series.defaultFontColor\"\n                .value=${configurer.series.defaultFontColor || '#000'}\n              ></ox-input-color>\n              <label for=\"font-size\"> <ox-i18n msgid=\"label.font-size\">Font Size</ox-i18n> </label>\n              <input\n                id=\"font-size\"\n                type=\"number\"\n                value-key=\"series.defaultFontSize\"\n                .value=${configurer.series.defaultFontSize || 10}\n              />\n              <label for=\"data-label-anchor\"> <ox-i18n msgid=\"label.data-label-anchor\">Position</ox-i18n> </label>\n              <select\n                id=\"data-label-anchor\"\n                value-key=\"series.dataLabelAnchor\"\n                .value=${configurer.series.dataLabelAnchor || 'center'}\n              >\n                <option value=\"center\">Center</option>\n                <option value=\"start\">Start</option>\n                <option value=\"end\">End</option>\n              </select>\n              <label for=\"data-label-offset\"> <ox-i18n msgid=\"label.data-label-offset\">Offset</ox-i18n> </label>\n              <input\n                id=\"data-label-offset\"\n                type=\"number\"\n                value-key=\"series.dataLabelOffset\"\n                .value=${configurer.series.dataLabelOffset || 0}\n              />\n              <label for=\"data-label-rotation\"> <ox-i18n msgid=\"label.data-label-rotation\">Rotation</ox-i18n> </label>\n              <input\n                id=\"data-label-rotation\"\n                type=\"number\"\n                value-key=\"series.dataLabelRotation\"\n                .value=${configurer.series.dataLabelRotation || 0}\n              />\n            `\n          : html``}\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ox-chart-display-value': DisplayValue\n  }\n}\n"]}

package/dist/src/editors/templates/series.d.ts

@@ -0,0 +1,31 @@
+import '@material/web/icon/icon.js';
+import { LitElement, PropertyValues } from 'lit';
+import { MdIcon } from '@material/web/icon/icon.js';
+import { TinyColor } from '@ctrl/tinycolor';
+import { Configurer } from '../configurer';
+import './display-value';
+export declare class MultipleSeriesTemplate extends LitElement {
+    createRenderRoot(): this;
+    configurer: Configurer;
+    chartType?: 'bar' | 'horizontalBar' | 'line' | 'radar' | 'pie' | 'doughnut' | 'polarArea';
+    seriesTabs: HTMLElement;
+    seriesTabNavLeftButton: MdIcon;
+    seriesTabNavRightButton: MdIcon;
+    protected updated(_changedProperties: PropertyValues): void;
+    render(): import("lit-html/directive").DirectiveResult<typeof import("lit-html/directives/keyed").Keyed>;
+    private _renderTabs;
+    private _renderSeriesForm;
+    _getSeriesModel({ chartType, datasetsLength, lastSeriesColor }: {
+        chartType: string;
+        datasetsLength: number;
+        lastSeriesColor: TinyColor;
+    }): any;
+    private _selectTab;
+    private _removeSeries;
+    private _addSeries;
+    private _onWheelScroll;
+    private _scrollLeft;
+    private _scrollRight;
+    private _scrollTabContainer;
+    private _onTabScroll;
+}