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

Add pie and donut charts

This commit is contained in:
Andrew Kingston 2020-11-03 11:50:55 +00:00
parent 2e35ec6c96
commit 665546f095
6 changed files with 269 additions and 409 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -423,105 +423,11 @@ export default {
icon: "ri-bar-chart-2-line", icon: "ri-bar-chart-2-line",
isCategory: true, isCategory: true,
children: [ children: [
// {
// name: "Donut",
// _component: "@budibase/standard-components/donut",
// description: "Donut chart",
// icon: "ri-pie-chart-fill",
// properties: {
// settings: [
// {
// label: "Data",
// key: "datasource",
// control: TableViewSelect,
// },
// {
// label: "Name Field",
// key: "nameKey",
// dependsOn: "datasource",
// control: TableViewFieldSelect,
// },
// {
// label: "Value Field",
// key: "valueKey",
// dependsOn: "datasource",
// control: TableViewFieldSelect,
// },
// {
// label: "Animate Chart",
// key: "isAnimated",
// valueKey: "checked",
// control: Checkbox,
// },
// {
// label: "Hover Highlight",
// key: "hasHoverAnimation",
// valueKey: "checked",
// control: Checkbox,
// },
// {
// label: "Keep Last Hover",
// key: "hasLastHoverSliceHighlighted",
// valueKey: "checked",
// control: Checkbox,
// },
// {
// label: "Colors",
// key: "color",
// control: OptionSelect,
// options: [
// "britecharts",
// "blueGreen",
// "green",
// "grey",
// "orange",
// "pink",
// "purple",
// "red",
// "teal",
// "yellow",
// ],
// },
// {
// label: "External Radius",
// key: "externalRadius",
// control: Input,
// },
// {
// label: "Internal Radius",
// key: "internalRadius",
// control: Input,
// },
// {
// label: "Radius Offset",
// key: "radiusHoverOffset ",
// control: Input,
// },
// {
// label: "Show Legend",
// key: "useLegend ",
// valueKey: "checked",
// control: Checkbox,
// },
// {
// label: "Horizontal Legend",
// key: "horizontalLegend",
// valueKey: "checked",
// control: Checkbox,
// },
// {
// label: "Legend Width",
// key: "legendWidth",
// control: Input,
// },
// ],
// },
// },
{ {
name: "Bar", name: "Bar Chart",
_component: "@budibase/standard-components/bar", _component: "@budibase/standard-components/bar",
description: "Bar chart", description: "Bar chart",
icon: "ri-bar-chart-fill", icon: "ri-bar-chart-line",
properties: { properties: {
settings: [ settings: [
{ {
@ -610,111 +516,8 @@ export default {
], ],
}, },
}, },
// {
// name: "Grouped Bar",
// _component: "@budibase/standard-components/groupedbar",
// description: "Groupedbar chart",
// icon: "ri-bar-chart-grouped-fill",
// properties: {
// settings: [
// {
// label: "Data",
// key: "datasource",
// control: TableViewSelect,
// },
// {
// label: "Name Label",
// key: "nameLabel",
// dependsOn: "datasource",
// control: TableViewFieldSelect,
// },
// {
// label: "Group Label",
// key: "groupLabel",
// dependsOn: "datasource",
// control: TableViewFieldSelect,
// },
// {
// label: "Value Label",
// key: "valueLabel",
// dependsOn: "datasource",
// control: TableViewFieldSelect,
// },
// {
// label: "Color",
// key: "color",
// control: OptionSelect,
// options: [
// "britecharts",
// "blueGreen",
// "green",
// "grey",
// "orange",
// "pink",
// "purple",
// "red",
// "teal",
// "yellow",
// ],
// },
// {
// label: "Height",
// key: "height",
// control: Input,
// },
// {
// label: "Width",
// key: "width",
// control: Input,
// },
// {
// label: "Aspect Ratio",
// key: "aspectRatio",
// control: Input,
// },
// {
// label: "Grid",
// key: "grid",
// control: OptionSelect,
// options: ["vertical", "horizontal", "full"],
// },
// {
// label: "Value Label",
// key: "valueLabel",
// control: Input,
// },
// {
// label: "Y Ticks",
// key: "yTicks",
// control: Input,
// },
// {
// label: "Y Tick Text Offset",
// key: "yTickTextOffset",
// control: Input,
// },
// {
// label: "Is Animated",
// key: "isAnimated",
// valueKey: "checked",
// control: Checkbox,
// },
// {
// label: "Is Horizontal",
// key: "isHorizontal",
// valueKey: "checked",
// control: Checkbox,
// },
// {
// label: "Tooltip Title",
// key: "tooltipTitle",
// control: Input,
// },
// ],
// },
// },
{ {
name: "Line", name: "Line Chart",
_component: "@budibase/standard-components/line", _component: "@budibase/standard-components/line",
description: "Line chart", description: "Line chart",
icon: "ri-line-chart-line", icon: "ri-line-chart-line",
@ -807,6 +610,146 @@ export default {
], ],
}, },
}, },
{
name: "Pie Chart",
_component: "@budibase/standard-components/pie",
description: "Pie chart",
icon: "ri-pie-chart-line",
properties: {
settings: [
{
label: "Title",
key: "title",
control: Input,
},
{
label: "Data",
key: "datasource",
control: TableViewSelect,
},
{
label: "Label Col.",
key: "labelColumn",
dependsOn: "datasource",
control: TableViewFieldSelect,
},
{
label: "Data Col.",
key: "valueColumn",
dependsOn: "datasource",
control: TableViewFieldSelect,
},
// {
// label: "Color",
// key: "color",
// control: Colorpicker,
// defaultValue: "#4285f4",
// },
{
label: "Width",
key: "width",
control: Input,
},
{
label: "Height",
key: "height",
control: Input,
defaultValue: "200",
},
{
label: "Data Labels",
key: "dataLabels",
control: Checkbox,
valueKey: "checked",
defaultValue: false,
},
{
label: "Animate",
key: "animate",
control: Checkbox,
valueKey: "checked",
defaultValue: true,
},
{
label: "Legend",
key: "legend",
control: Checkbox,
valueKey: "checked",
defaultValue: true,
},
],
},
},
{
name: "Donut Chart",
_component: "@budibase/standard-components/donut",
description: "Donut chart",
icon: "ri-donut-chart-line",
properties: {
settings: [
{
label: "Title",
key: "title",
control: Input,
},
{
label: "Data",
key: "datasource",
control: TableViewSelect,
},
{
label: "Label Col.",
key: "labelColumn",
dependsOn: "datasource",
control: TableViewFieldSelect,
},
{
label: "Data Col.",
key: "valueColumn",
dependsOn: "datasource",
control: TableViewFieldSelect,
},
// {
// label: "Color",
// key: "color",
// control: Colorpicker,
// defaultValue: "#4285f4",
// },
{
label: "Width",
key: "width",
control: Input,
},
{
label: "Height",
key: "height",
control: Input,
defaultValue: "200",
},
{
label: "Data Labels",
key: "dataLabels",
control: Checkbox,
valueKey: "checked",
defaultValue: false,
},
{
label: "Animate",
key: "animate",
control: Checkbox,
valueKey: "checked",
defaultValue: true,
},
{
label: "Legend",
key: "legend",
control: Checkbox,
valueKey: "checked",
defaultValue: true,
},
],
},
},
], ],
}, },
{ {

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

@ -396,155 +396,6 @@
} }
} }
}, },
"datamap": {
"description": "shiny chart",
"data": true,
"props": {
"table": "tables"
}
},
"donut": {
"description": "Donut Chart",
"data": true,
"props": {
"datasource": "string",
"data": "string",
"color": "string",
"height": "number",
"width": "number",
"hasFixedHighlightedSlice": "bool",
"hasLastHoverSliceHighlighted": "bool",
"hasHoverAnimation": "bool",
"numberFormat": "string",
"nameKey": "string",
"valueKey": "string",
"isAnimated": "bool",
"externalRadius": "number",
"internalRadius": "number",
"radiusHoverOffset": "number",
"percentageFormat": "string",
"useLegend": "bool",
"legendWidth": "number",
"legendHeight": "number"
}
},
"sparkline": {
"description": "Sparkline Chart",
"data": true,
"props": {
"table": "string",
"areaGradient": "string",
"height": "number",
"width": "number",
"dateLabel": "string",
"duration": "string",
"isAnimated": "bool",
"lineGradient": "string",
"titleText": "string",
"valueLabel": "string"
}
},
"stackedbar": {
"description": "Stacked Bar Chart",
"data": true,
"props": {
"datasource": "tables",
"color": "string",
"height": "number",
"width": "number",
"margin": "string",
"aspectRatio": "string",
"betweenBarsPadding": "number",
"grid": "string",
"hasPercentage": "bool",
"hasReversedStacks": "bool",
"isAnimated": "bool",
"isHorizontal": "bool",
"locale": "string",
"nameLabel": "string",
"percentageAxisToMaxRatio": "number",
"stackLabel": "string",
"valueLabel": "string",
"valueLabelFormat": "string",
"xTicks": "number",
"yTicks": "number",
"yAxisLabel": "string",
"yAxisLabelOffset": "number",
"useLegend": "bool"
}
},
"stackarea": {
"description": "Step Chart",
"data": true,
"props": {
"table": "string",
"color": "string",
"height": "number",
"width": "number",
"margin": "string",
"xAxisLabel": "string",
"xAxisLabelOffset": "string",
"yAxisLabel": "string",
"yAxisLabelOffset": "string",
"areaCurve": "number",
"areaOpacity": "number",
"aspectRatio": "number",
"dateLabel": "string",
"grid": "string",
"isAnimated": "bool",
"keyLabel": "string",
"locale": "string",
"tooltipThreshold": "number",
"topicsOrder": "string",
"valueLabel": "string",
"xAxisCustomFormat": "string",
"xAxisFormat": "string",
"xAxisScale": "string",
"xAxisValueType": "string",
"yTicks": "number",
"xTicks": "number",
"yAxisBaseline": "string",
"useLegend": "bool"
}
},
"step": {
"description": "Step Chart",
"data": true,
"props": {
"table": "string",
"height": "number",
"width": "number",
"margin": "string",
"xAxisLabel": "string",
"xAxisLabelOffset": "string",
"yAxisLabel": "string",
"yAxisLabelOffset": "string",
"yTicks": "string"
}
},
"scatterplot": {
"description": "Scatterplot Chart",
"data": true,
"props": {
"table": "string",
"color": "string",
"height": "number",
"width": "number",
"aspectRatio": "string",
"circleOpacity": "string",
"grid": "string",
"hasCrossHairs": "bool",
"isAnimated": "bool",
"maxCircleArea": "number",
"xAxisLabel": "string",
"xAxisLabelOffset": "string",
"xTicks": "string",
"yAxisFormat": "string",
"yAxisLabel": "string",
"yAxisLabelOffset": "string",
"yTicks": "string"
}
},
"bar": { "bar": {
"description": "Bar Chart", "description": "Bar Chart",
"data": true, "data": true,
@ -614,74 +465,63 @@
"type": "bool", "type": "bool",
"default": true "default": true
}, },
"legend": "bool"
}
},
"pie": {
"description": "Pie Chart",
"data": true,
"props": {
"title": "string",
"datasource": "tables",
"labelColumn": "string",
"valueColumn": "string",
"color": {
"type": "string",
"default": "#4285f4"
},
"height": {
"type": "number",
"default": "200"
},
"width": "number",
"dataLabels": "bool",
"animate": {
"type": "bool",
"default": true
},
"legend": { "legend": {
"type": "bool", "type": "bool",
"default": false "default": true
} }
} }
}, },
"brush": { "donut": {
"description": "brush chart", "description": "Donut Chart",
"data": true,
"props": {
"table": "string",
"gradient": "string",
"height": "number",
"width": "number",
"margin": "string",
"dateRange": "string",
"locale": "string",
"roundingTimeInterval": "string",
"xAxisFormat": "string",
"xTicks": "number",
"xAxisCustomFormat": "string"
}
},
"heatmap": {
"description": "Heatmap chart",
"data": true,
"props": {
"table": "string",
"color": "string",
"height": "number",
"width": "number",
"useLegend": "bool",
"yAxisLabel": "string",
"boxSize": "number"
}
},
"groupedbar": {
"description": "Groupedbar chart",
"data": true, "data": true,
"props": { "props": {
"title": "string",
"datasource": "tables", "datasource": "tables",
"nameLabel": "string", "labelColumn": "string",
"valueLabel": "string", "valueColumn": "string",
"color": "string", "color": {
"height": "string", "type": "string",
"width": "string", "default": "#4285f4"
"margin": "string", },
"grid": "string", "height": {
"groupLabel": "string", "type": "number",
"isAnimated": "bool", "default": "200"
"isHorizontal": "bool", },
"yTicks": "string", "width": "number",
"useLegend": "bool", "dataLabels": "bool",
"tooltipTitle": "string" "animate": {
} "type": "bool",
}, "default": true
"bullet": { },
"description": "Bullet chart", "legend": {
"data": true, "type": "bool",
"props": { "default": true
"table": "string", }
"color": "string",
"customSubtitle": "string",
"customTitle": "string",
"numberFormat": "string",
"paddingBetweenAxisAndChart": "number",
"height": "number",
"width": "number"
} }
}, },
"datepicker": { "datepicker": {

11
packages/standard-components/src/Chart/ApexOptionsBuilder.js
View File

@ -13,6 +13,9 @@ export class ApexOptionsBuilder {
toolbar: { toolbar: {
show: false, show: false,
}, },
zoom: {
enabled: false,
},
}, },
} }
@ -105,7 +108,15 @@ export class ApexOptionsBuilder {
return this.setOption(["legend", "show"], legend) return this.setOption(["legend", "show"], legend)
} }
legendPosition(position) {
return this.setOption(["legend", "position"], position)
}
stacked(stacked) { stacked(stacked) {
return this.setOption(["chart", "stacked"], stacked) return this.setOption(["chart", "stacked"], stacked)
} }
labels(labels) {
return this.setOption(["labels"], labels)
}
} }

