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

Fix legends not being centered and use common chart component

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

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

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