@operato/chart 9.0.0-beta.7 → 9.0.0-beta.70

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 (63) hide show
  1. package/CHANGELOG.md +331 -0
  2. package/dist/src/chartjs/config-converter.d.ts +1 -0
  3. package/dist/src/chartjs/config-converter.js.map +1 -1
  4. package/dist/src/chartjs/ox-chart-js.d.ts +3 -2
  5. package/dist/src/chartjs/ox-chart-js.js.map +1 -1
  6. package/dist/src/editors/configurer.d.ts +3 -2
  7. package/dist/src/editors/configurer.js.map +1 -1
  8. package/dist/src/editors/input-chart-abstract.d.ts +2 -1
  9. package/dist/src/editors/input-chart-abstract.js +1 -1
  10. package/dist/src/editors/input-chart-abstract.js.map +1 -1
  11. package/dist/src/editors/input-chart-styles.js +12 -11
  12. package/dist/src/editors/input-chart-styles.js.map +1 -1
  13. package/dist/src/editors/ox-input-chart-hbar.d.ts +1 -0
  14. package/dist/src/editors/ox-input-chart-hbar.js.map +1 -1
  15. package/dist/src/editors/ox-input-chart-pie.d.ts +1 -0
  16. package/dist/src/editors/ox-input-chart-pie.js.map +1 -1
  17. package/dist/src/editors/ox-input-chart-radar.d.ts +1 -0
  18. package/dist/src/editors/ox-input-chart-radar.js.map +1 -1
  19. package/dist/src/editors/ox-input-chart-timeseries.js +1 -1
  20. package/dist/src/editors/ox-input-chart-timeseries.js.map +1 -1
  21. package/dist/src/editors/ox-property-editor-chart.js +3 -3
  22. package/dist/src/editors/ox-property-editor-chart.js.map +1 -1
  23. package/dist/src/editors/templates/annotations.d.ts +1 -0
  24. package/dist/src/editors/templates/annotations.js.map +1 -1
  25. package/dist/src/editors/templates/series.d.ts +1 -0
  26. package/dist/src/editors/templates/series.js.map +1 -1
  27. package/dist/src/index.d.ts +1 -0
  28. package/dist/src/index.js +2 -1
  29. package/dist/src/index.js.map +1 -1
  30. package/dist/src/scichart/ox-scichart.d.ts +3 -2
  31. package/dist/src/scichart/ox-scichart.js.map +1 -1
  32. package/dist/src/scichart/scichart-builder.d.ts +1 -0
  33. package/dist/src/scichart/scichart-builder.js.map +1 -1
  34. package/dist/tsconfig.tsbuildinfo +1 -1
  35. package/package.json +13 -7
  36. package/types/types.d.ts +1 -1
  37. package/dist/stories/common.d.ts +0 -7
  38. package/dist/stories/common.js +0 -78
  39. package/dist/stories/common.js.map +0 -1
  40. package/dist/stories/ox-input-chart-bar.stories.d.ts +0 -25
  41. package/dist/stories/ox-input-chart-bar.stories.js +0 -173
  42. package/dist/stories/ox-input-chart-bar.stories.js.map +0 -1
  43. package/dist/stories/ox-input-chart-doughnut.stories.d.ts +0 -27
  44. package/dist/stories/ox-input-chart-doughnut.stories.js +0 -115
  45. package/dist/stories/ox-input-chart-doughnut.stories.js.map +0 -1
  46. package/dist/stories/ox-input-chart-hbar.stories.d.ts +0 -25
  47. package/dist/stories/ox-input-chart-hbar.stories.js +0 -174
  48. package/dist/stories/ox-input-chart-hbar.stories.js.map +0 -1
  49. package/dist/stories/ox-input-chart-line.stories.d.ts +0 -25
  50. package/dist/stories/ox-input-chart-line.stories.js +0 -184
  51. package/dist/stories/ox-input-chart-line.stories.js.map +0 -1
  52. package/dist/stories/ox-input-chart-pie.stories.d.ts +0 -27
  53. package/dist/stories/ox-input-chart-pie.stories.js +0 -115
  54. package/dist/stories/ox-input-chart-pie.stories.js.map +0 -1
  55. package/dist/stories/ox-input-chart-polar-area.stories.d.ts +0 -27
  56. package/dist/stories/ox-input-chart-polar-area.stories.js +0 -115
  57. package/dist/stories/ox-input-chart-polar-area.stories.js.map +0 -1
  58. package/dist/stories/ox-input-chart-radar.stories.d.ts +0 -27
  59. package/dist/stories/ox-input-chart-radar.stories.js +0 -126
  60. package/dist/stories/ox-input-chart-radar.stories.js.map +0 -1
  61. package/dist/stories/ox-input-chart-timeseries.stories.d.ts +0 -25
  62. package/dist/stories/ox-input-chart-timeseries.stories.js +0 -253
  63. package/dist/stories/ox-input-chart-timeseries.stories.js.map +0 -1
