@operato/chart 9.0.0-beta.5 → 9.0.0-beta.52
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 +259 -0
- package/dist/src/chartjs/config-converter.d.ts +1 -0
- package/dist/src/chartjs/config-converter.js.map +1 -1
- package/dist/src/chartjs/ox-chart-js.d.ts +3 -2
- package/dist/src/chartjs/ox-chart-js.js.map +1 -1
- package/dist/src/editors/configurer.d.ts +3 -2
- package/dist/src/editors/configurer.js.map +1 -1
- package/dist/src/editors/input-chart-abstract.d.ts +2 -1
- package/dist/src/editors/input-chart-abstract.js +1 -1
- package/dist/src/editors/input-chart-abstract.js.map +1 -1
- package/dist/src/editors/input-chart-styles.js +12 -11
- package/dist/src/editors/input-chart-styles.js.map +1 -1
- package/dist/src/editors/ox-input-chart-hbar.d.ts +1 -0
- package/dist/src/editors/ox-input-chart-hbar.js.map +1 -1
- package/dist/src/editors/ox-input-chart-pie.d.ts +1 -0
- package/dist/src/editors/ox-input-chart-pie.js.map +1 -1
- package/dist/src/editors/ox-input-chart-radar.d.ts +1 -0
- package/dist/src/editors/ox-input-chart-radar.js.map +1 -1
- package/dist/src/editors/ox-input-chart-timeseries.js +1 -1
- package/dist/src/editors/ox-input-chart-timeseries.js.map +1 -1
- package/dist/src/editors/ox-property-editor-chart.js +3 -3
- package/dist/src/editors/ox-property-editor-chart.js.map +1 -1
- package/dist/src/editors/templates/annotations.d.ts +1 -0
- package/dist/src/editors/templates/annotations.js.map +1 -1
- package/dist/src/editors/templates/series.d.ts +1 -0
- package/dist/src/editors/templates/series.js.map +1 -1
- package/dist/src/index.d.ts +1 -0
- package/dist/src/index.js +2 -1
- package/dist/src/index.js.map +1 -1
- package/dist/src/scichart/ox-scichart.d.ts +3 -2
- package/dist/src/scichart/ox-scichart.js.map +1 -1
- package/dist/src/scichart/scichart-builder.d.ts +1 -0
- package/dist/src/scichart/scichart-builder.js.map +1 -1
- package/dist/stories/common.d.ts +1 -0
- package/dist/stories/common.js.map +1 -1
- package/dist/stories/ox-input-chart-bar.stories.d.ts +1 -0
- package/dist/stories/ox-input-chart-bar.stories.js.map +1 -1
- package/dist/stories/ox-input-chart-doughnut.stories.d.ts +1 -0
- package/dist/stories/ox-input-chart-doughnut.stories.js.map +1 -1
- package/dist/stories/ox-input-chart-hbar.stories.d.ts +1 -0
- package/dist/stories/ox-input-chart-hbar.stories.js.map +1 -1
- package/dist/stories/ox-input-chart-line.stories.d.ts +1 -0
- package/dist/stories/ox-input-chart-line.stories.js.map +1 -1
- package/dist/stories/ox-input-chart-pie.stories.d.ts +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 +1 -0
- package/dist/stories/ox-input-chart-polar-area.stories.js.map +1 -1
- package/dist/stories/ox-input-chart-radar.stories.d.ts +1 -0
- package/dist/stories/ox-input-chart-radar.stories.js.map +1 -1
- package/dist/stories/ox-input-chart-timeseries.stories.d.ts +1 -0
- package/dist/stories/ox-input-chart-timeseries.stories.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +13 -7
- package/types/types.d.ts +1 -1
|
@@ -2,7 +2,7 @@ import { css } from 'lit';
|
|
|
2
2
|
export const InputChartStyles = css `
|
|
3
3
|
:host {
|
|
4
4
|
display: grid;
|
|
5
|
-
grid-template-columns: repeat(
|
|
5
|
+
grid-template-columns: repeat(24, 1fr);
|
|
6
6
|
grid-gap: 5px;
|
|
7
7
|
|
|
8
8
|
background-color: var(--ox-input-background-color, var(--md-sys-color-surface));
|
|
@@ -11,12 +11,12 @@ export const InputChartStyles = css `
|
|
|
11
11
|
|
|
12
12
|
:host > * {
|
|
13
13
|
box-sizing: border-box;
|
|
14
|
-
grid-column:
|
|
14
|
+
grid-column: 9 / -1;
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
:host > label {
|
|
18
18
|
box-sizing: border-box;
|
|
19
|
-
grid-column:
|
|
19
|
+
grid-column: 1 / 9;
|
|
20
20
|
}
|
|
21
21
|
|
|
22
22
|
:host > legend {
|
|
@@ -107,18 +107,18 @@ export const InputChartStyles = css `
|
|
|
107
107
|
border-width: 0 1px 1px 1px;
|
|
108
108
|
padding: 5px;
|
|
109
109
|
display: grid;
|
|
110
|
-
grid-template-columns: repeat(
|
|
110
|
+
grid-template-columns: repeat(24, 1fr);
|
|
111
111
|
grid-gap: 5px;
|
|
112
112
|
}
|
|
113
113
|
|
|
114
114
|
.tab-content > * {
|
|
115
115
|
box-sizing: border-box;
|
|
116
|
-
grid-column:
|
|
116
|
+
grid-column: 9 / -1;
|
|
117
117
|
}
|
|
118
118
|
|
|
119
119
|
label,
|
|
120
120
|
.tab-content > label {
|
|
121
|
-
grid-column:
|
|
121
|
+
grid-column: 1 / 9;
|
|
122
122
|
text-align: right;
|
|
123
123
|
color: var(--md-sys-color-on-secondary-container);
|
|
124
124
|
font-size: 0.8em;
|
|
@@ -130,18 +130,19 @@ export const InputChartStyles = css `
|
|
|
130
130
|
select {
|
|
131
131
|
border: 1px solid rgba(0, 0, 0, 0.2);
|
|
132
132
|
border-radius: var(--spacing-small);
|
|
133
|
+
background-color: field;
|
|
133
134
|
}
|
|
134
135
|
|
|
135
136
|
input[type='checkbox'],
|
|
136
137
|
.tab-content > input[type='checkbox'] {
|
|
137
|
-
grid-column:
|
|
138
|
+
grid-column: 9 / 11;
|
|
138
139
|
justify-self: end;
|
|
139
140
|
align-self: center;
|
|
140
141
|
}
|
|
141
142
|
|
|
142
143
|
input[type='checkbox'] + label,
|
|
143
144
|
.tab-content > input[type='checkbox'] + label {
|
|
144
|
-
grid-column:
|
|
145
|
+
grid-column: 12 / -1;
|
|
145
146
|
|
|
146
147
|
text-align: left;
|
|
147
148
|
}
|
|
@@ -178,7 +179,7 @@ export const InputChartStyles = css `
|
|
|
178
179
|
|
|
179
180
|
#display-value-container {
|
|
180
181
|
display: grid;
|
|
181
|
-
grid-template-columns: repeat(
|
|
182
|
+
grid-template-columns: repeat(24, 1fr);
|
|
182
183
|
grid-gap: 5px;
|
|
183
184
|
|
|
184
185
|
background-color: var(--ox-input-background-color, var(--md-sys-color-surface));
|
|
@@ -187,12 +188,12 @@ export const InputChartStyles = css `
|
|
|
187
188
|
|
|
188
189
|
#display-value-container > * {
|
|
189
190
|
box-sizing: border-box;
|
|
190
|
-
grid-column:
|
|
191
|
+
grid-column: 9 / -1;
|
|
191
192
|
}
|
|
192
193
|
|
|
193
194
|
#display-value-container > label {
|
|
194
195
|
box-sizing: border-box;
|
|
195
|
-
grid-column:
|
|
196
|
+
grid-column: 1 / 9;
|
|
196
197
|
}
|
|
197
198
|
|
|
198
199
|
#display-value-container > legend {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input-chart-styles.js","sourceRoot":"","sources":["../../../src/editors/input-chart-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"input-chart-styles.js","sourceRoot":"","sources":["../../../src/editors/input-chart-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4MlC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const InputChartStyles = css`\n :host {\n display: grid;\n grid-template-columns: repeat(24, 1fr);\n grid-gap: 5px;\n\n background-color: var(--ox-input-background-color, var(--md-sys-color-surface));\n color: var(--ox-input-color, var(--md-sys-color-on-surface));\n }\n\n :host > * {\n box-sizing: border-box;\n grid-column: 9 / -1;\n }\n\n :host > label {\n box-sizing: border-box;\n grid-column: 1 / 9;\n }\n\n :host > legend {\n box-sizing: border-box;\n grid-column: 1 / -1;\n color: var(--md-sys-color-on-secondary-container, #e46c2e);\n font: var(--property-sidebar-fieldset-legend, bold 13px var(--theme-font));\n text-transform: capitalize;\n }\n\n #series-properties-container,\n #annotations-properties-container {\n display: grid;\n grid-template-columns: 1fr 25px;\n align-items: center;\n justify-content: center;\n }\n\n #series-properties-container > [tab-content],\n #annotations-properties-container > [tab-content] {\n grid-column: span 2;\n }\n\n #series-tab-header,\n #annotations-tab-header {\n display: grid;\n grid-template-columns: 25px 1fr 25px;\n grid-gap: 5px;\n overflow: hidden;\n border: 1px solid rgba(0, 0, 0, 0.2);\n border-bottom: 0;\n background-color: var(--md-sys-color-surface-variant);\n color: var(--md-sys-color-on-surface);\n box-sizing: border-box;\n padding-top: 3px;\n align-items: center;\n }\n\n #series-tab-header > div,\n #annotations-tab-header > div {\n height: 25px;\n }\n\n #series-tab-header md-icon[disabled],\n #annotations-tab-header md-icon[disabled] {\n opacity: 0.1;\n }\n\n #series-tabs,\n #annotations-tabs {\n display: flex;\n overflow: hidden;\n }\n\n #series-tab-header #series-tabs [tab] md-icon,\n #annotations-tab-header #annotations-tabs [tab] md-icon {\n margin-left: auto;\n padding: 2px;\n color: var(--md-sys-color-on-surface);\n\n --md-icon-size: 12px;\n }\n\n #add-series-button-container,\n #add-annotation-button-container {\n height: 100%;\n box-sizing: border-box;\n align-items: center;\n justify-content: center;\n padding-top: 3px;\n display: flex;\n border-bottom: rgba(0, 0, 0, 0.2) 1px solid;\n }\n\n #add-series-button,\n #add-annotation-button {\n width: 20px;\n height: 20px;\n padding: 0;\n color: var(--md-sys-color-on-secondary-container);\n }\n\n .tab-content {\n grid-column: 1 / -1;\n\n background-color: rgba(255, 255, 255, 0.5);\n border: 1px solid rgba(0, 0, 0, 0.2);\n border-width: 0 1px 1px 1px;\n padding: 5px;\n display: grid;\n grid-template-columns: repeat(24, 1fr);\n grid-gap: 5px;\n }\n\n .tab-content > * {\n box-sizing: border-box;\n grid-column: 9 / -1;\n }\n\n label,\n .tab-content > label {\n grid-column: 1 / 9;\n text-align: right;\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 input,\n select {\n border: 1px solid rgba(0, 0, 0, 0.2);\n border-radius: var(--spacing-small);\n background-color: field;\n }\n\n input[type='checkbox'],\n .tab-content > input[type='checkbox'] {\n grid-column: 9 / 11;\n justify-self: end;\n align-self: center;\n }\n\n input[type='checkbox'] + label,\n .tab-content > input[type='checkbox'] + label {\n grid-column: 12 / -1;\n\n text-align: left;\n }\n\n [fullwidth] {\n grid-column: 1 / -1;\n margin: 0;\n border: 0;\n }\n\n div[tab] {\n display: flex;\n align-items: center;\n background-color: rgba(0, 0, 0, 0.2);\n border-width: 1px 1px 0 1px;\n padding: 0 5px;\n color: var(--md-sys-color-on-surface);\n box-sizing: border-box;\n min-width: 45px;\n }\n\n div[tab][disabled] {\n background-color: rgba(0, 0, 0, 0.1);\n }\n\n div[tab]:last-child {\n border-width: 0;\n }\n\n div[tab][selected] {\n background-color: var(--md-sys-color-surface);\n color: var(--md-sys-color-on-surface);\n }\n\n #display-value-container {\n display: grid;\n grid-template-columns: repeat(24, 1fr);\n grid-gap: 5px;\n\n background-color: var(--ox-input-background-color, var(--md-sys-color-surface));\n color: var(--ox-input-color, var(--md-sys-color-on-surface));\n }\n\n #display-value-container > * {\n box-sizing: border-box;\n grid-column: 9 / -1;\n }\n\n #display-value-container > label {\n box-sizing: border-box;\n grid-column: 1 / 9;\n }\n\n #display-value-container > legend {\n box-sizing: border-box;\n grid-column: 1 / -1;\n color: var(--md-sys-color-on-secondary-container, #e46c2e);\n font: var(--property-sidebar-fieldset-legend, bold 13px var(--theme-font));\n text-transform: capitalize;\n }\n`\n"]}
|
|
@@ -2,6 +2,7 @@ import '@material/web/icon/icon.js';
|
|
|
2
2
|
import '@operato/input/ox-input-color.js';
|
|
3
3
|
import '@operato/i18n/ox-i18n.js';
|
|
4
4
|
import { InputChartAbstract } from './input-chart-abstract.js';
|
|
5
|
+
import type { OperatoChart } from '../../types/types.d.ts';
|
|
5
6
|
import './templates/display-value.js';
|
|
6
7
|
export declare class OxInputChartHBar extends InputChartAbstract {
|
|
7
8
|
static styles: import("lit").CSSResult[];
|
|
@@ -1 +1 @@
|
|
|
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,kBAAkB,EAAE,MAAM,2BAA2B,CAAA;
|
|
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,kBAAkB,EAAE,MAAM,2BAA2B,CAAA;AAG9D,OAAO,8BAA8B,CAAA;AAG9B,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,kBAAkB;aAC/C,WAAM,GAAG,kBAAkB,CAAC,MAAM,AAA5B,CAA4B;IAEzC,WAAW;QACT,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAA;QAElC,OAAO,IAAI,CAAA;;;sBAGO,UAAU;qBACX,IAAI,CAAC,SAAS;;;;;;;;8EAQ2C,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,kBAAkB;QAChB,OAAO,CAAC,IAAI,CAAC,iBAAiB,CAAC,eAAe,CAAC,CAAC,CAAA;IAClD,CAAC;;AA9IU,gBAAgB;IAD5B,aAAa,CAAC,qBAAqB,CAAC;GACxB,gBAAgB,CA+I5B","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 { InputChartAbstract } from './input-chart-abstract.js'\nimport type { OperatoChart } from '../../types/types.d.ts'\n\nimport './templates/display-value.js'\n\n@customElement('ox-input-chart-hbar')\nexport class OxInputChartHBar extends InputChartAbstract {\n static styles = InputChartAbstract.styles\n\n subTemplate() {\n const configurer = this.configurer\n\n return html`\n <legend><ox-i18n msgid=\"label.series\">Series</ox-i18n></legend>\n <ox-chart-series\n .configurer=${configurer}\n .chartType=${this.chartType}\n value-key=\"datasets\"\n fullwidth\n ></ox-chart-series>\n\n <legend><ox-i18n msgid=\"label.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 getDefaultDatasets(): OperatoChart.Dataset[] {\n return [this.getDefaultDataset('horizontalBar')]\n }\n}\n"]}
|
|
@@ -2,6 +2,7 @@ import '@operato/i18n/ox-i18n.js';
|
|
|
2
2
|
import '@operato/input/ox-input-multiple-colors.js';
|
|
3
3
|
import { InputChartAbstract } from './input-chart-abstract.js';
|
|
4
4
|
import './templates/display-value.js';
|
|
5
|
+
import type { OperatoChart } from '../../types/types.d.ts';
|
|
5
6
|
export default class OxInputChartPie extends InputChartAbstract {
|
|
6
7
|
static styles: import("lit").CSSResult[];
|
|
7
8
|
subTemplate(): import("lit-html").TemplateResult<1>;
|
|
@@ -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;AAEjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAA;AAC9D,OAAO,8BAA8B,CAAA;
|
|
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;AAEjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAA;AAC9D,OAAO,8BAA8B,CAAA;AAItB,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;;;;4CAIK,UAAU;;;;;gFAK0B,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,UAAmC;QACnD,OAAO;YACL,eAAe,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC;YAClD,WAAW,EAAE,CAAC;YACd,OAAO,EAAE,OAAO;SACjB,CAAA;IACH,CAAC;;AAzDkB,eAAe;IADnC,aAAa,CAAC,oBAAoB,CAAC;GACf,eAAe,CA0DnC;eA1DoB,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'\n\nimport { InputChartAbstract } from './input-chart-abstract.js'\nimport './templates/display-value.js'\nimport type { OperatoChart } from '../../types/types.d.ts'\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 <label></label>\n <ox-chart-display-value .configurer=${configurer} fullwidth></ox-chart-display-value>\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.SeriesType): OperatoChart.Dataset {\n return {\n backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],\n borderWidth: 0,\n dataKey: 'value'\n }\n }\n}\n"]}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import '@operato/i18n/ox-i18n.js';
|
|
2
2
|
import { InputChartAbstract } from './input-chart-abstract.js';
|
|
3
|
+
import type { OperatoChart } from '../../types/types.d.ts';
|
|
3
4
|
import './templates/series.js';
|
|
4
5
|
export default class OxInputChartRadar extends InputChartAbstract {
|
|
5
6
|
static styles: import("lit").CSSResult[];
|
|
@@ -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,kBAAkB,EAAE,MAAM,2BAA2B,CAAA;
|
|
1
|
+
{"version":3,"file":"ox-input-chart-radar.js","sourceRoot":"","sources":["../../../src/editors/ox-input-chart-radar.ts"],"names":[],"mappings":";AAAA,OAAO,0BAA0B,CAAA;AAEjC,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAExD,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAA;AAG9D,OAAO,uBAAuB,CAAA;AAGf,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,kBAAkB;aACxD,WAAM,GAAG,kBAAkB,CAAC,MAAM,AAA5B,CAA4B;IAEzC,WAAW;QACT,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAA;QAElC,OAAO,IAAI,CAAA;;;sBAGO,UAAU;qBACX,IAAI,CAAC,SAAS;;;;;;;;+EAQ4C,SAAS,CAAC,UAAU,CAAC,YAAY,CAAC;KAC5G,CAAA;IACH,CAAC;IAED,kBAAkB;QAChB,OAAO;YACL;gBACE,KAAK,EAAE,gBAAgB;gBACvB,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;gBAClB,eAAe,EAAE,yBAAyB;gBAC1C,WAAW,EAAE,uBAAuB;gBACpC,WAAW,EAAE,CAAC;gBACd,UAAU,EAAE,QAAQ;gBACpB,WAAW,EAAE,CAAC;aACf;YACD;gBACE,KAAK,EAAE,gBAAgB;gBACvB,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;gBAClB,eAAe,EAAE,yBAAyB;gBAC1C,WAAW,EAAE,uBAAuB;gBACpC,WAAW,EAAE,CAAC;gBACd,UAAU,EAAE,QAAQ;gBACpB,WAAW,EAAE,CAAC;aACf;SACF,CAAA;IACH,CAAC;;AA3CkB,iBAAiB;IADrC,aAAa,CAAC,sBAAsB,CAAC;GACjB,iBAAiB,CA4CrC;eA5CoB,iBAAiB","sourcesContent":["import '@operato/i18n/ox-i18n.js'\n\nimport { html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { InputChartAbstract } from './input-chart-abstract.js'\nimport type { OperatoChart } from '../../types/types.d.ts'\n\nimport './templates/series.js'\n\n@customElement('ox-input-chart-radar')\nexport default class OxInputChartRadar extends InputChartAbstract {\n static styles = InputChartAbstract.styles\n\n subTemplate() {\n const configurer = this.configurer\n\n return html`\n <legend><ox-i18n msgid=\"label.series\">Series</ox-i18n></legend>\n <ox-chart-series\n .configurer=${configurer}\n .chartType=${this.chartType}\n value-key=\"datasets\"\n fullwidth\n ></ox-chart-series>\n\n <legend><ox-i18n msgid=\"label.axes\">Axes</ox-i18n></legend>\n\n <label for=\"series-data-key\"> <ox-i18n msgid=\"label.data-key\">Data Key</ox-i18n> </label>\n <input id=\"series-data-key\" type=\"text\" value-key=\"labelDataKey\" value=${ifDefined(configurer.labelDataKey)} />\n `\n }\n\n getDefaultDatasets(): OperatoChart.Dataset[] {\n return [\n {\n label: 'Radar Series 1',\n data: [10, 20, 30],\n backgroundColor: 'rgba(255, 99, 132, 0.2)',\n borderColor: 'rgba(255, 99, 132, 1)',\n borderWidth: 1,\n pointStyle: 'circle',\n pointRadius: 3\n },\n {\n label: 'Radar Series 2',\n data: [15, 25, 35],\n backgroundColor: 'rgba(54, 162, 235, 0.2)',\n borderColor: 'rgba(54, 162, 235, 1)',\n borderWidth: 1,\n pointStyle: 'circle',\n pointRadius: 3\n }\n ]\n }\n}\n"]}
|
|
@@ -251,7 +251,7 @@ let OxInputChartTimeseries = class OxInputChartTimeseries extends InputChartAbst
|
|
|
251
251
|
<legend collapsable>
|
|
252
252
|
<ox-i18n msgid="label.chart-annotation">Annotations</ox-i18n>
|
|
253
253
|
<md-icon
|
|
254
|
-
@
|
|
254
|
+
@click=${() => {
|
|
255
255
|
this.annotationExpanded = !this.annotationExpanded;
|
|
256
256
|
}}
|
|
257
257
|
>${this.annotationExpanded ? 'expand_less' : 'expand_more'}</md-icon
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-chart-timeseries.js","sourceRoot":"","sources":["../../../src/editors/ox-input-chart-timeseries.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/i18n/ox-i18n.js'\n\nimport { html, css } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { InputChartAbstract } from './input-chart-abstract.js'\n\nimport './templates/annotations.js'\nimport './templates/series.js'\n\n@customElement('ox-input-chart-timeseries')\nexport class OxInputChartTimeseries extends InputChartAbstract {\n static styles = [\n ...InputChartAbstract.styles,\n css`\n legend[collapsable] {\n box-sizing: border-box;\n width: 100%;\n }\n\n legend[collapsable] md-icon {\n float: right;\n font-size: medium;\n margin: 0;\n }\n\n [collapsed] {\n display: none;\n }\n `\n ]\n\n @state() annotationExpanded = false\n\n subTemplate() {\n const configurer = this.configurer\n\n return html`\n <input id=\"multi-axis\" type=\"checkbox\" value-key=\"multiAxis\" ?checked=${configurer.multiAxis} />\n <label for=\"multi-axis\"> <ox-i18n msgid=\"label.multi-axis\">Multi Axis</ox-i18n> </label>\n\n <legend><ox-i18n msgid=\"label.series\">Series</ox-i18n></legend>\n <ox-chart-series\n .configurer=${configurer}\n .chartType=${this.chartType}\n value-key=\"datasets\"\n fullwidth\n ></ox-chart-series>\n\n <legend><ox-i18n msgid=\"label.x-axes\">X Axes</ox-i18n></legend>\n\n <label for=\"series-data-key\"> <ox-i18n msgid=\"label.data-key\">Data Key</ox-i18n> </label>\n <input id=\"series-data-key\" type=\"text\" value-key=\"labelDataKey\" value=${ifDefined(configurer.labelDataKey)} />\n\n <label for=\"x-axes0-axis-title\"> <ox-i18n msgid=\"label.title\">Title</ox-i18n> </label>\n <input\n id=\"x-axes0-axis-title\"\n type=\"text\"\n value-key=\"xAxes0.axisTitle\"\n value=${ifDefined(configurer.xAxes0.axisTitle)}\n />\n\n ${this._hasBarSeries(configurer.value)\n ? html`\n <label for=\"bar-spacing\"><ox-i18n msgid=\"label.bar-spacing\">Bar Spacing</ox-i18n></label>\n <input\n id=\"bar-spacing\"\n type=\"number\"\n min=\"0\"\n max=\"1\"\n step=\"0.1\"\n value-key=\"xAxes0.barSpacing\"\n value=${ifDefined(configurer.xAxes0.barSpacing)}\n />\n <label for=\"tick-spacing\"><ox-i18n msgid=\"label.tick-spacing\">Tick Spacing</ox-i18n></label>\n <input\n id=\"tick-spacing\"\n type=\"number\"\n min=\"0\"\n max=\"1\"\n step=\"0.1\"\n value-key=\"xAxes0.categorySpacing\"\n value=${ifDefined(configurer.xAxes0.categorySpacing)}\n />\n `\n : html``}\n\n <input\n id=\"x-grid-line\"\n type=\"checkbox\"\n value-key=\"value.options.xGridLine\"\n ?checked=${configurer.config.options?.xGridLine}\n />\n <label for=\"x-grid-line\"> <ox-i18n msgid=\"label.grid-line\">Grid Line</ox-i18n> </label>\n\n <input\n id=\"x-axes0-ticks-display\"\n type=\"checkbox\"\n value-key=\"xAxes0.ticks.display\"\n ?checked=${configurer.xAxes0.ticks?.display}\n />\n <label for=\"x-axes0-ticks-display\"> <ox-i18n msgid=\"label.display-tick\">Display Tick</ox-i18n> </label>\n\n <legend><ox-i18n msgid=\"label.y-axes\">Y Axes</ox-i18n></legend>\n\n <label for=\"y-axes0-axis-title\"> <ox-i18n msgid=\"label.title\">Title</ox-i18n> </label>\n <input\n id=\"y-axes0-axis-title\"\n type=\"text\"\n value-key=\"yAxes0.axisTitle\"\n value=${configurer.yAxes0.axisTitle || ''}\n />\n\n <input\n id=\"axis-min-auto\"\n type=\"checkbox\"\n value-key=\"yAxes0.ticks.autoMin\"\n ?checked=${configurer.yAxes0.ticks?.autoMin}\n />\n <label for=\"axis-min-auto\"> <ox-i18n msgid=\"label.axis-min-auto\">Min Auto</ox-i18n> </label>\n\n <input\n id=\"axis-max-auto\"\n type=\"checkbox\"\n value-key=\"yAxes0.ticks.autoMax\"\n ?checked=${configurer.yAxes0.ticks?.autoMax}\n />\n <label for=\"axis-max-auto\"> <ox-i18n msgid=\"label.axis-max-auto\">Max Auto</ox-i18n> </label>\n\n ${!configurer.yAxes0.ticks?.autoMin\n ? html`\n <label for=\"y-axes0-ticks-min\"> <ox-i18n msgid=\"label.axis-min\">Min</ox-i18n> </label>\n <input\n id=\"y-axes0-ticks-min\"\n type=\"number\"\n value-key=\"yAxes0.ticks.min\"\n value=${ifDefined(configurer.yAxes0.ticks?.min)}\n />\n `\n : html``}\n ${!configurer.yAxes0.ticks?.autoMax\n ? html`\n <label for=\"y-axes0-ticks-max\"> <ox-i18n msgid=\"label.axis-max\">Max</ox-i18n> </label>\n <input\n id=\"y-axes0-ticks-max\"\n type=\"number\"\n value-key=\"yAxes0.ticks.max\"\n value=${ifDefined(configurer.yAxes0.ticks?.max)}\n />\n `\n : html``}\n\n <label for=\"y-axes0-ticks-step-size\"> <ox-i18n msgid=\"label.axis-step-size\">StepSize</ox-i18n> </label>\n <input\n id=\"y-axes0-ticks-step-size\"\n type=\"number\"\n value-key=\"yAxes0.ticks.stepSize\"\n value=${ifDefined(configurer.yAxes0.ticks?.stepSize)}\n />\n\n <input\n id=\"y-grid-line\"\n type=\"checkbox\"\n value-key=\"value.options.yGridLine\"\n ?checked=${configurer.config.options?.yGridLine}\n />\n <label for=\"y-grid-line\"> <ox-i18n msgid=\"label.grid-line\">Grid Line</ox-i18n> </label>\n\n <input\n id=\"y-axes0-ticks-display\"\n type=\"checkbox\"\n value-key=\"yAxes0.ticks.display\"\n ?checked=${configurer.yAxes0.ticks?.display}\n />\n <label for=\"y-axes0-ticks-display\"> <ox-i18n msgid=\"label.display-tick\">Display Tick</ox-i18n> </label>\n\n ${configurer.config.options?.multiAxis\n ? html`\n <legend><ox-i18n msgid=\"label.y-2nd-axes\">Y 2nd Axes</ox-i18n></legend>\n\n <label for=\"y-axes1.axis-title\"> <ox-i18n msgid=\"label.title\">Title</ox-i18n> </label>\n <input\n id=\"y-axes1.axis-title\"\n type=\"text\"\n value-key=\"yAxes1.axisTitle\"\n value=${ifDefined(configurer.yAxes1?.axisTitle)}\n />\n\n <input\n id=\"y-axes1-ticks-auto-min\"\n type=\"checkbox\"\n value-key=\"yAxes1.ticks.autoMin\"\n ?checked=${configurer.yAxes1?.ticks?.autoMin}\n />\n <label for=\"y-axes1-ticks-auto-min\"> <ox-i18n msgid=\"label.axis-min-auto\">Min Auto</ox-i18n> </label>\n\n <input\n id=\"y-axes1-ticks-auto-max\"\n type=\"checkbox\"\n value-key=\"yAxes1.ticks.autoMax\"\n ?checked=${configurer.yAxes1?.ticks?.autoMax}\n />\n <label for=\"y-axes1-ticks-auto-max\"> <ox-i18n msgid=\"label.axis-max-auto\">Max Auto</ox-i18n> </label>\n\n ${!configurer.yAxes1?.ticks?.autoMin\n ? html`\n <label for=\"y-axes1-ticks-min\"> <ox-i18n msgid=\"label.axis-min\">Min</ox-i18n> </label>\n <input\n id=\"y-axes1-ticks-min\"\n type=\"number\"\n value-key=\"yAxes1.ticks.min\"\n value=${ifDefined(configurer.yAxes1?.ticks?.min)}\n />\n `\n : html``}\n ${!configurer.yAxes1?.ticks?.autoMax\n ? html`\n <label for=\"y-axes1-ticks-max\"> <ox-i18n msgid=\"label.axis-max\">Max</ox-i18n> </label>\n <input\n id=\"y-axes1-ticks-max\"\n type=\"number\"\n value-key=\"yAxes1.ticks.max\"\n value=${ifDefined(configurer.yAxes1?.ticks?.max)}\n />\n `\n : html``}\n\n <label for=\"y-axes1-ticks-step-size\"> <ox-i18n msgid=\"label.axis-step-size\">StepSize</ox-i18n> </label>\n <input\n id=\"y-axes1-ticks-step-size\"\n type=\"number\"\n value-key=\"yAxes1.ticks.stepSize\"\n value=${ifDefined(configurer.yAxes1?.ticks?.stepSize)}\n />\n\n <input\n id=\"y-2nd-grid-line\"\n type=\"checkbox\"\n value-key=\"value.options.y2ndGridLine\"\n ?checked=${configurer.config.options?.y2ndGridLine}\n />\n <label for=\"y-2nd-grid-line\"> <ox-i18n msgid=\"label.grid-line\">Grid Line</ox-i18n> </label>\n\n <input\n id=\"y-axes1-ticks-display\"\n type=\"checkbox\"\n value-key=\"yAxes1.ticks.display\"\n ?checked=${configurer.yAxes1?.ticks?.display}\n />\n <label for=\"y-axes1-ticks-display\"> <ox-i18n msgid=\"label.display-tick\">Display Tick</ox-i18n> </label>\n `\n : html``}\n\n <legend collapsable>\n <ox-i18n msgid=\"label.chart-annotation\">Annotations</ox-i18n>\n <md-icon\n @tap=${() => {\n this.annotationExpanded = !this.annotationExpanded\n }}\n >${this.annotationExpanded ? 'expand_less' : 'expand_more'}</md-icon\n >\n </legend>\n <ox-chart-annotations\n .configurer=${configurer}\n ?collapsed=${!this.annotationExpanded}\n value-key=\"annotations\"\n fullwidth\n ></ox-chart-annotations>\n `\n }\n\n _hasBarSeries(config: any) {\n var hasBarSeries = false\n hasBarSeries = config.data.datasets?.some((s: any) => s.type == 'bar')\n\n return hasBarSeries\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"ox-input-chart-timeseries.js","sourceRoot":"","sources":["../../../src/editors/ox-input-chart-timeseries.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/i18n/ox-i18n.js'\n\nimport { html, css } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { InputChartAbstract } from './input-chart-abstract.js'\n\nimport './templates/annotations.js'\nimport './templates/series.js'\n\n@customElement('ox-input-chart-timeseries')\nexport class OxInputChartTimeseries extends InputChartAbstract {\n static styles = [\n ...InputChartAbstract.styles,\n css`\n legend[collapsable] {\n box-sizing: border-box;\n width: 100%;\n }\n\n legend[collapsable] md-icon {\n float: right;\n font-size: medium;\n margin: 0;\n }\n\n [collapsed] {\n display: none;\n }\n `\n ]\n\n @state() annotationExpanded = false\n\n subTemplate() {\n const configurer = this.configurer\n\n return html`\n <input id=\"multi-axis\" type=\"checkbox\" value-key=\"multiAxis\" ?checked=${configurer.multiAxis} />\n <label for=\"multi-axis\"> <ox-i18n msgid=\"label.multi-axis\">Multi Axis</ox-i18n> </label>\n\n <legend><ox-i18n msgid=\"label.series\">Series</ox-i18n></legend>\n <ox-chart-series\n .configurer=${configurer}\n .chartType=${this.chartType}\n value-key=\"datasets\"\n fullwidth\n ></ox-chart-series>\n\n <legend><ox-i18n msgid=\"label.x-axes\">X Axes</ox-i18n></legend>\n\n <label for=\"series-data-key\"> <ox-i18n msgid=\"label.data-key\">Data Key</ox-i18n> </label>\n <input id=\"series-data-key\" type=\"text\" value-key=\"labelDataKey\" value=${ifDefined(configurer.labelDataKey)} />\n\n <label for=\"x-axes0-axis-title\"> <ox-i18n msgid=\"label.title\">Title</ox-i18n> </label>\n <input\n id=\"x-axes0-axis-title\"\n type=\"text\"\n value-key=\"xAxes0.axisTitle\"\n value=${ifDefined(configurer.xAxes0.axisTitle)}\n />\n\n ${this._hasBarSeries(configurer.value)\n ? html`\n <label for=\"bar-spacing\"><ox-i18n msgid=\"label.bar-spacing\">Bar Spacing</ox-i18n></label>\n <input\n id=\"bar-spacing\"\n type=\"number\"\n min=\"0\"\n max=\"1\"\n step=\"0.1\"\n value-key=\"xAxes0.barSpacing\"\n value=${ifDefined(configurer.xAxes0.barSpacing)}\n />\n <label for=\"tick-spacing\"><ox-i18n msgid=\"label.tick-spacing\">Tick Spacing</ox-i18n></label>\n <input\n id=\"tick-spacing\"\n type=\"number\"\n min=\"0\"\n max=\"1\"\n step=\"0.1\"\n value-key=\"xAxes0.categorySpacing\"\n value=${ifDefined(configurer.xAxes0.categorySpacing)}\n />\n `\n : html``}\n\n <input\n id=\"x-grid-line\"\n type=\"checkbox\"\n value-key=\"value.options.xGridLine\"\n ?checked=${configurer.config.options?.xGridLine}\n />\n <label for=\"x-grid-line\"> <ox-i18n msgid=\"label.grid-line\">Grid Line</ox-i18n> </label>\n\n <input\n id=\"x-axes0-ticks-display\"\n type=\"checkbox\"\n value-key=\"xAxes0.ticks.display\"\n ?checked=${configurer.xAxes0.ticks?.display}\n />\n <label for=\"x-axes0-ticks-display\"> <ox-i18n msgid=\"label.display-tick\">Display Tick</ox-i18n> </label>\n\n <legend><ox-i18n msgid=\"label.y-axes\">Y Axes</ox-i18n></legend>\n\n <label for=\"y-axes0-axis-title\"> <ox-i18n msgid=\"label.title\">Title</ox-i18n> </label>\n <input\n id=\"y-axes0-axis-title\"\n type=\"text\"\n value-key=\"yAxes0.axisTitle\"\n value=${configurer.yAxes0.axisTitle || ''}\n />\n\n <input\n id=\"axis-min-auto\"\n type=\"checkbox\"\n value-key=\"yAxes0.ticks.autoMin\"\n ?checked=${configurer.yAxes0.ticks?.autoMin}\n />\n <label for=\"axis-min-auto\"> <ox-i18n msgid=\"label.axis-min-auto\">Min Auto</ox-i18n> </label>\n\n <input\n id=\"axis-max-auto\"\n type=\"checkbox\"\n value-key=\"yAxes0.ticks.autoMax\"\n ?checked=${configurer.yAxes0.ticks?.autoMax}\n />\n <label for=\"axis-max-auto\"> <ox-i18n msgid=\"label.axis-max-auto\">Max Auto</ox-i18n> </label>\n\n ${!configurer.yAxes0.ticks?.autoMin\n ? html`\n <label for=\"y-axes0-ticks-min\"> <ox-i18n msgid=\"label.axis-min\">Min</ox-i18n> </label>\n <input\n id=\"y-axes0-ticks-min\"\n type=\"number\"\n value-key=\"yAxes0.ticks.min\"\n value=${ifDefined(configurer.yAxes0.ticks?.min)}\n />\n `\n : html``}\n ${!configurer.yAxes0.ticks?.autoMax\n ? html`\n <label for=\"y-axes0-ticks-max\"> <ox-i18n msgid=\"label.axis-max\">Max</ox-i18n> </label>\n <input\n id=\"y-axes0-ticks-max\"\n type=\"number\"\n value-key=\"yAxes0.ticks.max\"\n value=${ifDefined(configurer.yAxes0.ticks?.max)}\n />\n `\n : html``}\n\n <label for=\"y-axes0-ticks-step-size\"> <ox-i18n msgid=\"label.axis-step-size\">StepSize</ox-i18n> </label>\n <input\n id=\"y-axes0-ticks-step-size\"\n type=\"number\"\n value-key=\"yAxes0.ticks.stepSize\"\n value=${ifDefined(configurer.yAxes0.ticks?.stepSize)}\n />\n\n <input\n id=\"y-grid-line\"\n type=\"checkbox\"\n value-key=\"value.options.yGridLine\"\n ?checked=${configurer.config.options?.yGridLine}\n />\n <label for=\"y-grid-line\"> <ox-i18n msgid=\"label.grid-line\">Grid Line</ox-i18n> </label>\n\n <input\n id=\"y-axes0-ticks-display\"\n type=\"checkbox\"\n value-key=\"yAxes0.ticks.display\"\n ?checked=${configurer.yAxes0.ticks?.display}\n />\n <label for=\"y-axes0-ticks-display\"> <ox-i18n msgid=\"label.display-tick\">Display Tick</ox-i18n> </label>\n\n ${configurer.config.options?.multiAxis\n ? html`\n <legend><ox-i18n msgid=\"label.y-2nd-axes\">Y 2nd Axes</ox-i18n></legend>\n\n <label for=\"y-axes1.axis-title\"> <ox-i18n msgid=\"label.title\">Title</ox-i18n> </label>\n <input\n id=\"y-axes1.axis-title\"\n type=\"text\"\n value-key=\"yAxes1.axisTitle\"\n value=${ifDefined(configurer.yAxes1?.axisTitle)}\n />\n\n <input\n id=\"y-axes1-ticks-auto-min\"\n type=\"checkbox\"\n value-key=\"yAxes1.ticks.autoMin\"\n ?checked=${configurer.yAxes1?.ticks?.autoMin}\n />\n <label for=\"y-axes1-ticks-auto-min\"> <ox-i18n msgid=\"label.axis-min-auto\">Min Auto</ox-i18n> </label>\n\n <input\n id=\"y-axes1-ticks-auto-max\"\n type=\"checkbox\"\n value-key=\"yAxes1.ticks.autoMax\"\n ?checked=${configurer.yAxes1?.ticks?.autoMax}\n />\n <label for=\"y-axes1-ticks-auto-max\"> <ox-i18n msgid=\"label.axis-max-auto\">Max Auto</ox-i18n> </label>\n\n ${!configurer.yAxes1?.ticks?.autoMin\n ? html`\n <label for=\"y-axes1-ticks-min\"> <ox-i18n msgid=\"label.axis-min\">Min</ox-i18n> </label>\n <input\n id=\"y-axes1-ticks-min\"\n type=\"number\"\n value-key=\"yAxes1.ticks.min\"\n value=${ifDefined(configurer.yAxes1?.ticks?.min)}\n />\n `\n : html``}\n ${!configurer.yAxes1?.ticks?.autoMax\n ? html`\n <label for=\"y-axes1-ticks-max\"> <ox-i18n msgid=\"label.axis-max\">Max</ox-i18n> </label>\n <input\n id=\"y-axes1-ticks-max\"\n type=\"number\"\n value-key=\"yAxes1.ticks.max\"\n value=${ifDefined(configurer.yAxes1?.ticks?.max)}\n />\n `\n : html``}\n\n <label for=\"y-axes1-ticks-step-size\"> <ox-i18n msgid=\"label.axis-step-size\">StepSize</ox-i18n> </label>\n <input\n id=\"y-axes1-ticks-step-size\"\n type=\"number\"\n value-key=\"yAxes1.ticks.stepSize\"\n value=${ifDefined(configurer.yAxes1?.ticks?.stepSize)}\n />\n\n <input\n id=\"y-2nd-grid-line\"\n type=\"checkbox\"\n value-key=\"value.options.y2ndGridLine\"\n ?checked=${configurer.config.options?.y2ndGridLine}\n />\n <label for=\"y-2nd-grid-line\"> <ox-i18n msgid=\"label.grid-line\">Grid Line</ox-i18n> </label>\n\n <input\n id=\"y-axes1-ticks-display\"\n type=\"checkbox\"\n value-key=\"yAxes1.ticks.display\"\n ?checked=${configurer.yAxes1?.ticks?.display}\n />\n <label for=\"y-axes1-ticks-display\"> <ox-i18n msgid=\"label.display-tick\">Display Tick</ox-i18n> </label>\n `\n : html``}\n\n <legend collapsable>\n <ox-i18n msgid=\"label.chart-annotation\">Annotations</ox-i18n>\n <md-icon\n @click=${() => {\n this.annotationExpanded = !this.annotationExpanded\n }}\n >${this.annotationExpanded ? 'expand_less' : 'expand_more'}</md-icon\n >\n </legend>\n <ox-chart-annotations\n .configurer=${configurer}\n ?collapsed=${!this.annotationExpanded}\n value-key=\"annotations\"\n fullwidth\n ></ox-chart-annotations>\n `\n }\n\n _hasBarSeries(config: any) {\n var hasBarSeries = false\n hasBarSeries = config.data.datasets?.some((s: any) => s.type == 'bar')\n\n return hasBarSeries\n }\n}\n"]}
|
|
@@ -20,13 +20,13 @@ let ChartEditor = class ChartEditor extends OxPropertyEditor {
|
|
|
20
20
|
|
|
21
21
|
#chart-type {
|
|
22
22
|
display: grid;
|
|
23
|
-
grid-template-columns: repeat(
|
|
23
|
+
grid-template-columns: repeat(24, 1fr);
|
|
24
24
|
grid-gap: 5px;
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
#chart-type > label {
|
|
28
28
|
box-sizing: border-box;
|
|
29
|
-
grid-column:
|
|
29
|
+
grid-column: 1 / 9;
|
|
30
30
|
|
|
31
31
|
text-align: right;
|
|
32
32
|
|
|
@@ -38,7 +38,7 @@ let ChartEditor = class ChartEditor extends OxPropertyEditor {
|
|
|
38
38
|
|
|
39
39
|
#chart-type > input {
|
|
40
40
|
box-sizing: border-box;
|
|
41
|
-
grid-column:
|
|
41
|
+
grid-column: 9 / -1;
|
|
42
42
|
border: 1px solid rgba(0, 0, 0, 0.2);
|
|
43
43
|
}
|
|
44
44
|
`
|
|
@@ -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,0BAA0B,CAAA;AACjC,OAAO,2BAA2B,CAAA;AAClC,OAAO,yBAAyB,CAAA;AAChC,OAAO,2BAA2B,CAAA;AAClC,OAAO,gCAAgC,CAAA;AAEvC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,EAAE,gBAAgB,EAAgB,MAAM,0BAA0B,CAAA;AAGlE,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,gBAAgB;aACxC,WAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+BF;KACF,AAjCY,CAiCZ;IAED,cAAc,CAAC,KAAU,EAAE,IAAkB;QAC3C,QAAQ,KAAK,CAAC,IAAI,EAAE,CAAC;YACnB,KAAK,MAAM,CAAC;YACZ,KAAK,KAAK;gBACR,OAAO,IAAI,CAAA,iCAAiC,KAAK,eAAe,KAAK,CAAC,IAAI,qCAAqC,CAAA;YACjH,KAAK,eAAe;gBAClB,OAAO,IAAI,CAAA,gCAAgC,KAAK,eAAe,KAAK,CAAC,IAAI,oCAAoC,CAAA;YAC/G,KAAK,KAAK,CAAC;YACX,KAAK,UAAU,CAAC;YAChB,KAAK,WAAW;gBACd,OAAO,IAAI,CAAA,+BAA+B,KAAK,eAAe,KAAK,CAAC,IAAI,mCAAmC,CAAA;YAC7G,KAAK,OAAO;gBACV,OAAO,IAAI,CAAA,iCAAiC,KAAK,eAAe,KAAK,CAAC,IAAI,qCAAqC,CAAA;YACjH,KAAK,YAAY;gBACf,OAAO,IAAI,CAAA;8CAC2B,KAAK,eAAe,KAAK,CAAC,IAAI;SACnE,CAAA;QACL,CAAC;QAED,OAAO,IAAI,CAAA,EAAE,CAAA;IACf,CAAC;;AAxDU,WAAW;IADvB,aAAa,CAAC,0BAA0B,CAAC;GAC7B,WAAW,CAyDvB","sourcesContent":["import '@operato/i18n/ox-i18n.js'\n\nimport './ox-input-chart-hbar.js'\nimport './ox-input-chart-mixed.js'\nimport './ox-input-chart-pie.js'\nimport './ox-input-chart-radar.js'\nimport './ox-input-chart-timeseries.js'\n\nimport { css, html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { OxPropertyEditor, PropertySpec } from '@operato/property-editor'\n\n@customElement('ox-property-editor-chart')\nexport class ChartEditor extends OxPropertyEditor {\n static styles = [\n css`\n :host {\n display: block;\n padding: 5px;\n\n --md-elevated-button-container-height: 20px;\n }\n\n #chart-type {\n display: grid;\n grid-template-columns: repeat(
|
|
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,0BAA0B,CAAA;AACjC,OAAO,2BAA2B,CAAA;AAClC,OAAO,yBAAyB,CAAA;AAChC,OAAO,2BAA2B,CAAA;AAClC,OAAO,gCAAgC,CAAA;AAEvC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,EAAE,gBAAgB,EAAgB,MAAM,0BAA0B,CAAA;AAGlE,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,gBAAgB;aACxC,WAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+BF;KACF,AAjCY,CAiCZ;IAED,cAAc,CAAC,KAAU,EAAE,IAAkB;QAC3C,QAAQ,KAAK,CAAC,IAAI,EAAE,CAAC;YACnB,KAAK,MAAM,CAAC;YACZ,KAAK,KAAK;gBACR,OAAO,IAAI,CAAA,iCAAiC,KAAK,eAAe,KAAK,CAAC,IAAI,qCAAqC,CAAA;YACjH,KAAK,eAAe;gBAClB,OAAO,IAAI,CAAA,gCAAgC,KAAK,eAAe,KAAK,CAAC,IAAI,oCAAoC,CAAA;YAC/G,KAAK,KAAK,CAAC;YACX,KAAK,UAAU,CAAC;YAChB,KAAK,WAAW;gBACd,OAAO,IAAI,CAAA,+BAA+B,KAAK,eAAe,KAAK,CAAC,IAAI,mCAAmC,CAAA;YAC7G,KAAK,OAAO;gBACV,OAAO,IAAI,CAAA,iCAAiC,KAAK,eAAe,KAAK,CAAC,IAAI,qCAAqC,CAAA;YACjH,KAAK,YAAY;gBACf,OAAO,IAAI,CAAA;8CAC2B,KAAK,eAAe,KAAK,CAAC,IAAI;SACnE,CAAA;QACL,CAAC;QAED,OAAO,IAAI,CAAA,EAAE,CAAA;IACf,CAAC;;AAxDU,WAAW;IADvB,aAAa,CAAC,0BAA0B,CAAC;GAC7B,WAAW,CAyDvB","sourcesContent":["import '@operato/i18n/ox-i18n.js'\n\nimport './ox-input-chart-hbar.js'\nimport './ox-input-chart-mixed.js'\nimport './ox-input-chart-pie.js'\nimport './ox-input-chart-radar.js'\nimport './ox-input-chart-timeseries.js'\n\nimport { css, html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { OxPropertyEditor, PropertySpec } from '@operato/property-editor'\n\n@customElement('ox-property-editor-chart')\nexport class ChartEditor extends OxPropertyEditor {\n static styles = [\n css`\n :host {\n display: block;\n padding: 5px;\n\n --md-elevated-button-container-height: 20px;\n }\n\n #chart-type {\n display: grid;\n grid-template-columns: repeat(24, 1fr);\n grid-gap: 5px;\n }\n\n #chart-type > label {\n box-sizing: border-box;\n grid-column: 1 / 9;\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: 9 / -1;\n border: 1px solid rgba(0, 0, 0, 0.2);\n }\n `\n ]\n\n editorTemplate(value: any, spec: PropertySpec) {\n switch (value.type) {\n case 'line':\n case 'bar':\n return html` <ox-input-chart-mixed .value=${value} chart-type=${value.type} fullwidth></ox-input-chart-mixed> `\n case 'horizontalBar':\n return html` <ox-input-chart-hbar .value=${value} chart-type=${value.type} fullwidth></ox-input-chart-hbar> `\n case 'pie':\n case 'doughnut':\n case 'polarArea':\n return html` <ox-input-chart-pie .value=${value} chart-type=${value.type} fullwidth></ox-input-chart-pie> `\n case 'radar':\n return html` <ox-input-chart-radar .value=${value} chart-type=${value.type} fullwidth></ox-input-chart-radar> `\n case 'timeseries':\n return html`\n <ox-input-chart-timeseries .value=${value} chart-type=${value.type} fullwidth></ox-input-chart-timeseries>\n `\n }\n\n return html``\n }\n}\n"]}
|
|
@@ -2,6 +2,7 @@ import '@material/web/icon/icon.js';
|
|
|
2
2
|
import { LitElement, PropertyValues } from 'lit';
|
|
3
3
|
import { MdIcon } from '@material/web/icon/icon.js';
|
|
4
4
|
import { Configurer } from '../configurer.js';
|
|
5
|
+
import type { OperatoChart } from '../../../types/types.d.ts';
|
|
5
6
|
export declare class AnnotationsTemplate extends LitElement {
|
|
6
7
|
createRenderRoot(): this;
|
|
7
8
|
configurer: Configurer;
|
|
@@ -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.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"]}
|
|
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'\nimport type { OperatoChart } from '../../../types/types.d.ts'\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"]}
|
|
@@ -3,6 +3,7 @@ import { LitElement, PropertyValues } from 'lit';
|
|
|
3
3
|
import { MdIcon } from '@material/web/icon/icon.js';
|
|
4
4
|
import { TinyColor } from '@ctrl/tinycolor';
|
|
5
5
|
import { Configurer } from '../configurer.js';
|
|
6
|
+
import type { OperatoChart } from '../../../types/types.d.ts';
|
|
6
7
|
import './display-value.js';
|
|
7
8
|
export declare class MultipleSeriesTemplate extends LitElement {
|
|
8
9
|
createRenderRoot(): this;
|
|
@@ -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.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"]}
|
|
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 type { OperatoChart } from '../../../types/types.d.ts'\n\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/index.d.ts
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './editors/index.js';
|
package/dist/src/index.js
CHANGED
package/dist/src/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"","sourcesContent":[""]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,yFAAyF;AACzF,cAAc,oBAAoB,CAAA","sourcesContent":["/* never export ox-chart-js.js and ox-scichart.js to prevent chart.js version conflict */\nexport * from './editors/index.js'\n"]}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import { LitElement } from 'lit';
|
|
1
|
+
import { LitElement, PropertyValues } from 'lit';
|
|
2
|
+
import type { OperatoChart } from '../../types/types.d.ts';
|
|
2
3
|
declare global {
|
|
3
4
|
interface Window {
|
|
4
5
|
sciChartLoaded: boolean;
|
|
@@ -17,7 +18,7 @@ declare class OxSciChart extends LitElement {
|
|
|
17
18
|
firstUpdated(): void;
|
|
18
19
|
loadSciChart(): Promise<void>;
|
|
19
20
|
initializeSciChart(): Promise<void>;
|
|
20
|
-
updated(changedProperties:
|
|
21
|
+
updated(changedProperties: PropertyValues<this>): Promise<void>;
|
|
21
22
|
appendData(appendum: {
|
|
22
23
|
[attr: string]: any;
|
|
23
24
|
}[]): Promise<void>;
|