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 932ef5f165
commit 0c9f337814
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",
description: "Line chart",
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: {
settings: [
{
@ -1639,16 +1587,6 @@ export default {
key: "model",
control: ModelSelect,
},
{
label: "X Axis Combo",
key: "axisTimeCombinations",
control: Input,
},
{
label: "X Axis Combo",
key: "axisTimeCombinations",
control: Input,
},
{
label: "Colors",
key: "color",
@ -1688,6 +1626,16 @@ export default {
key: "dateLabel",
control: Input,
},
{
label: "Topic Label",
key: "topicLabel",
control: Input,
},
{
label: "Value Label",
key: "valueLabel",
control: Input,
},
{
label: "Width",
key: "width",
@ -1721,21 +1669,6 @@ export default {
"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",
key: "xAxisLabel",

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

@ -8,7 +8,6 @@
/*
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 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
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} />
{#if chartDrawn}
<Tooltip
bind:tooltip
{chartDrawn}
{nameLabel}
{valueLabel}
{chartClass}
{data} />
<Tooltip bind:tooltip {nameLabel} {valueLabel} {chartClass} />
{/if}

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

@ -1,5 +1,6 @@
<script>
import { getColorSchema, getChartGradient, notNull } from "./utils"
import Tooltip from "./Tooltip.svelte"
import britecharts from "britecharts"
import { onMount } from "svelte"
@ -17,18 +18,56 @@
const chartClass = `line-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 chartContainer
let tooltip
let tooltipContainer
export let customMouseHover = null
export let customMouseMove = null
export let customMouseOut = null
export let customMouseOver = null //() => tooltip.show()
export let customMouseMove = null //(dataPoint, topicColorMap, dataPointXPosition) =>
//tooltip.update(dataPoint, topicColorMap, dataPointXPosition)
export let customMouseOut = null //() => tooltip.hide()
export let customDataEntryClick = null
export let customTouchMove = null
export let data = []
export let color = "britecharts"
export let axisTimeCombinations = ""
export let grid = "horizontal"
@ -38,6 +77,7 @@
export let height = null
export let isAnimated = true
export let lineCurve = "linear" //see api for possible opts
export let lineGradient = null
export let locale = "en-GB"
export let numberFormat = ""
export let shouldShowAllDataPoints = true
@ -49,21 +89,20 @@
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
let chartDrawn = false
onMount(async () => {
if (chart) {
if (model) {
await fetchData()
}
// data = await getAndPrepareData()
chartContainer = select(`.${chartClass}`)
bindChartUIProps()
bindChartEvents()
chartContainer.datum(_data).call(chart)
bindChartTooltip()
chartContainer.datum(data).call(chart)
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() {
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)
}
chart.grid("horizontal")
chart.dateLabel("date")
chart.aspectRatio(0.5)
chart.isAnimated(true)
// if (notNull(color)) {
// //chart.colorSchema(colorSchema)
// }
// if (notNull(lineGradient)) {
// chart.lineGradient(chartGradient)
// }
// 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)
// }
// if (notNull(tooltipThreshold)) {
// chart.tooltipThreshold(tooltipThreshold)
// }
// if (notNull(lines)) {
// chart.lines(lines)
// }
}
function bindChartEvents() {
if (customMouseHover) {
chart.on("customMouseHover", customMouseHover)
if (customMouseOver) {
chart.on("customMouseOver", customMouseOver)
}
if (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)
$: chartGradient = getChartGradient(lineGradient)
</script>
<div bind:this={chartElement} class={chartClass} />
{#if useLegend}
<div class={legendClass} />
{/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}
-->
<!-- {#if chartDrawn}
<Tooltip bind:tooltip {valueLabel} {chartClass} />
{/if} -->

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

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

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

@ -6,8 +6,8 @@
<title>Document</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/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" />

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>