From 1a1a417d94a72f4abfefaab8530c88e795019dac Mon Sep 17 00:00:00 2001 From: Gerard Burns Date: Wed, 17 Apr 2024 21:43:33 +0100 Subject: [PATCH] hmm --- packages/client/package.json | 2 +- .../client/src/components/Component.svelte | 8 --- .../components/app/charts/ApexChart.svelte | 3 + .../app/charts/ApexOptionsBuilder.js | 3 +- .../src/components/app/charts/BarChart.svelte | 57 +++++++++---------- yarn.lock | 2 +- 6 files changed, 32 insertions(+), 43 deletions(-) diff --git a/packages/client/package.json b/packages/client/package.json index a576b70ebc..1bbf7319cb 100644 --- a/packages/client/package.json +++ b/packages/client/package.json @@ -32,7 +32,7 @@ "@spectrum-css/tag": "^3.1.4", "@spectrum-css/typography": "^3.0.2", "@spectrum-css/vars": "^3.0.1", - "apexcharts": "^3.45.2", + "apexcharts": "^3.48.0", "dayjs": "^1.10.8", "downloadjs": "1.4.7", "html5-qrcode": "^2.2.1", diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte index 05068edad6..de9ed4a7b8 100644 --- a/packages/client/src/components/Component.svelte +++ b/packages/client/src/components/Component.svelte @@ -289,7 +289,6 @@ const sectionRealDependentValue = instance[sectionDependsOnKey] - let foo = instance._component === "@budibase/standard-components/chartblock" && setting.type === "multifield" if (dependsOnValue == null && realDependentValue == null) { return false } @@ -303,13 +302,6 @@ if (sectionDependsOnValue != null && sectionDependsOnValue !== sectionRealDependentValue) { return false } - if (foo) { - console.log(setting) - console.log(instance); - console.log(dependsOnValue); - console.log(realDependentValue); - console.log("") - } } return missing diff --git a/packages/client/src/components/app/charts/ApexChart.svelte b/packages/client/src/components/app/charts/ApexChart.svelte index 411774c353..0583652ad9 100644 --- a/packages/client/src/components/app/charts/ApexChart.svelte +++ b/packages/client/src/components/app/charts/ApexChart.svelte @@ -8,6 +8,9 @@ const component = getContext("component") export let options + $: { + console.log(options); + } /* export let invalid = false diff --git a/packages/client/src/components/app/charts/ApexOptionsBuilder.js b/packages/client/src/components/app/charts/ApexOptionsBuilder.js index afdc3f780b..bd3146acaa 100644 --- a/packages/client/src/components/app/charts/ApexOptionsBuilder.js +++ b/packages/client/src/components/app/charts/ApexOptionsBuilder.js @@ -1,7 +1,7 @@ export class ApexOptionsBuilder { constructor() { this.formatters = { - ["Default"]: val => (isNaN(val) ? val : Math.round(val * 100) / 100), + ["Default"]: val => val, ["Thousands"]: val => `${Math.round(val / 1000)}K`, ["Millions"]: val => `${Math.round(val / 1000000)}M`, } @@ -166,7 +166,6 @@ export class ApexOptionsBuilder { } candleStick() { - //this.options.xaxis.convertedCatToNumeric = false; this.options.xaxis.labels.formatter = (epoch) => { return (new Date(epoch)).toDateString(); } diff --git a/packages/client/src/components/app/charts/BarChart.svelte b/packages/client/src/components/app/charts/BarChart.svelte index 764394316a..b9586b280e 100644 --- a/packages/client/src/components/app/charts/BarChart.svelte +++ b/packages/client/src/components/app/charts/BarChart.svelte @@ -95,52 +95,47 @@ .colors(customColor ? colors : null) // Add data - let useDates = false if (schema[labelColumn]) { const labelFieldType = schema[labelColumn].type if (horizontal) { - builder = builder.yType(labelFieldType).xUnits(yAxisUnits) + builder = builder.xUnits(yAxisUnits) } else { - builder = builder.xType(labelFieldType).yUnits(yAxisUnits) + builder = builder.yUnits(yAxisUnits) } - useDates = labelFieldType === "datetime" } const series = (valueColumns ?? []).map(column => ({ name: column, data: data.map(row => { - if (!useDates) { - const value = get(row, column); + const value = get(row, column); - if (schema?.[column]?.type === 'datetime') { - return Date.parse(value) - } - - if (Array.isArray(value)) { - return null; - } - - if (Number.isNaN(parseInt(value, 10))) { - return null; - } - - return value; - } else { - // TODO datetimes as labels are passed in this way, but this only updates on value change, so it's broken until you also change the value - return [row[labelColumn], row[column]] + if (schema?.[column]?.type === 'datetime') { + return Date.parse(value) } + + if (Array.isArray(value)) { + return null; + } + + if (Number.isNaN(parseInt(value, 10))) { + return null; + } + + return value; }), })) builder = builder.series(series) - if (!useDates) { - builder = builder.xCategories(data.map(row => row[labelColumn])) - } else { - // Horizontal dates don't work anyway, but this is the correct logic - if (horizontal) { - builder = builder.clearYFormatter() - } else { - builder = builder.clearXFormatter() + builder = builder.xCategories(data.map(row => { + const value = row[labelColumn] + if (schema[labelColumn]?.type === 'datetime') { + const dateString = (new Date(Date.parse(value))).toLocaleDateString() + console.log(value) + console.log(dateString) + console.log() + return dateString } - } + + return value ?? "" + })) // Build chart options return builder.getOptions() diff --git a/yarn.lock b/yarn.lock index a49ac599e9..df06dd4f5d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6924,7 +6924,7 @@ apexcharts@^3.19.2: svg.resize.js "^1.4.3" svg.select.js "^3.0.1" -apexcharts@^3.45.2: +apexcharts@^3.48.0: version "3.48.0" resolved "https://registry.yarnpkg.com/apexcharts/-/apexcharts-3.48.0.tgz#cf0e18f4551b04a242d81942c965c15547f5f1b6" integrity sha512-Lhpj1Ij6lKlrUke8gf+P+SE6uGUn+Pe1TnCJ+zqrY0YMvbqM3LMb1lY+eybbTczUyk0RmMZomlTa2NgX2EUs4Q==