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

WIP: Chart Tests and Line Refactor

This commit is contained in:
cmack 2020-08-12 10:02:36 +01:00
parent fe8bb832b7
commit e4b4c5723f
7 changed files with 227 additions and 207 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1580,58 +1580,6 @@ export default {
_component: "@budibase/standard-components/line", _component: "@budibase/standard-components/line",
description: "Line chart", description: "Line chart",
icon: "ri-bar-chart-fill", 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: { properties: {
settings: [ settings: [
{ {
@ -1639,16 +1587,6 @@ export default {
key: "model", key: "model",
control: ModelSelect, control: ModelSelect,
}, },
{
label: "X Axis Combo",
key: "axisTimeCombinations",
control: Input,
},
{
label: "X Axis Combo",
key: "axisTimeCombinations",
control: Input,
},
{ {
label: "Colors", label: "Colors",
key: "color", key: "color",
@ -1688,6 +1626,16 @@ export default {
key: "dateLabel", key: "dateLabel",
control: Input, control: Input,
}, },
{
label: "Topic Label",
key: "topicLabel",
control: Input,
},
{
label: "Value Label",
key: "valueLabel",
control: Input,
},
{ {
label: "Width", label: "Width",
key: "width", key: "width",
@ -1721,21 +1669,6 @@ export default {
"catmullRom", "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", label: "X Axis Label",
key: "xAxisLabel", key: "xAxisLabel",

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

@ -8,7 +8,6 @@
/* /*
ISSUES: ISSUES:
- x and y axis label set and appear in the dom but do not display next to the axis - x and y axis label set and appear in the dom but do not display next to the axis
- x and y axis label offset - does effect position of labels but does not render text (see above)
- x tick label overlaps bar, seems to be no apu method to change this? Could do it by querying for it in the dom - 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> for this element: <tspan x="-10" dy="0.32em">4.0</tspan>
*/ */

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

@ -159,11 +159,5 @@
<div bind:this={chartElement} class={chartClass} /> <div bind:this={chartElement} class={chartClass} />
{#if chartDrawn} {#if chartDrawn}
<Tooltip <Tooltip bind:tooltip {nameLabel} {valueLabel} {chartClass} />
bind:tooltip
{chartDrawn}
{nameLabel}
{valueLabel}
{chartClass}
{data} />
{/if} {/if}

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

@ -1,5 +1,6 @@
<script> <script>
import { getColorSchema, getChartGradient, notNull } from "./utils" import { getColorSchema, getChartGradient, notNull } from "./utils"
import Tooltip from "./Tooltip.svelte"
import britecharts from "britecharts" import britecharts from "britecharts"
import { onMount } from "svelte" import { onMount } from "svelte"
@ -17,18 +18,56 @@
const chartClass = `line-container-${_id}` const chartClass = `line-container-${_id}`
const legendClass = `legend-container-${_id}` const legendClass = `legend-container-${_id}`
const testData = {
data: [
{
topicName: "Oakland",
name: 2,
date: "2017-01-16T16:00:00-08:00",
value: 3,
},
{
topicName: "Oakland",
name: 2,
date: "2017-01-17T16:00:00-08:00",
value: 7,
},
{
topicName: "Oakland",
name: 2,
date: "2017-01-18T16:00:00-08:00",
value: 5,
},
{
topicName: "Oakland",
name: 2,
date: "2017-01-19T16:00:00-08:00",
value: 6,
},
{
topicName: "Oakland",
name: 2,
date: "2017-01-20T16:00:00-08:00",
value: 1,
},
],
}
let data = testData
let chartElement let chartElement
let chartContainer let chartContainer
let tooltip let tooltip
let tooltipContainer let tooltipContainer
export let customMouseHover = null export let customMouseOver = null //() => tooltip.show()
export let customMouseMove = null export let customMouseMove = null //(dataPoint, topicColorMap, dataPointXPosition) =>
export let customMouseOut = null //tooltip.update(dataPoint, topicColorMap, dataPointXPosition)
export let customMouseOut = null //() => tooltip.hide()
export let customDataEntryClick = null export let customDataEntryClick = null
export let customTouchMove = null export let customTouchMove = null
export let data = []
export let color = "britecharts" export let color = "britecharts"
export let axisTimeCombinations = "" export let axisTimeCombinations = ""
export let grid = "horizontal" export let grid = "horizontal"
@ -38,6 +77,7 @@
export let height = null export let height = null
export let isAnimated = true export let isAnimated = true
export let lineCurve = "linear" //see api for possible opts export let lineCurve = "linear" //see api for possible opts
export let lineGradient = null
export let locale = "en-GB" export let locale = "en-GB"
export let numberFormat = "" export let numberFormat = ""
export let shouldShowAllDataPoints = true export let shouldShowAllDataPoints = true
@ -49,21 +89,20 @@
export let xAxisFormat = "day-month" export let xAxisFormat = "day-month"
export let xAxisCustomFormat = "%H" export let xAxisCustomFormat = "%H"
export let yAxisLabel = null export let yAxisLabel = null
export let useLegend = true
export let yAxisLabelPadding = null export let yAxisLabelPadding = null
export let lines = null //not handled by setting prop export let lines = null //not handled by setting prop
export let tooltipThreshold = null export let tooltipThreshold = null
let chartDrawn = false
onMount(async () => { onMount(async () => {
if (chart) { if (chart) {
if (model) { // data = await getAndPrepareData()
await fetchData()
}
chartContainer = select(`.${chartClass}`) chartContainer = select(`.${chartClass}`)
bindChartUIProps() bindChartUIProps()
bindChartEvents() bindChartEvents()
chartContainer.datum(_data).call(chart) chartContainer.datum(data).call(chart)
bindChartTooltip() chartDrawn = true
} }
}) })
@ -81,75 +120,100 @@
} }
} }
async function getAndPrepareData() {
let data = []
if (model) {
await fetchData()
data = $store[model]
}
return { data }
}
$: console.log("DATA", data)
function bindChartUIProps() { function bindChartUIProps() {
if (notNull(color)) { chart.grid("horizontal")
chart.colorSchema(colorSchema) chart.dateLabel("date")
} chart.aspectRatio(0.5)
if (notNull(axisTimeCombinations)) { chart.isAnimated(true)
chart.axisTimeCombinations(axisTimeCombinations)
} // if (notNull(color)) {
if (notNull(grid)) { // //chart.colorSchema(colorSchema)
chart.grid(grid) // }
} // if (notNull(lineGradient)) {
if (notNull(aspectRatio)) { // chart.lineGradient(chartGradient)
chart.aspectRatio(aspectRatio) // }
} // if (notNull(axisTimeCombinations)) {
if (notNull(dateLabel)) { // chart.axisTimeCombinations(axisTimeCombinations)
chart.dateLabel(dateLabel) // }
} // if (notNull(grid)) {
if (notNull(width)) { // chart.grid(grid)
chart.width(width) // }
} // if (notNull(aspectRatio)) {
if (notNull(height)) { // chart.aspectRatio(aspectRatio)
chart.height(height) // }
} // if (notNull(dateLabel)) {
if (notNull(isAnimated)) { // chart.dateLabel(dateLabel)
chart.isAnimated(isAnimated) // }
} // if (notNull(width)) {
if (notNull(lineCurve)) { // chart.width(width)
chart.lineCurve(lineCurve) // }
} // if (notNull(height)) {
if (notNull(locale)) { // chart.height(height)
chart.locale(locale) // }
} // if (notNull(isAnimated)) {
if (notNull(numberFormat)) { // chart.isAnimated(isAnimated)
chart.numberFormat(numberFormat) // }
} // if (notNull(lineCurve)) {
if (notNull(shouldShowAllDataPoints)) { // chart.lineCurve(lineCurve)
chart.shouldShowAllDataPoints(shouldShowAllDataPoints) // }
} // if (notNull(locale)) {
if (notNull(topicLabel)) { // chart.locale(locale)
chart.topicLabel(topicLabel) // }
} // if (notNull(numberFormat)) {
if (notNull(valueLabel)) { // chart.numberFormat(numberFormat)
chart.valueLabel(valueLabel) // }
} // if (notNull(shouldShowAllDataPoints)) {
if (notNull(xAxisLabel)) { // chart.shouldShowAllDataPoints(shouldShowAllDataPoints)
chart.xAxisLabel(xAxisLabel) // }
} // if (notNull(topicLabel)) {
if (notNull(xAxisValueType)) { // chart.topicLabel(topicLabel)
chart.xAxisValueType(xAxisValueType) // }
} // if (notNull(valueLabel)) {
if (notNull(xAxisScale)) { // chart.valueLabel(valueLabel)
chart.xAxisScale(xAxisScale) // }
} // if (notNull(xAxisLabel)) {
if (notNull(xAxisFormat)) { // chart.xAxisLabel(xAxisLabel)
chart.xAxisFormat(xAxisFormat) // }
} // if (notNull(xAxisValueType)) {
if (notNull(xAxisCustomFormat)) { // chart.xAxisValueType(xAxisValueType)
chart.xAxisCustomFormat(xAxisCustomFormat) // }
} // if (notNull(xAxisScale)) {
if (notNull(yAxisLabel)) { // chart.xAxisScale(xAxisScale)
chart.yAxisLabel(yAxisLabel) // }
} // if (notNull(xAxisFormat)) {
if (notNull(yAxisLabelPadding)) { // chart.xAxisFormat(xAxisFormat)
chart.yAxisLabelPadding(yAxisLabelPadding) // }
} // if (notNull(xAxisCustomFormat)) {
// chart.xAxisCustomFormat(xAxisCustomFormat)
// }
// if (notNull(yAxisLabel)) {
// chart.yAxisLabel(yAxisLabel)
// }
// if (notNull(yAxisLabelPadding)) {
// chart.yAxisLabelPadding(yAxisLabelPadding)
// }
// if (notNull(tooltipThreshold)) {
// chart.tooltipThreshold(tooltipThreshold)
// }
// if (notNull(lines)) {
// chart.lines(lines)
// }
} }
function bindChartEvents() { function bindChartEvents() {
if (customMouseHover) { if (customMouseOver) {
chart.on("customMouseHover", customMouseHover) chart.on("customMouseOver", customMouseOver)
} }
if (customMouseMove) { if (customMouseMove) {
chart.on("customMouseMove", customMouseMove) chart.on("customMouseMove", customMouseMove)
@ -165,45 +229,11 @@
} }
} }
function bindChartTooltip() {
tooltip = britecharts.miniTooltip()
tooltipContainer = select(`.${chartClass} .metadata-group`)
tooltipContainer.datum([]).call(tooltip)
}
$: _data = model ? $store[model] : data
$: colorSchema = getColorSchema(color) $: colorSchema = getColorSchema(color)
$: chartGradient = getChartGradient(lineGradient)
</script> </script>
<div bind:this={chartElement} class={chartClass} /> <div bind:this={chartElement} class={chartClass} />
{#if useLegend} <!-- {#if chartDrawn}
<div class={legendClass} /> <Tooltip bind:tooltip {valueLabel} {chartClass} />
{/if} {/if} -->
<!--
isAnimated={true}
aspectRatio={0.5}
grid='horizontal'
tooltipThreshold={600}
width={600}
dateLabel='fullDate'
{type}
{data}
{colorSchema}
{axisTimeCombinations}
{lineCurve}
{numberFormat}
{height}
{topicLabel}
{shouldShowAllDataPoints}
{xAxisLabel}
{valueLabel}
{xAxisValueType}
{xAxisScale}
{xAxisCustomFormat}
-->

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

@ -10,8 +10,6 @@
export let chartClass = "" export let chartClass = ""
let tooltipContainer let tooltipContainer
export let data = []
export let axisTimeCombinations = null export let axisTimeCombinations = null
export let dateCustomFormat = null export let dateCustomFormat = null
export let dateFormat = null export let dateFormat = null
@ -32,11 +30,6 @@
tooltipContainer.datum([]).call(tooltip) tooltipContainer.datum([]).call(tooltip)
}) })
// $: if (chartDrawn) {
// tooltipContainer = select(`.${chartClass} .metadata-group`)
// tooltipContainer.datum([]).call(tooltip)
// }
$: if (tooltipContainer) { $: if (tooltipContainer) {
if (notNull(axisTimeCombinations)) { if (notNull(axisTimeCombinations)) {
tooltip.axisTimeCombinations(axisTimeCombinations) tooltip.axisTimeCombinations(axisTimeCombinations)

4
packages/standard-components/src/Chart/tests/bar.html
View File

@ -6,8 +6,8 @@
<title>Document</title> <title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-selection/1.2.0/d3-selection.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-selection/1.2.0/d3-selection.js"></script>
<script src="https://cdn.jsdelivr.net/npm/britecharts@2.10.0/dist/umd/bar.min.js"
type="text/javascript"></script> <script src="../../../node_modules/britecharts/dist/umd/bar.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/britecharts/dist/css/britecharts.min.css" type="text/css" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/britecharts/dist/css/britecharts.min.css" type="text/css" />

71
packages/standard-components/src/Chart/tests/line.html Normal file
View File

@ -0,0 +1,71 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Line</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-selection/1.2.0/d3-selection.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/britecharts@2.10.0/dist/umd/line.min.js"
type="text/javascript"></script> -->
<script src="../../../node_modules/britecharts/dist/umd/line.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/britecharts/dist/css/britecharts.min.css" type="text/css" />
</head>
<body>
<article>
<div class="js-line-chart-container line-chart-container card--chart"></div>
</article>
<script>
const data = {
data: [
{
topicName: "Oakland",
name: 2,
date: "2017-01-16T16:00:00-08:00",
value: 3,
},
{
topicName: "Oakland",
name: 2,
date: "2017-01-17T16:00:00-08:00",
value: 7,
},
{
topicName: "Oakland",
name: 2,
date: "2017-01-18T16:00:00-08:00",
value: 5,
},
{
topicName: "Oakland",
name: 2,
date: "2017-01-19T16:00:00-08:00",
value: 6,
},
{
topicName: "Oakland",
name: 2,
date: "2017-01-20T16:00:00-08:00",
value: 1,
},
],
}
const lineContainer = d3.select('.js-line-chart-container');
const lineChart = britecharts.line()
lineChart.grid("horizontal").dateLabel("date").aspectRatio(0.5).isAnimated(true)
lineContainer.datum(data).call(lineChart);
</script>
</body>
</html>