@operato/chart 2.0.0-beta.25 → 2.0.0-beta.26
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/chartjs/config-converter.d.ts +22 -1
- package/dist/src/chartjs/config-converter.js +40 -23
- package/dist/src/chartjs/config-converter.js.map +1 -1
- package/dist/src/chartjs/ox-chart-js.d.ts +10 -3
- package/dist/src/chartjs/ox-chart-js.js +97 -5
- package/dist/src/chartjs/ox-chart-js.js.map +1 -1
- package/dist/src/editors/input-chart-abstract.js +3 -1
- package/dist/src/editors/input-chart-abstract.js.map +1 -1
- package/dist/stories/common.d.ts +5 -0
- package/dist/stories/common.js +9 -0
- package/dist/stories/common.js.map +1 -1
- package/dist/stories/ox-input-chart-hbar.stories.js +6 -4
- package/dist/stories/ox-input-chart-hbar.stories.js.map +1 -1
- package/dist/stories/ox-input-chart-mixed.stories.js +7 -4
- package/dist/stories/ox-input-chart-mixed.stories.js.map +1 -1
- package/dist/stories/ox-input-chart-pie.stories.js +9 -6
- package/dist/stories/ox-input-chart-pie.stories.js.map +1 -1
- package/dist/stories/ox-input-chart-radar.stories.js +9 -6
- package/dist/stories/ox-input-chart-radar.stories.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +23 -19
- package/src/chartjs/config-converter.ts +46 -28
- package/src/chartjs/ox-chart-js.ts +122 -7
- package/src/editors/input-chart-abstract.ts +3 -1
- package/src/types.d.ts +2 -0
- package/stories/common.ts +10 -0
- package/stories/ox-input-chart-hbar.stories.ts +6 -4
- package/stories/ox-input-chart-mixed.stories.ts +7 -4
- package/stories/ox-input-chart-pie.stories.ts +9 -6
- package/stories/ox-input-chart-radar.stories.ts +9 -6
- package/tsconfig.json +1 -1
- /package/src/{globat.d.ts → global.d.ts} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-chart-hbar.stories.js","sourceRoot":"","sources":["../../stories/ox-input-chart-hbar.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,OAAO,uCAAuC,CAAA;AAC9C,OAAO,+BAA+B,CAAA;AACtC,OAAO,gCAAgC,CAAA;
|
|
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 'year' for axis's dataKey\n </div>\n <div class=\"container light\">\n <ox-input-chart-hbar\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"]}
|
|
@@ -2,8 +2,7 @@ import { html } from 'lit';
|
|
|
2
2
|
import '../src/editors/ox-input-chart-mixed.js';
|
|
3
3
|
import '../src/chartjs/ox-chart-js.js';
|
|
4
4
|
import '../src/scichart/ox-scichart.js';
|
|
5
|
-
import {
|
|
6
|
-
import { getDefaultChartConfig } from './common.js';
|
|
5
|
+
import { data, getDefaultChartConfig } from './common.js';
|
|
7
6
|
export default {
|
|
8
7
|
title: 'ox-input-chart-mixed',
|
|
9
8
|
component: 'ox-input-chart-mixed',
|
|
@@ -65,6 +64,10 @@ const Template = ({ value }) => html `
|
|
|
65
64
|
}
|
|
66
65
|
</style>
|
|
67
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
|
+
|
|
68
71
|
<div class="container light">
|
|
69
72
|
<ox-input-chart-mixed
|
|
70
73
|
id="editor"
|
|
@@ -75,7 +78,7 @@ const Template = ({ value }) => html `
|
|
|
75
78
|
const chartjs = document.querySelector('#chartjs');
|
|
76
79
|
if (chartjs) {
|
|
77
80
|
;
|
|
78
|
-
chartjs.config =
|
|
81
|
+
chartjs.config = { ...config };
|
|
79
82
|
}
|
|
80
83
|
const scichart = document.querySelector('#scichart');
|
|
81
84
|
if (scichart) {
|
|
@@ -97,7 +100,7 @@ const Template = ({ value }) => html `
|
|
|
97
100
|
}}
|
|
98
101
|
></ox-input-chart-mixed>
|
|
99
102
|
<div id="charts">
|
|
100
|
-
<ox-chart-js id="chartjs"></ox-chart-js>
|
|
103
|
+
<ox-chart-js id="chartjs" .data=${data}></ox-chart-js>
|
|
101
104
|
<ox-scichart id="scichart"></ox-scichart>
|
|
102
105
|
</div>
|
|
103
106
|
</div>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-chart-mixed.stories.js","sourceRoot":"","sources":["../../stories/ox-input-chart-mixed.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;
|
|
1
|
+
{"version":3,"file":"ox-input-chart-mixed.stories.js","sourceRoot":"","sources":["../../stories/ox-input-chart-mixed.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',\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 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\nexport const WithData = Template.bind({})\nWithData.args = {\n value: {\n ...getDefaultChartConfig('mixed'),\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('mixed'),\n options: {\n ...getDefaultChartConfig('mixed').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"]}
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import { html } from 'lit';
|
|
2
2
|
import '../src/editors/ox-input-chart-pie.js';
|
|
3
3
|
import '../src/chartjs/ox-chart-js.js';
|
|
4
|
-
import {
|
|
5
|
-
import { getDefaultChartConfig } from './common.js';
|
|
4
|
+
import { data, getDefaultChartConfig } from './common.js';
|
|
6
5
|
export default {
|
|
7
6
|
title: 'ox-input-chart-pie',
|
|
8
7
|
component: 'ox-input-chart-pie',
|
|
@@ -53,6 +52,10 @@ const Template = ({ value, currentSeriesIndex }) => html `
|
|
|
53
52
|
}
|
|
54
53
|
</style>
|
|
55
54
|
|
|
55
|
+
<div style="background-color: black; color: white;">
|
|
56
|
+
Type 'count' or 'average' for series dataKey, type 'year' for axis's dataKey
|
|
57
|
+
</div>
|
|
58
|
+
|
|
56
59
|
<div class="container light">
|
|
57
60
|
<ox-input-chart-pie
|
|
58
61
|
id="editor"
|
|
@@ -60,10 +63,10 @@ const Template = ({ value, currentSeriesIndex }) => html `
|
|
|
60
63
|
@change=${(e) => {
|
|
61
64
|
const target = e.currentTarget;
|
|
62
65
|
const config = target.value;
|
|
63
|
-
const
|
|
64
|
-
if (
|
|
66
|
+
const chartjs = document.querySelector('#chartjs');
|
|
67
|
+
if (chartjs) {
|
|
65
68
|
;
|
|
66
|
-
|
|
69
|
+
chartjs.config = { ...config };
|
|
67
70
|
}
|
|
68
71
|
const container = document.querySelector('.container');
|
|
69
72
|
if (container) {
|
|
@@ -79,7 +82,7 @@ const Template = ({ value, currentSeriesIndex }) => html `
|
|
|
79
82
|
}
|
|
80
83
|
}}
|
|
81
84
|
></ox-input-chart-pie>
|
|
82
|
-
<ox-chart-js id="
|
|
85
|
+
<ox-chart-js id="chartjs" .data=${data}></ox-chart-js>
|
|
83
86
|
</div>
|
|
84
87
|
`;
|
|
85
88
|
export const Default = Template.bind({});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-chart-pie.stories.js","sourceRoot":"","sources":["../../stories/ox-input-chart-pie.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,OAAO,sCAAsC,CAAA;AAC7C,OAAO,+BAA+B,CAAA;
|
|
1
|
+
{"version":3,"file":"ox-input-chart-pie.stories.js","sourceRoot":"","sources":["../../stories/ox-input-chart-pie.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,oBAAoB;IAC3B,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eAiDpE,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,KAAK,CAAC;QAC/B,IAAI,EAAE;YACJ,QAAQ,EAAE;gBACR;oBACE,KAAK,EAAE,cAAc;oBACrB,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',\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 'year' for axis's dataKey\n </div>\n\n <div class=\"container light\">\n <ox-input-chart-pie\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('pie'),\n data: {\n datasets: [\n {\n label: 'Pie Series 1',\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,8 +1,7 @@
|
|
|
1
1
|
import { html } from 'lit';
|
|
2
2
|
import '../src/editors/ox-input-chart-radar.js';
|
|
3
3
|
import '../src/chartjs/ox-chart-js.js';
|
|
4
|
-
import {
|
|
5
|
-
import { getDefaultChartConfig } from './common.js';
|
|
4
|
+
import { data, getDefaultChartConfig } from './common.js';
|
|
6
5
|
export default {
|
|
7
6
|
title: 'ox-input-chart-radar',
|
|
8
7
|
component: 'ox-input-chart-radar',
|
|
@@ -53,6 +52,10 @@ const Template = ({ value, currentSeriesIndex }) => html `
|
|
|
53
52
|
}
|
|
54
53
|
</style>
|
|
55
54
|
|
|
55
|
+
<div style="background-color: black; color: white;">
|
|
56
|
+
Type 'count' or 'average' for series dataKey, type 'year' for axis's dataKey
|
|
57
|
+
</div>
|
|
58
|
+
|
|
56
59
|
<div class="container light">
|
|
57
60
|
<ox-input-chart-radar
|
|
58
61
|
id="editor"
|
|
@@ -60,10 +63,10 @@ const Template = ({ value, currentSeriesIndex }) => html `
|
|
|
60
63
|
@change=${(e) => {
|
|
61
64
|
const target = e.currentTarget;
|
|
62
65
|
const config = target.value;
|
|
63
|
-
const
|
|
64
|
-
if (
|
|
66
|
+
const chartjs = document.querySelector('#chartjs');
|
|
67
|
+
if (chartjs) {
|
|
65
68
|
;
|
|
66
|
-
|
|
69
|
+
chartjs.config = { ...config };
|
|
67
70
|
}
|
|
68
71
|
const container = document.querySelector('.container');
|
|
69
72
|
if (container) {
|
|
@@ -79,7 +82,7 @@ const Template = ({ value, currentSeriesIndex }) => html `
|
|
|
79
82
|
}
|
|
80
83
|
}}
|
|
81
84
|
></ox-input-chart-radar>
|
|
82
|
-
<ox-chart-js id="
|
|
85
|
+
<ox-chart-js id="chartjs" .data=${data}></ox-chart-js>
|
|
83
86
|
</div>
|
|
84
87
|
`;
|
|
85
88
|
export const Default = Template.bind({});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-chart-radar.stories.js","sourceRoot":"","sources":["../../stories/ox-input-chart-radar.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,OAAO,wCAAwC,CAAA;AAC/C,OAAO,+BAA+B,CAAA;
|
|
1
|
+
{"version":3,"file":"ox-input-chart-radar.stories.js","sourceRoot":"","sources":["../../stories/ox-input-chart-radar.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,OAAO,wCAAwC,CAAA;AAC/C,OAAO,+BAA+B,CAAA;AAEtC,OAAO,EAAE,IAAI,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAA;AAEzD,eAAe;IACb,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,sBAAsB;IACjC,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eAiDpE,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,OAAO,CAAC;QACjC,IAAI,EAAE;YACJ,QAAQ,EAAE;gBACR;oBACE,KAAK,EAAE,gBAAgB;oBACvB,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;oBAClB,eAAe,EAAE,yBAAyB;oBAC1C,WAAW,EAAE,uBAAuB;oBACpC,WAAW,EAAE,CAAC;oBACd,UAAU,EAAE,QAAQ;oBACpB,WAAW,EAAE,CAAC;iBACf;gBACD;oBACE,KAAK,EAAE,gBAAgB;oBACvB,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;oBAClB,eAAe,EAAE,yBAAyB;oBAC1C,WAAW,EAAE,uBAAuB;oBACpC,WAAW,EAAE,CAAC;oBACd,UAAU,EAAE,QAAQ;oBACpB,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-radar.js'\nimport '../src/chartjs/ox-chart-js.js'\n\nimport { data, getDefaultChartConfig } from './common.js'\n\nexport default {\n title: 'ox-input-chart-radar',\n component: 'ox-input-chart-radar',\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 'year' for axis's dataKey\n </div>\n\n <div class=\"container light\">\n <ox-input-chart-radar\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-radar>\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('radar'),\n data: {\n datasets: [\n {\n label: 'Radar Series 1',\n data: [10, 20, 30],\n backgroundColor: 'rgba(255, 99, 132, 0.2)',\n borderColor: 'rgba(255, 99, 132, 1)',\n borderWidth: 1,\n pointStyle: 'circle',\n pointRadius: 3\n },\n {\n label: 'Radar Series 2',\n data: [15, 25, 35],\n backgroundColor: 'rgba(54, 162, 235, 0.2)',\n borderColor: 'rgba(54, 162, 235, 1)',\n borderWidth: 1,\n pointStyle: 'circle',\n pointRadius: 3\n }\n ],\n labelDataKey: 'labels'\n },\n options: {\n legend: { display: true }\n }\n },\n currentSeriesIndex: 0\n}\n"]}
|