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

Functional Linechart

This commit is contained in:
cmack 2020-08-17 13:59:09 +01:00
parent f9fa34c84e
commit d23746f748
5 changed files with 332 additions and 1048 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

File diff suppressed because it is too large Load Diff

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

@ -468,7 +468,8 @@
"xAxisScale": "string", "xAxisScale": "string",
"xAxisFormat": "string", "xAxisFormat": "string",
"xAxisCustomFormat": "string", "xAxisCustomFormat": "string",
"xAxisLabel": "string" "xAxisLabel": "string",
"tooltipTitle": "string"
} }
}, },
"brush":{ "brush":{

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

@ -199,19 +199,7 @@
$: chartGradient = getChartGradient(gradient) $: chartGradient = getChartGradient(gradient)
</script> </script>
<!-- SVG Test
<svg viewBox="6 -8 200 22">
<text x="5" y="10" class="text-svg">Hello World</text>
</svg>-->
<div bind:this={chartElement} class={chartClass} /> <div bind:this={chartElement} class={chartClass} />
{#if useLegend} {#if useLegend}
<div class={legendClass} /> <div class={legendClass} />
{/if} {/if}
<style>
.text-svg {
font: italic 15px serif;
fill: red;
}
</style>

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

@ -1,11 +1,13 @@
<script> <script>
import { getColorSchema, getChartGradient, notNull } from "./utils" import { getColorSchema, getChartGradient, notNull } from "./utils"
import sort from "fast-sort"
import Tooltip from "./Tooltip.svelte" import Tooltip from "./Tooltip.svelte"
import britecharts from "britecharts" import britecharts from "britecharts"
import { onMount } from "svelte" import { onMount } from "svelte"
import { select } from "d3-selection" import { select } from "d3-selection"
import shortid from "shortid" import shortid from "shortid"
import { log } from "console"
const _id = shortid.generate() const _id = shortid.generate()
@ -18,52 +20,22 @@
const chartClass = `line-container-${_id}` const chartClass = `line-container-${_id}`
const legendClass = `legend-container-${_id}` const legendClass = `legend-container-${_id}`
const testData = { let data = { 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,
},
],
}
let data = testData
let chartElement let chartElement
let chartContainer let chartContainer
let tooltip let tooltip
let tooltipContainer let tooltipContainer
export let customMouseOver = null //() => tooltip.show() export let customMouseOver = () => tooltip.show()
export let customMouseMove = null //(dataPoint, topicColorMap, dataPointXPosition) => export let customMouseMove = (
//tooltip.update(dataPoint, topicColorMap, dataPointXPosition) dataPoint,
export let customMouseOut = null //() => tooltip.hide() topicColorMap,
dataPointXPosition
) => {
tooltip.update(dataPoint, topicColorMap, dataPointXPosition)
}
export let customMouseOut = () => tooltip.hide()
export let customDataEntryClick = null export let customDataEntryClick = null
export let customTouchMove = null export let customTouchMove = null
@ -72,7 +44,6 @@
export let axisTimeCombinations = "" export let axisTimeCombinations = ""
export let grid = "horizontal" export let grid = "horizontal"
export let aspectRatio = 0.5 export let aspectRatio = 0.5
export let dateLabel = "date"
export let width = null export let width = null
export let height = null export let height = null
export let isAnimated = true export let isAnimated = true
@ -82,6 +53,7 @@
export let numberFormat = "" export let numberFormat = ""
export let shouldShowAllDataPoints = true export let shouldShowAllDataPoints = true
export let topicLabel = null export let topicLabel = null
export let dateLabel = "date"
export let valueLabel = null export let valueLabel = null
export let xAxisLabel = "" export let xAxisLabel = ""
export let xAxisValueType = "date" export let xAxisValueType = "date"
@ -92,12 +64,13 @@
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
export let tooltipTitle = ""
let chartDrawn = false let chartDrawn = false
onMount(async () => { onMount(async () => {
if (chart) { if (chart) {
// data = await getAndPrepareData() data = await getAndPrepareData()
chartContainer = select(`.${chartClass}`) chartContainer = select(`.${chartClass}`)
bindChartUIProps() bindChartUIProps()
bindChartEvents() bindChartEvents()
@ -121,94 +94,114 @@
} }
async function getAndPrepareData() { async function getAndPrepareData() {
let data = [] let dataByTopic = []
if (model) { let _data = []
await fetchData()
data = $store[model] if (!topicLabel) {
} topicLabel = "topic"
return { data }
} }
$: console.log("DATA", data) if (!valueLabel) {
valueLabel = "value"
}
if (!dateLabel) {
dateLabel = "date"
}
if (model) {
await fetchData()
_data = $store[model]
}
_data.forEach((data, idx, arr) => {
let topicName = data[topicLabel]
if (!dataByTopic.some(dt => dt.topicName === topicName)) {
let d = {
topicName,
topic: dataByTopic.length + 1,
dates: arr
.filter(d => d[topicLabel] === topicName)
.map(d => ({ date: new Date(d[dateLabel]), value: d[valueLabel] })),
}
d.dates = d.dates.sort((a, b) => a.date - b.date)
dataByTopic.push(d)
}
})
return { dataByTopic }
}
$: console.table("DATA", data)
function bindChartUIProps() { function bindChartUIProps() {
chart.grid("horizontal") chart.grid("horizontal")
chart.dateLabel("date")
chart.aspectRatio(0.5)
chart.isAnimated(true) chart.isAnimated(true)
// chart.tooltipThreshold(800)
// if (notNull(color)) { if (notNull(color)) {
// //chart.colorSchema(colorSchema) chart.colorSchema(colorSchema)
// } }
// if (notNull(lineGradient)) { if (notNull(lineGradient)) {
// chart.lineGradient(chartGradient) chart.lineGradient(chartGradient)
// } }
// if (notNull(axisTimeCombinations)) { if (notNull(axisTimeCombinations)) {
// chart.axisTimeCombinations(axisTimeCombinations) chart.axisTimeCombinations(axisTimeCombinations)
// } }
// if (notNull(grid)) { if (notNull(grid)) {
// chart.grid(grid) chart.grid(grid)
// } }
// if (notNull(aspectRatio)) { if (notNull(aspectRatio)) {
// chart.aspectRatio(aspectRatio) chart.aspectRatio(aspectRatio)
// } }
// if (notNull(dateLabel)) { if (notNull(width)) {
// chart.dateLabel(dateLabel) chart.width(width)
// } }
// if (notNull(width)) { if (notNull(height)) {
// chart.width(width) chart.height(height)
// } }
// if (notNull(height)) { if (notNull(isAnimated)) {
// chart.height(height) chart.isAnimated(isAnimated)
// } }
// if (notNull(isAnimated)) { if (notNull(lineCurve)) {
// chart.isAnimated(isAnimated) chart.lineCurve(lineCurve)
// } }
// if (notNull(lineCurve)) { if (notNull(locale)) {
// chart.lineCurve(lineCurve) chart.locale(locale)
// } }
// if (notNull(locale)) { if (notNull(numberFormat)) {
// chart.locale(locale) chart.numberFormat(numberFormat)
// } }
// if (notNull(numberFormat)) { if (notNull(shouldShowAllDataPoints)) {
// chart.numberFormat(numberFormat) chart.shouldShowAllDataPoints(shouldShowAllDataPoints)
// } }
// 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)) { if (notNull(tooltipThreshold)) {
// chart.xAxisCustomFormat(xAxisCustomFormat) chart.tooltipThreshold(tooltipThreshold)
// } }
// if (notNull(yAxisLabel)) { if (notNull(lines)) {
// chart.yAxisLabel(yAxisLabel) chart.lines(lines)
// } }
// if (notNull(yAxisLabelPadding)) {
// chart.yAxisLabelPadding(yAxisLabelPadding)
// }
// if (notNull(tooltipThreshold)) {
// chart.tooltipThreshold(tooltipThreshold)
// }
// if (notNull(lines)) {
// chart.lines(lines)
// }
} }
function bindChartEvents() { function bindChartEvents() {
@ -234,6 +227,10 @@
</script> </script>
<div bind:this={chartElement} class={chartClass} /> <div bind:this={chartElement} class={chartClass} />
<!-- {#if chartDrawn} {#if chartDrawn}
<Tooltip bind:tooltip {valueLabel} {chartClass} /> <Tooltip
{/if} --> bind:tooltip
title={tooltipTitle || 'Line Tooltip'}
topicLabel="topics"
{chartClass} />
{/if}

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

@ -22,6 +22,153 @@
<script> <script>
const testData = {
data: [
{
amount: 8,
audited: new Date("2020-01-01T16:00:00-08:00"),
city: "Belfast",
name: 1,
modelId: "2334751ac0764c1a931bff5b6b6767eb",
type: "record",
_id: "ceb87054790f480e80512368545755bb",
_rev: "2-56e401ebaf59e6310b85fb0c6c2fece5",
},
{
amount: 12,
audited: new Date("2020-01-03T16:00:00-08:00"),
city: "Belfast",
name: 1,
modelId: "2334751ac0764c1a931bff5b6b6767eb",
type: "record",
_id: "0a36103b55124f348a23d10b2f3ed0e3",
_rev: "2-50d62530b2edfc63d5fd0b3719dbb286",
},
{
amount: 6,
audited: new Date("2020-01-04T16:00:00-08:00"),
city: "Belfast",
name: 1,
modelId: "2334751ac0764c1a931bff5b6b6767eb",
type: "record",
_id: "68ade2bb94754caa8fc62c7084e3cef7",
_rev: "2-a03fe02f3595920adfbcd9c70564fe9d",
},
{
amount: 2,
audited: new Date("2020-01-01T16:00:00-08:00"),
city: "Dublin",
name: 2,
modelId: "2334751ac0764c1a931bff5b6b6767eb",
type: "record",
_id: "2ab6dabf833f4d99b3438fa4353ba429",
_rev: "2-45b190489e76842981902cc9f04369ec",
},
{
amount: 16,
audited: new Date("2020-01-02T16:00:00-08:00"),
city: "Dublin",
name: 2,
modelId: "2334751ac0764c1a931bff5b6b6767eb",
type: "record",
_id: "1b2ca36db1724427a98ba95547f946e0",
_rev: "2-c43def17ada959948b9af5484ad5b6b7",
},
{
amount: 7,
audited: new Date("2020-01-03T16:00:00-08:00"),
city: "Dublin",
name: 2,
modelId: "2334751ac0764c1a931bff5b6b6767eb",
type: "record",
_id: "d9235d884a224ca68ac30cefdbb8ae53",
_rev: "2-695e426a261a25474cbf6b1f069dccb4",
},
{
amount: 3,
audited: new Date("2020-01-04T16:00:00-08:00"),
city: "Dublin",
name: 2,
modelId: "2334751ac0764c1a931bff5b6b6767eb",
type: "record",
_id: "9f8bc39a9cfb4f779da8c998d7622927",
_rev: "2-8ae1aff82e1ffc6ffa75f6b9d074e003",
},
{
amount: 4,
audited: new Date("2020-01-02T16:00:00-08:00"),
city: "London",
name: 3,
modelId: "2334751ac0764c1a931bff5b6b6767eb",
type: "record",
_id: "75274e906073493bbf75cda8656e8db0",
_rev: "2-6cfc6bb2fccb83c92b50aa5507f2a092"
},
{
amount: 22,
audited: new Date("2020-01-06T16:00:00-08:00"),
city: "London",
name: 3,
modelId: "2334751ac0764c1a931bff5b6b6767eb",
type: "record",
_id: "da3d4b151bc641f4ace487a2314d2550",
_rev: "2-ac18490eaa016be0e71bd4c4ea332981",
}
]
}
const topicLabel = "city"
const valueLabel = "amount"
const dateLabel = "audited"
function prepareData() {
let dataByTopic = []
testData.data.forEach((data, idx, arr) => {
let topicName = data[topicLabel]
if(!dataByTopic.some(dt => dt.topicName === topicName)) {
let d = {topicName, topic: dataByTopic.length + 1, dates: arr.filter(d => d[topicLabel] === topicName).map(d => ({date: d[dateLabel], value: d[valueLabel]}))}
dataByTopic.push(d)
}
})
return {dataByTopic}
}
const newData = prepareData()
debugger
const dataByTopic = {
dataByTopic: [
{
topicName: 'San Francisco',
topic: 123,
dates: [
{
date: '2017-01-16T16:00:00-08:00',
value: 1
},
{
date: '2017-01-16T17:00:00-08:00',
value: 2
}
]
},
{
topicName: 'Belfast',
topic: 456,
dates: [
{
date: '2017-01-16T16:00:00-08:00',
value: 5
},
{
date: '2017-01-16T17:00:00-08:00',
value: 8
}
]
}
]
}
const data = { const data = {
data: [ data: [
{ {
@ -61,9 +208,9 @@ const data = {
const lineChart = britecharts.line() const lineChart = britecharts.line()
lineChart.grid("horizontal").dateLabel("date").aspectRatio(0.5).isAnimated(true) lineChart.grid("horizontal").aspectRatio(0.5).isAnimated(true).shouldShowAllDataPoints(true)
lineContainer.datum(data).call(lineChart); lineContainer.datum(newData).call(lineChart);
</script> </script>