From cdcfbc6dce5f4dd0119c1cf6fed9b4f40a1599c3 Mon Sep 17 00:00:00 2001 From: Dean Date: Fri, 21 Oct 2022 14:20:40 +0100 Subject: [PATCH 1/4] Initial commit for chart block component --- .../settings/ComponentSettingsSection.svelte | 29 +- .../new/_components/componentStructure.json | 3 +- packages/client/manifest.json | 471 ++++++++++++++++++ .../components/app/blocks/ChartBlock.svelte | 107 ++++ .../client/src/components/app/blocks/index.js | 1 + .../components/app/charts/ApexChart.svelte | 5 +- .../app/charts/ApexOptionsBuilder.js | 3 + 7 files changed, 605 insertions(+), 14 deletions(-) create mode 100644 packages/client/src/components/app/blocks/ChartBlock.svelte diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte index efd3db8ff7..12a7eea87d 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte @@ -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) + } {#each sections as section, idx (section.name)} diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/componentStructure.json b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/componentStructure.json index 3d9cf7e2a3..3100c7467c 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/componentStructure.json +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/componentStructure.json @@ -6,7 +6,8 @@ "tableblock", "cardsblock", "repeaterblock", - "formblock" + "formblock", + "chartblock" ] }, { diff --git a/packages/client/manifest.json b/packages/client/manifest.json index 763ac46b3f..93a53c15a3 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -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", diff --git a/packages/client/src/components/app/blocks/ChartBlock.svelte b/packages/client/src/components/app/blocks/ChartBlock.svelte new file mode 100644 index 0000000000..7a2f8469b8 --- /dev/null +++ b/packages/client/src/components/app/blocks/ChartBlock.svelte @@ -0,0 +1,107 @@ + + + + + {#if $component.empty} + + {:else} + + {/if} + + diff --git a/packages/client/src/components/app/blocks/index.js b/packages/client/src/components/app/blocks/index.js index 32b2b98c06..734bff2c0f 100644 --- a/packages/client/src/components/app/blocks/index.js +++ b/packages/client/src/components/app/blocks/index.js @@ -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" diff --git a/packages/client/src/components/app/charts/ApexChart.svelte b/packages/client/src/components/app/charts/ApexChart.svelte index 87d78bf5a2..eed8fb2e6c 100644 --- a/packages/client/src/components/app/charts/ApexChart.svelte +++ b/packages/client/src/components/app/charts/ApexChart.svelte @@ -24,8 +24,9 @@ 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-title-text) { fill: var(--spectrum-global-color-gray-600); } diff --git a/packages/client/src/components/app/charts/ApexOptionsBuilder.js b/packages/client/src/components/app/charts/ApexOptionsBuilder.js index 6b3e3a4440..04b5805df3 100644 --- a/packages/client/src/components/app/charts/ApexOptionsBuilder.js +++ b/packages/client/src/components/app/charts/ApexOptionsBuilder.js @@ -184,6 +184,9 @@ export class ApexOptionsBuilder { } palette(palette) { + if (!palette) { + return this + } return this.setOption( ["theme", "palette"], palette.toLowerCase().replace(/[\W]/g, "") From 2834a02ef4aae73d9171765132b244ffab92bdd7 Mon Sep 17 00:00:00 2001 From: Dean Date: Mon, 24 Oct 2022 12:20:43 +0100 Subject: [PATCH 2/4] Ensure chart axis labelling fits the current theme --- packages/client/src/components/app/charts/ApexChart.svelte | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/client/src/components/app/charts/ApexChart.svelte b/packages/client/src/components/app/charts/ApexChart.svelte index eed8fb2e6c..265d6d3523 100644 --- a/packages/client/src/components/app/charts/ApexChart.svelte +++ b/packages/client/src/components/app/charts/ApexChart.svelte @@ -26,6 +26,8 @@ } 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); } From f4d3d99b9e4aa7093135762df9f78d5309d228d1 Mon Sep 17 00:00:00 2001 From: Dean Date: Mon, 24 Oct 2022 16:21:08 +0100 Subject: [PATCH 3/4] Removed unnecessary block configuration elements --- .../components/app/blocks/ChartBlock.svelte | 68 ++++++++----------- 1 file changed, 29 insertions(+), 39 deletions(-) diff --git a/packages/client/src/components/app/blocks/ChartBlock.svelte b/packages/client/src/components/app/blocks/ChartBlock.svelte index 7a2f8469b8..cc2d156129 100644 --- a/packages/client/src/components/app/blocks/ChartBlock.svelte +++ b/packages/client/src/components/app/blocks/ChartBlock.svelte @@ -1,8 +1,6 @@