MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Donut chart for demo

This commit is contained in:
cmack 2020-08-07 12:57:07 +01:00
parent 9983feb1f0
commit bba3c90cf5
3 changed files with 94 additions and 1367 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1424
packages/builder/src/components/userInterface/temporaryPanelStructure.js
View File

File diff suppressed because it is too large Load Diff

1
packages/standard-components/components.json
View File

@ -293,7 +293,6 @@
"radiusHoverOffset": "number", "radiusHoverOffset": "number",
"percentageFormat": "string", "percentageFormat": "string",
"useLegend": "bool", "useLegend": "bool",
"horizontalLegend": "bool",
"legendWidth": "number", "legendWidth": "number",
"legendHeight": "number" "legendHeight": "number"
} }

36
packages/standard-components/src/Chart/Donut.svelte
View File

@ -30,7 +30,7 @@
export let orderingFunction = null export let orderingFunction = null
export let data = model ? $store[model] : [] let data = []
export let color = "britecharts" export let color = "britecharts"
export let height = 200 export let height = 200
export let width = 200 export let width = 200
@ -47,7 +47,7 @@
export let internalRadius = 25 export let internalRadius = 25
export let isAnimated = true export let isAnimated = true
export let radiusHoverOffset = 0 export let radiusHoverOffset = 0
export let useLegend = true // export let useLegend = true
export let horizontalLegend = false export let horizontalLegend = false
export let legendWidth = null export let legendWidth = null
export let legendHeight = null export let legendHeight = null
@ -70,16 +70,17 @@
if (chart) { if (chart) {
if (model) { if (model) {
await fetchData() await fetchData()
data = model ? $store[model] : []
} }
chart.emptyDataConfig({ chart.emptyDataConfig({
showEmptySlice: true, showEmptySlice: true,
emptySliceColor: "#000000", emptySliceColor: "#F0F0F0",
}) })
chartContainer = select(`.${chartClass}`) chartContainer = select(`.${chartClass}`)
bindChartUIProps() bindChartUIProps()
bindChartEvents() bindChartEvents()
chartContainer.datum(_data).call(chart) chartContainer.datum(data).call(chart)
} }
}) })
@ -134,7 +135,7 @@
if (notNull(orderingFunction)) { if (notNull(orderingFunction)) {
chart.orderingFunction(orderingFunction) chart.orderingFunction(orderingFunction)
} }
chartContainer.datum(_data).call(chart) chartContainer.datum(data).call(chart)
chartSvg = document.querySelector(`.${chartClass} .britechart`) chartSvg = document.querySelector(`.${chartClass} .britechart`)
} }
@ -159,25 +160,24 @@
$: if (!width && chartSvg) { $: if (!width && chartSvg) {
width = chartSvg.clientWidth width = chartSvg.clientWidth
chart.width(width) chart.width(width)
chartContainer.datum(_data).call(chart) debugger
chartContainer.datum(data).call(chart)
} }
$: _data = model ? $store[model] : data // $: _data = model ? $store[model] : data
$: colorSchema = getColorSchema(color) $: colorSchema = getColorSchema(color)
</script> </script>
<div> <div>
<div bind:this={chartElement} class={chartClass} /> <div bind:this={chartElement} class={chartClass} />
{#if useLegend} <Legend
<Legend bind:legend={legendChart}
bind:legend={legendChart} {colorSchema}
{colorSchema} useLegend
useLegend isHorizontal={horizontalLegend}
isHorizontal={horizontalLegend} width={legendWidth || width}
width={legendWidth || width} height={legendHeight}
height={legendHeight} {chartClass}
{chartClass} {data} />
data={_data} />
{/if}
</div> </div>