From 76328dc81e3d31f4eb73db6c6c82054408db4fca Mon Sep 17 00:00:00 2001 From: cmack Date: Mon, 6 Jul 2020 16:58:33 +0100 Subject: [PATCH 01/31] WIP : Chart component for rendering Britecharts --- .../src/components/userInterface/Chart.svelte | 65 +++++++++++++++++++ 1 file changed, 65 insertions(+) create mode 100644 packages/builder/src/components/userInterface/Chart.svelte diff --git a/packages/builder/src/components/userInterface/Chart.svelte b/packages/builder/src/components/userInterface/Chart.svelte new file mode 100644 index 0000000000..45db995efe --- /dev/null +++ b/packages/builder/src/components/userInterface/Chart.svelte @@ -0,0 +1,65 @@ + + +
From 10137d1aa8f8e4c4d55fd74988d1126493dc76a7 Mon Sep 17 00:00:00 2001 From: cmack Date: Tue, 7 Jul 2020 16:52:04 +0100 Subject: [PATCH 02/31] WIP: Chart Events, Tooltips and Validation --- .../src/components/userInterface/Chart.svelte | 90 +++++++++++++++---- 1 file changed, 74 insertions(+), 16 deletions(-) diff --git a/packages/builder/src/components/userInterface/Chart.svelte b/packages/builder/src/components/userInterface/Chart.svelte index 45db995efe..12559466bd 100644 --- a/packages/builder/src/components/userInterface/Chart.svelte +++ b/packages/builder/src/components/userInterface/Chart.svelte @@ -1,65 +1,123 @@ - + +
+ +{#if canUseTooltip} +
+{/if} From 133445ccdaff2bd93de9fc8a273ef587b6b6f4b2 Mon Sep 17 00:00:00 2001 From: Conor_Mack Date: Wed, 8 Jul 2020 17:14:23 +0100 Subject: [PATCH 03/31] Functional Chart Wrapper for Britecharts --- packages/builder/package.json | 2 +- .../src/components/userInterface/Chart.svelte | 134 +++++++++++------- 2 files changed, 85 insertions(+), 51 deletions(-) diff --git a/packages/builder/package.json b/packages/builder/package.json index 295d004301..592cc17947 100644 --- a/packages/builder/package.json +++ b/packages/builder/package.json @@ -68,7 +68,7 @@ "lunr": "^2.3.5", "mustache": "^4.0.1", "safe-buffer": "^5.1.2", - "shortid": "^2.2.8", + "shortid": "^2.2.15", "string_decoder": "^1.2.0", "svelte-portal": "^0.1.0", "svelte-simple-modal": "^0.4.2", diff --git a/packages/builder/src/components/userInterface/Chart.svelte b/packages/builder/src/components/userInterface/Chart.svelte index 12559466bd..1efcc94175 100644 --- a/packages/builder/src/components/userInterface/Chart.svelte +++ b/packages/builder/src/components/userInterface/Chart.svelte @@ -15,32 +15,41 @@ -
- -{#if canUseTooltip} -
-{/if} +
+{#if useLegend} +
+{/if} \ No newline at end of file From 232bdb0aa51e9c427c72bcefc172ed84675be707 Mon Sep 17 00:00:00 2001 From: Conor_Mack Date: Thu, 9 Jul 2020 10:39:49 +0100 Subject: [PATCH 04/31] Adding CDN links and Tidyup --- packages/builder/src/components/userInterface/Chart.svelte | 3 +-- .../src/components/userInterface/ComponentsHierarchy.svelte | 1 + packages/builder/src/index.html | 4 ++++ 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/builder/src/components/userInterface/Chart.svelte b/packages/builder/src/components/userInterface/Chart.svelte index 1efcc94175..54ccf902ee 100644 --- a/packages/builder/src/components/userInterface/Chart.svelte +++ b/packages/builder/src/components/userInterface/Chart.svelte @@ -71,7 +71,6 @@ tooltipContainer = d3.select(`.${chartClass} .metadata-group .vertical-marker-container`); tooltipContainer.datum([]).call(tooltip); - // tooltip.show() } } @@ -147,7 +146,7 @@ } $: validChartProps = chart ? Object.getOwnPropertyNames(chart) : null; - $: canUseTooltip = type === "groupedBar" && tooltipProps && useTooltip; + $: canUseTooltip = tooltipProps && useTooltip; diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte index fbe9121623..134c32ac67 100644 --- a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte +++ b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte @@ -29,6 +29,7 @@
+ {#each screens as screen}
Budibase Builder + @@ -21,6 +22,9 @@ + + + From 96d80cf30da917de967c4d9e06219788e612134a Mon Sep 17 00:00:00 2001 From: cmack Date: Mon, 20 Jul 2020 10:09:11 +0100 Subject: [PATCH 05/31] Chart component - CDN to NPM Pkg --- packages/builder/package.json | 2 + .../src/components/userInterface/Chart.svelte | 138 ++++++++++-------- packages/builder/src/index.html | 4 - 3 files changed, 79 insertions(+), 65 deletions(-) diff --git a/packages/builder/package.json b/packages/builder/package.json index 592cc17947..6b7cd80215 100644 --- a/packages/builder/package.json +++ b/packages/builder/package.json @@ -58,7 +58,9 @@ "@budibase/bbui": "^1.15.4", "@budibase/client": "^0.0.32", "@nx-js/compiler-util": "^2.0.0", + "britecharts": "^2.16.0", "codemirror": "^5.51.0", + "d3-selection": "^1.4.1", "date-fns": "^1.29.0", "deepmerge": "^4.2.2", "feather-icons": "^4.21.0", diff --git a/packages/builder/src/components/userInterface/Chart.svelte b/packages/builder/src/components/userInterface/Chart.svelte index 54ccf902ee..e0508baffb 100644 --- a/packages/builder/src/components/userInterface/Chart.svelte +++ b/packages/builder/src/components/userInterface/Chart.svelte @@ -1,156 +1,172 @@
{#if useLegend} -
-{/if} \ No newline at end of file +
+{/if} diff --git a/packages/builder/src/index.html b/packages/builder/src/index.html index 28d88fde54..afc3bcb4c2 100644 --- a/packages/builder/src/index.html +++ b/packages/builder/src/index.html @@ -8,7 +8,6 @@ Budibase Builder - @@ -22,9 +21,6 @@ - - - From cae50603aed34b5cd75fce049b19f41398b5e3cb Mon Sep 17 00:00:00 2001 From: cmack Date: Mon, 20 Jul 2020 16:25:50 +0100 Subject: [PATCH 06/31] WIP: Work so far --- .../standard-components/src/Chart/Bar.svelte | 0 .../src/Chart/Brush.svelte | 0 .../src/Chart/Bullet.svelte | 0 .../src/Chart}/Chart.svelte | 0 .../src/Chart/Donut.svelte | 20 +++++++++++++++++++ .../src/Chart/GroupedBar.svelte | 0 .../src/Chart/Heatmap.svelte | 0 .../standard-components/src/Chart/Line.svelte | 0 .../src/Chart/ScatterPlot.svelte | 0 .../src/Chart/Sparkline.svelte | 0 .../src/Chart/StackedArea.svelte | 0 .../standard-components/src/Chart/Step.svelte | 0 .../src/Chart/index.svelte | 0 13 files changed, 20 insertions(+) create mode 100644 packages/standard-components/src/Chart/Bar.svelte create mode 100644 packages/standard-components/src/Chart/Brush.svelte create mode 100644 packages/standard-components/src/Chart/Bullet.svelte rename packages/{builder/src/components/userInterface => standard-components/src/Chart}/Chart.svelte (100%) create mode 100644 packages/standard-components/src/Chart/Donut.svelte create mode 100644 packages/standard-components/src/Chart/GroupedBar.svelte create mode 100644 packages/standard-components/src/Chart/Heatmap.svelte create mode 100644 packages/standard-components/src/Chart/Line.svelte create mode 100644 packages/standard-components/src/Chart/ScatterPlot.svelte create mode 100644 packages/standard-components/src/Chart/Sparkline.svelte create mode 100644 packages/standard-components/src/Chart/StackedArea.svelte create mode 100644 packages/standard-components/src/Chart/Step.svelte create mode 100644 packages/standard-components/src/Chart/index.svelte diff --git a/packages/standard-components/src/Chart/Bar.svelte b/packages/standard-components/src/Chart/Bar.svelte new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/standard-components/src/Chart/Brush.svelte b/packages/standard-components/src/Chart/Brush.svelte new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/standard-components/src/Chart/Bullet.svelte b/packages/standard-components/src/Chart/Bullet.svelte new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/builder/src/components/userInterface/Chart.svelte b/packages/standard-components/src/Chart/Chart.svelte similarity index 100% rename from packages/builder/src/components/userInterface/Chart.svelte rename to packages/standard-components/src/Chart/Chart.svelte diff --git a/packages/standard-components/src/Chart/Donut.svelte b/packages/standard-components/src/Chart/Donut.svelte new file mode 100644 index 0000000000..5adb97a944 --- /dev/null +++ b/packages/standard-components/src/Chart/Donut.svelte @@ -0,0 +1,20 @@ + + + diff --git a/packages/standard-components/src/Chart/GroupedBar.svelte b/packages/standard-components/src/Chart/GroupedBar.svelte new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/standard-components/src/Chart/Heatmap.svelte b/packages/standard-components/src/Chart/Heatmap.svelte new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/standard-components/src/Chart/Line.svelte b/packages/standard-components/src/Chart/Line.svelte new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/standard-components/src/Chart/ScatterPlot.svelte b/packages/standard-components/src/Chart/ScatterPlot.svelte new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/standard-components/src/Chart/Sparkline.svelte b/packages/standard-components/src/Chart/Sparkline.svelte new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/standard-components/src/Chart/StackedArea.svelte b/packages/standard-components/src/Chart/StackedArea.svelte new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/standard-components/src/Chart/Step.svelte b/packages/standard-components/src/Chart/Step.svelte new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/standard-components/src/Chart/index.svelte b/packages/standard-components/src/Chart/index.svelte new file mode 100644 index 0000000000..e69de29bb2 From d56c801c6f090c924d1546c9ffb770ea33f3d522 Mon Sep 17 00:00:00 2001 From: cmack Date: Sun, 26 Jul 2020 11:54:55 +0100 Subject: [PATCH 07/31] Britecharts work so far --- .../builder/src/builderStore/store/index.js | 4 +- .../ComponentSelectionList.svelte | 2 +- .../userInterface/DesignView.svelte | 2 +- .../userInterface/PropertyControl.svelte | 15 +- .../userInterface/temporaryPanelStructure.js | 451 +++++++++++++++++- packages/standard-components/components.json | 65 +++ packages/standard-components/package.json | 2 + .../standard-components/src/Chart/Bar.svelte | 67 +++ .../src/Chart/Chart.svelte | 59 ++- .../src/Chart/Donut.svelte | 24 +- .../standard-components/src/Chart/Line.svelte | 82 ++++ .../standard-components/src/Chart/index.js | 3 + .../src/Chart/index.svelte | 0 packages/standard-components/src/index.js | 1 + 14 files changed, 704 insertions(+), 73 deletions(-) create mode 100644 packages/standard-components/src/Chart/index.js delete mode 100644 packages/standard-components/src/Chart/index.svelte diff --git a/packages/builder/src/builderStore/store/index.js b/packages/builder/src/builderStore/store/index.js index 36a43b3712..190f6f1f8a 100644 --- a/packages/builder/src/builderStore/store/index.js +++ b/packages/builder/src/builderStore/store/index.js @@ -273,7 +273,7 @@ const setCurrentPage = store => pageName => { * @param {string} componentToAdd - name of the component to add to the application * @param {string} presetName - name of the component preset if defined */ -const addChildComponent = store => (componentToAdd, presetName) => { +const addChildComponent = store => (componentToAdd, presetProps = {}) => { store.update(state => { function findSlot(component_array) { for (let i = 0; i < component_array.length; i += 1) { @@ -296,8 +296,6 @@ const addChildComponent = store => (componentToAdd, presetName) => { const component = getComponentDefinition(state, componentToAdd) - const presetProps = presetName ? component.presets[presetName] : {} - const instanceId = get(backendUiStore).selectedDatabase._id const instanceName = get_capitalised_name(componentToAdd) diff --git a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte index 590cf9c985..13ff584686 100644 --- a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte +++ b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte @@ -32,7 +32,7 @@ let selectedCategory = categories[0] const onComponentChosen = component => { - store.addChildComponent(component._component) + store.addChildComponent(component._component, component.presetProps) toggleTab("Navigate") diff --git a/packages/builder/src/components/userInterface/DesignView.svelte b/packages/builder/src/components/userInterface/DesignView.svelte index 9db0001266..0ff4a1d3e7 100644 --- a/packages/builder/src/components/userInterface/DesignView.svelte +++ b/packages/builder/src/components/userInterface/DesignView.svelte @@ -32,7 +32,7 @@ { value: "active", text: "Active" }, ] - $: propertyGroupNames = Object.keys(panelDefinition) + $: propertyGroupNames = panelDefinition ? Object.keys(panelDefinition) : []
diff --git a/packages/builder/src/components/userInterface/PropertyControl.svelte b/packages/builder/src/components/userInterface/PropertyControl.svelte index b79d01fb32..5706eae802 100644 --- a/packages/builder/src/components/userInterface/PropertyControl.svelte +++ b/packages/builder/src/components/userInterface/PropertyControl.svelte @@ -9,14 +9,15 @@ export let onChange = () => {} function handleChange(key, v) { - if (v.target) { - let val = props.valueKey ? v.target[props.valueKey] : v.target.value - onChange(key, val) - } else if (v.detail) { - onChange(key, v.detail) - } else { - onChange(key, v) + let innerVal = v + if (typeof v === "object") { + if ("detail" in v) { + innerVal = v.detail + } else if ("target" in v) { + innerVal = props.valueKey ? v.target[props.valueKey] : v.target.value + } } + onChange(key, innerVal) } const safeValue = () => { diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js index 73bd9dd9b7..7babad7dc9 100644 --- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js +++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js @@ -4,6 +4,11 @@ import Checkbox from "../common/Checkbox.svelte" import ModelSelect from "components/userInterface/ModelSelect.svelte" import { all } from "./propertyCategories.js" +/* +{ label: "N/A ", value: "N/A" }, +{ label: "Flex", value: "flex" }, +{ label: "Inline Flex", value: "inline-flex" }, +*/ export default { categories: [ @@ -362,35 +367,422 @@ export default { }, { name: "Chart", - _component: "@budibase/standard-components/datachart", description: "Shiny chart", icon: "ri-bar-chart-fill", - properties: { - design: { ...all }, - settings: [ - { label: "Table", key: "model", control: ModelSelect }, - { - label: "Chart Type", - key: "type", - control: OptionSelect, - options: [ - "column2d", - "column3d", - "line", - "area2d", - "bar2d", - "bar3d", - "pie2d", - "pie3d", - "doughnut2d", - "doughnut3d", - "pareto2d", - "pareto3d", + children: [ + { + name: "Donut", + _component: "@budibase/standard-components/donut", + description: "Donut chart", + icon: "ri-donut-chart-line", + presetProps: { + data: [ + { + quantity: 1, + percentage: 50, + name: "glittering", + id: 1, + }, + { + quantity: 1, + percentage: 50, + name: "luminous", + id: 2, + }, ], }, - ], - }, - children: [], + properties: { + settings: [ + { + label: "Fix Highlight Slice", + key: "hasFixedHighlightedSlice", + valueKey: "checked", + control: Checkbox, + }, + { + label: "Hover highlight", + key: "hasLastHoverSliceHighlighted", + valueKey: "checked", + control: Checkbox, + }, + { + label: "Is Animated", + key: "isAnimated", + valueKey: "checked", + control: Checkbox, + }, + { + label: "Colors", + key: "color", + control: OptionSelect, + options: [ + "britecharts", + "blueGreen", + "green", + "grey", + "orange", + "pink", + "purple", + "red", + "teal", + "yellow", + ], + }, + { + label: "Height", + key: "height", + control: Input, + }, + { + label: "Width", + key: "width", + control: Input, + }, + { + label: "External Radius", + key: "externalRadius", + control: Input, + }, + { + label: "Internal Radius", + key: "internalRadius", + control: Input, + }, + { + label: "Radius Offset", + key: "radiusHoverOffset ", + control: Input, + }, + { + label: "Show Legend", + key: "useLegend ", + control: Checkbox, + }, + ], + }, + }, + { + name: "Bar", + _component: "@budibase/standard-components/bar", + description: "Bar chart", + icon: "ri-bar-chart-fill", + presetProps: { + data: [ + { + value: 1, + name: "glittering", + }, + { + value: 1, + name: "luminous", + }, + ], + }, + properties: { + settings: [ + { + label: "Y Axis Label", + key: "yAxisLabel", + control: Input, + }, + { + label: "X Axis Label", + key: "xAxisLabel", + control: Input, + }, + { + label: "Bar Padding", + key: "betweenBarsPadding", + control: Input, + }, + { + label: "Colors", + key: "color", + control: OptionSelect, + options: [ + { label: "Normal", value: "britecharts" }, + { label: "Blue Green", value: "blueGreen" }, + { label: "Green", value: "green" }, + { label: "Grey", value: "grey" }, + { label: "Orange", value: "orange" }, + { label: "Pink", value: "pink" }, + { label: "Purple", value: "purple" }, + { label: "Red", value: "red" }, + { label: "Teal", value: "teal" }, + { label: "Yellow", value: "yellow" }, + ], + }, + { + label: "Gradients", + key: "gradient", + control: OptionSelect, + options: [ + { value: "", label: "None" }, + { value: "bluePurple", label: "Blue Purple" }, + { value: "greenBlue", label: "Green Blue" }, + { value: "orangePink", label: "Orange Pink" }, + ], + }, + { + label: "Enable Labels", + key: "enableLabels", + control: Checkbox, + valueKey: "checked", + }, + { + label: "Highlight Single Bar", + key: "hasSingleBarHighlight", + control: Checkbox, + valueKey: "checked", + }, + { + label: "Width", + key: "width", + control: Input, + }, + { + label: "Height", + key: "height", + control: Input, + }, + { + label: "Animate", + key: "isAnimate", + control: Checkbox, + valueKey: "checked", + }, + { + label: "Horizontal", + key: "isHorizontal", + control: Checkbox, + valueKey: "checked", + }, + { + label: "Label Offset", + key: "labelOffset", + control: Input, + }, + { + label: "Label Number Format", + key: "labelsNumberFormat", + control: Input, + }, + { + label: "Label Size", + key: "labelSize", + control: Input, + }, + { + label: "Locale", + key: "locale", + control: Input, + }, + { + label: "Name Label", + key: "nameLabel", + control: Input, + }, + { + label: "Number Format", + key: "numberFormat", + control: Input, + }, + { + label: "Use Legend", + key: "useLegend", + control: Checkbox, + }, + ], + }, + }, + { + name: "Line", + _component: "@budibase/standard-components/line", + description: "Line chart", + icon: "ri-bar-chart-fill", + presetProps: { + data: { + data: [ + { + topicName: "San Francisco", + name: 1, + date: "2020-01-16", + value: 1, + }, + { + topicName: "San Fran", + name: 2, + date: "2020-01-17", + value: 2, + }, + { + topicName: "LA", + name: 3, + date: "2020-01-18", + value: 3, + }, + { + topicName: "Toronto", + name: 4, + date: "2020-01-19", + value: 7, + }, + { + topicName: "Van", + name: 4, + date: "2020-01-20", + value: 12, + }, + { + topicName: "Dundee", + name: 4, + date: "2020-01-21", + value: 16, + }, + { + topicName: "Dublin", + name: 4, + date: "2020-01-22", + value: 31, + }, + ], + }, + aspectRatio: 0.5, + grid: "horizontal", + dateLabel: "fullDate", + shouldShowAllDataPoints: true, + }, + properties: { + settings: [ + { + label: "X Axis Combo", + key: "axisTimeCombinations", + control: Input, + }, + { + label: "X Axis Combo", + key: "axisTimeCombinations", + control: Input, + }, + { + label: "Colors", + key: "color", + control: OptionSelect, + options: [ + "britecharts", + "blueGreen", + "green", + "grey", + "orange", + "pink", + "purple", + "red", + "teal", + "yellow", + ], + }, + { + label: "Grid", + key: "grid", + control: OptionSelect, + options: ["vertical", "horizontal", "full"], + }, + { + label: "Aspect Ratio", + key: "aspectRatio", + control: Input, + }, + { + label: "Date Label", + key: "dateLabel", + control: Input, + }, + { + label: "Width", + key: "width", + control: Input, + }, + { + label: "Height", + key: "height", + control: Input, + }, + { + label: "Is Animated", + key: "isAnimated", + control: Checkbox, + valueKey: "checked", + }, + { + label: "Line Curve", + key: "lineCurve", + control: OptionSelect, + options: [ + "linear", + "basis", + "natural", + "monotoneX", + "monotoneY", + "step", + "stepAfter", + "stepBefore", + "cardinal", + "catmullRom", + ], + }, + { + label: "Locale", + key: "locale", + control: Input, + }, + { + label: "Topic Label", + key: "topicLabel", + control: Input, + }, + { + label: "Value Label", + key: "valueLabel", + control: Input, + }, + { + label: "X Axis Label", + key: "xAxisLabel", + control: Input, + }, + { + label: "X Axis Value Type", + key: "xAxisValueType", + control: OptionSelect, + options: ["date", "number"], + }, + { + label: "X Axis Scale", + key: "xAxisScale", + control: OptionSelect, + options: ["linear", "logarithmic"], + }, + { + label: "X Axis Format", + key: "xAxisFormat", + control: OptionSelect, + options: [ + "day-month", + "minute-hour", + "hour-daymonth", + "month-year", + "custom", + ], + }, + { + label: "X Axis Custom Format", + key: "xAxisCustomFormat", + control: Input, + }, + ], + }, + }, + ], }, { name: "Data List", @@ -412,7 +804,14 @@ export default { design: { ...all }, settings: [{ label: "Table", key: "model", control: ModelSelect }], }, - children: [], + children: [ + { + _component: "@budibase/standard-components/heading", + name: "Headline", + description: "A component for displaying heading text", + icon: "ri-heading", + }, + ], }, { name: "Record Detail", diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json index ce205cf92c..b79873e3a6 100644 --- a/packages/standard-components/components.json +++ b/packages/standard-components/components.json @@ -252,6 +252,71 @@ "model": "models" } }, + "donut": { + "description": "Donut Chart", + "data": true, + "props": { + "color": "string", + "height": "number", + "width": "number", + "hasFixedHighlightedSlice": "bool", + "hasLastHoverSliceHighlighted": "bool", + "isAnimated": "bool", + "externalRadius": "number", + "internalRadius": "number", + "radiusHoverOffset": "number", + "useLegend": "bool" + } + }, + "bar": { + "description": "Bar Chart", + "data": true, + "props": { + "betweenBarsPadding": "number", + "gradient": "string", + "color": "string", + "enableLabels": "bool", + "hasSingleBarHighlight": "bool", + "height": "number", + "width": "number", + "isAnimated": "bool", + "isHorizontal": "bool", + "labelOffset": "number", + "labelNumberFormat": "number", + "labelSize": "number", + "locale": "string", + "nameLabel": "string", + "numberLabel": "string", + "xAxisLabel": "string", + "yAxisLabel": "string", + "useLegend": "bool" + } + }, + "line": { + "description": "Line Chart", + "data": true, + "props": { + "width": "number", + "height": "number", + "axisTimeCombinations": "string", + "color": "string", + "grid": "string", + "aspectRatio": "number", + "dateLabel": "string", + "isAnimated": "bool", + "lineCurve": "string", + "locale": "string", + "numberFormat": "string", + "shouldShowAllDataPoints": "bool", + "topicLabel": "string", + "valueLabel": "string", + "xAxisLabel": "string", + "xAxisValueType": "string", + "xAxisScale": "string", + "xAxisFormat": "string", + "xAxisCustomFormat": "string" + } + }, "datachart": { "description": "shiny chart", "data": true, diff --git a/packages/standard-components/package.json b/packages/standard-components/package.json index f42f4a73ad..63aa1ddd59 100644 --- a/packages/standard-components/package.json +++ b/packages/standard-components/package.json @@ -38,6 +38,8 @@ "gitHead": "b1f4f90927d9e494e513220ef060af28d2d42455", "dependencies": { "@beyonk/svelte-googlemaps": "^2.2.0", + "britecharts": "^2.16.0", + "d3-selection": "^1.4.1", "fusioncharts": "^3.15.1-sr.1", "svelte-fusioncharts": "^1.0.0" } diff --git a/packages/standard-components/src/Chart/Bar.svelte b/packages/standard-components/src/Chart/Bar.svelte index e69de29bb2..ef16a7f66c 100644 --- a/packages/standard-components/src/Chart/Bar.svelte +++ b/packages/standard-components/src/Chart/Bar.svelte @@ -0,0 +1,67 @@ + + + diff --git a/packages/standard-components/src/Chart/Chart.svelte b/packages/standard-components/src/Chart/Chart.svelte index e0508baffb..3f1634719a 100644 --- a/packages/standard-components/src/Chart/Chart.svelte +++ b/packages/standard-components/src/Chart/Chart.svelte @@ -11,9 +11,16 @@ export const colorGradients = britecharts ? britecharts.colors.colorGradients : null + + export const getColorSchema = color => + color ? colorSchemas[color] : colorSchemas["britecharts"] + + export const getChartGradient = gradient => + gradient ? colorGradients[gradient] : null
diff --git a/packages/standard-components/src/Chart/Donut.svelte b/packages/standard-components/src/Chart/Donut.svelte index 5adb97a944..ba650bdc5c 100644 --- a/packages/standard-components/src/Chart/Donut.svelte +++ b/packages/standard-components/src/Chart/Donut.svelte @@ -1,10 +1,10 @@ - + diff --git a/packages/standard-components/src/Chart/Line.svelte b/packages/standard-components/src/Chart/Line.svelte index e69de29bb2..0d20360a95 100644 --- a/packages/standard-components/src/Chart/Line.svelte +++ b/packages/standard-components/src/Chart/Line.svelte @@ -0,0 +1,82 @@ + + + + + diff --git a/packages/standard-components/src/Chart/index.js b/packages/standard-components/src/Chart/index.js new file mode 100644 index 0000000000..e51ae93c8f --- /dev/null +++ b/packages/standard-components/src/Chart/index.js @@ -0,0 +1,3 @@ +export { default as donut } from "./Donut.svelte" +export { default as bar } from "./Bar.svelte" +export { default as line } from "./Line.svelte" diff --git a/packages/standard-components/src/Chart/index.svelte b/packages/standard-components/src/Chart/index.svelte deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/packages/standard-components/src/index.js b/packages/standard-components/src/index.js index a0c6ee025d..5fefbac5c7 100644 --- a/packages/standard-components/src/index.js +++ b/packages/standard-components/src/index.js @@ -24,3 +24,4 @@ export { default as datasearch } from "./DataSearch.svelte" export { default as datamap } from "./DataMap.svelte" export { default as embed } from "./Embed.svelte" export { default as recorddetail } from "./RecordDetail.svelte" +export * from "./Chart" From 9eb9e8dcccb5d859b192142e574c1d968aa620b5 Mon Sep 17 00:00:00 2001 From: cmack Date: Sun, 26 Jul 2020 11:55:55 +0100 Subject: [PATCH 08/31] Checkbox component --- .../src/components/common/Checkbox.svelte | 109 +++++++++++++++++- 1 file changed, 104 insertions(+), 5 deletions(-) diff --git a/packages/builder/src/components/common/Checkbox.svelte b/packages/builder/src/components/common/Checkbox.svelte index 37eb385d79..fe3f5756eb 100644 --- a/packages/builder/src/components/common/Checkbox.svelte +++ b/packages/builder/src/components/common/Checkbox.svelte @@ -1,13 +1,112 @@ -{label} - + +