Add candlestick chart
This commit is contained in:
Andrew Kingston
parent
8742c936d2
commit
3457b308b2
|
|
@ -829,6 +829,91 @@ export default {
|
|||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Candlestick Chart",
|
||||
_component: "@budibase/standard-components/candlestick",
|
||||
description: "Candlestick chart",
|
||||
icon: "ri-bar-chart-line",
|
||||
properties: {
|
||||
settings: [
|
||||
{
|
||||
label: "Title",
|
||||
key: "title",
|
||||
control: Input,
|
||||
},
|
||||
{
|
||||
label: "Data",
|
||||
key: "datasource",
|
||||
control: TableViewSelect,
|
||||
},
|
||||
{
|
||||
label: "Date Col.",
|
||||
key: "dateColumn",
|
||||
dependsOn: "datasource",
|
||||
control: TableViewFieldSelect,
|
||||
},
|
||||
{
|
||||
label: "Open Col.",
|
||||
key: "openColumn",
|
||||
dependsOn: "datasource",
|
||||
control: TableViewFieldSelect,
|
||||
},
|
||||
{
|
||||
label: "Close Col.",
|
||||
key: "closeColumn",
|
||||
dependsOn: "datasource",
|
||||
control: TableViewFieldSelect,
|
||||
},
|
||||
{
|
||||
label: "High Col.",
|
||||
key: "highColumn",
|
||||
dependsOn: "datasource",
|
||||
control: TableViewFieldSelect,
|
||||
},
|
||||
{
|
||||
label: "Low Col.",
|
||||
key: "lowColumn",
|
||||
dependsOn: "datasource",
|
||||
control: TableViewFieldSelect,
|
||||
},
|
||||
{
|
||||
label: "Format",
|
||||
key: "yAxisUnits",
|
||||
control: OptionSelect,
|
||||
options: ["Default", "Thousands", "Millions"],
|
||||
defaultValue: "Default",
|
||||
},
|
||||
{
|
||||
label: "Y Axis Label",
|
||||
key: "yAxisLabel",
|
||||
control: Input,
|
||||
},
|
||||
{
|
||||
label: "X Axis Label",
|
||||
key: "xAxisLabel",
|
||||
control: Input,
|
||||
},
|
||||
{
|
||||
label: "Width",
|
||||
key: "width",
|
||||
control: Input,
|
||||
},
|
||||
{
|
||||
label: "Height",
|
||||
key: "height",
|
||||
control: Input,
|
||||
defaultValue: "400",
|
||||
},
|
||||
{
|
||||
label: "Animate",
|
||||
key: "animate",
|
||||
control: Checkbox,
|
||||
valueKey: "checked",
|
||||
defaultValue: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -405,10 +405,10 @@
|
|||
"labelColumn": "string",
|
||||
"valueColumns": "string",
|
||||
"height": {
|
||||
"type": "number",
|
||||
"type": "string",
|
||||
"default": "400"
|
||||
},
|
||||
"width": "number",
|
||||
"width": "string",
|
||||
"dataLabels": "bool",
|
||||
"animate": {
|
||||
"type": "bool",
|
||||
|
|
@ -436,10 +436,10 @@
|
|||
"labelColumn": "string",
|
||||
"valueColumns": "string",
|
||||
"height": {
|
||||
"type": "number",
|
||||
"type": "string",
|
||||
"default": "400"
|
||||
},
|
||||
"width": "number",
|
||||
"width": "string",
|
||||
"dataLabels": {
|
||||
"type": "bool",
|
||||
"default": false
|
||||
|
|
@ -478,10 +478,10 @@
|
|||
"labelColumn": "string",
|
||||
"valueColumns": "string",
|
||||
"height": {
|
||||
"type": "number",
|
||||
"type": "string",
|
||||
"default": "400"
|
||||
},
|
||||
"width": "number",
|
||||
"width": "string",
|
||||
"dataLabels": {
|
||||
"type": "bool",
|
||||
"default": false
|
||||
|
|
@ -525,10 +525,10 @@
|
|||
"labelColumn": "string",
|
||||
"valueColumn": "string",
|
||||
"height": {
|
||||
"type": "number",
|
||||
"type": "string",
|
||||
"default": "200"
|
||||
},
|
||||
"width": "number",
|
||||
"width": "string",
|
||||
"dataLabels": "bool",
|
||||
"animate": {
|
||||
"type": "bool",
|
||||
|
|
@ -549,10 +549,10 @@
|
|||
"labelColumn": "string",
|
||||
"valueColumn": "string",
|
||||
"height": {
|
||||
"type": "number",
|
||||
"type": "string",
|
||||
"default": "200"
|
||||
},
|
||||
"width": "number",
|
||||
"width": "string",
|
||||
"dataLabels": "bool",
|
||||
"animate": {
|
||||
"type": "bool",
|
||||
|
|
@ -564,6 +564,37 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"candlestick": {
|
||||
"description": "Candlestick Chart",
|
||||
"data": true,
|
||||
"props": {
|
||||
"title": "string",
|
||||
"datasource": "tables",
|
||||
"dateColumn": "string",
|
||||
"openColumn": "string",
|
||||
"closeColumn": "string",
|
||||
"highColumn": "string",
|
||||
"lowColumn": "string",
|
||||
"height": {
|
||||
"type": "string",
|
||||
"default": "400"
|
||||
},
|
||||
"width": "string",
|
||||
"animate": {
|
||||
"type": "bool",
|
||||
"default": true
|
||||
},
|
||||
"xAxisLabel": "string",
|
||||
"yAxisLabel": "string",
|
||||
"yAxisUnits": {
|
||||
"type": "options",
|
||||
"default": "Default",
|
||||
"options": [
|
||||
"Default", "Thousands", "Millions"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"datepicker": {
|
||||
"name": "Date Picker",
|
||||
"description": "Date Picker",
|
||||
|
|
|
|||
|
|
@ -142,4 +142,8 @@ export class ApexOptionsBuilder {
|
|||
xType(type) {
|
||||
return this.setOption(["xaxis", "type"], type)
|
||||
}
|
||||
|
||||
yTooltip(yTooltip) {
|
||||
return this.setOption(["yaxis", "tooltip", "enabled"], yTooltip)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,70 @@
|
|||
<script>
|
||||
import { onMount } from "svelte"
|
||||
import fetchData, { fetchSchema } from "../fetchData"
|
||||
import { ApexOptionsBuilder } from "./ApexOptionsBuilder"
|
||||
import ApexChart from "./ApexChart.svelte"
|
||||
|
||||
export let _bb
|
||||
export let title
|
||||
export let datasource
|
||||
export let dateColumn
|
||||
export let openColumn
|
||||
export let highColumn
|
||||
export let lowColumn
|
||||
export let closeColumn
|
||||
export let xAxisLabel
|
||||
export let yAxisLabel
|
||||
export let height
|
||||
export let width
|
||||
export let animate
|
||||
export let yAxisUnits
|
||||
|
||||
const store = _bb.store
|
||||
let options
|
||||
|
||||
// Fetch data on mount
|
||||
onMount(async () => {
|
||||
const allCols = [dateColumn, openColumn, highColumn, lowColumn, closeColumn]
|
||||
if (!datasource || allCols.find(x => x == null)) {
|
||||
return
|
||||
}
|
||||
|
||||
// Fetch, filter and sort data
|
||||
const schema = await fetchSchema(datasource.tableId)
|
||||
const result = await fetchData(datasource, $store)
|
||||
const reducer = row => (valid, column) => valid && row[column] != null
|
||||
const hasAllColumns = row => allCols.reduce(reducer(row), true)
|
||||
const data = result
|
||||
.filter(row => hasAllColumns(row))
|
||||
.slice(0, 100)
|
||||
.sort((a, b) => (a[dateColumn] > b[dateColumn] ? 1 : -1))
|
||||
if (!schema || !data.length) {
|
||||
return
|
||||
}
|
||||
|
||||
// Initialise default chart
|
||||
let builder = new ApexOptionsBuilder()
|
||||
.type("candlestick")
|
||||
.title(title)
|
||||
.width(width)
|
||||
.height(height)
|
||||
.xLabel(xAxisLabel)
|
||||
.yLabel(yAxisLabel)
|
||||
.animate(animate)
|
||||
.yUnits(yAxisUnits)
|
||||
.yTooltip(true)
|
||||
.xType("datetime")
|
||||
|
||||
// Add data
|
||||
const chartData = data.map(row => ({
|
||||
x: row[dateColumn],
|
||||
y: [row[openColumn], row[highColumn], row[lowColumn], row[closeColumn]],
|
||||
}))
|
||||
builder = builder.series([{ data: chartData }])
|
||||
|
||||
// Build chart options
|
||||
options = builder.getOptions()
|
||||
})
|
||||
</script>
|
||||
|
||||
<ApexChart {options} />
|
||||
|
|
@ -3,3 +3,4 @@ export { default as line } from "./LineChart.svelte"
|
|||
export { default as pie } from "./PieChart.svelte"
|
||||
export { default as donut } from "./DonutChart.svelte"
|
||||
export { default as area } from "./AreaChart.svelte"
|
||||
export { default as candlestick } from "./CandleStickChart.svelte"
|
||||
|
|
|
|||
Loading…
Reference in a new issue