Fix legends not being centered and use common chart component

packages/standard-components/src/Chart/ApexChart.svelte

@@ -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>

packages/standard-components/src/Chart/BarChart.svelte

@@ -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} />

packages/standard-components/src/Chart/LineChart.svelte

@@ -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} />

packages/standard-components/src/Chart/PieChart.svelte

@@ -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} />