Merge pull request #8374 from Budibase/feature/chart-block-component
Added Chart block component
This commit is contained in:
deanhannigan
GitHub
commit
b751c6f74d
|
|
@ -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)}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,8 @@
|
|||
"tableblock",
|
||||
"cardsblock",
|
||||
"repeaterblock",
|
||||
"formblock"
|
||||
"formblock",
|
||||
"chartblock"
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
99
packages/client/src/components/app/blocks/ChartBlock.svelte
Normal file
99
packages/client/src/components/app/blocks/ChartBlock.svelte
Normal 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>
|
||||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -184,6 +184,9 @@ export class ApexOptionsBuilder {
|
|||
}
|
||||
|
||||
palette(palette) {
|
||||
if (!palette) {
|
||||
return this
|
||||
}
|
||||
return this.setOption(
|
||||
["theme", "palette"],
|
||||
palette.toLowerCase().replace(/[\W]/g, "")
|
||||
|
|
|
|||
Loading…
Reference in a new issue