npm - @operato/chart - Versions diffs - 9.0.0-beta.4 → 9.0.0-beta.5 - Mend

@operato/chart 9.0.0-beta.4 → 9.0.0-beta.5

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.

Files changed (38) hide show

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

@@ -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.map CHANGED Viewed

	@@ -1 +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=\"\"> </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=\"\"> </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=\"\"> </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=\"\"> </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=\"\"> </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"]}
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.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=\"\"> </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=\"\"> </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=\"\"> </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=\"\"> </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=\"\"> </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 CHANGED Viewed

@@ -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.map CHANGED Viewed

	@@ -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;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"]}
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.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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -4,7 +4,7 @@ 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;

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

	@@ -1 +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=\"\"> </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"]}
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.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=\"\"> </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/scichart/ox-scichart.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { __decorate } from "tslib";
 import { LitElement, html, css } from 'lit';
 import { property, query, customElement } from 'lit/decorators.js';
-import { buildSciChart } from './scichart-builder';
+import { buildSciChart } from './scichart-builder.js';
 let OxSciChart = class OxSciChart extends LitElement {
     constructor() {
         super(...arguments);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ox-scichart.js","sourceRoot":"","sources":["../../../src/scichart/ox-scichart.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAClE,OAAO,EAAE,aAAa,EAAE,MAAM,~~oBAAoB~~,CAAA;~~AAUlD~~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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { property, query, customElement } from 'lit/decorators.js'\nimport { buildSciChart } from './scichart-builder'\n\ndeclare global {\n interface Window {\n sciChartLoaded: boolean\n sciChartLoadingPromise: Promise<void>\n }\n}\n\n@customElement('ox-scichart')\nclass OxSciChart extends LitElement {\n @property({ type: Object }) config: OperatoChart.ChartConfig \| null = null\n @property({ type: Array }) data: { [attr: string]: any }[] = []\n\n private chart: any = null\n private dataSeries: any[] = []\n\n @query('div#container') container!: HTMLDivElement\n\n static styles = css`\n :host {\n display: block;\n width: 100%;\n height: 100%;\n }\n\n .chart-container {\n display: flex;\n width: 100%;\n height: 100%;\n }\n\n .chart-content {\n flex: 1;\n position: relative;\n }\n `\n\n firstUpdated() {\n this.loadSciChart()\n }\n\n async loadSciChart() {\n if (!window.sciChartLoaded) {\n if (!window.sciChartLoadingPromise) {\n window.sciChartLoadingPromise = new Promise<void>(resolve => {\n const script = document.createElement('script')\n script.src = 'https://cdn.jsdelivr.net/npm/scichart/index.min.js'\n script.crossOrigin = 'anonymous'\n script.onload = () => {\n window.sciChartLoaded = true\n\n SciChart.SciChartSurface.UseCommunityLicense()\n\n resolve()\n }\n document.head.appendChild(script)\n })\n }\n\n await window.sciChartLoadingPromise\n }\n\n this.initializeSciChart()\n }\n\n async initializeSciChart() {\n const { chart, dataSeries } = (await buildSciChart(this.config, this.container, {})) \|\| {}\n\n this.chart = chart\n this.dataSeries = dataSeries!\n\n this.updateDataSeries()\n }\n\n async updated(changedProperties: Map<string \| number \| symbol, unknown>) {\n if (changedProperties.has('config') && this.config) {\n await this.initializeSciChart()\n }\n\n if (changedProperties.has('data')) {\n this.updateDataSeries()\n this.chart?.sciChartSurface.zoomExtents()\n }\n }\n\n async appendData(appendum: { [attr: string]: any }[]) {}\n\n updateDataSeries() {\n if (!this.dataSeries?.length) return\n\n this.dataSeries.forEach(ds => ds.clear())\n const newData = this.dataSet\n\n newData.forEach((data, index) => {\n const filteredData = data.filter(d => typeof d.yValue === 'number')\n\n if (filteredData.length > 0) {\n this.dataSeries[index].appendRange(\n filteredData.map(d => d.xValue),\n filteredData.map(d => d.yValue)\n )\n }\n })\n\n this.chart?.sciChartSurface.zoomExtents()\n this.chart?.sciChartSurface.invalidateElement()\n }\n\n get dataSet(): { xValue: number; yValue: number }[][] {\n const { config, data } = this\n const { datasets = [], labelDataKey: attrX } = config?.data \|\| {}\n\n if (!(data instanceof Array) \|\| !attrX) {\n return []\n }\n\n return datasets.map(dataset => {\n return data\n .map(item => {\n if (!item \|\| typeof item !== 'object') {\n return\n }\n\n const xValue = new Date(item[attrX])\n if (isNaN(xValue.getTime())) {\n console.error('Invalid date:', item[attrX])\n return\n }\n\n return {\n xValue: xValue.getTime() / 1000,\n yValue: item[dataset.dataKey!]\n }\n })\n .filter(Boolean) as { xValue: number; yValue: number }[]\n })\n }\n\n render() {\n return html` <div id=\"container\" class=\"chart-container\"></div> `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ox-scichart': OxSciChart\n }\n}\n"]}
1	+ {"version":3,"file":"ox-scichart.js","sourceRoot":"","sources":["../../../src/scichart/ox-scichart.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { property, query, customElement } from 'lit/decorators.js'\nimport { buildSciChart } from './scichart-builder.js'\n\ndeclare global {\n interface Window {\n sciChartLoaded: boolean\n sciChartLoadingPromise: Promise<void>\n }\n}\n\n@customElement('ox-scichart')\nclass OxSciChart extends LitElement {\n @property({ type: Object }) config: OperatoChart.ChartConfig \| null = null\n @property({ type: Array }) data: { [attr: string]: any }[] = []\n\n private chart: any = null\n private dataSeries: any[] = []\n\n @query('div#container') container!: HTMLDivElement\n\n static styles = css`\n :host {\n display: block;\n width: 100%;\n height: 100%;\n }\n\n .chart-container {\n display: flex;\n width: 100%;\n height: 100%;\n }\n\n .chart-content {\n flex: 1;\n position: relative;\n }\n `\n\n firstUpdated() {\n this.loadSciChart()\n }\n\n async loadSciChart() {\n if (!window.sciChartLoaded) {\n if (!window.sciChartLoadingPromise) {\n window.sciChartLoadingPromise = new Promise<void>(resolve => {\n const script = document.createElement('script')\n script.src = 'https://cdn.jsdelivr.net/npm/scichart/index.min.js'\n script.crossOrigin = 'anonymous'\n script.onload = () => {\n window.sciChartLoaded = true\n\n SciChart.SciChartSurface.UseCommunityLicense()\n\n resolve()\n }\n document.head.appendChild(script)\n })\n }\n\n await window.sciChartLoadingPromise\n }\n\n this.initializeSciChart()\n }\n\n async initializeSciChart() {\n const { chart, dataSeries } = (await buildSciChart(this.config, this.container, {})) \|\| {}\n\n this.chart = chart\n this.dataSeries = dataSeries!\n\n this.updateDataSeries()\n }\n\n async updated(changedProperties: Map<string \| number \| symbol, unknown>) {\n if (changedProperties.has('config') && this.config) {\n await this.initializeSciChart()\n }\n\n if (changedProperties.has('data')) {\n this.updateDataSeries()\n this.chart?.sciChartSurface.zoomExtents()\n }\n }\n\n async appendData(appendum: { [attr: string]: any }[]) {}\n\n updateDataSeries() {\n if (!this.dataSeries?.length) return\n\n this.dataSeries.forEach(ds => ds.clear())\n const newData = this.dataSet\n\n newData.forEach((data, index) => {\n const filteredData = data.filter(d => typeof d.yValue === 'number')\n\n if (filteredData.length > 0) {\n this.dataSeries[index].appendRange(\n filteredData.map(d => d.xValue),\n filteredData.map(d => d.yValue)\n )\n }\n })\n\n this.chart?.sciChartSurface.zoomExtents()\n this.chart?.sciChartSurface.invalidateElement()\n }\n\n get dataSet(): { xValue: number; yValue: number }[][] {\n const { config, data } = this\n const { datasets = [], labelDataKey: attrX } = config?.data \|\| {}\n\n if (!(data instanceof Array) \|\| !attrX) {\n return []\n }\n\n return datasets.map(dataset => {\n return data\n .map(item => {\n if (!item \|\| typeof item !== 'object') {\n return\n }\n\n const xValue = new Date(item[attrX])\n if (isNaN(xValue.getTime())) {\n console.error('Invalid date:', item[attrX])\n return\n }\n\n return {\n xValue: xValue.getTime() / 1000,\n yValue: item[dataset.dataKey!]\n }\n })\n .filter(Boolean) as { xValue: number; yValue: number }[]\n })\n }\n\n render() {\n return html` <div id=\"container\" class=\"chart-container\"></div> `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ox-scichart': OxSciChart\n }\n}\n"]}