5
packages/standard-components/src/Chart/DonutChart.svelte Normal file
View File

@ -0,0 +1,5 @@
<script>
import PieChart from "./PieChart.svelte"
</script>
<PieChart {...$$props} donut />

59
packages/standard-components/src/Chart/PieChart.svelte Normal file
View File

@ -0,0 +1,59 @@
<script>
import { onMount } from "svelte"
import { chart } from "svelte-apexcharts"
import fetchData from "../fetchData"
import { isEmpty, sortBy } from "lodash/fp"
import { ApexOptionsBuilder } from "./ApexOptionsBuilder"
export let title
export let datasource
export let labelColumn
export let valueColumn
export let height
export let width
export let color
export let dataLabels
export let animate
export let legend
export let donut
let data
$: options = getChartOptions(data)
// Fetch data on mount
onMount(async () => {
if (!isEmpty(datasource)) {
const result = (await fetchData(datasource)).slice(0, 20)
data = sortBy(row => row[labelColumn])(result)
}
})
function getChartOptions(rows = []) {
// Initialise default chart
let builder = new ApexOptionsBuilder()
.title(title)
.type(donut ? "donut" : "pie")
.width(width)
.height(height)
.dataLabels(dataLabels)
.animate(animate)
.legend(legend)
.legendPosition("right")
// Add data if valid datasource
if (rows && rows.length) {
if (!isEmpty(valueColumn) && rows[0][valueColumn] != null) {
const series = rows.map(row => parseFloat(row[valueColumn]))
builder = builder.series(series)
}
if (!isEmpty(rows[0][labelColumn])) {
builder = builder.labels(rows.map(row => row[labelColumn]))
}
}
// Build chart options
return builder.getOptions()
}
</script>
<div use:chart={options} />

2
packages/standard-components/src/Chart/index.js
View File

@ -1,2 +1,4 @@
export { default as bar } from "./BarChart.svelte" export { default as bar } from "./BarChart.svelte"
export { default as line } from "./LineChart.svelte" export { default as line } from "./LineChart.svelte"
export { default as pie } from "./PieChart.svelte"
export { default as donut } from "./DonutChart.svelte"