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

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
parent c0aa506b43 ad7e2f0688
commit b751c6f74d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 599 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte
View File

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

3
packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/componentStructure.json
View File

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

471
packages/client/manifest.json
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": { "tableblock": {
"block": true, "block": true,
"name": "Table block", "name": "Table block",

99
packages/client/src/components/app/blocks/ChartBlock.svelte Normal file
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>

1
packages/client/src/components/app/blocks/index.js
View File

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

7
packages/client/src/components/app/charts/ApexChart.svelte
View File

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

3
packages/client/src/components/app/charts/ApexOptionsBuilder.js
View File

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