diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js index b474aea038..e3e934bb28 100644 --- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js +++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js @@ -306,7 +306,7 @@ export default { label: "destinationUrl", key: "destinationUrl", control: Input, - placeholder: "/table/{{context._id}}", + placeholder: "/table/_id", }, ], }, @@ -555,102 +555,463 @@ export default { ], }, { - name: "Donut Chart", - _component: "@budibase/standard-components/donut", - description: "Donut chart", - icon: "ri-pie-chart-line", - properties: { - settings: [ - { - label: "Table", - key: "model", - control: ModelSelect, - }, - { - label: "Animate Chart", - key: "isAnimated", - valueKey: "checked", - control: Checkbox, - }, - { - label: "Hover Highlight", - key: "hasHoverAnimation", - valueKey: "checked", - control: Checkbox, - }, - { - label: "Keep Last Hover", - key: "hasLastHoverSliceHighlighted", - valueKey: "checked", - control: Checkbox, - }, - { - label: "Colors", - key: "color", - control: OptionSelect, - options: [ - "britecharts", - "blueGreen", - "green", - "grey", - "orange", - "pink", - "purple", - "red", - "teal", - "yellow", + name: "Chart", + description: "Shiny chart", + icon: "ri-bar-chart-fill", + children: [ + { + name: "Donut", + _component: "@budibase/standard-components/donut", + description: "Donut chart", + icon: "ri-pie-chart-fill", + properties: { + settings: [ + { + label: "Table", + key: "model", + control: ModelSelect, + }, + { + label: "Animate Chart", + key: "isAnimated", + valueKey: "checked", + control: Checkbox, + }, + { + label: "Hover Highlight", + key: "hasHoverAnimation", + valueKey: "checked", + control: Checkbox, + }, + { + label: "Keep Last Hover", + key: "hasLastHoverSliceHighlighted", + valueKey: "checked", + control: Checkbox, + }, + { + label: "Colors", + key: "color", + control: OptionSelect, + options: [ + "britecharts", + "blueGreen", + "green", + "grey", + "orange", + "pink", + "purple", + "red", + "teal", + "yellow", + ], + }, + { + label: "Name Field", + key: "nameKey", + control: Input, + }, + { + label: "Value Field", + key: "valueKey", + 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 ", + valueKey: "checked", + control: Checkbox, + }, + { + label: "Horizontal Legend", + key: "horizontalLegend", + valueKey: "checked", + control: Checkbox, + }, + { + label: "Legend Width", + key: "legendWidth", + control: Input, + }, ], }, - { - label: "Name Field", - key: "nameKey", - control: Input, + }, + { + name: "Bar", + _component: "@budibase/standard-components/bar", + description: "Bar chart", + icon: "ri-bar-chart-fill", + properties: { + settings: [ + { + label: "Table", + key: "model", + control: ModelSelect, + }, + { + label: "Name Label", + key: "nameLabel", + control: Input, + }, + { + label: "Value Label", + key: "valueLabel", + control: Input, + }, + { + label: "Y Axis Label", + key: "yAxisLabel", + control: Input, + }, + { + label: "X Axis Label", + key: "xAxisLabel", + control: Input, + }, + { + label: "X Axis Label Offset", + key: "xAxisLabelOffset", + control: Input, + }, + { + label: "Y Axis Label Offset", + key: "yAxisLabelOffset", + control: Input, + }, + { + label: "Enable Labels", + key: "enableLabels", + control: Checkbox, + valueKey: "checked", + }, + { + 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: "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 Number Format", + key: "labelsNumberFormat", + control: Input, + }, + ], }, - { - label: "Value Field", - key: "valueKey", - control: Input, + }, + { + name: "Groupedbar", + _component: "@budibase/standard-components/groupedbar", + description: "Groupedbar chart", + icon: "ri-bar-chart-grouped-fill", + properties: { + settings: [ + { + label: "Table", + key: "model", + control: ModelSelect, + }, + { + label: "Color", + 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: "Aspect Ratio", + key: "aspectRatio", + control: Input, + }, + { + label: "Grid", + key: "grid", + control: OptionSelect, + options: ["vertical", "horizontal", "full"], + }, + { + label: "Group Label", + key: "groupLabel", + control: Input, + }, + { + label: "Name Label", + key: "nameLabel", + control: Input, + }, + { + label: "Value Label", + key: "valueLabel", + control: Input, + }, + { + label: "Y Ticks", + key: "yTicks", + control: Input, + }, + { + label: "Y Tick Text Offset", + key: "yTickTextOffset", + control: Input, + }, + { + label: "Is Animated", + key: "isAnimated", + valueKey: "checked", + control: Checkbox, + }, + { + label: "Is Horizontal", + key: "isHorizontal", + valueKey: "checked", + control: Checkbox, + }, + { + label: "Tooltip Title", + key: "tooltipTitle", + control: Input, + }, + ], }, - { - label: "External Radius", - key: "externalRadius", - control: Input, + }, + { + name: "Line", + _component: "@budibase/standard-components/line", + description: "Line chart", + icon: "ri-line-chart-fill", + properties: { + settings: [ + { + label: "Table", + key: "model", + control: ModelSelect, + }, + { + label: "Colors", + key: "color", + control: OptionSelect, + options: [ + "britecharts", + "blueGreen", + "green", + "grey", + "orange", + "pink", + "purple", + "red", + "teal", + "yellow", + ], + }, + { + label: "Gradients", + key: "lineGradient", + control: OptionSelect, + options: [ + { value: "", label: "None" }, + { value: "bluePurple", label: "Blue Purple" }, + { value: "greenBlue", label: "Green Blue" }, + { value: "orangePink", label: "Orange Pink" }, + ], + }, + { + label: "Line Curve", + key: "lineCurve", + control: OptionSelect, + options: [ + "linear", + "basis", + "natural", + "monotoneX", + "monotoneY", + "step", + "stepAfter", + "stepBefore", + "cardinal", + "catmullRom", + ], + }, + { + label: "X Axis Value Type", + key: "xAxisValueType", + control: OptionSelect, + options: ["date", "number"], + }, + { + label: "Grid", + key: "grid", + control: OptionSelect, + options: ["vertical", "horizontal", "full"], + }, + { + label: "Date Label", + key: "dateLabel", + 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: "Y Axis Label", + key: "yAxisLabel", + control: Input, + }, + { + label: "Show All Datapoints", + key: "shouldShowAllDataPoints", + valueKey: "checked", + control: Checkbox, + }, + { + label: "Width", + key: "width", + control: Input, + }, + { + label: "Height", + key: "height", + control: Input, + }, + { + label: "Is Animated", + key: "isAnimated", + control: Checkbox, + valueKey: "checked", + }, + { + label: "Locale", + key: "locale", + control: OptionSelect, + options: ["en-GB", "en-US"], + }, + { + label: "X Axis Value Type", + key: "xAxisValueType", + control: OptionSelect, + options: ["date", "numeric"], + }, + { + 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, + }, + { + label: "Tooltip Title", + key: "tooltipTitle", + control: Input, + }, + ], }, - { - label: "Internal Radius", - key: "internalRadius", - control: Input, - }, - { - label: "Radius Offset", - key: "radiusHoverOffset ", - control: Input, - }, - { - label: "Show Legend", - key: "useLegend ", - valueKey: "checked", - control: Checkbox, - }, - { - label: "Horizontal Legend", - key: "horizontalLegend", - valueKey: "checked", - control: Checkbox, - }, - { - label: "Legend Width", - key: "legendWidth", - control: Input, - }, - { - label: "Legend Height", - key: "legendHeight", - control: Input, - }, - ], - }, - children: [], + }, + ], }, // { // name: "Data List", diff --git a/packages/builder/src/index.html b/packages/builder/src/index.html index afc3bcb4c2..866064f717 100644 --- a/packages/builder/src/index.html +++ b/packages/builder/src/index.html @@ -8,7 +8,7 @@