Add pie and donut charts
This commit is contained in:
Andrew Kingston
parent
2e35ec6c96
commit
665546f095
|
|
@ -423,105 +423,11 @@ export default {
|
|||
icon: "ri-bar-chart-2-line",
|
||||
isCategory: true,
|
||||
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",
|
||||
description: "Bar chart",
|
||||
icon: "ri-bar-chart-fill",
|
||||
icon: "ri-bar-chart-line",
|
||||
properties: {
|
||||
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",
|
||||
description: "Line chart",
|
||||
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,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -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": {
|
||||
"description": "Bar Chart",
|
||||
"data": true,
|
||||
|
|
@ -614,74 +465,63 @@
|
|||
"type": "bool",
|
||||
"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": {
|
||||
"type": "bool",
|
||||
"default": false
|
||||
"default": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"brush": {
|
||||
"description": "brush 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",
|
||||
"donut": {
|
||||
"description": "Donut Chart",
|
||||
"data": true,
|
||||
"props": {
|
||||
"title": "string",
|
||||
"datasource": "tables",
|
||||
"nameLabel": "string",
|
||||
"valueLabel": "string",
|
||||
"color": "string",
|
||||
"height": "string",
|
||||
"width": "string",
|
||||
"margin": "string",
|
||||
"grid": "string",
|
||||
"groupLabel": "string",
|
||||
"isAnimated": "bool",
|
||||
"isHorizontal": "bool",
|
||||
"yTicks": "string",
|
||||
"useLegend": "bool",
|
||||
"tooltipTitle": "string"
|
||||
}
|
||||
},
|
||||
"bullet": {
|
||||
"description": "Bullet chart",
|
||||
"data": true,
|
||||
"props": {
|
||||
"table": "string",
|
||||
"color": "string",
|
||||
"customSubtitle": "string",
|
||||
"customTitle": "string",
|
||||
"numberFormat": "string",
|
||||
"paddingBetweenAxisAndChart": "number",
|
||||
"height": "number",
|
||||
"width": "number"
|
||||
"labelColumn": "string",
|
||||
"valueColumn": "string",
|
||||
"color": {
|
||||
"type": "string",
|
||||
"default": "#4285f4"
|
||||
},
|
||||
"height": {
|
||||
"type": "number",
|
||||
"default": "200"
|
||||
},
|
||||
"width": "number",
|
||||
"dataLabels": "bool",
|
||||
"animate": {
|
||||
"type": "bool",
|
||||
"default": true
|
||||
},
|
||||
"legend": {
|
||||
"type": "bool",
|
||||
"default": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"datepicker": {
|
||||
|
|
|
|||
|
|
@ -13,6 +13,9 @@ export class ApexOptionsBuilder {
|
|||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
zoom: {
|
||||
enabled: false,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
|
|
@ -105,7 +108,15 @@ export class ApexOptionsBuilder {
|
|||
return this.setOption(["legend", "show"], legend)
|
||||
}
|
||||
|
||||
legendPosition(position) {
|
||||
return this.setOption(["legend", "position"], position)
|
||||
}
|
||||
|
||||
stacked(stacked) {
|
||||
return this.setOption(["chart", "stacked"], stacked)
|
||||
}
|
||||
|
||||
labels(labels) {
|
||||
return this.setOption(["labels"], labels)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
<script>
|
||||
import PieChart from "./PieChart.svelte"
|
||||
</script>
|
||||
|
||||
<PieChart {...$$props} donut />
|
||||
|
|
@ -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} />
|
||||
|
|
@ -1,2 +1,4 @@
|
|||
export { default as bar } from "./BarChart.svelte"
|
||||
export { default as line } from "./LineChart.svelte"
|
||||
export { default as pie } from "./PieChart.svelte"
|
||||
export { default as donut } from "./DonutChart.svelte"
|
||||
|
|
|
|||
Loading…
Reference in New Issue