@operato/chart 9.0.0-beta.0 → 9.0.0-beta.10

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

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

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

@@ -1,7 +1,7 @@
 import '@operato/i18n/ox-i18n.js';
-import { InputChartAbstract } from './input-chart-abstract';
-import './templates/annotations';
-import './templates/series';
+import { InputChartAbstract } from './input-chart-abstract.js';
+import './templates/annotations.js';
+import './templates/series.js';
 export declare class OxInputChartTimeseries extends InputChartAbstract {
     static styles: import("lit").CSSResult[];
     annotationExpanded: boolean;

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

@@ -3,15 +3,11 @@ import '@operato/i18n/ox-i18n.js';
 import { html, css } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { InputChartAbstract } from './input-chart-abstract';
-import './templates/annotations';
-import './templates/series';
+import { InputChartAbstract } from './input-chart-abstract.js';
+import './templates/annotations.js';
+import './templates/series.js';
 let OxInputChartTimeseries = class OxInputChartTimeseries extends InputChartAbstract {
-    constructor() {
-        super(...arguments);
-        this.annotationExpanded = false;
-    }
-    static { this.styles = [
+    static styles = [
         ...InputChartAbstract.styles,
         css `
       legend[collapsable] {
@@ -29,7 +25,8 @@ let OxInputChartTimeseries = class OxInputChartTimeseries extends InputChartAbst
         display: none;
       }
     `
-    ]; }
+    ];
+    annotationExpanded = false;
     subTemplate() {
         const configurer = this.configurer;
         return html `

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\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\n        .configurer=${configurer}\n        .chartType=${this.chartType}\n        value-key=\"datasets\"\n        fullwidth\n      ></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        value-key=\"annotations\"\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"]}
+{"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.js'\n\nimport './templates/annotations.js'\nimport './templates/series.js'\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\n        .configurer=${configurer}\n        .chartType=${this.chartType}\n        value-key=\"datasets\"\n        fullwidth\n      ></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        value-key=\"annotations\"\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.d.ts

@@ -1,9 +1,9 @@
 import '@operato/i18n/ox-i18n.js';
-import './ox-input-chart-hbar';
-import './ox-input-chart-mixed';
-import './ox-input-chart-pie';
-import './ox-input-chart-radar';
-import './ox-input-chart-timeseries';
+import './ox-input-chart-hbar.js';
+import './ox-input-chart-mixed.js';
+import './ox-input-chart-pie.js';
+import './ox-input-chart-radar.js';
+import './ox-input-chart-timeseries.js';
 import { OxPropertyEditor, PropertySpec } from '@operato/property-editor';
 export declare class ChartEditor extends OxPropertyEditor {
     static styles: import("lit").CSSResult[];

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

@@ -1,15 +1,15 @@
 import { __decorate } from "tslib";
 import '@operato/i18n/ox-i18n.js';
-import './ox-input-chart-hbar';
-import './ox-input-chart-mixed';
-import './ox-input-chart-pie';
-import './ox-input-chart-radar';
-import './ox-input-chart-timeseries';
+import './ox-input-chart-hbar.js';
+import './ox-input-chart-mixed.js';
+import './ox-input-chart-pie.js';
+import './ox-input-chart-radar.js';
+import './ox-input-chart-timeseries.js';
 import { css, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { OxPropertyEditor } from '@operato/property-editor';
 let ChartEditor = class ChartEditor extends OxPropertyEditor {
-    static { this.styles = [
+    static styles = [
         css `
       :host {
         display: block;
@@ -42,7 +42,7 @@ let ChartEditor = class ChartEditor extends OxPropertyEditor {
         border: 1px solid rgba(0, 0, 0, 0.2);
       }
     `
-    ]; }
+    ];
     editorTemplate(value, spec) {
         switch (value.type) {
             case 'line':

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,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,CAAC,IAAI,qCAAqC,CAAA;YACjH,KAAK,eAAe;gBAClB,OAAO,IAAI,CAAA,gCAAgC,KAAK,eAAe,KAAK,CAAC,IAAI,oCAAoC,CAAA;YAC/G,KAAK,KAAK,CAAC;YACX,KAAK,UAAU,CAAC;YAChB,KAAK,WAAW;gBACd,OAAO,IAAI,CAAA,+BAA+B,KAAK,eAAe,KAAK,CAAC,IAAI,mCAAmC,CAAA;YAC7G,KAAK,OAAO;gBACV,OAAO,IAAI,CAAA,iCAAiC,KAAK,eAAe,KAAK,CAAC,IAAI,qCAAqC,CAAA;YACjH,KAAK,YAAY;gBACf,OAAO,IAAI,CAAA;8CAC2B,KAAK,eAAe,KAAK,CAAC,IAAI;SACnE,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.type} fullwidth></ox-input-chart-mixed> `\n      case 'horizontalBar':\n        return html` <ox-input-chart-hbar .value=${value} chart-type=${value.type} 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.type} fullwidth></ox-input-chart-pie> `\n      case 'radar':\n        return html` <ox-input-chart-radar .value=${value} chart-type=${value.type} fullwidth></ox-input-chart-radar> `\n      case 'timeseries':\n        return html`\n          <ox-input-chart-timeseries .value=${value} chart-type=${value.type} 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,0BAA0B,CAAA;AACjC,OAAO,2BAA2B,CAAA;AAClC,OAAO,yBAAyB,CAAA;AAChC,OAAO,2BAA2B,CAAA;AAClC,OAAO,gCAAgC,CAAA;AAEvC,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;IAC/C,MAAM,CAAC,MAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+BF;KACF,CAAA;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,CAAC,IAAI,qCAAqC,CAAA;YACjH,KAAK,eAAe;gBAClB,OAAO,IAAI,CAAA,gCAAgC,KAAK,eAAe,KAAK,CAAC,IAAI,oCAAoC,CAAA;YAC/G,KAAK,KAAK,CAAC;YACX,KAAK,UAAU,CAAC;YAChB,KAAK,WAAW;gBACd,OAAO,IAAI,CAAA,+BAA+B,KAAK,eAAe,KAAK,CAAC,IAAI,mCAAmC,CAAA;YAC7G,KAAK,OAAO;gBACV,OAAO,IAAI,CAAA,iCAAiC,KAAK,eAAe,KAAK,CAAC,IAAI,qCAAqC,CAAA;YACjH,KAAK,YAAY;gBACf,OAAO,IAAI,CAAA;8CAC2B,KAAK,eAAe,KAAK,CAAC,IAAI;SACnE,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.js'\nimport './ox-input-chart-mixed.js'\nimport './ox-input-chart-pie.js'\nimport './ox-input-chart-radar.js'\nimport './ox-input-chart-timeseries.js'\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.type} fullwidth></ox-input-chart-mixed> `\n      case 'horizontalBar':\n        return html` <ox-input-chart-hbar .value=${value} chart-type=${value.type} 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.type} fullwidth></ox-input-chart-pie> `\n      case 'radar':\n        return html` <ox-input-chart-radar .value=${value} chart-type=${value.type} fullwidth></ox-input-chart-radar> `\n      case 'timeseries':\n        return html`\n          <ox-input-chart-timeseries .value=${value} chart-type=${value.type} fullwidth></ox-input-chart-timeseries>\n        `\n    }\n\n    return html``\n  }\n}\n"]}

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

@@ -1,7 +1,7 @@
 import '@material/web/icon/icon.js';
 import { LitElement, PropertyValues } from 'lit';
 import { MdIcon } from '@material/web/icon/icon.js';
-import { Configurer } from '../configurer';
+import { Configurer } from '../configurer.js';
 export declare class AnnotationsTemplate extends LitElement {
     createRenderRoot(): this;
     configurer: Configurer;
@@ -10,7 +10,7 @@ export declare class AnnotationsTemplate extends LitElement {
     annotationsTabNavRightButton: MdIcon;
     protected updated(_changedProperties: PropertyValues): void;
     get value(): OperatoChart.Annotation[];
-    render(): import("lit-html/directive").DirectiveResult<typeof import("lit-html/directives/keyed").Keyed>;
+    render(): import("lit-html/directive.js").DirectiveResult<typeof import("lit-html/directives/keyed.js").Keyed>;
     private _renderTabs;
     private _renderAnnotationForm;
     private _selectTab;

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

@@ -7,6 +7,10 @@ let AnnotationsTemplate = class AnnotationsTemplate extends LitElement {
     createRenderRoot() {
         return this;
     }
+    configurer;
+    annotationsTabs;
+    annotationsTabNavLeftButton;
+    annotationsTabNavRightButton;
     updated(_changedProperties) {
         if (_changedProperties.has('configurer')) {
             this.requestUpdate();

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

@@ -1 +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  get value() {\n    return this.configurer.annotations\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.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n\n    this.requestUpdate()\n  }\n\n  private _addAnnotation() {\n    this.configurer.addAnnotation()\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n\n    this.requestUpdate()\n  }\n\n  private _onWheelScroll(event: WheelEvent) {\n    const tabContainer = this.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"]}
+{"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.js'\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  get value() {\n    return this.configurer.annotations\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.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n\n    this.requestUpdate()\n  }\n\n  private _addAnnotation() {\n    this.configurer.addAnnotation()\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n\n    this.requestUpdate()\n  }\n\n  private _onWheelScroll(event: WheelEvent) {\n    const tabContainer = this.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

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-import { Configurer } from '../configurer';
+import { Configurer } from '../configurer.js';
 export declare class DisplayValue extends LitElement {
     createRenderRoot(): this;
     configurer: Configurer;

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

@@ -5,6 +5,7 @@ let DisplayValue = class DisplayValue extends LitElement {
     createRenderRoot() {
         return this;
     }
+    configurer;
     render() {
         const configurer = this.configurer;
         const displayValue = configurer.series.displayValue;

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

@@ -1 +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;QAClC,MAAM,YAAY,GAAG,UAAU,CAAC,MAAM,CAAC,YAAY,CAAA;QACnD,UAAU,CAAC,MAAM,CAAC,YAAY,GAAG,YAAY,KAAK,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,YAAY,KAAK,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,YAAY,CAAA;QAE1G,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;;;;4EAIsB,UAAU,CAAC,MAAM,CAAC,YAAY,IAAI,GAAG;;;;;;UAMvG,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;AA7F6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAwB;AALxC,YAAY;IADxB,aAAa,CAAC,wBAAwB,CAAC;GAC3B,YAAY,CAkGxB","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    const displayValue = configurer.series.displayValue\n    configurer.series.displayValue = displayValue === true ? 'T' : displayValue === false ? 'F' : displayValue\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        <label for=\"display-value\"> <ox-i18n msgid=\"label.value-display\">Value Display</ox-i18n> </label>\n        <select id=\"display-value\" value-key=\"series.displayValue\" .value=${configurer.series.displayValue || 'F'}>\n          <option value=\"T\">Show</option>\n          <option value=\"F\">Hide</option>\n          <option value=\"auto\">Hide to Overlap</option>\n        </select>\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"]}
+{"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;IAE2B,UAAU,CAAa;IAEnD,MAAM;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAA;QAClC,MAAM,YAAY,GAAG,UAAU,CAAC,MAAM,CAAC,YAAY,CAAA;QACnD,UAAU,CAAC,MAAM,CAAC,YAAY,GAAG,YAAY,KAAK,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,YAAY,KAAK,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,YAAY,CAAA;QAE1G,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;;;;4EAIsB,UAAU,CAAC,MAAM,CAAC,YAAY,IAAI,GAAG;;;;;;UAMvG,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;AA7F6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAwB;AALxC,YAAY;IADxB,aAAa,CAAC,wBAAwB,CAAC;GAC3B,YAAY,CAkGxB","sourcesContent":["import { LitElement, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { Configurer } from '../configurer.js' // 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    const displayValue = configurer.series.displayValue\n    configurer.series.displayValue = displayValue === true ? 'T' : displayValue === false ? 'F' : displayValue\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        <label for=\"display-value\"> <ox-i18n msgid=\"label.value-display\">Value Display</ox-i18n> </label>\n        <select id=\"display-value\" value-key=\"series.displayValue\" .value=${configurer.series.displayValue || 'F'}>\n          <option value=\"T\">Show</option>\n          <option value=\"F\">Hide</option>\n          <option value=\"auto\">Hide to Overlap</option>\n        </select>\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

@@ -2,8 +2,8 @@ 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';
+import { Configurer } from '../configurer.js';
+import './display-value.js';
 export declare class MultipleSeriesTemplate extends LitElement {
     createRenderRoot(): this;
     configurer: Configurer;
@@ -13,7 +13,7 @@ export declare class MultipleSeriesTemplate extends LitElement {
     seriesTabNavRightButton: MdIcon;
     protected updated(_changedProperties: PropertyValues): void;
     get value(): OperatoChart.Dataset[];
-    render(): import("lit-html/directive").DirectiveResult<typeof import("lit-html/directives/keyed").Keyed>;
+    render(): import("lit-html/directive.js").DirectiveResult<typeof import("lit-html/directives/keyed.js").Keyed>;
     private _renderTabs;
     private _renderSeriesForm;
     _getSeriesModel({ chartType, datasetsLength, lastSeriesColor }: {

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

@@ -4,11 +4,16 @@ import { LitElement, html, nothing } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { keyed } from 'lit/directives/keyed.js';
 import { random as randomColor, TinyColor } from '@ctrl/tinycolor';
-import './display-value';
+import './display-value.js';
 let MultipleSeriesTemplate = class MultipleSeriesTemplate extends LitElement {
     createRenderRoot() {
         return this;
     }
+    configurer;
+    chartType;
+    seriesTabs;
+    seriesTabNavLeftButton;
+    seriesTabNavRightButton;
     updated(_changedProperties) {
         if (_changedProperties.has('configurer') || _changedProperties.has('chartType')) {
             this.requestUpdate();

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

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

package/dist/src/progress/ox-progress-circle.js

@@ -23,20 +23,7 @@ Example:
   ></ox-progress-circle>
 */
 let OxProgressCircle = class OxProgressCircle extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.value = 0;
-        this.suffix = '';
-        this.titleText = '';
-        this.fontSize = '10px';
-        this.fontColor = '';
-        this.borderStyle = '';
-        this.innerCircleSize = '10%';
-        this.shadow = '';
-        this.circleColor = 'yellowgreen';
-        this.background = '';
-    }
-    static { this.styles = [
+    static styles = [
         ScrollbarStyles,
         css `
       :host {
@@ -79,7 +66,20 @@ let OxProgressCircle = class OxProgressCircle extends LitElement {
         margin-bottom: -5%;
       }
     `
-    ]; }
+    ];
+    value = 0;
+    suffix = '';
+    titleText = '';
+    fontSize = '10px';
+    fontColor = '';
+    borderStyle = '';
+    innerCircleSize = '10%';
+    shadow = '';
+    circleColor = 'yellowgreen';
+    background = '';
+    circle;
+    innerCircle;
+    progressTitle;
     firstUpdated() {
         if (this.fontSize) {
             this.circle.style.fontSize = this.fontSize;

package/dist/src/progress/ox-progress-circle.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-progress-circle.js","sourceRoot":"","sources":["../../../src/progress/ox-progress-circle.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { PropertyValues, LitElement, css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { ScrollbarStyles } from '@operato/styles'\n\n/**\nA lightweight progress-circle WebComponent\n\nExample:\n  <ox-progress-circle\n    .value=${70}\n    titleText=\"전체\"\n    suffix=\"%\"\n    fontSize=\"29px\"\n    fontColor=\"#4E5055\"\n    borderStyle=\"none\"\n    innerCircleSize=\"28%\"\n    circleColor=\"#0595E5\"\n    shadow=\"#00000026 4px 4px 4px\"\n    background=\"#eaf5fd\"\n  ></ox-progress-circle>\n*/\n@customElement('ox-progress-circle')\nexport class OxProgressCircle extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n      }\n\n      div[circle] {\n        font-size: 29px;\n        font-weight: bold;\n        width: 100%;\n        aspect-ratio: 1;\n        display: flex;\n        border-radius: 50%;\n        border: 1px solid #353b48;\n        position: relative;\n        background: conic-gradient(yellowgreen 0deg, white 0deg);\n        box-shadow: #00000026 5px 5px 5px;\n      }\n      div[inner-circle] {\n        width: 90%;\n        aspect-ratio: 1;\n        border-radius: inherit;\n        background-color: #353b48;\n        margin: auto;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        color: white;\n        justify-content: center;\n        box-shadow: inset #00000026 -2px 2px 8px;\n      }\n\n      div[inner-circle] span {\n        display: flex;\n        align-items: center;\n      }\n\n      span[progress-title] {\n        font-size: 0.65em;\n        margin-bottom: -5%;\n      }\n    `\n  ]\n\n  @property({ type: Number }) value: number = 0\n  @property({ type: String }) suffix: string = ''\n  @property({ type: String }) titleText: string = ''\n  @property({ type: String }) fontSize: string = '10px'\n  @property({ type: String }) fontColor: string = ''\n  @property({ type: String }) borderStyle: string = ''\n  @property({ type: String }) innerCircleSize: string = '10%'\n  @property({ type: String }) shadow: string = ''\n  @property({ type: String }) circleColor: string = 'yellowgreen'\n  @property({ type: String }) background: string = ''\n\n  @query('div[circle]') circle!: HTMLDivElement\n  @query('div[inner-circle]') innerCircle!: HTMLDivElement\n  @query('span[progress-title]') progressTitle?: HTMLSpanElement\n\n  firstUpdated() {\n    if (this.fontSize) {\n      this.circle.style.fontSize = this.fontSize\n    }\n    if (this.fontColor) {\n      this.innerCircle.style.color = this.fontColor\n    }\n    if (this.borderStyle) {\n      this.circle.style.border = this.borderStyle\n    }\n    if (this.innerCircleSize) {\n      this.innerCircle.style.width = `calc(100% - ${this.innerCircleSize})`\n    }\n    if (this.shadow) {\n      this.circle.style.boxShadow = this.shadow\n    }\n    if (this.background) {\n      this.innerCircle.style.background = this.background\n    }\n    if (this.progressTitle && this.circleColor) {\n      this.progressTitle.style.color = this.circleColor\n    }\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('value')) {\n      this.updateCircleBackground()\n    }\n  }\n\n  updateCircleBackground() {\n    const position = this.value * 3.6 // 360 = 100%\n    this.circle.style.background = `conic-gradient(${this.circleColor} ${position}deg, ${this.background} 0deg)`\n  }\n\n  render() {\n    return html`\n      <div circle>\n        <div inner-circle>\n          ${this.titleText ? html`<span progress-title>${this.titleText}</span>` : ''}\n          <span>${this.value}${this.suffix}</span>\n        </div>\n      </div>\n    `\n  }\n}\n"]}
+{"version":3,"file":"ox-progress-circle.js","sourceRoot":"","sources":["../../../src/progress/ox-progress-circle.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { PropertyValues, LitElement, css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { ScrollbarStyles } from '@operato/styles'\n\n/**\nA lightweight progress-circle WebComponent\n\nExample:\n  <ox-progress-circle\n    .value=${70}\n    titleText=\"전체\"\n    suffix=\"%\"\n    fontSize=\"29px\"\n    fontColor=\"#4E5055\"\n    borderStyle=\"none\"\n    innerCircleSize=\"28%\"\n    circleColor=\"#0595E5\"\n    shadow=\"#00000026 4px 4px 4px\"\n    background=\"#eaf5fd\"\n  ></ox-progress-circle>\n*/\n@customElement('ox-progress-circle')\nexport class OxProgressCircle extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n      }\n\n      div[circle] {\n        font-size: 29px;\n        font-weight: bold;\n        width: 100%;\n        aspect-ratio: 1;\n        display: flex;\n        border-radius: 50%;\n        border: 1px solid #353b48;\n        position: relative;\n        background: conic-gradient(yellowgreen 0deg, white 0deg);\n        box-shadow: #00000026 5px 5px 5px;\n      }\n      div[inner-circle] {\n        width: 90%;\n        aspect-ratio: 1;\n        border-radius: inherit;\n        background-color: #353b48;\n        margin: auto;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        color: white;\n        justify-content: center;\n        box-shadow: inset #00000026 -2px 2px 8px;\n      }\n\n      div[inner-circle] span {\n        display: flex;\n        align-items: center;\n      }\n\n      span[progress-title] {\n        font-size: 0.65em;\n        margin-bottom: -5%;\n      }\n    `\n  ]\n\n  @property({ type: Number }) value: number = 0\n  @property({ type: String }) suffix: string = ''\n  @property({ type: String }) titleText: string = ''\n  @property({ type: String }) fontSize: string = '10px'\n  @property({ type: String }) fontColor: string = ''\n  @property({ type: String }) borderStyle: string = ''\n  @property({ type: String }) innerCircleSize: string = '10%'\n  @property({ type: String }) shadow: string = ''\n  @property({ type: String }) circleColor: string = 'yellowgreen'\n  @property({ type: String }) background: string = ''\n\n  @query('div[circle]') circle!: HTMLDivElement\n  @query('div[inner-circle]') innerCircle!: HTMLDivElement\n  @query('span[progress-title]') progressTitle?: HTMLSpanElement\n\n  firstUpdated() {\n    if (this.fontSize) {\n      this.circle.style.fontSize = this.fontSize\n    }\n    if (this.fontColor) {\n      this.innerCircle.style.color = this.fontColor\n    }\n    if (this.borderStyle) {\n      this.circle.style.border = this.borderStyle\n    }\n    if (this.innerCircleSize) {\n      this.innerCircle.style.width = `calc(100% - ${this.innerCircleSize})`\n    }\n    if (this.shadow) {\n      this.circle.style.boxShadow = this.shadow\n    }\n    if (this.background) {\n      this.innerCircle.style.background = this.background\n    }\n    if (this.progressTitle && this.circleColor) {\n      this.progressTitle.style.color = this.circleColor\n    }\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('value')) {\n      this.updateCircleBackground()\n    }\n  }\n\n  updateCircleBackground() {\n    const position = this.value * 3.6 // 360 = 100%\n    this.circle.style.background = `conic-gradient(${this.circleColor} ${position}deg, ${this.background} 0deg)`\n  }\n\n  render() {\n    return html`\n      <div circle>\n        <div inner-circle>\n          ${this.titleText ? html`<span progress-title>${this.titleText}</span>` : ''}\n          <span>${this.value}${this.suffix}</span>\n        </div>\n      </div>\n    `\n  }\n}\n"]}