@@ -1,25 +0,0 @@
1
- import { TemplateResult } from 'lit';
2
- import '../src/editors/ox-input-chart-mixed.js';
3
- import '../src/chartjs/ox-chart-js.js';
4
- import '../src/scichart/ox-scichart.js';
5
- declare const _default: {
6
- title: string;
7
- component: string;
8
- argTypes: {
9
- value: {
10
- control: string;
11
- };
12
- };
13
- };
14
- export default _default;
15
- interface Story<T> {
16
- (args: T): TemplateResult;
17
- args?: Partial<T>;
18
- argTypes?: Record<string, unknown>;
19
- }
20
- interface ArgTypes {
21
- value: OperatoChart.ChartConfig;
22
- }
23
- export declare const Default: Story<ArgTypes>;
24
- export declare const WithData: Story<ArgTypes>;
25
- export declare const MultiAxis: Story<ArgTypes>;
@@ -1,173 +0,0 @@
1
- import { html } from 'lit';
2
- import '../src/editors/ox-input-chart-mixed.js';
3
- import '../src/chartjs/ox-chart-js.js';
4
- import '../src/scichart/ox-scichart.js';
5
- import { data, getDefaultChartConfig } from './common.js';
6
- export default {
7
- title: 'ox-input-chart-mixed for bar',
8
- component: 'ox-input-chart-mixed',
9
- argTypes: {
10
- value: { control: 'object' }
11
- }
12
- };
13
- function showCharts(e) {
14
- const target = e.currentTarget;
15
- const config = target.value;
16
- const chartjs = document.querySelector('#chartjs');
17
- if (chartjs) {
18
- ;
19
- chartjs.config = { ...config };
20
- }
21
- const scichart = document.querySelector('#scichart');
22
- if (scichart) {
23
- ;
24
- scichart.config = config;
25
- }
26
- }
27
- const Template = ({ value }) => html `
28
- <link
29
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
30
- rel="stylesheet"
31
- />
32
- <link
33
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
34
- rel="stylesheet"
35
- />
36
- <link
37
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
38
- rel="stylesheet"
39
- />
40
-
41
- <link href="/themes/light.css" rel="stylesheet" />
42
- <link href="/themes/dark.css" rel="stylesheet" />
43
- <link href="/themes/spacing.css" rel="stylesheet" />
44
-
45
- <style>
46
- .desc {
47
- color: var(--md-sys-color-background);
48
- background-color: var(--md-sys-color-on-background);
49
- padding: var(--spacing-small);
50
- }
51
-
52
- .container {
53
- display: flex;
54
- flex-direction: row;
55
- overflow-y: auto;
56
- padding: var(--spacing-medium);
57
- gap: var(--spacing-medium);
58
-
59
- color: var(--md-sys-color-on-background);
60
- background-color: var(--md-sys-color-background);
61
- }
62
-
63
- #editor {
64
- width: 300px;
65
- }
66
-
67
- #charts {
68
- flex: 1;
69
-
70
- display: flex;
71
- flex-direction: column;
72
- gap: var(--spacing-medium);
73
- }
74
-
75
- #chartjs {
76
- flex: 1;
77
- }
78
-
79
- #scichart {
80
- flex: 1;
81
- }
82
- </style>
83
-
84
- <div class="desc">Type 'count' or 'average' for series dataKey, type 'timestamp' for axis's dataKey</div>
85
-
86
- <div class="container">
87
- <ox-input-chart-mixed chart-type="bar" id="editor" .value=${value} @change=${showCharts}></ox-input-chart-mixed>
88
- <div id="charts">
89
- <ox-chart-js id="chartjs" .data=${data}></ox-chart-js>
90
- <ox-scichart id="scichart"></ox-scichart>
91
- </div>
92
- </div>
93
- `;
94
- export const Default = Template.bind({});
95
- Default.args = {
96
- value: {
97
- ...getDefaultChartConfig('bar')
98
- }
99
- };
100
- export const WithData = Template.bind({});
101
- WithData.args = {
102
- value: {
103
- ...getDefaultChartConfig('bar'),
104
- data: {
105
- datasets: [
106
- {
107
- label: 'Bar Series',
108
- type: 'bar',
109
- dataKey: 'count',
110
- backgroundColor: 'rgba(255, 99, 132, 0.2)',
111
- borderColor: 'rgba(255, 99, 132, 1)',
112
- borderWidth: 1
113
- },
114
- {
115
- label: 'Line Series',
116
- type: 'line',
117
- dataKey: 'average',
118
- borderColor: 'rgba(54, 162, 235, 1)',
119
- borderWidth: 1,
120
- fill: false,
121
- lineTension: 0.4,
122
- pointStyle: 'circle',
123
- pointRadius: 3
124
- }
125
- ],
126
- labelDataKey: 'timestamp'
127
- },
128
- options: {
129
- scales: {
130
- xAxes: [{ ticks: { beginAtZero: true } }],
131
- yAxes: [{ ticks: { beginAtZero: true } }]
132
- },
133
- legend: { display: true }
134
- }
135
- }
136
- };
137
- export const MultiAxis = Template.bind({});
138
- MultiAxis.args = {
139
- value: {
140
- ...getDefaultChartConfig('bar'),
141
- options: {
142
- ...getDefaultChartConfig('bar').options,
143
- multiAxis: true
144
- },
145
- data: {
146
- datasets: [
147
- {
148
- label: 'Bar Series',
149
- type: 'bar',
150
- dataKey: 'count',
151
- backgroundColor: 'rgba(255, 99, 132, 0.2)',
152
- borderColor: 'rgba(255, 99, 132, 1)',
153
- borderWidth: 1,
154
- yAxisID: 'left'
155
- },
156
- {
157
- label: 'Line Series',
158
- type: 'line',
159
- dataKey: 'average',
160
- borderColor: 'rgba(54, 162, 235, 1)',
161
- borderWidth: 1,
162
- fill: false,
163
- lineTension: 0.4,
164
- pointStyle: 'circle',
165
- pointRadius: 3,
166
- yAxisID: 'right'
167
- }
168
- ],
169
- labelDataKey: 'timestamp'
170
- }
171
- }
172
- };
173
- //# sourceMappingURL=ox-input-chart-bar.stories.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ox-input-chart-bar.stories.js","sourceRoot":"","sources":["../../stories/ox-input-chart-bar.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, TemplateResult } from 'lit'\n\nimport '../src/editors/ox-input-chart-mixed.js'\nimport '../src/chartjs/ox-chart-js.js'\nimport '../src/scichart/ox-scichart.js'\n\nimport { data, getDefaultChartConfig } from './common.js'\n\nexport default {\n title: 'ox-input-chart-mixed for bar',\n component: 'ox-input-chart-mixed',\n argTypes: {\n value: { control: 'object' }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n value: OperatoChart.ChartConfig\n}\n\nfunction showCharts(e: Event) {\n const target = e.currentTarget as any\n const config = target.value\n const chartjs = document.querySelector('#chartjs') as HTMLElement\n if (chartjs) {\n ;(chartjs as any).config = { ...config }\n }\n const scichart = document.querySelector('#scichart') as HTMLElement\n if (scichart) {\n ;(scichart as any).config = config\n }\n}\n\nconst Template: Story<ArgTypes> = ({ value }: ArgTypes) => html`\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n <style>\n .desc {\n color: var(--md-sys-color-background);\n background-color: var(--md-sys-color-on-background);\n padding: var(--spacing-small);\n }\n\n .container {\n display: flex;\n flex-direction: row;\n overflow-y: auto;\n padding: var(--spacing-medium);\n gap: var(--spacing-medium);\n\n color: var(--md-sys-color-on-background);\n background-color: var(--md-sys-color-background);\n }\n\n #editor {\n width: 300px;\n }\n\n #charts {\n flex: 1;\n\n display: flex;\n flex-direction: column;\n gap: var(--spacing-medium);\n }\n\n #chartjs {\n flex: 1;\n }\n\n #scichart {\n flex: 1;\n }\n </style>\n\n <div class=\"desc\">Type 'count' or 'average' for series dataKey, type 'timestamp' for axis's dataKey</div>\n\n <div class=\"container\">\n <ox-input-chart-mixed chart-type=\"bar\" id=\"editor\" .value=${value} @change=${showCharts}></ox-input-chart-mixed>\n <div id=\"charts\">\n <ox-chart-js id=\"chartjs\" .data=${data}></ox-chart-js>\n <ox-scichart id=\"scichart\"></ox-scichart>\n </div>\n </div>\n`\n\nexport const Default = Template.bind({})\nDefault.args = {\n value: {\n ...getDefaultChartConfig('bar')\n }\n}\n\nexport const WithData = Template.bind({})\nWithData.args = {\n value: {\n ...getDefaultChartConfig('bar'),\n data: {\n datasets: [\n {\n label: 'Bar Series',\n type: 'bar',\n dataKey: 'count',\n backgroundColor: 'rgba(255, 99, 132, 0.2)',\n borderColor: 'rgba(255, 99, 132, 1)',\n borderWidth: 1\n },\n {\n label: 'Line Series',\n type: 'line',\n dataKey: 'average',\n borderColor: 'rgba(54, 162, 235, 1)',\n borderWidth: 1,\n fill: false,\n lineTension: 0.4,\n pointStyle: 'circle',\n pointRadius: 3\n }\n ],\n labelDataKey: 'timestamp'\n },\n options: {\n scales: {\n xAxes: [{ ticks: { beginAtZero: true } }],\n yAxes: [{ ticks: { beginAtZero: true } }]\n },\n legend: { display: true }\n }\n }\n}\n\nexport const MultiAxis = Template.bind({})\nMultiAxis.args = {\n value: {\n ...getDefaultChartConfig('bar'),\n options: {\n ...getDefaultChartConfig('bar').options,\n multiAxis: true\n },\n data: {\n datasets: [\n {\n label: 'Bar Series',\n type: 'bar',\n dataKey: 'count',\n backgroundColor: 'rgba(255, 99, 132, 0.2)',\n borderColor: 'rgba(255, 99, 132, 1)',\n borderWidth: 1,\n yAxisID: 'left'\n },\n {\n label: 'Line Series',\n type: 'line',\n dataKey: 'average',\n borderColor: 'rgba(54, 162, 235, 1)',\n borderWidth: 1,\n fill: false,\n lineTension: 0.4,\n pointStyle: 'circle',\n pointRadius: 3,\n yAxisID: 'right'\n }\n ],\n labelDataKey: 'timestamp'\n }\n }\n}\n"]}
@@ -1,27 +0,0 @@
1
- import { TemplateResult } from 'lit';
2
- import '../src/editors/ox-input-chart-pie.js';
3
- import '../src/chartjs/ox-chart-js.js';
4
- declare const _default: {
5
- title: string;
6
- component: string;
7
- argTypes: {
8
- value: {
9
- control: string;
10
- };
11
- currentSeriesIndex: {
12
- control: string;
13
- };
14
- };
15
- };
16
- export default _default;
17
- interface Story<T> {
18
- (args: T): TemplateResult;
19
- args?: Partial<T>;
20
- argTypes?: Record<string, unknown>;
21
- }
22
- interface ArgTypes {
23
- value: OperatoChart.ChartConfig;
24
- currentSeriesIndex: number;
25
- }
26
- export declare const Default: Story<ArgTypes>;
27
- export declare const WithData: Story<ArgTypes>;
@@ -1,115 +0,0 @@
1
- import { html } from 'lit';
2
- import '../src/editors/ox-input-chart-pie.js';
3
- import '../src/chartjs/ox-chart-js.js';
4
- import { data, getDefaultChartConfig } from './common.js';
5
- export default {
6
- title: 'ox-input-chart-pie for doughnut',
7
- component: 'ox-input-chart-pie',
8
- argTypes: {
9
- value: { control: 'object' },
10
- currentSeriesIndex: { control: 'number' }
11
- }
12
- };
13
- const Template = ({ value, currentSeriesIndex }) => html `
14
- <link
15
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
16
- rel="stylesheet"
17
- />
18
- <link
19
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
20
- rel="stylesheet"
21
- />
22
- <link
23
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
24
- rel="stylesheet"
25
- />
26
-
27
- <link href="/themes/light.css" rel="stylesheet" />
28
- <link href="/themes/dark.css" rel="stylesheet" />
29
- <link href="/themes/spacing.css" rel="stylesheet" />
30
-
31
- <style>
32
- .container {
33
- width: 100%;
34
- height: 100%;
35
-
36
- display: flex;
37
- flex-direction: row;
38
- overflow-y: auto;
39
- padding: var(--spacing-medium);
40
- }
41
-
42
- .container.dark {
43
- background-color: black;
44
- }
45
-
46
- #editor {
47
- width: 300px;
48
- }
49
-
50
- #chart {
51
- flex: 1;
52
- }
53
- </style>
54
-
55
- <div style="background-color: black; color: white;">
56
- Type 'count' or 'average' for series dataKey, type 'timestamp' for axis's dataKey
57
- </div>
58
-
59
- <div class="container light">
60
- <ox-input-chart-pie
61
- chart-type="doughnut"
62
- id="editor"
63
- .value=${value}
64
- @change=${(e) => {
65
- const target = e.currentTarget;
66
- const config = target.value;
67
- const chartjs = document.querySelector('#chartjs');
68
- if (chartjs) {
69
- ;
70
- chartjs.config = { ...config };
71
- }
72
- const container = document.querySelector('.container');
73
- if (container) {
74
- const theme = config.options.theme;
75
- if (theme == 'dark') {
76
- container.classList.remove('light');
77
- container.classList.add('dark');
78
- }
79
- else {
80
- container.classList.remove('dark');
81
- container.classList.add('light');
82
- }
83
- }
84
- }}
85
- ></ox-input-chart-pie>
86
- <ox-chart-js id="chartjs" .data=${data}></ox-chart-js>
87
- </div>
88
- `;
89
- export const Default = Template.bind({});
90
- Default.args = {
91
- currentSeriesIndex: 0
92
- };
93
- export const WithData = Template.bind({});
94
- WithData.args = {
95
- value: {
96
- ...getDefaultChartConfig('doughnut'),
97
- data: {
98
- datasets: [
99
- {
100
- label: 'Doughnut Series',
101
- data: [10, 20, 30],
102
- backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(75, 192, 192, 0.2)'],
103
- borderColor: ['rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(75, 192, 192, 1)'],
104
- borderWidth: 1
105
- }
106
- ],
107
- labelDataKey: 'labels'
108
- },
109
- options: {
110
- legend: { display: true }
111
- }
112
- },
113
- currentSeriesIndex: 0
114
- };
115
- //# sourceMappingURL=ox-input-chart-doughnut.stories.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ox-input-chart-doughnut.stories.js","sourceRoot":"","sources":["../../stories/ox-input-chart-doughnut.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,OAAO,sCAAsC,CAAA;AAC7C,OAAO,+BAA+B,CAAA;AAEtC,OAAO,EAAE,IAAI,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAA;AAEzD,eAAe;IACb,KAAK,EAAE,iCAAiC;IACxC,SAAS,EAAE,oBAAoB;IAC/B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,kBAAkB,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;KAC1C;CACF,CAAA;AAaD,MAAM,QAAQ,GAAoB,CAAC,EAAE,KAAK,EAAE,kBAAkB,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eAkDpE,KAAK;gBACJ,CAAC,CAAc,EAAE,EAAE;IAC3B,MAAM,MAAM,GAAG,CAAC,CAAC,aAAoB,CAAA;IACrC,MAAM,MAAM,GAAG,MAAM,CAAC,KAAK,CAAA;IAC3B,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAgB,CAAA;IACjE,IAAI,OAAO,EAAE,CAAC;QACZ,CAAC;QAAC,OAAe,CAAC,MAAM,GAAG,EAAE,GAAG,MAAM,EAAE,CAAA;IAC1C,CAAC;IAED,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,YAAY,CAAgB,CAAA;IACrE,IAAI,SAAS,EAAE,CAAC;QACd,MAAM,KAAK,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAA;QAClC,IAAI,KAAK,IAAI,MAAM,EAAE,CAAC;YACpB,SAAS,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;YACnC,SAAS,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAA;QACjC,CAAC;aAAM,CAAC;YACN,SAAS,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAA;YAClC,SAAS,CAAC,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;QAClC,CAAC;IACH,CAAC;AACH,CAAC;;sCAE+B,IAAI;;CAEzC,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,kBAAkB,EAAE,CAAC;CACtB,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACzC,QAAQ,CAAC,IAAI,GAAG;IACd,KAAK,EAAE;QACL,GAAG,qBAAqB,CAAC,UAAU,CAAC;QACpC,IAAI,EAAE;YACJ,QAAQ,EAAE;gBACR;oBACE,KAAK,EAAE,iBAAiB;oBACxB,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;oBAClB,eAAe,EAAE,CAAC,yBAAyB,EAAE,yBAAyB,EAAE,yBAAyB,CAAC;oBAClG,WAAW,EAAE,CAAC,uBAAuB,EAAE,uBAAuB,EAAE,uBAAuB,CAAC;oBACxF,WAAW,EAAE,CAAC;iBACf;aACF;YACD,YAAY,EAAE,QAAQ;SACvB;QACD,OAAO,EAAE;YACP,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;SAC1B;KACF;IACD,kBAAkB,EAAE,CAAC;CACtB,CAAA","sourcesContent":["import { html, TemplateResult } from 'lit'\n\nimport '../src/editors/ox-input-chart-pie.js'\nimport '../src/chartjs/ox-chart-js.js'\n\nimport { data, getDefaultChartConfig } from './common.js'\n\nexport default {\n title: 'ox-input-chart-pie for doughnut',\n component: 'ox-input-chart-pie',\n argTypes: {\n value: { control: 'object' },\n currentSeriesIndex: { control: 'number' }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n value: OperatoChart.ChartConfig\n currentSeriesIndex: number\n}\n\nconst Template: Story<ArgTypes> = ({ value, currentSeriesIndex }: ArgTypes) => html`\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n <style>\n .container {\n width: 100%;\n height: 100%;\n\n display: flex;\n flex-direction: row;\n overflow-y: auto;\n padding: var(--spacing-medium);\n }\n\n .container.dark {\n background-color: black;\n }\n\n #editor {\n width: 300px;\n }\n\n #chart {\n flex: 1;\n }\n </style>\n\n <div style=\"background-color: black; color: white;\">\n Type 'count' or 'average' for series dataKey, type 'timestamp' for axis's dataKey\n </div>\n\n <div class=\"container light\">\n <ox-input-chart-pie\n chart-type=\"doughnut\"\n id=\"editor\"\n .value=${value}\n @change=${(e: CustomEvent) => {\n const target = e.currentTarget as any\n const config = target.value\n const chartjs = document.querySelector('#chartjs') as HTMLElement\n if (chartjs) {\n ;(chartjs as any).config = { ...config }\n }\n\n const container = document.querySelector('.container') as HTMLElement\n if (container) {\n const theme = config.options.theme\n if (theme == 'dark') {\n container.classList.remove('light')\n container.classList.add('dark')\n } else {\n container.classList.remove('dark')\n container.classList.add('light')\n }\n }\n }}\n ></ox-input-chart-pie>\n <ox-chart-js id=\"chartjs\" .data=${data}></ox-chart-js>\n </div>\n`\n\nexport const Default = Template.bind({})\nDefault.args = {\n currentSeriesIndex: 0\n}\n\nexport const WithData = Template.bind({})\nWithData.args = {\n value: {\n ...getDefaultChartConfig('doughnut'),\n data: {\n datasets: [\n {\n label: 'Doughnut Series',\n data: [10, 20, 30],\n backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(75, 192, 192, 0.2)'],\n borderColor: ['rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(75, 192, 192, 1)'],\n borderWidth: 1\n }\n ],\n labelDataKey: 'labels'\n },\n options: {\n legend: { display: true }\n }\n },\n currentSeriesIndex: 0\n}\n"]}
@@ -1,25 +0,0 @@
1
- import { TemplateResult } from 'lit';
2
- import '../src/editors/ox-input-chart-hbar.js';
3
- import '../src/chartjs/ox-chart-js.js';
4
- import '../src/scichart/ox-scichart.js';
5
- declare const _default: {
6
- title: string;
7
- component: string;
8
- argTypes: {
9
- value: {
10
- control: string;
11
- };
12
- };
13
- };
14
- export default _default;
15
- interface Story<T> {
16
- (args: T): TemplateResult;
17
- args?: Partial<T>;
18
- argTypes?: Record<string, unknown>;
19
- }
20
- interface ArgTypes {
21
- value: OperatoChart.ChartConfig;
22
- }
23
- export declare const Default: Story<ArgTypes>;
24
- export declare const WithData: Story<ArgTypes>;
25
- export declare const MultiAxis: Story<ArgTypes>;
@@ -1,174 +0,0 @@
1
- import { html } from 'lit';
2
- import '../src/editors/ox-input-chart-hbar.js';
3
- import '../src/chartjs/ox-chart-js.js';
4
- import '../src/scichart/ox-scichart.js';
5
- import { data, getDefaultChartConfig } from './common.js';
6
- export default {
7
- title: 'ox-input-chart-hbar',
8
- component: 'ox-input-chart-hbar',
9
- argTypes: {
10
- value: { control: 'object' }
11
- }
12
- };
13
- const Template = ({ value }) => html `
14
- <link
15
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
16
- rel="stylesheet"
17
- />
18
- <link
19
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
20
- rel="stylesheet"
21
- />
22
- <link
23
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
24
- rel="stylesheet"
25
- />
26
-
27
- <link href="/themes/light.css" rel="stylesheet" />
28
- <link href="/themes/dark.css" rel="stylesheet" />
29
- <link href="/themes/spacing.css" rel="stylesheet" />
30
-
31
- <style>
32
- .container {
33
- width: 100%;
34
- height: 100%;
35
-
36
- display: flex;
37
- flex-direction: row;
38
- overflow-y: auto;
39
- padding: var(--spacing-medium);
40
- }
41
-
42
- .container.dark {
43
- background-color: black;
44
- }
45
-
46
- #editor {
47
- width: 300px;
48
- }
49
-
50
- #charts {
51
- flex: 1;
52
-
53
- display: flex;
54
- flex-direction: column;
55
- padding: 10px;
56
- }
57
-
58
- #chartjs {
59
- flex: 1;
60
- }
61
-
62
- #scichart {
63
- flex: 1;
64
- }
65
- </style>
66
-
67
- <div style="background-color: black; color: white;">
68
- Type 'count' or 'average' for series dataKey, type 'timestamp' for axis's dataKey
69
- </div>
70
- <div class="container light">
71
- <ox-input-chart-hbar
72
- chart-type="horizontalBar"
73
- id="editor"
74
- .value=${value}
75
- @change=${async (e) => {
76
- const target = e.currentTarget;
77
- const config = target.value;
78
- const chartjs = document.querySelector('#chartjs');
79
- if (chartjs) {
80
- ;
81
- chartjs.config = { ...config };
82
- }
83
- const scichart = document.querySelector('#scichart');
84
- if (scichart) {
85
- ;
86
- scichart.config = config;
87
- }
88
- const container = document.querySelector('.container');
89
- if (container) {
90
- const theme = config.options.theme;
91
- if (theme == 'dark') {
92
- container.classList.remove('light');
93
- container.classList.add('dark');
94
- }
95
- else {
96
- container.classList.remove('dark');
97
- container.classList.add('light');
98
- }
99
- }
100
- }}
101
- ></ox-input-chart-hbar>
102
- <div id="charts">
103
- <ox-chart-js id="chartjs" .data=${data}></ox-chart-js>
104
- <ox-scichart id="scichart"></ox-scichart>
105
- </div>
106
- </div>
107
- `;
108
- export const Default = Template.bind({});
109
- Default.args = {};
110
- // 다양한 데이터셋과 함께 사용하는 스토리
111
- export const WithData = Template.bind({});
112
- WithData.args = {
113
- value: {
114
- ...getDefaultChartConfig('bar'),
115
- data: {
116
- datasets: [
117
- {
118
- label: 'Series 1',
119
- data: [10, 20, 30],
120
- backgroundColor: 'rgba(255, 99, 132, 0.2)',
121
- borderColor: 'rgba(255, 99, 132, 1)',
122
- borderWidth: 1
123
- },
124
- {
125
- label: 'Series 2',
126
- data: [15, 25, 35],
127
- backgroundColor: 'rgba(54, 162, 235, 0.2)',
128
- borderColor: 'rgba(54, 162, 235, 1)',
129
- borderWidth: 1
130
- }
131
- ],
132
- labelDataKey: 'labels'
133
- },
134
- options: {
135
- scales: {
136
- xAxes: [{ ticks: { beginAtZero: true } }],
137
- yAxes: [{ ticks: { beginAtZero: true } }]
138
- },
139
- legend: { display: true }
140
- }
141
- }
142
- };
143
- export const MultiAxis = Template.bind({});
144
- MultiAxis.args = {
145
- value: {
146
- ...getDefaultChartConfig('bar'),
147
- options: {
148
- ...getDefaultChartConfig('bar').options,
149
- multiAxis: true
150
- },
151
- data: {
152
- datasets: [
153
- {
154
- label: 'Series 1',
155
- data: [10, 20, 30],
156
- backgroundColor: 'rgba(255, 99, 132, 0.2)',
157
- borderColor: 'rgba(255, 99, 132, 1)',
158
- borderWidth: 1,
159
- yAxisID: 'left'
160
- },
161
- {
162
- label: 'Series 2',
163
- data: [15, 25, 35],
164
- backgroundColor: 'rgba(54, 162, 235, 0.2)',
165
- borderColor: 'rgba(54, 162, 235, 1)',
166
- borderWidth: 1,
167
- yAxisID: 'right'
168
- }
169
- ],
170
- labelDataKey: 'labels'
171
- }
172
- }
173
- };
174
- //# sourceMappingURL=ox-input-chart-hbar.stories.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ox-input-chart-hbar.stories.js","sourceRoot":"","sources":["../../stories/ox-input-chart-hbar.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, TemplateResult } from 'lit'\n\nimport '../src/editors/ox-input-chart-hbar.js'\nimport '../src/chartjs/ox-chart-js.js'\nimport '../src/scichart/ox-scichart.js'\n\nimport { data, getDefaultChartConfig } from './common.js'\n\nexport default {\n title: 'ox-input-chart-hbar',\n component: 'ox-input-chart-hbar',\n argTypes: {\n value: { control: 'object' }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n value: OperatoChart.ChartConfig\n}\n\nconst Template: Story<ArgTypes> = ({ value }: ArgTypes) => html`\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n <style>\n .container {\n width: 100%;\n height: 100%;\n\n display: flex;\n flex-direction: row;\n overflow-y: auto;\n padding: var(--spacing-medium);\n }\n\n .container.dark {\n background-color: black;\n }\n\n #editor {\n width: 300px;\n }\n\n #charts {\n flex: 1;\n\n display: flex;\n flex-direction: column;\n padding: 10px;\n }\n\n #chartjs {\n flex: 1;\n }\n\n #scichart {\n flex: 1;\n }\n </style>\n\n <div style=\"background-color: black; color: white;\">\n Type 'count' or 'average' for series dataKey, type 'timestamp' for axis's dataKey\n </div>\n <div class=\"container light\">\n <ox-input-chart-hbar\n chart-type=\"horizontalBar\"\n id=\"editor\"\n .value=${value}\n @change=${async (e: CustomEvent) => {\n const target = e.currentTarget as any\n const config = target.value\n const chartjs = document.querySelector('#chartjs') as HTMLElement\n if (chartjs) {\n ;(chartjs as any).config = { ...config }\n }\n const scichart = document.querySelector('#scichart') as HTMLElement\n if (scichart) {\n ;(scichart as any).config = config\n }\n\n const container = document.querySelector('.container') as HTMLElement\n if (container) {\n const theme = config.options.theme\n if (theme == 'dark') {\n container.classList.remove('light')\n container.classList.add('dark')\n } else {\n container.classList.remove('dark')\n container.classList.add('light')\n }\n }\n }}\n ></ox-input-chart-hbar>\n <div id=\"charts\">\n <ox-chart-js id=\"chartjs\" .data=${data}></ox-chart-js>\n <ox-scichart id=\"scichart\"></ox-scichart>\n </div>\n </div>\n`\n\nexport const Default = Template.bind({})\nDefault.args = {}\n\n// 다양한 데이터셋과 함께 사용하는 스토리\nexport const WithData = Template.bind({})\nWithData.args = {\n value: {\n ...getDefaultChartConfig('bar'),\n data: {\n datasets: [\n {\n label: 'Series 1',\n data: [10, 20, 30],\n backgroundColor: 'rgba(255, 99, 132, 0.2)',\n borderColor: 'rgba(255, 99, 132, 1)',\n borderWidth: 1\n },\n {\n label: 'Series 2',\n data: [15, 25, 35],\n backgroundColor: 'rgba(54, 162, 235, 0.2)',\n borderColor: 'rgba(54, 162, 235, 1)',\n borderWidth: 1\n }\n ],\n labelDataKey: 'labels'\n },\n options: {\n scales: {\n xAxes: [{ ticks: { beginAtZero: true } }],\n yAxes: [{ ticks: { beginAtZero: true } }]\n },\n legend: { display: true }\n }\n }\n}\n\nexport const MultiAxis = Template.bind({})\nMultiAxis.args = {\n value: {\n ...getDefaultChartConfig('bar'),\n options: {\n ...getDefaultChartConfig('bar').options,\n multiAxis: true\n },\n data: {\n datasets: [\n {\n label: 'Series 1',\n data: [10, 20, 30],\n backgroundColor: 'rgba(255, 99, 132, 0.2)',\n borderColor: 'rgba(255, 99, 132, 1)',\n borderWidth: 1,\n yAxisID: 'left'\n },\n {\n label: 'Series 2',\n data: [15, 25, 35],\n backgroundColor: 'rgba(54, 162, 235, 0.2)',\n borderColor: 'rgba(54, 162, 235, 1)',\n borderWidth: 1,\n yAxisID: 'right'\n }\n ],\n labelDataKey: 'labels'\n }\n }\n}\n"]}
@@ -1,25 +0,0 @@
1
- import { TemplateResult } from 'lit';
2
- import '../src/editors/ox-input-chart-mixed.js';
3
- import '../src/chartjs/ox-chart-js.js';
4
- import '../src/scichart/ox-scichart.js';
5
- declare const _default: {
6
- title: string;
7
- component: string;
8
- argTypes: {
9
- value: {
10
- control: string;
11
- };
12
- };
13
- };
14
- export default _default;
15
- interface Story<T> {
16
- (args: T): TemplateResult;
17
- args?: Partial<T>;
18
- argTypes?: Record<string, unknown>;
19
- }
20
- interface ArgTypes {
21
- value: OperatoChart.ChartConfig;
22
- }
23
- export declare const Default: Story<ArgTypes>;
24
- export declare const WithData: Story<ArgTypes>;
25
- export declare const MultiAxis: Story<ArgTypes>;