From 49debc69c3481cb20c913b47f5e04054c067ba43 Mon Sep 17 00:00:00 2001 From: cmack Date: Fri, 7 Aug 2020 12:57:07 +0100 Subject: [PATCH] Donut chart for demo --- .../userInterface/temporaryPanelStructure.js | 1424 +---------------- packages/standard-components/components.json | 1 - .../src/Chart/Donut.svelte | 36 +- 3 files changed, 94 insertions(+), 1367 deletions(-) diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js index 8eaf5fec67..b844271b49 100644 --- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js +++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js @@ -430,1365 +430,93 @@ export default { ], }, { - name: "Data Chart", - _component: "@budibase/standard-components/datachart", - description: "Shiny chart", - icon: "ri-bar-chart-line", + name: "Donut Chart", + _component: "@budibase/standard-components/donut", + description: "Donut chart", + icon: "ri-pie-chart-fill", properties: { - design: { ...all }, settings: [ - { label: "Table", key: "model", control: ModelSelect }, { - label: "Chart Type", - key: "type", + 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: [ - "column2d", - "column3d", - "line", - "area2d", - "bar2d", - "bar3d", - "pie2d", - "pie3d", - "doughnut2d", - "doughnut3d", - "pareto2d", - "pareto3d", + "britecharts", + "blueGreen", + "green", + "grey", + "orange", + "pink", + "purple", + "red", + "teal", + "yellow", ], }, + { + 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: "Legend Height", + key: "legendHeight", + control: Input, + }, ], }, children: [], }, - { - name: "Chart", - description: "Shiny chart", - icon: "ri-bar-chart-fill", - 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, - }, - ], - }, - properties: { - design: { - ...all, - }, - settings: [ - { - label: "Table", - key: "model", - control: ModelSelect, - }, - { - label: "Animate Chart", - key: "isAnimated", - valueKey: "checked", - control: Checkbox, - }, - { - label: "Keep Last Hover", - key: "hasLastHoverSliceHighlighted", - valueKey: "checked", - control: Checkbox, - }, - { - label: "Hover Highlight", - key: "hasHoverAnimation", - valueKey: "checked", - control: Checkbox, - }, - { - label: "Colors", - key: "color", - control: OptionSelect, - options: [ - "britecharts", - "blueGreen", - "green", - "grey", - "orange", - "pink", - "purple", - "red", - "teal", - "yellow", - ], - }, - { - 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: "Legend Height", - key: "legendHeight", - control: Input, - }, - ], - }, - }, - { - name: "Heatmap", - _component: "@budibase/standard-components/heatmap", - description: "Heatmap chart", - icon: "ri-bar-chart-fill", - presetProps: { - data: [ - { - day: 0, - hour: 0, - value: 7, - }, - { - day: 0, - hour: 1, - value: 10, - }, - ], - }, - 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: "Show Legend", - key: "useLegend ", - valueKey: "checked", - control: Checkbox, - }, - { - label: "Height", - key: "height", - control: Input, - }, - { - label: "Width", - key: "width", - control: Input, - }, - { - label: "Boxsize", - key: "boxSize", - control: Input, - }, - ], - }, - }, - { - name: "Scatterplot", - _component: "@budibase/standard-components/scatterplot", - description: "Scatterplot chart", - icon: "ri-bar-chart-fill", - presetProps: { - data: [ - { - name: "topic", - x: 123, - y: 24, - }, - { - name: "topic1", - x: 53, - y: 31, - }, - { - name: "topic2", - x: 631, - y: 321, - }, - { - name: "topic1", - x: 231, - y: 111, - }, - ], - }, - properties: { - settings: [ - { - label: "Table", - key: "model", - control: ModelSelect, - }, - { - 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: "height", - key: "height", - control: Input, - }, - { - label: "Width", - key: "width", - control: Input, - }, - { - label: "Aspect Ratio", - key: "aspectRatio", - control: Input, - }, - { - label: "Circle Opacity", - key: "circleOpacity", - control: Input, - }, - { - label: "Grid", - key: "grid", - control: OptionSelect, - options: ["vertical", "horizontal", "full"], - }, - { - label: "Has Crosshairs", - key: "hasCrossHairs", - valueKey: "checked", - control: Checkbox, - }, - { - label: "Is Animated", - key: "isAnimated", - valueKey: "checked", - control: Checkbox, - }, - { - label: "Max Circle Area", - key: "maxCircleArea", - control: Input, - }, - { - label: "X Axis Label", - key: "xAxisLabel", - control: Input, - }, - { - label: "X Axis Label Offset", - key: "xAxisLabelOffset", - control: Input, - }, - { - label: "X Axis", - key: "xTicks", - control: Input, - }, - { - label: "Y Axis Format", - key: "yAxisFormat", - control: Input, - }, - { - label: "Y Axis Label", - key: "yAxisLabel", - control: Input, - }, - { - label: "Y Axis Label Offset", - key: "yAxisLabelOffset", - control: Input, - }, - { - label: "Y Ticks", - key: "yTicks", - control: Input, - }, - ], - }, - }, - { - name: "StackedArea", - _component: "@budibase/standard-components/stackedarea", - description: "StackedArea chart", - icon: "ri-bar-chart-fill", - presetProps: { - data: [ - { - date: "2011-01-05T00:00:00Z", - name: "Direct", - value: 0, - }, - ], - }, - 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: "Height", - key: "height", - control: Input, - }, - { - label: "Grid", - key: "grid", - control: OptionSelect, - options: ["vertical", "horizontal", "full"], - }, - { - label: "X Axis Label", - key: "xAxisLabel", - control: Input, - }, - { - label: "X Axis Label Offset", - key: "xAxisLabelOffset", - control: Input, - }, - { - label: "Y Axis", - key: "yAxisLabel", - control: Input, - }, - { - label: "Y Axis Label Offset", - key: "yAxisLabelOffset", - control: Input, - }, - { - label: "Area Curve", - key: "areaCurve", - control: Input, - }, - { - label: "Area Opacity", - key: "areaOpacity", - control: Input, - }, - { - label: "Area Opacity", - key: "areaOpacity", - control: Input, - }, - { - label: "dateLabel", - key: "dateLabel", - control: Input, - }, - { - key: "isAnimated", - label: "Is Animated", - valueKey: "checked", - control: Checkbox, - }, - { - label: "Key Label", - key: "keyLabel", - control: Input, - }, - { - label: "Locale", - key: "locale", - control: Input, - }, - { - label: "Value Label", - key: "valueLabel", - control: Input, - }, - { - label: "Use Legend", - key: "useLegend", - keyValue: "checked", - control: Checkbox, - }, - ], - }, - }, - { - name: "Step", - _component: "@budibase/standard-components/step", - description: "Step chart", - icon: "ri-bar-chart-fill", - presetProps: { - data: [ - { - value: 1, - key: "glittering", - }, - { - value: 2, - key: "luminous", - }, - ], - }, - properties: { - settings: [ - { - label: "Table", - key: "model", - control: ModelSelect, - }, - { - label: "height", - key: "height", - control: Input, - }, - { - label: "Width", - key: "width", - control: Input, - }, - { - label: "Y Axis Label", - key: "yAxisLabel", - control: Input, - }, - { - label: "Y Axis Label Offset", - key: "yAxisLabelOffset", - control: Input, - }, - { - label: "Y Ticks", - key: "yTicks", - control: Input, - }, - { - label: "X Axis Label Offset", - key: "xAxisLabelOffset", - control: Input, - }, - ], - }, - }, - { - name: "Sparkline", - _component: "@budibase/standard-components/sparkline", - description: "Sparkline chart", - icon: "ri-bar-chart-fill", - presetProps: { - data: [ - { - value: 1, - date: "2011-01-06T00:00:00Z", - }, - { - value: 2, - date: "2011-01-07T00:00:00Z", - }, - ], - }, - properties: { - settings: [ - { - label: "Table", - key: "model", - control: ModelSelect, - }, - { - label: "Line Gradient", - key: "lineGradient", - control: OptionSelect, - options: [ - { value: "", label: "None" }, - { value: "bluePurple", label: "Blue Purple" }, - { value: "greenBlue", label: "Green Blue" }, - { value: "orangePink", label: "Orange Pink" }, - ], - }, - { - label: "Area Gradient", - key: "areaGradient", - control: OptionSelect, - options: [ - { value: "", label: "None" }, - { value: "bluePurple", label: "Blue Purple" }, - { value: "greenBlue", label: "Green Blue" }, - { value: "orangePink", label: "Orange Pink" }, - ], - }, - { - key: "height", - label: "Height", - control: Input, - }, - { - key: "width", - label: "Width", - control: Input, - }, - { - key: "dateLabel", - label: "Date Label", - control: Input, - }, - { - key: "isAnimated", - label: "Is Animated", - valueKey: "checked", - control: Checkbox, - }, - { - key: "titleText", - label: "Title Text", - control: Input, - }, - { - key: "valueLabel", - label: "Value Label", - control: Input, - }, - ], - }, - }, - { - 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: "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: "Label Size", - key: "labelSize", - control: Input, - }, - ], - }, - }, - { - name: "Brush", - _component: "@budibase/standard-components/brush", - description: "Brush chart", - icon: "ri-bar-chart-fill", - presetProps: { - data: [ - { - value: 1, - date: "2011-01-06T00:00:00Z", - }, - { - value: 2, - date: "2011-01-07T00:00:00Z", - }, - ], - }, - properties: { - settings: [ - { - label: "Table", - key: "model", - control: ModelSelect, - }, - { - label: "Gradient", - key: "gradient", - control: OptionSelect, - options: [ - { value: "", label: "None" }, - { value: "bluePurple", label: "Blue Purple" }, - { value: "greenBlue", label: "Green Blue" }, - { value: "orangePink", label: "Orange Pink" }, - ], - }, - { - label: "Height", - key: "height", - control: Input, - }, - { - label: "Width", - key: "width", - control: Input, - }, - { - label: "Date Range", - key: "dateRange", - control: Input, - }, - { - label: "Locale", - key: "locale", - control: Input, - }, - { - label: "Time Interval", - key: "roundingTimeInterval", - control: OptionSelect, - options: [ - "timeDay", - "timeMillisecond", - "utcMillisecond", - "timeSecond", - "utcSecond", - "timeMinute", - "utcMinute", - "timeHour", - "utcHour", - "utcDay", - "timeWeek", - "utcWeek", - "timeSunday", - "utcSunday", - "timeMonday", - "utcMonday", - "timeTuesday", - "utcTuesday", - "timeWednesday", - "utcWednesday", - "timeThursday", - "utcThursday", - "timeFriday", - "utcFriday", - "timeSaturday", - "utcSaturday", - "timeMonth", - "utcMonth", - "timeYear", - "utcYear", - ], - }, - { - label: "X Axis Format", - key: "xAxisFormat", - control: OptionSelect, - options: [ - "day-month", - "minute-hour", - "hour-daymonth", - "month-year", - "custom", - ], - }, - { - label: "X Ticks", - key: "xTicks", - control: Input, - }, - ], - }, - }, - { - name: "Groupedbar", - _component: "@budibase/standard-components/groupedbar", - description: "Groupedbar chart", - icon: "ri-bar-chart-fill", - presetProps: { - data: [ - { - name: "2011-01", - group: "Direct", - value: 0, - }, - ], - }, - 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: "Height", - key: "height", - 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: "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, - }, - ], - }, - }, - { - name: "Bullet", - _component: "@budibase/standard-components/bullet", - description: "Bullet chart", - icon: "ri-bar-chart-fill", - presetProps: { - data: { - ranges: [130, 160, 250], - measures: [150, 180], - markers: [175], - }, - }, - 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: "Title", - key: "title", - control: Input, - }, - { - label: "Subtitle", - key: "subtitle", - control: Input, - }, - { - label: "Axis Padding", - key: "paddingBetweenAxisAndChart", - control: Input, - }, - { - label: "Height", - key: "height", - control: Input, - }, - { - label: "Width", - key: "width", - control: Input, - }, - ], - }, - }, - { - name: "Stacked Bar", - _component: "@budibase/standard-components/stackedbar", - description: "Stacked Bar Chart", - icon: "ri-file-list-fill", - presetProps: { - data: [ - { - name: "2011-01", - stack: "Direct", - value: 0, - }, - ], - }, - 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: "Grid", - key: "grid", - control: OptionSelect, - options: ["vertical", "horizontal", "full"], - }, - { - label: "Aspect Ratio", - key: "aspectRatio", - control: Input, - }, - { - label: "Between Bars Padding", - key: "betweenBarsPadding", - control: Input, - }, - { - label: "Max Ratio Percentage", - key: "percentageToMaxRatio", - control: Input, - }, - { - label: "Date Label", - key: "dateLabel", - control: Input, - }, - { - label: "Name Label", - key: "nameLabel", - control: Input, - }, - { - label: "Stack Label", - key: "stackLabel", - control: Input, - }, - { - label: "Width", - key: "width", - control: Input, - }, - { - label: "Height", - key: "height", - control: Input, - }, - { - label: "Locale", - key: "locale", - control: Input, - }, - { - label: "Is Animated", - key: "isAnimated", - control: Checkbox, - valueKey: "checked", - }, - { - label: "Is Horizontal", - key: "isHorizontal", - control: Checkbox, - valueKey: "checked", - }, - { - label: "Has Reversed Stacks", - key: "hasReversedStacks", - control: Checkbox, - valueKey: "checked", - }, - { - label: "Has Percentage", - key: "hasPercentage", - control: Checkbox, - valueKey: "checked", - }, - { - label: "X Ticks", - key: "xTicks", - control: Input, - }, - { - label: "Y Ticks", - key: "yTicks", - control: Input, - }, - { - label: "Y Axis Label", - key: "yTicksLabel", - control: Input, - }, - { - label: "Y Axis Label Offset", - key: "yAxisLabelOffset", - control: Input, - }, - ], - }, - }, - { - 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: "Table", - key: "model", - control: ModelSelect, - }, - { - 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: "X Axis Value Type", - key: "xAxisValueType", - control: OptionSelect, - options: ["date", "number"], - }, - { - 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, - }, - { - label: "X Axis Label", - key: "xAxisLabel", - control: Input, - }, - ], - }, - }, - ], - }, { name: "Data List", _component: "@budibase/standard-components/datalist", diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json index c7a668cc62..c3a3e646fa 100644 --- a/packages/standard-components/components.json +++ b/packages/standard-components/components.json @@ -293,7 +293,6 @@ "radiusHoverOffset": "number", "percentageFormat": "string", "useLegend": "bool", - "horizontalLegend": "bool", "legendWidth": "number", "legendHeight": "number" } diff --git a/packages/standard-components/src/Chart/Donut.svelte b/packages/standard-components/src/Chart/Donut.svelte index 470673e9b6..f97e9c0825 100644 --- a/packages/standard-components/src/Chart/Donut.svelte +++ b/packages/standard-components/src/Chart/Donut.svelte @@ -30,7 +30,7 @@ export let orderingFunction = null - export let data = model ? $store[model] : [] + let data = [] export let color = "britecharts" export let height = 200 export let width = 200 @@ -47,7 +47,7 @@ export let internalRadius = 25 export let isAnimated = true export let radiusHoverOffset = 0 - export let useLegend = true + // export let useLegend = true export let horizontalLegend = false export let legendWidth = null export let legendHeight = null @@ -70,16 +70,17 @@ if (chart) { if (model) { await fetchData() + data = model ? $store[model] : [] } chart.emptyDataConfig({ showEmptySlice: true, - emptySliceColor: "#000000", + emptySliceColor: "#F0F0F0", }) chartContainer = select(`.${chartClass}`) bindChartUIProps() bindChartEvents() - chartContainer.datum(_data).call(chart) + chartContainer.datum(data).call(chart) } }) @@ -134,7 +135,7 @@ if (notNull(orderingFunction)) { chart.orderingFunction(orderingFunction) } - chartContainer.datum(_data).call(chart) + chartContainer.datum(data).call(chart) chartSvg = document.querySelector(`.${chartClass} .britechart`) } @@ -159,25 +160,24 @@ $: if (!width && chartSvg) { width = chartSvg.clientWidth chart.width(width) - chartContainer.datum(_data).call(chart) + debugger + chartContainer.datum(data).call(chart) } - $: _data = model ? $store[model] : data + // $: _data = model ? $store[model] : data $: colorSchema = getColorSchema(color)
- {#if useLegend} - - {/if} +