From c98e59d7f6c73824cae759e20d7c194be3d46503 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Tue, 3 Nov 2020 16:14:57 +0000
Subject: [PATCH] Fix legends not being centered and use common chart component

---
 .../standard-components/src/Chart/ApexChart.svelte | 14 ++++++++++++++
 .../standard-components/src/Chart/BarChart.svelte  |  4 ++--
 .../standard-components/src/Chart/LineChart.svelte |  4 ++--
 .../standard-components/src/Chart/PieChart.svelte  |  3 ++-
 4 files changed, 20 insertions(+), 5 deletions(-)
 create mode 100644 packages/standard-components/src/Chart/ApexChart.svelte

diff --git a/packages/standard-components/src/Chart/ApexChart.svelte b/packages/standard-components/src/Chart/ApexChart.svelte
new file mode 100644
index 0000000000..91eed23acd
--- /dev/null
+++ b/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>
diff --git a/packages/standard-components/src/Chart/BarChart.svelte b/packages/standard-components/src/Chart/BarChart.svelte
index de51316ed4..40774956fd 100644
--- a/packages/standard-components/src/Chart/BarChart.svelte
+++ b/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} />
diff --git a/packages/standard-components/src/Chart/LineChart.svelte b/packages/standard-components/src/Chart/LineChart.svelte
index f9dd334dc3..5a1b068728 100644
--- a/packages/standard-components/src/Chart/LineChart.svelte
+++ b/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} />
diff --git a/packages/standard-components/src/Chart/PieChart.svelte b/packages/standard-components/src/Chart/PieChart.svelte
index 9bcc490817..4382cf220f 100644
--- a/packages/standard-components/src/Chart/PieChart.svelte
+++ b/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} />