From be5124217a20532ffd05a26f5e89ad2c746a7edb Mon Sep 17 00:00:00 2001 From: Philipp Kunz Date: Sat, 3 Feb 2024 11:26:15 +0100 Subject: [PATCH] fix(core): update --- package.json | 1 + pnpm-lock.yaml | 73 ++++++++++++++++++++ ts_web/00_commitinfo_data.ts | 2 +- ts_web/elements/dees-chart-area.demo.ts | 18 +++++ ts_web/elements/dees-chart-area.ts | 92 +++++++++++++++++++++++++ ts_web/elements/dees-form.ts | 4 ++ ts_web/elements/index.ts | 1 + 7 files changed, 190 insertions(+), 1 deletion(-) create mode 100644 ts_web/elements/dees-chart-area.demo.ts create mode 100644 ts_web/elements/dees-chart-area.ts diff --git a/package.json b/package.json index ab70147..71a2058 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "@push.rocks/smartstring": "^4.0.13", "@tsclass/tsclass": "^4.0.46", "@webcontainer/api": "^1.1.8", + "apexcharts": "^3.45.2", "highlight.js": "11.9.0", "ibantools": "^4.3.9", "monaco-editor": "^0.45.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e8900d3..8524f6a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -41,6 +41,9 @@ dependencies: '@webcontainer/api': specifier: ^1.1.8 version: 1.1.8 + apexcharts: + specifier: ^3.45.2 + version: 3.45.2 highlight.js: specifier: 11.9.0 version: 11.9.0 @@ -2105,6 +2108,10 @@ packages: engines: {node: '>=10.0.0'} dev: true + /@yr/monotone-cubic-spline@1.0.3: + resolution: {integrity: sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA==} + dev: false + /abbrev@1.1.1: resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==} requiresBuild: true @@ -2218,6 +2225,18 @@ packages: picomatch: 2.3.1 dev: true + /apexcharts@3.45.2: + resolution: {integrity: sha512-PpuM4sJWy70sUh5U1IFn1m1p45MdHSChLUNnqEoUUUHSU2IHZugFrsVNhov1S8Q0cvfdrCRCvdBtHGSs6PSAWQ==} + dependencies: + '@yr/monotone-cubic-spline': 1.0.3 + svg.draggable.js: 2.2.2 + svg.easing.js: 2.0.0 + svg.filter.js: 2.0.2 + svg.pathmorphing.js: 0.1.3 + svg.resize.js: 1.4.3 + svg.select.js: 3.0.1 + dev: false + /aproba@2.0.0: resolution: {integrity: sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==} requiresBuild: true @@ -6269,6 +6288,60 @@ packages: has-flag: 4.0.0 dev: true + /svg.draggable.js@2.2.2: + resolution: {integrity: sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==} + engines: {node: '>= 0.8.0'} + dependencies: + svg.js: 2.7.1 + dev: false + + /svg.easing.js@2.0.0: + resolution: {integrity: sha512-//ctPdJMGy22YoYGV+3HEfHbm6/69LJUTAqI2/5qBvaNHZ9uUFVC82B0Pl299HzgH13rKrBgi4+XyXXyVWWthA==} + engines: {node: '>= 0.8.0'} + dependencies: + svg.js: 2.7.1 + dev: false + + /svg.filter.js@2.0.2: + resolution: {integrity: sha512-xkGBwU+dKBzqg5PtilaTb0EYPqPfJ9Q6saVldX+5vCRy31P6TlRCP3U9NxH3HEufkKkpNgdTLBJnmhDHeTqAkw==} + engines: {node: '>= 0.8.0'} + dependencies: + svg.js: 2.7.1 + dev: false + + /svg.js@2.7.1: + resolution: {integrity: sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA==} + dev: false + + /svg.pathmorphing.js@0.1.3: + resolution: {integrity: sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==} + engines: {node: '>= 0.8.0'} + dependencies: + svg.js: 2.7.1 + dev: false + + /svg.resize.js@1.4.3: + resolution: {integrity: sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==} + engines: {node: '>= 0.8.0'} + dependencies: + svg.js: 2.7.1 + svg.select.js: 2.1.2 + dev: false + + /svg.select.js@2.1.2: + resolution: {integrity: sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==} + engines: {node: '>= 0.8.0'} + dependencies: + svg.js: 2.7.1 + dev: false + + /svg.select.js@3.0.1: + resolution: {integrity: sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==} + engines: {node: '>= 0.8.0'} + dependencies: + svg.js: 2.7.1 + dev: false + /sweet-scroll@4.0.0: resolution: {integrity: sha512-mR6fRsAQANtm3zpzhUE73KAOt2aT4ZsWzNSggiEsSqdO6Zh4gM7ioJG81EngrZEl0XAc3ZvzEfhxggOoEBc8jA==} dev: false diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts index ad8cf9d..2f0a240 100644 --- a/ts_web/00_commitinfo_data.ts +++ b/ts_web/00_commitinfo_data.ts @@ -3,6 +3,6 @@ */ export const commitinfo = { name: '@design.estate/dees-catalog', - version: '1.0.277', + version: '1.0.278', description: 'website for lossless.com' } diff --git a/ts_web/elements/dees-chart-area.demo.ts b/ts_web/elements/dees-chart-area.demo.ts new file mode 100644 index 0000000..bb85cfb --- /dev/null +++ b/ts_web/elements/dees-chart-area.demo.ts @@ -0,0 +1,18 @@ +import { html } from '@design.estate/dees-element'; + +export const demoFunc = () => { + return html` + +
+ +
+ `; +}; diff --git a/ts_web/elements/dees-chart-area.ts b/ts_web/elements/dees-chart-area.ts new file mode 100644 index 0000000..ef9af18 --- /dev/null +++ b/ts_web/elements/dees-chart-area.ts @@ -0,0 +1,92 @@ +import { + DeesElement, + css, + cssManager, + customElement, + html, + property, + type CSSResult, + type TemplateResult, +} from '@design.estate/dees-element'; + +import * as domtools from '@design.estate/dees-domtools'; +import { demoFunc } from './dees-chart-area.demo.js'; + +import ApexCharts from 'apexcharts'; + +declare global { + interface HTMLElementTagNameMap { + 'dees-chart-area': DeesChartArea; + } +} + +@customElement('dees-chart-area') +export class DeesChartArea extends DeesElement { + public static demo = demoFunc; + + constructor() { + super(); + domtools.elementBasic.setup(); + } + + public static styles = [cssManager.defaultStyles, css` + .mainbox { + width: 600px; + height: 600px; + background: #222; + border-radius: 3px; + padding: 16px; + padding-top: 32px; + } + `]; + + public render(): TemplateResult { + return html`
`; + } + + public async firstUpdated() { + var options = { + series: [ + { + name: 'series1', + data: [31, 40, 28, 51, 42, 109, 100], + }, + { + name: 'series2', + data: [11, 32, 45, 32, 34, 52, 41], + }, + ], + chart: { + width: 560, + height: 540, + type: 'area', + }, + dataLabels: { + enabled: false, + }, + stroke: { + curve: 'smooth', + }, + xaxis: { + type: 'datetime', + categories: [ + '2018-09-19T00:00:00.000Z', + '2018-09-19T01:30:00.000Z', + '2018-09-19T02:30:00.000Z', + '2018-09-19T03:30:00.000Z', + '2018-09-19T04:30:00.000Z', + '2018-09-19T05:30:00.000Z', + '2018-09-19T06:30:00.000Z', + ], + }, + tooltip: { + x: { + format: 'dd/MM/yy HH:mm', + }, + }, + }; + + var chart = new ApexCharts(this.shadowRoot.querySelector('.mainbox'), options); + chart.render(); + } +} diff --git a/ts_web/elements/dees-form.ts b/ts_web/elements/dees-form.ts index 1447b7e..e0536b4 100644 --- a/ts_web/elements/dees-form.ts +++ b/ts_web/elements/dees-form.ts @@ -101,6 +101,10 @@ export class DeesForm extends DeesElement { } } + /** + * collects the form data + * @returns + */ public async collectFormData() { const children = this.getFormElements(); const valueObject: { [key: string]: string | number | boolean | any[] } = {}; diff --git a/ts_web/elements/index.ts b/ts_web/elements/index.ts index d230036..d15ba92 100644 --- a/ts_web/elements/index.ts +++ b/ts_web/elements/index.ts @@ -6,6 +6,7 @@ export * from './dees-appui-mainmenu.js'; export * from './dees-appui-mainselector.js'; export * from './dees-button-exit.js'; export * from './dees-button.js'; +export * from './dees-chart-area.js'; export * from './dees-chips.js'; export * from './dees-contextmenu.js'; export * from './dees-dataview-codebox.js';