@operato/scene-chartjs 7.0.0 → 7.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (51) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/dist/config-converter.js +1 -1
  3. package/dist/config-converter.js.map +1 -1
  4. package/dist/editors/index.d.ts +1 -1
  5. package/dist/editors/index.js +2 -2
  6. package/dist/editors/index.js.map +1 -1
  7. package/dist/ox-chart.js +1 -1
  8. package/dist/ox-chart.js.map +1 -1
  9. package/package.json +6 -4
  10. package/schema.graphql +76 -40
  11. package/src/config-converter.ts +1 -1
  12. package/src/editors/index.ts +2 -2
  13. package/src/ox-chart.ts +1 -1
  14. package/translations/en.json +2 -1
  15. package/translations/ja.json +2 -1
  16. package/translations/ko.json +2 -1
  17. package/translations/ms.json +2 -1
  18. package/translations/zh.json +2 -1
  19. package/tsconfig.tsbuildinfo +1 -1
  20. package/dist/editors/property-editor-chartjs-abstract.d.ts +0 -50
  21. package/dist/editors/property-editor-chartjs-abstract.js +0 -273
  22. package/dist/editors/property-editor-chartjs-abstract.js.map +0 -1
  23. package/dist/editors/property-editor-chartjs-hbar.d.ts +0 -10
  24. package/dist/editors/property-editor-chartjs-hbar.js +0 -154
  25. package/dist/editors/property-editor-chartjs-hbar.js.map +0 -1
  26. package/dist/editors/property-editor-chartjs-mixed.d.ts +0 -17
  27. package/dist/editors/property-editor-chartjs-mixed.js +0 -186
  28. package/dist/editors/property-editor-chartjs-mixed.js.map +0 -1
  29. package/dist/editors/property-editor-chartjs-multi-series-abstract.d.ts +0 -29
  30. package/dist/editors/property-editor-chartjs-multi-series-abstract.js +0 -363
  31. package/dist/editors/property-editor-chartjs-multi-series-abstract.js.map +0 -1
  32. package/dist/editors/property-editor-chartjs-pie.d.ts +0 -18
  33. package/dist/editors/property-editor-chartjs-pie.js +0 -74
  34. package/dist/editors/property-editor-chartjs-pie.js.map +0 -1
  35. package/dist/editors/property-editor-chartjs-radar.d.ts +0 -8
  36. package/dist/editors/property-editor-chartjs-radar.js +0 -36
  37. package/dist/editors/property-editor-chartjs-radar.js.map +0 -1
  38. package/dist/editors/property-editor-chartjs-styles.d.ts +0 -1
  39. package/dist/editors/property-editor-chartjs-styles.js +0 -167
  40. package/dist/editors/property-editor-chartjs-styles.js.map +0 -1
  41. package/dist/editors/property-editor-chartjs.d.ts +0 -10
  42. package/dist/editors/property-editor-chartjs.js +0 -79
  43. package/dist/editors/property-editor-chartjs.js.map +0 -1
  44. package/src/editors/property-editor-chartjs-abstract.ts +0 -324
  45. package/src/editors/property-editor-chartjs-hbar.ts +0 -157
  46. package/src/editors/property-editor-chartjs-mixed.ts +0 -199
  47. package/src/editors/property-editor-chartjs-multi-series-abstract.ts +0 -382
  48. package/src/editors/property-editor-chartjs-pie.ts +0 -86
  49. package/src/editors/property-editor-chartjs-radar.ts +0 -39
  50. package/src/editors/property-editor-chartjs-styles.ts +0 -167
  51. package/src/editors/property-editor-chartjs.ts +0 -79
