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 + } +}