@operato/chart 7.0.0-rc.2 → 7.0.0-rc.6
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 +10 -0
- package/dist/src/editors/configurer.js +1 -1
- package/dist/src/editors/configurer.js.map +1 -1
- package/dist/src/editors/input-chart-multi-series-abstract.js +11 -11
- package/dist/src/editors/input-chart-multi-series-abstract.js.map +1 -1
- package/dist/src/editors/ox-input-chart-timeseries.d.ts +7 -0
- package/dist/src/editors/ox-input-chart-timeseries.js +234 -0
- package/dist/src/editors/ox-input-chart-timeseries.js.map +1 -0
- package/dist/src/editors/ox-property-editor-chart.js +18 -29
- package/dist/src/editors/ox-property-editor-chart.js.map +1 -1
- package/dist/src/scichart/ox-scichart.d.ts +1 -1
- package/dist/src/scichart/ox-scichart.js +7 -15
- package/dist/src/scichart/ox-scichart.js.map +1 -1
- package/dist/stories/ox-input-chart-bar.stories.js +9 -5
- package/dist/stories/ox-input-chart-bar.stories.js.map +1 -1
- package/dist/stories/ox-input-chart-timeseries.stories.d.ts +25 -0
- package/dist/stories/ox-input-chart-timeseries.stories.js +182 -0
- package/dist/stories/ox-input-chart-timeseries.stories.js.map +1 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +5 -5
- package/src/editors/configurer.ts +1 -1
- package/src/editors/input-chart-multi-series-abstract.ts +11 -11
- package/src/editors/ox-input-chart-timeseries.ts +236 -0
- package/src/editors/ox-property-editor-chart.ts +20 -30
- package/src/scichart/ox-scichart.ts +4 -12
- package/stories/ox-input-chart-bar.stories.ts +9 -5
- package/stories/ox-input-chart-timeseries.stories.ts +196 -0
|
@@ -43,35 +43,24 @@ let ChartEditor = class ChartEditor extends OxPropertyEditor {
|
|
|
43
43
|
`
|
|
44
44
|
]; }
|
|
45
45
|
editorTemplate(value, spec) {
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
:
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
? html ` <ox-input-chart-pie .value=${value} chart-type="pie" fullwidth></ox-input-chart-pie> `
|
|
65
|
-
: value.type == 'doughnut'
|
|
66
|
-
? html ` <ox-input-chart-pie .value=${value} chart-type="doughnut" fullwidth></ox-input-chart-pie> `
|
|
67
|
-
: value.type == 'polarArea'
|
|
68
|
-
? html ` <ox-input-chart-pie .value=${value} chart-type="polarArea" fullwidth></ox-input-chart-pie> `
|
|
69
|
-
: value.type == 'radar'
|
|
70
|
-
? html `
|
|
71
|
-
<ox-input-chart-radar .value=${value} chart-type="radar" fullwidth></ox-input-chart-radar>
|
|
72
|
-
`
|
|
73
|
-
: html ``}
|
|
74
|
-
`;
|
|
46
|
+
switch (value) {
|
|
47
|
+
case 'line':
|
|
48
|
+
case 'bar':
|
|
49
|
+
return html ` <ox-input-chart-mixed .value=${value} chart-type=${value} fullwidth></ox-input-chart-mixed> `;
|
|
50
|
+
case 'horizontalBar':
|
|
51
|
+
return html ` <ox-input-chart-hbar .value=${value} chart-type=${value} fullwidth></ox-input-chart-hbar> `;
|
|
52
|
+
case 'pie':
|
|
53
|
+
case 'doughnut':
|
|
54
|
+
case 'polarArea':
|
|
55
|
+
return html ` <ox-input-chart-pie .value=${value} chart-type=${value} fullwidth></ox-input-chart-pie> `;
|
|
56
|
+
case 'radar':
|
|
57
|
+
return html ` <ox-input-chart-radar .value=${value} chart-type=${value} fullwidth></ox-input-chart-radar> `;
|
|
58
|
+
case 'timeseries':
|
|
59
|
+
return html `
|
|
60
|
+
<ox-input-chart-timeseries .value=${value} chart-type=${value} fullwidth></ox-input-chart-timeseries>
|
|
61
|
+
`;
|
|
62
|
+
}
|
|
63
|
+
return html ``;
|
|
75
64
|
}
|
|
76
65
|
};
|
|
77
66
|
ChartEditor = __decorate([
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-property-editor-chart.js","sourceRoot":"","sources":["../../../src/editors/ox-property-editor-chart.ts"],"names":[],"mappings":";AAAA,OAAO,0BAA0B,CAAA;AAEjC,OAAO,uBAAuB,CAAA;AAC9B,OAAO,wBAAwB,CAAA;AAC/B,OAAO,sBAAsB,CAAA;AAC7B,OAAO,wBAAwB,CAAA;AAE/B,OAAO,EAAE,GAAG,EAAE,IAAI,
|
|
1
|
+
{"version":3,"file":"ox-property-editor-chart.js","sourceRoot":"","sources":["../../../src/editors/ox-property-editor-chart.ts"],"names":[],"mappings":";AAAA,OAAO,0BAA0B,CAAA;AAEjC,OAAO,uBAAuB,CAAA;AAC9B,OAAO,wBAAwB,CAAA;AAC/B,OAAO,sBAAsB,CAAA;AAC7B,OAAO,wBAAwB,CAAA;AAE/B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAW,MAAM,KAAK,CAAA;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,EAAE,gBAAgB,EAAgB,MAAM,0BAA0B,CAAA;AAGlE,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,gBAAgB;aACxC,WAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+BF;KACF,AAjCY,CAiCZ;IAED,cAAc,CAAC,KAAU,EAAE,IAAkB;QAC3C,QAAQ,KAAK,EAAE,CAAC;YACd,KAAK,MAAM,CAAC;YACZ,KAAK,KAAK;gBACR,OAAO,IAAI,CAAA,iCAAiC,KAAK,eAAe,KAAK,qCAAqC,CAAA;YAC5G,KAAK,eAAe;gBAClB,OAAO,IAAI,CAAA,gCAAgC,KAAK,eAAe,KAAK,oCAAoC,CAAA;YAC1G,KAAK,KAAK,CAAC;YACX,KAAK,UAAU,CAAC;YAChB,KAAK,WAAW;gBACd,OAAO,IAAI,CAAA,+BAA+B,KAAK,eAAe,KAAK,mCAAmC,CAAA;YACxG,KAAK,OAAO;gBACV,OAAO,IAAI,CAAA,iCAAiC,KAAK,eAAe,KAAK,qCAAqC,CAAA;YAC5G,KAAK,YAAY;gBACf,OAAO,IAAI,CAAA;8CAC2B,KAAK,eAAe,KAAK;SAC9D,CAAA;QACL,CAAC;QAED,OAAO,IAAI,CAAA,EAAE,CAAA;IACf,CAAC;;AAxDU,WAAW;IADvB,aAAa,CAAC,0BAA0B,CAAC;GAC7B,WAAW,CAyDvB","sourcesContent":["import '@operato/i18n/ox-i18n.js'\n\nimport './ox-input-chart-hbar'\nimport './ox-input-chart-mixed'\nimport './ox-input-chart-pie'\nimport './ox-input-chart-radar'\n\nimport { css, html, nothing } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { OxPropertyEditor, PropertySpec } from '@operato/property-editor'\n\n@customElement('ox-property-editor-chart')\nexport class ChartEditor extends OxPropertyEditor {\n static styles = [\n css`\n :host {\n display: block;\n padding: 5px;\n\n --md-elevated-button-container-height: 20px;\n }\n\n #chart-type {\n display: grid;\n grid-template-columns: repeat(10, 1fr);\n grid-gap: 5px;\n }\n\n #chart-type > label {\n box-sizing: border-box;\n grid-column: span 3;\n\n text-align: right;\n\n color: var(--md-sys-color-on-secondary-container);\n font-size: 0.8em;\n line-height: 2;\n text-transform: capitalize;\n }\n\n #chart-type > input {\n box-sizing: border-box;\n grid-column: span 7;\n border: 1px solid rgba(0, 0, 0, 0.2);\n }\n `\n ]\n\n editorTemplate(value: any, spec: PropertySpec) {\n switch (value) {\n case 'line':\n case 'bar':\n return html` <ox-input-chart-mixed .value=${value} chart-type=${value} fullwidth></ox-input-chart-mixed> `\n case 'horizontalBar':\n return html` <ox-input-chart-hbar .value=${value} chart-type=${value} fullwidth></ox-input-chart-hbar> `\n case 'pie':\n case 'doughnut':\n case 'polarArea':\n return html` <ox-input-chart-pie .value=${value} chart-type=${value} fullwidth></ox-input-chart-pie> `\n case 'radar':\n return html` <ox-input-chart-radar .value=${value} chart-type=${value} fullwidth></ox-input-chart-radar> `\n case 'timeseries':\n return html`\n <ox-input-chart-timeseries .value=${value} chart-type=${value} fullwidth></ox-input-chart-timeseries>\n `\n }\n\n return html``\n }\n}\n"]}
|
|
@@ -6,12 +6,12 @@ declare global {
|
|
|
6
6
|
}
|
|
7
7
|
}
|
|
8
8
|
declare class OxSciChart extends LitElement {
|
|
9
|
+
config: OperatoChart.ChartConfig | null;
|
|
9
10
|
data: {
|
|
10
11
|
[attr: string]: any;
|
|
11
12
|
}[];
|
|
12
13
|
attrX: string;
|
|
13
14
|
attrY: string;
|
|
14
|
-
config: any;
|
|
15
15
|
private chart;
|
|
16
16
|
dataSeries?: any;
|
|
17
17
|
container: HTMLDivElement;
|
|
@@ -5,18 +5,10 @@ import { buildSciChart } from './scichart-builder';
|
|
|
5
5
|
let OxSciChart = class OxSciChart extends LitElement {
|
|
6
6
|
constructor() {
|
|
7
7
|
super(...arguments);
|
|
8
|
-
this.
|
|
9
|
-
|
|
10
|
-
{ x: 1718612386646, y: 20 },
|
|
11
|
-
{ x: 1718612396646, y: 15 },
|
|
12
|
-
{ x: 1718612406646, y: 25 },
|
|
13
|
-
{ x: 1718612416646, y: 22 },
|
|
14
|
-
{ x: 1718612426646, y: 30 },
|
|
15
|
-
{ x: 1718612436646, y: 28 }
|
|
16
|
-
];
|
|
8
|
+
this.config = null;
|
|
9
|
+
this.data = [];
|
|
17
10
|
this.attrX = 'x';
|
|
18
11
|
this.attrY = 'y';
|
|
19
|
-
this.config = null;
|
|
20
12
|
this.chart = null;
|
|
21
13
|
}
|
|
22
14
|
static { this.styles = css `
|
|
@@ -101,18 +93,18 @@ let OxSciChart = class OxSciChart extends LitElement {
|
|
|
101
93
|
return html `<div id="container"></div>`;
|
|
102
94
|
}
|
|
103
95
|
};
|
|
96
|
+
__decorate([
|
|
97
|
+
property({ type: Object })
|
|
98
|
+
], OxSciChart.prototype, "config", void 0);
|
|
104
99
|
__decorate([
|
|
105
100
|
property({ type: Array })
|
|
106
101
|
], OxSciChart.prototype, "data", void 0);
|
|
107
102
|
__decorate([
|
|
108
|
-
property({ type: String })
|
|
103
|
+
property({ type: String, attribute: 'attr-x' })
|
|
109
104
|
], OxSciChart.prototype, "attrX", void 0);
|
|
110
105
|
__decorate([
|
|
111
|
-
property({ type: String })
|
|
106
|
+
property({ type: String, attribute: 'attr-y' })
|
|
112
107
|
], OxSciChart.prototype, "attrY", void 0);
|
|
113
|
-
__decorate([
|
|
114
|
-
property({ type: Object })
|
|
115
|
-
], OxSciChart.prototype, "config", void 0);
|
|
116
108
|
__decorate([
|
|
117
109
|
query('div#container')
|
|
118
110
|
], OxSciChart.prototype, "container", void 0);
|
|
@@ -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;AAWlD,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;
|
|
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\n// 전역 변수로 SciChart 로딩 상태 관리\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 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) return\n\n this.dataSeries.clear()\n const newData = this.dataSet\n\n this.dataSeries.appendRange(\n newData.map(d => d.xValue),\n newData.map(d => d.yValue)\n )\n\n this.chart?.sciChartSurface.zoomExtents()\n this.chart?.sciChartSurface.invalidateElement()\n }\n\n get dataSet(): { xValue: number; yValue: number }[] {\n const { attrX, attrY, data } = this\n\n if (!(data instanceof Array)) {\n return []\n }\n\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[attrY]\n }\n })\n .filter(Boolean) as { xValue: number; yValue: number }[]\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"]}
|
|
@@ -107,7 +107,11 @@ const Template = ({ value }) => html `
|
|
|
107
107
|
</div>
|
|
108
108
|
`;
|
|
109
109
|
export const Default = Template.bind({});
|
|
110
|
-
Default.args = {
|
|
110
|
+
Default.args = {
|
|
111
|
+
value: {
|
|
112
|
+
...getDefaultChartConfig('bar')
|
|
113
|
+
}
|
|
114
|
+
};
|
|
111
115
|
export const WithData = Template.bind({});
|
|
112
116
|
WithData.args = {
|
|
113
117
|
value: {
|
|
@@ -117,7 +121,7 @@ WithData.args = {
|
|
|
117
121
|
{
|
|
118
122
|
label: 'Bar Series',
|
|
119
123
|
type: 'bar',
|
|
120
|
-
data: [10, 20, 30],
|
|
124
|
+
// data: [10, 20, 30],
|
|
121
125
|
backgroundColor: 'rgba(255, 99, 132, 0.2)',
|
|
122
126
|
borderColor: 'rgba(255, 99, 132, 1)',
|
|
123
127
|
borderWidth: 1
|
|
@@ -125,7 +129,7 @@ WithData.args = {
|
|
|
125
129
|
{
|
|
126
130
|
label: 'Line Series',
|
|
127
131
|
type: 'line',
|
|
128
|
-
data: [15, 25, 35],
|
|
132
|
+
// data: [15, 25, 35],
|
|
129
133
|
borderColor: 'rgba(54, 162, 235, 1)',
|
|
130
134
|
borderWidth: 1,
|
|
131
135
|
fill: false,
|
|
@@ -158,7 +162,7 @@ MultiAxis.args = {
|
|
|
158
162
|
{
|
|
159
163
|
label: 'Bar Series',
|
|
160
164
|
type: 'bar',
|
|
161
|
-
data: [10, 20, 30],
|
|
165
|
+
// data: [10, 20, 30],
|
|
162
166
|
backgroundColor: 'rgba(255, 99, 132, 0.2)',
|
|
163
167
|
borderColor: 'rgba(255, 99, 132, 1)',
|
|
164
168
|
borderWidth: 1,
|
|
@@ -167,7 +171,7 @@ MultiAxis.args = {
|
|
|
167
171
|
{
|
|
168
172
|
label: 'Line Series',
|
|
169
173
|
type: 'line',
|
|
170
|
-
data: [15, 25, 35],
|
|
174
|
+
// data: [15, 25, 35],
|
|
171
175
|
borderColor: 'rgba(54, 162, 235, 1)',
|
|
172
176
|
borderWidth: 1,
|
|
173
177
|
fill: false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-chart-bar.stories.js","sourceRoot":"","sources":["../../stories/ox-input-chart-bar.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,OAAO,wCAAwC,CAAA;AAC/C,OAAO,+BAA+B,CAAA;AACtC,OAAO,gCAAgC,CAAA;AAEvC,OAAO,EAAE,IAAI,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAA;AAEzD,eAAe;IACb,KAAK,EAAE,8BAA8B;IACrC,SAAS,EAAE,sBAAsB;IACjC,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;KAC7B;CACF,CAAA;AAYD,MAAM,QAAQ,GAAoB,CAAC,EAAE,KAAK,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eA8DhD,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;IACD,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,WAAW,CAAgB,CAAA;IACnE,IAAI,QAAQ,EAAE,CAAC;QACb,CAAC;QAAC,QAAgB,CAAC,MAAM,GAAG,MAAM,CAAA;IACpC,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;;;wCAGiC,IAAI;;;;CAI3C,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG,EAAE,CAAA;
|
|
1
|
+
{"version":3,"file":"ox-input-chart-bar.stories.js","sourceRoot":"","sources":["../../stories/ox-input-chart-bar.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, TemplateResult } from 'lit'\n\nimport '../src/editors/ox-input-chart-mixed.js'\nimport '../src/chartjs/ox-chart-js.js'\nimport '../src/scichart/ox-scichart.js'\n\nimport { data, getDefaultChartConfig } from './common.js'\n\nexport default {\n title: 'ox-input-chart-mixed for bar',\n component: 'ox-input-chart-mixed',\n argTypes: {\n value: { control: 'object' }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n value: OperatoChart.ChartConfig\n}\n\nconst Template: Story<ArgTypes> = ({ value }: ArgTypes) => html`\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n <style>\n .container {\n width: 100%;\n height: 100%;\n\n display: flex;\n flex-direction: row;\n overflow-y: auto;\n padding: var(--spacing-medium);\n }\n\n .container.dark {\n background-color: black;\n }\n\n #editor {\n width: 300px;\n }\n\n #charts {\n flex: 1;\n\n display: flex;\n flex-direction: column;\n padding: 10px;\n }\n\n #chartjs {\n flex: 1;\n }\n\n #scichart {\n flex: 1;\n }\n </style>\n\n <div style=\"background-color: black; color: white;\">\n Type 'count' or 'average' for series dataKey, type 'year' for axis's dataKey\n </div>\n\n <div class=\"container light\">\n <ox-input-chart-mixed\n chart-type=\"bar\"\n id=\"editor\"\n .value=${value}\n @change=${(e: CustomEvent) => {\n const target = e.currentTarget as any\n const config = target.value\n const chartjs = document.querySelector('#chartjs') as HTMLElement\n if (chartjs) {\n ;(chartjs as any).config = { ...config }\n }\n const scichart = document.querySelector('#scichart') as HTMLElement\n if (scichart) {\n ;(scichart as any).config = config\n }\n\n const container = document.querySelector('.container') as HTMLElement\n if (container) {\n const theme = config.options.theme\n if (theme == 'dark') {\n container.classList.remove('light')\n container.classList.add('dark')\n } else {\n container.classList.remove('dark')\n container.classList.add('light')\n }\n }\n }}\n ></ox-input-chart-mixed>\n <div id=\"charts\">\n <ox-chart-js id=\"chartjs\" .data=${data}></ox-chart-js>\n <ox-scichart id=\"scichart\"></ox-scichart>\n </div>\n </div>\n`\n\nexport const Default = Template.bind({})\nDefault.args = {\n 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 // data: [10, 20, 30],\n backgroundColor: 'rgba(255, 99, 132, 0.2)',\n borderColor: 'rgba(255, 99, 132, 1)',\n borderWidth: 1\n },\n {\n label: 'Line Series',\n type: 'line',\n // data: [15, 25, 35],\n borderColor: 'rgba(54, 162, 235, 1)',\n borderWidth: 1,\n fill: false,\n lineTension: 0.4,\n pointStyle: 'circle',\n pointRadius: 3\n }\n ],\n labelDataKey: 'labels'\n },\n options: {\n scales: {\n xAxes: [{ ticks: { beginAtZero: true } }],\n yAxes: [{ ticks: { beginAtZero: true } }]\n },\n legend: { display: true }\n }\n }\n}\n\nexport const MultiAxis = Template.bind({})\nMultiAxis.args = {\n value: {\n ...getDefaultChartConfig('bar'),\n options: {\n ...getDefaultChartConfig('bar').options,\n multiAxis: true\n },\n data: {\n datasets: [\n {\n label: 'Bar Series',\n type: 'bar',\n // data: [10, 20, 30],\n backgroundColor: 'rgba(255, 99, 132, 0.2)',\n borderColor: 'rgba(255, 99, 132, 1)',\n borderWidth: 1,\n yAxisID: 'left'\n },\n {\n label: 'Line Series',\n type: 'line',\n // data: [15, 25, 35],\n borderColor: 'rgba(54, 162, 235, 1)',\n borderWidth: 1,\n fill: false,\n lineTension: 0.4,\n pointStyle: 'circle',\n pointRadius: 3,\n yAxisID: 'right'\n }\n ],\n labelDataKey: 'labels'\n }\n }\n}\n"]}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { TemplateResult } from 'lit';
|
|
2
|
+
import '../src/editors/ox-input-chart-timeseries.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>;
|
|
@@ -0,0 +1,182 @@
|
|
|
1
|
+
import { html } from 'lit';
|
|
2
|
+
import '../src/editors/ox-input-chart-timeseries.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-timeseries',
|
|
8
|
+
component: 'ox-input-chart-timeseries',
|
|
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 'year' for axis's dataKey
|
|
69
|
+
</div>
|
|
70
|
+
|
|
71
|
+
<div class="container light">
|
|
72
|
+
<ox-input-chart-timeseries
|
|
73
|
+
chart-type="line"
|
|
74
|
+
id="editor"
|
|
75
|
+
.value=${value}
|
|
76
|
+
@change=${(e) => {
|
|
77
|
+
const target = e.currentTarget;
|
|
78
|
+
const config = target.value;
|
|
79
|
+
const chartjs = document.querySelector('#chartjs');
|
|
80
|
+
if (chartjs) {
|
|
81
|
+
;
|
|
82
|
+
chartjs.config = { ...config };
|
|
83
|
+
}
|
|
84
|
+
const scichart = document.querySelector('#scichart');
|
|
85
|
+
if (scichart) {
|
|
86
|
+
;
|
|
87
|
+
scichart.config = config;
|
|
88
|
+
}
|
|
89
|
+
const container = document.querySelector('.container');
|
|
90
|
+
if (container) {
|
|
91
|
+
const theme = config.options.theme;
|
|
92
|
+
if (theme == 'dark') {
|
|
93
|
+
container.classList.remove('light');
|
|
94
|
+
container.classList.add('dark');
|
|
95
|
+
}
|
|
96
|
+
else {
|
|
97
|
+
container.classList.remove('dark');
|
|
98
|
+
container.classList.add('light');
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
}}
|
|
102
|
+
></ox-input-chart-timeseries>
|
|
103
|
+
<div id="charts">
|
|
104
|
+
<ox-scichart id="scichart" .data=${data} attr-x="year" attr-y="count"></ox-scichart>
|
|
105
|
+
<ox-chart-js id="chartjs" .data=${data}></ox-chart-js>
|
|
106
|
+
</div>
|
|
107
|
+
</div>
|
|
108
|
+
`;
|
|
109
|
+
export const Default = Template.bind({});
|
|
110
|
+
Default.args = {};
|
|
111
|
+
export const WithData = Template.bind({});
|
|
112
|
+
WithData.args = {
|
|
113
|
+
value: {
|
|
114
|
+
...getDefaultChartConfig('line'),
|
|
115
|
+
data: {
|
|
116
|
+
datasets: [
|
|
117
|
+
{
|
|
118
|
+
dataKey: 'count',
|
|
119
|
+
label: 'Line Series count',
|
|
120
|
+
type: 'line',
|
|
121
|
+
backgroundColor: 'rgba(255, 99, 132, 0.2)',
|
|
122
|
+
borderColor: 'rgba(255, 99, 132, 1)',
|
|
123
|
+
borderWidth: 1
|
|
124
|
+
},
|
|
125
|
+
{
|
|
126
|
+
dataKey: 'average',
|
|
127
|
+
label: 'Line Series average',
|
|
128
|
+
type: 'line',
|
|
129
|
+
borderColor: 'rgba(54, 162, 235, 1)',
|
|
130
|
+
borderWidth: 1,
|
|
131
|
+
fill: false,
|
|
132
|
+
lineTension: 0.4,
|
|
133
|
+
pointStyle: 'circle',
|
|
134
|
+
pointRadius: 3
|
|
135
|
+
}
|
|
136
|
+
],
|
|
137
|
+
labelDataKey: 'year'
|
|
138
|
+
},
|
|
139
|
+
options: {
|
|
140
|
+
scales: {
|
|
141
|
+
xAxes: [{ ticks: { beginAtZero: true } }],
|
|
142
|
+
yAxes: [{ ticks: { beginAtZero: true } }]
|
|
143
|
+
},
|
|
144
|
+
legend: { display: true }
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
};
|
|
148
|
+
export const MultiAxis = Template.bind({});
|
|
149
|
+
MultiAxis.args = {
|
|
150
|
+
value: {
|
|
151
|
+
...getDefaultChartConfig('line'),
|
|
152
|
+
options: {
|
|
153
|
+
...getDefaultChartConfig('line').options,
|
|
154
|
+
multiAxis: true
|
|
155
|
+
},
|
|
156
|
+
data: {
|
|
157
|
+
datasets: [
|
|
158
|
+
{
|
|
159
|
+
label: 'Bar Series',
|
|
160
|
+
type: 'bar',
|
|
161
|
+
backgroundColor: 'rgba(255, 99, 132, 0.2)',
|
|
162
|
+
borderColor: 'rgba(255, 99, 132, 1)',
|
|
163
|
+
borderWidth: 1,
|
|
164
|
+
yAxisID: 'left'
|
|
165
|
+
},
|
|
166
|
+
{
|
|
167
|
+
label: 'Line Series',
|
|
168
|
+
type: 'line',
|
|
169
|
+
borderColor: 'rgba(54, 162, 235, 1)',
|
|
170
|
+
borderWidth: 1,
|
|
171
|
+
fill: false,
|
|
172
|
+
lineTension: 0.4,
|
|
173
|
+
pointStyle: 'circle',
|
|
174
|
+
pointRadius: 3,
|
|
175
|
+
yAxisID: 'right'
|
|
176
|
+
}
|
|
177
|
+
],
|
|
178
|
+
labelDataKey: 'labels'
|
|
179
|
+
}
|
|
180
|
+
}
|
|
181
|
+
};
|
|
182
|
+
//# sourceMappingURL=ox-input-chart-timeseries.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ox-input-chart-timeseries.stories.js","sourceRoot":"","sources":["../../stories/ox-input-chart-timeseries.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, TemplateResult } from 'lit'\n\nimport '../src/editors/ox-input-chart-timeseries.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-timeseries',\n component: 'ox-input-chart-timeseries',\n argTypes: {\n value: { control: 'object' }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n value: OperatoChart.ChartConfig\n}\n\nconst Template: Story<ArgTypes> = ({ value }: ArgTypes) => html`\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n <style>\n .container {\n width: 100%;\n height: 100%;\n\n display: flex;\n flex-direction: row;\n overflow-y: auto;\n padding: var(--spacing-medium);\n }\n\n .container.dark {\n background-color: black;\n }\n\n #editor {\n width: 300px;\n }\n\n #charts {\n flex: 1;\n\n display: flex;\n flex-direction: column;\n padding: 10px;\n }\n\n #chartjs {\n flex: 1;\n }\n\n #scichart {\n flex: 1;\n }\n </style>\n\n <div style=\"background-color: black; color: white;\">\n Type 'count' or 'average' for series dataKey, type 'year' for axis's dataKey\n </div>\n\n <div class=\"container light\">\n <ox-input-chart-timeseries\n chart-type=\"line\"\n id=\"editor\"\n .value=${value}\n @change=${(e: CustomEvent) => {\n const target = e.currentTarget as any\n const config = target.value\n const chartjs = document.querySelector('#chartjs') as HTMLElement\n if (chartjs) {\n ;(chartjs as any).config = { ...config }\n }\n const scichart = document.querySelector('#scichart') as HTMLElement\n if (scichart) {\n ;(scichart as any).config = config\n }\n\n const container = document.querySelector('.container') as HTMLElement\n if (container) {\n const theme = config.options.theme\n if (theme == 'dark') {\n container.classList.remove('light')\n container.classList.add('dark')\n } else {\n container.classList.remove('dark')\n container.classList.add('light')\n }\n }\n }}\n ></ox-input-chart-timeseries>\n <div id=\"charts\">\n <ox-scichart id=\"scichart\" .data=${data} attr-x=\"year\" attr-y=\"count\"></ox-scichart>\n <ox-chart-js id=\"chartjs\" .data=${data}></ox-chart-js>\n </div>\n </div>\n`\n\nexport const Default = Template.bind({})\nDefault.args = {}\n\nexport const WithData = Template.bind({})\nWithData.args = {\n value: {\n ...getDefaultChartConfig('line'),\n data: {\n datasets: [\n {\n dataKey: 'count',\n label: 'Line Series count',\n type: 'line',\n backgroundColor: 'rgba(255, 99, 132, 0.2)',\n borderColor: 'rgba(255, 99, 132, 1)',\n borderWidth: 1\n },\n {\n dataKey: 'average',\n label: 'Line Series average',\n type: 'line',\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: 'year'\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('line'),\n options: {\n ...getDefaultChartConfig('line').options,\n multiAxis: true\n },\n data: {\n datasets: [\n {\n label: 'Bar Series',\n type: 'bar',\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 borderColor: 'rgba(54, 162, 235, 1)',\n borderWidth: 1,\n fill: false,\n lineTension: 0.4,\n pointStyle: 'circle',\n pointRadius: 3,\n yAxisID: 'right'\n }\n ],\n labelDataKey: 'labels'\n }\n }\n}\n"]}
|