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

WIP: Chart Tests and Line Refactor

pull/4023/head
cmack 6 years ago
parent
fe8bb832b7
commit
e4b4c5723f
7 changed files with 227 additions and 207 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. 87
      packages/builder/src/components/userInterface/temporaryPanelStructure.js
  2. 1
      packages/standard-components/src/Chart/Bar.svelte
  3. 8
      packages/standard-components/src/Chart/GroupedBar.svelte
  4. 256
      packages/standard-components/src/Chart/Line.svelte
  5. 7
      packages/standard-components/src/Chart/Tooltip.svelte
  6. 4
      packages/standard-components/src/Chart/tests/bar.html
  7. 71
      packages/standard-components/src/Chart/tests/line.html

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 @@
}
}
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)
async function getAndPrepareData() {
let data = []
if (model) {
await fetchData()
data = $store[model]
}
return { data }
}
$: console.log("DATA", data)
function bindChartUIProps() {
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
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>
Write Preview
Loading…
Cancel
Save