ufkc7e3d
/
budibase
forked from tsai/budibase
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Add pie and donut charts

gh-pages
Andrew Kingston 6 years ago
parent
3e06d393e1
commit
3d84b831e9
6 changed files with 267 additions and 407 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 343
      packages/builder/src/components/userInterface/temporaryPanelStructure.js
  2. 254
      packages/standard-components/components.json
  3. 11
      packages/standard-components/src/Chart/ApexOptionsBuilder.js
  4. 5
      packages/standard-components/src/Chart/DonutChart.svelte
  5. 59
      packages/standard-components/src/Chart/PieChart.svelte
  6. 2
      packages/standard-components/src/Chart/index.js

343
packages/builder/src/components/userInterface/temporaryPanelStructure.js
View File

@ -423,105 +423,11 @@ export default {
icon: "ri-bar-chart-2-line",
isCategory: true,
children: [
// {
// name: "Donut",
// _component: "@budibase/standard-components/donut",
// description: "Donut chart",
// icon: "ri-pie-chart-fill",
// properties: {
// settings: [
// {
// label: "Data",
// key: "datasource",
// control: TableViewSelect,
// },
// {
// label: "Name Field",
// key: "nameKey",
// dependsOn: "datasource",
// control: TableViewFieldSelect,
// },
// {
// label: "Value Field",
// key: "valueKey",
// dependsOn: "datasource",
// control: TableViewFieldSelect,
// },
// {
// 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: "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,
// },
// ],
// },
// },
{
name: "Bar",
name: "Bar Chart",
_component: "@budibase/standard-components/bar",
description: "Bar chart",
icon: "ri-bar-chart-fill",
icon: "ri-bar-chart-line",
properties: {
settings: [
{
@ -610,111 +516,8 @@ export default {
],
},
},
// {
// name: "Grouped Bar",
// _component: "@budibase/standard-components/groupedbar",
// description: "Groupedbar chart",
// icon: "ri-bar-chart-grouped-fill",
// properties: {
// settings: [
// {
// label: "Data",
// key: "datasource",
// control: TableViewSelect,
// },
// {
// label: "Name Label",
// key: "nameLabel",
// dependsOn: "datasource",
// control: TableViewFieldSelect,
// },
// {
// label: "Group Label",
// key: "groupLabel",
// dependsOn: "datasource",
// control: TableViewFieldSelect,
// },
// {
// label: "Value Label",
// key: "valueLabel",
// dependsOn: "datasource",
// control: TableViewFieldSelect,
// },
// {
// 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: "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,
// },
// ],
// },
// },
{
name: "Line",
name: "Line Chart",
_component: "@budibase/standard-components/line",
description: "Line chart",
icon: "ri-line-chart-line",
@ -807,6 +610,146 @@ export default {
],
},
},
{
name: "Pie Chart",
_component: "@budibase/standard-components/pie",
description: "Pie chart",
icon: "ri-pie-chart-line",
properties: {
settings: [
{
label: "Title",
key: "title",
control: Input,
},
{
label: "Data",
key: "datasource",
control: TableViewSelect,
},
{
label: "Label Col.",
key: "labelColumn",
dependsOn: "datasource",
control: TableViewFieldSelect,
},
{
label: "Data Col.",
key: "valueColumn",
dependsOn: "datasource",
control: TableViewFieldSelect,
},
// {
// label: "Color",
// key: "color",
// control: Colorpicker,
// defaultValue: "#4285f4",
// },
{
label: "Width",
key: "width",
control: Input,
},
{
label: "Height",
key: "height",
control: Input,
defaultValue: "200",
},
{
label: "Data Labels",
key: "dataLabels",
control: Checkbox,
valueKey: "checked",
defaultValue: false,
},
{
label: "Animate",
key: "animate",
control: Checkbox,
valueKey: "checked",
defaultValue: true,
},
{
label: "Legend",
key: "legend",
control: Checkbox,
valueKey: "checked",
defaultValue: true,
},
],
},
},
{
name: "Donut Chart",
_component: "@budibase/standard-components/donut",
description: "Donut chart",
icon: "ri-donut-chart-line",
properties: {
settings: [
{
label: "Title",
key: "title",
control: Input,
},
{
label: "Data",
key: "datasource",
control: TableViewSelect,
},
{
label: "Label Col.",
key: "labelColumn",
dependsOn: "datasource",
control: TableViewFieldSelect,
},
{
label: "Data Col.",
key: "valueColumn",
dependsOn: "datasource",
control: TableViewFieldSelect,
},
// {
// label: "Color",
// key: "color",
// control: Colorpicker,
// defaultValue: "#4285f4",
// },
{
label: "Width",
key: "width",
control: Input,
},
{
label: "Height",
key: "height",
control: Input,
defaultValue: "200",
},
{
label: "Data Labels",
key: "dataLabels",
control: Checkbox,
valueKey: "checked",
defaultValue: false,
},
{
label: "Animate",
key: "animate",
control: Checkbox,
valueKey: "checked",
defaultValue: true,
},
{
label: "Legend",
key: "legend",
control: Checkbox,
valueKey: "checked",
defaultValue: true,
},
],
},
},
],
},
{

254
packages/standard-components/components.json
View File

@ -396,155 +396,6 @@
}
}
},
"datamap": {
"description": "shiny chart",
"data": true,
"props": {
"table": "tables"
}
},
"donut": {
"description": "Donut Chart",
"data": true,
"props": {
"datasource": "string",
"data": "string",
"color": "string",
"height": "number",
"width": "number",
"hasFixedHighlightedSlice": "bool",
"hasLastHoverSliceHighlighted": "bool",
"hasHoverAnimation": "bool",
"numberFormat": "string",
"nameKey": "string",
"valueKey": "string",
"isAnimated": "bool",
"externalRadius": "number",
"internalRadius": "number",
"radiusHoverOffset": "number",
"percentageFormat": "string",
"useLegend": "bool",
"legendWidth": "number",
"legendHeight": "number"
}
},
"sparkline": {
"description": "Sparkline Chart",
"data": true,
"props": {
"table": "string",
"areaGradient": "string",
"height": "number",
"width": "number",
"dateLabel": "string",
"duration": "string",
"isAnimated": "bool",
"lineGradient": "string",
"titleText": "string",
"valueLabel": "string"
}
},
"stackedbar": {
"description": "Stacked Bar Chart",
"data": true,
"props": {
"datasource": "tables",
"color": "string",
"height": "number",
"width": "number",
"margin": "string",
"aspectRatio": "string",
"betweenBarsPadding": "number",
"grid": "string",
"hasPercentage": "bool",
"hasReversedStacks": "bool",
"isAnimated": "bool",
"isHorizontal": "bool",
"locale": "string",
"nameLabel": "string",
"percentageAxisToMaxRatio": "number",
"stackLabel": "string",
"valueLabel": "string",
"valueLabelFormat": "string",
"xTicks": "number",
"yTicks": "number",
"yAxisLabel": "string",
"yAxisLabelOffset": "number",
"useLegend": "bool"
}
},
"stackarea": {
"description": "Step Chart",
"data": true,
"props": {
"table": "string",
"color": "string",
"height": "number",
"width": "number",
"margin": "string",
"xAxisLabel": "string",
"xAxisLabelOffset": "string",
"yAxisLabel": "string",
"yAxisLabelOffset": "string",
"areaCurve": "number",
"areaOpacity": "number",
"aspectRatio": "number",
"dateLabel": "string",
"grid": "string",
"isAnimated": "bool",
"keyLabel": "string",
"locale": "string",
"tooltipThreshold": "number",
"topicsOrder": "string",
"valueLabel": "string",
"xAxisCustomFormat": "string",
"xAxisFormat": "string",
"xAxisScale": "string",
"xAxisValueType": "string",
"yTicks": "number",
"xTicks": "number",
"yAxisBaseline": "string",
"useLegend": "bool"
}
},
"step": {
"description": "Step Chart",
"data": true,
"props": {
"table": "string",
"height": "number",
"width": "number",
"margin": "string",
"xAxisLabel": "string",
"xAxisLabelOffset": "string",
"yAxisLabel": "string",
"yAxisLabelOffset": "string",
"yTicks": "string"
}
},
"scatterplot": {
"description": "Scatterplot Chart",
"data": true,
"props": {
"table": "string",
"color": "string",
"height": "number",
"width": "number",
"aspectRatio": "string",
"circleOpacity": "string",
"grid": "string",
"hasCrossHairs": "bool",
"isAnimated": "bool",
"maxCircleArea": "number",
"xAxisLabel": "string",
"xAxisLabelOffset": "string",
"xTicks": "string",
"yAxisFormat": "string",
"yAxisLabel": "string",
"yAxisLabelOffset": "string",
"yTicks": "string"
}
},
"bar": {
"description": "Bar Chart",
"data": true,
@ -614,74 +465,63 @@
"type": "bool",
"default": true
},
"legend": {
"type": "bool",
"default": false
}
"legend": "bool"
}
},
"brush": {
"description": "brush chart",
"pie": {
"description": "Pie Chart",
"data": true,
"props": {
"table": "string",
"gradient": "string",
"height": "number",
"width": "number",
"margin": "string",
"dateRange": "string",
"locale": "string",
"roundingTimeInterval": "string",
"xAxisFormat": "string",
"xTicks": "number",
"xAxisCustomFormat": "string"
}
},
"heatmap": {
"description": "Heatmap chart",
"data": true,
"props": {
"table": "string",
"color": "string",
"height": "number",
"title": "string",
"datasource": "tables",
"labelColumn": "string",
"valueColumn": "string",
"color": {
"type": "string",
"default": "#4285f4"
},
"height": {
"type": "number",
"default": "200"
},
"width": "number",
"useLegend": "bool",
"yAxisLabel": "string",
"boxSize": "number"
"dataLabels": "bool",
"animate": {
"type": "bool",
"default": true
},
"legend": {
"type": "bool",
"default": true
}
}
},
"groupedbar": {
"description": "Groupedbar chart",
"donut": {
"description": "Donut Chart",
"data": true,
"props": {
"title": "string",
"datasource": "tables",
"nameLabel": "string",
"valueLabel": "string",
"color": "string",
"height": "string",
"width": "string",
"margin": "string",
"grid": "string",
"groupLabel": "string",
"isAnimated": "bool",
"isHorizontal": "bool",
"yTicks": "string",
"useLegend": "bool",
"tooltipTitle": "string"
}
},
"bullet": {
"description": "Bullet chart",
"data": true,
"props": {
"table": "string",
"color": "string",
"customSubtitle": "string",
"customTitle": "string",
"numberFormat": "string",
"paddingBetweenAxisAndChart": "number",
"height": "number",
"width": "number"
"labelColumn": "string",
"valueColumn": "string",
"color": {
"type": "string",
"default": "#4285f4"
},
"height": {
"type": "number",
"default": "200"
},
"width": "number",
"dataLabels": "bool",
"animate": {
"type": "bool",
"default": true
},
"legend": {
"type": "bool",
"default": true
}
}
},
"datepicker": {

11
packages/standard-components/src/Chart/ApexOptionsBuilder.js
View File

@ -13,6 +13,9 @@ export class ApexOptionsBuilder {
toolbar: {
show: false,
},
zoom: {
enabled: false,
},
},
}
@ -105,7 +108,15 @@ export class ApexOptionsBuilder {
return this.setOption(["legend", "show"], legend)
}
legendPosition(position) {
return this.setOption(["legend", "position"], position)
}
stacked(stacked) {
return this.setOption(["chart", "stacked"], stacked)
}
labels(labels) {
return this.setOption(["labels"], labels)
}
}

5
packages/standard-components/src/Chart/DonutChart.svelte
View File

@ -0,0 +1,5 @@
<script>
import PieChart from "./PieChart.svelte"
</script>
<PieChart {...$$props} donut />

59
packages/standard-components/src/Chart/PieChart.svelte
View File

@ -0,0 +1,59 @@
<script>
import { onMount } from "svelte"
import { chart } from "svelte-apexcharts"
import fetchData from "../fetchData"
import { isEmpty, sortBy } from "lodash/fp"
import { ApexOptionsBuilder } from "./ApexOptionsBuilder"
export let title
export let datasource
export let labelColumn
export let valueColumn
export let height
export let width
export let color
export let dataLabels
export let animate
export let legend
export let donut
let data
$: options = getChartOptions(data)
// Fetch data on mount
onMount(async () => {
if (!isEmpty(datasource)) {
const result = (await fetchData(datasource)).slice(0, 20)
data = sortBy(row => row[labelColumn])(result)
}
})
function getChartOptions(rows = []) {
// Initialise default chart
let builder = new ApexOptionsBuilder()
.title(title)
.type(donut ? "donut" : "pie")
.width(width)
.height(height)
.dataLabels(dataLabels)
.animate(animate)
.legend(legend)
.legendPosition("right")
// Add data if valid datasource
if (rows && rows.length) {
if (!isEmpty(valueColumn) && rows[0][valueColumn] != null) {
const series = rows.map(row => parseFloat(row[valueColumn]))
builder = builder.series(series)
}
if (!isEmpty(rows[0][labelColumn])) {
builder = builder.labels(rows.map(row => row[labelColumn]))
}
}
// Build chart options
return builder.getOptions()
}
</script>
<div use:chart={options} />

2
packages/standard-components/src/Chart/index.js
View File

@ -1,2 +1,4 @@
export { default as bar } from "./BarChart.svelte"
export { default as line } from "./LineChart.svelte"
export { default as pie } from "./PieChart.svelte"
export { default as donut } from "./DonutChart.svelte"

Write Preview
Loading…
Cancel
Save