@operato/chart 8.0.0-alpha.9 → 8.0.0-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +188 -0
- package/dist/src/editors/configurer.d.ts +2 -2
- package/dist/src/editors/ox-input-chart-hbar.js +6 -1
- package/dist/src/editors/ox-input-chart-hbar.js.map +1 -1
- package/dist/src/editors/ox-input-chart-mixed.js +6 -1
- package/dist/src/editors/ox-input-chart-mixed.js.map +1 -1
- package/dist/src/editors/ox-input-chart-radar.js +6 -1
- package/dist/src/editors/ox-input-chart-radar.js.map +1 -1
- package/dist/src/editors/ox-input-chart-timeseries.js +7 -1
- package/dist/src/editors/ox-input-chart-timeseries.js.map +1 -1
- package/dist/src/editors/templates/annotations.d.ts +1 -0
- package/dist/src/editors/templates/annotations.js +5 -0
- package/dist/src/editors/templates/annotations.js.map +1 -1
- package/dist/src/editors/templates/display-value.js +7 -6
- package/dist/src/editors/templates/display-value.js.map +1 -1
- package/dist/src/editors/templates/series.d.ts +1 -0
- package/dist/src/editors/templates/series.js +5 -0
- package/dist/src/editors/templates/series.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +14 -14
- package/src/editors/ox-input-chart-hbar.ts +6 -1
- package/src/editors/ox-input-chart-mixed.ts +6 -1
- package/src/editors/ox-input-chart-radar.ts +6 -1
- package/src/editors/ox-input-chart-timeseries.ts +7 -1
- package/src/editors/templates/annotations.ts +8 -0
- package/src/editors/templates/display-value.ts +7 -6
- package/src/editors/templates/series.ts +8 -0
- package/src/types.d.ts +1 -1
- package/assets/images/icon-editor-gradient-direction.png +0 -0
- package/assets/images/icon-properties-label.png +0 -0
- package/assets/images/icon-properties-line-type.png +0 -0
- package/assets/images/icon-properties-table.png +0 -0
|
@@ -1 +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;
|
|
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"]}
|
|
@@ -12,6 +12,7 @@ export declare class MultipleSeriesTemplate extends LitElement {
|
|
|
12
12
|
seriesTabNavLeftButton: MdIcon;
|
|
13
13
|
seriesTabNavRightButton: MdIcon;
|
|
14
14
|
protected updated(_changedProperties: PropertyValues): void;
|
|
15
|
+
get value(): OperatoChart.Dataset[];
|
|
15
16
|
render(): import("lit-html/directive").DirectiveResult<typeof import("lit-html/directives/keyed").Keyed>;
|
|
16
17
|
private _renderTabs;
|
|
17
18
|
private _renderSeriesForm;
|
|
@@ -14,6 +14,9 @@ let MultipleSeriesTemplate = class MultipleSeriesTemplate extends LitElement {
|
|
|
14
14
|
this.requestUpdate();
|
|
15
15
|
}
|
|
16
16
|
}
|
|
17
|
+
get value() {
|
|
18
|
+
return this.configurer.datasets;
|
|
19
|
+
}
|
|
17
20
|
render() {
|
|
18
21
|
return keyed(this.configurer.currentSeriesIndex, html `
|
|
19
22
|
<div id="series-properties-container" fullwidth>
|
|
@@ -187,6 +190,7 @@ let MultipleSeriesTemplate = class MultipleSeriesTemplate extends LitElement {
|
|
|
187
190
|
}
|
|
188
191
|
_removeSeries(index) {
|
|
189
192
|
this.configurer.removeSeries(index);
|
|
193
|
+
this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
|
|
190
194
|
this.requestUpdate();
|
|
191
195
|
}
|
|
192
196
|
_addSeries() {
|
|
@@ -204,6 +208,7 @@ let MultipleSeriesTemplate = class MultipleSeriesTemplate extends LitElement {
|
|
|
204
208
|
lastSeriesColor
|
|
205
209
|
});
|
|
206
210
|
this.configurer.addSeries(seriesModel);
|
|
211
|
+
this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
|
|
207
212
|
this.requestUpdate();
|
|
208
213
|
}
|
|
209
214
|
_onWheelScroll(event) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"series.js","sourceRoot":"","sources":["../../../../src/editors/templates/series.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,UAAU,EAAE,IAAI,EAAkB,OAAO,EAAE,MAAM,KAAK,CAAA;AAC/D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAClE,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAA;AAE/C,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAGlE,OAAO,iBAAiB,CAAA;AAGjB,IAAM,sBAAsB,GAA5B,MAAM,sBAAuB,SAAQ,UAAU;IACpD,gBAAgB;QACd,OAAO,IAAI,CAAA;IACb,CAAC;IASS,OAAO,CAAC,kBAAkC;QAClD,IAAI,kBAAkB,CAAC,GAAG,CAAC,YAAY,CAAC,IAAI,kBAAkB,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC;YAChF,IAAI,CAAC,aAAa,EAAE,CAAA;QACtB,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,KAAK,CACV,IAAI,CAAC,UAAU,CAAC,kBAAkB,EAClC,IAAI,CAAA;;+CAEqC,IAAI,CAAC,cAAc;8DACJ,IAAI,CAAC,WAAW;qDACzB,IAAI,CAAC,UAAU,CAAC,kBAAkB;gBACvE,IAAI,CAAC,WAAW,EAAE;;+DAE6B,IAAI,CAAC,YAAY;;;qDAG3B,IAAI,CAAC,UAAU;;YAExD,IAAI,CAAC,iBAAiB,EAAE;;OAE7B,CACF,CAAA;IACH,CAAC;IAEO,WAAW;QACjB,OAAO,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,GAAG,CACjC,CAAC,OAA6B,EAAE,KAAa,EAAE,EAAE,CAAC,IAAI,CAAA;;wBAEpC,KAAK,GAAG,CAAC;2BACN,KAAK;;sBAEV,KAAK,KAAK,IAAI,CAAC,UAAU,CAAC,kBAAkB;mBAC/C,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;;YAEnC,KAAK,GAAG,CAAC;YACT,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,kBAAkB,KAAK,KAAK;YACnF,CAAC,CAAC,IAAI,CAAA,mBAAmB,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,kBAAkB;YAC1E,CAAC,CAAC,IAAI,CAAA,EAAE;;OAEb,CACF,CAAA;IACH,CAAC;IAEO,iBAAiB;QACvB,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAA;QAClC,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAA;QAEhC,OAAO,IAAI,CAAA;;;sEAGuD,UAAU,CAAC,OAAO,IAAI,EAAE;;UAEpF,SAAS,IAAI,eAAe;YAC9B,SAAS,KAAK,UAAU;YACxB,SAAS,KAAK,KAAK;YACnB,SAAS,IAAI,OAAO;YACpB,SAAS,IAAI,WAAW;YACtB,CAAC,CAAC,OAAO;YACT,CAAC,CAAC,IAAI,CAAA;;;;;;yBAMS,UAAU,CAAC,MAAM,CAAC,IAAI,IAAI,EAAE;;;;;aAKxC;;;+EAGkE,UAAU,CAAC,MAAM,CAAC,KAAK,IAAI,EAAE;;UAElG,UAAU,CAAC,MAAM,CAAC,IAAI,KAAK,MAAM;YACjC,CAAC,CAAC,IAAI,CAAA;;;;;;yBAMS,MAAM,CAAC,UAAU,CAAC,MAAM,CAAC,WAAW,IAAI,CAAC,CAAC;;;;;aAKtD;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;UACR,UAAU,CAAC,MAAM,CAAC,IAAI,KAAK,MAAM;YACjC,CAAC,CAAC,IAAI,CAAA;;;;;;yBAMS,MAAM,CAAC,UAAU,CAAC,MAAM,CAAC,WAAW,IAAI,CAAC,CAAC;;aAEtD;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;;;qEAGmD,UAAU,CAAC,KAAK;;UAE3E,UAAU,CAAC,MAAM,CAAC,IAAI,KAAK,MAAM;YACjC,CAAC,CAAC,IAAI,CAAA;;;;;;yBAMS,UAAU,CAAC,MAAM,CAAC,UAAU,IAAI,EAAE;;;;;;;;;;;;;;;;;;;yBAmBlC,MAAM,CAAC,UAAU,CAAC,MAAM,CAAC,WAAW,IAAI,CAAC,CAAC;;aAEtD;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;;;+EAG6D,UAAU,CAAC,MAAM,CAAC,KAAK,IAAI,EAAE;;UAElG,UAAU,CAAC,MAAM,CAAC,IAAI,KAAK,MAAM;YACjC,CAAC,CAAC,IAAI,CAAA;yFACyE,UAAU,CAAC,MAAM,CAAC,IAAI;;aAElG;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;UACR,UAAU,CAAC,SAAS,IAAI,UAAU,CAAC,MAAM,CAAC,IAAI,KAAK,eAAe;YAClE,CAAC,CAAC,IAAI,CAAA;;;;;;yBAMS,UAAU,CAAC,MAAM,CAAC,OAAO,IAAI,EAAE;;;;;aAK3C;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;;;8CAG4B,UAAU;;KAEnD,CAAA;IACH,CAAC;IAED,eAAe,CAAC,EACd,SAAS,EACT,cAAc,EACd,eAAe,EAKhB;QACC,MAAM,eAAe,GAAQ;YAC3B,KAAK,EAAE,UAAU,cAAc,GAAG,CAAC,EAAE;YACrC,IAAI,EAAE,EAAE;YACR,WAAW,EAAE,CAAC;YACd,OAAO,EAAE,EAAE;YACX,OAAO,EAAE,MAAM;YACf,KAAK,EAAE,WAAW,CAAC;gBACjB,GAAG,EAAE,eAAe,CAAC,KAAK,EAAE,CAAC,CAAC;aAC/B,CAAC,CAAC,WAAW,EAAE;YAChB,KAAK,EAAE,EAAE;SACV,CAAA;QAED,eAAe,CAAC,IAAI,GAAG,eAAe,CAAC,SAAS,GAAG,SAAS,CAAA;QAC5D,OAAO,eAAe,CAAA;IACxB,CAAC;IAEO,UAAU,CAAC,KAAa;QAC9B,IAAI,CAAC,UAAU,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAA;QAC5C,IAAI,CAAC,aAAa,EAAE,CAAA;IACtB,CAAC;IAEO,aAAa,CAAC,KAAa;QACjC,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,KAAK,CAAC,CAAA;QACnC,IAAI,CAAC,aAAa,EAAE,CAAA;IACtB,CAAC;IAEO,UAAU;QAChB,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAA;QAElC,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACrC,OAAM;QACR,CAAC;QAED,MAAM,eAAe,GAAG,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAA;QAC9D,MAAM,SAAS,GAAG,UAAU,CAAC,MAAM,CAAC,IAAI,IAAI,UAAU,CAAC,MAAM,CAAC,IAAI,CAAA;QAClE,MAAM,KAAK,GAAG,UAAU,CAAC,QAAQ,CAAC,eAAe,GAAG,CAAC,CAAC,EAAE,eAAe,CAAA;QACvE,MAAM,eAAe,GAAG,IAAI,SAAS,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAA;QAE9E,MAAM,WAAW,GAAG,IAAI,CAAC,eAAe,CAAC;YACvC,SAAS,EAAE,SAAU;YACrB,cAAc,EAAE,eAAe;YAC/B,eAAe;SAChB,CAAC,CAAA;QAEF,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;QACtC,IAAI,CAAC,aAAa,EAAE,CAAA;IACtB,CAAC;IAEO,cAAc,CAAC,KAAiB;QACtC,MAAM,YAAY,GAAG,IAAI,CAAC,UAAU,CAAA;QACpC,IAAI,YAAY,EAAE,CAAC;YACjB,KAAK,CAAC,cAAc,EAAE,CAAA;YAEtB,YAAY,CAAC,UAAU,IAAI,KAAK,CAAC,MAAM,CAAA;YAEvC,IAAI,CAAC,YAAY,EAAE,CAAA;QACrB,CAAC;IACH,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAA;IAC9B,CAAC;IAEO,YAAY;QAClB,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAA;IAC7B,CAAC;IAEO,mBAAmB,CAAC,SAAiB;QAC3C,MAAM,YAAY,GAAG,IAAI,CAAC,UAAW,CAAC,aAAa,CAAc,cAAc,CAAC,CAAA;QAChF,IAAI,YAAY,EAAE,CAAC;YACjB,YAAY,CAAC,KAAK,CAAC,cAAc,GAAG,QAAQ,CAAA;YAC5C,YAAY,CAAC,UAAU,IAAI,SAAS,GAAG,YAAY,CAAC,WAAW,CAAA;QACjE,CAAC;QAED,UAAU,CAAC,GAAG,EAAE;YACd,YAAa,CAAC,KAAK,CAAC,cAAc,GAAG,MAAM,CAAA;YAC3C,IAAI,CAAC,YAAY,EAAE,CAAA;QACrB,CAAC,EAAE,GAAG,CAAC,CAAA;IACT,CAAC;IAEO,YAAY;QAClB,IAAI,YAA4C,CAAA;QAChD,IAAI,gBAAwB,CAAA;QAC5B,IAAI,iBAAyB,CAAA;QAE7B,YAAY,GAAG,IAAI,CAAC,UAAU,CAAA;QAC9B,gBAAgB,GAAG,IAAI,CAAC,sBAAsB,CAAA;QAC9C,iBAAiB,GAAG,IAAI,CAAC,uBAAuB,CAAA;QAEhD,IAAI,CAAC,YAAY,EAAE,CAAC;YAClB,OAAM;QACR,CAAC;QAED,IAAI,YAAY,CAAC,WAAW,IAAI,YAAY,CAAC,WAAW,EAAE,CAAC;YACzD,gBAAgB,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,CAAA;YAC7C,iBAAiB,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,CAAA;QAChD,CAAC;aAAM,IAAI,YAAY,CAAC,UAAU,IAAI,CAAC,EAAE,CAAC;YACxC,gBAAgB,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,CAAA;YAC7C,iBAAiB,CAAC,eAAe,CAAC,UAAU,CAAC,CAAA;QAC/C,CAAC;aAAM,IAAI,YAAY,CAAC,UAAU,GAAG,YAAY,CAAC,WAAW,IAAI,YAAY,CAAC,WAAW,EAAE,CAAC;YAC1F,gBAAgB,CAAC,eAAe,CAAC,UAAU,CAAC,CAAA;YAC5C,iBAAiB,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,CAAA;QAChD,CAAC;aAAM,CAAC;YACN,gBAAgB,CAAC,eAAe,CAAC,UAAU,CAAC,CAAA;YAC5C,iBAAiB,CAAC,eAAe,CAAC,UAAU,CAAC,CAAA;QAC/C,CAAC;IACH,CAAC;CACF,CAAA;AAlS6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0DAAwB;AACvB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yDAAmC;AAEvC;IAAtB,KAAK,CAAC,cAAc,CAAC;0DAAyB;AACT;IAArC,KAAK,CAAC,6BAA6B,CAAC;sEAAgC;AAC9B;IAAtC,KAAK,CAAC,8BAA8B,CAAC;uEAAiC;AAV5D,sBAAsB;IADlC,aAAa,CAAC,iBAAiB,CAAC;GACpB,sBAAsB,CAuSlC","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 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=\"\"> </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.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.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"]}
|
|
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=\"\"> </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"]}
|