MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

WIP: Groupedbar, Heatmap and Sparkline Charts

This commit is contained in:
cmack 2020-07-30 16:39:56 +01:00
parent f667f05f19
commit a0d9bd9774
7 changed files with 560 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -471,6 +471,143 @@ export default {
],
},
},
{
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: "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: "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: "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",
@ -717,6 +854,100 @@ export default {
],
},
},
{
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: "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",

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

@ -271,6 +271,21 @@
"percentageFormat": "string"
}
},
"sparkline": {
"description": "Sparkline Chart",
"data": true,
"props": {
"areaGradient": "string",
"height": "number",
"width": "number",
"dateLabel": "string",
"duration": "string",
"isAnimated": "bool",
"lineGradient": "string",
"titleText": "string",
"valueLabel": "string"
}
},
"bar": {
"description": "Bar Chart",
"data": true,
@ -339,6 +354,38 @@
"xAxisCustomFormat": "string"
}
},
"heatmap": {
"description": "Groupedbar chart",
"data": true,
"props": {
"color": "string",
"height": "number",
"width": "number",
"useLegend": "bool",
"yAxisLabel": "string",
"boxSize": "number"
}
},
"groupedbar": {
"description": "Groupedbar chart",
"data": true,
"props": {
"color": "string",
"height": "string",
"width": "string",
"margin": "string",
"aspectRatio": "number",
"grid":"string",
"groupLabel": "string",
"isAnimated": "bool",
"isHorizontal": "bool",
"nameLabel": "string",
"valueLabel":"string",
"yTicks": "string",
"yTickTextOffset": "string",
"useLegend": "bool"
}
},
"bullet": {
"description": "Bullet chart",
"data": true,

139
packages/standard-components/src/Chart/GroupedBar.svelte
View File

@ -0,0 +1,139 @@
<script>
import { getColorSchema, getChartGradient, notNull } from "./utils"
import britecharts from "britecharts"
import { onMount } from "svelte"
/*
ISSUES
- Renders but seems to be a problem with tooltip hover
*/
import { select } from "d3-selection"
import shortid from "shortid"
const _id = shortid.generate()
const chart = britecharts.groupedBar()
const chartClass = `groupedbar-container-${_id}`
const legendClass = `legend-container-${_id}`
let tooltip
let tooltipContainer
let chartElement = null
let chartContainer = null
export let customMouseOver = () => tooltip.show()
export let customMouseMove = (dataPoint, topicColorMap, dataPointXPosition) =>
tooltip.update(dataPoint, topicColorMap, dataPointXPosition)
export let customMouseOut = () => tooltip.hide()
export let customClick = null
export let data = []
export let color = "britecharts"
export let height = 200
export let width = 200
export let margin = { top: 0, right: 0, bottom: 0, left: 0 }
export let aspectRatio = null
export let grid = null
export let groupLabel = null
export let isAnimated = null
export let isHorizontal = null
export let nameLabel = null
export let valueLabel = null
export let valueLabelFormat = null
export let xTicks = null
export let yAxisLabel = null
export let yAxisLabelOffset = null
export let yTicks = null
export let yTickTextOffset = null
export let useLegend = true
onMount(() => {
if (chart) {
chartContainer = select(`.${chartClass}`)
bindChartUIProps()
// bindChartEvents()
chartContainer.datum(data).call(chart)
// bindChartTooltip()
}
})
function bindChartUIProps() {
if (notNull(color)) {
chart.colorSchema(colorSchema)
}
if (notNull(height)) {
chart.height(height)
}
if (notNull(width)) {
chart.width(width)
}
if (notNull(aspectRatio)) {
chart.aspectRatio(aspectRatio)
}
if (notNull(grid)) {
chart.grid(grid)
}
if (notNull(groupLabel)) {
chart.groupLabel(groupLabel)
}
if (notNull(isAnimated)) {
chart.isAnimated(isAnimated)
}
if (notNull(isHorizontal)) {
chart.isHorizontal(isHorizontal)
}
if (notNull(nameLabel)) {
chart.nameLabel(nameLabel)
}
if (notNull(valueLabel)) {
chart.valueLabel(valueLabel)
}
if (notNull(valueLabelFormat)) {
chart.valueLabelFormat(valueLabelFormat)
}
if (notNull(xTicks)) {
chart.xTicks(xTicks)
}
if (notNull(yAxisLabel)) {
chart.yAxisLabel(yAxisLabel)
}
if (notNull(yAxisLabelOffset)) {
chart.yAxisLabelOffset(yAxisLabelOffset)
}
if (notNull(yTicks)) {
chart.yTicks(yTicks)
}
if (notNull(yTickTextOffset)) {
chart.yTickTextOffset(yTickTextOffset)
}
}
function bindChartTooltip() {
tooltip = britecharts.miniTooltip()
tooltipContainer = select(`.${chartClass} .metadata-group`)
tooltipContainer.datum([]).call(tooltip)
}
function bindChartEvents() {
if (customClick) {
chart.on("customClick", customClick)
}
if (customMouseMove) {
chart.on("customMouseMove", customMouseMove)
}
if (customMouseOut) {
chart.on("customMouseOut", customMouseOut)
}
if (customMouseOver) {
chart.on("customMouseOver", customMouseOver)
}
}
$: colorSchema = getColorSchema(color)
</script>
<div bind:this={chartElement} class={chartClass} />
{#if useLegend}
<div class={legendClass} />
{/if}

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

@ -0,0 +1,59 @@
<script>
import { getColorSchema, getChartGradient, notNull } from "./utils"
import britecharts from "britecharts"
import { onMount } from "svelte"
import { select } from "d3-selection"
import shortid from "shortid"
const _id = shortid.generate()
const chart = britecharts.heatmap()
const chartClass = `heatmap-container-${_id}`
const legendClass = `legend-container-${_id}`
let chartElement = null
let chartContainer = null
export let data = []
export let color = "britecharts"
export let height = 200
export let width = 200
export let margin = { top: 0, right: 0, bottom: 0, left: 0 }
export let useLegend = true
export let yAxisLabels = null
export let boxSize = null
onMount(() => {
if (chart) {
chartContainer = select(`.${chartClass}`)
bindChartUIProps()
chartContainer.datum(data).call(chart)
}
})
function bindChartUIProps() {
if (notNull(color)) {
chart.colorSchema(colorSchema)
}
if (notNull(height)) {
chart.height(height)
}
if (notNull(width)) {
chart.width(width)
}
if (notNull(boxSize)) {
chart.boxSize(boxSize)
}
if (notNull(yAxisLabels)) {
chart.yAxisLabels(yAxisLabels)
}
}
$: colorSchema = getColorSchema(color)
</script>
<div bind:this={chartElement} class={chartClass} />
{#if useLegend}
<div class={legendClass} />
{/if}

79
packages/standard-components/src/Chart/Sparkline.svelte
View File

@ -0,0 +1,79 @@
<script>
import { getColorSchema, getChartGradient, notNull } from "./utils"
import britecharts from "britecharts"
import { onMount } from "svelte"
import { select } from "d3-selection"
import shortid from "shortid"
const _id = shortid.generate()
const chart = britecharts.sparkline()
const chartClass = `sparkline-container-${_id}`
const legendClass = `legend-container-${_id}`
let chartElement = null
let chartContainer = null
export let data = []
export let areaGradient = null
export let height = null
export let width = null
export let dateLabel = null
export let duration = null
export let isAnimated = null
export let lineGradient = null
export let titleText = null
export let titleTextStyle = null
export let valueLabel = null
export let useLegend = true
onMount(() => {
if (chart) {
chartContainer = select(`.${chartClass}`)
bindChartUIProps()
chartContainer.datum(data).call(chart)
}
})
function bindChartUIProps() {
if (notNull(areaGradient)) {
chart.areaGradient(aGradient)
}
if (notNull(lineGradient)) {
chart.lineGradient(lGradient)
}
if (notNull(height)) {
chart.height(height)
}
if (notNull(width)) {
chart.width(width)
}
if (notNull(dateLabel)) {
chart.dateLabel(dateLabel)
}
if (notNull(duration)) {
chart.duration(duration)
}
if (notNull(isAnimated)) {
chart.isAnimated(isAnimated)
}
if (notNull(titleText)) {
chart.titleText(titleText)
}
if (notNull(titleTextStyle)) {
chart.titleTextStyle(titleTextStyle)
}
if (notNull(valueLabel)) {
chart.valueLabel(valueLabel)
}
}
$: aGradient = getChartGradient(areaGradient)
$: lGradient = getChartGradient(lineGradient)
</script>
<div bind:this={chartElement} class={chartClass} />
{#if useLegend}
<div class={legendClass} />
{/if}

2
packages/standard-components/src/Chart/Temp.svelte
View File

@ -31,6 +31,8 @@
bindChartTooltip()
}
})
$: colorSchema = getColorSchema(color)
</script>
<div bind:this={chartElement} class={chartClass} />

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

@ -3,4 +3,7 @@ export { default as bar } from "./Bar.svelte"
export { default as line } from "./Line.svelte"
export { default as brush } from "./Brush.svelte"
export { default as bullet } from "./Bullet.svelte"
export { default as groupedbar } from "./GroupedBar.svelte"
export { default as heatmap } from "./Heatmap.svelte"
export { default as sparkline } from "./Sparkline.svelte"