From 8d77bb016f5602036231d1f69e893a896f22c066 Mon Sep 17 00:00:00 2001 From: Gerard Burns Date: Thu, 18 Apr 2024 06:51:54 +0100 Subject: [PATCH] refactor of bar done i think --- packages/bbui/src/Tooltip/Context.svelte | 2 +- packages/client/manifest.json | 166 +++++++-------- .../components/app/charts/ApexChart.svelte | 3 - .../src/components/app/charts/BarChart.svelte | 192 ++++++++---------- 4 files changed, 166 insertions(+), 197 deletions(-) diff --git a/packages/bbui/src/Tooltip/Context.svelte b/packages/bbui/src/Tooltip/Context.svelte index f25abc6d6b..e0abd882c8 100644 --- a/packages/bbui/src/Tooltip/Context.svelte +++ b/packages/bbui/src/Tooltip/Context.svelte @@ -159,7 +159,7 @@ box-sizing: border-box; border: 1px solid var(--grey-4); opacity: 0; - pointer-events: none; + overflow: hidden; transition: width 300ms ease-in, height 300ms ease-in, top 300ms ease-in, left 300ms ease-in; } diff --git a/packages/client/manifest.json b/packages/client/manifest.json index 9afcbc5c6c..84abe7be6d 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -1684,19 +1684,19 @@ "type": "select", "label": "Colors", "key": "palette", - "defaultValue": "Palette 1", + "defaultValue": "palette1", "options": [ - "Custom", - "Palette 1", - "Palette 2", - "Palette 3", - "Palette 4", - "Palette 5", - "Palette 6", - "Palette 7", - "Palette 8", - "Palette 9", - "Palette 10" + { "label": "Custom", "value": "Custom" }, + { "label": "Palette 1", "value": "palette1" }, + { "label": "Palette 2", "value": "palette2" }, + { "label": "Palette 3", "value": "palette3" }, + { "label": "Palette 4", "value": "palette4" }, + { "label": "Palette 5", "value": "palette5" }, + { "label": "Palette 6", "value": "palette6" }, + { "label": "Palette 7", "value": "palette7" }, + { "label": "Palette 8", "value": "palette8" }, + { "label": "Palette 9", "value": "palette9" }, + { "label": "Palette 10", "value": "palette10" } ] }, { @@ -1844,17 +1844,17 @@ "key": "palette", "defaultValue": "Palette 1", "options": [ - "Custom", - "Palette 1", - "Palette 2", - "Palette 3", - "Palette 4", - "Palette 5", - "Palette 6", - "Palette 7", - "Palette 8", - "Palette 9", - "Palette 10" + { "label": "Custom", "value": "Custom" }, + { "label": "Palette 1", "value": "palette1" }, + { "label": "Palette 2", "value": "palette2" }, + { "label": "Palette 3", "value": "palette3" }, + { "label": "Palette 4", "value": "palette4" }, + { "label": "Palette 5", "value": "palette5" }, + { "label": "Palette 6", "value": "palette6" }, + { "label": "Palette 7", "value": "palette7" }, + { "label": "Palette 8", "value": "palette8" }, + { "label": "Palette 9", "value": "palette9" }, + { "label": "Palette 10", "value": "palette10" } ] }, { @@ -1995,19 +1995,19 @@ "type": "select", "label": "Colors", "key": "palette", - "defaultValue": "Palette 1", + "defaultValue": "palette1", "options": [ - "Custom", - "Palette 1", - "Palette 2", - "Palette 3", - "Palette 4", - "Palette 5", - "Palette 6", - "Palette 7", - "Palette 8", - "Palette 9", - "Palette 10" + { "label": "Custom", "value": "Custom" }, + { "label": "Palette 1", "value": "palette1" }, + { "label": "Palette 2", "value": "palette2" }, + { "label": "Palette 3", "value": "palette3" }, + { "label": "Palette 4", "value": "palette4" }, + { "label": "Palette 5", "value": "palette5" }, + { "label": "Palette 6", "value": "palette6" }, + { "label": "Palette 7", "value": "palette7" }, + { "label": "Palette 8", "value": "palette8" }, + { "label": "Palette 9", "value": "palette9" }, + { "label": "Palette 10", "value": "palette10" } ] }, { @@ -2143,19 +2143,19 @@ "type": "select", "label": "Colors", "key": "palette", - "defaultValue": "Palette 1", + "defaultValue": "palette1", "options": [ - "Custom", - "Palette 1", - "Palette 2", - "Palette 3", - "Palette 4", - "Palette 5", - "Palette 6", - "Palette 7", - "Palette 8", - "Palette 9", - "Palette 10" + { "label": "Custom", "value": "Custom" }, + { "label": "Palette 1", "value": "palette1" }, + { "label": "Palette 2", "value": "palette2" }, + { "label": "Palette 3", "value": "palette3" }, + { "label": "Palette 4", "value": "palette4" }, + { "label": "Palette 5", "value": "palette5" }, + { "label": "Palette 6", "value": "palette6" }, + { "label": "Palette 7", "value": "palette7" }, + { "label": "Palette 8", "value": "palette8" }, + { "label": "Palette 9", "value": "palette9" }, + { "label": "Palette 10", "value": "palette10" } ] }, { @@ -2272,19 +2272,19 @@ "type": "select", "label": "Colors", "key": "palette", - "defaultValue": "Palette 1", + "defaultValue": "palette1", "options": [ - "Custom", - "Palette 1", - "Palette 2", - "Palette 3", - "Palette 4", - "Palette 5", - "Palette 6", - "Palette 7", - "Palette 8", - "Palette 9", - "Palette 10" + { "label": "Custom", "value": "Custom" }, + { "label": "Palette 1", "value": "palette1" }, + { "label": "Palette 2", "value": "palette2" }, + { "label": "Palette 3", "value": "palette3" }, + { "label": "Palette 4", "value": "palette4" }, + { "label": "Palette 5", "value": "palette5" }, + { "label": "Palette 6", "value": "palette6" }, + { "label": "Palette 7", "value": "palette7" }, + { "label": "Palette 8", "value": "palette8" }, + { "label": "Palette 9", "value": "palette9" }, + { "label": "Palette 10", "value": "palette10" } ] }, { @@ -2510,19 +2510,19 @@ "type": "select", "label": "Colors", "key": "palette", - "defaultValue": "Palette 1", + "defaultValue": "palette1", "options": [ - "Custom", - "Palette 1", - "Palette 2", - "Palette 3", - "Palette 4", - "Palette 5", - "Palette 6", - "Palette 7", - "Palette 8", - "Palette 9", - "Palette 10" + { "label": "Custom", "value": "Custom" }, + { "label": "Palette 1", "value": "palette1" }, + { "label": "Palette 2", "value": "palette2" }, + { "label": "Palette 3", "value": "palette3" }, + { "label": "Palette 4", "value": "palette4" }, + { "label": "Palette 5", "value": "palette5" }, + { "label": "Palette 6", "value": "palette6" }, + { "label": "Palette 7", "value": "palette7" }, + { "label": "Palette 8", "value": "palette8" }, + { "label": "Palette 9", "value": "palette9" }, + { "label": "Palette 10", "value": "palette10" } ] }, { @@ -5187,19 +5187,19 @@ "type": "select", "label": "Colors", "key": "palette", - "defaultValue": "Palette 1", + "defaultValue": "palette1", "options": [ - "Custom", - "Palette 1", - "Palette 2", - "Palette 3", - "Palette 4", - "Palette 5", - "Palette 6", - "Palette 7", - "Palette 8", - "Palette 9", - "Palette 10" + { "label": "Custom", "value": "Custom" }, + { "label": "Palette 1", "value": "palette1" }, + { "label": "Palette 2", "value": "palette2" }, + { "label": "Palette 3", "value": "palette3" }, + { "label": "Palette 4", "value": "palette4" }, + { "label": "Palette 5", "value": "palette5" }, + { "label": "Palette 6", "value": "palette6" }, + { "label": "Palette 7", "value": "palette7" }, + { "label": "Palette 8", "value": "palette8" }, + { "label": "Palette 9", "value": "palette9" }, + { "label": "Palette 10", "value": "palette10" } ] }, { diff --git a/packages/client/src/components/app/charts/ApexChart.svelte b/packages/client/src/components/app/charts/ApexChart.svelte index 0583652ad9..411774c353 100644 --- a/packages/client/src/components/app/charts/ApexChart.svelte +++ b/packages/client/src/components/app/charts/ApexChart.svelte @@ -8,9 +8,6 @@ const component = getContext("component") export let options - $: { - console.log(options); - } /* export let invalid = false diff --git a/packages/client/src/components/app/charts/BarChart.svelte b/packages/client/src/components/app/charts/BarChart.svelte index b9586b280e..e18ac77cf7 100644 --- a/packages/client/src/components/app/charts/BarChart.svelte +++ b/packages/client/src/components/app/charts/BarChart.svelte @@ -3,10 +3,11 @@ import ApexChart from "./ApexChart.svelte" import { get } from "lodash"; - export let title export let dataProvider export let labelColumn export let valueColumns + + export let title export let xAxisLabel export let yAxisLabel export let height @@ -20,126 +21,97 @@ export let c1, c2, c3, c4, c5 export let horizontal - $: options = setUpChart( - title, - dataProvider, - labelColumn, - valueColumns, - xAxisLabel, - yAxisLabel, - height, - width, - dataLabels, - animate, - legend, - stacked, - yAxisUnits, - palette, - horizontal, - c1 && c2 && c3 && c4 && c5 ? [c1, c2, c3, c4, c5] : null, - customColor - ) + const formatters = { + ["Default"]: val => val, + ["Thousands"]: val => `${Math.round(val / 1000)}K`, + ["Millions"]: val => `${Math.round(val / 1000000)}M`, + } - $: customColor = palette === "Custom" + $: series = getSeries(dataProvider, valueColumns) + $: categories = getCategories(dataProvider, labelColumn); - const setUpChart = ( - title, - dataProvider, - labelColumn, - valueColumns, - xAxisLabel, - yAxisLabel, - height, - width, - dataLabels, - animate, - legend, - stacked, - yAxisUnits, - palette, - horizontal, - colors, - customColor - ) => { - const allCols = [labelColumn, ...(valueColumns || [null])] - if ( - !dataProvider || - !dataProvider.rows?.length || - allCols.find(x => x == null) - ) { - return null - } + $: dataType = dataProvider?.schema?.[labelColumn]?.type === 'datetime' ? + "datetime" : "category" - // Fetch data - const { schema, rows } = dataProvider - - const data = rows.slice(0, 100) - if (!schema || !data.length) { - return null - } - - // Initialise default chart - let builder = new ApexOptionsBuilder() - .type("bar") - .title(title) - .width(width) - .height(height) - .xLabel(xAxisLabel) - .yLabel(yAxisLabel) - .dataLabels(dataLabels) - .animate(animate) - .legend(legend) - .stacked(stacked) - .palette(palette) - .horizontal(horizontal) - .colors(customColor ? colors : null) - - // Add data - if (schema[labelColumn]) { - const labelFieldType = schema[labelColumn].type - if (horizontal) { - builder = builder.xUnits(yAxisUnits) - } else { - builder = builder.yUnits(yAxisUnits) + $: options = { + series, + colors: palette === "Custom" ? [c1, c2, c3, c4, c5] : [], + theme: { + palette: palette === "Custom" ? null : palette + }, + legend: { + show: legend, + position: "top", + horizontalAlign: "right", + showForSingleSeries: true, + showForNullSeries: true, + showForZeroSeries: true, + }, + title: { + text: title, + }, + dataLabels: { + enabled: dataLabels + }, + chart: { + height: height == null || height === "" ? "auto" : height, + width: width == null || width === "" ? "100%" : width, + type: "bar", + stacked, + animations: { + enabled: animate + }, + toolbar: { + show: false, + }, + zoom: { + enabled: false, + }, + }, + xaxis: { + type: dataType, + categories, + title: { + text: xAxisLabel + } + }, + yaxis: { + title: { + text: yAxisLabel + }, + labels: { + formatter: formatters[yAxisUnits] } } - const series = (valueColumns ?? []).map(column => ({ + } + + const getSeries = (datasource, valueColumns = []) => { + const rows = datasource.rows ?? []; + + return valueColumns.map(column => ({ name: column, - data: data.map(row => { - 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; + data: rows.map(row => { + return row?.[column] }), })) - builder = builder.series(series) - 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 + } + + const getCategories = (datasource, labelColumn) => { + const rows = datasource.rows ?? []; + + return rows.map(row => { + const value = row?.[labelColumn] + + // If a nullish or non-scalar type, replace it with an empty string + if (!["string", "number", "boolean"].includes(typeof value)) { + return "" } - return value ?? "" - })) - - // Build chart options - return builder.getOptions() + return value; + }) } + + $: console.log("opt", options);