@operato/chart 7.0.0 → 7.0.1
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 +9 -0
- package/dist/src/progress/ox-progress-circle.d.ts +41 -0
- package/dist/src/progress/ox-progress-circle.js +169 -0
- package/dist/src/progress/ox-progress-circle.js.map +1 -0
- package/dist/src/scichart/ox-scichart.d.ts +2 -2
- package/dist/src/scichart/ox-scichart.js +26 -20
- package/dist/src/scichart/ox-scichart.js.map +1 -1
- package/dist/src/scichart/scichart-builder.d.ts +1 -1
- package/dist/src/scichart/scichart-builder.js +74 -20
- package/dist/src/scichart/scichart-builder.js.map +1 -1
- package/dist/stories/common.d.ts +1 -1
- package/dist/stories/common.js +31 -9
- package/dist/stories/common.js.map +1 -1
- package/dist/stories/ox-input-chart-bar.stories.js +32 -47
- package/dist/stories/ox-input-chart-bar.stories.js.map +1 -1
- package/dist/stories/ox-input-chart-doughnut.stories.js +1 -1
- package/dist/stories/ox-input-chart-doughnut.stories.js.map +1 -1
- package/dist/stories/ox-input-chart-hbar.stories.js +1 -1
- package/dist/stories/ox-input-chart-hbar.stories.js.map +1 -1
- package/dist/stories/ox-input-chart-line.stories.js +1 -1
- package/dist/stories/ox-input-chart-line.stories.js.map +1 -1
- package/dist/stories/ox-input-chart-pie.stories.js +1 -1
- package/dist/stories/ox-input-chart-pie.stories.js.map +1 -1
- package/dist/stories/ox-input-chart-polar-area.stories.js +1 -1
- package/dist/stories/ox-input-chart-polar-area.stories.js.map +1 -1
- package/dist/stories/ox-input-chart-radar.stories.js +1 -1
- package/dist/stories/ox-input-chart-radar.stories.js.map +1 -1
- package/dist/stories/ox-input-chart-timeseries.stories.js +35 -45
- package/dist/stories/ox-input-chart-timeseries.stories.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -2
- package/src/progress/ox-progress-circle.ts +133 -0
- package/src/scichart/ox-scichart.ts +33 -29
- package/src/scichart/scichart-builder.ts +92 -38
- package/stories/common.ts +36 -9
- package/stories/ox-input-chart-bar.stories.ts +31 -45
- package/stories/ox-input-chart-doughnut.stories.ts +1 -1
- package/stories/ox-input-chart-hbar.stories.ts +1 -1
- package/stories/ox-input-chart-line.stories.ts +1 -1
- package/stories/ox-input-chart-pie.stories.ts +1 -1
- package/stories/ox-input-chart-polar-area.stories.ts +1 -1
- package/stories/ox-input-chart-radar.stories.ts +1 -1
- package/stories/ox-input-chart-timeseries.stories.ts +34 -43
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,15 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
### [7.0.1](https://github.com/hatiolab/operato/compare/v7.1.0...v7.0.1) (2024-07-01)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### :bug: Bug Fix
|
|
10
|
+
|
|
11
|
+
* chart inputs for scichart ([dc8d19f](https://github.com/hatiolab/operato/commit/dc8d19fb92ba62ac773d958dc5709f13b806cfde))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
6
15
|
## [7.0.0](https://github.com/hatiolab/operato/compare/v7.0.0-rc.13...v7.0.0) (2024-06-30)
|
|
7
16
|
|
|
8
17
|
**Note:** Version bump only for package @operato/chart
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license Copyright © HatioLab Inc. All rights reserved.
|
|
3
|
+
*/
|
|
4
|
+
import { PropertyValues, LitElement } from 'lit';
|
|
5
|
+
/**
|
|
6
|
+
WEB Component for code-mirror code editor.
|
|
7
|
+
|
|
8
|
+
Example:
|
|
9
|
+
<ox-progress-circle
|
|
10
|
+
.value=${70}
|
|
11
|
+
titleText="전체"
|
|
12
|
+
suffix="%"
|
|
13
|
+
fontSize="29px"
|
|
14
|
+
fontColor="#4E5055"
|
|
15
|
+
borderStyle="none"
|
|
16
|
+
innerCircleSize="28%"
|
|
17
|
+
circleColor="#0595E5"
|
|
18
|
+
shadow="#00000026 4px 4px 4px"
|
|
19
|
+
background="#eaf5fd"
|
|
20
|
+
></ox-progress-circle>
|
|
21
|
+
*/
|
|
22
|
+
export declare class OxProgressCircle extends LitElement {
|
|
23
|
+
static styles: import("lit").CSSResult[];
|
|
24
|
+
value: number;
|
|
25
|
+
suffix: string;
|
|
26
|
+
titleText: string;
|
|
27
|
+
fontSize: string;
|
|
28
|
+
fontColor: string;
|
|
29
|
+
borderStyle: string;
|
|
30
|
+
innerCircleSize: string;
|
|
31
|
+
shadow: string;
|
|
32
|
+
circleColor: string;
|
|
33
|
+
background: string;
|
|
34
|
+
circle: HTMLDivElement;
|
|
35
|
+
innerCircle: HTMLDivElement;
|
|
36
|
+
progressTitle?: HTMLSpanElement;
|
|
37
|
+
firstUpdated(): void;
|
|
38
|
+
updated(changes: PropertyValues<this>): void;
|
|
39
|
+
updateCircleBackground(): void;
|
|
40
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
41
|
+
}
|
|
@@ -0,0 +1,169 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license Copyright © HatioLab Inc. All rights reserved.
|
|
3
|
+
*/
|
|
4
|
+
import { __decorate } from "tslib";
|
|
5
|
+
import { LitElement, css, html } from 'lit';
|
|
6
|
+
import { customElement, property, query } from 'lit/decorators.js';
|
|
7
|
+
import { ScrollbarStyles } from '@operato/styles';
|
|
8
|
+
/**
|
|
9
|
+
WEB Component for code-mirror code editor.
|
|
10
|
+
|
|
11
|
+
Example:
|
|
12
|
+
<ox-progress-circle
|
|
13
|
+
.value=${70}
|
|
14
|
+
titleText="전체"
|
|
15
|
+
suffix="%"
|
|
16
|
+
fontSize="29px"
|
|
17
|
+
fontColor="#4E5055"
|
|
18
|
+
borderStyle="none"
|
|
19
|
+
innerCircleSize="28%"
|
|
20
|
+
circleColor="#0595E5"
|
|
21
|
+
shadow="#00000026 4px 4px 4px"
|
|
22
|
+
background="#eaf5fd"
|
|
23
|
+
></ox-progress-circle>
|
|
24
|
+
*/
|
|
25
|
+
let OxProgressCircle = class OxProgressCircle extends LitElement {
|
|
26
|
+
constructor() {
|
|
27
|
+
super(...arguments);
|
|
28
|
+
this.value = 0;
|
|
29
|
+
this.suffix = '';
|
|
30
|
+
this.titleText = '';
|
|
31
|
+
this.fontSize = '10px';
|
|
32
|
+
this.fontColor = '';
|
|
33
|
+
this.borderStyle = '';
|
|
34
|
+
this.innerCircleSize = '10%';
|
|
35
|
+
this.shadow = '';
|
|
36
|
+
this.circleColor = 'yellowgreen';
|
|
37
|
+
this.background = '';
|
|
38
|
+
}
|
|
39
|
+
static { this.styles = [
|
|
40
|
+
ScrollbarStyles,
|
|
41
|
+
css `
|
|
42
|
+
:host {
|
|
43
|
+
display: flex;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
div[circle] {
|
|
47
|
+
font-size: 29px;
|
|
48
|
+
font-weight: bold;
|
|
49
|
+
width: 100%;
|
|
50
|
+
aspect-ratio: 1;
|
|
51
|
+
display: flex;
|
|
52
|
+
border-radius: 50%;
|
|
53
|
+
border: 1px solid #353b48;
|
|
54
|
+
position: relative;
|
|
55
|
+
background: conic-gradient(yellowgreen 0deg, white 0deg);
|
|
56
|
+
box-shadow: #00000026 5px 5px 5px;
|
|
57
|
+
}
|
|
58
|
+
div[inner-circle] {
|
|
59
|
+
width: 90%;
|
|
60
|
+
aspect-ratio: 1;
|
|
61
|
+
border-radius: inherit;
|
|
62
|
+
background-color: #353b48;
|
|
63
|
+
margin: auto;
|
|
64
|
+
display: flex;
|
|
65
|
+
flex-direction: column;
|
|
66
|
+
align-items: center;
|
|
67
|
+
color: white;
|
|
68
|
+
justify-content: center;
|
|
69
|
+
box-shadow: inset #00000026 -2px 2px 8px;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
div[inner-circle] span {
|
|
73
|
+
display: flex;
|
|
74
|
+
align-items: center;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
span[progress-title] {
|
|
78
|
+
font-size: 0.65em;
|
|
79
|
+
margin-bottom: -5%;
|
|
80
|
+
}
|
|
81
|
+
`
|
|
82
|
+
]; }
|
|
83
|
+
firstUpdated() {
|
|
84
|
+
if (this.fontSize) {
|
|
85
|
+
this.circle.style.fontSize = this.fontSize;
|
|
86
|
+
}
|
|
87
|
+
if (this.fontColor) {
|
|
88
|
+
this.innerCircle.style.color = this.fontColor;
|
|
89
|
+
}
|
|
90
|
+
if (this.borderStyle) {
|
|
91
|
+
this.circle.style.border = this.borderStyle;
|
|
92
|
+
}
|
|
93
|
+
if (this.innerCircleSize) {
|
|
94
|
+
this.innerCircle.style.width = `calc(100% - ${this.innerCircleSize})`;
|
|
95
|
+
}
|
|
96
|
+
if (this.shadow) {
|
|
97
|
+
this.circle.style.boxShadow = this.shadow;
|
|
98
|
+
}
|
|
99
|
+
if (this.background) {
|
|
100
|
+
this.innerCircle.style.background = this.background;
|
|
101
|
+
}
|
|
102
|
+
if (this.progressTitle && this.circleColor) {
|
|
103
|
+
this.progressTitle.style.color = this.circleColor;
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
updated(changes) {
|
|
107
|
+
if (changes.has('value')) {
|
|
108
|
+
this.updateCircleBackground();
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
updateCircleBackground() {
|
|
112
|
+
const position = this.value * 3.6; // 360 = 100%
|
|
113
|
+
this.circle.style.background = `conic-gradient(${this.circleColor} ${position}deg, ${this.background} 0deg)`;
|
|
114
|
+
}
|
|
115
|
+
render() {
|
|
116
|
+
return html `
|
|
117
|
+
<div circle>
|
|
118
|
+
<div inner-circle>
|
|
119
|
+
${this.titleText ? html `<span progress-title>${this.titleText}</span>` : ''}
|
|
120
|
+
<span>${this.value}${this.suffix}</span>
|
|
121
|
+
</div>
|
|
122
|
+
</div>
|
|
123
|
+
`;
|
|
124
|
+
}
|
|
125
|
+
};
|
|
126
|
+
__decorate([
|
|
127
|
+
property({ type: Number })
|
|
128
|
+
], OxProgressCircle.prototype, "value", void 0);
|
|
129
|
+
__decorate([
|
|
130
|
+
property({ type: String })
|
|
131
|
+
], OxProgressCircle.prototype, "suffix", void 0);
|
|
132
|
+
__decorate([
|
|
133
|
+
property({ type: String })
|
|
134
|
+
], OxProgressCircle.prototype, "titleText", void 0);
|
|
135
|
+
__decorate([
|
|
136
|
+
property({ type: String })
|
|
137
|
+
], OxProgressCircle.prototype, "fontSize", void 0);
|
|
138
|
+
__decorate([
|
|
139
|
+
property({ type: String })
|
|
140
|
+
], OxProgressCircle.prototype, "fontColor", void 0);
|
|
141
|
+
__decorate([
|
|
142
|
+
property({ type: String })
|
|
143
|
+
], OxProgressCircle.prototype, "borderStyle", void 0);
|
|
144
|
+
__decorate([
|
|
145
|
+
property({ type: String })
|
|
146
|
+
], OxProgressCircle.prototype, "innerCircleSize", void 0);
|
|
147
|
+
__decorate([
|
|
148
|
+
property({ type: String })
|
|
149
|
+
], OxProgressCircle.prototype, "shadow", void 0);
|
|
150
|
+
__decorate([
|
|
151
|
+
property({ type: String })
|
|
152
|
+
], OxProgressCircle.prototype, "circleColor", void 0);
|
|
153
|
+
__decorate([
|
|
154
|
+
property({ type: String })
|
|
155
|
+
], OxProgressCircle.prototype, "background", void 0);
|
|
156
|
+
__decorate([
|
|
157
|
+
query('div[circle]')
|
|
158
|
+
], OxProgressCircle.prototype, "circle", void 0);
|
|
159
|
+
__decorate([
|
|
160
|
+
query('div[inner-circle]')
|
|
161
|
+
], OxProgressCircle.prototype, "innerCircle", void 0);
|
|
162
|
+
__decorate([
|
|
163
|
+
query('span[progress-title]')
|
|
164
|
+
], OxProgressCircle.prototype, "progressTitle", void 0);
|
|
165
|
+
OxProgressCircle = __decorate([
|
|
166
|
+
customElement('ox-progress-circle')
|
|
167
|
+
], OxProgressCircle);
|
|
168
|
+
export { OxProgressCircle };
|
|
169
|
+
//# sourceMappingURL=ox-progress-circle.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ox-progress-circle.js","sourceRoot":"","sources":["../../../src/progress/ox-progress-circle.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { PropertyValues, LitElement, css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { ScrollbarStyles } from '@operato/styles'\n\n/**\nWEB Component for code-mirror code editor.\n\nExample:\n <ox-progress-circle\n .value=${70}\n titleText=\"전체\"\n suffix=\"%\"\n fontSize=\"29px\"\n fontColor=\"#4E5055\"\n borderStyle=\"none\"\n innerCircleSize=\"28%\"\n circleColor=\"#0595E5\"\n shadow=\"#00000026 4px 4px 4px\"\n background=\"#eaf5fd\"\n ></ox-progress-circle>\n*/\n@customElement('ox-progress-circle')\nexport class OxProgressCircle extends LitElement {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n }\n\n div[circle] {\n font-size: 29px;\n font-weight: bold;\n width: 100%;\n aspect-ratio: 1;\n display: flex;\n border-radius: 50%;\n border: 1px solid #353b48;\n position: relative;\n background: conic-gradient(yellowgreen 0deg, white 0deg);\n box-shadow: #00000026 5px 5px 5px;\n }\n div[inner-circle] {\n width: 90%;\n aspect-ratio: 1;\n border-radius: inherit;\n background-color: #353b48;\n margin: auto;\n display: flex;\n flex-direction: column;\n align-items: center;\n color: white;\n justify-content: center;\n box-shadow: inset #00000026 -2px 2px 8px;\n }\n\n div[inner-circle] span {\n display: flex;\n align-items: center;\n }\n\n span[progress-title] {\n font-size: 0.65em;\n margin-bottom: -5%;\n }\n `\n ]\n\n @property({ type: Number }) value: number = 0\n @property({ type: String }) suffix: string = ''\n @property({ type: String }) titleText: string = ''\n @property({ type: String }) fontSize: string = '10px'\n @property({ type: String }) fontColor: string = ''\n @property({ type: String }) borderStyle: string = ''\n @property({ type: String }) innerCircleSize: string = '10%'\n @property({ type: String }) shadow: string = ''\n @property({ type: String }) circleColor: string = 'yellowgreen'\n @property({ type: String }) background: string = ''\n\n @query('div[circle]') circle!: HTMLDivElement\n @query('div[inner-circle]') innerCircle!: HTMLDivElement\n @query('span[progress-title]') progressTitle?: HTMLSpanElement\n\n firstUpdated() {\n if (this.fontSize) {\n this.circle.style.fontSize = this.fontSize\n }\n if (this.fontColor) {\n this.innerCircle.style.color = this.fontColor\n }\n if (this.borderStyle) {\n this.circle.style.border = this.borderStyle\n }\n if (this.innerCircleSize) {\n this.innerCircle.style.width = `calc(100% - ${this.innerCircleSize})`\n }\n if (this.shadow) {\n this.circle.style.boxShadow = this.shadow\n }\n if (this.background) {\n this.innerCircle.style.background = this.background\n }\n if (this.progressTitle && this.circleColor) {\n this.progressTitle.style.color = this.circleColor\n }\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('value')) {\n this.updateCircleBackground()\n }\n }\n\n updateCircleBackground() {\n const position = this.value * 3.6 // 360 = 100%\n this.circle.style.background = `conic-gradient(${this.circleColor} ${position}deg, ${this.background} 0deg)`\n }\n\n render() {\n return html`\n <div circle>\n <div inner-circle>\n ${this.titleText ? html`<span progress-title>${this.titleText}</span>` : ''}\n <span>${this.value}${this.suffix}</span>\n </div>\n </div>\n `\n }\n}\n"]}
|
|
@@ -13,7 +13,7 @@ declare class OxSciChart extends LitElement {
|
|
|
13
13
|
attrX: string;
|
|
14
14
|
attrY: string;
|
|
15
15
|
private chart;
|
|
16
|
-
dataSeries
|
|
16
|
+
private dataSeries;
|
|
17
17
|
container: HTMLDivElement;
|
|
18
18
|
static styles: import("lit").CSSResult;
|
|
19
19
|
firstUpdated(): void;
|
|
@@ -24,7 +24,7 @@ declare class OxSciChart extends LitElement {
|
|
|
24
24
|
get dataSet(): {
|
|
25
25
|
xValue: number;
|
|
26
26
|
yValue: number;
|
|
27
|
-
}[];
|
|
27
|
+
}[][];
|
|
28
28
|
render(): import("lit-html").TemplateResult<1>;
|
|
29
29
|
}
|
|
30
30
|
declare global {
|
|
@@ -10,6 +10,7 @@ let OxSciChart = class OxSciChart extends LitElement {
|
|
|
10
10
|
this.attrX = 'x';
|
|
11
11
|
this.attrY = 'y';
|
|
12
12
|
this.chart = null;
|
|
13
|
+
this.dataSeries = [];
|
|
13
14
|
}
|
|
14
15
|
static { this.styles = css `
|
|
15
16
|
:host {
|
|
@@ -59,35 +60,40 @@ let OxSciChart = class OxSciChart extends LitElement {
|
|
|
59
60
|
}
|
|
60
61
|
}
|
|
61
62
|
updateDataSeries() {
|
|
62
|
-
if (!this.dataSeries)
|
|
63
|
+
if (!this.dataSeries?.length)
|
|
63
64
|
return;
|
|
64
|
-
this.dataSeries.clear();
|
|
65
|
+
this.dataSeries.forEach(ds => ds.clear());
|
|
65
66
|
const newData = this.dataSet;
|
|
66
|
-
|
|
67
|
+
newData.forEach((data, index) => {
|
|
68
|
+
this.dataSeries[index].appendRange(data.map(d => d.xValue), data.map(d => d.yValue));
|
|
69
|
+
});
|
|
67
70
|
this.chart?.sciChartSurface.zoomExtents();
|
|
68
71
|
this.chart?.sciChartSurface.invalidateElement();
|
|
69
72
|
}
|
|
70
73
|
get dataSet() {
|
|
71
|
-
const { attrX,
|
|
74
|
+
const { attrX, data } = this;
|
|
75
|
+
const datasets = this.config?.data?.datasets || [];
|
|
72
76
|
if (!(data instanceof Array)) {
|
|
73
77
|
return [];
|
|
74
78
|
}
|
|
75
|
-
return
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
79
|
+
return datasets.map(dataset => {
|
|
80
|
+
return data
|
|
81
|
+
.map(item => {
|
|
82
|
+
if (!item || typeof item !== 'object') {
|
|
83
|
+
return;
|
|
84
|
+
}
|
|
85
|
+
const xValue = new Date(item[attrX]);
|
|
86
|
+
if (isNaN(xValue.getTime())) {
|
|
87
|
+
console.error('Invalid date:', item[attrX]);
|
|
88
|
+
return;
|
|
89
|
+
}
|
|
90
|
+
return {
|
|
91
|
+
xValue: xValue.getTime() / 1000,
|
|
92
|
+
yValue: item[dataset.dataKey]
|
|
93
|
+
};
|
|
94
|
+
})
|
|
95
|
+
.filter(Boolean);
|
|
96
|
+
});
|
|
91
97
|
}
|
|
92
98
|
render() {
|
|
93
99
|
return html `<div id="container"></div>`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-scichart.js","sourceRoot":"","sources":["../../../src/scichart/ox-scichart.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAClE,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;
|
|
1
|
+
{"version":3,"file":"ox-scichart.js","sourceRoot":"","sources":["../../../src/scichart/ox-scichart.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { property, query, customElement } from 'lit/decorators.js'\nimport { buildSciChart } from './scichart-builder'\n\ndeclare global {\n interface Window {\n sciChartLoaded: boolean\n sciChartLoadingPromise: Promise<void>\n }\n}\n\n@customElement('ox-scichart')\nclass OxSciChart extends LitElement {\n @property({ type: Object }) config: OperatoChart.ChartConfig | null = null\n @property({ type: Array }) data: { [attr: string]: any }[] = []\n @property({ type: String, attribute: 'attr-x' }) attrX: string = 'x'\n @property({ type: String, attribute: 'attr-y' }) attrY: string = 'y'\n\n private chart: any = null\n private dataSeries: any[] = []\n\n @query('div#container') container!: HTMLDivElement\n\n static styles = css`\n :host {\n display: block;\n }\n\n div {\n width: 100%;\n height: 100%;\n }\n `\n\n firstUpdated() {\n this.loadSciChart()\n }\n\n async loadSciChart() {\n if (!window.sciChartLoaded) {\n if (!window.sciChartLoadingPromise) {\n window.sciChartLoadingPromise = new Promise<void>(resolve => {\n const script = document.createElement('script')\n script.src = 'https://cdn.jsdelivr.net/npm/scichart/index.min.js'\n script.crossOrigin = 'anonymous'\n script.onload = () => {\n window.sciChartLoaded = true\n\n SciChart.SciChartSurface.UseCommunityLicense()\n\n resolve()\n }\n document.head.appendChild(script)\n })\n }\n\n await window.sciChartLoadingPromise\n }\n\n this.initializeSciChart()\n }\n\n async initializeSciChart() {\n const { chart, dataSeries } = (await buildSciChart(this.config, this.container, {})) || {}\n\n this.chart = chart\n this.dataSeries = dataSeries!\n\n this.updateDataSeries()\n }\n\n async updated(changedProperties: Map<string | number | symbol, unknown>) {\n if (changedProperties.has('config')) {\n await this.initializeSciChart()\n }\n\n if (changedProperties.has('data')) {\n this.updateDataSeries()\n this.chart?.sciChartSurface.zoomExtents()\n }\n }\n\n updateDataSeries() {\n if (!this.dataSeries?.length) return\n\n this.dataSeries.forEach(ds => ds.clear())\n const newData = this.dataSet\n\n newData.forEach((data, index) => {\n this.dataSeries[index].appendRange(\n data.map(d => d.xValue),\n data.map(d => d.yValue)\n )\n })\n\n this.chart?.sciChartSurface.zoomExtents()\n this.chart?.sciChartSurface.invalidateElement()\n }\n\n get dataSet(): { xValue: number; yValue: number }[][] {\n const { attrX, data } = this\n const datasets = this.config?.data?.datasets || []\n\n if (!(data instanceof Array)) {\n return []\n }\n\n return datasets.map(dataset => {\n return data\n .map(item => {\n if (!item || typeof item !== 'object') {\n return\n }\n\n const xValue = new Date(item[attrX])\n if (isNaN(xValue.getTime())) {\n console.error('Invalid date:', item[attrX])\n return\n }\n\n return {\n xValue: xValue.getTime() / 1000,\n yValue: item[dataset.dataKey!]\n }\n })\n .filter(Boolean) as { xValue: number; yValue: number }[]\n })\n }\n\n render() {\n return html`<div id=\"container\"></div>`\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ox-scichart': OxSciChart\n }\n}\n"]}
|
|
@@ -1,46 +1,100 @@
|
|
|
1
|
-
export async function buildSciChart(config, container, { fontSize, fontFamily, fontColor }) {
|
|
1
|
+
export async function buildSciChart(config, container, { fontSize, fontFamily, fontColor = 'red' }) {
|
|
2
2
|
if (!config) {
|
|
3
3
|
return;
|
|
4
4
|
}
|
|
5
|
-
const { SciChartSurface,
|
|
5
|
+
const { SciChartSurface, SciChartJsNavyTheme, XyDataSeries, FastLineRenderableSeries, FastColumnRenderableSeries, NumericAxis, DateTimeNumericAxis, EAutoRange, EAxisAlignment, NumberRange, MouseWheelZoomModifier, RubberBandXyZoomModifier, ZoomExtentsModifier, RolloverModifier } = SciChart;
|
|
6
6
|
const { type: chartType, options, data: fromData } = config;
|
|
7
|
-
const { theme,
|
|
7
|
+
const { theme, legend, scales: fromScales, xGridLine, yGridLine, y2ndGridLine } = options || {};
|
|
8
8
|
const { datasets = [] } = fromData || {};
|
|
9
9
|
const { xAxes = [], yAxes = [] } = fromScales || {};
|
|
10
|
-
const toScales = {};
|
|
11
10
|
const chart = await SciChartSurface.create(container, {
|
|
12
11
|
theme: new SciChartJsNavyTheme()
|
|
13
12
|
});
|
|
14
13
|
const { sciChartSurface, wasmContext } = chart;
|
|
14
|
+
// X 축 설정
|
|
15
15
|
xAxes.forEach((axis, index) => {
|
|
16
|
-
const { axisTitle,
|
|
17
|
-
const { autoMax, autoMin } = ticks || {};
|
|
16
|
+
const { axisTitle, ticks } = axis;
|
|
17
|
+
const { autoMax, autoMin, min, max, stepSize, beginAtZero } = ticks || {};
|
|
18
18
|
const id = xAxes.length > 1 ? `x${index + 1}` : 'x';
|
|
19
19
|
const xAxis = new DateTimeNumericAxis(wasmContext, {
|
|
20
20
|
axisTitle,
|
|
21
|
-
autoRange: EAutoRange.Always,
|
|
22
|
-
axisAlignment: EAxisAlignment.Bottom
|
|
23
|
-
|
|
21
|
+
autoRange: autoMin || autoMax ? EAutoRange.Always : undefined,
|
|
22
|
+
axisAlignment: EAxisAlignment.Bottom,
|
|
23
|
+
visibleRange: min !== undefined && max !== undefined ? new NumberRange(min, max) : undefined,
|
|
24
|
+
majorDelta: stepSize,
|
|
25
|
+
growBy: beginAtZero ? new NumberRange(0.1, 0.1) : undefined,
|
|
26
|
+
labelStyle: {
|
|
27
|
+
fontFamily,
|
|
28
|
+
fontSize,
|
|
29
|
+
color: fontColor
|
|
30
|
+
},
|
|
31
|
+
axisTitleStyle: {
|
|
32
|
+
fontFamily,
|
|
33
|
+
fontSize,
|
|
34
|
+
color: fontColor
|
|
35
|
+
}
|
|
24
36
|
});
|
|
25
37
|
sciChartSurface.xAxes.add(xAxis);
|
|
26
38
|
});
|
|
39
|
+
// Y 축 설정
|
|
27
40
|
yAxes.forEach((axis, index) => {
|
|
28
|
-
const { axisTitle,
|
|
29
|
-
const { autoMax, autoMin } = ticks || {};
|
|
41
|
+
const { axisTitle, ticks } = axis;
|
|
42
|
+
const { autoMax, autoMin, min, max, stepSize, beginAtZero } = ticks || {};
|
|
30
43
|
const id = yAxes.length > 1 ? `right` : 'left';
|
|
31
44
|
const yAxis = new NumericAxis(wasmContext, {
|
|
32
45
|
axisTitle,
|
|
33
|
-
autoRange: EAutoRange.Always,
|
|
34
|
-
axisAlignment: yAxes.length > 1 ? EAxisAlignment.Right : EAxisAlignment.Left
|
|
46
|
+
autoRange: autoMin || autoMax ? EAutoRange.Always : undefined,
|
|
47
|
+
axisAlignment: yAxes.length > 1 ? EAxisAlignment.Right : EAxisAlignment.Left,
|
|
48
|
+
visibleRange: min !== undefined && max !== undefined ? new NumberRange(min, max) : undefined,
|
|
49
|
+
majorDelta: stepSize,
|
|
50
|
+
growBy: beginAtZero ? new NumberRange(0.1, 0.1) : undefined,
|
|
51
|
+
labelStyle: {
|
|
52
|
+
fontFamily,
|
|
53
|
+
fontSize,
|
|
54
|
+
color: fontColor
|
|
55
|
+
},
|
|
56
|
+
axisTitleStyle: {
|
|
57
|
+
fontFamily,
|
|
58
|
+
fontSize,
|
|
59
|
+
color: fontColor
|
|
60
|
+
}
|
|
35
61
|
});
|
|
36
62
|
sciChartSurface.yAxes.add(yAxis);
|
|
37
63
|
});
|
|
38
|
-
|
|
39
|
-
const
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
64
|
+
// 시리즈 설정
|
|
65
|
+
const dataSeriesArray = datasets.map((dataset, index) => {
|
|
66
|
+
const dataSeries = new XyDataSeries(wasmContext, {
|
|
67
|
+
dataSeriesName: dataset.label,
|
|
68
|
+
containsNaN: false
|
|
69
|
+
});
|
|
70
|
+
let series;
|
|
71
|
+
if (dataset.type === 'bar') {
|
|
72
|
+
series = new FastColumnRenderableSeries(wasmContext, {
|
|
73
|
+
dataSeries,
|
|
74
|
+
strokeThickness: dataset.borderWidth || 2,
|
|
75
|
+
fill: dataset.backgroundColor || '#FF6600'
|
|
76
|
+
});
|
|
77
|
+
}
|
|
78
|
+
else {
|
|
79
|
+
series = new FastLineRenderableSeries(wasmContext, {
|
|
80
|
+
dataSeries,
|
|
81
|
+
strokeThickness: dataset.borderWidth || 2,
|
|
82
|
+
stroke: dataset.color || '#FF6600'
|
|
83
|
+
});
|
|
84
|
+
}
|
|
85
|
+
sciChartSurface.renderableSeries.add(series);
|
|
86
|
+
const rolloverModifier = new RolloverModifier({
|
|
87
|
+
showTooltip: true,
|
|
88
|
+
showAxisLabels: true,
|
|
89
|
+
tooltipColor: 'white',
|
|
90
|
+
tooltipBackgroundColor: 'rgba(0, 0, 0, 0.7)',
|
|
91
|
+
rollOverDataSeries: dataSeries
|
|
92
|
+
});
|
|
93
|
+
sciChartSurface.chartModifiers.add(rolloverModifier);
|
|
94
|
+
return dataSeries;
|
|
95
|
+
});
|
|
96
|
+
// 줌인/줌아웃 모디파이어 추가
|
|
97
|
+
sciChartSurface.chartModifiers.add(new RubberBandXyZoomModifier(), new MouseWheelZoomModifier(), new ZoomExtentsModifier());
|
|
98
|
+
return { chart, dataSeries: dataSeriesArray };
|
|
45
99
|
}
|
|
46
100
|
//# sourceMappingURL=scichart-builder.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scichart-builder.js","sourceRoot":"","sources":["../../../src/scichart/scichart-builder.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"scichart-builder.js","sourceRoot":"","sources":["../../../src/scichart/scichart-builder.ts"],"names":[],"mappings":"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","sourcesContent":["import { TinyColor } from '@ctrl/tinycolor'\nimport { format as formatText } from '../utils/text-formatter'\n\nexport async function buildSciChart(\n config: OperatoChart.ChartConfig | undefined | null,\n container: any,\n { fontSize, fontFamily, fontColor = 'red' }: { fontSize?: number; fontFamily?: string; fontColor?: string }\n): Promise<{ chart: any; dataSeries: any[] } | undefined> {\n if (!config) {\n return\n }\n\n const {\n SciChartSurface,\n SciChartJsNavyTheme,\n XyDataSeries,\n FastLineRenderableSeries,\n FastColumnRenderableSeries,\n NumericAxis,\n DateTimeNumericAxis,\n EAutoRange,\n EAxisAlignment,\n NumberRange,\n MouseWheelZoomModifier,\n RubberBandXyZoomModifier,\n ZoomExtentsModifier,\n RolloverModifier\n } = SciChart\n\n const { type: chartType, options, data: fromData } = config\n const { theme, legend, scales: fromScales, xGridLine, yGridLine, y2ndGridLine } = options || {}\n const { datasets = [] } = fromData || {}\n\n const { xAxes = [], yAxes = [] } = fromScales || {}\n\n const chart = await SciChartSurface.create(container, {\n theme: new SciChartJsNavyTheme()\n })\n const { sciChartSurface, wasmContext } = chart\n\n // X 축 설정\n xAxes.forEach((axis, index) => {\n const { axisTitle, ticks } = axis\n const { autoMax, autoMin, min, max, stepSize, beginAtZero } = ticks || {}\n const id = xAxes.length > 1 ? `x${index + 1}` : 'x'\n\n const xAxis = new DateTimeNumericAxis(wasmContext, {\n axisTitle,\n autoRange: autoMin || autoMax ? EAutoRange.Always : undefined,\n axisAlignment: EAxisAlignment.Bottom,\n visibleRange: min !== undefined && max !== undefined ? new NumberRange(min, max) : undefined,\n majorDelta: stepSize,\n growBy: beginAtZero ? new NumberRange(0.1, 0.1) : undefined,\n labelStyle: {\n fontFamily,\n fontSize,\n color: fontColor\n },\n axisTitleStyle: {\n fontFamily,\n fontSize,\n color: fontColor\n }\n })\n\n sciChartSurface.xAxes.add(xAxis)\n })\n\n // Y 축 설정\n yAxes.forEach((axis, index) => {\n const { axisTitle, ticks } = axis\n const { autoMax, autoMin, min, max, stepSize, beginAtZero } = ticks || {}\n const id = yAxes.length > 1 ? `right` : 'left'\n\n const yAxis = new NumericAxis(wasmContext, {\n axisTitle,\n autoRange: autoMin || autoMax ? EAutoRange.Always : undefined,\n axisAlignment: yAxes.length > 1 ? EAxisAlignment.Right : EAxisAlignment.Left,\n visibleRange: min !== undefined && max !== undefined ? new NumberRange(min, max) : undefined,\n majorDelta: stepSize,\n growBy: beginAtZero ? new NumberRange(0.1, 0.1) : undefined,\n labelStyle: {\n fontFamily,\n fontSize,\n color: fontColor\n },\n axisTitleStyle: {\n fontFamily,\n fontSize,\n color: fontColor\n }\n })\n sciChartSurface.yAxes.add(yAxis)\n })\n\n // 시리즈 설정\n const dataSeriesArray = datasets.map((dataset, index) => {\n const dataSeries = new XyDataSeries(wasmContext, {\n dataSeriesName: dataset.label,\n containsNaN: false\n })\n\n let series: any\n if (dataset.type === 'bar') {\n series = new FastColumnRenderableSeries(wasmContext, {\n dataSeries,\n strokeThickness: dataset.borderWidth || 2,\n fill: dataset.backgroundColor || '#FF6600'\n })\n } else {\n series = new FastLineRenderableSeries(wasmContext, {\n dataSeries,\n strokeThickness: dataset.borderWidth || 2,\n stroke: dataset.color || '#FF6600'\n })\n }\n\n sciChartSurface.renderableSeries.add(series)\n\n const rolloverModifier = new RolloverModifier({\n showTooltip: true,\n showAxisLabels: true,\n tooltipColor: 'white',\n tooltipBackgroundColor: 'rgba(0, 0, 0, 0.7)',\n rollOverDataSeries: dataSeries\n })\n\n sciChartSurface.chartModifiers.add(rolloverModifier)\n\n return dataSeries\n })\n\n // 줌인/줌아웃 모디파이어 추가\n sciChartSurface.chartModifiers.add(\n new RubberBandXyZoomModifier(),\n new MouseWheelZoomModifier(),\n new ZoomExtentsModifier()\n )\n\n return { chart, dataSeries: dataSeriesArray }\n}\n"]}
|
package/dist/stories/common.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export declare function getDefaultChartConfig(type: OperatoChart.ChartType, datasets?: OperatoChart.Dataset[]): OperatoChart.ChartConfig;
|
|
2
2
|
export declare function getDefaultAxisOptions(): OperatoChart.AxisOptions;
|
|
3
3
|
export declare const data: {
|
|
4
|
-
|
|
4
|
+
timestamp: number;
|
|
5
5
|
count: number;
|
|
6
6
|
average: number;
|
|
7
7
|
}[];
|
package/dist/stories/common.js
CHANGED
|
@@ -41,13 +41,35 @@ export function getDefaultAxisOptions() {
|
|
|
41
41
|
}
|
|
42
42
|
};
|
|
43
43
|
}
|
|
44
|
-
export const data = [
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
]
|
|
44
|
+
// export const data = [
|
|
45
|
+
// { timestamp: 2010, count: 10, average: 120 },
|
|
46
|
+
// { timestamp: 2011, count: 20, average: 110 },
|
|
47
|
+
// { timestamp: 2012, count: 15, average: 80 },
|
|
48
|
+
// { timestamp: 2013, count: 25, average: 130 },
|
|
49
|
+
// { timestamp: 2014, count: 22, average: 120 },
|
|
50
|
+
// { timestamp: 2015, count: 30, average: 60 },
|
|
51
|
+
// { timestamp: 2016, count: 28, average: 90 }
|
|
52
|
+
// ]
|
|
53
|
+
// 랜덤한 범위의 숫자를 생성하는 함수
|
|
54
|
+
function getRandomInRange(min, max) {
|
|
55
|
+
return Math.floor(Math.random() * (max - min + 1)) + min;
|
|
56
|
+
}
|
|
57
|
+
// 랜덤 데이터를 생성하는 함수
|
|
58
|
+
function generateRandomData(count) {
|
|
59
|
+
const randomData = [];
|
|
60
|
+
const startTimestamp = Math.floor(Date.now() / 1000); // 현재 시간을 Unix 타임스탬프로 설정
|
|
61
|
+
for (let i = 0; i < count; i++) {
|
|
62
|
+
const timestamp = startTimestamp + i * 3; // 3초씩 증가하는 타임스탬프 설정
|
|
63
|
+
const randomCount = getRandomInRange(5, 35); // count 값을 5에서 35 사이로 랜덤 생성
|
|
64
|
+
const randomAverage = getRandomInRange(50, 150); // average 값을 50에서 150 사이로 랜덤 생성
|
|
65
|
+
randomData.push({
|
|
66
|
+
timestamp: timestamp,
|
|
67
|
+
count: randomCount,
|
|
68
|
+
average: randomAverage
|
|
69
|
+
});
|
|
70
|
+
}
|
|
71
|
+
return randomData;
|
|
72
|
+
}
|
|
73
|
+
// 100개의 랜덤 데이터를 생성
|
|
74
|
+
export const data = generateRandomData(100);
|
|
53
75
|
//# sourceMappingURL=common.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"common.js","sourceRoot":"","sources":["../../stories/common.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,qBAAqB,CACnC,IAA4B,EAC5B,QAAiC;IAEjC,OAAO;QACL,IAAI,EAAE;YACJ,QAAQ,EAAE,QAAQ,IAAI,EAAE;YACxB,YAAY,EAAE,EAAE;SACjB;QACD,OAAO,EAAE;YACP,KAAK,EAAE,OAAO;YACd,OAAO,EAAE,IAAI;YACb,SAAS,EAAE,IAAI;YACf,MAAM,EAAE;gBACN,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,KAAK;aAChB;YACD,MAAM,EAAE;gBACN,KAAK,EAAE,CAAC,qBAAqB,EAAE,CAAC;gBAChC,KAAK,EAAE,CAAC,qBAAqB,EAAE,EAAE,qBAAqB,EAAE,CAAC,CAAC,oCAAoC;aAC/F;YACD,OAAO,EAAE,KAAK;YACd,SAAS,EAAE,IAAI;YACf,SAAS,EAAE,IAAI;YACf,YAAY,EAAE,KAAK;YACnB,SAAS,EAAE,KAAK;SACjB;QACD,IAAI;KACL,CAAA;AACH,CAAC;AAED,MAAM,UAAU,qBAAqB;IACnC,OAAO;QACL,SAAS,EAAE,EAAE;QACb,UAAU,EAAE,CAAC;QACb,eAAe,EAAE,CAAC;QAClB,aAAa,EAAE,GAAG;QAClB,KAAK,EAAE;YACL,OAAO,EAAE,IAAI;YACb,OAAO,EAAE,IAAI;YACb,OAAO,EAAE,IAAI;YACb,GAAG,EAAE,SAAS;YACd,GAAG,EAAE,SAAS;YACd,QAAQ,EAAE,SAAS;SACpB;KACF,CAAA;AACH,CAAC;AAED,
|
|
1
|
+
{"version":3,"file":"common.js","sourceRoot":"","sources":["../../stories/common.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,qBAAqB,CACnC,IAA4B,EAC5B,QAAiC;IAEjC,OAAO;QACL,IAAI,EAAE;YACJ,QAAQ,EAAE,QAAQ,IAAI,EAAE;YACxB,YAAY,EAAE,EAAE;SACjB;QACD,OAAO,EAAE;YACP,KAAK,EAAE,OAAO;YACd,OAAO,EAAE,IAAI;YACb,SAAS,EAAE,IAAI;YACf,MAAM,EAAE;gBACN,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,KAAK;aAChB;YACD,MAAM,EAAE;gBACN,KAAK,EAAE,CAAC,qBAAqB,EAAE,CAAC;gBAChC,KAAK,EAAE,CAAC,qBAAqB,EAAE,EAAE,qBAAqB,EAAE,CAAC,CAAC,oCAAoC;aAC/F;YACD,OAAO,EAAE,KAAK;YACd,SAAS,EAAE,IAAI;YACf,SAAS,EAAE,IAAI;YACf,YAAY,EAAE,KAAK;YACnB,SAAS,EAAE,KAAK;SACjB;QACD,IAAI;KACL,CAAA;AACH,CAAC;AAED,MAAM,UAAU,qBAAqB;IACnC,OAAO;QACL,SAAS,EAAE,EAAE;QACb,UAAU,EAAE,CAAC;QACb,eAAe,EAAE,CAAC;QAClB,aAAa,EAAE,GAAG;QAClB,KAAK,EAAE;YACL,OAAO,EAAE,IAAI;YACb,OAAO,EAAE,IAAI;YACb,OAAO,EAAE,IAAI;YACb,GAAG,EAAE,SAAS;YACd,GAAG,EAAE,SAAS;YACd,QAAQ,EAAE,SAAS;SACpB;KACF,CAAA;AACH,CAAC;AAED,wBAAwB;AACxB,kDAAkD;AAClD,kDAAkD;AAClD,iDAAiD;AACjD,kDAAkD;AAClD,kDAAkD;AAClD,iDAAiD;AACjD,gDAAgD;AAChD,IAAI;AACJ,sBAAsB;AACtB,SAAS,gBAAgB,CAAC,GAAW,EAAE,GAAW;IAChD,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,CAAA;AAC1D,CAAC;AAED,kBAAkB;AAClB,SAAS,kBAAkB,CAAC,KAAa;IACvC,MAAM,UAAU,GAAG,EAAE,CAAA;IACrB,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,CAAA,CAAC,wBAAwB;IAE7E,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC;QAC/B,MAAM,SAAS,GAAG,cAAc,GAAG,CAAC,GAAG,CAAC,CAAA,CAAC,oBAAoB;QAC7D,MAAM,WAAW,GAAG,gBAAgB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAA,CAAC,4BAA4B;QACxE,MAAM,aAAa,GAAG,gBAAgB,CAAC,EAAE,EAAE,GAAG,CAAC,CAAA,CAAC,gCAAgC;QAEhF,UAAU,CAAC,IAAI,CAAC;YACd,SAAS,EAAE,SAAS;YACpB,KAAK,EAAE,WAAW;YAClB,OAAO,EAAE,aAAa;SACvB,CAAC,CAAA;IACJ,CAAC;IAED,OAAO,UAAU,CAAA;AACnB,CAAC;AAED,mBAAmB;AACnB,MAAM,CAAC,MAAM,IAAI,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAA","sourcesContent":["export function getDefaultChartConfig(\n type: OperatoChart.ChartType,\n datasets?: OperatoChart.Dataset[]\n): OperatoChart.ChartConfig {\n return {\n data: {\n datasets: datasets || [],\n labelDataKey: ''\n },\n options: {\n theme: 'light',\n tooltip: true,\n animation: true,\n legend: {\n display: true,\n position: 'top'\n },\n scales: {\n xAxes: [getDefaultAxisOptions()],\n yAxes: [getDefaultAxisOptions(), getDefaultAxisOptions()] // Two y-axes for multi-axis support\n },\n stacked: false,\n xGridLine: true,\n yGridLine: true,\n y2ndGridLine: false,\n multiAxis: false\n },\n type\n }\n}\n\nexport function getDefaultAxisOptions(): OperatoChart.AxisOptions {\n return {\n axisTitle: '',\n barSpacing: 0,\n categorySpacing: 0,\n barPercentage: 0.9,\n ticks: {\n display: true,\n autoMin: true,\n autoMax: true,\n min: undefined,\n max: undefined,\n stepSize: undefined\n }\n }\n}\n\n// export const data = [\n// { timestamp: 2010, count: 10, average: 120 },\n// { timestamp: 2011, count: 20, average: 110 },\n// { timestamp: 2012, count: 15, average: 80 },\n// { timestamp: 2013, count: 25, average: 130 },\n// { timestamp: 2014, count: 22, average: 120 },\n// { timestamp: 2015, count: 30, average: 60 },\n// { timestamp: 2016, count: 28, average: 90 }\n// ]\n// 랜덤한 범위의 숫자를 생성하는 함수\nfunction getRandomInRange(min: number, max: number) {\n return Math.floor(Math.random() * (max - min + 1)) + min\n}\n\n// 랜덤 데이터를 생성하는 함수\nfunction generateRandomData(count: number) {\n const randomData = []\n const startTimestamp = Math.floor(Date.now() / 1000) // 현재 시간을 Unix 타임스탬프로 설정\n\n for (let i = 0; i < count; i++) {\n const timestamp = startTimestamp + i * 3 // 3초씩 증가하는 타임스탬프 설정\n const randomCount = getRandomInRange(5, 35) // count 값을 5에서 35 사이로 랜덤 생성\n const randomAverage = getRandomInRange(50, 150) // average 값을 50에서 150 사이로 랜덤 생성\n\n randomData.push({\n timestamp: timestamp,\n count: randomCount,\n average: randomAverage\n })\n }\n\n return randomData\n}\n\n// 100개의 랜덤 데이터를 생성\nexport const data = generateRandomData(100)\n"]}
|