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