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

Functional Linechart

pull/4023/head
cmack 6 years ago
parent
41a46847e5
commit
56571e983b
5 changed files with 331 additions and 1047 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 969
      packages/builder/src/components/userInterface/temporaryPanelStructure.js
  2. 3
      packages/standard-components/components.json
  3. 12
      packages/standard-components/src/Chart/Bar.svelte
  4. 243
      packages/standard-components/src/Chart/Line.svelte
  5. 151
      packages/standard-components/src/Chart/tests/line.html

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

File diff suppressed because it is too large

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

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

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

@ -199,19 +199,7 @@
$: chartGradient = getChartGradient(gradient)
</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} />
{#if useLegend}
<div class={legendClass} />
{/if}
<style>
.text-svg {
font: italic 15px serif;
fill: red;
}
</style>

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

@ -1,11 +1,13 @@
<script>
import { getColorSchema, getChartGradient, notNull } from "./utils"
import sort from "fast-sort"
import Tooltip from "./Tooltip.svelte"
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,52 +20,22 @@
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 data = { data: [] }
let chartElement
let chartContainer
let tooltip
let tooltipContainer
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 customMouseOver = () => tooltip.show()
export let customMouseMove = (
dataPoint,
topicColorMap,
dataPointXPosition
) => {
tooltip.update(dataPoint, topicColorMap, dataPointXPosition)
}
export let customMouseOut = () => tooltip.hide()
export let customDataEntryClick = null
export let customTouchMove = null
@ -72,7 +44,6 @@
export let axisTimeCombinations = ""
export let grid = "horizontal"
export let aspectRatio = 0.5
export let dateLabel = "date"
export let width = null
export let height = null
export let isAnimated = true
@ -82,6 +53,7 @@
export let numberFormat = ""
export let shouldShowAllDataPoints = true
export let topicLabel = null
export let dateLabel = "date"
export let valueLabel = null
export let xAxisLabel = ""
export let xAxisValueType = "date"
@ -92,12 +64,13 @@
export let yAxisLabelPadding = null
export let lines = null //not handled by setting prop
export let tooltipThreshold = null
export let tooltipTitle = ""
let chartDrawn = false
onMount(async () => {
if (chart) {
// data = await getAndPrepareData()
data = await getAndPrepareData()
chartContainer = select(`.${chartClass}`)
bindChartUIProps()
bindChartEvents()
@ -121,94 +94,114 @@
}
async function getAndPrepareData() {
let data = []
let dataByTopic = []
let _data = []
if (!topicLabel) {
topicLabel = "topic"
}
if (!valueLabel) {
valueLabel = "value"
}
if (!dateLabel) {
dateLabel = "date"
}
if (model) {
await fetchData()
data = $store[model]
_data = $store[model]
}
return { data }
_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.log("DATA", data)
$: console.table("DATA", data)
function bindChartUIProps() {
chart.grid("horizontal")
chart.dateLabel("date")
chart.aspectRatio(0.5)
chart.isAnimated(true)
// chart.tooltipThreshold(800)
// 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)
// }
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(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(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() {
@ -234,6 +227,10 @@
</script>
<div bind:this={chartElement} class={chartClass} />
<!-- {#if chartDrawn}
<Tooltip bind:tooltip {valueLabel} {chartClass} />
{/if} -->
{#if chartDrawn}
<Tooltip
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>
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 = {
data: [
{
@ -61,9 +208,9 @@ const data = {
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>

Write Preview
Loading…
Cancel
Save