forked from tsai/budibase
Andrew Kingston
6 years ago
6 changed files with 267 additions and 407 deletions
@ -0,0 +1,5 @@ |
|||||
|
<script> |
||||
|
import PieChart from "./PieChart.svelte" |
||||
|
</script> |
||||
|
|
||||
|
<PieChart {...$$props} donut /> |
||||
@ -0,0 +1,59 @@ |
|||||
|
<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 valueColumn |
||||
|
export let height |
||||
|
export let width |
||||
|
export let color |
||||
|
export let dataLabels |
||||
|
export let animate |
||||
|
export let legend |
||||
|
export let donut |
||||
|
|
||||
|
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(donut ? "donut" : "pie") |
||||
|
.width(width) |
||||
|
.height(height) |
||||
|
.dataLabels(dataLabels) |
||||
|
.animate(animate) |
||||
|
.legend(legend) |
||||
|
.legendPosition("right") |
||||
|
|
||||
|
// Add data if valid datasource |
||||
|
if (rows && rows.length) { |
||||
|
if (!isEmpty(valueColumn) && rows[0][valueColumn] != null) { |
||||
|
const series = rows.map(row => parseFloat(row[valueColumn])) |
||||
|
builder = builder.series(series) |
||||
|
} |
||||
|
if (!isEmpty(rows[0][labelColumn])) { |
||||
|
builder = builder.labels(rows.map(row => row[labelColumn])) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// Build chart options |
||||
|
return builder.getOptions() |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<div use:chart={options} /> |
||||
@ -1,2 +1,4 @@ |
|||||
export { default as bar } from "./BarChart.svelte" |
export { default as bar } from "./BarChart.svelte" |
||||
export { default as line } from "./LineChart.svelte" |
export { default as line } from "./LineChart.svelte" |
||||
|
export { default as pie } from "./PieChart.svelte" |
||||
|
export { default as donut } from "./DonutChart.svelte" |
||||
|
|||||
Loading…
Reference in new issue