@@ -1,167 +0,0 @@
1
- import { css } from 'lit';
2
- export const PropertyEditorChartJSStyles = css `
3
- :host {
4
- display: grid;
5
- grid-template-columns: repeat(10, 1fr);
6
- grid-gap: 5px;
7
- }
8
-
9
- :host > * {
10
- box-sizing: border-box;
11
- grid-column: span 7;
12
- }
13
-
14
- :host > label {
15
- box-sizing: border-box;
16
- grid-column: span 3;
17
- }
18
-
19
- :host > legend {
20
- box-sizing: border-box;
21
- grid-column: 1 / -1;
22
- color: var(--md-sys-color-on-secondary-container, #e46c2e);
23
- font: var(--property-sidebar-fieldset-legend, bold 13px var(--theme-font));
24
- text-transform: capitalize;
25
- }
26
-
27
- #series-properties-container {
28
- display: grid;
29
- grid-template-columns: 1fr 25px;
30
- align-items: center;
31
- justify-content: center;
32
- }
33
-
34
- #series-properties-container > [tab-content] {
35
- grid-column: span 2;
36
- }
37
-
38
- #tab-header {
39
- display: grid;
40
- grid-template-columns: 25px 1fr 25px;
41
- grid-gap: 5px;
42
- overflow: hidden;
43
- border: 1px solid rgba(0, 0, 0, 0.2);
44
- border-bottom: 0;
45
- background-color: var(--md-sys-color-surface-variant);
46
- color: var(--md-sys-color-on-surface);
47
- box-sizing: border-box;
48
- padding-top: 3px;
49
- align-items: center;
50
- }
51
-
52
- #tab-header > div {
53
- height: 25px;
54
- }
55
-
56
- #tab-header md-icon[disabled] {
57
- opacity: 0.1;
58
- }
59
-
60
- #tabs {
61
- display: flex;
62
- overflow: hidden;
63
- }
64
-
65
- #tab-header #tabs [tab] md-icon {
66
- margin-left: 5px;
67
- padding: 2px;
68
- color: var(--md-sys-color-on-surface);
69
-
70
- --md-icon-size: 12px;
71
- }
72
-
73
- #add-series-button-container {
74
- height: 100%;
75
- box-sizing: border-box;
76
- align-items: center;
77
- justify-content: center;
78
- padding-top: 3px;
79
- display: flex;
80
- border-bottom: rgba(0, 0, 0, 0.2) 1px solid;
81
- }
82
-
83
- #add-series-button {
84
- width: 20px;
85
- height: 20px;
86
- padding: 0;
87
- color: var(--md-sys-color-on-secondary-container);
88
- }
89
-
90
- .tab-content {
91
- grid-column: 1 / -1;
92
-
93
- background-color: rgba(255, 255, 255, 0.5);
94
- border: 1px solid rgba(0, 0, 0, 0.2);
95
- border-width: 0 1px 1px 1px;
96
- padding: 5px;
97
- display: grid;
98
- grid-template-columns: repeat(10, 1fr);
99
- grid-gap: 5px;
100
- }
101
-
102
- .tab-content > * {
103
- box-sizing: border-box;
104
- grid-column: span 7;
105
- }
106
-
107
- label,
108
- .tab-content > label {
109
- grid-column: span 3;
110
- text-align: right;
111
- color: var(--md-sys-color-on-secondary-container);
112
- font-size: 0.8em;
113
- line-height: 2;
114
- text-transform: capitalize;
115
- }
116
-
117
- input,
118
- select {
119
- border: 1px solid rgba(0, 0, 0, 0.2);
120
- border-radius: var(--spacing-small);
121
- }
122
-
123
- input[type='checkbox'],
124
- .tab-content > input[type='checkbox'] {
125
- grid-column: span 4;
126
- justify-self: end;
127
- align-self: center;
128
- }
129
-
130
- input[type='checkbox'] + label,
131
- .tab-content > input[type='checkbox'] + label {
132
- grid-column: span 6;
133
-
134
- text-align: left;
135
- }
136
-
137
- [fullwidth] {
138
- grid-column: 1 / -1;
139
- margin: 0;
140
- border: 0;
141
- }
142
-
143
- div[tab] {
144
- display: flex;
145
- align-items: center;
146
- background-color: rgba(0, 0, 0, 0.2);
147
- border-width: 1px 1px 0 1px;
148
- padding: 0 5px;
149
- color: var(--md-sys-color-on-surface);
150
- box-sizing: border-box;
151
- min-width: 45px;
152
- }
153
-
154
- div[tab][disabled] {
155
- background-color: rgba(0, 0, 0, 0.1);
156
- }
157
-
158
- div[tab]:last-child {
159
- border-width: 0;
160
- }
161
-
162
- div[tab][selected] {
163
- background-color: var(--md-sys-color-surface);
164
- color: var(--md-sys-color-on-surface);
165
- }
166
- `;
167
- //# sourceMappingURL=property-editor-chartjs-styles.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"property-editor-chartjs-styles.js","sourceRoot":"","sources":["../../src/editors/property-editor-chartjs-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,2BAA2B,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoK7C,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const PropertyEditorChartJSStyles = css`\n :host {\n display: grid;\n grid-template-columns: repeat(10, 1fr);\n grid-gap: 5px;\n }\n\n :host > * {\n box-sizing: border-box;\n grid-column: span 7;\n }\n\n :host > label {\n box-sizing: border-box;\n grid-column: span 3;\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 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 grid-column: span 2;\n }\n\n #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 #tab-header > div {\n height: 25px;\n }\n\n #tab-header md-icon[disabled] {\n opacity: 0.1;\n }\n\n #tabs {\n display: flex;\n overflow: hidden;\n }\n\n #tab-header #tabs [tab] md-icon {\n margin-left: 5px;\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 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 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(10, 1fr);\n grid-gap: 5px;\n }\n\n .tab-content > * {\n box-sizing: border-box;\n grid-column: span 7;\n }\n\n label,\n .tab-content > label {\n grid-column: span 3;\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 }\n\n input[type='checkbox'],\n .tab-content > input[type='checkbox'] {\n grid-column: span 4;\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: span 6;\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"]}
@@ -1,10 +0,0 @@
1
- import '@operato/i18n/ox-i18n.js';
2
- import './property-editor-chartjs-hbar';
3
- import './property-editor-chartjs-mixed';
4
- import './property-editor-chartjs-pie';
5
- import './property-editor-chartjs-radar';
6
- import { OxPropertyEditor, PropertySpec } from '@operato/property-editor';
7
- export default class ChartJSEditor extends OxPropertyEditor {
8
- static styles: import("lit").CSSResult[];
9
- editorTemplate(value: any, spec: PropertySpec): import("lit-html").TemplateResult<1>;
10
- }
@@ -1,79 +0,0 @@
1
- import { __decorate } from "tslib";
2
- import '@operato/i18n/ox-i18n.js';
3
- import './property-editor-chartjs-hbar';
4
- import './property-editor-chartjs-mixed';
5
- import './property-editor-chartjs-pie';
6
- import './property-editor-chartjs-radar';
7
- import { css, html } from 'lit';
8
- import { customElement } from 'lit/decorators.js';
9
- import { OxPropertyEditor } from '@operato/property-editor';
10
- let ChartJSEditor = class ChartJSEditor extends OxPropertyEditor {
11
- editorTemplate(value, spec) {
12
- return html `
13
- ${value
14
- ? html `
15
- <div id="chart-type">
16
- <label> <ox-i18n msgid="label.chart-type">Chart Type</ox-i18n> </label>
17
- <input type="text" .value=${value.type} readonly />
18
- </div>
19
- `
20
- : html ``}
21
- ${!value
22
- ? html ``
23
- : value.type == 'line'
24
- ? html ` <property-editor-chartjs-mixed .value=${value} fullwidth></property-editor-chartjs-mixed> `
25
- : value.type == 'horizontalBar'
26
- ? html ` <property-editor-chartjs-hbar .value=${value} fullwidth></property-editor-chartjs-hbar> `
27
- : value.type == 'bar'
28
- ? html ` <property-editor-chartjs-mixed .value=${value} fullwidth></property-editor-chartjs-mixed> `
29
- : value.type == 'pie'
30
- ? html ` <property-editor-chartjs-pie .value=${value} fullwidth></property-editor-chartjs-pie> `
31
- : value.type == 'doughnut'
32
- ? html ` <property-editor-chartjs-pie .value=${value} fullwidth></property-editor-chartjs-pie> `
33
- : value.type == 'polarArea'
34
- ? html ` <property-editor-chartjs-pie .value=${value} fullwidth></property-editor-chartjs-pie> `
35
- : value.type == 'radar'
36
- ? html ` <property-editor-chartjs-radar .value=${value} fullwidth></property-editor-chartjs-radar> `
37
- : html ``}
38
- `;
39
- }
40
- };
41
- ChartJSEditor.styles = [
42
- css `
43
- :host {
44
- display: block;
45
- padding: 5px;
46
-
47
- --md-elevated-button-container-height: 20px;
48
- }
49
-
50
- #chart-type {
51
- display: grid;
52
- grid-template-columns: repeat(10, 1fr);
53
- grid-gap: 5px;
54
- }
55
-
56
- #chart-type > label {
57
- box-sizing: border-box;
58
- grid-column: span 3;
59
-
60
- text-align: right;
61
-
62
- color: var(--md-sys-color-on-secondary-container);
63
- font-size: 0.8em;
64
- line-height: 2;
65
- text-transform: capitalize;
66
- }
67
-
68
- #chart-type > input {
69
- box-sizing: border-box;
70
- grid-column: span 7;
71
- border: 1px solid rgba(0, 0, 0, 0.2);
72
- }
73
- `
74
- ];
75
- ChartJSEditor = __decorate([
76
- customElement('property-editor-chartjs')
77
- ], ChartJSEditor);
78
- export default ChartJSEditor;
79
- //# sourceMappingURL=property-editor-chartjs.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"property-editor-chartjs.js","sourceRoot":"","sources":["../../src/editors/property-editor-chartjs.ts"],"names":[],"mappings":";AAAA,OAAO,0BAA0B,CAAA;AAEjC,OAAO,gCAAgC,CAAA;AACvC,OAAO,iCAAiC,CAAA;AACxC,OAAO,+BAA+B,CAAA;AACtC,OAAO,iCAAiC,CAAA;AAExC,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;AAG1D,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,gBAAgB;IAoCzD,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;gBACtB,CAAC,CAAC,IAAI,CAAA,0CAA0C,KAAK,8CAA8C;gBACnG,CAAC,CAAC,KAAK,CAAC,IAAI,IAAI,eAAe;oBAC/B,CAAC,CAAC,IAAI,CAAA,yCAAyC,KAAK,6CAA6C;oBACjG,CAAC,CAAC,KAAK,CAAC,IAAI,IAAI,KAAK;wBACrB,CAAC,CAAC,IAAI,CAAA,0CAA0C,KAAK,8CAA8C;wBACnG,CAAC,CAAC,KAAK,CAAC,IAAI,IAAI,KAAK;4BACrB,CAAC,CAAC,IAAI,CAAA,wCAAwC,KAAK,4CAA4C;4BAC/F,CAAC,CAAC,KAAK,CAAC,IAAI,IAAI,UAAU;gCAC1B,CAAC,CAAC,IAAI,CAAA,wCAAwC,KAAK,4CAA4C;gCAC/F,CAAC,CAAC,KAAK,CAAC,IAAI,IAAI,WAAW;oCAC3B,CAAC,CAAC,IAAI,CAAA,wCAAwC,KAAK,4CAA4C;oCAC/F,CAAC,CAAC,KAAK,CAAC,IAAI,IAAI,OAAO;wCACvB,CAAC,CAAC,IAAI,CAAA,0CAA0C,KAAK,8CAA8C;wCACnG,CAAC,CAAC,IAAI,CAAA,EAAE;KACX,CAAA;IACH,CAAC;;AA/DM,oBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+BF;CACF,AAjCY,CAiCZ;AAlCkB,aAAa;IADjC,aAAa,CAAC,yBAAyB,CAAC;GACpB,aAAa,CAiEjC;eAjEoB,aAAa","sourcesContent":["import '@operato/i18n/ox-i18n.js'\n\nimport './property-editor-chartjs-hbar'\nimport './property-editor-chartjs-mixed'\nimport './property-editor-chartjs-pie'\nimport './property-editor-chartjs-radar'\n\nimport { css, html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { OxPropertyEditor, PropertySpec } from '@operato/property-editor'\n\n@customElement('property-editor-chartjs')\nexport default class ChartJSEditor 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` <property-editor-chartjs-mixed .value=${value} fullwidth></property-editor-chartjs-mixed> `\n : value.type == 'horizontalBar'\n ? html` <property-editor-chartjs-hbar .value=${value} fullwidth></property-editor-chartjs-hbar> `\n : value.type == 'bar'\n ? html` <property-editor-chartjs-mixed .value=${value} fullwidth></property-editor-chartjs-mixed> `\n : value.type == 'pie'\n ? html` <property-editor-chartjs-pie .value=${value} fullwidth></property-editor-chartjs-pie> `\n : value.type == 'doughnut'\n ? html` <property-editor-chartjs-pie .value=${value} fullwidth></property-editor-chartjs-pie> `\n : value.type == 'polarArea'\n ? html` <property-editor-chartjs-pie .value=${value} fullwidth></property-editor-chartjs-pie> `\n : value.type == 'radar'\n ? html` <property-editor-chartjs-radar .value=${value} fullwidth></property-editor-chartjs-radar> `\n : html``}\n `\n }\n}\n"]}
@@ -1,324 +0,0 @@
1
- import '@operato/i18n/ox-i18n.js'
2
-
3
- import { html, LitElement } from 'lit'
4
- import { property } from 'lit/decorators.js'
5
-
6
- import { random as randomColor, TinyColor } from '@ctrl/tinycolor'
7
- import { Properties } from '@hatiolab/things-scene'
8
-
9
- import { PropertyEditorChartJSStyles } from './property-editor-chartjs-styles'
10
-
11
- export default class PropertyEditorChartJSAbstract extends LitElement {
12
- static styles = [PropertyEditorChartJSStyles]
13
-
14
- @property({ type: Object }) value: any = {}
15
- @property({ type: Number }) currentSeriesIndex: number = 0
16
-
17
- render() {
18
- return html`
19
- <legend><ox-i18n msgid="label.chart">Chart</ox-i18n></legend>
20
-
21
- <label> <ox-i18n msgid="label.theme">theme</ox-i18n> </label>
22
- <select value-key="theme" class="select-content" .value=${this.theme}>
23
- <option value="dark">dark</option>
24
- <option value="light">light</option>
25
- </select>
26
-
27
- <input type="checkbox" value-key="tooltip" .checked=${this.tooltip} />
28
- <label> <ox-i18n msgid="label.tooltip">Tooltip</ox-i18n> </label>
29
-
30
- <input type="checkbox" value-key="animation" .checked=${this.animation} />
31
- <label> <ox-i18n msgid="label.animation">Animation</ox-i18n> </label>
32
-
33
- <input type="checkbox" value-key="display" .checked=${this.display} />
34
- <label> <ox-i18n msgid="label.legend">Legend</ox-i18n> </label>
35
-
36
- <input type="checkbox" value-key="stacked" .checked=${this.stacked} />
37
- <label> <ox-i18n msgid="label.stacked">Stacked</ox-i18n> </label>
38
-
39
- ${this.display
40
- ? html`
41
- <label> <ox-i18n msgid="label.position">Position</ox-i18n> </label>
42
- <select value-key="position" class="select-content" .value=${this.position}>
43
- <option value="top">top</option>
44
- <option value="right">right</option>
45
- <option value="bottom">bottom</option>
46
- <option value="left">left</option>
47
- </select>
48
- `
49
- : html``}
50
- ${this.editorTemplate(this)}
51
- `
52
- }
53
-
54
- firstUpdated() {
55
- this.renderRoot.addEventListener('change', this.onValuesChanged.bind(this))
56
- }
57
-
58
- displayValueTemplate() {
59
- return html`
60
- <label for="value-format"> <ox-i18n msgid="label.value-format">Value Format</ox-i18n> </label>
61
- <input type="text" value-key="series.valueFormat" .value=${this.series.valueFormat || ''} list="format-list" />
62
- <datalist id="format-list">
63
- <option value="#,###."></option>
64
- <option value="#,###.#"></option>
65
- <option value="#,###.0"></option>
66
- <option value="#,##0.#"></option>
67
- <option value="#,##0.0"></option>
68
- <option value="#,##0.0%"></option>
69
- </datalist>
70
-
71
- <label> <ox-i18n msgid="label.value-prefix">Value Prefix</ox-i18n> </label>
72
- <input type="text" value-key="series.valuePrefix" .value=${this.series.valuePrefix || ''} />
73
-
74
- <label> <ox-i18n msgid="label.value-suffix">Value suffix</ox-i18n> </label>
75
- <input type="text" value-key="series.valueSuffix" .value=${this.series.valueSuffix || ''} />
76
-
77
- <input type="checkbox" value-key="series.displayValue" .checked=${this.series.displayValue || false} />
78
- <label> <ox-i18n msgid="label.value-display">Value Display</ox-i18n> </label>
79
-
80
- ${this.series.displayValue
81
- ? html`
82
- <label> <ox-i18n msgid="label.font-color">Font Color</ox-i18n> </label>
83
- <ox-input-color
84
- value-key="series.defaultFontColor"
85
- .value=${this.series.defaultFontColor || '#000'}
86
- ></ox-input-color>
87
- <label> <ox-i18n msgid="label.font-size">Font Size</ox-i18n> </label>
88
- <input type="number" value-key="series.defaultFontSize" .value=${this.series.defaultFontSize || 10} />
89
- <label> <ox-i18n msgid="label.position">Position</ox-i18n> </label>
90
- <select value-key="series.dataLabelAnchor" .value=${this.series.dataLabelAnchor || 'center'}>
91
- <option value="start">Start</option>
92
- <option value="center" selected>Center</option>
93
- <option value="end">End</option>
94
- </select>
95
- `
96
- : html``}
97
- `
98
- }
99
-
100
- editorTemplate(props: Properties) {
101
- return html``
102
- }
103
-
104
- get data() {
105
- return this.value.data
106
- }
107
-
108
- set data(data) {
109
- this.value.data = data
110
- }
111
-
112
- get datasets() {
113
- if (!this.data.datasets) this.data.datasets = []
114
-
115
- return this.data.datasets
116
- }
117
-
118
- set datasets(datasets) {
119
- this.datasets = datasets
120
- }
121
-
122
- get series() {
123
- if (!this.datasets[this.currentSeriesIndex]) this.datasets[this.currentSeriesIndex] = {}
124
- return this.datasets[this.currentSeriesIndex]
125
- }
126
-
127
- set series(series) {
128
- !this.data ? (this.data = { dataset: [series] }) : (this.datasets[this.currentSeriesIndex] = series)
129
- }
130
-
131
- set dataKey(key) {
132
- this.series.dataKey = key
133
- }
134
-
135
- get dataKey() {
136
- return this.series.dataKey
137
- }
138
-
139
- get legend() {
140
- !this.value.options && (this.value.options = {})
141
- return this.value.options.legend
142
- }
143
-
144
- set legend(legend) {
145
- this.value.options.legend = legend
146
- }
147
-
148
- get theme() {
149
- return this.value.options && this.value.options.theme
150
- }
151
-
152
- set theme(theme) {
153
- !this.value.options && (this.value.options = {})
154
- this.value.options.theme = theme
155
- }
156
-
157
- get tooltip() {
158
- return !this.value.options || this.value.options.tooltip !== false /* default true */
159
- }
160
-
161
- set tooltip(tooltip) {
162
- this.value.options.tooltip = tooltip
163
- }
164
-
165
- get animation() {
166
- return !this.value.options || this.value.options.animation !== false /* default true */
167
- }
168
-
169
- set animation(animation) {
170
- this.value.options.animation = animation
171
- }
172
-
173
- get scales() {
174
- return this.value.options.scales
175
- }
176
-
177
- set scales(scales) {
178
- !this.value.options && (this.value.options = {})
179
- this.value.options.scales = scales
180
- }
181
-
182
- get display() {
183
- return this.legend && this.legend.display
184
- }
185
-
186
- set display(display) {
187
- this.legend.display = display
188
- }
189
-
190
- get position() {
191
- return this.legend.position
192
- }
193
-
194
- set position(position) {
195
- this.legend.position = position
196
- }
197
-
198
- get stacked() {
199
- return this.value.options.stacked
200
- }
201
-
202
- set stacked(stacked) {
203
- this.value.options.stacked = stacked
204
- }
205
-
206
- get labelDataKey() {
207
- return this.data && this.data.labelDataKey
208
- }
209
-
210
- set labelDataKey(labelDataKey) {
211
- this.data.labelDataKey = labelDataKey
212
- }
213
-
214
- set options(options) {
215
- this.value.options = options
216
- }
217
-
218
- get options() {
219
- return this.value.options
220
- }
221
-
222
- onValuesChanged(e: Event) {
223
- var element = e.target as HTMLInputElement
224
- var key = element.getAttribute('value-key')
225
- var value = element.value
226
-
227
- if (!key) {
228
- return
229
- }
230
-
231
- value = this._getElementValue(element)
232
-
233
- var attrs = key.split('.')
234
- var attr = attrs.shift() || ''
235
- var variable = this
236
-
237
- while (attrs.length > 0) {
238
- //@ts-ignore
239
- variable = variable[attr]
240
- attr = attrs.shift() || ''
241
- }
242
-
243
- //@ts-ignore
244
- variable[attr] = value
245
-
246
- this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
247
- this.requestUpdate()
248
- }
249
-
250
- onTapAddTab(e: Event) {
251
- if (!this.value.data.datasets) return
252
-
253
- var lastSeriesIndex = this.value.data.datasets.length
254
- var chartType = this.series.type || this.value.type
255
- var lastSeriesColor = new TinyColor(this.datasets[lastSeriesIndex - 1].backgroundColor)
256
-
257
- var seriesModel = this._getSeriesModel({
258
- chartType,
259
- datasetsLength: lastSeriesIndex,
260
- lastSeriesColor
261
- })
262
-
263
- this.value.data.datasets.push(seriesModel)
264
- this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
265
- this.currentSeriesIndex = lastSeriesIndex
266
- }
267
-
268
- onTapRemoveCurrentTab(e: Event) {
269
- if (!this.value.data.datasets) return
270
-
271
- var currIndex = this.currentSeriesIndex
272
- this.value.data.datasets.splice(currIndex, 1)
273
-
274
- currIndex--
275
-
276
- if (currIndex < 0) currIndex = 0
277
-
278
- this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
279
- this.currentSeriesIndex = currIndex
280
-
281
- this.requestUpdate()
282
- }
283
-
284
- _getSeriesModel({
285
- chartType,
286
- datasetsLength,
287
- lastSeriesColor
288
- }: {
289
- chartType: any
290
- datasetsLength: number
291
- lastSeriesColor: TinyColor
292
- }) {
293
- var addSeriesOption: any = {
294
- label: `series ${datasetsLength + 1}`,
295
- data: [],
296
- borderWidth: 1,
297
- dataKey: '',
298
- yAxisID: 'left',
299
- color: randomColor({
300
- hue: lastSeriesColor as any
301
- }).toRgbString()
302
- }
303
-
304
- addSeriesOption.type = addSeriesOption.chartType = chartType
305
- return addSeriesOption
306
- }
307
-
308
- _getElementValue(element: HTMLElement) {
309
- switch (element.tagName) {
310
- case 'INPUT':
311
- switch ((element as HTMLInputElement).type) {
312
- case 'checkbox':
313
- return (element as HTMLInputElement).checked
314
- case 'number':
315
- return Number((element as HTMLInputElement).value) || 0
316
- case 'text':
317
- return String((element as HTMLInputElement).value)
318
- }
319
-
320
- default:
321
- return (element as any).value
322
- }
323
- }
324
- }