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

WIP: Bar, Brush, Bullet, Donut and Line

This commit is contained in:
cmack 2020-07-29 16:35:44 +01:00
parent 5d14efb201
commit f667f05f19
10 changed files with 744 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -393,7 +393,7 @@ export default {
},
properties: {
design: {
...all
...all,
},
settings: [
{
@ -414,6 +414,12 @@ export default {
valueKey: "checked",
control: Checkbox,
},
{
label: "Has Hover",
key: "hasHoverAnimation",
valueKey: "checked",
control: Checkbox,
},
{
label: "Colors",
key: "color",
@ -459,6 +465,7 @@ export default {
{
label: "Show Legend",
key: "useLegend ",
valueKey: "checked",
control: Checkbox,
},
],
@ -561,8 +568,13 @@ export default {
valueKey: "checked",
},
{
label: "Label Offset",
key: "labelOffset",
label: "X Axis Label Offset",
key: "xAxisLabelOffset",
control: Input,
},
{
label: "Y Axis Label Offset",
key: "yAxisLabelOffset",
control: Input,
},
{
@ -598,6 +610,172 @@ export default {
],
},
},
{
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: "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: "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: "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: "Line",
_component: "@budibase/standard-components/line",
@ -684,6 +862,12 @@ export default {
"yellow",
],
},
{
label: "X Axis Value Type",
key: "xAxisValueType",
control: OptionSelect,
options: ["date", "number"],
},
{
label: "Grid",
key: "grid",
@ -782,6 +966,11 @@ export default {
key: "xAxisCustomFormat",
control: Input,
},
{
label: "X Axis Label",
key: "xAxisLabel",
control: Input,
},
],
},
},

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

@ -261,11 +261,14 @@
"width": "number",
"hasFixedHighlightedSlice": "bool",
"hasLastHoverSliceHighlighted": "bool",
"hasHoverAnimation": "bool",
"numberFormat": "string",
"isAnimated": "bool",
"externalRadius": "number",
"internalRadius": "number",
"radiusHoverOffset": "number",
"useLegend": "bool"
"useLegend": "bool",
"percentageFormat": "string"
}
},
"bar": {
@ -281,7 +284,8 @@
"width": "number",
"isAnimated": "bool",
"isHorizontal": "bool",
"labelOffset": "number",
"xAxisLabelOffset": "number",
"yAxisLabelOffset": "number",
"labelNumberFormat": "number",
"labelSize": "number",
"locale": "string",
@ -289,7 +293,9 @@
"numberLabel": "string",
"xAxisLabel": "string",
"yAxisLabel": "string",
"useLegend": "bool"
"useLegend": "bool",
"xTicks": "number",
"yTicks": "number"
}
},
"line": {
@ -310,13 +316,42 @@
"shouldShowAllDataPoints": "bool",
"topicLabel": "string",
"valueLabel": "string",
"xAxisLabel": "string",
"xAxisValueType": "string",
"xAxisScale": "string",
"xAxisFormat": "string",
"xAxisCustomFormat": "string",
"xAxisLabel": "string"
}
},
"brush":{
"description": "brush chart",
"data": true,
"props": {
"gradient": "string",
"height": "number",
"width": "number",
"margin": "string",
"dateRange": "string",
"locale": "string",
"roundingTimeInterval": "string",
"xAxisFormat": "string",
"xTicks": "number",
"xAxisCustomFormat": "string"
}
},
"bullet": {
"description": "Bullet chart",
"data": true,
"props": {
"color": "string",
"customSubtitle": "string",
"customTitle": "string",
"numberFormat": "string",
"paddingBetweenAxisAndChart": "number",
"height": "number",
"width": "number"
}
},
"datachart": {
"description": "shiny chart",
"data": true,

50
packages/standard-components/src/Chart/Bar.svelte
View File

@ -34,28 +34,35 @@
export let gradient = null
export let color = "britecharts"
export let enableLabels = true
export let hasPercentage = null
export let hasSingleBarHighlight = true
export let highlightBarFunction = null
export let height = 200
export let width = 300
export let labelsMargin = null
export let isAnimated = true
export let isHorizontal = true
export let labelOffset = null
export let xAxisLabelOffset = null
export let yAxisLabelOffset = null
export let labelsNumberFormat = null
export let labelSize = null
export let locale = null
export let valueLabel = null
export let nameLabel = null
export let numberFormat = null
export let labelsSize = null
export let xTicks = null
export let yTicks = null
export let percentageAxisToMaxRatio = null
export let useLegend = true
onMount(() => {
//call charts props in here
if (chartElement) {
chartContainer = select(`.${chartClass}`)
bindChartUIProps()
bindChartEvents()
bindChartTooltip()
chartContainer.datum(data).call(chart)
bindChartTooltip()
}
})
@ -73,17 +80,26 @@
chart.yAxisLabel(yAxisLabel)
}
if (betweenBarsPadding) {
chart.betweenBarsPadding(betweenBarsPadding)
chart.betweenBarsPadding(Number(betweenBarsPadding))
}
if (enableLabels) {
chart.enableLabels(enableLabels)
}
if (hasPercentage) {
chart.hasPercentage(hasPercentage)
}
if (hasSingleBarHighlight) {
chart.hasSingleBarHighlight(hasSingleBarHighlight)
}
if (labelsMargin) {
chart.labelsMargin(labelsMargin)
}
if (height) {
chart.height(height)
}
if (highlightBarFunction) {
chart.highlightBarFunction(highlightBarFunction)
}
if (width) {
chart.width(width)
}
@ -93,14 +109,17 @@
if (isHorizontal) {
chart.isHorizontal(isHorizontal)
}
if (labelOffset) {
chart.labelOffset(labelOffset)
if (yAxisLabelOffset) {
chart.yAxisLabelOffset(Number(yAxisLabelOffset))
}
if (xAxisLabelOffset) {
chart.xAxisLabelOffset(Number(xAxisLabelOffset))
}
if (labelsNumberFormat) {
chart.labelsNumberFormat(labelsNumberFormat)
}
if (labelSize) {
chart.labelSize(labelSize)
if (valueLabel) {
chart.valueLabel(valueLabel)
}
if (locale) {
chart.locale(locale)
@ -111,6 +130,18 @@
if (numberFormat) {
chart.numberFormat(numberFormat)
}
if (labelsSize) {
chart.labelsSize(labelsSize)
}
if (xTicks) {
chart.xTicks(xTicks)
}
if (yTicks) {
chart.yTicks(yTicks)
}
if (percentageAxisToMaxRatio) {
chart.percentageAxisToMaxRatio(percentageAxisToMaxRatio)
}
}
function bindChartEvents() {
@ -130,7 +161,6 @@
function bindChartTooltip() {
tooltip = britecharts.miniTooltip()
debugger
tooltipContainer = select(`.${chartClass} .metadata-group`)
tooltipContainer.datum([]).call(tooltip)
}

94
packages/standard-components/src/Chart/Brush.svelte
View File

@ -0,0 +1,94 @@
<script>
import { getColorSchema, getChartGradient, notNull } from "./utils"
import britecharts from "britecharts"
import { onMount } from "svelte"
import { select } from "d3-selection"
import shortid from "shortid"
/*
ISSUES
- Chart gradient doesn't seem to do anything
*/
const _id = shortid.generate()
const chart = britecharts.brush()
const chartClass = `brush-container-${_id}`
const legendClass = `legend-container-${_id}`
let chartElement = null
let chartContainer = null
export let customBrushEnd = null
export let customBrushStart = null
export let data = []
export let gradient = null
export let height = 200
export let width = 200
export let margin = { top: 0, right: 0, bottom: 0, left: 0 }
export let dateRange = null
export let locale = null
export let roundingTimeInterval = null
export let xAxisFormat = null
export let xTicks = null
export let xAxisCustomFormat = null
onMount(() => {
if (chart) {
chartContainer = select(`.${chartClass}`)
bindChartUIProps()
bindChartEvents()
chartContainer.datum(data).call(chart)
}
})
function bindChartUIProps() {
if (notNull(gradient)) {
chart.gradient(chartGradient)
}
if (notNull(height)) {
chart.height(height)
}
if (notNull(width)) {
chart.width(width)
}
if (notNull(margin)) {
chart.margin(margin)
}
if (notNull(dateRange)) {
chart.dateRange(dateRange)
}
if (notNull(locale)) {
chart.locale(locale)
}
if (notNull(roundingTimeInterval)) {
chart.roundingTimeInterval(roundingTimeInterval)
}
if (notNull(xAxisFormat)) {
chart.xAxisFormat(xAxisFormat)
}
if (notNull(xTicks)) {
chart.xTicks(xTicks)
}
if (notNull(xAxisCustomFormat)) {
chart.xAxisCustomFormat(xAxisCustomFormat)
}
}
function bindChartEvents() {
if (customBrushEnd) {
chart.on("customBrushEnd", customBrushEnd)
}
if (customBrushStart) {
chart.on("customBrushStart", customBrushStart)
}
}
$: chartGradient = getChartGradient(gradient)
$: console.log(chartGradient)
</script>
<div bind:this={chartElement} class={chartClass} />

79
packages/standard-components/src/Chart/Bullet.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.bullet()
const chartClass = `bullet-container-${_id}`
const legendClass = `legend-container-${_id}`
let chartElement = null
let chartContainer = null
export let data = []
export let aspectRatio = null
export let color = "britecharts"
export let customSubtitle = null
export let customTitle = null
export let numberFormat = null
export let paddingBetweenAxisAndChart = null
export let startMaxRangeOpacity = null
export let ticks = null
export let isReverse = false
export let height = 200
export let width = 200
export let margin = { top: 0, right: 0, bottom: 0, left: 0 }
onMount(() => {
if (chart) {
chartContainer = select(`.${chartClass}`)
bindChartUIProps()
chartContainer.datum(data).call(chart)
}
})
function bindChartUIProps() {
if (notNull(color)) {
chart.colorSchema(colorSchema)
}
if (notNull(aspectRatio)) {
chart.aspectRatio(aspectRatio)
}
if (notNull(customSubtitle)) {
chart.customSubtitle(customSubtitle)
}
if (notNull(customTitle)) {
chart.customTitle(customTitle)
}
if (notNull(numberFormat)) {
chart.numberFormat(numberFormat)
}
if (notNull(paddingBetweenAxisAndChart)) {
chart.paddingBetweenAxisAndChart(paddingBetweenAxisAndChart)
}
if (notNull(startMaxRangeOpacity)) {
chart.startMaxRangeOpacity(startMaxRangeOpacity)
}
if (notNull(ticks)) {
chart.ticks(ticks)
}
if (notNull(isReverse)) {
chart.isReverse(isReverse)
}
if (notNull(height)) {
chart.height(height)
}
if (notNull(width)) {
chart.width(width)
}
}
$: colorSchema = getColorSchema(color)
</script>
<div bind:this={chartElement} class={chartClass} />

127
packages/standard-components/src/Chart/Donut.svelte
View File

@ -1,36 +1,129 @@
<script>
import Chart, { getColorSchema } from "./Chart.svelte"
import { getColorSchema, notNull } from "./utils.js"
import britecharts from "britecharts"
import { onMount } from "svelte"
let type = "donut"
import { select } from "d3-selection"
import shortid from "shortid"
const _id = shortid.generate()
const chart = britecharts.donut()
const chartClass = `donut-container-${_id}`
const legendClass = `legend-container-${_id}`
let chartElement = null
let chartContainer = null
export let customMouseOver = null
export let customMouseMove = null
export let customMouseOut = null
export let customClick = null
export let orderingFunction = 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 margin = null
export let centeredTextFunction = null
export let externalRadius = 25
export let percentageFormat = null
export let hasFixedHighlightedSlice = false
export let hasLastHoverSliceHighlighted = false
export let hasHoverAnimation = true
export let highlightSliceById = null
export let numberFormat = null
export let internalRadius = 25
export let isAnimated = true
export let radiusHoverOffset = 0
export let useLegend = true
onMount(() => {
if (chart) {
chart.emptyDataConfig({
showEmptySlice: true,
emptySliceColor: "#000000",
})
chartContainer = select(`.${chartClass}`)
bindChartUIProps()
bindChartEvents()
chartContainer.datum(data).call(chart)
}
})
function bindChartUIProps() {
if (notNull(color)) {
chart.colorSchema(getColorSchema(color))
}
if (notNull(height)) {
chart.height(height)
}
if (notNull(width)) {
chart.width(width)
}
if (notNull(margin)) {
chart.margin(margin)
}
if (notNull(centeredTextFunction)) {
chart.centeredTextFunction(centeredTextFunction)
}
if (notNull(externalRadius)) {
chart.externalRadius(externalRadius)
}
if (notNull(percentageFormat)) {
chart.percentageFormat(percentageFormat)
}
if (notNull(hasFixedHighlightedSlice)) {
chart.hasFixedHighlightedSlice(hasFixedHighlightedSlice)
}
if (notNull(hasLastHoverSliceHighlighted)) {
chart.hasLastHoverSliceHighlighted(hasLastHoverSliceHighlighted)
}
if (notNull(hasHoverAnimation)) {
chart.hasHoverAnimation(hasHoverAnimation)
}
if (notNull(highlightSliceById)) {
chart.highlightSliceById(highlightSliceById)
}
if (notNull(numberFormat)) {
chart.numberFormat(numberFormat)
}
if (notNull(internalRadius)) {
chart.internalRadius(internalRadius)
}
if (notNull(isAnimated)) {
chart.isAnimated(isAnimated)
}
if (notNull(radiusHoverOffset)) {
chart.radiusHoverOffset(radiusHoverOffset)
}
if (notNull(orderingFunction)) {
chart.orderingFunction(orderingFunction)
}
}
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>
<Chart
{type}
{useLegend}
{data}
{colorSchema}
{height}
{width}
{margin}
{externalRadius}
{hasFixedHighlightedSlice}
{hasLastHoverSliceHighlighted}
{internalRadius}
{isAnimated}
{radiusHoverOffset} />
<div bind:this={chartElement} class={chartClass} />
{#if useLegend}
<div class={legendClass} />
{/if}

157
packages/standard-components/src/Chart/Line.svelte
View File

@ -1,17 +1,31 @@
<script>
import Chart, { getColorSchema, getChartGradient } from "./Chart.svelte"
import { getColorSchema, getChartGradient, notNull } from "./utils"
import britecharts from "britecharts"
import { onMount } from "svelte"
/*
ISSUES:
*/
import { select } from "d3-selection"
import shortid from "shortid"
let type = "line"
const _id = shortid.generate()
const chart = britecharts.line()
const chartClass = `line-container-${_id}`
const legendClass = `legend-container-${_id}`
let chartElement
let chartContainer
let tooltip
let tooltipContainer
export let customMouseHover = null
export let customMouseMove = null
export let customMouseOut = null
export let customDataEntryClick = null
export let customTouchMove = null
export let data = []
export let axisTimeCombinations = ""
export let color = "britecharts"
export let axisTimeCombinations = ""
export let grid = "horizontal"
export let aspectRatio = 0.5
export let dateLabel = "date"
@ -29,31 +43,118 @@
export let xAxisScale = "linear"
export let xAxisFormat = "day-month"
export let xAxisCustomFormat = "%H"
export let yAxisLabel = null
export let useLegend = true
export let yAxisLabelPadding = null
export let lines = null //not handled by setting prop
export let tooltipThreshold = null
onMount(() => {
chartContainer = select(`.${chartClass}`)
bindChartUIProps()
bindChartEvents()
chartContainer.datum(data).call(chart)
bindChartTooltip()
})
function bindChartUIProps() {
if (notNull(color)) {
chart.colorSchema(colorSchema)
}
if (notNull(axisTimeCombinations)) {
chart.axisTimeCombinations(axisTimeCombinations)
}
if (notNull(grid)) {
chart.grid(grid)
}
if (notNull(aspectRatio)) {
chart.aspectRatio(aspectRatio)
}
if (notNull(dateLabel)) {
chart.dateLabel(dateLabel)
}
if (notNull(width)) {
chart.width(width)
}
if (notNull(height)) {
chart.height(height)
}
if (notNull(isAnimated)) {
chart.isAnimated(isAnimated)
}
if (notNull(lineCurve)) {
chart.lineCurve(lineCurve)
}
if (notNull(locale)) {
chart.locale(locale)
}
if (notNull(numberFormat)) {
chart.numberFormat(numberFormat)
}
if (notNull(shouldShowAllDataPoints)) {
chart.shouldShowAllDataPoints(shouldShowAllDataPoints)
}
if (notNull(topicLabel)) {
chart.topicLabel(topicLabel)
}
if (notNull(valueLabel)) {
chart.valueLabel(valueLabel)
}
if (notNull(xAxisLabel)) {
chart.xAxisLabel(xAxisLabel)
}
if (notNull(xAxisValueType)) {
chart.xAxisValueType(xAxisValueType)
}
if (notNull(xAxisScale)) {
chart.xAxisScale(xAxisScale)
}
if (notNull(xAxisFormat)) {
chart.xAxisFormat(xAxisFormat)
}
if (notNull(xAxisCustomFormat)) {
chart.xAxisCustomFormat(xAxisCustomFormat)
}
if (notNull(yAxisLabel)) {
chart.yAxisLabel(yAxisLabel)
}
if (notNull(yAxisLabelPadding)) {
chart.yAxisLabelPadding(yAxisLabelPadding)
}
}
function bindChartEvents() {
if (customMouseHover) {
chart.on("customMouseHover", customMouseHover)
}
if (customMouseMove) {
chart.on("customMouseMove", customMouseMove)
}
if (customMouseOut) {
chart.on("customMouseOut", customMouseOut)
}
if (customDataEntryClick) {
chart.on("customDataEntryClick", customDataEntryClick)
}
if (customTouchMove) {
chart.on("customTouchMove", customTouchMove)
}
}
function bindChartTooltip() {
tooltip = britecharts.miniTooltip()
tooltipContainer = select(`.${chartClass} .metadata-group`)
tooltipContainer.datum([]).call(tooltip)
}
$: colorSchema = getColorSchema(color)
$: console.log($$props)
</script>
<Chart
{type}
{data}
{colorSchema}
{axisTimeCombinations}
{lineCurve}
{numberFormat}
{height}
{topicLabel}
{shouldShowAllDataPoints}
{xAxisLabel}
{valueLabel}
{xAxisValueType}
{xAxisScale}
{xAxisCustomFormat}
{aspectRatio}
{grid}
tooltipThreshold={600}
{width}
{dateLabel} />
<div bind:this={chartElement} class={chartClass} />
{#if useLegend}
<div class={legendClass} />
{/if}
<!--

39
packages/standard-components/src/Chart/Temp.svelte Normal file
View File

@ -0,0 +1,39 @@
<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.chartname()
const chartClass = `donut-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
onMount(() => {
if (chart) {
chartContainer = select(`.${chartClass}`)
bindChartUIProps()
bindChartEvents()
chartContainer.datum(data).call(chart)
bindChartTooltip()
}
})
</script>
<div bind:this={chartElement} class={chartClass} />
{#if useLegend}
<div class={legendClass} />
{/if}

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

@ -1,3 +1,6 @@
export { default as donut } from "./Donut.svelte"
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"

19
packages/standard-components/src/Chart/utils.js Normal file
View File

@ -0,0 +1,19 @@
import britecharts from "britecharts"
export const notNull = value => value || value === false
export const chartTypes = britecharts ? Object.keys(britecharts) : null
//expose chart color schemas for use or reference outside compnent
export const colorSchemas = britecharts ? britecharts.colors.colorSchemas : null
//export color gradients for use or reference outside the component
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