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

Initial commit for chart block component

This commit is contained in:
Dean 2022-10-21 14:20:40 +01:00
parent f54d3e19ea
commit 2dba5d18cd
7 changed files with 605 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",

107
packages/client/src/components/app/blocks/ChartBlock.svelte Normal file
View File

@ -0,0 +1,107 @@
<script>
import { getContext } from "svelte"
import Block from "components/Block.svelte"
import BlockComponent from "components/BlockComponent.svelte"
import Placeholder from "components/app/Placeholder.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
const component = getContext("component")
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,
}}
order={0}
>
{#if $component.empty}
<Placeholder />
{:else}
<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,
}}
order={1}
/>
{/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"

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

@ -24,8 +24,9 @@
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-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, "")