CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-10-01 01:28:51 +13:00
Code Issues Projects Releases Wiki Activity

Fix legends not being centered and use common chart component

Browse source
This commit is contained in:
Andrew Kingston 2020-11-03 16:14:57 +00:00
parent 91ef7fd0a7
commit c98e59d7f6
4 changed files with 20 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
packages/standard-components/src/Chart/ApexChart.svelte Normal file
View file

@ -0,0 +1,14 @@
<script>
import { chart } from "svelte-apexcharts"
export let options
</script>
<div use:chart={options} />
<style>
div :global(.apexcharts-legend-series) {
display: flex !important;
text-transform: capitalize;
}
</style>

4
packages/standard-components/src/Chart/BarChart.svelte
View file

@ -1,9 +1,9 @@
<script>
import { onMount } from "svelte"
import { chart } from "svelte-apexcharts"
import fetchData from "../fetchData"
import { isEmpty, sortBy } from "lodash/fp"
import { ApexOptionsBuilder } from "./ApexOptionsBuilder"
import ApexChart from "./ApexChart.svelte"
export let title
export let datasource
@ -65,4 +65,4 @@
}
</script>
<div use:chart={options} />
<ApexChart {options} />

4
packages/standard-components/src/Chart/LineChart.svelte
View file

@ -1,9 +1,9 @@
<script>
import { onMount } from "svelte"
import { chart } from "svelte-apexcharts"
import fetchData from "../fetchData"
import { isEmpty, sortBy } from "lodash/fp"
import { ApexOptionsBuilder } from "./ApexOptionsBuilder"
import ApexChart from "./ApexChart.svelte"
// Common props
export let title
@ -74,4 +74,4 @@
}
</script>
<div use:chart={options} />
<ApexChart {options} />

3
packages/standard-components/src/Chart/PieChart.svelte
View file

@ -4,6 +4,7 @@
import fetchData from "../fetchData"
import { isEmpty, sortBy } from "lodash/fp"
import { ApexOptionsBuilder } from "./ApexOptionsBuilder"
import ApexChart from "./ApexChart.svelte"
export let title
export let datasource
@ -56,4 +57,4 @@
}
</script>
<div use:chart={options} />
<ApexChart {options} />