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

Completion Bug Fixes and Updates

This commit is contained in:
cmack 2020-08-18 15:45:44 +01:00
parent 56571e983b
commit 60524e801e
9 changed files with 181 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -667,11 +667,6 @@ export default {
key: "labelsNumberFormat",
control: Input,
},
{
label: "Label Size",
key: "labelSize",
control: Input,
},
],
},
},
@ -762,6 +757,11 @@ export default {
valueKey: "checked",
control: Checkbox,
},
{
label: "Tooltip Title",
key: "tooltipTitle",
control: Input,
},
],
},
},

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

@ -424,16 +424,12 @@
"betweenBarsPadding": "number",
"gradient": "string",
"color": "string",
"enableLabels": "bool",
"hasSingleBarHighlight": "bool",
"height": "number",
"width": "number",
"isAnimated": "bool",
"isHorizontal": "bool",
"xAxisLabelOffset": "number",
"yAxisLabelOffset": "number",
"labelNumberFormat": "number",
"labelSize": "number",
"locale": "string",
"nameLabel": "string",
"valueLabel": "string",
@ -469,6 +465,7 @@
"xAxisFormat": "string",
"xAxisCustomFormat": "string",
"xAxisLabel": "string",
"yAxisLabel": "string",
"tooltipTitle": "string"
}
},
@ -490,7 +487,7 @@
}
},
"heatmap": {
"description": "Groupedbar chart",
"description": "Heatmap chart",
"data": true,
"props": {
"model": "string",
@ -518,7 +515,8 @@
"nameLabel": "string",
"valueLabel":"string",
"yTicks": "string",
"useLegend": "bool"
"useLegend": "bool",
"tooltipTitle": "string"
}
},
"bullet": {

2
packages/standard-components/dist/index.js.map vendored
View File

File diff suppressed because one or more lines are too long

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

@ -1,22 +1,20 @@
<script>
import { getColorSchema, getChartGradient } from "./Chart.svelte"
import {
getColorSchema,
getChartGradient,
notNull,
hasProp,
} from "./utils.js"
import britecharts from "britecharts"
import { onMount } from "svelte"
import { select } from "d3-selection"
import shortid from "shortid"
/*
ISSUES:
- x and y axis label set and appear in the dom but do not display next to the axis
- x tick label overlaps bar, seems to be no apu method to change this? Could do it by querying for it in the dom
for this element: <tspan x="-10" dy="0.32em">4.0</tspan>
*/
let tooltip
const _id = shortid.generate()
const chart = britecharts.bar()
const chartClass = `bar-container-${_id}`
const legendClass = `legend-container-${_id}`
let chartElement = null
let chartContainer = null
@ -28,13 +26,13 @@
export let customMouseOut = () => tooltip.hide()
export let customClick = null
export let data = []
let data = []
export let xAxisLabel = ""
export let yAxisLabel = ""
export let betweenBarsPadding = 0.1 //takes decimal values 0.1, 0.5 etc
export let gradient = null
export let color = "britecharts"
export let enableLabels = true
export let enableLabels = false
export let hasPercentage = null
export let hasSingleBarHighlight = true
export let highlightBarFunction = null
@ -63,18 +61,25 @@
let store = _bb.store
onMount(async () => {
if (chartElement) {
if (model) {
await fetchData()
}
data = $store[model]
if (schemaIsValid()) {
chartContainer = select(`.${chartClass}`)
bindChartUIProps()
bindChartEvents()
chartContainer.datum(_data).call(chart)
chartContainer.datum(data).call(chart)
bindChartTooltip()
} else {
console.error("Bar Chart - Please provide a valid name and value label")
}
}
})
const schemaIsValid = () =>
(hasProp(data, "name") || hasProp(data, nameLabel)) &&
(hasProp(data, "value") || hasProp(data, valueLabel))
async function fetchData() {
const FETCH_RECORDS_URL = `/api/views/all_${model}`
const response = await _bb.api.get(FETCH_RECORDS_URL)
@ -90,85 +95,85 @@
}
function bindChartUIProps() {
chart.numberFormat(".1f")
chart.numberFormat(".0f")
chart.labelsNumberFormat(".1f")
if (color) {
if (notNull(color)) {
chart.colorSchema(colorSchema)
}
if (gradient) {
if (notNull(gradient)) {
chart.chartGradient(chartGradient)
}
if (xAxisLabel) {
if (notNull(xAxisLabel)) {
chart.xAxisLabel(xAxisLabel)
}
if (yAxisLabel) {
if (notNull(yAxisLabel)) {
chart.yAxisLabel(yAxisLabel)
}
if (betweenBarsPadding) {
if (notNull(betweenBarsPadding)) {
chart.betweenBarsPadding(Number(betweenBarsPadding))
}
if (enableLabels) {
if (notNull(enableLabels)) {
chart.enableLabels(enableLabels)
}
if (hasPercentage) {
if (notNull(hasPercentage)) {
chart.hasPercentage(hasPercentage)
}
if (hasSingleBarHighlight) {
if (notNull(hasSingleBarHighlight)) {
chart.hasSingleBarHighlight(hasSingleBarHighlight)
}
if (labelsMargin) {
if (notNull(labelsMargin)) {
chart.labelsMargin(labelsMargin)
}
if (height) {
if (notNull(height)) {
chart.height(height)
}
if (highlightBarFunction) {
if (notNull(highlightBarFunction)) {
chart.highlightBarFunction(highlightBarFunction)
}
if (width) {
if (notNull(width)) {
chart.width(width)
}
if (isAnimated) {
if (notNull(isAnimated)) {
chart.isAnimated(isAnimated)
}
if (isHorizontal) {
if (notNull(isHorizontal)) {
chart.isHorizontal(isHorizontal)
}
if (yAxisLabelOffset) {
if (notNull(yAxisLabelOffset)) {
chart.yAxisLabelOffset(yAxisLabelOffset)
}
if (xAxisLabelOffset) {
if (notNull(xAxisLabelOffset)) {
chart.xAxisLabelOffset(Number(xAxisLabelOffset))
}
if (labelsNumberFormat) {
if (notNull(labelsNumberFormat)) {
chart.labelsNumberFormat(labelsNumberFormat)
}
if (valueLabel) {
if (notNull(valueLabel)) {
chart.valueLabel(valueLabel)
}
if (locale) {
if (notNull(locale)) {
chart.locale(locale)
}
if (nameLabel) {
if (notNull(nameLabel)) {
chart.nameLabel(nameLabel)
}
if (numberFormat) {
if (notNull(numberFormat)) {
chart.numberFormat(numberFormat)
}
if (labelsSize) {
if (notNull(labelsSize)) {
chart.labelsSize(labelsSize)
}
if (xTicks) {
if (notNull(xTicks)) {
chart.xTicks(xTicks)
}
if (yTicks) {
if (notNull(yTicks)) {
chart.yTicks(yTicks)
}
if (percentageAxisToMaxRatio) {
if (notNull(percentageAxisToMaxRatio)) {
chart.percentageAxisToMaxRatio(percentageAxisToMaxRatio)
}
chartContainer.datum(_data).call(chart)
chartContainer.datum(data).call(chart)
}
function bindChartEvents() {
@ -193,13 +198,8 @@
tooltipContainer.datum([]).call(tooltip)
}
$: _data = model ? $store[model] : data
$: colorSchema = getColorSchema(color)
$: chartGradient = getChartGradient(gradient)
</script>
<div bind:this={chartElement} class={chartClass} />
{#if useLegend}
<div class={legendClass} />
{/if}

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

@ -1,14 +1,10 @@
<script>
import { getColorSchema, getChartGradient, notNull } from "./utils"
import { getColorSchema, getChartGradient, notNull, hasProp } from "./utils"
import Tooltip from "./Tooltip.svelte"
import britecharts from "britecharts"
import { onMount } from "svelte"
import { select } from "d3-selection"
import shortid from "shortid"
/*
ISSUES
- Renders but seems to be a problem with tooltip hover
*/
const _id = shortid.generate()
@ -21,15 +17,11 @@
const chartClass = `groupedbar-container-${_id}`
const legendClass = `legend-container-${_id}`
let tooltip
let tooltip = britecharts.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
let data = []
@ -50,22 +42,33 @@
export let yAxisLabelOffset = null
export let yTicks = null
export let yTickTextOffset = null
export let tooltipTitle = ""
$: console.log("DATA", data)
let chartDrawn = false
const schemaIsValid = () =>
(hasProp(data, "name") || hasProp(data, nameLabel)) &&
(hasProp(data, "group") || hasProp(data, groupLabel)) &&
(hasProp(data, "value") || hasProp(data, valueLabel))
onMount(async () => {
if (chart) {
if (model) {
await fetchData()
data = $store[model]
}
if (schemaIsValid()) {
chartContainer = select(`.${chartClass}`)
bindChartUIProps()
bindChartEvents()
chartContainer.datum(data).call(chart)
bindTooltip()
chartDrawn = true
} else {
console.error(
"Grouped bar - Please provide valid name, value and group labels"
)
}
}
})
@ -83,6 +86,13 @@
}
}
function bindTooltip() {
tooltipContainer = select(`.${chartClass} .metadata-group`)
tooltip.topicLabel("values")
tooltip.shouldShowDateInTitle(false)
tooltipContainer.datum([]).call(tooltip)
}
function bindChartUIProps() {
if (notNull(color)) {
chart.colorSchema(colorSchema)
@ -135,29 +145,23 @@
if (notNull(yTickTextOffset)) {
chart.yTickTextOffset(yTickTextOffset)
}
tooltip.title(tooltipTitle || "Groupedbar Title")
debugger
}
function bindChartEvents() {
if (customClick) {
chart.on("customClick", customClick)
}
if (customMouseMove) {
chart.on("customMouseMove", customMouseMove)
chart.on("customMouseMove", tooltip.update)
chart.on("customMouseOut", tooltip.hide)
chart.on("customMouseOver", tooltip.show)
}
if (customMouseOut) {
chart.on("customMouseOut", customMouseOut)
}
if (customMouseOver) {
chart.on("customMouseOver", customMouseOver)
}
}
$: _data = model ? $store[model] : data
$: colorSchema = getColorSchema(color)
</script>
<div bind:this={chartElement} class={chartClass} />
{#if chartDrawn}
<!-- {#if chartDrawn}
<Tooltip bind:tooltip {nameLabel} {valueLabel} {chartClass} />
{/if}
{/if} -->

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

@ -1,13 +1,10 @@
<script>
import { getColorSchema, getChartGradient, notNull } from "./utils"
import sort from "fast-sort"
import Tooltip from "./Tooltip.svelte"
import { getColorSchema, getChartGradient, notNull, hasProp } from "./utils"
import britecharts from "britecharts"
import { onMount } from "svelte"
import { select } from "d3-selection"
import shortid from "shortid"
import { log } from "console"
const _id = shortid.generate()
@ -18,22 +15,23 @@
const chart = britecharts.line()
const chartClass = `line-container-${_id}`
const legendClass = `legend-container-${_id}`
let data = { data: [] }
let data = { dataByTopic: [] }
let chartElement
let chartContainer
let tooltip
let tooltipContainer
let tooltip = britecharts.tooltip()
export let customMouseOver = () => tooltip.show()
export let customMouseMove = (
dataPoint,
topicColorMap,
dataPointXPosition
dataPointXPosition,
yPosition
) => {
tooltip.update(dataPoint, topicColorMap, dataPointXPosition)
tooltip.update(dataPoint, topicColorMap, dataPointXPosition, yPosition)
}
export let customMouseOut = () => tooltip.hide()
@ -69,16 +67,31 @@
let chartDrawn = false
onMount(async () => {
if (chart) {
if (model) {
data = await getAndPrepareData()
if (data.dataByTopic.length > 0) {
chartContainer = select(`.${chartClass}`)
bindChartUIProps()
bindChartEvents()
chartContainer.datum(data).call(chart)
chartDrawn = true
bindTooltip()
} else {
console.error(
"Line Chart - Please provide valid name, value and topic labels"
)
}
}
})
function bindTooltip() {
tooltipContainer = select(
`.${chartClass} .metadata-group .vertical-marker-container`
)
tooltip.topicLabel("topics")
tooltipContainer.datum([]).call(tooltip)
}
async function fetchData() {
const FETCH_RECORDS_URL = `/api/views/all_${model}`
const response = await _bb.api.get(FETCH_RECORDS_URL)
@ -93,12 +106,17 @@
}
}
const schemaIsValid = data =>
hasProp(data, valueLabel) &&
hasProp(data, dateLabel) &&
hasProp(data, topicLabel)
async function getAndPrepareData() {
let dataByTopic = []
let _data = []
if (!topicLabel) {
topicLabel = "topic"
topicLabel = "topicName"
}
if (!valueLabel) {
@ -109,11 +127,10 @@
dateLabel = "date"
}
if (model) {
await fetchData()
_data = $store[model]
}
if (schemaIsValid(_data)) {
_data.forEach((data, idx, arr) => {
let topicName = data[topicLabel]
if (!dataByTopic.some(dt => dt.topicName === topicName)) {
@ -122,22 +139,26 @@
topic: dataByTopic.length + 1,
dates: arr
.filter(d => d[topicLabel] === topicName)
.map(d => ({ date: new Date(d[dateLabel]), value: d[valueLabel] })),
.map(d => ({
date: new Date(d[dateLabel]),
value: d[valueLabel],
}))
.sort((a, b) => a.date - b.date),
}
d.dates = d.dates.sort((a, b) => a.date - b.date)
dataByTopic.push(d)
}
})
}
return { dataByTopic }
}
$: console.table("DATA", data)
function bindChartUIProps() {
chart.grid("horizontal")
chart.isAnimated(true)
// chart.tooltipThreshold(800)
chart.tooltipThreshold(800)
chart.aspectRatio(0.5)
chart.xAxisCustomFormat("custom")
if (notNull(color)) {
chart.colorSchema(colorSchema)
@ -202,17 +223,19 @@
if (notNull(lines)) {
chart.lines(lines)
}
tooltip.title(tooltipTitle || "Line Tooltip")
}
function bindChartEvents() {
if (customMouseOver) {
chart.on("customMouseOver", customMouseOver)
chart.on("customMouseOver", tooltip.show)
}
if (customMouseMove) {
chart.on("customMouseMove", customMouseMove)
chart.on("customMouseMove", tooltip.update)
}
if (customMouseOut) {
chart.on("customMouseOut", customMouseOut)
chart.on("customMouseOut", tooltip.hide)
}
if (customDataEntryClick) {
chart.on("customDataEntryClick", customDataEntryClick)
@ -227,10 +250,3 @@
</script>
<div bind:this={chartElement} class={chartClass} />
{#if chartDrawn}
<Tooltip
bind:tooltip
title={tooltipTitle || 'Line Tooltip'}
topicLabel="topics"
{chartClass} />
{/if}

4
packages/standard-components/src/Chart/Tooltip.svelte
View File

@ -26,7 +26,9 @@
export let xAxisValueType = null
onMount(() => {
tooltipContainer = select(`.${chartClass} .metadata-group`)
tooltipContainer = select(
`.${chartClass} .metadata-group .vertical-marker-container`
)
tooltipContainer.datum([]).call(tooltip)
})

19
packages/standard-components/src/Chart/tests/line.html
View File

@ -10,6 +10,8 @@
type="text/javascript"></script> -->
<script src="../../../node_modules/britecharts/dist/umd/line.min.js" type="text/javascript"></script>
<script src="../../../node_modules/britecharts/dist/umd/tooltip.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/britecharts/dist/css/britecharts.min.css" type="text/css" />
@ -133,8 +135,10 @@ function prepareData() {
return {dataByTopic}
}
const newData = prepareData()
debugger
const dataByTopic = {
dataByTopic: [
@ -207,11 +211,24 @@ const data = {
const lineContainer = d3.select('.js-line-chart-container');
const lineChart = britecharts.line()
const tooltip = britecharts.tooltip()
lineChart.grid("horizontal").aspectRatio(0.5).isAnimated(true).shouldShowAllDataPoints(true)
lineContainer.datum(newData).call(lineChart);
const tooltipContainer = d3.select(`.js-line-chart-container .metadata-group .vertical-marker-container`)
tooltip.title("yeooo")
tooltip.topicLabel("topics")
lineChart.on("customMouseOver", tooltip.show)
lineChart.on("customMouseMove", tooltip.update)
lineChart.on("customMouseOut", tooltip.hide)
tooltipContainer.datum([]).call(tooltip)
</script>
</body>

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

@ -2,6 +2,8 @@ import britecharts from "britecharts"
export const notNull = value => value || value === false
export const hasProp = (data, prop) => data.every(d => prop in d)
export const chartTypes = britecharts ? Object.keys(britecharts) : null
//expose chart color schemas for use or reference outside compnent