@operato/chart 2.0.0-beta.26 → 2.0.0-beta.29
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 +18 -0
- package/dist/src/chartjs/config-converter.d.ts +2 -1
- package/dist/src/chartjs/config-converter.js +1 -0
- package/dist/src/chartjs/config-converter.js.map +1 -1
- package/dist/src/chartjs/ox-chart-js.d.ts +4 -2
- package/dist/src/chartjs/ox-chart-js.js +29 -0
- package/dist/src/chartjs/ox-chart-js.js.map +1 -1
- package/dist/src/editors/input-chart-abstract.d.ts +4 -3
- package/dist/src/editors/input-chart-abstract.js +11 -6
- package/dist/src/editors/input-chart-abstract.js.map +1 -1
- package/dist/src/editors/input-chart-multi-series-abstract.js +1 -1
- package/dist/src/editors/input-chart-multi-series-abstract.js.map +1 -1
- package/dist/src/editors/ox-input-chart-hbar.d.ts +0 -1
- package/dist/src/editors/ox-input-chart-hbar.js +0 -3
- package/dist/src/editors/ox-input-chart-hbar.js.map +1 -1
- package/dist/src/editors/ox-input-chart-mixed.d.ts +0 -1
- package/dist/src/editors/ox-input-chart-mixed.js +0 -3
- package/dist/src/editors/ox-input-chart-mixed.js.map +1 -1
- package/dist/src/editors/ox-input-chart-pie.d.ts +2 -3
- package/dist/src/editors/ox-input-chart-pie.js +0 -3
- package/dist/src/editors/ox-input-chart-pie.js.map +1 -1
- package/dist/src/editors/ox-input-chart-radar.d.ts +0 -1
- package/dist/src/editors/ox-input-chart-radar.js +0 -3
- package/dist/src/editors/ox-input-chart-radar.js.map +1 -1
- package/dist/src/editors/ox-property-editor-chart.js +9 -7
- package/dist/src/editors/ox-property-editor-chart.js.map +1 -1
- package/dist/stories/common.d.ts +1 -1
- package/dist/stories/common.js.map +1 -1
- package/dist/stories/{ox-input-chart-mixed.stories.js → ox-input-chart-bar.stories.js} +6 -5
- package/dist/stories/ox-input-chart-bar.stories.js.map +1 -0
- package/dist/stories/ox-input-chart-doughnut.stories.d.ts +27 -0
- package/dist/stories/ox-input-chart-doughnut.stories.js +115 -0
- package/dist/stories/ox-input-chart-doughnut.stories.js.map +1 -0
- package/dist/stories/ox-input-chart-hbar.stories.js +1 -0
- package/dist/stories/ox-input-chart-hbar.stories.js.map +1 -1
- package/dist/stories/ox-input-chart-line.stories.d.ts +25 -0
- package/dist/stories/ox-input-chart-line.stories.js +184 -0
- package/dist/stories/ox-input-chart-line.stories.js.map +1 -0
- package/dist/stories/ox-input-chart-pie.stories.js +1 -0
- package/dist/stories/ox-input-chart-pie.stories.js.map +1 -1
- package/dist/stories/ox-input-chart-polar-area.stories.d.ts +27 -0
- package/dist/stories/ox-input-chart-polar-area.stories.js +115 -0
- package/dist/stories/ox-input-chart-polar-area.stories.js.map +1 -0
- package/dist/stories/ox-input-chart-radar.stories.js +1 -0
- package/dist/stories/ox-input-chart-radar.stories.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +7 -3
- package/src/chartjs/config-converter.ts +1 -0
- package/src/chartjs/ox-chart-js.ts +29 -1
- package/src/editors/input-chart-abstract.ts +13 -12
- package/src/editors/input-chart-multi-series-abstract.ts +2 -2
- package/src/editors/ox-input-chart-hbar.ts +0 -4
- package/src/editors/ox-input-chart-mixed.ts +0 -4
- package/src/editors/ox-input-chart-pie.ts +2 -9
- package/src/editors/ox-input-chart-radar.ts +0 -4
- package/src/editors/ox-property-editor-chart.ts +9 -7
- package/src/types.d.ts +3 -2
- package/stories/common.ts +1 -1
- package/stories/{ox-input-chart-mixed.stories.ts → ox-input-chart-bar.stories.ts} +5 -4
- package/stories/ox-input-chart-doughnut.stories.ts +130 -0
- package/stories/ox-input-chart-hbar.stories.ts +1 -0
- package/stories/ox-input-chart-line.stories.ts +198 -0
- package/stories/ox-input-chart-pie.stories.ts +1 -0
- package/stories/ox-input-chart-polar-area.stories.ts +130 -0
- package/stories/ox-input-chart-radar.stories.ts +1 -0
- package/dist/stories/ox-input-chart-mixed.stories.js.map +0 -1
- /package/dist/stories/{ox-input-chart-mixed.stories.d.ts → ox-input-chart-bar.stories.d.ts} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-chart-hbar.js","sourceRoot":"","sources":["../../../src/editors/ox-input-chart-hbar.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/input/ox-input-color.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport { html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { InputChartMultiSeriesAbstract } from './input-chart-multi-series-abstract'\n\n@customElement('ox-input-chart-hbar')\nexport class OxInputChartHBar extends InputChartMultiSeriesAbstract {\n static styles = [...InputChartMultiSeriesAbstract.styles]\n\n getChartType(): 'bar' | 'horizontalBar' | 'line' | 'radar' | 'pie' | 'mixed' {\n return 'horizontalBar'\n }\n\n subTemplate() {\n const configurer = this.configurer\n\n return html`\n <legend><ox-i18n msgid=\"label.series\">Series</ox-i18n></legend>\n ${this.multiSeriesTabTemplate()}\n\n <legend><ox-i18n msgid=\"label.y-axes\">Y Axes</ox-i18n></legend>\n\n <label for=\"label-data-key\"> <ox-i18n msgid=\"label.data-key\">Data Key</ox-i18n> </label>\n <input id=\"label-data-key\" type=\"text\" value-key=\"labelDataKey\" value=${ifDefined(configurer.labelDataKey)} />\n\n <label for=\"y-axes0-axis-title\"> <ox-i18n msgid=\"label.title\">Title</ox-i18n> </label>\n <input\n id=\"y-axes0-axis-title\"\n type=\"text\"\n value-key=\"yAxes0.axisTitle\"\n value=${ifDefined(configurer.yAxes0.axisTitle)}\n />\n\n <label for=\"y-axes0-bar-spacing\"><ox-i18n msgid=\"label.bar-spacing\">Bar Spacing</ox-i18n></label>\n <input\n id=\"y-axes0-bar-spacing\"\n type=\"number\"\n min=\"0\"\n max=\"1\"\n step=\"0.1\"\n value-key=\"yAxes0.barSpacing\"\n value=${ifDefined(configurer.yAxes0.barSpacing)}\n />\n <label for=\"y-axes0-category-spacing\"><ox-i18n msgid=\"label.tick-spacing\">Tick Spacing</ox-i18n></label>\n <input\n id=\"y-axes0-category-spacing\"\n type=\"number\"\n min=\"0\"\n max=\"1\"\n step=\"0.1\"\n value-key=\"yAxes0.categorySpacing\"\n value=${ifDefined(configurer.yAxes0.categorySpacing)}\n />\n\n <input\n id=\"x-grid-line\"\n type=\"checkbox\"\n value-key=\"value.options.xGridLine\"\n ?checked=${configurer.config.options?.xGridLine}\n />\n <label for=\"x-grid-line\"> <ox-i18n msgid=\"label.grid-line\">Grid Line</ox-i18n> </label>\n\n <input\n id=\"x-axes0-ticks-display\"\n type=\"checkbox\"\n value-key=\"xAxes0.ticks.display\"\n ?checked=${configurer.xAxes0.ticks?.display}\n />\n <label for=\"x-axes0-ticks-display\"> <ox-i18n msgid=\"label.display-tick\">Display Tick</ox-i18n> </label>\n\n <legend><ox-i18n msgid=\"label.x-axes\">X Axes</ox-i18n></legend>\n\n <label for=\"x-axes0-axis-title\"> <ox-i18n msgid=\"label.title\">Title</ox-i18n> </label>\n <input\n id=\"x-axes0-axis-title\"\n type=\"text\"\n value-key=\"xAxes0.axisTitle\"\n .value=${configurer.xAxes0.axisTitle || ''}\n />\n\n <input\n id=\"x-axes0-axis-min-auto\"\n type=\"checkbox\"\n value-key=\"xAxes0.ticks.autoMin\"\n ?checked=${configurer.xAxes0.ticks?.autoMin}\n />\n <label for=\"x-axes0-axis-min-auto\"> <ox-i18n msgid=\"label.axis-min-auto\">Axis Min Auto</ox-i18n> </label>\n\n <input\n id=\"x-axes0-ticks-auto-max\"\n type=\"checkbox\"\n value-key=\"xAxes0.ticks.autoMax\"\n ?checked=${configurer.xAxes0.ticks?.autoMax}\n />\n <label for=\"x-axes0-ticks-auto-max\"> <ox-i18n msgid=\"label.axis-max-auto\">Axis Max Auto</ox-i18n> </label>\n\n ${!configurer.xAxes0.ticks?.autoMin\n ? html`\n <label for=\"x-axes0-ticks-min\"> <ox-i18n msgid=\"label.axis-min\">Axis Min</ox-i18n> </label>\n <input\n id=\"x-axes0-ticks-min\"\n type=\"number\"\n value-key=\"xAxes0.ticks.min\"\n value=${ifDefined(configurer.xAxes0.ticks?.min)}\n />\n `\n : html``}\n ${!configurer.xAxes0.ticks?.autoMax\n ? html`\n <label for=\"x-axes0-ticks-max\"> <ox-i18n msgid=\"label.axis-max\">Axis Max</ox-i18n> </label>\n <input\n id=\"x-axes0-ticks-max\"\n type=\"number\"\n value-key=\"xAxes0.ticks.max\"\n value=${ifDefined(configurer.xAxes0.ticks?.max)}\n />\n `\n : html``}\n\n <label for=\"y-axes0-ticks-step-size\"> <ox-i18n msgid=\"label.axis-step-size\">Axis Step Size</ox-i18n> </label>\n <input\n id=\"y-axes0-ticks-step-size\"\n type=\"number\"\n value-key=\"yAxes0.ticks.stepSize\"\n value=${ifDefined(configurer.yAxes0.ticks?.stepSize)}\n />\n\n <input\n id=\"y-grid-line\"\n type=\"checkbox\"\n value-key=\"value.options.yGridLine\"\n ?checked=${configurer.config.options?.yGridLine}\n />\n <label for=\"y-grid-line\"> <ox-i18n msgid=\"label.grid-line\">Grid Line</ox-i18n> </label>\n\n <input\n id=\"y-axes0-ticks-display\"\n type=\"checkbox\"\n value-key=\"yAxes0.ticks.display\"\n ?checked=${configurer.yAxes0.ticks?.display}\n />\n <label for=\"y-axes0-ticks-display\"> <ox-i18n msgid=\"label.display-tick\">Display Tick</ox-i18n> </label>\n `\n }\n\n multiSeriesTabTemplate() {\n const configurer = this.configurer\n\n return html`\n <div id=\"series-properties-container\" fullwidth>\n <div id=\"tab-header\">\n <md-icon\n id=\"tab-nav-left-button\"\n @tap=${(e: Event) => {\n this._onTabScrollNavLeft(e)\n }}\n disabled\n >chevron_left</md-icon\n >\n <div\n id=\"tabs\"\n @change=${(e: Event) => {\n configurer.currentSeriesIndex = (e.target as any).activeTabIndex\n }}\n active-tab-index=${configurer.currentSeriesIndex}\n fit-container\n >\n ${configurer.datasets.map(\n (dataset: any, index: number) => html`\n <div\n data-series=${index + 1}\n data-tab-index=${index}\n tab\n ?selected=${index == configurer.currentSeriesIndex}\n @click=${(e: Event) => {\n const target = e.target as HTMLDivElement\n this.configurer.setCurrentSeriesIndex(Number(target.getAttribute('data-tab-index')))\n this.value = { ...this.configurer.value }\n }}\n >\n ${index + 1}\n ${!configurer.datasets || (configurer.datasets.length != 1 && configurer.currentSeriesIndex == index)\n ? html` <md-icon @tap=\"${(e: Event) => this.onTapRemoveCurrentTab(e)}\"> close </md-icon> `\n : html``}\n </div>\n `\n )}\n </div>\n <md-icon\n id=\"tab-nav-right-button\"\n @click=${(e: Event) => {\n this._onTabScrollNavRight(e)\n }}\n disabled\n >chevron_right</md-icon\n >\n </div>\n <div id=\"add-series-button-container\">\n <md-icon id=\"add-series-button\" @tap=${(e: Event) => this.onTapAddTab(e)}>add</md-icon>\n </div>\n\n <div class=\"tab-content\">\n <label for=\"data-key\"> <ox-i18n msgid=\"label.data-key\">Data Key</ox-i18n> </label>\n <input id=\"data-key\" type=\"text\" value-key=\"dataKey\" .value=${configurer.dataKey || ''} />\n <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 <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 || '#000'}></ox-input-color>\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 ${this.displayValueTemplate()}\n </div>\n </div>\n `\n }\n\n getDefaultDatasets(): OperatoChart.Dataset[] {\n return [this.getDefaultDataset('horizontalBar')]\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"ox-input-chart-hbar.js","sourceRoot":"","sources":["../../../src/editors/ox-input-chart-hbar.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,kCAAkC,CAAA;AACzC,OAAO,0BAA0B,CAAA;AAEjC,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAExD,OAAO,EAAE,6BAA6B,EAAE,MAAM,qCAAqC,CAAA;AAG5E,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,6BAA6B;aAC1D,WAAM,GAAG,CAAC,GAAG,6BAA6B,CAAC,MAAM,CAAC,AAA5C,CAA4C;IAEzD,WAAW;QACT,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAA;QAElC,OAAO,IAAI,CAAA;;QAEP,IAAI,CAAC,sBAAsB,EAAE;;;;;8EAKyC,SAAS,CAAC,UAAU,CAAC,YAAY,CAAC;;;;;;;gBAOhG,SAAS,CAAC,UAAU,CAAC,MAAM,CAAC,SAAS,CAAC;;;;;;;;;;;gBAWtC,SAAS,CAAC,UAAU,CAAC,MAAM,CAAC,UAAU,CAAC;;;;;;;;;;gBAUvC,SAAS,CAAC,UAAU,CAAC,MAAM,CAAC,eAAe,CAAC;;;;;;;mBAOzC,UAAU,CAAC,MAAM,CAAC,OAAO,EAAE,SAAS;;;;;;;;mBAQpC,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO;;;;;;;;;;;iBAWlC,UAAU,CAAC,MAAM,CAAC,SAAS,IAAI,EAAE;;;;;;;mBAO/B,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO;;;;;;;;mBAQhC,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO;;;;QAI3C,CAAC,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO;YACjC,CAAC,CAAC,IAAI,CAAA;;;;;;sBAMQ,SAAS,CAAC,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC;;WAElD;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;QACR,CAAC,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO;YACjC,CAAC,CAAC,IAAI,CAAA;;;;;;sBAMQ,SAAS,CAAC,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC;;WAElD;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;;;;;;;gBAOA,SAAS,CAAC,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC;;;;;;;mBAOzC,UAAU,CAAC,MAAM,CAAC,OAAO,EAAE,SAAS;;;;;;;;mBAQpC,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO;;;KAG9C,CAAA;IACH,CAAC;IAED,sBAAsB;QACpB,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAA;QAElC,OAAO,IAAI,CAAA;;;;;mBAKI,CAAC,CAAQ,EAAE,EAAE;YAClB,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAA;QAC7B,CAAC;;;;;;sBAMS,CAAC,CAAQ,EAAE,EAAE;YACrB,UAAU,CAAC,kBAAkB,GAAI,CAAC,CAAC,MAAc,CAAC,cAAc,CAAA;QAClE,CAAC;+BACkB,UAAU,CAAC,kBAAkB;;;cAG9C,UAAU,CAAC,QAAQ,CAAC,GAAG,CACvB,CAAC,OAAY,EAAE,KAAa,EAAE,EAAE,CAAC,IAAI,CAAA;;gCAEnB,KAAK,GAAG,CAAC;mCACN,KAAK;;8BAEV,KAAK,IAAI,UAAU,CAAC,kBAAkB;2BACzC,CAAC,CAAQ,EAAE,EAAE;YACpB,MAAM,MAAM,GAAG,CAAC,CAAC,MAAwB,CAAA;YACzC,IAAI,CAAC,UAAU,CAAC,qBAAqB,CAAC,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAA;YACpF,IAAI,CAAC,KAAK,GAAG,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,CAAA;QAC3C,CAAC;;oBAEC,KAAK,GAAG,CAAC;oBACT,CAAC,UAAU,CAAC,QAAQ,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,MAAM,IAAI,CAAC,IAAI,UAAU,CAAC,kBAAkB,IAAI,KAAK,CAAC;YACnG,CAAC,CAAC,IAAI,CAAA,mBAAmB,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,sBAAsB;YAC1F,CAAC,CAAC,IAAI,CAAA,EAAE;;eAEb,CACF;;;;qBAIQ,CAAC,CAAQ,EAAE,EAAE;YACpB,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAA;QAC9B,CAAC;;;;;;iDAMoC,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;;;;;wEAKV,UAAU,CAAC,OAAO,IAAI,EAAE;;iFAEf,UAAU,CAAC,MAAM,CAAC,KAAK,IAAI,EAAE;;uEAEvC,UAAU,CAAC,KAAK,IAAI,MAAM;;iFAEhB,UAAU,CAAC,MAAM,CAAC,KAAK,IAAI,EAAE;;YAElG,IAAI,CAAC,oBAAoB,EAAE;;;KAGlC,CAAA;IACH,CAAC;IAED,kBAAkB;QAChB,OAAO,CAAC,IAAI,CAAC,iBAAiB,CAAC,eAAe,CAAC,CAAC,CAAA;IAClD,CAAC;;AAjNU,gBAAgB;IAD5B,aAAa,CAAC,qBAAqB,CAAC;GACxB,gBAAgB,CAkN5B","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/input/ox-input-color.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport { html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { InputChartMultiSeriesAbstract } from './input-chart-multi-series-abstract'\n\n@customElement('ox-input-chart-hbar')\nexport class OxInputChartHBar extends InputChartMultiSeriesAbstract {\n static styles = [...InputChartMultiSeriesAbstract.styles]\n\n subTemplate() {\n const configurer = this.configurer\n\n return html`\n <legend><ox-i18n msgid=\"label.series\">Series</ox-i18n></legend>\n ${this.multiSeriesTabTemplate()}\n\n <legend><ox-i18n msgid=\"label.y-axes\">Y Axes</ox-i18n></legend>\n\n <label for=\"label-data-key\"> <ox-i18n msgid=\"label.data-key\">Data Key</ox-i18n> </label>\n <input id=\"label-data-key\" type=\"text\" value-key=\"labelDataKey\" value=${ifDefined(configurer.labelDataKey)} />\n\n <label for=\"y-axes0-axis-title\"> <ox-i18n msgid=\"label.title\">Title</ox-i18n> </label>\n <input\n id=\"y-axes0-axis-title\"\n type=\"text\"\n value-key=\"yAxes0.axisTitle\"\n value=${ifDefined(configurer.yAxes0.axisTitle)}\n />\n\n <label for=\"y-axes0-bar-spacing\"><ox-i18n msgid=\"label.bar-spacing\">Bar Spacing</ox-i18n></label>\n <input\n id=\"y-axes0-bar-spacing\"\n type=\"number\"\n min=\"0\"\n max=\"1\"\n step=\"0.1\"\n value-key=\"yAxes0.barSpacing\"\n value=${ifDefined(configurer.yAxes0.barSpacing)}\n />\n <label for=\"y-axes0-category-spacing\"><ox-i18n msgid=\"label.tick-spacing\">Tick Spacing</ox-i18n></label>\n <input\n id=\"y-axes0-category-spacing\"\n type=\"number\"\n min=\"0\"\n max=\"1\"\n step=\"0.1\"\n value-key=\"yAxes0.categorySpacing\"\n value=${ifDefined(configurer.yAxes0.categorySpacing)}\n />\n\n <input\n id=\"x-grid-line\"\n type=\"checkbox\"\n value-key=\"value.options.xGridLine\"\n ?checked=${configurer.config.options?.xGridLine}\n />\n <label for=\"x-grid-line\"> <ox-i18n msgid=\"label.grid-line\">Grid Line</ox-i18n> </label>\n\n <input\n id=\"x-axes0-ticks-display\"\n type=\"checkbox\"\n value-key=\"xAxes0.ticks.display\"\n ?checked=${configurer.xAxes0.ticks?.display}\n />\n <label for=\"x-axes0-ticks-display\"> <ox-i18n msgid=\"label.display-tick\">Display Tick</ox-i18n> </label>\n\n <legend><ox-i18n msgid=\"label.x-axes\">X Axes</ox-i18n></legend>\n\n <label for=\"x-axes0-axis-title\"> <ox-i18n msgid=\"label.title\">Title</ox-i18n> </label>\n <input\n id=\"x-axes0-axis-title\"\n type=\"text\"\n value-key=\"xAxes0.axisTitle\"\n .value=${configurer.xAxes0.axisTitle || ''}\n />\n\n <input\n id=\"x-axes0-axis-min-auto\"\n type=\"checkbox\"\n value-key=\"xAxes0.ticks.autoMin\"\n ?checked=${configurer.xAxes0.ticks?.autoMin}\n />\n <label for=\"x-axes0-axis-min-auto\"> <ox-i18n msgid=\"label.axis-min-auto\">Axis Min Auto</ox-i18n> </label>\n\n <input\n id=\"x-axes0-ticks-auto-max\"\n type=\"checkbox\"\n value-key=\"xAxes0.ticks.autoMax\"\n ?checked=${configurer.xAxes0.ticks?.autoMax}\n />\n <label for=\"x-axes0-ticks-auto-max\"> <ox-i18n msgid=\"label.axis-max-auto\">Axis Max Auto</ox-i18n> </label>\n\n ${!configurer.xAxes0.ticks?.autoMin\n ? html`\n <label for=\"x-axes0-ticks-min\"> <ox-i18n msgid=\"label.axis-min\">Axis Min</ox-i18n> </label>\n <input\n id=\"x-axes0-ticks-min\"\n type=\"number\"\n value-key=\"xAxes0.ticks.min\"\n value=${ifDefined(configurer.xAxes0.ticks?.min)}\n />\n `\n : html``}\n ${!configurer.xAxes0.ticks?.autoMax\n ? html`\n <label for=\"x-axes0-ticks-max\"> <ox-i18n msgid=\"label.axis-max\">Axis Max</ox-i18n> </label>\n <input\n id=\"x-axes0-ticks-max\"\n type=\"number\"\n value-key=\"xAxes0.ticks.max\"\n value=${ifDefined(configurer.xAxes0.ticks?.max)}\n />\n `\n : html``}\n\n <label for=\"y-axes0-ticks-step-size\"> <ox-i18n msgid=\"label.axis-step-size\">Axis Step Size</ox-i18n> </label>\n <input\n id=\"y-axes0-ticks-step-size\"\n type=\"number\"\n value-key=\"yAxes0.ticks.stepSize\"\n value=${ifDefined(configurer.yAxes0.ticks?.stepSize)}\n />\n\n <input\n id=\"y-grid-line\"\n type=\"checkbox\"\n value-key=\"value.options.yGridLine\"\n ?checked=${configurer.config.options?.yGridLine}\n />\n <label for=\"y-grid-line\"> <ox-i18n msgid=\"label.grid-line\">Grid Line</ox-i18n> </label>\n\n <input\n id=\"y-axes0-ticks-display\"\n type=\"checkbox\"\n value-key=\"yAxes0.ticks.display\"\n ?checked=${configurer.yAxes0.ticks?.display}\n />\n <label for=\"y-axes0-ticks-display\"> <ox-i18n msgid=\"label.display-tick\">Display Tick</ox-i18n> </label>\n `\n }\n\n multiSeriesTabTemplate() {\n const configurer = this.configurer\n\n return html`\n <div id=\"series-properties-container\" fullwidth>\n <div id=\"tab-header\">\n <md-icon\n id=\"tab-nav-left-button\"\n @tap=${(e: Event) => {\n this._onTabScrollNavLeft(e)\n }}\n disabled\n >chevron_left</md-icon\n >\n <div\n id=\"tabs\"\n @change=${(e: Event) => {\n configurer.currentSeriesIndex = (e.target as any).activeTabIndex\n }}\n active-tab-index=${configurer.currentSeriesIndex}\n fit-container\n >\n ${configurer.datasets.map(\n (dataset: any, index: number) => html`\n <div\n data-series=${index + 1}\n data-tab-index=${index}\n tab\n ?selected=${index == configurer.currentSeriesIndex}\n @click=${(e: Event) => {\n const target = e.target as HTMLDivElement\n this.configurer.setCurrentSeriesIndex(Number(target.getAttribute('data-tab-index')))\n this.value = { ...this.configurer.value }\n }}\n >\n ${index + 1}\n ${!configurer.datasets || (configurer.datasets.length != 1 && configurer.currentSeriesIndex == index)\n ? html` <md-icon @tap=\"${(e: Event) => this.onTapRemoveCurrentTab(e)}\"> close </md-icon> `\n : html``}\n </div>\n `\n )}\n </div>\n <md-icon\n id=\"tab-nav-right-button\"\n @click=${(e: Event) => {\n this._onTabScrollNavRight(e)\n }}\n disabled\n >chevron_right</md-icon\n >\n </div>\n <div id=\"add-series-button-container\">\n <md-icon id=\"add-series-button\" @tap=${(e: Event) => this.onTapAddTab(e)}>add</md-icon>\n </div>\n\n <div class=\"tab-content\">\n <label for=\"data-key\"> <ox-i18n msgid=\"label.data-key\">Data Key</ox-i18n> </label>\n <input id=\"data-key\" type=\"text\" value-key=\"dataKey\" .value=${configurer.dataKey || ''} />\n <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 <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 || '#000'}></ox-input-color>\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 ${this.displayValueTemplate()}\n </div>\n </div>\n `\n }\n\n getDefaultDatasets(): OperatoChart.Dataset[] {\n return [this.getDefaultDataset('horizontalBar')]\n }\n}\n"]}
|
|
@@ -2,7 +2,6 @@ import '@operato/i18n/ox-i18n.js';
|
|
|
2
2
|
import { InputChartMultiSeriesAbstract } from './input-chart-multi-series-abstract';
|
|
3
3
|
export declare class OxInputChartMixed extends InputChartMultiSeriesAbstract {
|
|
4
4
|
static styles: import("lit").CSSResult[];
|
|
5
|
-
getChartType(): 'bar' | 'line' | 'pie' | 'radar' | 'mixed';
|
|
6
5
|
subTemplate(): import("lit-html").TemplateResult<1>;
|
|
7
6
|
_hasBarSeries(config: any): boolean;
|
|
8
7
|
}
|
|
@@ -6,9 +6,6 @@ import { ifDefined } from 'lit/directives/if-defined.js';
|
|
|
6
6
|
import { InputChartMultiSeriesAbstract } from './input-chart-multi-series-abstract';
|
|
7
7
|
let OxInputChartMixed = class OxInputChartMixed extends InputChartMultiSeriesAbstract {
|
|
8
8
|
static { this.styles = InputChartMultiSeriesAbstract.styles; }
|
|
9
|
-
getChartType() {
|
|
10
|
-
return 'mixed';
|
|
11
|
-
}
|
|
12
9
|
subTemplate() {
|
|
13
10
|
const configurer = this.configurer;
|
|
14
11
|
return html `
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-chart-mixed.js","sourceRoot":"","sources":["../../../src/editors/ox-input-chart-mixed.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/i18n/ox-i18n.js'\n\nimport { html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { InputChartMultiSeriesAbstract } from './input-chart-multi-series-abstract'\n\n@customElement('ox-input-chart-mixed')\nexport class OxInputChartMixed extends InputChartMultiSeriesAbstract {\n static styles = InputChartMultiSeriesAbstract.styles\n\n getChartType(): 'bar' | 'line' | 'pie' | 'radar' | 'mixed' {\n return 'mixed'\n }\n\n subTemplate() {\n const configurer = this.configurer\n\n return html`\n <input id=\"multi-axis\" type=\"checkbox\" value-key=\"multiAxis\" ?checked=${configurer.multiAxis} />\n <label for=\"multi-axis\"> <ox-i18n msgid=\"label.multi-axis\">Multi Axis</ox-i18n> </label>\n\n <legend><ox-i18n msgid=\"label.series\">Series</ox-i18n></legend>\n\n <div fullwidth>${this.multiSeriesTabTemplate()}</div>\n\n <legend><ox-i18n msgid=\"label.x-axes\">X Axes</ox-i18n></legend>\n\n <label for=\"series-data-key\"> <ox-i18n msgid=\"label.data-key\">Data Key</ox-i18n> </label>\n <input id=\"series-data-key\" type=\"text\" value-key=\"labelDataKey\" value=${ifDefined(configurer.labelDataKey)} />\n\n <label for=\"x-axes0-axis-title\"> <ox-i18n msgid=\"label.title\">Title</ox-i18n> </label>\n <input\n id=\"x-axes0-axis-title\"\n type=\"text\"\n value-key=\"xAxes0.axisTitle\"\n value=${ifDefined(configurer.xAxes0.axisTitle)}\n />\n\n ${this._hasBarSeries(configurer.value)\n ? html`\n <label for=\"bar-spacing\"><ox-i18n msgid=\"label.bar-spacing\">Bar Spacing</ox-i18n></label>\n <input\n id=\"bar-spacing\"\n type=\"number\"\n min=\"0\"\n max=\"1\"\n step=\"0.1\"\n value-key=\"xAxes0.barSpacing\"\n value=${ifDefined(configurer.xAxes0.barSpacing)}\n />\n <label for=\"tick-spacing\"><ox-i18n msgid=\"label.tick-spacing\">Tick Spacing</ox-i18n></label>\n <input\n id=\"tick-spacing\"\n type=\"number\"\n min=\"0\"\n max=\"1\"\n step=\"0.1\"\n value-key=\"xAxes0.categorySpacing\"\n value=${ifDefined(configurer.xAxes0.categorySpacing)}\n />\n `\n : html``}\n\n <input\n id=\"x-grid-line\"\n type=\"checkbox\"\n value-key=\"value.options.xGridLine\"\n ?checked=${configurer.config.options?.xGridLine}\n />\n <label for=\"x-grid-line\"> <ox-i18n msgid=\"label.grid-line\">Grid Line</ox-i18n> </label>\n\n <input\n id=\"x-axes0-ticks-display\"\n type=\"checkbox\"\n value-key=\"xAxes0.ticks.display\"\n ?checked=${configurer.xAxes0.ticks?.display}\n />\n <label for=\"x-axes0-ticks-display\"> <ox-i18n msgid=\"label.display-tick\">Display Tick</ox-i18n> </label>\n\n <legend><ox-i18n msgid=\"label.y-axes\">Y Axes</ox-i18n></legend>\n\n <label for=\"y-axes0-axis-title\"> <ox-i18n msgid=\"label.title\">Title</ox-i18n> </label>\n <input\n id=\"y-axes0-axis-title\"\n type=\"text\"\n value-key=\"yAxes0.axisTitle\"\n value=${configurer.yAxes0.axisTitle || ''}\n />\n\n <input\n id=\"axis-min-auto\"\n type=\"checkbox\"\n value-key=\"yAxes0.ticks.autoMin\"\n ?checked=${configurer.yAxes0.ticks?.autoMin}\n />\n <label for=\"axis-min-auto\"> <ox-i18n msgid=\"label.axis-min-auto\">Min Auto</ox-i18n> </label>\n\n <input\n id=\"axis-max-auto\"\n type=\"checkbox\"\n value-key=\"yAxes0.ticks.autoMax\"\n ?checked=${configurer.yAxes0.ticks?.autoMax}\n />\n <label for=\"axis-max-auto\"> <ox-i18n msgid=\"label.axis-max-auto\">Max Auto</ox-i18n> </label>\n\n ${!configurer.yAxes0.ticks?.autoMin\n ? html`\n <label for=\"y-axes0-ticks-min\"> <ox-i18n msgid=\"label.axis-min\">Min</ox-i18n> </label>\n <input\n id=\"y-axes0-ticks-min\"\n type=\"number\"\n value-key=\"yAxes0.ticks.min\"\n value=${ifDefined(configurer.yAxes0.ticks?.min)}\n />\n `\n : html``}\n ${!configurer.yAxes0.ticks?.autoMax\n ? html`\n <label for=\"y-axes0-ticks-max\"> <ox-i18n msgid=\"label.axis-max\">Max</ox-i18n> </label>\n <input\n id=\"y-axes0-ticks-max\"\n type=\"number\"\n value-key=\"yAxes0.ticks.max\"\n value=${ifDefined(configurer.yAxes0.ticks?.max)}\n />\n `\n : html``}\n\n <label for=\"y-axes0-ticks-step-size\"> <ox-i18n msgid=\"label.axis-step-size\">StepSize</ox-i18n> </label>\n <input\n id=\"y-axes0-ticks-step-size\"\n type=\"number\"\n value-key=\"yAxes0.ticks.stepSize\"\n value=${ifDefined(configurer.yAxes0.ticks?.stepSize)}\n />\n\n <input\n id=\"y-grid-line\"\n type=\"checkbox\"\n value-key=\"value.options.yGridLine\"\n ?checked=${configurer.config.options?.yGridLine}\n />\n <label for=\"y-grid-line\"> <ox-i18n msgid=\"label.grid-line\">Grid Line</ox-i18n> </label>\n\n <input\n id=\"y-axes0-ticks-display\"\n type=\"checkbox\"\n value-key=\"yAxes0.ticks.display\"\n ?checked=${configurer.yAxes0.ticks?.display}\n />\n <label for=\"y-axes0-ticks-display\"> <ox-i18n msgid=\"label.display-tick\">Display Tick</ox-i18n> </label>\n\n ${configurer.config.options?.multiAxis\n ? html`\n <legend><ox-i18n msgid=\"label.y-2nd-axes\">Y 2nd Axes</ox-i18n></legend>\n\n <label for=\"y-axes1.axis-title\"> <ox-i18n msgid=\"label.title\">Title</ox-i18n> </label>\n <input\n id=\"y-axes1.axis-title\"\n type=\"text\"\n value-key=\"yAxes1.axisTitle\"\n value=${ifDefined(configurer.yAxes1?.axisTitle)}\n />\n\n <input\n id=\"y-axes1-ticks-auto-min\"\n type=\"checkbox\"\n value-key=\"yAxes1.ticks.autoMin\"\n ?checked=${configurer.yAxes1?.ticks?.autoMin}\n />\n <label for=\"y-axes1-ticks-auto-min\"> <ox-i18n msgid=\"label.axis-min-auto\">Min Auto</ox-i18n> </label>\n\n <input\n id=\"y-axes1-ticks-auto-max\"\n type=\"checkbox\"\n value-key=\"yAxes1.ticks.autoMax\"\n ?checked=${configurer.yAxes1?.ticks?.autoMax}\n />\n <label for=\"y-axes1-ticks-auto-max\"> <ox-i18n msgid=\"label.axis-max-auto\">Max Auto</ox-i18n> </label>\n\n ${!configurer.yAxes1?.ticks?.autoMin\n ? html`\n <label for=\"y-axes1-ticks-min\"> <ox-i18n msgid=\"label.axis-min\">Min</ox-i18n> </label>\n <input\n id=\"y-axes1-ticks-min\"\n type=\"number\"\n value-key=\"yAxes1.ticks.min\"\n value=${ifDefined(configurer.yAxes1?.ticks?.min)}\n />\n `\n : html``}\n ${!configurer.yAxes1?.ticks?.autoMax\n ? html`\n <label for=\"y-axes1-ticks-max\"> <ox-i18n msgid=\"label.axis-max\">Max</ox-i18n> </label>\n <input\n id=\"y-axes1-ticks-max\"\n type=\"number\"\n value-key=\"yAxes1.ticks.max\"\n value=${ifDefined(configurer.yAxes1?.ticks?.max)}\n />\n `\n : html``}\n\n <label for=\"y-axes1-ticks-step-size\"> <ox-i18n msgid=\"label.axis-step-size\">StepSize</ox-i18n> </label>\n <input\n id=\"y-axes1-ticks-step-size\"\n type=\"number\"\n value-key=\"yAxes1.ticks.stepSize\"\n value=${ifDefined(configurer.yAxes1?.ticks?.stepSize)}\n />\n\n <input\n id=\"y-2nd-grid-line\"\n type=\"checkbox\"\n value-key=\"value.options.y2ndGridLine\"\n ?checked=${configurer.config.options?.y2ndGridLine}\n />\n <label for=\"y-2nd-grid-line\"> <ox-i18n msgid=\"label.grid-line\">Grid Line</ox-i18n> </label>\n\n <input\n id=\"y-axes1-ticks-display\"\n type=\"checkbox\"\n value-key=\"yAxes1.ticks.display\"\n ?checked=${configurer.yAxes1?.ticks?.display}\n />\n <label for=\"y-axes1-ticks-display\"> <ox-i18n msgid=\"label.display-tick\">Display Tick</ox-i18n> </label>\n `\n : html``}\n `\n }\n\n _hasBarSeries(config: any) {\n var hasBarSeries = false\n hasBarSeries = config.data.datasets?.some((s: any) => s.type == 'bar')\n\n return hasBarSeries\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"ox-input-chart-mixed.js","sourceRoot":"","sources":["../../../src/editors/ox-input-chart-mixed.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/i18n/ox-i18n.js'\n\nimport { html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { InputChartMultiSeriesAbstract } from './input-chart-multi-series-abstract'\n\n@customElement('ox-input-chart-mixed')\nexport class OxInputChartMixed extends InputChartMultiSeriesAbstract {\n static styles = InputChartMultiSeriesAbstract.styles\n\n subTemplate() {\n const configurer = this.configurer\n\n return html`\n <input id=\"multi-axis\" type=\"checkbox\" value-key=\"multiAxis\" ?checked=${configurer.multiAxis} />\n <label for=\"multi-axis\"> <ox-i18n msgid=\"label.multi-axis\">Multi Axis</ox-i18n> </label>\n\n <legend><ox-i18n msgid=\"label.series\">Series</ox-i18n></legend>\n\n <div fullwidth>${this.multiSeriesTabTemplate()}</div>\n\n <legend><ox-i18n msgid=\"label.x-axes\">X Axes</ox-i18n></legend>\n\n <label for=\"series-data-key\"> <ox-i18n msgid=\"label.data-key\">Data Key</ox-i18n> </label>\n <input id=\"series-data-key\" type=\"text\" value-key=\"labelDataKey\" value=${ifDefined(configurer.labelDataKey)} />\n\n <label for=\"x-axes0-axis-title\"> <ox-i18n msgid=\"label.title\">Title</ox-i18n> </label>\n <input\n id=\"x-axes0-axis-title\"\n type=\"text\"\n value-key=\"xAxes0.axisTitle\"\n value=${ifDefined(configurer.xAxes0.axisTitle)}\n />\n\n ${this._hasBarSeries(configurer.value)\n ? html`\n <label for=\"bar-spacing\"><ox-i18n msgid=\"label.bar-spacing\">Bar Spacing</ox-i18n></label>\n <input\n id=\"bar-spacing\"\n type=\"number\"\n min=\"0\"\n max=\"1\"\n step=\"0.1\"\n value-key=\"xAxes0.barSpacing\"\n value=${ifDefined(configurer.xAxes0.barSpacing)}\n />\n <label for=\"tick-spacing\"><ox-i18n msgid=\"label.tick-spacing\">Tick Spacing</ox-i18n></label>\n <input\n id=\"tick-spacing\"\n type=\"number\"\n min=\"0\"\n max=\"1\"\n step=\"0.1\"\n value-key=\"xAxes0.categorySpacing\"\n value=${ifDefined(configurer.xAxes0.categorySpacing)}\n />\n `\n : html``}\n\n <input\n id=\"x-grid-line\"\n type=\"checkbox\"\n value-key=\"value.options.xGridLine\"\n ?checked=${configurer.config.options?.xGridLine}\n />\n <label for=\"x-grid-line\"> <ox-i18n msgid=\"label.grid-line\">Grid Line</ox-i18n> </label>\n\n <input\n id=\"x-axes0-ticks-display\"\n type=\"checkbox\"\n value-key=\"xAxes0.ticks.display\"\n ?checked=${configurer.xAxes0.ticks?.display}\n />\n <label for=\"x-axes0-ticks-display\"> <ox-i18n msgid=\"label.display-tick\">Display Tick</ox-i18n> </label>\n\n <legend><ox-i18n msgid=\"label.y-axes\">Y Axes</ox-i18n></legend>\n\n <label for=\"y-axes0-axis-title\"> <ox-i18n msgid=\"label.title\">Title</ox-i18n> </label>\n <input\n id=\"y-axes0-axis-title\"\n type=\"text\"\n value-key=\"yAxes0.axisTitle\"\n value=${configurer.yAxes0.axisTitle || ''}\n />\n\n <input\n id=\"axis-min-auto\"\n type=\"checkbox\"\n value-key=\"yAxes0.ticks.autoMin\"\n ?checked=${configurer.yAxes0.ticks?.autoMin}\n />\n <label for=\"axis-min-auto\"> <ox-i18n msgid=\"label.axis-min-auto\">Min Auto</ox-i18n> </label>\n\n <input\n id=\"axis-max-auto\"\n type=\"checkbox\"\n value-key=\"yAxes0.ticks.autoMax\"\n ?checked=${configurer.yAxes0.ticks?.autoMax}\n />\n <label for=\"axis-max-auto\"> <ox-i18n msgid=\"label.axis-max-auto\">Max Auto</ox-i18n> </label>\n\n ${!configurer.yAxes0.ticks?.autoMin\n ? html`\n <label for=\"y-axes0-ticks-min\"> <ox-i18n msgid=\"label.axis-min\">Min</ox-i18n> </label>\n <input\n id=\"y-axes0-ticks-min\"\n type=\"number\"\n value-key=\"yAxes0.ticks.min\"\n value=${ifDefined(configurer.yAxes0.ticks?.min)}\n />\n `\n : html``}\n ${!configurer.yAxes0.ticks?.autoMax\n ? html`\n <label for=\"y-axes0-ticks-max\"> <ox-i18n msgid=\"label.axis-max\">Max</ox-i18n> </label>\n <input\n id=\"y-axes0-ticks-max\"\n type=\"number\"\n value-key=\"yAxes0.ticks.max\"\n value=${ifDefined(configurer.yAxes0.ticks?.max)}\n />\n `\n : html``}\n\n <label for=\"y-axes0-ticks-step-size\"> <ox-i18n msgid=\"label.axis-step-size\">StepSize</ox-i18n> </label>\n <input\n id=\"y-axes0-ticks-step-size\"\n type=\"number\"\n value-key=\"yAxes0.ticks.stepSize\"\n value=${ifDefined(configurer.yAxes0.ticks?.stepSize)}\n />\n\n <input\n id=\"y-grid-line\"\n type=\"checkbox\"\n value-key=\"value.options.yGridLine\"\n ?checked=${configurer.config.options?.yGridLine}\n />\n <label for=\"y-grid-line\"> <ox-i18n msgid=\"label.grid-line\">Grid Line</ox-i18n> </label>\n\n <input\n id=\"y-axes0-ticks-display\"\n type=\"checkbox\"\n value-key=\"yAxes0.ticks.display\"\n ?checked=${configurer.yAxes0.ticks?.display}\n />\n <label for=\"y-axes0-ticks-display\"> <ox-i18n msgid=\"label.display-tick\">Display Tick</ox-i18n> </label>\n\n ${configurer.config.options?.multiAxis\n ? html`\n <legend><ox-i18n msgid=\"label.y-2nd-axes\">Y 2nd Axes</ox-i18n></legend>\n\n <label for=\"y-axes1.axis-title\"> <ox-i18n msgid=\"label.title\">Title</ox-i18n> </label>\n <input\n id=\"y-axes1.axis-title\"\n type=\"text\"\n value-key=\"yAxes1.axisTitle\"\n value=${ifDefined(configurer.yAxes1?.axisTitle)}\n />\n\n <input\n id=\"y-axes1-ticks-auto-min\"\n type=\"checkbox\"\n value-key=\"yAxes1.ticks.autoMin\"\n ?checked=${configurer.yAxes1?.ticks?.autoMin}\n />\n <label for=\"y-axes1-ticks-auto-min\"> <ox-i18n msgid=\"label.axis-min-auto\">Min Auto</ox-i18n> </label>\n\n <input\n id=\"y-axes1-ticks-auto-max\"\n type=\"checkbox\"\n value-key=\"yAxes1.ticks.autoMax\"\n ?checked=${configurer.yAxes1?.ticks?.autoMax}\n />\n <label for=\"y-axes1-ticks-auto-max\"> <ox-i18n msgid=\"label.axis-max-auto\">Max Auto</ox-i18n> </label>\n\n ${!configurer.yAxes1?.ticks?.autoMin\n ? html`\n <label for=\"y-axes1-ticks-min\"> <ox-i18n msgid=\"label.axis-min\">Min</ox-i18n> </label>\n <input\n id=\"y-axes1-ticks-min\"\n type=\"number\"\n value-key=\"yAxes1.ticks.min\"\n value=${ifDefined(configurer.yAxes1?.ticks?.min)}\n />\n `\n : html``}\n ${!configurer.yAxes1?.ticks?.autoMax\n ? html`\n <label for=\"y-axes1-ticks-max\"> <ox-i18n msgid=\"label.axis-max\">Max</ox-i18n> </label>\n <input\n id=\"y-axes1-ticks-max\"\n type=\"number\"\n value-key=\"yAxes1.ticks.max\"\n value=${ifDefined(configurer.yAxes1?.ticks?.max)}\n />\n `\n : html``}\n\n <label for=\"y-axes1-ticks-step-size\"> <ox-i18n msgid=\"label.axis-step-size\">StepSize</ox-i18n> </label>\n <input\n id=\"y-axes1-ticks-step-size\"\n type=\"number\"\n value-key=\"yAxes1.ticks.stepSize\"\n value=${ifDefined(configurer.yAxes1?.ticks?.stepSize)}\n />\n\n <input\n id=\"y-2nd-grid-line\"\n type=\"checkbox\"\n value-key=\"value.options.y2ndGridLine\"\n ?checked=${configurer.config.options?.y2ndGridLine}\n />\n <label for=\"y-2nd-grid-line\"> <ox-i18n msgid=\"label.grid-line\">Grid Line</ox-i18n> </label>\n\n <input\n id=\"y-axes1-ticks-display\"\n type=\"checkbox\"\n value-key=\"yAxes1.ticks.display\"\n ?checked=${configurer.yAxes1?.ticks?.display}\n />\n <label for=\"y-axes1-ticks-display\"> <ox-i18n msgid=\"label.display-tick\">Display Tick</ox-i18n> </label>\n `\n : html``}\n `\n }\n\n _hasBarSeries(config: any) {\n var hasBarSeries = false\n hasBarSeries = config.data.datasets?.some((s: any) => s.type == 'bar')\n\n return hasBarSeries\n }\n}\n"]}
|
|
@@ -3,9 +3,8 @@ import '@operato/input/ox-input-multiple-colors.js';
|
|
|
3
3
|
import { InputChartAbstract } from './input-chart-abstract';
|
|
4
4
|
export default class OxInputChartPie extends InputChartAbstract {
|
|
5
5
|
static styles: import("lit").CSSResult[];
|
|
6
|
-
getChartType(): 'bar' | 'line' | 'pie' | 'radar';
|
|
7
6
|
subTemplate(): import("lit-html").TemplateResult<1>;
|
|
8
|
-
getDefaultChartConfig(type:
|
|
7
|
+
getDefaultChartConfig(type: OperatoChart.ChartType, datasets?: OperatoChart.Dataset[]): OperatoChart.ChartConfig;
|
|
9
8
|
getDefaultDatasets(): OperatoChart.Dataset[];
|
|
10
|
-
getDefaultDataset(seriesType:
|
|
9
|
+
getDefaultDataset(seriesType: OperatoChart.ChartType): OperatoChart.Dataset;
|
|
11
10
|
}
|
|
@@ -6,9 +6,6 @@ import { customElement } from 'lit/decorators.js';
|
|
|
6
6
|
import { InputChartAbstract } from './input-chart-abstract';
|
|
7
7
|
let OxInputChartPie = class OxInputChartPie extends InputChartAbstract {
|
|
8
8
|
static { this.styles = InputChartAbstract.styles; }
|
|
9
|
-
getChartType() {
|
|
10
|
-
return 'pie';
|
|
11
|
-
}
|
|
12
9
|
subTemplate() {
|
|
13
10
|
const configurer = this.configurer;
|
|
14
11
|
return html `
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-chart-pie.js","sourceRoot":"","sources":["../../../src/editors/ox-input-chart-pie.ts"],"names":[],"mappings":";AAAA,OAAO,0BAA0B,CAAA;AACjC,OAAO,4CAA4C,CAAA;AAEnD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAGjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AAG5C,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,kBAAkB;aACtD,WAAM,GAAG,kBAAkB,CAAC,MAAM,AAA5B,CAA4B;IAEzC,
|
|
1
|
+
{"version":3,"file":"ox-input-chart-pie.js","sourceRoot":"","sources":["../../../src/editors/ox-input-chart-pie.ts"],"names":[],"mappings":";AAAA,OAAO,0BAA0B,CAAA;AACjC,OAAO,4CAA4C,CAAA;AAEnD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAGjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AAG5C,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,kBAAkB;aACtD,WAAM,GAAG,kBAAkB,CAAC,MAAM,AAA5B,CAA4B;IAEzC,WAAW;QACT,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAA;QAElC,OAAO,IAAI,CAAA;;;;2EAI4D,UAAU,CAAC,MAAM,CAAC,OAAO,IAAI,EAAE;;;;;;iBAMzF,UAAU,CAAC,KAAK,IAAI,EAAE;;;QAG/B,IAAI,CAAC,oBAAoB,EAAE;;;;;gFAK6C,UAAU,CAAC,YAAY,IAAI,EAAE;KACxG,CAAA;IACH,CAAC;IAED,qBAAqB,CAAC,IAA4B,EAAE,QAAiC;QACnF,OAAO;YACL,IAAI,EAAE,KAAK;YACX,IAAI,EAAE;gBACJ,MAAM,EAAE,EAAE;gBACV,QAAQ,EAAE,IAAI,CAAC,kBAAkB,EAAE;gBACnC,YAAY,EAAE,OAAO;aACtB;YACD,OAAO,EAAE;gBACP,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE;oBACN,OAAO,EAAE,IAAI;oBACb,QAAQ,EAAE,KAAK;iBAChB;aACF;SACF,CAAA;IACH,CAAC;IAED,kBAAkB;QAChB,OAAO,CAAC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAA;IACxC,CAAC;IAED,iBAAiB,CAAC,UAAkC;QAClD,OAAO;YACL,eAAe,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC;YAClD,WAAW,EAAE,CAAC;YACd,OAAO,EAAE,OAAO;SACjB,CAAA;IACH,CAAC;;AAxDkB,eAAe;IADnC,aAAa,CAAC,oBAAoB,CAAC;GACf,eAAe,CAyDnC;eAzDoB,eAAe","sourcesContent":["import '@operato/i18n/ox-i18n.js'\nimport '@operato/input/ox-input-multiple-colors.js'\n\nimport { html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { InputChartAbstract } from './input-chart-abstract'\n\n@customElement('ox-input-chart-pie')\nexport default class OxInputChartPie extends InputChartAbstract {\n static styles = InputChartAbstract.styles\n\n subTemplate() {\n const configurer = this.configurer\n\n return html`\n <legend><ox-i18n msgid=\"label.series\">Series</ox-i18n></legend>\n\n <label for=\"series-data-key\"> <ox-i18n msgid=\"label.data-key\">Data Key</ox-i18n> </label>\n <input id=\"series-data-key\" type=\"text\" value-key=\"dataKey\" .value=${configurer.series.dataKey || ''} />\n\n <label for=\"series-colors\"> <ox-i18n msgid=\"label.color\">Color</ox-i18n> </label>\n <ox-input-multiple-colors\n id=\"series-colors\"\n value-key=\"color\"\n .value=${configurer.color || []}\n ></ox-input-multiple-colors>\n\n ${this.displayValueTemplate()}\n\n <legend><ox-i18n msgid=\"label.axes\">Axes</ox-i18n></legend>\n\n <label for=\"series-data-key\"> <ox-i18n msgid=\"label.data-key\">Data Key</ox-i18n> </label>\n <input id=\"series-data-key\" type=\"text\" value-key=\"labelDataKey\" .value=${configurer.labelDataKey || ''} />\n `\n }\n\n getDefaultChartConfig(type: OperatoChart.ChartType, datasets?: OperatoChart.Dataset[]): OperatoChart.ChartConfig {\n return {\n type: 'pie',\n data: {\n labels: [],\n datasets: this.getDefaultDatasets(),\n labelDataKey: 'label'\n },\n options: {\n theme: 'dark',\n legend: {\n display: true,\n position: 'top'\n }\n }\n }\n }\n\n getDefaultDatasets(): OperatoChart.Dataset[] {\n return [this.getDefaultDataset('pie')]\n }\n\n getDefaultDataset(seriesType: OperatoChart.ChartType): OperatoChart.Dataset {\n return {\n backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],\n borderWidth: 0,\n dataKey: 'value'\n }\n }\n}\n"]}
|
|
@@ -2,7 +2,6 @@ import '@operato/i18n/ox-i18n.js';
|
|
|
2
2
|
import { InputChartMultiSeriesAbstract } from './input-chart-multi-series-abstract';
|
|
3
3
|
export default class OxInputChartRadar extends InputChartMultiSeriesAbstract {
|
|
4
4
|
static styles: import("lit").CSSResult[];
|
|
5
|
-
getChartType(): 'bar' | 'line' | 'pie' | 'radar';
|
|
6
5
|
subTemplate(): import("lit-html").TemplateResult<1>;
|
|
7
6
|
getDefaultDatasets(): OperatoChart.Dataset[];
|
|
8
7
|
}
|
|
@@ -6,9 +6,6 @@ import { ifDefined } from 'lit/directives/if-defined.js';
|
|
|
6
6
|
import { InputChartMultiSeriesAbstract } from './input-chart-multi-series-abstract';
|
|
7
7
|
let OxInputChartRadar = class OxInputChartRadar extends InputChartMultiSeriesAbstract {
|
|
8
8
|
static { this.styles = InputChartMultiSeriesAbstract.styles; }
|
|
9
|
-
getChartType() {
|
|
10
|
-
return 'radar';
|
|
11
|
-
}
|
|
12
9
|
subTemplate() {
|
|
13
10
|
const configurer = this.configurer;
|
|
14
11
|
return html `
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-chart-radar.js","sourceRoot":"","sources":["../../../src/editors/ox-input-chart-radar.ts"],"names":[],"mappings":";AAAA,OAAO,0BAA0B,CAAA;AAEjC,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAExD,OAAO,EAAE,6BAA6B,EAAE,MAAM,qCAAqC,CAAA;AAGpE,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,6BAA6B;aACnE,WAAM,GAAG,6BAA6B,CAAC,MAAM,AAAvC,CAAuC;IAEpD,
|
|
1
|
+
{"version":3,"file":"ox-input-chart-radar.js","sourceRoot":"","sources":["../../../src/editors/ox-input-chart-radar.ts"],"names":[],"mappings":";AAAA,OAAO,0BAA0B,CAAA;AAEjC,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAExD,OAAO,EAAE,6BAA6B,EAAE,MAAM,qCAAqC,CAAA;AAGpE,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,6BAA6B;aACnE,WAAM,GAAG,6BAA6B,CAAC,MAAM,AAAvC,CAAuC;IAEpD,WAAW;QACT,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAA;QAElC,OAAO,IAAI,CAAA;;;uBAGQ,IAAI,CAAC,sBAAsB,EAAE;;;;;+EAK2B,SAAS,CAAC,UAAU,CAAC,YAAY,CAAC;KAC5G,CAAA;IACH,CAAC;IAED,kBAAkB;QAChB,OAAO;YACL;gBACE,KAAK,EAAE,gBAAgB;gBACvB,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;gBAClB,eAAe,EAAE,yBAAyB;gBAC1C,WAAW,EAAE,uBAAuB;gBACpC,WAAW,EAAE,CAAC;gBACd,UAAU,EAAE,QAAQ;gBACpB,WAAW,EAAE,CAAC;aACf;YACD;gBACE,KAAK,EAAE,gBAAgB;gBACvB,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;gBAClB,eAAe,EAAE,yBAAyB;gBAC1C,WAAW,EAAE,uBAAuB;gBACpC,WAAW,EAAE,CAAC;gBACd,UAAU,EAAE,QAAQ;gBACpB,WAAW,EAAE,CAAC;aACf;SACF,CAAA;IACH,CAAC;;AAvCkB,iBAAiB;IADrC,aAAa,CAAC,sBAAsB,CAAC;GACjB,iBAAiB,CAwCrC;eAxCoB,iBAAiB","sourcesContent":["import '@operato/i18n/ox-i18n.js'\n\nimport { html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { InputChartMultiSeriesAbstract } from './input-chart-multi-series-abstract'\n\n@customElement('ox-input-chart-radar')\nexport default class OxInputChartRadar extends InputChartMultiSeriesAbstract {\n static styles = InputChartMultiSeriesAbstract.styles\n\n subTemplate() {\n const configurer = this.configurer\n\n return html`\n <legend><ox-i18n msgid=\"label.series\">Series</ox-i18n></legend>\n\n <div fullwidth>${this.multiSeriesTabTemplate()}</div>\n\n <legend><ox-i18n msgid=\"label.axes\">Axes</ox-i18n></legend>\n\n <label for=\"series-data-key\"> <ox-i18n msgid=\"label.data-key\">Data Key</ox-i18n> </label>\n <input id=\"series-data-key\" type=\"text\" value-key=\"labelDataKey\" value=${ifDefined(configurer.labelDataKey)} />\n `\n }\n\n getDefaultDatasets(): OperatoChart.Dataset[] {\n return [\n {\n label: 'Radar Series 1',\n data: [10, 20, 30],\n backgroundColor: 'rgba(255, 99, 132, 0.2)',\n borderColor: 'rgba(255, 99, 132, 1)',\n borderWidth: 1,\n pointStyle: 'circle',\n pointRadius: 3\n },\n {\n label: 'Radar Series 2',\n data: [15, 25, 35],\n backgroundColor: 'rgba(54, 162, 235, 0.2)',\n borderColor: 'rgba(54, 162, 235, 1)',\n borderWidth: 1,\n pointStyle: 'circle',\n pointRadius: 3\n }\n ]\n }\n}\n"]}
|
|
@@ -55,19 +55,21 @@ let ChartEditor = class ChartEditor extends OxPropertyEditor {
|
|
|
55
55
|
${!value
|
|
56
56
|
? html ``
|
|
57
57
|
: value.type == 'line'
|
|
58
|
-
? html ` <ox-input-chart-mixed .value=${value} fullwidth></ox-input-chart-mixed> `
|
|
58
|
+
? html ` <ox-input-chart-mixed .value=${value} chart-type="line" fullwidth></ox-input-chart-mixed> `
|
|
59
59
|
: value.type == 'horizontalBar'
|
|
60
|
-
? html ` <ox-input-chart-hbar .value=${value} fullwidth></ox-input-chart-hbar> `
|
|
60
|
+
? html ` <ox-input-chart-hbar .value=${value} chart-type="horizontalBar" fullwidth></ox-input-chart-hbar> `
|
|
61
61
|
: value.type == 'bar'
|
|
62
|
-
? html ` <ox-input-chart-mixed .value=${value} fullwidth></ox-input-chart-mixed> `
|
|
62
|
+
? html ` <ox-input-chart-mixed .value=${value} chart-type="bar" fullwidth></ox-input-chart-mixed> `
|
|
63
63
|
: value.type == 'pie'
|
|
64
|
-
? html ` <ox-input-chart-pie .value=${value} fullwidth></ox-input-chart-pie> `
|
|
64
|
+
? html ` <ox-input-chart-pie .value=${value} chart-type="pie" fullwidth></ox-input-chart-pie> `
|
|
65
65
|
: value.type == 'doughnut'
|
|
66
|
-
? html ` <ox-input-chart-pie .value=${value} fullwidth></ox-input-chart-pie> `
|
|
66
|
+
? html ` <ox-input-chart-pie .value=${value} chart-type="doughnut" fullwidth></ox-input-chart-pie> `
|
|
67
67
|
: value.type == 'polarArea'
|
|
68
|
-
? html ` <ox-input-chart-pie .value=${value} fullwidth></ox-input-chart-pie> `
|
|
68
|
+
? html ` <ox-input-chart-pie .value=${value} chart-type="polarArea" fullwidth></ox-input-chart-pie> `
|
|
69
69
|
: value.type == 'radar'
|
|
70
|
-
? html `
|
|
70
|
+
? html `
|
|
71
|
+
<ox-input-chart-radar .value=${value} chart-type="radar" fullwidth></ox-input-chart-radar>
|
|
72
|
+
`
|
|
71
73
|
: html ``}
|
|
72
74
|
`;
|
|
73
75
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-property-editor-chart.js","sourceRoot":"","sources":["../../../src/editors/ox-property-editor-chart.ts"],"names":[],"mappings":";AAAA,OAAO,0BAA0B,CAAA;AAEjC,OAAO,uBAAuB,CAAA;AAC9B,OAAO,wBAAwB,CAAA;AAC/B,OAAO,sBAAsB,CAAA;AAC7B,OAAO,wBAAwB,CAAA;AAE/B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,EAAE,gBAAgB,EAAgB,MAAM,0BAA0B,CAAA;AAGlE,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,gBAAgB;aACxC,WAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+BF;KACF,AAjCY,CAiCZ;IAED,cAAc,CAAC,KAAU,EAAE,IAAkB;QAC3C,OAAO,IAAI,CAAA;QACP,KAAK;YACL,CAAC,CAAC,IAAI,CAAA;;;0CAG4B,KAAK,CAAC,IAAI;;WAEzC;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;QACR,CAAC,KAAK;YACN,CAAC,CAAC,IAAI,CAAA,EAAE;YACR,CAAC,CAAC,KAAK,CAAC,IAAI,IAAI,MAAM;gBACpB,CAAC,CAAC,IAAI,CAAA,iCAAiC,KAAK,
|
|
1
|
+
{"version":3,"file":"ox-property-editor-chart.js","sourceRoot":"","sources":["../../../src/editors/ox-property-editor-chart.ts"],"names":[],"mappings":";AAAA,OAAO,0BAA0B,CAAA;AAEjC,OAAO,uBAAuB,CAAA;AAC9B,OAAO,wBAAwB,CAAA;AAC/B,OAAO,sBAAsB,CAAA;AAC7B,OAAO,wBAAwB,CAAA;AAE/B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,EAAE,gBAAgB,EAAgB,MAAM,0BAA0B,CAAA;AAGlE,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,gBAAgB;aACxC,WAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+BF;KACF,AAjCY,CAiCZ;IAED,cAAc,CAAC,KAAU,EAAE,IAAkB;QAC3C,OAAO,IAAI,CAAA;QACP,KAAK;YACL,CAAC,CAAC,IAAI,CAAA;;;0CAG4B,KAAK,CAAC,IAAI;;WAEzC;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;QACR,CAAC,KAAK;YACN,CAAC,CAAC,IAAI,CAAA,EAAE;YACR,CAAC,CAAC,KAAK,CAAC,IAAI,IAAI,MAAM;gBACpB,CAAC,CAAC,IAAI,CAAA,iCAAiC,KAAK,uDAAuD;gBACnG,CAAC,CAAC,KAAK,CAAC,IAAI,IAAI,eAAe;oBAC7B,CAAC,CAAC,IAAI,CAAA,gCAAgC,KAAK,+DAA+D;oBAC1G,CAAC,CAAC,KAAK,CAAC,IAAI,IAAI,KAAK;wBACnB,CAAC,CAAC,IAAI,CAAA,iCAAiC,KAAK,sDAAsD;wBAClG,CAAC,CAAC,KAAK,CAAC,IAAI,IAAI,KAAK;4BACnB,CAAC,CAAC,IAAI,CAAA,+BAA+B,KAAK,oDAAoD;4BAC9F,CAAC,CAAC,KAAK,CAAC,IAAI,IAAI,UAAU;gCACxB,CAAC,CAAC,IAAI,CAAA,+BAA+B,KAAK,yDAAyD;gCACnG,CAAC,CAAC,KAAK,CAAC,IAAI,IAAI,WAAW;oCACzB,CAAC,CAAC,IAAI,CAAA,+BAA+B,KAAK,0DAA0D;oCACpG,CAAC,CAAC,KAAK,CAAC,IAAI,IAAI,OAAO;wCACrB,CAAC,CAAC,IAAI,CAAA;yDAC6B,KAAK;yBACrC;wCACH,CAAC,CAAC,IAAI,CAAA,EAAE;KACzB,CAAA;IACH,CAAC;;AAlEU,WAAW;IADvB,aAAa,CAAC,0BAA0B,CAAC;GAC7B,WAAW,CAmEvB","sourcesContent":["import '@operato/i18n/ox-i18n.js'\n\nimport './ox-input-chart-hbar'\nimport './ox-input-chart-mixed'\nimport './ox-input-chart-pie'\nimport './ox-input-chart-radar'\n\nimport { css, html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { OxPropertyEditor, PropertySpec } from '@operato/property-editor'\n\n@customElement('ox-property-editor-chart')\nexport class ChartEditor extends OxPropertyEditor {\n static styles = [\n css`\n :host {\n display: block;\n padding: 5px;\n\n --md-elevated-button-container-height: 20px;\n }\n\n #chart-type {\n display: grid;\n grid-template-columns: repeat(10, 1fr);\n grid-gap: 5px;\n }\n\n #chart-type > label {\n box-sizing: border-box;\n grid-column: span 3;\n\n text-align: right;\n\n color: var(--md-sys-color-on-secondary-container);\n font-size: 0.8em;\n line-height: 2;\n text-transform: capitalize;\n }\n\n #chart-type > input {\n box-sizing: border-box;\n grid-column: span 7;\n border: 1px solid rgba(0, 0, 0, 0.2);\n }\n `\n ]\n\n editorTemplate(value: any, spec: PropertySpec) {\n return html`\n ${value\n ? html`\n <div id=\"chart-type\">\n <label> <ox-i18n msgid=\"label.chart-type\">Chart Type</ox-i18n> </label>\n <input type=\"text\" .value=${value.type} readonly />\n </div>\n `\n : html``}\n ${!value\n ? html``\n : value.type == 'line'\n ? html` <ox-input-chart-mixed .value=${value} chart-type=\"line\" fullwidth></ox-input-chart-mixed> `\n : value.type == 'horizontalBar'\n ? html` <ox-input-chart-hbar .value=${value} chart-type=\"horizontalBar\" fullwidth></ox-input-chart-hbar> `\n : value.type == 'bar'\n ? html` <ox-input-chart-mixed .value=${value} chart-type=\"bar\" fullwidth></ox-input-chart-mixed> `\n : value.type == 'pie'\n ? html` <ox-input-chart-pie .value=${value} chart-type=\"pie\" fullwidth></ox-input-chart-pie> `\n : value.type == 'doughnut'\n ? html` <ox-input-chart-pie .value=${value} chart-type=\"doughnut\" fullwidth></ox-input-chart-pie> `\n : value.type == 'polarArea'\n ? html` <ox-input-chart-pie .value=${value} chart-type=\"polarArea\" fullwidth></ox-input-chart-pie> `\n : value.type == 'radar'\n ? html`\n <ox-input-chart-radar .value=${value} chart-type=\"radar\" fullwidth></ox-input-chart-radar>\n `\n : html``}\n `\n }\n}\n"]}
|
package/dist/stories/common.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export declare function getDefaultChartConfig(type:
|
|
1
|
+
export declare function getDefaultChartConfig(type: OperatoChart.ChartType, datasets?: OperatoChart.Dataset[]): OperatoChart.ChartConfig;
|
|
2
2
|
export declare function getDefaultAxisOptions(): OperatoChart.AxisOptions;
|
|
3
3
|
export declare const data: {
|
|
4
4
|
year: number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"common.js","sourceRoot":"","sources":["../../stories/common.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,qBAAqB,CACnC,
|
|
1
|
+
{"version":3,"file":"common.js","sourceRoot":"","sources":["../../stories/common.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,qBAAqB,CACnC,IAA4B,EAC5B,QAAiC;IAEjC,OAAO;QACL,IAAI,EAAE;YACJ,QAAQ,EAAE,QAAQ,IAAI,EAAE;YACxB,YAAY,EAAE,EAAE;SACjB;QACD,OAAO,EAAE;YACP,KAAK,EAAE,OAAO;YACd,OAAO,EAAE,IAAI;YACb,SAAS,EAAE,IAAI;YACf,MAAM,EAAE;gBACN,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,KAAK;aAChB;YACD,MAAM,EAAE;gBACN,KAAK,EAAE,CAAC,qBAAqB,EAAE,CAAC;gBAChC,KAAK,EAAE,CAAC,qBAAqB,EAAE,EAAE,qBAAqB,EAAE,CAAC,CAAC,oCAAoC;aAC/F;YACD,OAAO,EAAE,KAAK;YACd,SAAS,EAAE,IAAI;YACf,SAAS,EAAE,IAAI;YACf,YAAY,EAAE,KAAK;YACnB,SAAS,EAAE,KAAK;SACjB;QACD,IAAI;KACL,CAAA;AACH,CAAC;AAED,MAAM,UAAU,qBAAqB;IACnC,OAAO;QACL,SAAS,EAAE,EAAE;QACb,UAAU,EAAE,CAAC;QACb,eAAe,EAAE,CAAC;QAClB,aAAa,EAAE,GAAG;QAClB,KAAK,EAAE;YACL,OAAO,EAAE,IAAI;YACb,OAAO,EAAE,IAAI;YACb,OAAO,EAAE,IAAI;YACb,GAAG,EAAE,SAAS;YACd,GAAG,EAAE,SAAS;YACd,QAAQ,EAAE,SAAS;SACpB;KACF,CAAA;AACH,CAAC;AAED,MAAM,CAAC,MAAM,IAAI,GAAG;IAClB,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE;IACvC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE;IACvC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE;IACtC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE;IACvC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE;IACvC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE;IACtC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE;CACvC,CAAA","sourcesContent":["export function getDefaultChartConfig(\n type: OperatoChart.ChartType,\n datasets?: OperatoChart.Dataset[]\n): OperatoChart.ChartConfig {\n return {\n data: {\n datasets: datasets || [],\n labelDataKey: ''\n },\n options: {\n theme: 'light',\n tooltip: true,\n animation: true,\n legend: {\n display: true,\n position: 'top'\n },\n scales: {\n xAxes: [getDefaultAxisOptions()],\n yAxes: [getDefaultAxisOptions(), getDefaultAxisOptions()] // Two y-axes for multi-axis support\n },\n stacked: false,\n xGridLine: true,\n yGridLine: true,\n y2ndGridLine: false,\n multiAxis: false\n },\n type\n }\n}\n\nexport function getDefaultAxisOptions(): OperatoChart.AxisOptions {\n return {\n axisTitle: '',\n barSpacing: 0,\n categorySpacing: 0,\n barPercentage: 0.9,\n ticks: {\n display: true,\n autoMin: true,\n autoMax: true,\n min: undefined,\n max: undefined,\n stepSize: undefined\n }\n }\n}\n\nexport const data = [\n { year: 2010, count: 10, average: 120 },\n { year: 2011, count: 20, average: 110 },\n { year: 2012, count: 15, average: 80 },\n { year: 2013, count: 25, average: 130 },\n { year: 2014, count: 22, average: 120 },\n { year: 2015, count: 30, average: 60 },\n { year: 2016, count: 28, average: 90 }\n]\n"]}
|
|
@@ -4,7 +4,7 @@ import '../src/chartjs/ox-chart-js.js';
|
|
|
4
4
|
import '../src/scichart/ox-scichart.js';
|
|
5
5
|
import { data, getDefaultChartConfig } from './common.js';
|
|
6
6
|
export default {
|
|
7
|
-
title: 'ox-input-chart-mixed',
|
|
7
|
+
title: 'ox-input-chart-mixed for bar',
|
|
8
8
|
component: 'ox-input-chart-mixed',
|
|
9
9
|
argTypes: {
|
|
10
10
|
value: { control: 'object' }
|
|
@@ -70,6 +70,7 @@ const Template = ({ value }) => html `
|
|
|
70
70
|
|
|
71
71
|
<div class="container light">
|
|
72
72
|
<ox-input-chart-mixed
|
|
73
|
+
chart-type="bar"
|
|
73
74
|
id="editor"
|
|
74
75
|
.value=${value}
|
|
75
76
|
@change=${(e) => {
|
|
@@ -110,7 +111,7 @@ Default.args = {};
|
|
|
110
111
|
export const WithData = Template.bind({});
|
|
111
112
|
WithData.args = {
|
|
112
113
|
value: {
|
|
113
|
-
...getDefaultChartConfig('
|
|
114
|
+
...getDefaultChartConfig('bar'),
|
|
114
115
|
data: {
|
|
115
116
|
datasets: [
|
|
116
117
|
{
|
|
@@ -147,9 +148,9 @@ WithData.args = {
|
|
|
147
148
|
export const MultiAxis = Template.bind({});
|
|
148
149
|
MultiAxis.args = {
|
|
149
150
|
value: {
|
|
150
|
-
...getDefaultChartConfig('
|
|
151
|
+
...getDefaultChartConfig('bar'),
|
|
151
152
|
options: {
|
|
152
|
-
...getDefaultChartConfig('
|
|
153
|
+
...getDefaultChartConfig('bar').options,
|
|
153
154
|
multiAxis: true
|
|
154
155
|
},
|
|
155
156
|
data: {
|
|
@@ -180,4 +181,4 @@ MultiAxis.args = {
|
|
|
180
181
|
}
|
|
181
182
|
}
|
|
182
183
|
};
|
|
183
|
-
//# sourceMappingURL=ox-input-chart-
|
|
184
|
+
//# sourceMappingURL=ox-input-chart-bar.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ox-input-chart-bar.stories.js","sourceRoot":"","sources":["../../stories/ox-input-chart-bar.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, TemplateResult } from 'lit'\n\nimport '../src/editors/ox-input-chart-mixed.js'\nimport '../src/chartjs/ox-chart-js.js'\nimport '../src/scichart/ox-scichart.js'\n\nimport { data, getDefaultChartConfig } from './common.js'\n\nexport default {\n title: 'ox-input-chart-mixed for bar',\n component: 'ox-input-chart-mixed',\n argTypes: {\n value: { control: 'object' }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n value: OperatoChart.ChartConfig\n}\n\nconst Template: Story<ArgTypes> = ({ value }: ArgTypes) => html`\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n <style>\n .container {\n width: 100%;\n height: 100%;\n\n display: flex;\n flex-direction: row;\n overflow-y: auto;\n padding: var(--spacing-medium);\n }\n\n .container.dark {\n background-color: black;\n }\n\n #editor {\n width: 300px;\n }\n\n #charts {\n flex: 1;\n\n display: flex;\n flex-direction: column;\n padding: 10px;\n }\n\n #chartjs {\n flex: 1;\n }\n\n #scichart {\n flex: 1;\n }\n </style>\n\n <div style=\"background-color: black; color: white;\">\n Type 'count' or 'average' for series dataKey, type 'year' for axis's dataKey\n </div>\n\n <div class=\"container light\">\n <ox-input-chart-mixed\n chart-type=\"bar\"\n id=\"editor\"\n .value=${value}\n @change=${(e: CustomEvent) => {\n const target = e.currentTarget as any\n const config = target.value\n const chartjs = document.querySelector('#chartjs') as HTMLElement\n if (chartjs) {\n ;(chartjs as any).config = { ...config }\n }\n const scichart = document.querySelector('#scichart') as HTMLElement\n if (scichart) {\n ;(scichart as any).config = config\n }\n\n const container = document.querySelector('.container') as HTMLElement\n if (container) {\n const theme = config.options.theme\n if (theme == 'dark') {\n container.classList.remove('light')\n container.classList.add('dark')\n } else {\n container.classList.remove('dark')\n container.classList.add('light')\n }\n }\n }}\n ></ox-input-chart-mixed>\n <div id=\"charts\">\n <ox-chart-js id=\"chartjs\" .data=${data}></ox-chart-js>\n <ox-scichart id=\"scichart\"></ox-scichart>\n </div>\n </div>\n`\n\nexport const Default = Template.bind({})\nDefault.args = {}\n\nexport const WithData = Template.bind({})\nWithData.args = {\n value: {\n ...getDefaultChartConfig('bar'),\n data: {\n datasets: [\n {\n label: 'Bar Series',\n type: 'bar',\n data: [10, 20, 30],\n backgroundColor: 'rgba(255, 99, 132, 0.2)',\n borderColor: 'rgba(255, 99, 132, 1)',\n borderWidth: 1\n },\n {\n label: 'Line Series',\n type: 'line',\n data: [15, 25, 35],\n borderColor: 'rgba(54, 162, 235, 1)',\n borderWidth: 1,\n fill: false,\n lineTension: 0.4,\n pointStyle: 'circle',\n pointRadius: 3\n }\n ],\n labelDataKey: 'labels'\n },\n options: {\n scales: {\n xAxes: [{ ticks: { beginAtZero: true } }],\n yAxes: [{ ticks: { beginAtZero: true } }]\n },\n legend: { display: true }\n }\n }\n}\n\nexport const MultiAxis = Template.bind({})\nMultiAxis.args = {\n value: {\n ...getDefaultChartConfig('bar'),\n options: {\n ...getDefaultChartConfig('bar').options,\n multiAxis: true\n },\n data: {\n datasets: [\n {\n label: 'Bar Series',\n type: 'bar',\n data: [10, 20, 30],\n backgroundColor: 'rgba(255, 99, 132, 0.2)',\n borderColor: 'rgba(255, 99, 132, 1)',\n borderWidth: 1,\n yAxisID: 'left'\n },\n {\n label: 'Line Series',\n type: 'line',\n data: [15, 25, 35],\n borderColor: 'rgba(54, 162, 235, 1)',\n borderWidth: 1,\n fill: false,\n lineTension: 0.4,\n pointStyle: 'circle',\n pointRadius: 3,\n yAxisID: 'right'\n }\n ],\n labelDataKey: 'labels'\n }\n }\n}\n"]}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { TemplateResult } from 'lit';
|
|
2
|
+
import '../src/editors/ox-input-chart-pie.js';
|
|
3
|
+
import '../src/chartjs/ox-chart-js.js';
|
|
4
|
+
declare const _default: {
|
|
5
|
+
title: string;
|
|
6
|
+
component: string;
|
|
7
|
+
argTypes: {
|
|
8
|
+
value: {
|
|
9
|
+
control: string;
|
|
10
|
+
};
|
|
11
|
+
currentSeriesIndex: {
|
|
12
|
+
control: string;
|
|
13
|
+
};
|
|
14
|
+
};
|
|
15
|
+
};
|
|
16
|
+
export default _default;
|
|
17
|
+
interface Story<T> {
|
|
18
|
+
(args: T): TemplateResult;
|
|
19
|
+
args?: Partial<T>;
|
|
20
|
+
argTypes?: Record<string, unknown>;
|
|
21
|
+
}
|
|
22
|
+
interface ArgTypes {
|
|
23
|
+
value: OperatoChart.ChartConfig;
|
|
24
|
+
currentSeriesIndex: number;
|
|
25
|
+
}
|
|
26
|
+
export declare const Default: Story<ArgTypes>;
|
|
27
|
+
export declare const WithData: Story<ArgTypes>;
|
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
import { html } from 'lit';
|
|
2
|
+
import '../src/editors/ox-input-chart-pie.js';
|
|
3
|
+
import '../src/chartjs/ox-chart-js.js';
|
|
4
|
+
import { data, getDefaultChartConfig } from './common.js';
|
|
5
|
+
export default {
|
|
6
|
+
title: 'ox-input-chart-pie for doughnut',
|
|
7
|
+
component: 'ox-input-chart-pie',
|
|
8
|
+
argTypes: {
|
|
9
|
+
value: { control: 'object' },
|
|
10
|
+
currentSeriesIndex: { control: 'number' }
|
|
11
|
+
}
|
|
12
|
+
};
|
|
13
|
+
const Template = ({ value, currentSeriesIndex }) => html `
|
|
14
|
+
<link
|
|
15
|
+
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
|
|
16
|
+
rel="stylesheet"
|
|
17
|
+
/>
|
|
18
|
+
<link
|
|
19
|
+
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
|
|
20
|
+
rel="stylesheet"
|
|
21
|
+
/>
|
|
22
|
+
<link
|
|
23
|
+
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
|
|
24
|
+
rel="stylesheet"
|
|
25
|
+
/>
|
|
26
|
+
|
|
27
|
+
<link href="/themes/light.css" rel="stylesheet" />
|
|
28
|
+
<link href="/themes/dark.css" rel="stylesheet" />
|
|
29
|
+
<link href="/themes/spacing.css" rel="stylesheet" />
|
|
30
|
+
|
|
31
|
+
<style>
|
|
32
|
+
.container {
|
|
33
|
+
width: 100%;
|
|
34
|
+
height: 100%;
|
|
35
|
+
|
|
36
|
+
display: flex;
|
|
37
|
+
flex-direction: row;
|
|
38
|
+
overflow-y: auto;
|
|
39
|
+
padding: var(--spacing-medium);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.container.dark {
|
|
43
|
+
background-color: black;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
#editor {
|
|
47
|
+
width: 300px;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
#chart {
|
|
51
|
+
flex: 1;
|
|
52
|
+
}
|
|
53
|
+
</style>
|
|
54
|
+
|
|
55
|
+
<div style="background-color: black; color: white;">
|
|
56
|
+
Type 'count' or 'average' for series dataKey, type 'year' for axis's dataKey
|
|
57
|
+
</div>
|
|
58
|
+
|
|
59
|
+
<div class="container light">
|
|
60
|
+
<ox-input-chart-pie
|
|
61
|
+
chart-type="doughnut"
|
|
62
|
+
id="editor"
|
|
63
|
+
.value=${value}
|
|
64
|
+
@change=${(e) => {
|
|
65
|
+
const target = e.currentTarget;
|
|
66
|
+
const config = target.value;
|
|
67
|
+
const chartjs = document.querySelector('#chartjs');
|
|
68
|
+
if (chartjs) {
|
|
69
|
+
;
|
|
70
|
+
chartjs.config = { ...config };
|
|
71
|
+
}
|
|
72
|
+
const container = document.querySelector('.container');
|
|
73
|
+
if (container) {
|
|
74
|
+
const theme = config.options.theme;
|
|
75
|
+
if (theme == 'dark') {
|
|
76
|
+
container.classList.remove('light');
|
|
77
|
+
container.classList.add('dark');
|
|
78
|
+
}
|
|
79
|
+
else {
|
|
80
|
+
container.classList.remove('dark');
|
|
81
|
+
container.classList.add('light');
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
}}
|
|
85
|
+
></ox-input-chart-pie>
|
|
86
|
+
<ox-chart-js id="chartjs" .data=${data}></ox-chart-js>
|
|
87
|
+
</div>
|
|
88
|
+
`;
|
|
89
|
+
export const Default = Template.bind({});
|
|
90
|
+
Default.args = {
|
|
91
|
+
currentSeriesIndex: 0
|
|
92
|
+
};
|
|
93
|
+
export const WithData = Template.bind({});
|
|
94
|
+
WithData.args = {
|
|
95
|
+
value: {
|
|
96
|
+
...getDefaultChartConfig('doughnut'),
|
|
97
|
+
data: {
|
|
98
|
+
datasets: [
|
|
99
|
+
{
|
|
100
|
+
label: 'Doughnut Series',
|
|
101
|
+
data: [10, 20, 30],
|
|
102
|
+
backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(75, 192, 192, 0.2)'],
|
|
103
|
+
borderColor: ['rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(75, 192, 192, 1)'],
|
|
104
|
+
borderWidth: 1
|
|
105
|
+
}
|
|
106
|
+
],
|
|
107
|
+
labelDataKey: 'labels'
|
|
108
|
+
},
|
|
109
|
+
options: {
|
|
110
|
+
legend: { display: true }
|
|
111
|
+
}
|
|
112
|
+
},
|
|
113
|
+
currentSeriesIndex: 0
|
|
114
|
+
};
|
|
115
|
+
//# sourceMappingURL=ox-input-chart-doughnut.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ox-input-chart-doughnut.stories.js","sourceRoot":"","sources":["../../stories/ox-input-chart-doughnut.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,OAAO,sCAAsC,CAAA;AAC7C,OAAO,+BAA+B,CAAA;AAEtC,OAAO,EAAE,IAAI,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAA;AAEzD,eAAe;IACb,KAAK,EAAE,iCAAiC;IACxC,SAAS,EAAE,oBAAoB;IAC/B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,kBAAkB,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;KAC1C;CACF,CAAA;AAaD,MAAM,QAAQ,GAAoB,CAAC,EAAE,KAAK,EAAE,kBAAkB,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eAkDpE,KAAK;gBACJ,CAAC,CAAc,EAAE,EAAE;IAC3B,MAAM,MAAM,GAAG,CAAC,CAAC,aAAoB,CAAA;IACrC,MAAM,MAAM,GAAG,MAAM,CAAC,KAAK,CAAA;IAC3B,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAgB,CAAA;IACjE,IAAI,OAAO,EAAE,CAAC;QACZ,CAAC;QAAC,OAAe,CAAC,MAAM,GAAG,EAAE,GAAG,MAAM,EAAE,CAAA;IAC1C,CAAC;IAED,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,YAAY,CAAgB,CAAA;IACrE,IAAI,SAAS,EAAE,CAAC;QACd,MAAM,KAAK,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAA;QAClC,IAAI,KAAK,IAAI,MAAM,EAAE,CAAC;YACpB,SAAS,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;YACnC,SAAS,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAA;QACjC,CAAC;aAAM,CAAC;YACN,SAAS,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAA;YAClC,SAAS,CAAC,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;QAClC,CAAC;IACH,CAAC;AACH,CAAC;;sCAE+B,IAAI;;CAEzC,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,kBAAkB,EAAE,CAAC;CACtB,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACzC,QAAQ,CAAC,IAAI,GAAG;IACd,KAAK,EAAE;QACL,GAAG,qBAAqB,CAAC,UAAU,CAAC;QACpC,IAAI,EAAE;YACJ,QAAQ,EAAE;gBACR;oBACE,KAAK,EAAE,iBAAiB;oBACxB,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;oBAClB,eAAe,EAAE,CAAC,yBAAyB,EAAE,yBAAyB,EAAE,yBAAyB,CAAC;oBAClG,WAAW,EAAE,CAAC,uBAAuB,EAAE,uBAAuB,EAAE,uBAAuB,CAAC;oBACxF,WAAW,EAAE,CAAC;iBACf;aACF;YACD,YAAY,EAAE,QAAQ;SACvB;QACD,OAAO,EAAE;YACP,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;SAC1B;KACF;IACD,kBAAkB,EAAE,CAAC;CACtB,CAAA","sourcesContent":["import { html, TemplateResult } from 'lit'\n\nimport '../src/editors/ox-input-chart-pie.js'\nimport '../src/chartjs/ox-chart-js.js'\n\nimport { data, getDefaultChartConfig } from './common.js'\n\nexport default {\n title: 'ox-input-chart-pie for doughnut',\n component: 'ox-input-chart-pie',\n argTypes: {\n value: { control: 'object' },\n currentSeriesIndex: { control: 'number' }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n value: OperatoChart.ChartConfig\n currentSeriesIndex: number\n}\n\nconst Template: Story<ArgTypes> = ({ value, currentSeriesIndex }: ArgTypes) => html`\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n <style>\n .container {\n width: 100%;\n height: 100%;\n\n display: flex;\n flex-direction: row;\n overflow-y: auto;\n padding: var(--spacing-medium);\n }\n\n .container.dark {\n background-color: black;\n }\n\n #editor {\n width: 300px;\n }\n\n #chart {\n flex: 1;\n }\n </style>\n\n <div style=\"background-color: black; color: white;\">\n Type 'count' or 'average' for series dataKey, type 'year' for axis's dataKey\n </div>\n\n <div class=\"container light\">\n <ox-input-chart-pie\n chart-type=\"doughnut\"\n id=\"editor\"\n .value=${value}\n @change=${(e: CustomEvent) => {\n const target = e.currentTarget as any\n const config = target.value\n const chartjs = document.querySelector('#chartjs') as HTMLElement\n if (chartjs) {\n ;(chartjs as any).config = { ...config }\n }\n\n const container = document.querySelector('.container') as HTMLElement\n if (container) {\n const theme = config.options.theme\n if (theme == 'dark') {\n container.classList.remove('light')\n container.classList.add('dark')\n } else {\n container.classList.remove('dark')\n container.classList.add('light')\n }\n }\n }}\n ></ox-input-chart-pie>\n <ox-chart-js id=\"chartjs\" .data=${data}></ox-chart-js>\n </div>\n`\n\nexport const Default = Template.bind({})\nDefault.args = {\n currentSeriesIndex: 0\n}\n\nexport const WithData = Template.bind({})\nWithData.args = {\n value: {\n ...getDefaultChartConfig('doughnut'),\n data: {\n datasets: [\n {\n label: 'Doughnut Series',\n data: [10, 20, 30],\n backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(75, 192, 192, 0.2)'],\n borderColor: ['rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(75, 192, 192, 1)'],\n borderWidth: 1\n }\n ],\n labelDataKey: 'labels'\n },\n options: {\n legend: { display: true }\n }\n },\n currentSeriesIndex: 0\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-chart-hbar.stories.js","sourceRoot":"","sources":["../../stories/ox-input-chart-hbar.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,OAAO,uCAAuC,CAAA;AAC9C,OAAO,+BAA+B,CAAA;AACtC,OAAO,gCAAgC,CAAA;AAEvC,OAAO,EAAE,IAAI,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAA;AAEzD,eAAe;IACb,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,qBAAqB;IAChC,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;KAC7B;CACF,CAAA;AAYD,MAAM,QAAQ,GAAoB,CAAC,EAAE,KAAK,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA
|
|
1
|
+
{"version":3,"file":"ox-input-chart-hbar.stories.js","sourceRoot":"","sources":["../../stories/ox-input-chart-hbar.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, TemplateResult } from 'lit'\n\nimport '../src/editors/ox-input-chart-hbar.js'\nimport '../src/chartjs/ox-chart-js.js'\nimport '../src/scichart/ox-scichart.js'\n\nimport { data, getDefaultChartConfig } from './common.js'\n\nexport default {\n title: 'ox-input-chart-hbar',\n component: 'ox-input-chart-hbar',\n argTypes: {\n value: { control: 'object' }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n value: OperatoChart.ChartConfig\n}\n\nconst Template: Story<ArgTypes> = ({ value }: ArgTypes) => html`\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n <style>\n .container {\n width: 100%;\n height: 100%;\n\n display: flex;\n flex-direction: row;\n overflow-y: auto;\n padding: var(--spacing-medium);\n }\n\n .container.dark {\n background-color: black;\n }\n\n #editor {\n width: 300px;\n }\n\n #charts {\n flex: 1;\n\n display: flex;\n flex-direction: column;\n padding: 10px;\n }\n\n #chartjs {\n flex: 1;\n }\n\n #scichart {\n flex: 1;\n }\n </style>\n\n <div style=\"background-color: black; color: white;\">\n Type 'count' or 'average' for series dataKey, type 'year' for axis's dataKey\n </div>\n <div class=\"container light\">\n <ox-input-chart-hbar\n chart-type=\"horizontalBar\"\n id=\"editor\"\n .value=${value}\n @change=${async (e: CustomEvent) => {\n const target = e.currentTarget as any\n const config = target.value\n const chartjs = document.querySelector('#chartjs') as HTMLElement\n if (chartjs) {\n ;(chartjs as any).config = { ...config }\n }\n const scichart = document.querySelector('#scichart') as HTMLElement\n if (scichart) {\n ;(scichart as any).config = config\n }\n\n const container = document.querySelector('.container') as HTMLElement\n if (container) {\n const theme = config.options.theme\n if (theme == 'dark') {\n container.classList.remove('light')\n container.classList.add('dark')\n } else {\n container.classList.remove('dark')\n container.classList.add('light')\n }\n }\n }}\n ></ox-input-chart-hbar>\n <div id=\"charts\">\n <ox-chart-js id=\"chartjs\" .data=${data}></ox-chart-js>\n <ox-scichart id=\"scichart\"></ox-scichart>\n </div>\n </div>\n`\n\nexport const Default = Template.bind({})\nDefault.args = {}\n\n// 다양한 데이터셋과 함께 사용하는 스토리\nexport const WithData = Template.bind({})\nWithData.args = {\n value: {\n ...getDefaultChartConfig('bar'),\n data: {\n datasets: [\n {\n label: 'Series 1',\n data: [10, 20, 30],\n backgroundColor: 'rgba(255, 99, 132, 0.2)',\n borderColor: 'rgba(255, 99, 132, 1)',\n borderWidth: 1\n },\n {\n label: 'Series 2',\n data: [15, 25, 35],\n backgroundColor: 'rgba(54, 162, 235, 0.2)',\n borderColor: 'rgba(54, 162, 235, 1)',\n borderWidth: 1\n }\n ],\n labelDataKey: 'labels'\n },\n options: {\n scales: {\n xAxes: [{ ticks: { beginAtZero: true } }],\n yAxes: [{ ticks: { beginAtZero: true } }]\n },\n legend: { display: true }\n }\n }\n}\n\nexport const MultiAxis = Template.bind({})\nMultiAxis.args = {\n value: {\n ...getDefaultChartConfig('bar'),\n options: {\n ...getDefaultChartConfig('bar').options,\n multiAxis: true\n },\n data: {\n datasets: [\n {\n label: 'Series 1',\n data: [10, 20, 30],\n backgroundColor: 'rgba(255, 99, 132, 0.2)',\n borderColor: 'rgba(255, 99, 132, 1)',\n borderWidth: 1,\n yAxisID: 'left'\n },\n {\n label: 'Series 2',\n data: [15, 25, 35],\n backgroundColor: 'rgba(54, 162, 235, 0.2)',\n borderColor: 'rgba(54, 162, 235, 1)',\n borderWidth: 1,\n yAxisID: 'right'\n }\n ],\n labelDataKey: 'labels'\n }\n }\n}\n"]}
|