From d56c801c6f090c924d1546c9ffb770ea33f3d522 Mon Sep 17 00:00:00 2001 From: cmack Date: Sun, 26 Jul 2020 11:54:55 +0100 Subject: [PATCH] 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"