From b7ef51e6f5acc49e8ce3c10eb1009ab1642bca87 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 9 Sep 2021 19:28:37 +0100 Subject: [PATCH] Add horizontal bar chart setting --- packages/client/manifest.json | 6 ++++ .../app/charts/ApexOptionsBuilder.js | 34 +++++++++++++++++-- .../src/components/app/charts/BarChart.svelte | 20 ++++++++--- .../components/app/charts/LineChart.svelte | 4 ++- 4 files changed, 57 insertions(+), 7 deletions(-) diff --git a/packages/client/manifest.json b/packages/client/manifest.json index 51ae1cf30d..8b8aa0ebb9 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -1230,6 +1230,12 @@ "key": "stacked", "defaultValue": false }, + { + "type": "boolean", + "label": "Horizontal", + "key": "horizontal", + "defaultValue": false + }, { "type": "boolean", "label": "Data Labels", diff --git a/packages/client/src/components/app/charts/ApexOptionsBuilder.js b/packages/client/src/components/app/charts/ApexOptionsBuilder.js index 5c2ae1eb05..ef4083d648 100644 --- a/packages/client/src/components/app/charts/ApexOptionsBuilder.js +++ b/packages/client/src/components/app/charts/ApexOptionsBuilder.js @@ -1,6 +1,6 @@ export class ApexOptionsBuilder { formatters = { - ["Default"]: val => Math.round(val * 100) / 100, + ["Default"]: val => (isNaN(val) ? val : Math.round(val * 100) / 100), ["Thousands"]: val => `${Math.round(val / 1000)}K`, ["Millions"]: val => `${Math.round(val / 1000000)}M`, } @@ -22,6 +22,11 @@ export class ApexOptionsBuilder { enabled: false, }, }, + xaxis: { + labels: { + formatter: this.formatters.Default, + }, + }, yaxis: { labels: { formatter: this.formatters.Default, @@ -77,10 +82,14 @@ export class ApexOptionsBuilder { return this.setOption(["yaxis", "title", "text"], label) } - categories(categories) { + xCategories(categories) { return this.setOption(["xaxis", "categories"], categories) } + yCategories(categories) { + return this.setOption(["yaxis", "categories"], categories) + } + series(series) { return this.setOption(["series"], series) } @@ -130,6 +139,13 @@ export class ApexOptionsBuilder { return this.setOption(["labels"], labels) } + xUnits(units) { + return this.setOption( + ["xaxis", "labels", "formatter"], + this.formatters[units || "Default"] + ) + } + yUnits(units) { return this.setOption( ["yaxis", "labels", "formatter"], @@ -137,10 +153,24 @@ export class ApexOptionsBuilder { ) } + clearXFormatter() { + delete this.options.xaxis.labels + return this + } + + clearYFormatter() { + delete this.options.yaxis.labels + return this + } + xType(type) { return this.setOption(["xaxis", "type"], type) } + yType(type) { + return this.setOption(["yaxis", "type"], type) + } + yTooltip(yTooltip) { return this.setOption(["yaxis", "tooltip", "enabled"], yTooltip) } diff --git a/packages/client/src/components/app/charts/BarChart.svelte b/packages/client/src/components/app/charts/BarChart.svelte index 7d0d07a845..9a340c404e 100644 --- a/packages/client/src/components/app/charts/BarChart.svelte +++ b/packages/client/src/components/app/charts/BarChart.svelte @@ -16,6 +16,7 @@ export let stacked export let yAxisUnits export let palette + export let horizontal $: options = setUpChart(dataProvider) @@ -25,7 +26,7 @@ return null } - // Fatch data + // Fetch data const { schema, rows } = provider const reducer = row => (valid, column) => valid && row[column] != null const hasAllColumns = row => allCols.reduce(reducer(row), true) @@ -46,14 +47,18 @@ .animate(animate) .legend(legend) .stacked(stacked) - .yUnits(yAxisUnits) .palette(palette) + .horizontal(horizontal) // Add data let useDates = false if (schema[labelColumn]) { const labelFieldType = schema[labelColumn].type - builder = builder.xType(labelFieldType) + if (horizontal) { + builder = builder.yType(labelFieldType).xUnits(yAxisUnits) + } else { + builder = builder.xType(labelFieldType).yUnits(yAxisUnits) + } useDates = labelFieldType === "datetime" } const series = valueColumns.map(column => ({ @@ -68,7 +73,14 @@ })) builder = builder.series(series) if (!useDates) { - builder = builder.categories(data.map(row => row[labelColumn])) + 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() + } } // Build chart options diff --git a/packages/client/src/components/app/charts/LineChart.svelte b/packages/client/src/components/app/charts/LineChart.svelte index 62fc97cf58..2c05292670 100644 --- a/packages/client/src/components/app/charts/LineChart.svelte +++ b/packages/client/src/components/app/charts/LineChart.svelte @@ -77,7 +77,9 @@ })) builder = builder.series(series) if (!useDates) { - builder = builder.categories(data.map(row => row[labelColumn])) + builder = builder.xCategories(data.map(row => row[labelColumn])) + } else { + builder = builder.clearXFormatter() } // Build chart options