mirror of https://github.com/Budibase/budibase.git
Andrew Kingston
6 years ago
7 changed files with 285 additions and 227 deletions
@ -0,0 +1,71 @@ |
|||||
|
<script> |
||||
|
import { onMount } from "svelte" |
||||
|
import { chart } from "svelte-apexcharts" |
||||
|
import fetchData from "../fetchData" |
||||
|
import { isEmpty, sortBy } from "lodash/fp" |
||||
|
import { ApexOptionsBuilder } from "./ApexOptionsBuilder" |
||||
|
|
||||
|
export let title |
||||
|
export let datasource |
||||
|
export let labelColumn |
||||
|
export let valueColumns |
||||
|
export let xAxisLabel |
||||
|
export let yAxisLabel |
||||
|
export let height |
||||
|
export let width |
||||
|
export let color |
||||
|
export let animate |
||||
|
export let dataLabels |
||||
|
export let curve |
||||
|
export let fill |
||||
|
export let legend |
||||
|
|
||||
|
let data = [] |
||||
|
$: options = getChartOptions(data) |
||||
|
|
||||
|
// Fetch data on mount |
||||
|
onMount(async () => { |
||||
|
if (!isEmpty(datasource)) { |
||||
|
const result = (await fetchData(datasource)).slice(0, 20) |
||||
|
data = sortBy(row => row[labelColumn])(result) |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
function getChartOptions(rows = []) { |
||||
|
// Initialise default chart |
||||
|
let builder = new ApexOptionsBuilder() |
||||
|
.title(title) |
||||
|
.type(fill ? "area" : "line") |
||||
|
// .color(color) |
||||
|
.width(width) |
||||
|
.height(height) |
||||
|
.xLabel(xAxisLabel) |
||||
|
.yLabel(yAxisLabel) |
||||
|
.dataLabels(dataLabels) |
||||
|
.animate(animate) |
||||
|
.curve(curve.toLowerCase()) |
||||
|
.gradient(fill) |
||||
|
.legend(legend) |
||||
|
|
||||
|
// Add data if valid datasource |
||||
|
if (rows && rows.length) { |
||||
|
if (valueColumns && valueColumns.length) { |
||||
|
const series = valueColumns.map(column => ({ |
||||
|
name: column, |
||||
|
data: rows.map(row => parseFloat(row[column])), |
||||
|
})) |
||||
|
builder = builder.series(series) |
||||
|
} |
||||
|
if (!isEmpty(rows[0][labelColumn])) { |
||||
|
builder = builder.categories(rows.map(row => row[labelColumn])) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// Build chart options |
||||
|
return builder.getOptions() |
||||
|
} |
||||
|
|
||||
|
$: console.log(options) |
||||
|
</script> |
||||
|
|
||||
|
<div use:chart={options} /> |
||||
@ -1,2 +1,2 @@ |
|||||
export { default as bar } from "./Bar.svelte" |
export { default as bar } from "./BarChart.svelte" |
||||
export { default as line } from "./Line.svelte" |
export { default as line } from "./LineChart.svelte" |
||||
|
|||||
Loading…
Reference in new issue