Merge pull request #8374 from Budibase/feature/chart-block-component

Added Chart block component
This commit is contained in:
deanhannigan 2022-10-24 17:08:38 +01:00 committed by GitHub
commit b751c6f74d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 599 additions and 14 deletions

View File

@ -29,6 +29,10 @@
// Filter out settings which shouldn't be rendered
sections.forEach(section => {
section.visible = shouldDisplay(instance, section)
if (!section.visible) {
return
}
section.settings.forEach(setting => {
setting.visible = canRenderControl(instance, setting, isScreen)
})
@ -46,17 +50,7 @@
}
}
const canRenderControl = (instance, setting, isScreen) => {
// Prevent rendering on click setting for screens
if (setting?.type === "event" && isScreen) {
return false
}
const control = getComponentForSetting(setting)
if (!control) {
return false
}
const shouldDisplay = (instance, setting) => {
// Parse dependant settings
if (setting.dependsOn) {
let dependantSetting = setting.dependsOn
@ -93,6 +87,19 @@
return true
}
const canRenderControl = (instance, setting, isScreen) => {
// Prevent rendering on click setting for screens
if (setting?.type === "event" && isScreen) {
return false
}
const control = getComponentForSetting(setting)
if (!control) {
return false
}
return shouldDisplay(instance, setting)
}
</script>
{#each sections as section, idx (section.name)}

View File

@ -6,7 +6,8 @@
"tableblock",
"cardsblock",
"repeaterblock",
"formblock"
"formblock",
"chartblock"
]
},
{

View File

@ -3972,6 +3972,477 @@
}
]
},
"chartblock": {
"block": true,
"name": "Chart block",
"icon": "GraphPie",
"hasChildren": false,
"settings": [
{
"type": "select",
"label": "Chart Type",
"key": "chartType",
"required": true,
"options": [
{
"label": "Pie",
"value": "pie"
},
{
"label": "Bar",
"value": "bar"
},
{
"label": "Line",
"value": "line"
},
{
"label": "Donut",
"value": "donut"
},
{
"label": "Candlestick",
"value": "candlestick"
},
{
"label": "Area",
"value": "area"
}
]
},
{
"type": "dataSource",
"label": "Data",
"key": "dataSource",
"required": true
},
{
"type": "text",
"label": "Title",
"key": "chartTitle"
},
{
"type": "filter",
"label": "Filtering",
"key": "filter"
},
{
"type": "field",
"label": "Sort Column",
"key": "sortColumn"
},
{
"type": "select",
"label": "Sort Order",
"key": "sortOrder",
"options": [
"Ascending",
"Descending"
],
"defaultValue": "Ascending"
},
{
"type": "number",
"label": "Limit",
"key": "limit",
"defaultValue": 50
},
{
"type": "text",
"label": "Width",
"key": "width"
},
{
"type": "text",
"label": "Height",
"key": "height",
"defaultValue": "400"
},
{
"type": "select",
"label": "Colors",
"key": "palette",
"defaultValue": "Palette 1",
"options": [
"Custom",
"Palette 1",
"Palette 2",
"Palette 3",
"Palette 4",
"Palette 5",
"Palette 6",
"Palette 7",
"Palette 8",
"Palette 9",
"Palette 10"
]
},
{
"type": "color",
"label": "C1",
"key": "c1",
"dependsOn": {
"setting": "palette",
"value": "Custom"
}
},
{
"type": "color",
"label": "C2",
"key": "c2",
"dependsOn": {
"setting": "palette",
"value": "Custom"
}
},
{
"type": "color",
"label": "C3",
"key": "c3",
"dependsOn": {
"setting": "palette",
"value": "Custom"
}
},
{
"type": "color",
"label": "C4",
"key": "c4",
"dependsOn": {
"setting": "palette",
"value": "Custom"
}
},
{
"type": "color",
"label": "C5",
"key": "c5",
"dependsOn": {
"setting": "palette",
"value": "Custom"
}
},
{
"type": "boolean",
"label": "Data Labels",
"key": "dataLabels",
"defaultValue": false
},
{
"type": "boolean",
"label": "Legend",
"key": "legend",
"defaultValue": true
},
{
"type": "boolean",
"label": "Animate",
"key": "animate",
"defaultValue": false
},
{
"section": true,
"name": "Pie Chart",
"icon": "GraphPie",
"dependsOn": {
"setting": "chartType",
"value": "pie"
},
"settings": [
{
"type": "field",
"label": "Label Col.",
"key": "labelColumn",
"dependsOn": "dataSource",
"required": true
},
{
"type": "field",
"label": "Data Col.",
"key": "valueColumn",
"dependsOn": "dataSource",
"required": true
}
]
},
{
"section": true,
"name": "Donut Chart",
"icon": "GraphDonut",
"dependsOn": {
"setting": "chartType",
"value": "donut"
},
"settings": [
{
"type": "field",
"label": "Label Col.",
"key": "labelColumn",
"dependsOn": "dataSource",
"required": true
},
{
"type": "field",
"label": "Data Col.",
"key": "valueColumn",
"dependsOn": "dataSource",
"required": true
}
]
},
{
"section": true,
"name": "Bar Chart",
"icon": "GraphBarVertical",
"dependsOn": {
"setting": "chartType",
"value": "bar"
},
"settings": [
{
"type": "field",
"label": "Label Col.",
"key": "labelColumn",
"dependsOn": "dataSource",
"required": true
},
{
"type": "multifield",
"label": "Data Cols.",
"key": "valueColumns",
"dependsOn": "dataSource",
"required": true
},
{
"type": "select",
"label": "Format",
"key": "yAxisUnits",
"options": [
"Default",
"Thousands",
"Millions"
],
"defaultValue": "Default"
},
{
"type": "text",
"label": "Y Axis Label",
"key": "yAxisLabel"
},
{
"type": "text",
"label": "X Axis Label",
"key": "xAxisLabel"
},
{
"type": "boolean",
"label": "Stacked",
"key": "stacked",
"defaultValue": false
},
{
"type": "boolean",
"label": "Horizontal",
"key": "horizontal",
"defaultValue": false
}
]
},
{
"section": true,
"name": "Line Chart",
"icon": "GraphTrend",
"dependsOn": {
"setting": "chartType",
"value": "line"
},
"settings": [
{
"type": "field",
"label": "Label Col.",
"key": "labelColumn",
"dependsOn": "dataSource",
"required": true
},
{
"type": "multifield",
"label": "Data Cols.",
"key": "valueColumns",
"dependsOn": "dataSource",
"required": true
},
{
"type": "select",
"label": "Format",
"key": "yAxisUnits",
"options": [
"Default",
"Thousands",
"Millions"
],
"defaultValue": "Default"
},
{
"type": "text",
"label": "Y Axis Label",
"key": "yAxisLabel"
},
{
"type": "text",
"label": "X Axis Label",
"key": "xAxisLabel"
},
{
"type": "select",
"label": "Curve",
"key": "curve",
"options": [
"Smooth",
"Straight",
"Stepline"
],
"defaultValue": "Smooth"
}
]
},
{
"section": true,
"name": "Area Chart",
"icon": "GraphAreaStacked",
"dependsOn": {
"setting": "chartType",
"value": "area"
},
"settings": [
{
"type": "field",
"label": "Label Col.",
"key": "labelColumn",
"dependsOn": "dataSource",
"required": true
},
{
"type": "multifield",
"label": "Data Cols.",
"key": "valueColumns",
"dependsOn": "dataSource",
"required": true
},
{
"type": "select",
"label": "Format",
"key": "yAxisUnits",
"options": [
"Default",
"Thousands",
"Millions"
],
"defaultValue": "Default"
},
{
"type": "text",
"label": "Y Axis Label",
"key": "yAxisLabel"
},
{
"type": "text",
"label": "X Axis Label",
"key": "xAxisLabel"
},
{
"type": "select",
"label": "Curve",
"key": "curve",
"options": [
"Smooth",
"Straight",
"Stepline"
],
"defaultValue": "Smooth"
},
{
"type": "boolean",
"label": "Stacked",
"key": "stacked",
"defaultValue": true
},
{
"type": "boolean",
"label": "Gradient",
"key": "gradient",
"defaultValue": false
}
]
},
{
"section": true,
"name": "Candlestick Chart",
"icon": "GraphBarVerticalStacked",
"dependsOn": {
"setting": "chartType",
"value": "candlestick"
},
"settings": [
{
"type": "field",
"label": "Date Col.",
"key": "dateColumn",
"dependsOn": "dataSource",
"required": true
},
{
"type": "field",
"label": "Open Col.",
"key": "openColumn",
"dependsOn": "dataSource",
"required": true
},
{
"type": "field",
"label": "Close Col.",
"key": "closeColumn",
"dependsOn": "dataSource",
"required": true
},
{
"type": "field",
"label": "High Col.",
"key": "highColumn",
"dependsOn": "dataSource",
"required": true
},
{
"type": "field",
"label": "Low Col.",
"key": "lowColumn",
"dependsOn": "dataSource",
"required": true
},
{
"type": "select",
"label": "Format",
"key": "yAxisUnits",
"options": [
"Default",
"Thousands",
"Millions"
],
"defaultValue": "Default"
},
{
"type": "text",
"label": "Y Axis Label",
"key": "yAxisLabel"
},
{
"type": "text",
"label": "X Axis Label",
"key": "xAxisLabel"
}
]
}
]
},
"tableblock": {
"block": true,
"name": "Table block",

View File

@ -0,0 +1,99 @@
<script>
import Block from "components/Block.svelte"
import BlockComponent from "components/BlockComponent.svelte"
import { makePropSafe as safe } from "@budibase/string-templates"
// Datasource
export let filter
export let sortColumn
export let sortOrder
export let limit
// Block
export let chartTitle
export let chartType
export let dataSource
export let palette
export let c1, c2, c3, c4, c5
export let labelColumn
export let legend
export let animate
export let dataLabels
export let height
export let width
// Pie/Donut
export let valueColumn
// Bar
export let stacked
export let horizontal
// Bar/Line/Area
export let valueColumns
export let yAxisUnits
export let yAxisLabel
export let xAxisLabel
export let curve
// Area
export let gradient
// Candlestick
export let closeColumn
export let openColumn
export let highColumn
export let lowColumn
export let dateColumn
let dataProviderId
$: colors = c1 && c2 && c3 && c4 && c5 ? [c1, c2, c3, c4, c5] : null
</script>
<Block>
<BlockComponent
type="dataprovider"
context="provider"
bind:id={dataProviderId}
props={{
dataSource,
filter,
sortColumn,
sortOrder,
limit,
}}
>
{#if dataProviderId && chartType}
<BlockComponent
type={chartType}
props={{
dataProvider: `{{ literal ${safe(dataProviderId)} }}`,
height,
width,
title: chartTitle,
labelColumn,
valueColumn,
valueColumns,
palette,
dataLabels,
legend,
animate,
...colors,
yAxisUnits,
yAxisLabel,
xAxisLabel,
stacked,
horizontal,
curve,
gradient, //issue?
closeColumn,
openColumn,
highColumn,
lowColumn,
dateColumn,
}}
/>
{/if}
</BlockComponent>
</Block>

View File

@ -2,3 +2,4 @@ export { default as tableblock } from "./TableBlock.svelte"
export { default as cardsblock } from "./CardsBlock.svelte"
export { default as repeaterblock } from "./RepeaterBlock.svelte"
export { default as formblock } from "./FormBlock.svelte"
export { default as chartblock } from "./ChartBlock.svelte"

View File

@ -24,8 +24,11 @@
display: flex !important;
text-transform: capitalize;
}
div :global(.apexcharts-yaxis-label),
div :global(.apexcharts-xaxis-label) {
div :global(.apexcharts-text.apexcharts-xaxis-title-text),
div :global(.apexcharts-text.apexcharts-yaxis-title-text),
div :global(.apexcharts-text.apexcharts-xaxis-label),
div :global(.apexcharts-text.apexcharts-yaxis-label),
div :global(.apexcharts-title-text) {
fill: var(--spectrum-global-color-gray-600);
}

View File

@ -184,6 +184,9 @@ export class ApexOptionsBuilder {
}
palette(palette) {
if (!palette) {
return this
}
return this.setOption(
["theme", "palette"],
palette.toLowerCase().replace(/[\W]/g, "")