From 257fde14812645fb08f78062a42033cafa193c98 Mon Sep 17 00:00:00 2001 From: Gerard Burns Date: Thu, 18 Apr 2024 08:08:45 +0100 Subject: [PATCH] Datetime working now on bar charts i thjink --- packages/client/manifest.json | 16 ++++----- .../components/app/charts/ApexChart.svelte | 19 +++++----- .../src/components/app/charts/BarChart.svelte | 35 +++++++++++++++---- 3 files changed, 48 insertions(+), 22 deletions(-) diff --git a/packages/client/manifest.json b/packages/client/manifest.json index 84abe7be6d..36bb026d96 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -1655,7 +1655,7 @@ { "type": "select", "label": "Format", - "key": "yAxisUnits", + "key": "valueUnits", "options": ["Default", "Thousands", "Millions"], "defaultValue": "Default" }, @@ -1813,7 +1813,7 @@ { "type": "select", "label": "Format", - "key": "yAxisUnits", + "key": "valueUnits", "options": ["Default", "Thousands", "Millions"], "defaultValue": "Default" }, @@ -1966,7 +1966,7 @@ { "type": "select", "label": "Format", - "key": "yAxisUnits", + "key": "valueUnits", "options": ["Default", "Thousands", "Millions"], "defaultValue": "Default" }, @@ -2410,7 +2410,7 @@ { "type": "select", "label": "Format", - "key": "yAxisUnits", + "key": "valueUnits", "options": ["Default", "Thousands", "Millions"], "defaultValue": "Default" }, @@ -5341,7 +5341,7 @@ { "type": "select", "label": "Format", - "key": "yAxisUnits", + "key": "valueUnits", "options": ["Default", "Thousands", "Millions"], "defaultValue": "Default" }, @@ -5436,7 +5436,7 @@ { "type": "select", "label": "Format", - "key": "yAxisUnits", + "key": "valueUnits", "options": ["Default", "Thousands", "Millions"], "defaultValue": "Default" }, @@ -5485,7 +5485,7 @@ { "type": "select", "label": "Format", - "key": "yAxisUnits", + "key": "valueUnits", "options": ["Default", "Thousands", "Millions"], "defaultValue": "Default" }, @@ -5567,7 +5567,7 @@ { "type": "select", "label": "Format", - "key": "yAxisUnits", + "key": "valueUnits", "options": ["Default", "Thousands", "Millions"], "defaultValue": "Default" }, diff --git a/packages/client/src/components/app/charts/ApexChart.svelte b/packages/client/src/components/app/charts/ApexChart.svelte index 411774c353..3f0ce221e5 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 + + // Apex charts directly modifies the options object with default properties and internal variables. These being present could unintentionally cause issues to the provider of this prop as the changes are reflected in that component as well. To prevent any issues we clone this here to provide a buffer. + $: optionsCopy = cloneDeep(options); /* export let invalid = false @@ -27,8 +30,8 @@ return parsedValue } - const parseOptions = (options) => { - const parsedOptions = { series: [], ...cloneDeep(options)} + const parseOptions = (optionsCopy) => { + const parsedOptions = { series: [], ...cloneDeep(optionsCopy)} // Object form of series, used by most charts if (parsedOptions.series.some(entry => Array.isArray(entry?.data))) { @@ -41,7 +44,7 @@ return parsedOptions; } - $: parsedOptions = parseOptions(options); + $: parsedOptions = parseOptions(optionsCopy); */ let chartElement; @@ -58,7 +61,7 @@ const renderChart = async (newChartElement) => { try { await chart?.destroy() - chart = new ApexCharts(newChartElement, options) + chart = new ApexCharts(newChartElement, optionsCopy) await chart.render() } catch(e) { //console.log(e) @@ -69,17 +72,17 @@ return true } - $: noData = options == null || options?.series?.length === 0 + $: noData = optionsCopy == null || optionsCopy?.series?.length === 0 $: hide = noData || !seriesValid // Call render chart upon changes to hide, as apex charts has issues with rendering upon changes automatically // if the chart is hidden. $: renderChart(chartElement, hide) - $: updateChart(options) - $: seriesValid = isSeriesValid(options?.series || []) + $: updateChart(optionsCopy) + $: seriesValid = isSeriesValid(optionsCopy?.series || []) -{#key options?.customColor} +{#key optionsCopy?.customColor}
{#if $builderStore.inBuilder && noData }
diff --git a/packages/client/src/components/app/charts/BarChart.svelte b/packages/client/src/components/app/charts/BarChart.svelte index e18ac77cf7..5e3aa104b2 100644 --- a/packages/client/src/components/app/charts/BarChart.svelte +++ b/packages/client/src/components/app/charts/BarChart.svelte @@ -16,7 +16,7 @@ export let animate export let legend export let stacked - export let yAxisUnits + export let valueUnits export let palette export let c1, c2, c3, c4, c5 export let horizontal @@ -25,13 +25,17 @@ ["Default"]: val => val, ["Thousands"]: val => `${Math.round(val / 1000)}K`, ["Millions"]: val => `${Math.round(val / 1000000)}M`, + ["Datetime"]: val => (new Date(val)).toLocaleString() } $: series = getSeries(dataProvider, valueColumns) $: categories = getCategories(dataProvider, labelColumn); - $: dataType = dataProvider?.schema?.[labelColumn]?.type === 'datetime' ? + $: labelType = dataProvider?.schema?.[labelColumn]?.type === 'datetime' ? "datetime" : "category" + $: formatter = getFormatter(labelType, valueUnits) + $: xAxisFormatter = getFormatter(labelType, valueUnits, horizontal, "x") + $: yAxisFormatter = getFormatter(labelType, valueUnits, horizontal, "y") $: options = { series, @@ -68,19 +72,29 @@ enabled: false, }, }, + plotOptions: { + bar: { + horizontal + } + }, + // We can just always provide the categories to the xaxis and horizontal mode automatically handles "tranposing" the categories to the yaxis, but certain things like labels need to be manually put on a certain axis based on the selected mode. Titles do not need to be handled this way, they are exposed to the user as "X axis" and Y Axis" so flipping them would be confusing. xaxis: { - type: dataType, + type: labelType, categories, + labels: { + formatter: xAxisFormatter + }, title: { text: xAxisLabel } }, + // bar charts in horizontal mode don't have a default setting for parsing the labels of dates, and will just spit out the unix epoch value. It also doesn't seem to respect any date based formatting properties passed in. So we'll just manualy format the labels, the chart still sorts the dates correctly in any case yaxis: { + labels: { + formatter: yAxisFormatter + }, title: { text: yAxisLabel - }, - labels: { - formatter: formatters[yAxisUnits] } } } @@ -111,6 +125,15 @@ }) } + const getFormatter = (labelType, valueUnits, horizontal, axis) => { + const isLabelAxis = (axis === "y" && horizontal) || axis === "x" && !horizontal + if (labelType === "datetime" && isLabelAxis) { + return formatters["Datetime"] + } + + return formatters[valueUnits] + } + $: console.log("opt", options);