From 627f3d13b98f772cf794900006e9897e2aa90c4e Mon Sep 17 00:00:00 2001 From: cmack Date: Mon, 10 Aug 2020 10:32:46 +0100 Subject: [PATCH 01/58] Minor Updates --- packages/standard-components/src/Chart/Bar.svelte | 2 +- packages/standard-components/src/Chart/Legend.svelte | 6 +++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/standard-components/src/Chart/Bar.svelte b/packages/standard-components/src/Chart/Bar.svelte index c039d40604..42a1b22828 100644 --- a/packages/standard-components/src/Chart/Bar.svelte +++ b/packages/standard-components/src/Chart/Bar.svelte @@ -10,7 +10,7 @@ - x and y axis label set and appear in the dom but do not display next to the axis - x and y axis label offset - does effect position of labels but does not render text (see above) - x tick label overlaps bar, seems to be no apu method to change this? Could do it by querying for it in the dom - specifically and doing this: 4.0 + for this element: 4.0 */ let tooltip diff --git a/packages/standard-components/src/Chart/Legend.svelte b/packages/standard-components/src/Chart/Legend.svelte index f42e714507..a5745f25d1 100644 --- a/packages/standard-components/src/Chart/Legend.svelte +++ b/packages/standard-components/src/Chart/Legend.svelte @@ -70,6 +70,7 @@ if (notNull(unit)) { legend.unit(unit) } + legendContainer.datum(data).call(legend) } } @@ -78,5 +79,8 @@ {#if useLegend} -
+
{/if} From fea28e88198d90e081a0586c5b3f59a59573585c Mon Sep 17 00:00:00 2001 From: cmack Date: Mon, 10 Aug 2020 15:33:32 +0100 Subject: [PATCH 02/58] Completed Groupedbar and work on Tooltip --- .../userInterface/temporaryPanelStructure.js | 19 ++-- packages/builder/src/index.html | 6 ++ packages/standard-components/components.json | 4 +- .../src/Chart/Donut.svelte | 61 ++++++++++--- .../src/Chart/GroupedBar.svelte | 34 ++++---- .../src/Chart/Tooltip.svelte | 86 +++++++++++++++++++ .../standard-components/src/Chart/utils.js | 20 +++++ 7 files changed, 186 insertions(+), 44 deletions(-) create mode 100644 packages/standard-components/src/Chart/Tooltip.svelte diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js index 8eaf5fec67..b76c24725b 100644 --- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js +++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js @@ -1290,15 +1290,6 @@ export default { _component: "@budibase/standard-components/groupedbar", description: "Groupedbar chart", icon: "ri-bar-chart-fill", - presetProps: { - data: [ - { - name: "2011-01", - group: "Direct", - value: 0, - }, - ], - }, properties: { settings: [ { @@ -1338,11 +1329,6 @@ export default { key: "aspectRatio", control: Input, }, - { - label: "Height", - key: "height", - control: Input, - }, { label: "Grid", key: "grid", @@ -1359,6 +1345,11 @@ export default { key: "nameLabel", control: Input, }, + { + label: "Value Label", + key: "valueLabel", + control: Input, + }, { label: "Y Ticks", key: "yTicks", diff --git a/packages/builder/src/index.html b/packages/builder/src/index.html index afc3bcb4c2..6d21fc26d1 100644 --- a/packages/builder/src/index.html +++ b/packages/builder/src/index.html @@ -8,6 +8,8 @@ Budibase Builder + + @@ -22,6 +24,10 @@ + + + + \ No newline at end of file diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json index c7a668cc62..8d9a268698 100644 --- a/packages/standard-components/components.json +++ b/packages/standard-components/components.json @@ -508,8 +508,7 @@ "color": "string", "height": "string", "width": "string", - "margin": "string", - "aspectRatio": "number", + "margin":"string", "grid":"string", "groupLabel": "string", "isAnimated": "bool", @@ -517,7 +516,6 @@ "nameLabel": "string", "valueLabel":"string", "yTicks": "string", - "yTickTextOffset": "string", "useLegend": "bool" } }, diff --git a/packages/standard-components/src/Chart/Donut.svelte b/packages/standard-components/src/Chart/Donut.svelte index 470673e9b6..08cdba7d2e 100644 --- a/packages/standard-components/src/Chart/Donut.svelte +++ b/packages/standard-components/src/Chart/Donut.svelte @@ -30,7 +30,7 @@ export let orderingFunction = null - export let data = model ? $store[model] : [] + let data = [] export let color = "britecharts" export let height = 200 export let width = 200 @@ -47,7 +47,9 @@ export let internalRadius = 25 export let isAnimated = true export let radiusHoverOffset = 0 - export let useLegend = true + export let nameKey = null + export let valueKey = null + // export let useLegend = true export let horizontalLegend = false export let legendWidth = null export let legendHeight = null @@ -70,19 +72,60 @@ if (chart) { if (model) { await fetchData() + data = checkAndReformatData($store[model]) + if (data.length === 0) { + console.error( + "Donut - please provide a valid name and value field for the chart" + ) + } } chart.emptyDataConfig({ showEmptySlice: true, - emptySliceColor: "#000000", + emptySliceColor: "#F0F0F0", }) + chartContainer = select(`.${chartClass}`) bindChartUIProps() bindChartEvents() - chartContainer.datum(_data).call(chart) + chartContainer.datum(data).call(chart) } }) + function checkAndReformatData(data) { + let _data = [...data] + + if (valueKey) { + _data = reformatDataKey(_data, valueKey, "quantity") + } + + if (nameKey) { + _data = reformatDataKey(_data, nameKey, "name") + } + + return _data.every(d => d.quantity) && _data.every(d => d.name) ? _data : [] + } + + function reformatDataKey(data = [], dataKey = null, formatKey = null) { + let ignoreList = ["_id", "_rev", "id"] + if (dataKey && data.every(d => d[dataKey])) { + return data.map(d => { + let clonedRecord = { ...d } + if (clonedRecord[formatKey]) { + delete clonedRecord[formatKey] + } + let value = clonedRecord[dataKey] + if (!ignoreList.includes(dataKey)) { + delete clonedRecord[dataKey] + } + clonedRecord[formatKey] = value + return clonedRecord + }) + } else { + return data + } + } + function bindChartUIProps() { chart.percentageFormat(".0f") @@ -134,7 +177,7 @@ if (notNull(orderingFunction)) { chart.orderingFunction(orderingFunction) } - chartContainer.datum(_data).call(chart) + chartContainer.datum(data).call(chart) chartSvg = document.querySelector(`.${chartClass} .britechart`) } @@ -159,17 +202,15 @@ $: if (!width && chartSvg) { width = chartSvg.clientWidth chart.width(width) - chartContainer.datum(_data).call(chart) + chartContainer.datum(data).call(chart) } - $: _data = model ? $store[model] : data - $: colorSchema = getColorSchema(color)
- {#if useLegend} + {#if data.length > 0} + {data} /> {/if}
diff --git a/packages/standard-components/src/Chart/GroupedBar.svelte b/packages/standard-components/src/Chart/GroupedBar.svelte index 70b111ed8c..0c981f00c2 100644 --- a/packages/standard-components/src/Chart/GroupedBar.svelte +++ b/packages/standard-components/src/Chart/GroupedBar.svelte @@ -1,16 +1,15 @@
-{#if useLegend} -
+{#if chartDrawn} + {/if} diff --git a/packages/standard-components/src/Chart/Tooltip.svelte b/packages/standard-components/src/Chart/Tooltip.svelte new file mode 100644 index 0000000000..46741f6ac8 --- /dev/null +++ b/packages/standard-components/src/Chart/Tooltip.svelte @@ -0,0 +1,86 @@ + diff --git a/packages/standard-components/src/Chart/utils.js b/packages/standard-components/src/Chart/utils.js index 382c95ff36..336c140ed1 100644 --- a/packages/standard-components/src/Chart/utils.js +++ b/packages/standard-components/src/Chart/utils.js @@ -17,3 +17,23 @@ export const getColorSchema = color => export const getChartGradient = gradient => gradient ? colorGradients[gradient] : null + +export function reformatDataKey(data = [], dataKey = null, formatKey = null) { + let ignoreList = ["_id", "_rev", "id"] + if (dataKey && data.every(d => d[dataKey])) { + return data.map(d => { + let clonedRecord = { ...d } + if (clonedRecord[formatKey]) { + delete clonedRecord[formatKey] + } + let value = clonedRecord[dataKey] + if (!ignoreList.includes(dataKey)) { + delete clonedRecord[dataKey] + } + clonedRecord[formatKey] = value + return clonedRecord + }) + } else { + return data + } +} From 932ef5f165a7d94b6afe5e96e450c0c5340c5510 Mon Sep 17 00:00:00 2001 From: cmack Date: Mon, 10 Aug 2020 16:06:52 +0100 Subject: [PATCH 03/58] Completed Tooltip --- packages/builder/src/index.html | 5 ----- packages/standard-components/src/Chart/GroupedBar.svelte | 8 +++++++- packages/standard-components/src/Chart/Tooltip.svelte | 6 +++--- 3 files changed, 10 insertions(+), 9 deletions(-) diff --git a/packages/builder/src/index.html b/packages/builder/src/index.html index 6d21fc26d1..2e7cbf416d 100644 --- a/packages/builder/src/index.html +++ b/packages/builder/src/index.html @@ -9,8 +9,6 @@ - - @@ -25,9 +23,6 @@ - - - \ No newline at end of file diff --git a/packages/standard-components/src/Chart/GroupedBar.svelte b/packages/standard-components/src/Chart/GroupedBar.svelte index 0c981f00c2..05582de94d 100644 --- a/packages/standard-components/src/Chart/GroupedBar.svelte +++ b/packages/standard-components/src/Chart/GroupedBar.svelte @@ -159,5 +159,11 @@
{#if chartDrawn} - + {/if} diff --git a/packages/standard-components/src/Chart/Tooltip.svelte b/packages/standard-components/src/Chart/Tooltip.svelte index 46741f6ac8..c510562c80 100644 --- a/packages/standard-components/src/Chart/Tooltip.svelte +++ b/packages/standard-components/src/Chart/Tooltip.svelte @@ -19,10 +19,10 @@ export let locale = null export let nameLabel = null export let numberFormat = null - export let shouldShowDateInTitle = null - export let title = "My tooltip" + export let shouldShowDateInTitle = false + export let title = "My Tooltip" export let tooltipOffset = null - export let topicLabel = "Topics" + export let topicLabel = "values" export let topicsOrder = null export let valueLabel = null export let xAxisValueType = null From 3a66c4055a9d7b1429eb714f0c21851a728aad58 Mon Sep 17 00:00:00 2001 From: Joe <49767913+joebudi@users.noreply.github.com> Date: Tue, 11 Aug 2020 16:57:15 +0100 Subject: [PATCH 04/58] Tidy ups and welcome screen made less busy Comment today from the demo was the welcome screen was a little busy in re to the links on the left hand panel --- .../src/components/start/AppCard.svelte | 37 +++++++------------ .../src/components/start/AppList.svelte | 2 +- .../components/start/CreateAppModal.svelte | 7 ++-- .../src/components/start/Steps/Info.svelte | 2 +- .../src/components/start/Steps/User.svelte | 2 +- .../userInterface/temporaryPanelStructure.js | 31 +--------------- .../workflow/SetupPanel/SetupPanel.svelte | 2 +- packages/builder/src/pages/_layout.svelte | 35 ++---------------- packages/builder/src/pages/index.svelte | 10 +++-- packages/builder/yarn.lock | 12 +++--- 10 files changed, 38 insertions(+), 102 deletions(-) diff --git a/packages/builder/src/components/start/AppCard.svelte b/packages/builder/src/components/start/AppCard.svelte index 39ee948b98..701504ce0b 100644 --- a/packages/builder/src/components/start/AppCard.svelte +++ b/packages/builder/src/components/start/AppCard.svelte @@ -13,35 +13,26 @@ diff --git a/packages/builder/src/pages/index.svelte b/packages/builder/src/pages/index.svelte index 5058d9e74b..13c8b840a6 100644 --- a/packages/builder/src/pages/index.svelte +++ b/packages/builder/src/pages/index.svelte @@ -66,7 +66,9 @@
Welcome to the Budibase Beta
- +