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

Add area chart and unit formatting

This commit is contained in:
Andrew Kingston 2020-11-03 14:32:21 +00:00
parent 3d84b831e9
commit 91ef7fd0a7
6 changed files with 216 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -545,6 +545,13 @@ export default {
dependsOn: "datasource", dependsOn: "datasource",
control: MultiTableViewFieldSelect, control: MultiTableViewFieldSelect,
}, },
{
label: "Format",
key: "yAxisUnits",
control: OptionSelect,
options: ["Default", "Thousands", "Millions"],
defaultValue: "Default",
},
{ {
label: "Y Axis Label", label: "Y Axis Label",
key: "yAxisLabel", key: "yAxisLabel",
@ -610,6 +617,121 @@ export default {
], ],
}, },
}, },
{
name: "Area Chart",
_component: "@budibase/standard-components/area",
description: "Line chart",
icon: "ri-line-chart-fill",
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 Cols.",
key: "valueColumns",
dependsOn: "datasource",
control: MultiTableViewFieldSelect,
},
{
label: "Format",
key: "yAxisUnits",
control: OptionSelect,
options: ["Default", "Thousands", "Millions"],
defaultValue: "Default",
},
{
label: "Y Label",
key: "yAxisLabel",
control: Input,
},
{
label: "X Label",
key: "xAxisLabel",
control: Input,
},
// {
// label: "Color",
// key: "color",
// control: Colorpicker,
// defaultValue: "#4285f4",
// },
{
label: "Width",
key: "width",
control: Input,
},
{
label: "Height",
key: "height",
control: Input,
defaultValue: "400",
},
{
label: "Curve",
key: "curve",
control: OptionSelect,
options: ["Smooth", "Straight", "Stepline"],
defaultValue: "Smooth",
},
{
label: "Data Labels",
key: "dataLabels",
control: Checkbox,
valueKey: "checked",
defaultValue: false,
},
{
label: "Animate",
key: "animate",
control: Checkbox,
valueKey: "checked",
defaultValue: true,
},
{
label: "Fill",
key: "fill",
control: Checkbox,
valueKey: "checked",
defaultValue: true,
},
{
label: "Legend",
key: "legend",
control: Checkbox,
valueKey: "checked",
defaultValue: false,
},
{
label: "Stacked",
key: "stacked",
control: Checkbox,
valueKey: "checked",
defaultValue: false,
},
{
label: "Gradient",
key: "gradient",
control: Checkbox,
valueKey: "checked",
defaultValue: false,
},
],
},
},
{ {
name: "Pie Chart", name: "Pie Chart",
_component: "@budibase/standard-components/pie", _component: "@budibase/standard-components/pie",

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

@ -465,7 +465,66 @@
"type": "bool", "type": "bool",
"default": true "default": true
}, },
"legend": "bool" "legend": "bool",
"yAxisUnits": {
"type": "options",
"default": "Default",
"options": [
"Default", "Thousands", "Millions"
]
}
}
},
"area": {
"description": "Area Chart",
"data": true,
"props": {
"title": "string",
"datasource": "tables",
"labelColumn": "string",
"valueColumns": "string",
"color": {
"type": "string",
"default": "#4285f4"
},
"height": {
"type": "number",
"default": "400"
},
"width": "number",
"dataLabels": {
"type": "bool",
"default": false
},
"animate": {
"type": "bool",
"default": true
},
"xAxisLabel": "string",
"yAxisLabel": "string",
"curve": {
"type": "options",
"options": [
"Smooth",
"Straight",
"Stepline"
],
"default": "Smooth"
},
"fill": {
"type": "bool",
"default": true
},
"legend": "bool",
"stacked": "bool",
"gradient": "bool",
"yAxisUnits": {
"type": "options",
"default": "Default",
"options": [
"Default", "Thousands", "Millions"
]
}
} }
}, },
"pie": { "pie": {

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

@ -1,4 +1,9 @@
export class ApexOptionsBuilder { export class ApexOptionsBuilder {
formatters = {
["Default"]: val => Math.round(val * 100) / 100,
["Thousands"]: val => `${Math.round(val / 1000)}K`,
["Millions"]: val => `${Math.round(val / 1000000)}M`,
}
options = { options = {
series: [], series: [],
legend: { legend: {
@ -17,6 +22,11 @@ export class ApexOptionsBuilder {
enabled: false, enabled: false,
}, },
}, },
yaxis: {
labels: {
formatter: this.formatters.Default,
},
},
} }
setOption(path, value) { setOption(path, value) {
@ -119,4 +129,11 @@ export class ApexOptionsBuilder {
labels(labels) { labels(labels) {
return this.setOption(["labels"], labels) return this.setOption(["labels"], labels)
} }
yUnits(units) {
return this.setOption(
["yaxis", "labels", "formatter"],
this.formatters[units || "Default"]
)
}
} }

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

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

14
packages/standard-components/src/Chart/LineChart.svelte
View File

@ -5,6 +5,7 @@
import { isEmpty, sortBy } from "lodash/fp" import { isEmpty, sortBy } from "lodash/fp"
import { ApexOptionsBuilder } from "./ApexOptionsBuilder" import { ApexOptionsBuilder } from "./ApexOptionsBuilder"
// Common props
export let title export let title
export let datasource export let datasource
export let labelColumn export let labelColumn
@ -17,8 +18,13 @@
export let animate export let animate
export let dataLabels export let dataLabels
export let curve export let curve
export let fill
export let legend export let legend
export let yAxisUnits
// Area specific props
export let area
export let stacked
export let gradient
let data = [] let data = []
$: options = getChartOptions(data) $: options = getChartOptions(data)
@ -35,7 +41,7 @@
// Initialise default chart // Initialise default chart
let builder = new ApexOptionsBuilder() let builder = new ApexOptionsBuilder()
.title(title) .title(title)
.type(fill ? "area" : "line") .type(area ? "area" : "line")
// .color(color) // .color(color)
.width(width) .width(width)
.height(height) .height(height)
@ -44,8 +50,10 @@
.dataLabels(dataLabels) .dataLabels(dataLabels)
.animate(animate) .animate(animate)
.curve(curve.toLowerCase()) .curve(curve.toLowerCase())
.gradient(fill) .gradient(gradient)
.stacked(stacked)
.legend(legend) .legend(legend)
.yUnits(yAxisUnits)
// Add data if valid datasource // Add data if valid datasource
if (rows && rows.length) { if (rows && rows.length) {

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

@ -2,3 +2,4 @@ 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 pie } from "./PieChart.svelte"
export { default as donut } from "./DonutChart.svelte" export { default as donut } from "./DonutChart.svelte"
export { default as area } from "./AreaChart.svelte"