From ab78620b32390b7a243069385c4a43c2de8d1302 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 2 Nov 2020 15:32:37 +0000
Subject: [PATCH] Add bar chart with initial apex charts config

---
 .../userInterface/temporaryPanelStructure.js  | 800 +++++++++---------
 packages/standard-components/components.json  |  31 +-
 packages/standard-components/package.json     |   9 +-
 .../src/Chart/ApexOptionsBuilder.js           |  69 ++
 .../standard-components/src/Chart/Bar.svelte  | 217 +----
 .../src/Chart/Brush.svelte                    | 118 ---
 .../src/Chart/Bullet.svelte                   | 103 ---
 .../src/Chart/Chart.svelte                    | 169 ----
 .../src/Chart/Donut.svelte                    | 213 -----
 .../src/Chart/GroupedBar.svelte               | 145 ----
 .../src/Chart/Heatmap.svelte                  |  83 --
 .../src/Chart/Legend.svelte                   |  86 --
 .../standard-components/src/Chart/Line.svelte | 256 ------
 .../src/Chart/ScatterPlot.svelte              | 187 ----
 .../src/Chart/Sparkline.svelte                | 103 ---
 .../src/Chart/StackedArea.svelte              | 181 ----
 .../src/Chart/StackedBar.svelte               | 176 ----
 .../standard-components/src/Chart/Step.svelte | 129 ---
 .../standard-components/src/Chart/Temp.svelte |  41 -
 .../src/Chart/Tooltip.svelte                  |  81 --
 .../standard-components/src/Chart/index.js    |  12 -
 .../src/Chart/tests/bar.html                  |  72 --
 .../src/Chart/tests/line.html                 | 235 -----
 .../standard-components/src/Chart/utils.js    |  41 -
 .../standard-components/src/DataChart.svelte  |  49 --
 packages/standard-components/src/index.js     |   4 +-
 26 files changed, 518 insertions(+), 3092 deletions(-)
 create mode 100644 packages/standard-components/src/Chart/ApexOptionsBuilder.js
 delete mode 100644 packages/standard-components/src/Chart/Brush.svelte
 delete mode 100644 packages/standard-components/src/Chart/Bullet.svelte
 delete mode 100644 packages/standard-components/src/Chart/Chart.svelte
 delete mode 100644 packages/standard-components/src/Chart/Donut.svelte
 delete mode 100644 packages/standard-components/src/Chart/GroupedBar.svelte
 delete mode 100644 packages/standard-components/src/Chart/Heatmap.svelte
 delete mode 100644 packages/standard-components/src/Chart/Legend.svelte
 delete mode 100644 packages/standard-components/src/Chart/Line.svelte
 delete mode 100644 packages/standard-components/src/Chart/ScatterPlot.svelte
 delete mode 100644 packages/standard-components/src/Chart/Sparkline.svelte
 delete mode 100644 packages/standard-components/src/Chart/StackedArea.svelte
 delete mode 100644 packages/standard-components/src/Chart/StackedBar.svelte
 delete mode 100644 packages/standard-components/src/Chart/Step.svelte
 delete mode 100644 packages/standard-components/src/Chart/Temp.svelte
 delete mode 100644 packages/standard-components/src/Chart/Tooltip.svelte
 delete mode 100644 packages/standard-components/src/Chart/tests/bar.html
 delete mode 100644 packages/standard-components/src/Chart/tests/line.html
 delete mode 100644 packages/standard-components/src/Chart/utils.js
 delete mode 100644 packages/standard-components/src/DataChart.svelte

diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index 1c4bc632a6..2c8c50a0cb 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -422,100 +422,100 @@ export default {
       icon: "ri-bar-chart-2-line",
       isCategory: true,
       children: [
-        {
-          name: "Donut",
-          _component: "@budibase/standard-components/donut",
-          description: "Donut chart",
-          icon: "ri-pie-chart-fill",
-          properties: {
-            settings: [
-              {
-                label: "Data",
-                key: "datasource",
-                control: TableViewSelect,
-              },
-              {
-                label: "Name Field",
-                key: "nameKey",
-                dependsOn: "datasource",
-                control: TableViewFieldSelect,
-              },
-              {
-                label: "Value Field",
-                key: "valueKey",
-                dependsOn: "datasource",
-                control: TableViewFieldSelect,
-              },
-              {
-                label: "Animate Chart",
-                key: "isAnimated",
-                valueKey: "checked",
-                control: Checkbox,
-              },
-              {
-                label: "Hover Highlight",
-                key: "hasHoverAnimation",
-                valueKey: "checked",
-                control: Checkbox,
-              },
-              {
-                label: "Keep Last Hover",
-                key: "hasLastHoverSliceHighlighted",
-                valueKey: "checked",
-                control: Checkbox,
-              },
-              {
-                label: "Colors",
-                key: "color",
-                control: OptionSelect,
-                options: [
-                  "britecharts",
-                  "blueGreen",
-                  "green",
-                  "grey",
-                  "orange",
-                  "pink",
-                  "purple",
-                  "red",
-                  "teal",
-                  "yellow",
-                ],
-              },
-              {
-                label: "External Radius",
-                key: "externalRadius",
-                control: Input,
-              },
-              {
-                label: "Internal Radius",
-                key: "internalRadius",
-                control: Input,
-              },
-              {
-                label: "Radius Offset",
-                key: "radiusHoverOffset ",
-                control: Input,
-              },
-              {
-                label: "Show Legend",
-                key: "useLegend ",
-                valueKey: "checked",
-                control: Checkbox,
-              },
-              {
-                label: "Horizontal Legend",
-                key: "horizontalLegend",
-                valueKey: "checked",
-                control: Checkbox,
-              },
-              {
-                label: "Legend Width",
-                key: "legendWidth",
-                control: Input,
-              },
-            ],
-          },
-        },
+        // {
+        //   name: "Donut",
+        //   _component: "@budibase/standard-components/donut",
+        //   description: "Donut chart",
+        //   icon: "ri-pie-chart-fill",
+        //   properties: {
+        //     settings: [
+        //       {
+        //         label: "Data",
+        //         key: "datasource",
+        //         control: TableViewSelect,
+        //       },
+        //       {
+        //         label: "Name Field",
+        //         key: "nameKey",
+        //         dependsOn: "datasource",
+        //         control: TableViewFieldSelect,
+        //       },
+        //       {
+        //         label: "Value Field",
+        //         key: "valueKey",
+        //         dependsOn: "datasource",
+        //         control: TableViewFieldSelect,
+        //       },
+        //       {
+        //         label: "Animate Chart",
+        //         key: "isAnimated",
+        //         valueKey: "checked",
+        //         control: Checkbox,
+        //       },
+        //       {
+        //         label: "Hover Highlight",
+        //         key: "hasHoverAnimation",
+        //         valueKey: "checked",
+        //         control: Checkbox,
+        //       },
+        //       {
+        //         label: "Keep Last Hover",
+        //         key: "hasLastHoverSliceHighlighted",
+        //         valueKey: "checked",
+        //         control: Checkbox,
+        //       },
+        //       {
+        //         label: "Colors",
+        //         key: "color",
+        //         control: OptionSelect,
+        //         options: [
+        //           "britecharts",
+        //           "blueGreen",
+        //           "green",
+        //           "grey",
+        //           "orange",
+        //           "pink",
+        //           "purple",
+        //           "red",
+        //           "teal",
+        //           "yellow",
+        //         ],
+        //       },
+        //       {
+        //         label: "External Radius",
+        //         key: "externalRadius",
+        //         control: Input,
+        //       },
+        //       {
+        //         label: "Internal Radius",
+        //         key: "internalRadius",
+        //         control: Input,
+        //       },
+        //       {
+        //         label: "Radius Offset",
+        //         key: "radiusHoverOffset ",
+        //         control: Input,
+        //       },
+        //       {
+        //         label: "Show Legend",
+        //         key: "useLegend ",
+        //         valueKey: "checked",
+        //         control: Checkbox,
+        //       },
+        //       {
+        //         label: "Horizontal Legend",
+        //         key: "horizontalLegend",
+        //         valueKey: "checked",
+        //         control: Checkbox,
+        //       },
+        //       {
+        //         label: "Legend Width",
+        //         key: "legendWidth",
+        //         control: Input,
+        //       },
+        //     ],
+        //   },
+        // },
         {
           name: "Bar",
           _component: "@budibase/standard-components/bar",
@@ -529,13 +529,13 @@ export default {
                 control: TableViewSelect,
               },
               {
-                label: "Name Label",
+                label: "Label Col.",
                 key: "nameLabel",
                 dependsOn: "datasource",
                 control: TableViewFieldSelect,
               },
               {
-                label: "Value Label",
+                label: "Value Col.",
                 key: "valueLabel",
                 dependsOn: "datasource",
                 control: TableViewFieldSelect,
@@ -550,291 +550,11 @@ export default {
                 key: "xAxisLabel",
                 control: Input,
               },
-              {
-                label: "X Axis Label Offset",
-                key: "xAxisLabelOffset",
-                control: Input,
-              },
-              {
-                label: "Y Axis Label Offset",
-                key: "yAxisLabelOffset",
-                control: Input,
-              },
-              {
-                label: "Enable Labels",
-                key: "enableLabels",
-                control: Checkbox,
-                valueKey: "checked",
-              },
-              {
-                label: "Colors",
-                key: "color",
-                control: OptionSelect,
-                options: [
-                  { label: "Normal", value: "britecharts" },
-                  { label: "Blue Green", value: "blueGreen" },
-                  { label: "Green", value: "green" },
-                  { label: "Grey", value: "grey" },
-                  { label: "Orange", value: "orange" },
-                  { label: "Pink", value: "pink" },
-                  { label: "Purple", value: "purple" },
-                  { label: "Red", value: "red" },
-                  { label: "Teal", value: "teal" },
-                  { label: "Yellow", value: "yellow" },
-                ],
-              },
-              {
-                label: "Gradients",
-                key: "gradient",
-                control: OptionSelect,
-                options: [
-                  { value: "", label: "None" },
-                  { value: "bluePurple", label: "Blue Purple" },
-                  { value: "greenBlue", label: "Green Blue" },
-                  { value: "orangePink", label: "Orange Pink" },
-                ],
-              },
-              {
-                label: "Highlight Single Bar",
-                key: "hasSingleBarHighlight",
-                control: Checkbox,
-                valueKey: "checked",
-              },
-              {
-                label: "Width",
-                key: "width",
-                control: Input,
-              },
-              {
-                label: "Height",
-                key: "height",
-                control: Input,
-              },
-              {
-                label: "Animate",
-                key: "isAnimate",
-                control: Checkbox,
-                valueKey: "checked",
-              },
-              {
-                label: "Horizontal",
-                key: "isHorizontal",
-                control: Checkbox,
-                valueKey: "checked",
-              },
-              {
-                label: "Label Number Format",
-                key: "labelsNumberFormat",
-                control: Input,
-              },
-            ],
-          },
-        },
-        {
-          name: "Grouped Bar",
-          _component: "@budibase/standard-components/groupedbar",
-          description: "Groupedbar chart",
-          icon: "ri-bar-chart-grouped-fill",
-          properties: {
-            settings: [
-              {
-                label: "Data",
-                key: "datasource",
-                control: TableViewSelect,
-              },
-              {
-                label: "Name Label",
-                key: "nameLabel",
-                dependsOn: "datasource",
-                control: TableViewFieldSelect,
-              },
-              {
-                label: "Group Label",
-                key: "groupLabel",
-                dependsOn: "datasource",
-                control: TableViewFieldSelect,
-              },
-              {
-                label: "Value Label",
-                key: "valueLabel",
-                dependsOn: "datasource",
-                control: TableViewFieldSelect,
-              },
               {
                 label: "Color",
                 key: "color",
-                control: OptionSelect,
-                options: [
-                  "britecharts",
-                  "blueGreen",
-                  "green",
-                  "grey",
-                  "orange",
-                  "pink",
-                  "purple",
-                  "red",
-                  "teal",
-                  "yellow",
-                ],
-              },
-              {
-                label: "Height",
-                key: "height",
-                control: Input,
-              },
-              {
-                label: "Width",
-                key: "width",
-                control: Input,
-              },
-              {
-                label: "Aspect Ratio",
-                key: "aspectRatio",
-                control: Input,
-              },
-              {
-                label: "Grid",
-                key: "grid",
-                control: OptionSelect,
-                options: ["vertical", "horizontal", "full"],
-              },
-              {
-                label: "Value Label",
-                key: "valueLabel",
-                control: Input,
-              },
-              {
-                label: "Y Ticks",
-                key: "yTicks",
-                control: Input,
-              },
-              {
-                label: "Y Tick Text Offset",
-                key: "yTickTextOffset",
-                control: Input,
-              },
-              {
-                label: "Is Animated",
-                key: "isAnimated",
-                valueKey: "checked",
-                control: Checkbox,
-              },
-              {
-                label: "Is Horizontal",
-                key: "isHorizontal",
-                valueKey: "checked",
-                control: Checkbox,
-              },
-              {
-                label: "Tooltip Title",
-                key: "tooltipTitle",
-                control: Input,
-              },
-            ],
-          },
-        },
-        {
-          name: "Line",
-          _component: "@budibase/standard-components/line",
-          description: "Line chart",
-          icon: "ri-line-chart-line",
-          properties: {
-            settings: [
-              {
-                label: "Data",
-                key: "datasource",
-                control: TableViewSelect,
-              },
-              {
-                label: "Value Label",
-                key: "valueLabel",
-                dependsOn: "datasource",
-                control: TableViewFieldSelect,
-              },
-              {
-                label: "Topic Label",
-                key: "topicLabel",
-                dependsOn: "datasource",
-                control: TableViewFieldSelect,
-              },
-              {
-                label: "Date Label",
-                key: "dateLabel",
-                dependsOn: "datasource",
-                control: TableViewFieldSelect,
-              },
-              {
-                label: "Colors",
-                key: "color",
-                control: OptionSelect,
-                options: [
-                  "britecharts",
-                  "blueGreen",
-                  "green",
-                  "grey",
-                  "orange",
-                  "pink",
-                  "purple",
-                  "red",
-                  "teal",
-                  "yellow",
-                ],
-              },
-              {
-                label: "Gradients",
-                key: "lineGradient",
-                control: OptionSelect,
-                options: [
-                  { value: "", label: "None" },
-                  { value: "bluePurple", label: "Blue Purple" },
-                  { value: "greenBlue", label: "Green Blue" },
-                  { value: "orangePink", label: "Orange Pink" },
-                ],
-              },
-              {
-                label: "Line Curve",
-                key: "lineCurve",
-                control: OptionSelect,
-                options: [
-                  "linear",
-                  "basis",
-                  "natural",
-                  "monotoneX",
-                  "monotoneY",
-                  "step",
-                  "stepAfter",
-                  "stepBefore",
-                  "cardinal",
-                  "catmullRom",
-                ],
-              },
-              {
-                label: "X Axis Value Type",
-                key: "xAxisValueType",
-                control: OptionSelect,
-                options: ["date", "number"],
-              },
-              {
-                label: "Grid",
-                key: "grid",
-                control: OptionSelect,
-                options: ["vertical", "horizontal", "full"],
-              },
-              {
-                label: "X Axis Label",
-                key: "xAxisLabel",
-                control: Input,
-              },
-              {
-                label: "Y Axis Label",
-                key: "yAxisLabel",
-                control: Input,
-              },
-              {
-                label: "Show All Datapoints",
-                key: "shouldShowAllDataPoints",
-                valueKey: "checked",
-                control: Checkbox,
+                control: Colorpicker,
+                defaultValue: "#4285f4",
               },
               {
                 label: "Width",
@@ -845,60 +565,300 @@ export default {
                 label: "Height",
                 key: "height",
                 control: Input,
+                defaultValue: "400",
               },
               {
-                label: "Is Animated",
-                key: "isAnimated",
+                label: "Horizontal",
+                key: "horizontal",
                 control: Checkbox,
                 valueKey: "checked",
               },
               {
-                label: "Locale",
-                key: "locale",
-                control: OptionSelect,
-                options: ["en-GB", "en-US"],
+                label: "Data Labels",
+                key: "dataLabels",
+                control: Checkbox,
+                valueKey: "checked",
+                defaultValue: true,
               },
               {
-                label: "X Axis Value Type",
-                key: "xAxisValueType",
-                control: OptionSelect,
-                options: ["date", "numeric"],
-              },
-              {
-                label: "X Axis Format",
-                key: "xAxisFormat",
-                control: OptionSelect,
-                options: [
-                  "day-month",
-                  "minute-hour",
-                  "hour-daymonth",
-                  "month-year",
-                  "custom",
-                ],
-              },
-              {
-                label: "X Axis Custom Format",
-                key: "xAxisCustomFormat",
-                control: Input,
-              },
-              {
-                label: "Tooltip Title",
-                key: "tooltipTitle",
-                control: Input,
-              },
-              {
-                label: "X Ticks",
-                key: "xTicks",
-                control: Input,
-              },
-              {
-                label: "Y Ticks",
-                key: "yTicks",
-                control: Input,
+                label: "Animate",
+                key: "animate",
+                control: Checkbox,
+                valueKey: "checked",
+                defaultValue: true,
               },
             ],
           },
         },
+        // {
+        //   name: "Grouped Bar",
+        //   _component: "@budibase/standard-components/groupedbar",
+        //   description: "Groupedbar chart",
+        //   icon: "ri-bar-chart-grouped-fill",
+        //   properties: {
+        //     settings: [
+        //       {
+        //         label: "Data",
+        //         key: "datasource",
+        //         control: TableViewSelect,
+        //       },
+        //       {
+        //         label: "Name Label",
+        //         key: "nameLabel",
+        //         dependsOn: "datasource",
+        //         control: TableViewFieldSelect,
+        //       },
+        //       {
+        //         label: "Group Label",
+        //         key: "groupLabel",
+        //         dependsOn: "datasource",
+        //         control: TableViewFieldSelect,
+        //       },
+        //       {
+        //         label: "Value Label",
+        //         key: "valueLabel",
+        //         dependsOn: "datasource",
+        //         control: TableViewFieldSelect,
+        //       },
+        //       {
+        //         label: "Color",
+        //         key: "color",
+        //         control: OptionSelect,
+        //         options: [
+        //           "britecharts",
+        //           "blueGreen",
+        //           "green",
+        //           "grey",
+        //           "orange",
+        //           "pink",
+        //           "purple",
+        //           "red",
+        //           "teal",
+        //           "yellow",
+        //         ],
+        //       },
+        //       {
+        //         label: "Height",
+        //         key: "height",
+        //         control: Input,
+        //       },
+        //       {
+        //         label: "Width",
+        //         key: "width",
+        //         control: Input,
+        //       },
+        //       {
+        //         label: "Aspect Ratio",
+        //         key: "aspectRatio",
+        //         control: Input,
+        //       },
+        //       {
+        //         label: "Grid",
+        //         key: "grid",
+        //         control: OptionSelect,
+        //         options: ["vertical", "horizontal", "full"],
+        //       },
+        //       {
+        //         label: "Value Label",
+        //         key: "valueLabel",
+        //         control: Input,
+        //       },
+        //       {
+        //         label: "Y Ticks",
+        //         key: "yTicks",
+        //         control: Input,
+        //       },
+        //       {
+        //         label: "Y Tick Text Offset",
+        //         key: "yTickTextOffset",
+        //         control: Input,
+        //       },
+        //       {
+        //         label: "Is Animated",
+        //         key: "isAnimated",
+        //         valueKey: "checked",
+        //         control: Checkbox,
+        //       },
+        //       {
+        //         label: "Is Horizontal",
+        //         key: "isHorizontal",
+        //         valueKey: "checked",
+        //         control: Checkbox,
+        //       },
+        //       {
+        //         label: "Tooltip Title",
+        //         key: "tooltipTitle",
+        //         control: Input,
+        //       },
+        //     ],
+        //   },
+        // },
+        // {
+        //   name: "Line",
+        //   _component: "@budibase/standard-components/line",
+        //   description: "Line chart",
+        //   icon: "ri-line-chart-line",
+        //   properties: {
+        //     settings: [
+        //       {
+        //         label: "Data",
+        //         key: "datasource",
+        //         control: TableViewSelect,
+        //       },
+        //       {
+        //         label: "Value Label",
+        //         key: "valueLabel",
+        //         dependsOn: "datasource",
+        //         control: TableViewFieldSelect,
+        //       },
+        //       {
+        //         label: "Topic Label",
+        //         key: "topicLabel",
+        //         dependsOn: "datasource",
+        //         control: TableViewFieldSelect,
+        //       },
+        //       {
+        //         label: "Date Label",
+        //         key: "dateLabel",
+        //         dependsOn: "datasource",
+        //         control: TableViewFieldSelect,
+        //       },
+        //       {
+        //         label: "Colors",
+        //         key: "color",
+        //         control: OptionSelect,
+        //         options: [
+        //           "britecharts",
+        //           "blueGreen",
+        //           "green",
+        //           "grey",
+        //           "orange",
+        //           "pink",
+        //           "purple",
+        //           "red",
+        //           "teal",
+        //           "yellow",
+        //         ],
+        //       },
+        //       {
+        //         label: "Gradients",
+        //         key: "lineGradient",
+        //         control: OptionSelect,
+        //         options: [
+        //           { value: "", label: "None" },
+        //           { value: "bluePurple", label: "Blue Purple" },
+        //           { value: "greenBlue", label: "Green Blue" },
+        //           { value: "orangePink", label: "Orange Pink" },
+        //         ],
+        //       },
+        //       {
+        //         label: "Line Curve",
+        //         key: "lineCurve",
+        //         control: OptionSelect,
+        //         options: [
+        //           "linear",
+        //           "basis",
+        //           "natural",
+        //           "monotoneX",
+        //           "monotoneY",
+        //           "step",
+        //           "stepAfter",
+        //           "stepBefore",
+        //           "cardinal",
+        //           "catmullRom",
+        //         ],
+        //       },
+        //       {
+        //         label: "X Axis Value Type",
+        //         key: "xAxisValueType",
+        //         control: OptionSelect,
+        //         options: ["date", "number"],
+        //       },
+        //       {
+        //         label: "Grid",
+        //         key: "grid",
+        //         control: OptionSelect,
+        //         options: ["vertical", "horizontal", "full"],
+        //       },
+        //       {
+        //         label: "X Axis Label",
+        //         key: "xAxisLabel",
+        //         control: Input,
+        //       },
+        //       {
+        //         label: "Y Axis Label",
+        //         key: "yAxisLabel",
+        //         control: Input,
+        //       },
+        //       {
+        //         label: "Show All Datapoints",
+        //         key: "shouldShowAllDataPoints",
+        //         valueKey: "checked",
+        //         control: Checkbox,
+        //       },
+        //       {
+        //         label: "Width",
+        //         key: "width",
+        //         control: Input,
+        //       },
+        //       {
+        //         label: "Height",
+        //         key: "height",
+        //         control: Input,
+        //       },
+        //       {
+        //         label: "Is Animated",
+        //         key: "isAnimated",
+        //         control: Checkbox,
+        //         valueKey: "checked",
+        //       },
+        //       {
+        //         label: "Locale",
+        //         key: "locale",
+        //         control: OptionSelect,
+        //         options: ["en-GB", "en-US"],
+        //       },
+        //       {
+        //         label: "X Axis Value Type",
+        //         key: "xAxisValueType",
+        //         control: OptionSelect,
+        //         options: ["date", "numeric"],
+        //       },
+        //       {
+        //         label: "X Axis Format",
+        //         key: "xAxisFormat",
+        //         control: OptionSelect,
+        //         options: [
+        //           "day-month",
+        //           "minute-hour",
+        //           "hour-daymonth",
+        //           "month-year",
+        //           "custom",
+        //         ],
+        //       },
+        //       {
+        //         label: "X Axis Custom Format",
+        //         key: "xAxisCustomFormat",
+        //         control: Input,
+        //       },
+        //       {
+        //         label: "Tooltip Title",
+        //         key: "tooltipTitle",
+        //         control: Input,
+        //       },
+        //       {
+        //         label: "X Ticks",
+        //         key: "xTicks",
+        //         control: Input,
+        //       },
+        //       {
+        //         label: "Y Ticks",
+        //         key: "yTicks",
+        //         control: Input,
+        //       },
+        //     ],
+        //   },
+        // },
       ],
     },
     {
diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json
index 9adb3c02cf..f63ce9d56b 100644
--- a/packages/standard-components/components.json
+++ b/packages/standard-components/components.json
@@ -552,21 +552,26 @@
 			"datasource": "tables",
 			"nameLabel": "string",
 			"valueLabel": "string",
-			"betweenBarsPadding": "number",
-			"gradient": "string",
-			"color": "string",
-			"hasSingleBarHighlight": "bool",
-			"height": "number",
+			"color": {
+				"type": "string",
+				"default": "#4285f4"
+			},
+			"height": {
+				"type": "number",
+				"default": "400"
+			},
 			"width": "number",
-			"isAnimated": "bool",
-			"isHorizontal": "bool",
-			"labelNumberFormat": "number",
-			"locale": "string",
+			"horizontal": "bool",
+			"dataLabels": {
+				"type": "bool",
+				"default": true
+			},
+			"animate": {
+				"type": "bool",
+				"default": true
+			},
 			"xAxisLabel": "string",
-			"yAxisLabel": "string",
-			"useLegend": "bool",
-			"xTicks": "number",
-			"yTicks": "number"
+			"yAxisLabel": "string"
 		}
 	},
 	"line": {
diff --git a/packages/standard-components/package.json b/packages/standard-components/package.json
index 9b2fca0f54..720d704618 100644
--- a/packages/standard-components/package.json
+++ b/packages/standard-components/package.json
@@ -35,18 +35,15 @@
   "license": "MIT",
   "gitHead": "284cceb9b703c38566c6e6363c022f79a08d5691",
   "dependencies": {
-    "@beyonk/svelte-googlemaps": "^2.2.0",
     "@budibase/bbui": "^1.50.1",
     "@budibase/svelte-ag-grid": "^0.0.13",
     "@fortawesome/fontawesome-free": "^5.14.0",
     "@svelteschool/svelte-forms": "^0.7.0",
-    "britecharts": "^2.16.1",
-    "d3-selection": "^1.4.2",
+    "apexcharts": "^3.22.1",
     "fast-sort": "^2.2.0",
     "flatpickr": "^4.6.6",
-    "fusioncharts": "^3.15.1-sr.1",
     "lodash.debounce": "^4.0.8",
-    "svelte-flatpickr": "^3.1.0",
-    "svelte-fusioncharts": "^1.0.0"
+    "svelte-apexcharts": "^1.0.2",
+    "svelte-flatpickr": "^3.1.0"
   }
 }
diff --git a/packages/standard-components/src/Chart/ApexOptionsBuilder.js b/packages/standard-components/src/Chart/ApexOptionsBuilder.js
new file mode 100644
index 0000000000..4fb66e90f6
--- /dev/null
+++ b/packages/standard-components/src/Chart/ApexOptionsBuilder.js
@@ -0,0 +1,69 @@
+export class ApexOptionsBuilder {
+  options = {
+    series: [],
+  }
+
+  setOption(path, value) {
+    if (value == null || value === "") {
+      return this
+    }
+    let tmp = this.options
+    for (let i = 0; i < path.length - 1; i++) {
+      const step = path[i]
+      if (!tmp[step]) {
+        tmp[step] = {}
+      }
+      tmp = tmp[step]
+    }
+    tmp[path[path.length - 1]] = value
+    return this
+  }
+
+  getOptions() {
+    return this.options
+  }
+
+  type(type) {
+    return this.setOption(["chart", "type"], type)
+  }
+
+  color(color) {
+    return this.setOption(["colors"], color)
+  }
+
+  width(width) {
+    return this.setOption(["chart", "width"], width || undefined)
+  }
+
+  height(height) {
+    return this.setOption(["chart", "height"], height || undefined)
+  }
+
+  xLabel(label) {
+    return this.setOption(["xaxis", "title", "text"], label)
+  }
+
+  yLabel(label) {
+    return this.setOption(["yaxis", "title", "text"], label)
+  }
+
+  categories(categories) {
+    return this.setOption(["xaxis", "categories"], categories)
+  }
+
+  series(series) {
+    return this.setOption(["series"], series)
+  }
+
+  horizontal(horizontal) {
+    return this.setOption(["plotOptions", "bar", "horizontal"], horizontal)
+  }
+
+  dataLabels(dataLabels) {
+    return this.setOption(["dataLabels", "enabled"], dataLabels)
+  }
+
+  animate(animate) {
+    return this.setOption(["chart", "animations", "enabled"], animate)
+  }
+}
diff --git a/packages/standard-components/src/Chart/Bar.svelte b/packages/standard-components/src/Chart/Bar.svelte
index 24da930e14..d73a0681a3 100644
--- a/packages/standard-components/src/Chart/Bar.svelte
+++ b/packages/standard-components/src/Chart/Bar.svelte
@@ -1,187 +1,64 @@
 <script>
-  import {
-    getColorSchema,
-    getChartGradient,
-    notNull,
-    hasProp,
-  } from "./utils.js"
-  import britecharts from "britecharts"
-  import fetchData from "../fetchData.js"
   import { onMount } from "svelte"
+  import { chart } from "svelte-apexcharts"
+  import fetchData from "../fetchData"
   import { isEmpty } from "lodash/fp"
+  import { ApexOptionsBuilder } from "./ApexOptionsBuilder"
 
-  import { select } from "d3-selection"
-  import shortid from "shortid"
+  export let datasource
+  export let nameLabel
+  export let valueLabel
+  export let xAxisLabel
+  export let yAxisLabel
+  export let height
+  export let width
+  export let color
+  export let horizontal
+  export let dataLabels
+  export let animate
 
-  let tooltip
-  const _id = shortid.generate()
-  const chart = britecharts.bar()
-  const chartClass = `bar-container-${_id}`
-
-  let chartElement = null
-  let chartContainer = null
-  let tooltipContainer = null
-
-  export let customMouseOver = () => tooltip.show()
-  export let customMouseMove = (datapoint, colorMapping, x, y) =>
-    tooltip.update(datapoint, colorMapping, x, y)
-  export let customMouseOut = () => tooltip.hide()
-  export let customClick = null
-
-  let data = []
-  export let datasource = null
-  export let xAxisLabel = ""
-  export let yAxisLabel = ""
-  export let betweenBarsPadding = 0.1 //takes decimal values 0.1, 0.5 etc
-  export let gradient = null
-  export let color = "britecharts"
-  export let enableLabels = false
-  export let hasPercentage = null
-  export let hasSingleBarHighlight = true
-  export let highlightBarFunction = null
-  export let height = 200
-  export let width = 300
-  export let labelsMargin = null
-  export let isAnimated = true
-  export let isHorizontal = true
-  export let xAxisLabelOffset = null
-  export let yAxisLabelOffset = null
-  export let labelsNumberFormat = null
-  export let locale = null
-  export let valueLabel = null
-  export let nameLabel = null
-  export let numberFormat = null
-  export let labelsSize = null
-  export let xTicks = null
-  export let yTicks = null
-  export let percentageAxisToMaxRatio = null
+  let data
+  $: options = getChartOptions(data)
 
+  // Fetch data on mount
   onMount(async () => {
     if (!isEmpty(datasource)) {
       data = await fetchData(datasource)
-
-      if (schemaIsValid()) {
-        chartContainer = select(`.${chartClass}`)
-        bindChartUIProps()
-        bindChartEvents()
-        chartContainer.datum(data).call(chart)
-        bindChartTooltip()
-      } else {
-        console.error("Bar Chart - Please provide a valid name and value label")
-      }
     }
   })
 
-  const schemaIsValid = () =>
-    (hasProp(data, "name") || hasProp(data, nameLabel)) &&
-    (hasProp(data, "value") || hasProp(data, valueLabel))
+  function getChartOptions(rows = []) {
+    // Initialise default chart
+    let builder = new ApexOptionsBuilder()
+      .type("bar")
+      .color(color)
+      .width(width)
+      .height(height)
+      .xLabel(xAxisLabel)
+      .yLabel(yAxisLabel)
+      .horizontal(horizontal)
+      .dataLabels(dataLabels)
+      .animate(animate)
 
-  function bindChartUIProps() {
-    chart.numberFormat(".0f")
-    chart.labelsNumberFormat(".1f")
+    // Add data if valid datasource
+    if (rows && rows.length) {
+      rows = rows.slice(0, 50)
+      if (!isEmpty(nameLabel) && !isNaN(rows[0][valueLabel])) {
+        builder = builder.series([
+          {
+            name: valueLabel,
+            data: rows.map(row => row[valueLabel]),
+          },
+        ])
+      }
+      if (!isEmpty(nameLabel)) {
+        builder = builder.categories(rows.map(row => row[nameLabel]))
+      }
+    }
 
-    if (notNull(color)) {
-      chart.colorSchema(colorSchema)
-    }
-    if (notNull(gradient)) {
-      chart.chartGradient(chartGradient)
-    }
-    if (notNull(xAxisLabel)) {
-      chart.xAxisLabel(xAxisLabel)
-    }
-    if (notNull(yAxisLabel)) {
-      chart.yAxisLabel(yAxisLabel)
-    }
-    if (notNull(betweenBarsPadding)) {
-      chart.betweenBarsPadding(Number(betweenBarsPadding))
-    }
-    if (notNull(enableLabels)) {
-      chart.enableLabels(enableLabels)
-    }
-    if (notNull(hasPercentage)) {
-      chart.hasPercentage(hasPercentage)
-    }
-    if (notNull(hasSingleBarHighlight)) {
-      chart.hasSingleBarHighlight(hasSingleBarHighlight)
-    }
-    if (notNull(labelsMargin)) {
-      chart.labelsMargin(labelsMargin)
-    }
-    if (notNull(height)) {
-      chart.height(height)
-    }
-    if (notNull(highlightBarFunction)) {
-      chart.highlightBarFunction(highlightBarFunction)
-    }
-    if (notNull(width)) {
-      chart.width(width)
-    }
-    if (notNull(isAnimated)) {
-      chart.isAnimated(isAnimated)
-    }
-    if (notNull(isHorizontal)) {
-      chart.isHorizontal(isHorizontal)
-    }
-    if (notNull(yAxisLabelOffset)) {
-      chart.yAxisLabelOffset(yAxisLabelOffset)
-    }
-    if (notNull(xAxisLabelOffset)) {
-      chart.xAxisLabelOffset(Number(xAxisLabelOffset))
-    }
-    if (notNull(labelsNumberFormat)) {
-      chart.labelsNumberFormat(labelsNumberFormat)
-    }
-    if (notNull(valueLabel)) {
-      chart.valueLabel(valueLabel)
-    }
-    if (notNull(locale)) {
-      chart.locale(locale)
-    }
-    if (notNull(nameLabel)) {
-      chart.nameLabel(nameLabel)
-    }
-    if (notNull(numberFormat)) {
-      chart.numberFormat(numberFormat)
-    }
-    if (notNull(labelsSize)) {
-      chart.labelsSize(labelsSize)
-    }
-    if (notNull(xTicks)) {
-      chart.xTicks(xTicks)
-    }
-    if (notNull(yTicks)) {
-      chart.yTicks(yTicks)
-    }
-    if (notNull(percentageAxisToMaxRatio)) {
-      chart.percentageAxisToMaxRatio(percentageAxisToMaxRatio)
-    }
-    chartContainer.datum(data).call(chart)
+    // Build chart options
+    return builder.getOptions()
   }
-
-  function bindChartEvents() {
-    if (customMouseMove) {
-      chart.on("customMouseMove", customMouseMove)
-    }
-    if (customMouseOut) {
-      chart.on("customMouseOut", customMouseOut)
-    }
-    if (customMouseOver) {
-      chart.on("customMouseOver", customMouseOver)
-    }
-    if (customClick) {
-      chart.on("customClick", customClick)
-    }
-  }
-
-  function bindChartTooltip() {
-    tooltip = britecharts.miniTooltip()
-    tooltip.numberFormat(".0f")
-    tooltipContainer = select(`.${chartClass} .metadata-group`)
-    tooltipContainer.datum([]).call(tooltip)
-  }
-
-  $: colorSchema = getColorSchema(color)
-  $: chartGradient = getChartGradient(gradient)
 </script>
 
-<div bind:this={chartElement} class={chartClass} />
+<div use:chart={options} />
diff --git a/packages/standard-components/src/Chart/Brush.svelte b/packages/standard-components/src/Chart/Brush.svelte
deleted file mode 100644
index d1e736074b..0000000000
--- a/packages/standard-components/src/Chart/Brush.svelte
+++ /dev/null
@@ -1,118 +0,0 @@
-<script>
-  import { getColorSchema, getChartGradient, notNull } from "./utils"
-  import britecharts from "britecharts"
-  import { onMount } from "svelte"
-
-  import { select } from "d3-selection"
-  import shortid from "shortid"
-
-  /* 
-    ISSUES
-    - Chart gradient doesn't seem to do anything
-  */
-
-  export let _bb
-  export let table
-
-  let store = _bb.store
-
-  const _id = shortid.generate()
-
-  const chart = britecharts.brush()
-  const chartClass = `brush-container-${_id}`
-  const legendClass = `legend-container-${_id}`
-
-  let chartElement = null
-  let chartContainer = null
-
-  export let customBrushEnd = null
-  export let customBrushStart = null
-
-  export let data = []
-  export let gradient = null
-  export let height = 200
-  export let width = 200
-  export let margin = { top: 0, right: 0, bottom: 0, left: 0 }
-
-  export let dateRange = null
-  export let locale = null
-  export let roundingTimeInterval = null
-  export let xAxisFormat = null
-  export let xTicks = null
-  export let xAxisCustomFormat = null
-
-  onMount(async () => {
-    if (chart) {
-      if (table) {
-        await fetchData()
-      }
-      chartContainer = select(`.${chartClass}`)
-      bindChartUIProps()
-      bindChartEvents()
-      chartContainer.datum(_data).call(chart)
-    }
-  })
-
-  async function fetchData() {
-    const FETCH_ROWS_URL = `/api/views/all_${table}`
-    const response = await _bb.api.get(FETCH_ROWS_URL)
-    if (response.status === 200) {
-      const json = await response.json()
-      store.update(state => {
-        state[table] = json
-        return state
-      })
-    } else {
-      throw new Error("Failed to fetch rows.", response)
-    }
-  }
-
-  function bindChartUIProps() {
-    if (notNull(gradient)) {
-      chart.gradient(chartGradient)
-    }
-    if (notNull(height)) {
-      chart.height(height)
-    }
-    if (notNull(width)) {
-      chart.width(width)
-    }
-    if (notNull(margin)) {
-      chart.margin(margin)
-    }
-    if (notNull(dateRange)) {
-      chart.dateRange(dateRange)
-    }
-    if (notNull(locale)) {
-      chart.locale(locale)
-    }
-    if (notNull(roundingTimeInterval)) {
-      chart.roundingTimeInterval(roundingTimeInterval)
-    }
-    if (notNull(xAxisFormat)) {
-      chart.xAxisFormat(xAxisFormat)
-    }
-    if (notNull(xTicks)) {
-      chart.xTicks(xTicks)
-    }
-    if (notNull(xAxisCustomFormat)) {
-      chart.xAxisCustomFormat(xAxisCustomFormat)
-    }
-  }
-
-  function bindChartEvents() {
-    if (customBrushEnd) {
-      chart.on("customBrushEnd", customBrushEnd)
-    }
-    if (customBrushStart) {
-      chart.on("customBrushStart", customBrushStart)
-    }
-  }
-
-  $: _data = table ? $store[table] : data
-
-  $: chartGradient = getChartGradient(gradient)
-  $: console.log(chartGradient)
-</script>
-
-<div bind:this={chartElement} class={chartClass} />
diff --git a/packages/standard-components/src/Chart/Bullet.svelte b/packages/standard-components/src/Chart/Bullet.svelte
deleted file mode 100644
index 04f3ef1648..0000000000
--- a/packages/standard-components/src/Chart/Bullet.svelte
+++ /dev/null
@@ -1,103 +0,0 @@
-<script>
-  import { getColorSchema, getChartGradient, notNull } from "./utils"
-  import britecharts from "britecharts"
-  import { onMount } from "svelte"
-
-  import { select } from "d3-selection"
-  import shortid from "shortid"
-
-  const _id = shortid.generate()
-
-  export let _bb
-  export let table
-
-  let store = _bb.store
-
-  const chart = britecharts.bullet()
-  const chartClass = `bullet-container-${_id}`
-  const legendClass = `legend-container-${_id}`
-
-  let chartElement = null
-  let chartContainer = null
-
-  export let data = []
-  export let aspectRatio = null
-  export let color = "britecharts"
-  export let customSubtitle = null
-  export let customTitle = null
-  export let numberFormat = null
-  export let paddingBetweenAxisAndChart = null
-  export let startMaxRangeOpacity = null
-  export let ticks = null
-  export let isReverse = false
-  export let height = 200
-  export let width = 200
-  export let margin = { top: 0, right: 0, bottom: 0, left: 0 }
-
-  onMount(async () => {
-    if (chart) {
-      if (table) {
-        await fetchData()
-      }
-      chartContainer = select(`.${chartClass}`)
-      bindChartUIProps()
-      chartContainer.datum(_data).call(chart)
-    }
-  })
-
-  async function fetchData() {
-    const FETCH_ROWS_URL = `/api/views/all_${table}`
-    const response = await _bb.api.get(FETCH_ROWS_URL)
-    if (response.status === 200) {
-      const json = await response.json()
-      store.update(state => {
-        state[table] = json
-        return state
-      })
-    } else {
-      throw new Error("Failed to fetch rows.", response)
-    }
-  }
-
-  function bindChartUIProps() {
-    if (notNull(color)) {
-      chart.colorSchema(colorSchema)
-    }
-    if (notNull(aspectRatio)) {
-      chart.aspectRatio(aspectRatio)
-    }
-    if (notNull(customSubtitle)) {
-      chart.customSubtitle(customSubtitle)
-    }
-    if (notNull(customTitle)) {
-      chart.customTitle(customTitle)
-    }
-    if (notNull(numberFormat)) {
-      chart.numberFormat(numberFormat)
-    }
-    if (notNull(paddingBetweenAxisAndChart)) {
-      chart.paddingBetweenAxisAndChart(paddingBetweenAxisAndChart)
-    }
-    if (notNull(startMaxRangeOpacity)) {
-      chart.startMaxRangeOpacity(startMaxRangeOpacity)
-    }
-    if (notNull(ticks)) {
-      chart.ticks(ticks)
-    }
-    if (notNull(isReverse)) {
-      chart.isReverse(isReverse)
-    }
-    if (notNull(height)) {
-      chart.height(height)
-    }
-    if (notNull(width)) {
-      chart.width(width)
-    }
-  }
-
-  $: _data = table ? $store[table] : data
-
-  $: colorSchema = getColorSchema(color)
-</script>
-
-<div bind:this={chartElement} class={chartClass} />
diff --git a/packages/standard-components/src/Chart/Chart.svelte b/packages/standard-components/src/Chart/Chart.svelte
deleted file mode 100644
index 3f1634719a..0000000000
--- a/packages/standard-components/src/Chart/Chart.svelte
+++ /dev/null
@@ -1,169 +0,0 @@
-<script context="module">
-  //expose chart types for use or reference outside compnent
-  export const chartTypes = britecharts ? Object.keys(britecharts) : null
-
-  //expose chart color schemas for use or reference outside compnent
-  export const colorSchemas = britecharts
-    ? britecharts.colors.colorSchemas
-    : null
-
-  //export color gradients for use or reference outside the component
-  export const colorGradients = britecharts
-    ? britecharts.colors.colorGradients
-    : null
-
-  export const getColorSchema = color =>
-    color ? colorSchemas[color] : colorSchemas["britecharts"]
-
-  export const getChartGradient = gradient =>
-    gradient ? colorGradients[gradient] : null
-</script>
-
-<script>
-  import { beforeUpdate } from "svelte"
-  import britecharts from "britecharts"
-  import { select } from "d3-selection"
-
-  import { onMount } from "svelte"
-  import shortid from "shortid"
-
-  const _id = shortid.generate()
-
-  export let type = "bar"
-  export let data = []
-  export let tooltipProps = null
-  export let legendProps = null
-  export let useTooltip = false
-  export let useLegend = false
-
-  export let tooltip = null //can bind to outside the component and therefore access
-
-  let chartElement = null
-  let chartContainer = null
-  let tooltipContainer = null
-  let legendContainer = null
-  let legend = null
-
-  let chart = chartTypes.includes(type) ? britecharts[type]() : null
-
-  const chartClass = `chart-container-${_id}`
-  const legendClass = `legend-container-${_id}`
-
-  onMount(() => {
-    if (chart) {
-      chartContainer = select(`.${chartClass}`)
-      bindChartUIProps()
-      bindChartEvents()
-      chartContainer.datum(data).call(chart)
-      bindChartTooltip()
-      bindChartLegend()
-    } else {
-      console.error("Britecharts could not be found")
-    }
-  })
-
-  function bindChartTooltip() {
-    if (useTooltip) {
-      tooltip = britecharts.miniTooltip()
-
-      bindProps(tooltip, tooltipProps)
-
-      tooltipContainer = select(`.${chartClass} .metadata-group`)
-      tooltipContainer.datum([]).call(tooltip)
-    }
-  }
-
-  function bindChartLegend() {
-    if (useLegend) {
-      if (!Array.isArray(data)) {
-        console.warn("Cannot use legend as data is not an array")
-        return
-      }
-
-      let excludeProps = []
-
-      legend = britecharts.legend()
-
-      if (!legendProps || !legendProps.width) {
-        excludeProps = ["width"]
-        legend.width(chart.width())
-      }
-
-      if (legendProps) {
-        bindProps(legend, legendProps, excludeProps)
-      }
-
-      legendContainer = select(`.${legendClass}`)
-      legendContainer.datum(data).call(legend)
-    }
-  }
-
-  function bindChartEvents() {
-    if ($$props.on) {
-      const events = Object.entries($$props.on)
-      for (let [type, fn] of events) {
-        if (fn) {
-          chart.on(type, fn)
-        }
-      }
-    }
-  }
-
-  function bindChartUIProps() {
-    const excludeProps = [
-      "data",
-      "type",
-      "on",
-      "useTooltip",
-      "tooltip",
-      "tooltipProps",
-      "legendProps",
-      "useLegend",
-    ]
-
-    if (!$$props.width) {
-      chart.width(chartElement.getBoundingClientRect().width)
-    }
-
-    bindProps(chart, $$props, excludeProps)
-  }
-
-  function bindProps(element, elProps, excludeArray) {
-    if (elProps) {
-      const props = excludeArray
-        ? Object.entries(excludeProps(elProps, excludeArray))
-        : Object.entries(elProps)
-
-      const validElementProps = Object.getOwnPropertyNames(element)
-
-      for (let [prop, value] of props) {
-        if (validElementProps.includes(prop)) {
-          if (!!value) {
-            chart[prop](value)
-          }
-        } else {
-          console.warn(
-            `${type} - ${prop} is an unrecognised chart prop and wont be applied`
-          )
-        }
-      }
-    }
-  }
-
-  function excludeProps(props, propsToExclude) {
-    const modifiedProps = {}
-    for (const prop in props) {
-      if (!propsToExclude.includes(prop)) {
-        modifiedProps[prop] = props[prop]
-      }
-    }
-    return modifiedProps
-  }
-
-  $: validChartProps = chart ? Object.getOwnPropertyNames(chart) : null
-</script>
-
-<div bind:this={chartElement} class={chartClass} />
-{#if useLegend}
-  <div class={legendClass} />
-{/if}
diff --git a/packages/standard-components/src/Chart/Donut.svelte b/packages/standard-components/src/Chart/Donut.svelte
deleted file mode 100644
index 89b314e3db..0000000000
--- a/packages/standard-components/src/Chart/Donut.svelte
+++ /dev/null
@@ -1,213 +0,0 @@
-<script>
-  import { getColorSchema, notNull } from "./utils.js"
-  import fetchData from "../fetchData.js"
-  import Legend from "./Legend.svelte"
-  import britecharts from "britecharts"
-  import { onMount } from "svelte"
-  import { isEmpty } from "lodash/fp"
-
-  import { select } from "d3-selection"
-  import shortid from "shortid"
-
-  const _id = shortid.generate()
-
-  const chart = britecharts.donut()
-  const chartClass = `donut-container-${_id}`
-  const legendClass = `legend-container-${_id}`
-  let legendChart
-
-  let chartElement = null
-  let chartContainer = null
-
-  let chartSvgWidth = 0
-  let chartSvg = null
-
-  export let _bb
-
-  let store = _bb.store
-
-  export let customMouseMove = null
-  export let customClick = null
-
-  export let orderingFunction = null
-
-  let data = []
-  export let datasource = {}
-
-  export let color = "britecharts"
-  export let height = 200
-  export let width = 200
-  export let margin = null
-
-  export let centeredTextFunction = null
-  export let externalRadius = 25
-  export let percentageFormat = null
-  export let hasFixedHighlightedSlice = false
-  export let hasLastHoverSliceHighlighted = false
-  export let hasHoverAnimation = true
-  export let highlightSliceById = null
-  export let numberFormat = null
-  export let internalRadius = 25
-  export let isAnimated = true
-  export let radiusHoverOffset = 0
-  export let nameKey = null
-  export let valueKey = null
-  // export let useLegend = true
-  export let horizontalLegend = false
-  export let legendWidth = null
-  export let legendHeight = null
-
-  onMount(async () => {
-    if (chart) {
-      if (!isEmpty(datasource)) {
-        let _data = await fetchData(datasource)
-        data = checkAndReformatData(_data)
-        if (data.length === 0) {
-          console.error(
-            "Donut - please provide a valid name and value field for the chart"
-          )
-        }
-      }
-
-      chart.emptyDataConfig({
-        showEmptySlice: true,
-        emptySliceColor: "#F0F0F0",
-      })
-
-      chartContainer = select(`.${chartClass}`)
-      bindChartUIProps()
-      bindChartEvents()
-      chartContainer.datum(data).call(chart)
-    }
-  })
-
-  function checkAndReformatData(data) {
-    let _data = [...data]
-
-    if (valueKey && valueKey !== "quantity") {
-      _data = reformatDataKey(_data, valueKey, "quantity")
-    }
-
-    if (nameKey && nameKey !== "name") {
-      _data = reformatDataKey(_data, nameKey, "name")
-    }
-
-    return _data.every(d => d.quantity) && _data.every(d => d.name) ? _data : []
-  }
-
-  function reformatDataKey(data = [], dataKey = null, formatKey = null) {
-    let ignoreList = ["_id", "_rev", "id"]
-    if (dataKey && data.every(d => d[dataKey])) {
-      return data.map(d => {
-        let clonedRow = { ...d }
-        if (clonedRow[formatKey]) {
-          delete clonedRow[formatKey]
-        }
-        let value = clonedRow[dataKey]
-        if (!ignoreList.includes(dataKey)) {
-          delete clonedRow[dataKey]
-        }
-        clonedRow[formatKey] = value
-        return clonedRow
-      })
-    } else {
-      return data
-    }
-  }
-
-  function bindChartUIProps() {
-    chart.percentageFormat(".0f")
-
-    if (notNull(color)) {
-      chart.colorSchema(getColorSchema(color))
-    }
-    if (notNull(height)) {
-      chart.height(height)
-    }
-    if (notNull(width)) {
-      chart.width(width)
-    }
-    if (notNull(margin)) {
-      chart.margin(margin)
-    }
-    if (notNull(centeredTextFunction)) {
-      chart.centeredTextFunction(centeredTextFunction)
-    }
-    if (notNull(externalRadius)) {
-      chart.externalRadius(externalRadius)
-    }
-    if (notNull(percentageFormat)) {
-      chart.percentageFormat(percentageFormat)
-    }
-    if (notNull(hasFixedHighlightedSlice)) {
-      chart.hasFixedHighlightedSlice(hasFixedHighlightedSlice)
-    }
-    if (notNull(hasLastHoverSliceHighlighted)) {
-      chart.hasLastHoverSliceHighlighted(hasLastHoverSliceHighlighted)
-    }
-    if (notNull(hasHoverAnimation)) {
-      chart.hasHoverAnimation(hasHoverAnimation)
-    }
-    if (notNull(highlightSliceById)) {
-      chart.highlightSliceById(highlightSliceById)
-    }
-    if (notNull(numberFormat)) {
-      chart.numberFormat(numberFormat)
-    }
-    if (notNull(internalRadius)) {
-      chart.internalRadius(internalRadius)
-    }
-    if (notNull(isAnimated)) {
-      chart.isAnimated(isAnimated)
-    }
-    if (notNull(radiusHoverOffset)) {
-      chart.radiusHoverOffset(radiusHoverOffset)
-    }
-    if (notNull(orderingFunction)) {
-      chart.orderingFunction(orderingFunction)
-    }
-    chartContainer.datum(data).call(chart)
-    chartSvg = document.querySelector(`.${chartClass} .britechart`)
-  }
-
-  function bindChartEvents() {
-    if (customClick) {
-      chart.on("customClick", customClick)
-    }
-    if (customMouseMove) {
-      chart.on("customMouseMove", customMouseMove)
-    }
-
-    if (legendChart) {
-      chart.on("customMouseOut", function() {
-        legendChart.clearHighlight()
-      })
-      chart.on("customMouseOver", function(data) {
-        legendChart.highlight(data.data.id)
-      })
-    }
-  }
-
-  $: if (!width && chartSvg) {
-    width = chartSvg.clientWidth
-    chart.width(width)
-    chartContainer.datum(data).call(chart)
-  }
-
-  $: colorSchema = getColorSchema(color)
-</script>
-
-<div>
-  <div bind:this={chartElement} class={chartClass} />
-  {#if data.length > 0}
-    <Legend
-      bind:legend={legendChart}
-      {colorSchema}
-      useLegend
-      isHorizontal={horizontalLegend}
-      width={legendWidth || width}
-      height={legendHeight}
-      {chartClass}
-      {data} />
-  {/if}
-</div>
diff --git a/packages/standard-components/src/Chart/GroupedBar.svelte b/packages/standard-components/src/Chart/GroupedBar.svelte
deleted file mode 100644
index 3f95a778c8..0000000000
--- a/packages/standard-components/src/Chart/GroupedBar.svelte
+++ /dev/null
@@ -1,145 +0,0 @@
-<script>
-  import { getColorSchema, getChartGradient, notNull, hasProp } from "./utils"
-  import Tooltip from "./Tooltip.svelte"
-  import fetchData from "../fetchData.js"
-  import britecharts from "britecharts"
-  import { onMount } from "svelte"
-  import { select } from "d3-selection"
-  import shortid from "shortid"
-  import { isEmpty } from "lodash/fp"
-
-  const _id = shortid.generate()
-
-  const chart = britecharts.groupedBar()
-  const chartClass = `groupedbar-container-${_id}`
-  const legendClass = `legend-container-${_id}`
-
-  let tooltip = britecharts.tooltip()
-  let tooltipContainer
-  let chartElement = null
-  let chartContainer = null
-
-  export let customClick = null
-
-  let data = []
-  export let datasource = {}
-  export let color = "britecharts"
-  export let height = 200
-  export let width = 200
-  export let margin = null
-  export let aspectRatio = null
-  export let grid = null
-  export let groupLabel = null
-  export let isAnimated = null
-  export let isHorizontal = null
-  export let nameLabel = null
-  export let valueLabel = null
-  export let valueLabelFormat = null
-  export let xTicks = null
-  export let yAxisLabel = null
-  export let yAxisLabelOffset = null
-  export let yTicks = null
-  export let yTickTextOffset = null
-  export let tooltipTitle = ""
-
-  const schemaIsValid = () =>
-    (hasProp(data, "name") || hasProp(data, nameLabel)) &&
-    (hasProp(data, "group") || hasProp(data, groupLabel)) &&
-    (hasProp(data, "value") || hasProp(data, valueLabel))
-
-  onMount(async () => {
-    if (!isEmpty(datasource)) {
-      data = await fetchData(datasource)
-      if (schemaIsValid()) {
-        chartContainer = select(`.${chartClass}`)
-        bindChartUIProps()
-        bindChartEvents()
-        chartContainer.datum(data).call(chart)
-        bindTooltip()
-      } else {
-        console.error(
-          "Grouped bar - Please provide valid name, value and group labels"
-        )
-      }
-    }
-  })
-
-  function bindTooltip() {
-    tooltipContainer = select(`.${chartClass} .metadata-group`)
-    tooltip.topicLabel("values")
-    tooltip.shouldShowDateInTitle(false)
-    tooltipContainer.datum([]).call(tooltip)
-  }
-
-  function bindChartUIProps() {
-    if (notNull(color)) {
-      chart.colorSchema(colorSchema)
-    }
-    if (notNull(height)) {
-      chart.height(height)
-    }
-    if (notNull(width)) {
-      chart.width(width)
-    }
-    if (notNull(margin)) {
-      chart.margin(margin)
-    }
-    if (notNull(aspectRatio)) {
-      chart.aspectRatio(aspectRatio)
-    }
-    if (notNull(grid)) {
-      chart.grid(grid)
-    }
-    if (notNull(groupLabel)) {
-      chart.groupLabel(groupLabel)
-    }
-    if (notNull(isAnimated)) {
-      chart.isAnimated(isAnimated)
-    }
-    if (notNull(isHorizontal)) {
-      chart.isHorizontal(isHorizontal)
-    }
-    if (notNull(nameLabel)) {
-      chart.nameLabel(nameLabel)
-    }
-    if (notNull(valueLabel)) {
-      chart.valueLabel(valueLabel)
-    }
-    if (notNull(valueLabelFormat)) {
-      chart.valueLabelFormat(valueLabelFormat)
-    }
-    if (notNull(xTicks)) {
-      chart.xTicks(xTicks)
-    }
-    if (notNull(yAxisLabel)) {
-      chart.yAxisLabel(yAxisLabel)
-    }
-    if (notNull(yAxisLabelOffset)) {
-      chart.yAxisLabelOffset(yAxisLabelOffset)
-    }
-    if (notNull(yTicks)) {
-      chart.yTicks(yTicks)
-    }
-    if (notNull(yTickTextOffset)) {
-      chart.yTickTextOffset(yTickTextOffset)
-    }
-    if (notNull(tooltipTitle)) {
-      tooltip.title(tooltipTitle)
-    } else if (datasource.label) {
-      tooltip.title(datasource.label)
-    }
-  }
-
-  function bindChartEvents() {
-    if (customClick) {
-      chart.on("customClick", customClick)
-    }
-    chart.on("customMouseMove", tooltip.update)
-    chart.on("customMouseOut", tooltip.hide)
-    chart.on("customMouseOver", tooltip.show)
-  }
-
-  $: colorSchema = getColorSchema(color)
-</script>
-
-<div bind:this={chartElement} class={chartClass} />
diff --git a/packages/standard-components/src/Chart/Heatmap.svelte b/packages/standard-components/src/Chart/Heatmap.svelte
deleted file mode 100644
index 9d2eb8d878..0000000000
--- a/packages/standard-components/src/Chart/Heatmap.svelte
+++ /dev/null
@@ -1,83 +0,0 @@
-<script>
-  import { getColorSchema, getChartGradient, notNull } from "./utils"
-  import britecharts from "britecharts"
-  import { onMount } from "svelte"
-
-  import { select } from "d3-selection"
-  import shortid from "shortid"
-
-  const _id = shortid.generate()
-
-  export let _bb
-  export let table
-
-  let store = _bb.store
-
-  const chart = britecharts.heatmap()
-  const chartClass = `heatmap-container-${_id}`
-  const legendClass = `legend-container-${_id}`
-
-  let chartElement = null
-  let chartContainer = null
-
-  export let data = []
-  export let color = "britecharts"
-  export let height = 200
-  export let width = 200
-  export let margin = { top: 0, right: 0, bottom: 0, left: 0 }
-  export let useLegend = true
-  export let yAxisLabels = null
-  export let boxSize = null
-
-  onMount(async () => {
-    if (chart) {
-      if (table) {
-        await fetchData()
-      }
-      chartContainer = select(`.${chartClass}`)
-      bindChartUIProps()
-      chartContainer.datum(data).call(chart)
-    }
-  })
-
-  async function fetchData() {
-    const FETCH_ROWS_URL = `/api/views/all_${table}`
-    const response = await _bb.api.get(FETCH_ROWS_URL)
-    if (response.status === 200) {
-      const json = await response.json()
-      store.update(state => {
-        state[table] = json
-        return state
-      })
-    } else {
-      throw new Error("Failed to fetch rows.", response)
-    }
-  }
-
-  function bindChartUIProps() {
-    if (notNull(color)) {
-      chart.colorSchema(colorSchema)
-    }
-    if (notNull(height)) {
-      chart.height(height)
-    }
-    if (notNull(width)) {
-      chart.width(width)
-    }
-    if (notNull(boxSize)) {
-      chart.boxSize(boxSize)
-    }
-    if (notNull(yAxisLabels)) {
-      chart.yAxisLabels(yAxisLabels)
-    }
-  }
-
-  $: _data = table ? $store[table] : data
-
-  $: colorSchema = getColorSchema(color)
-</script>
-
-<div bind:this={chartElement} class={chartClass} />
-{#if useLegend}
-  <div class={legendClass} />
-{/if}
diff --git a/packages/standard-components/src/Chart/Legend.svelte b/packages/standard-components/src/Chart/Legend.svelte
deleted file mode 100644
index a5745f25d1..0000000000
--- a/packages/standard-components/src/Chart/Legend.svelte
+++ /dev/null
@@ -1,86 +0,0 @@
-<script>
-  import britecharts from "britecharts"
-  import { notNull } from "./utils"
-  import { select } from "d3-selection"
-  import { onMount } from "svelte"
-
-  export let useLegend = true
-  export let data = []
-  export let width = null
-  export let height = null
-  export let colorSchema = null
-  export let highlight = null
-  export let highlightByEntryId = null
-  export let isHorizontal = false
-  export let margin = null
-  export let marginRatio = null
-  export let markerSize = null
-  export let numberFormat = null
-  export let unit = null
-
-  export let legend = britecharts.legend() //exported it can be bound to
-  let legendContainer = null
-  let legendElement = null
-
-  $: {
-    if (legendElement) {
-      legendContainer = select(legendElement)
-      legend.numberFormat(".0f")
-
-      if (width) {
-        legend.width(width)
-      }
-
-      if (notNull(height)) {
-        legend.height(height)
-      }
-
-      if (notNull(colorSchema)) {
-        legend.colorSchema(colorSchema)
-      }
-
-      if (notNull(highlight)) {
-        legend.highlight(highlight)
-      }
-
-      if (notNull(highlightByEntryId)) {
-        legend.highlightByEntryId(highlightByEntryId)
-      }
-
-      if (notNull(isHorizontal)) {
-        legend.isHorizontal(isHorizontal)
-      }
-
-      if (notNull(margin)) {
-        legend.margin(margin)
-      }
-
-      if (notNull(marginRatio)) {
-        legend.marginRatio(marginRatio)
-      }
-
-      if (notNull(markerSize)) {
-        legend.markerSize(markerSize)
-      }
-
-      if (notNull(numberFormat)) {
-        legend.numberFormat(numberFormat)
-      }
-
-      if (notNull(unit)) {
-        legend.unit(unit)
-      }
-
-      legendContainer.datum(data).call(legend)
-    }
-  }
-
-  const legendClass = `legend-container`
-</script>
-
-{#if useLegend}
-  <div
-    bind:this={legendElement}
-    style={`width: ${width}px`}
-    class={legendClass} />
-{/if}
diff --git a/packages/standard-components/src/Chart/Line.svelte b/packages/standard-components/src/Chart/Line.svelte
deleted file mode 100644
index b6f5452072..0000000000
--- a/packages/standard-components/src/Chart/Line.svelte
+++ /dev/null
@@ -1,256 +0,0 @@
-<script>
-  import { getColorSchema, getChartGradient, notNull, hasProp } from "./utils"
-  import fetchData from "../fetchData.js"
-  import britecharts from "britecharts"
-  import { onMount } from "svelte"
-  import { isEmpty } from "lodash/fp"
-
-  import { select } from "d3-selection"
-  import shortid from "shortid"
-
-  const _id = shortid.generate()
-
-  export let datasource = {}
-
-  const chart = britecharts.line()
-  const chartClass = `line-container-${_id}`
-
-  let data = { dataByTopic: [] }
-
-  let chartElement
-  let chartContainer
-  let tooltipContainer
-
-  let tooltip = britecharts.tooltip()
-
-  export let customMouseOver = () => tooltip.show()
-  export let customMouseMove = (
-    dataPoint,
-    topicColorMap,
-    dataPointXPosition,
-    yPosition
-  ) => {
-    tooltip.update(dataPoint, topicColorMap, dataPointXPosition, yPosition)
-  }
-  export let customMouseOut = () => tooltip.hide()
-
-  export let customDataEntryClick = null
-  export let customTouchMove = null
-
-  export let color = "britecharts"
-  export let axisTimeCombinations = ""
-  export let grid = "horizontal"
-  export let aspectRatio = 0.5
-  export let width = null
-  export let height = null
-  export let isAnimated = true
-  export let lineCurve = "linear" //see api for possible opts
-  export let lineGradient = null
-  export let locale = "en-GB"
-  export let numberFormat = ""
-  export let shouldShowAllDataPoints = true
-  export let topicLabel = null
-  export let dateLabel = "date"
-  export let valueLabel = null
-  export let xAxisLabel = ""
-  export let xAxisValueType = "date"
-  export let xAxisScale = "linear"
-  export let xAxisFormat = "day-month"
-  export let xAxisCustomFormat = "%H"
-  export let yAxisLabel = null
-  export let yAxisLabelPadding = null
-  export let lines = null //not handled by setting prop
-  export let tooltipThreshold = null
-  export let tooltipTitle = ""
-  export let xTicks = ""
-  export let yTicks = ""
-
-  onMount(async () => {
-    if (!isEmpty(datasource)) {
-      data = await getAndPrepareData()
-
-      if (data.dataByTopic.length > 0) {
-        chartContainer = select(`.${chartClass}`)
-        bindChartUIProps()
-        bindChartEvents()
-        chartContainer.datum(data).call(chart)
-
-        // Hack 🤮 X Axis Label and last tick label gets cut off unless we do this 👇
-        const chartSvg = document.querySelector(`.${chartClass} .britechart`)
-        if (chartSvg) {
-          let height = chartSvg.getAttribute("height")
-          let width = chartSvg.getAttribute("width")
-          height = parseInt(height) + 35
-          width = parseInt(width) + 15
-          chartSvg.setAttribute("height", height)
-          chartSvg.setAttribute("width", width)
-        }
-
-        bindTooltip()
-      } else {
-        console.error(
-          "Line Chart - Please provide valid name, value and topic labels"
-        )
-      }
-    }
-  })
-
-  function bindTooltip() {
-    tooltipContainer = select(
-      `.${chartClass} .metadata-group .vertical-marker-container`
-    )
-    tooltip.topicLabel("topics")
-    tooltipContainer.datum([]).call(tooltip)
-  }
-
-  const schemaIsValid = data =>
-    hasProp(data, valueLabel) &&
-    hasProp(data, dateLabel) &&
-    hasProp(data, topicLabel)
-
-  async function getAndPrepareData() {
-    let dataByTopic = []
-    let _data = []
-
-    if (!topicLabel) {
-      topicLabel = "topicName"
-    }
-
-    if (!valueLabel) {
-      valueLabel = "value"
-    }
-
-    if (!dateLabel) {
-      dateLabel = "date"
-    }
-
-    _data = await fetchData(datasource)
-
-    if (schemaIsValid(_data)) {
-      _data.forEach((data, idx, arr) => {
-        let topicName = data[topicLabel]
-        if (!dataByTopic.some(dt => dt.topicName === topicName)) {
-          let d = {
-            topicName,
-            topic: dataByTopic.length + 1,
-            dates: arr
-              .filter(d => d[topicLabel] === topicName)
-              .map(d => ({
-                date: new Date(d[dateLabel]),
-                value: d[valueLabel],
-              }))
-              .sort((a, b) => a.date - b.date),
-          }
-          dataByTopic.push(d)
-        }
-      })
-    }
-
-    return { dataByTopic }
-  }
-
-  function bindChartUIProps() {
-    chart.tooltipThreshold(800)
-    chart.aspectRatio(0.5)
-    chart.xAxisCustomFormat("%e %b %Y")
-    chart.xTicks(data.dataByTopic.length)
-
-    if (notNull(color)) {
-      chart.colorSchema(colorSchema)
-    }
-    if (notNull(lineGradient)) {
-      chart.lineGradient(chartGradient)
-    }
-    if (notNull(axisTimeCombinations)) {
-      chart.axisTimeCombinations(axisTimeCombinations)
-    }
-    if (notNull(grid)) {
-      chart.grid(grid)
-    }
-    if (notNull(aspectRatio)) {
-      chart.aspectRatio(aspectRatio)
-    }
-    if (notNull(width)) {
-      chart.width(width)
-    }
-    if (notNull(height)) {
-      chart.height(height)
-    }
-    if (notNull(isAnimated)) {
-      chart.isAnimated(isAnimated)
-    }
-    if (notNull(lineCurve)) {
-      chart.lineCurve(lineCurve)
-    }
-    if (notNull(locale)) {
-      chart.locale(locale)
-    }
-    if (notNull(numberFormat)) {
-      chart.numberFormat(numberFormat)
-    }
-    if (notNull(shouldShowAllDataPoints)) {
-      chart.shouldShowAllDataPoints(shouldShowAllDataPoints)
-    }
-    if (notNull(xAxisLabel)) {
-      chart.xAxisLabel(xAxisLabel)
-    }
-    if (notNull(xAxisValueType)) {
-      chart.xAxisValueType(xAxisValueType)
-    }
-    if (notNull(xAxisScale)) {
-      chart.xAxisScale(xAxisScale)
-    }
-    if (notNull(xAxisFormat)) {
-      chart.xAxisFormat(xAxisFormat)
-    }
-    if (notNull(xAxisCustomFormat)) {
-      chart.xAxisCustomFormat(xAxisCustomFormat)
-    }
-    if (notNull(yAxisLabel)) {
-      chart.yAxisLabel(yAxisLabel)
-    }
-    if (notNull(yAxisLabelPadding)) {
-      chart.yAxisLabelPadding(yAxisLabelPadding)
-    }
-    if (notNull(tooltipThreshold)) {
-      chart.tooltipThreshold(tooltipThreshold)
-    }
-    if (notNull(lines)) {
-      chart.lines(lines)
-    }
-    if (notNull(xTicks)) {
-      chart.xTicks(Number(xTicks))
-    }
-    if (notNull(yTicks)) {
-      chart.yTicks(Number(yTicks))
-    }
-    if (notNull(tooltipTitle)) {
-      tooltip.title(tooltipTitle)
-    } else if (datasource.label) {
-      tooltip.title(datasource.label)
-    }
-  }
-
-  function bindChartEvents() {
-    if (customMouseOver) {
-      chart.on("customMouseOver", tooltip.show)
-    }
-    if (customMouseMove) {
-      chart.on("customMouseMove", tooltip.update)
-    }
-    if (customMouseOut) {
-      chart.on("customMouseOut", tooltip.hide)
-    }
-    if (customDataEntryClick) {
-      chart.on("customDataEntryClick", customDataEntryClick)
-    }
-    if (customTouchMove) {
-      chart.on("customTouchMove", customTouchMove)
-    }
-  }
-
-  $: colorSchema = getColorSchema(color)
-  $: chartGradient = getChartGradient(lineGradient)
-</script>
-
-<div bind:this={chartElement} class={chartClass} />
diff --git a/packages/standard-components/src/Chart/ScatterPlot.svelte b/packages/standard-components/src/Chart/ScatterPlot.svelte
deleted file mode 100644
index cc775fa6ee..0000000000
--- a/packages/standard-components/src/Chart/ScatterPlot.svelte
+++ /dev/null
@@ -1,187 +0,0 @@
-<script>
-  import { getColorSchema, getChartGradient, notNull } from "./utils"
-  import britecharts from "britecharts"
-  import { onMount } from "svelte"
-
-  import { select } from "d3-selection"
-  import shortid from "shortid"
-
-  const _id = shortid.generate()
-
-  export let _bb
-  export let table
-
-  let store = _bb.store
-
-  const chart = britecharts.scatterPlot()
-  const chartClass = `scatterplot-container-${_id}`
-  const legendClass = `legend-container-${_id}`
-
-  let chartElement = null
-  let chartContainer = null
-  let tooltip
-  let tooltipContainer
-
-  export let customClick = null
-  export let customMouseOut = () => tooltip.hide()
-  export let customMouseOver = () => tooltip.show()
-  export let customMouseMove = (
-    dataPoint,
-    colorMapping,
-    xPosition,
-    yPosition = null
-  ) => tooltip.update(dataPoint, colorMapping, xPosition, (yPosition = null))
-
-  export let data = []
-  export let color = "britecharts"
-  export let height = null
-  export let width = null
-  export let margin = null
-  export let aspectRatio = null
-  export let circleOpacity = null
-  export let grid = null
-  export let hasCrossHairs = null
-  export let hasHollowCircles = null
-  export let hasTrendline = null
-  export let highlightTextLegendOffset = null
-  export let isAnimated = null
-  export let maxCircleArea = null
-  export let xAxisFormat = null
-  export let xAxisLabel = null
-  export let xAxisLabelOffset = null
-  export let xTicks = null
-  export let yAxisFormat = null
-  export let yAxisLabel = null
-  export let yAxisLabelOffset = null
-  export let yTicks = null
-  export let useLegend = true
-
-  onMount(async () => {
-    if (chart) {
-      if (table) {
-        await fetchData()
-      }
-      chartContainer = select(`.${chartClass}`)
-      bindChartUIProps()
-      bindChartEvents()
-      chartContainer.datum(_data).call(chart)
-      bindChartTooltip()
-    }
-  })
-
-  async function fetchData() {
-    const FETCH_ROWS_URL = `/api/views/all_${table}`
-    const response = await _bb.api.get(FETCH_ROWS_URL)
-    if (response.status === 200) {
-      const json = await response.json()
-      store.update(state => {
-        state[table] = json
-        return state
-      })
-    } else {
-      throw new Error("Failed to fetch rows.", response)
-    }
-  }
-
-  function bindChartUIProps() {
-    if (notNull(color)) {
-      chart.colorSchema(colorSchema)
-    }
-    if (notNull(height)) {
-      chart.height(height)
-    }
-    if (notNull(width)) {
-      chart.width(width)
-    }
-    if (notNull(margin)) {
-      chart.width(margin)
-    }
-    if (notNull(aspectRatio)) {
-      chart.aspectRatio(aspectRatio)
-    }
-    if (notNull(circleOpacity)) {
-      chart.circleOpacity(circleOpacity)
-    }
-    if (notNull(grid)) {
-      chart.grid(grid)
-    }
-    if (notNull(hasCrossHairs)) {
-      chart.hasCrossHairs(hasCrossHairs)
-    }
-    if (notNull(hasHollowCircles)) {
-      chart.hasHollowCircles(hasHollowCircles)
-    }
-    if (notNull(hasTrendline)) {
-      chart.hasTrendline(hasTrendline)
-    }
-    if (notNull(highlightTextLegendOffset)) {
-      chart.highlightTextLegendOffset(highlightTextLegendOffset)
-    }
-    if (notNull(isAnimated)) {
-      chart.isAnimated(isAnimated)
-    }
-    if (notNull(maxCircleArea)) {
-      chart.maxCircleArea(maxCircleArea)
-    }
-    if (notNull(xAxisFormat)) {
-      chart.xAxisFormat(xAxisFormat)
-    }
-    if (notNull(xAxisLabel)) {
-      chart.xAxisLabel(xAxisLabel)
-    }
-    if (notNull(xAxisLabelOffset)) {
-      chart.xAxisLabelOffset(xAxisLabelOffset)
-    }
-    if (notNull(xTicks)) {
-      chart.xTicks(xTicks)
-    }
-    if (notNull(yAxisFormat)) {
-      chart.yAxisFormat(yAxisFormat)
-    }
-    if (notNull(yAxisLabel)) {
-      chart.yAxisLabel(yAxisLabel)
-    }
-    if (notNull(yAxisLabelOffset)) {
-      chart.yAxisLabelOffset(yAxisLabelOffset)
-    }
-    if (notNull(yTicks)) {
-      chart.yTicks(yTicks)
-    }
-  }
-
-  function bindChartEvents() {
-    if (customClick) {
-      chart.on("customClick", customClick)
-    }
-    if (customMouseMove) {
-      chart.on("customMouseMove", customMouseMove)
-    }
-    if (customMouseOut) {
-      chart.on("customMouseOut", customMouseOut)
-    }
-    if (customMouseOver) {
-      chart.on("customMouseOver", customMouseOver)
-    }
-  }
-
-  function bindChartTooltip() {
-    //TODO: May be more apt to use tooltip() here. Currently erroring however
-    tooltip = britecharts.miniTooltip()
-    tooltipContainer = select(`.${chartClass} .metadata-group`)
-    // tooltip
-    //   .title("Temperature")
-    //   .valueLabel("y")
-    //   .nameLabel("x")
-    //   .numberFormat("$")
-    tooltipContainer.datum([]).call(tooltip)
-  }
-
-  $: _data = table ? $store[table] : data
-
-  $: colorSchema = getColorSchema(color)
-</script>
-
-<div bind:this={chartElement} class={chartClass} />
-{#if useLegend}
-  <div class={legendClass} />
-{/if}
diff --git a/packages/standard-components/src/Chart/Sparkline.svelte b/packages/standard-components/src/Chart/Sparkline.svelte
deleted file mode 100644
index 920843a080..0000000000
--- a/packages/standard-components/src/Chart/Sparkline.svelte
+++ /dev/null
@@ -1,103 +0,0 @@
-<script>
-  import { getColorSchema, getChartGradient, notNull } from "./utils"
-  import britecharts from "britecharts"
-  import { onMount } from "svelte"
-
-  import { select } from "d3-selection"
-  import shortid from "shortid"
-
-  const _id = shortid.generate()
-
-  export let _bb
-  export let table
-
-  let store = _bb.store
-
-  const chart = britecharts.sparkline()
-  const chartClass = `sparkline-container-${_id}`
-  const legendClass = `legend-container-${_id}`
-
-  let chartElement = null
-  let chartContainer = null
-
-  export let data = []
-  export let areaGradient = null
-  export let height = null
-  export let width = null
-  export let dateLabel = null
-  export let duration = null
-  export let isAnimated = null
-  export let lineGradient = null
-  export let titleText = null
-  export let titleTextStyle = null
-  export let valueLabel = null
-  export let useLegend = true
-
-  onMount(async () => {
-    if (chart) {
-      if (table) {
-        await fetchData()
-      }
-      chartContainer = select(`.${chartClass}`)
-      bindChartUIProps()
-      chartContainer.datum(_data).call(chart)
-    }
-  })
-
-  async function fetchData() {
-    const FETCH_ROWS_URL = `/api/views/all_${table}`
-    const response = await _bb.api.get(FETCH_ROWS_URL)
-    if (response.status === 200) {
-      const json = await response.json()
-      store.update(state => {
-        state[table] = json
-        return state
-      })
-    } else {
-      throw new Error("Failed to fetch rows.", response)
-    }
-  }
-
-  function bindChartUIProps() {
-    if (notNull(areaGradient)) {
-      chart.areaGradient(aGradient)
-    }
-    if (notNull(lineGradient)) {
-      chart.lineGradient(lGradient)
-    }
-    if (notNull(height)) {
-      chart.height(height)
-    }
-    if (notNull(width)) {
-      chart.width(width)
-    }
-    if (notNull(dateLabel)) {
-      chart.dateLabel(dateLabel)
-    }
-    if (notNull(duration)) {
-      chart.duration(duration)
-    }
-    if (notNull(isAnimated)) {
-      chart.isAnimated(isAnimated)
-    }
-    if (notNull(titleText)) {
-      chart.titleText(titleText)
-    }
-    if (notNull(titleTextStyle)) {
-      chart.titleTextStyle(titleTextStyle)
-    }
-    if (notNull(valueLabel)) {
-      chart.valueLabel(valueLabel)
-    }
-  }
-
-  $: _data = table ? $store[table] : data
-
-  $: aGradient = getChartGradient(areaGradient)
-  $: lGradient = getChartGradient(lineGradient)
-</script>
-
-<div bind:this={chartElement} class={chartClass} />
-{#if useLegend}
-  <div class={legendClass} />
-{/if}
diff --git a/packages/standard-components/src/Chart/StackedArea.svelte b/packages/standard-components/src/Chart/StackedArea.svelte
deleted file mode 100644
index 04116c29f6..0000000000
--- a/packages/standard-components/src/Chart/StackedArea.svelte
+++ /dev/null
@@ -1,181 +0,0 @@
-<script>
-  import { getColorSchema, getChartGradient, notNull } from "./utils"
-  import britecharts from "britecharts"
-  import { onMount } from "svelte"
-
-  import { select } from "d3-selection"
-  import shortid from "shortid"
-
-  const _id = shortid.generate()
-
-  export let _bb
-  export let table
-
-  let store = _bb.store
-
-  const chart = britecharts.stackedArea()
-  const chartClass = `stackedarea-container-${_id}`
-  const legendClass = `legend-container-${_id}`
-
-  let chartElement = null
-  let chartContainer = null
-
-  export let customMouseOver = () => tooltip.show()
-  export let customMouseMove = (
-    dataPoint,
-    colorMapping,
-    xPosition,
-    yPosition = null
-  ) => tooltip.update(dataPoint, colorMapping, xPosition, (yPosition = null))
-  export let customMouseOut = () => tooltip.hide()
-
-  export let data = []
-  export let color = "britecharts"
-  export let height = null
-  export let width = null
-  export let margin = null
-  export let areaCurve = null
-  export let areaOpacity = null
-  export let aspectRatio = null
-  export let dateLabel = null
-  export let grid = null
-  export let isAnimated = null
-  export let keyLabel = null
-  export let locale = null
-  export let tooltipThreshold = null
-  export let topicsOrder = null
-  export let valueLabel = null
-  export let xAxisCustomFormat = null
-  export let xAxisFormat = null
-  export let xAxisScale = null
-  export let xAxisValueType = null
-  export let xTicks = null
-  export let yAxisBaseline = null
-  export let yAxisLabel = null
-  export let yAxisLabelOffset = null
-  export let yTicks = null
-  export let useLegend = true
-
-  onMount(async () => {
-    if (chart) {
-      if (table) {
-        await fetchData()
-      }
-      chartContainer = select(`.${chartClass}`)
-      bindChartUIProps()
-      bindChartEvents()
-      chartContainer.datum(_data).call(chart)
-      bindChartTooltip()
-    }
-  })
-
-  async function fetchData() {
-    const FETCH_ROWS_URL = `/api/views/all_${table}`
-    const response = await _bb.api.get(FETCH_ROWS_URL)
-    if (response.status === 200) {
-      const json = await response.json()
-      store.update(state => {
-        state[table] = json
-        return state
-      })
-    } else {
-      throw new Error("Failed to fetch rows.", response)
-    }
-  }
-
-  function bindChartUIProps() {
-    if (notNull(color)) {
-      chart.colorSchema(colorSchema)
-    }
-    if (notNull(height)) {
-      chart.height(height)
-    }
-    if (notNull(width)) {
-      chart.width(width)
-    }
-    if (notNull(margin)) {
-      chart.margin(margin)
-    }
-    if (notNull(areaCurve)) {
-      chart.areaCurve(areaCurve)
-    }
-    if (notNull(areaOpacity)) {
-      chart.areaOpacity(areaOpacity)
-    }
-    if (notNull(aspectRatio)) {
-      chart.aspectRatio(aspectRatio)
-    }
-    if (notNull(dateLabel)) {
-      chart.dateLabel(dateLabel)
-    }
-    if (notNull(grid)) {
-      chart.grid(grid)
-    }
-    if (notNull(isAnimated)) {
-      chart.isAnimated(isAnimated)
-    }
-    if (notNull(keyLabel)) {
-      chart.keyLabel(keyLabel)
-    }
-    if (notNull(locale)) {
-      chart.locale(locale)
-    }
-    if (notNull(tooltipThreshold)) {
-      chart.tooltipThreshold(tooltipThreshold)
-    }
-    if (notNull(topicsOrder)) {
-      chart.topicsOrder(topicsOrder)
-    }
-    if (notNull(valueLabel)) {
-      chart.valueLabel(valueLabel)
-    }
-    if (notNull(xAxisCustomFormat)) {
-      chart.xAxisCustomFormat(xAxisCustomFormat)
-    }
-    if (notNull(xAxisFormat)) {
-      chart.xAxisFormat(xAxisFormat)
-    }
-    if (notNull(xAxisScale)) {
-      chart.xAxisScale(xAxisScale)
-    }
-    if (notNull(xAxisValueType)) {
-      chart.xAxisValueType(xAxisValueType)
-    }
-    if (notNull(xTicks)) {
-      chart.xTicks(xTicks)
-    }
-    if (notNull(yAxisBaseline)) {
-      chart.yAxisBaseline(yAxisBaseline)
-    }
-    if (notNull(yAxisLabel)) {
-      chart.yAxisLabel(yAxisLabel)
-    }
-    if (notNull(yAxisLabelOffset)) {
-      chart.yAxisLabelOffset(yAxisLabelOffset)
-    }
-    if (notNull(yTicks)) {
-      chart.yTicks(yTicks)
-    }
-  }
-
-  function bindChartEvents() {
-    if (customMouseMove) {
-      chart.on("customMouseMove", customMouseMove)
-    }
-    if (customMouseOut) {
-      chart.on("customMouseOut", customMouseOut)
-    }
-    if (customMouseOver) {
-      chart.on("customMouseOver", customMouseOver)
-    }
-  }
-
-  $: _data = table ? $store[table] : data
-
-  $: colorSchema = getColorSchema(color)
-</script>
-
-<div bind:this={chartElement} class={chartClass} />
-{#if useLegend}
-  <div class={legendClass} />
-{/if}
diff --git a/packages/standard-components/src/Chart/StackedBar.svelte b/packages/standard-components/src/Chart/StackedBar.svelte
deleted file mode 100644
index f6e7a7a921..0000000000
--- a/packages/standard-components/src/Chart/StackedBar.svelte
+++ /dev/null
@@ -1,176 +0,0 @@
-<script>
-  import { getColorSchema, getChartGradient, notNull } from "./utils"
-  import britecharts from "britecharts"
-  import { onMount } from "svelte"
-
-  import { select } from "d3-selection"
-  import shortid from "shortid"
-
-  const _id = shortid.generate()
-
-  const chart = britecharts.stackedBar()
-  const chartClass = `stackedbar-container-${_id}`
-  const legendClass = `legend-container-${_id}`
-
-  export let _bb
-  export let table
-
-  let store = _bb.store
-
-  let chartElement = null
-  let chartContainer = null
-  let tooltip
-  let tooltipContainer
-
-  export let customMouseOver = () => tooltip.show()
-  export let customMouseMove = (dataPoint, colorMapping, xPosition) =>
-    tooltip.update(dataPoint, colorMapping, xPosition)
-  export let customMouseOut = () => tooltip.hide()
-
-  export let data = []
-  export let color = "britecharts"
-  export let height = null
-  export let width = null
-  export let margin = null
-  export let aspectRatio = null
-  export let betweenBarsPadding = null
-  export let grid = null
-  export let hasPercentage = null
-  export let hasReversedStacks = null
-  export let isAnimated = null
-  export let isHorizontal = null
-  export let locale = null
-  export let nameLabel = null
-  export let percentageAxisToMaxRatio = null
-  export let stackLabel = null
-  export let valueLabel = null
-  export let valueLabelFormat = null
-  export let xTicks = null
-  export let yTicks = null
-  export let yAxisLabel = null
-  export let yAxisLabelOffset = null
-  export let useLegend = true
-
-  onMount(async () => {
-    if (chart) {
-      if (table) {
-        await fetchData()
-      }
-      chartContainer = select(`.${chartClass}`)
-      bindChartUIProps()
-      bindChartEvents()
-      chartContainer.datum(_data).call(chart)
-      //   bindChartTooltip()
-    }
-  })
-
-  async function fetchData() {
-    const FETCH_ROWS_URL = `/api/views/all_${table}`
-    const response = await _bb.api.get(FETCH_ROWS_URL)
-    if (response.status === 200) {
-      const json = await response.json()
-      store.update(state => {
-        state[table] = json
-        return state
-      })
-    } else {
-      throw new Error("Failed to fetch rows.", response)
-    }
-  }
-
-  function bindChartUIProps() {
-    //UI PROPS
-    if (notNull(color)) {
-      chart.colorSchema(colorSchema)
-    }
-    if (notNull(height)) {
-      chart.height(height)
-    }
-    if (notNull(width)) {
-      chart.width(width)
-    }
-    if (notNull(margin)) {
-      chart.margin(margin)
-    }
-    if (notNull(aspectRatio)) {
-      chart.aspectRatio(aspectRatio)
-    }
-    if (notNull(betweenBarsPadding)) {
-      chart.betweenBarsPadding(betweenBarsPadding)
-    }
-    if (notNull(grid)) {
-      chart.grid(grid)
-    }
-    if (notNull(hasPercentage)) {
-      chart.hasPercentage(hasPercentage)
-    }
-    if (notNull(hasReversedStacks)) {
-      chart.hasReversedStacks(hasReversedStacks)
-    }
-    if (notNull(isAnimated)) {
-      chart.isAnimated(isAnimated)
-    }
-    if (notNull(isHorizontal)) {
-      chart.isHorizontal(isHorizontal)
-    }
-    if (notNull(locale)) {
-      chart.locale(locale)
-    }
-    if (notNull(nameLabel)) {
-      chart.nameLabel(nameLabel)
-    }
-    if (notNull(percentageAxisToMaxRatio)) {
-      chart.percentageAxisToMaxRatio(percentageAxisToMaxRatio)
-    }
-    if (notNull(stackLabel)) {
-      chart.stackLabel(stackLabel)
-    }
-    if (notNull(valueLabel)) {
-      chart.valueLabel(valueLabel)
-    }
-    if (notNull(valueLabelFormat)) {
-      chart.valueLabelFormat(valueLabelFormat)
-    }
-    if (notNull(xTicks)) {
-      chart.xTicks(xTicks)
-    }
-    if (notNull(yTicks)) {
-      chart.yTicks(yTicks)
-    }
-    if (notNull(yAxisLabel)) {
-      chart.yAxisLabel(yAxisLabel)
-    }
-    if (notNull(yAxisLabelOffset)) {
-      chart.yAxisLabelOffset(yAxisLabelOffset)
-    }
-  }
-
-  function bindChartEvents() {
-    if (customMouseMove) {
-      chart.on("customMouseMove", customMouseMove)
-    }
-    if (customMouseOut) {
-      chart.on("customMouseOut", customMouseOut)
-    }
-    if (customMouseOver) {
-      chart.on("customMouseOver", customMouseOver)
-    }
-  }
-
-  function bindChartTooltip() {
-    tooltip = britecharts.tooltip()
-    // tooltip.topicLabel("Hi Im the topic")
-    // tooltip.topicsOrder(["x", "y"])
-    tooltipContainer = select(`.${chartClass} .metadata-group`)
-    tooltipContainer.datum([]).call(tooltip)
-  }
-
-  $: _data = table ? $store[table] : data
-
-  $: colorSchema = getColorSchema(color)
-</script>
-
-<div bind:this={chartElement} class={chartClass} />
-{#if useLegend}
-  <div class={legendClass} />
-{/if}
diff --git a/packages/standard-components/src/Chart/Step.svelte b/packages/standard-components/src/Chart/Step.svelte
deleted file mode 100644
index b193d78f4c..0000000000
--- a/packages/standard-components/src/Chart/Step.svelte
+++ /dev/null
@@ -1,129 +0,0 @@
-<script>
-  import { getColorSchema, getChartGradient, notNull } from "./utils"
-  import britecharts from "britecharts"
-  import { onMount } from "svelte"
-
-  import { select } from "d3-selection"
-  import shortid from "shortid"
-
-  /* 
-  ISSUES - Doesn't seem to allow color change. Chart is colored black by default
-  */
-
-  const _id = shortid.generate()
-
-  export let _bb
-  export let table
-
-  let store = _bb.store
-
-  const chart = britecharts.step()
-  const chartClass = `step-container-${_id}`
-  const legendClass = `legend-container-${_id}`
-
-  let chartElement = null
-  let chartContainer = null
-  let tooltip
-  let tooltipContainer
-
-  export let customMouseOver = () => tooltip.show()
-  export let customMouseMove = (
-    dataPoint,
-    colorMapping,
-    xPosition,
-    yPosition = null
-  ) => tooltip.update(dataPoint, colorMapping, xPosition, (yPosition = null))
-  export let customMouseOut = () => tooltip.hide()
-
-  export let data = []
-  export let height = null
-  export let width = null
-  export let margin = null
-  export let xAxisLabel = null
-  export let xAxisLabelOffset = null
-  export let yAxisLabel = null
-  export let yAxisLabelOffset = null
-  export let yTicks = null
-  export let useLegend = true
-
-  onMount(async () => {
-    if (chart) {
-      if (table) {
-        await fetchData()
-      }
-      chartContainer = select(`.${chartClass}`)
-      bindChartUIProps()
-      bindChartEvents()
-      chartContainer.datum(_data).call(chart)
-      bindChartTooltip()
-    }
-  })
-
-  async function fetchData() {
-    const FETCH_ROWS_URL = `/api/views/all_${table}`
-    const response = await _bb.api.get(FETCH_ROWS_URL)
-    if (response.status === 200) {
-      const json = await response.json()
-      store.update(state => {
-        state[table] = json
-        return state
-      })
-    } else {
-      throw new Error("Failed to fetch rows.", response)
-    }
-  }
-
-  function bindChartUIProps() {
-    if (notNull(height)) {
-      chart.height(height)
-    }
-    if (notNull(width)) {
-      chart.width(width)
-    }
-    if (notNull(margin)) {
-      chart.margin(margin)
-    }
-    if (notNull(xAxisLabel)) {
-      chart.xAxisLabel(xAxisLabel)
-    }
-    if (notNull(xAxisLabelOffset)) {
-      chart.xAxisLabelOffset(xAxisLabelOffset)
-    }
-    if (notNull(yAxisLabel)) {
-      chart.yAxisLabel(yAxisLabel)
-    }
-    if (notNull(yAxisLabelOffset)) {
-      chart.yAxisLabelOffset(yAxisLabelOffset)
-    }
-    if (notNull(yTicks)) {
-      chart.yTicks(yTicks)
-    }
-  }
-
-  function bindChartEvents() {
-    if (customMouseMove) {
-      chart.on("customMouseMove", customMouseMove)
-    }
-    if (customMouseOut) {
-      chart.on("customMouseOut", customMouseOut)
-    }
-    if (customMouseOver) {
-      chart.on("customMouseOver", customMouseOver)
-    }
-  }
-
-  function bindChartTooltip() {
-    tooltip = britecharts.miniTooltip()
-    tooltipContainer = select(`.${chartClass} .metadata-group`)
-    tooltipContainer.datum([]).call(tooltip)
-  }
-
-  $: _data = table ? $store[table] : data
-
-  $: colorSchema = getColorSchema(color)
-</script>
-
-<div bind:this={chartElement} class={chartClass} />
-{#if useLegend}
-  <div class={legendClass} />
-{/if}
diff --git a/packages/standard-components/src/Chart/Temp.svelte b/packages/standard-components/src/Chart/Temp.svelte
deleted file mode 100644
index 1703c7b604..0000000000
--- a/packages/standard-components/src/Chart/Temp.svelte
+++ /dev/null
@@ -1,41 +0,0 @@
-<script>
-  import { getColorSchema, getChartGradient, notNull } from "./utils"
-  import britecharts from "britecharts"
-  import { onMount } from "svelte"
-
-  import { select } from "d3-selection"
-  import shortid from "shortid"
-
-  const _id = shortid.generate()
-
-  const chart = britecharts.chartname()
-  const chartClass = `donut-container-${_id}`
-  const legendClass = `legend-container-${_id}`
-
-  let chartElement = null
-  let chartContainer = null
-
-  export let data = []
-  export let color = "britecharts"
-  export let height = 200
-  export let width = 200
-  export let margin = { top: 0, right: 0, bottom: 0, left: 0 }
-  export let useLegend = true
-
-  onMount(() => {
-    if (chart) {
-      chartContainer = select(`.${chartClass}`)
-      bindChartUIProps()
-      bindChartEvents()
-      chartContainer.datum(data).call(chart)
-      bindChartTooltip()
-    }
-  })
-
-  $: colorSchema = getColorSchema(color)
-</script>
-
-<div bind:this={chartElement} class={chartClass} />
-{#if useLegend}
-  <div class={legendClass} />
-{/if}
diff --git a/packages/standard-components/src/Chart/Tooltip.svelte b/packages/standard-components/src/Chart/Tooltip.svelte
deleted file mode 100644
index f2898c9607..0000000000
--- a/packages/standard-components/src/Chart/Tooltip.svelte
+++ /dev/null
@@ -1,81 +0,0 @@
-<script>
-  import { notNull } from "./utils"
-  import { onMount } from "svelte"
-  import { select } from "d3-selection"
-
-  import britecharts from "britecharts"
-
-  export const tooltip = britecharts.tooltip()
-
-  export let chartClass = ""
-  let tooltipContainer
-
-  export let axisTimeCombinations = null
-  export let dateCustomFormat = null
-  export let dateFormat = null
-  export let dateLabel = null
-  export let locale = null
-  export let nameLabel = null
-  export let numberFormat = null
-  export let shouldShowDateInTitle = false
-  export let title = "My Tooltip"
-  export let tooltipOffset = null
-  export let topicLabel = "values"
-  export let topicsOrder = null
-  export let valueLabel = null
-  export let xAxisValueType = null
-
-  onMount(() => {
-    tooltipContainer = select(
-      `.${chartClass} .metadata-group .vertical-marker-container`
-    )
-    tooltipContainer.datum([]).call(tooltip)
-  })
-
-  $: if (tooltipContainer) {
-    if (notNull(axisTimeCombinations)) {
-      tooltip.axisTimeCombinations(axisTimeCombinations)
-    }
-    if (notNull(dateCustomFormat)) {
-      tooltip.dateCustomFormat(dateCustomFormat)
-    }
-    if (notNull(dateFormat)) {
-      tooltip.dateFormat(dateFormat)
-    }
-    if (notNull(dateLabel)) {
-      tooltip.dateLabel(dateLabel)
-    }
-    if (notNull(locale)) {
-      tooltip.locale(locale)
-    }
-    if (notNull(nameLabel)) {
-      tooltip.nameLabel(nameLabel)
-    }
-    if (notNull(numberFormat)) {
-      tooltip.numberFormat(numberFormat)
-    }
-    if (notNull(shouldShowDateInTitle)) {
-      tooltip.shouldShowDateInTitle(shouldShowDateInTitle)
-    }
-    if (notNull(title)) {
-      tooltip.title(title)
-    }
-    if (notNull(tooltipOffset)) {
-      tooltip.tooltipOffset(tooltipOffset)
-    }
-    if (notNull(topicLabel)) {
-      tooltip.topicLabel(topicLabel)
-    }
-    if (notNull(topicsOrder)) {
-      tooltip.topicsOrder(topicsOrder)
-    }
-    if (notNull(valueLabel)) {
-      tooltip.valueLabel(valueLabel)
-    }
-    if (notNull(xAxisValueType)) {
-      tooltip.xAxisValueType(xAxisValueType)
-    }
-
-    tooltipContainer.datum([]).call(tooltip)
-  }
-</script>
diff --git a/packages/standard-components/src/Chart/index.js b/packages/standard-components/src/Chart/index.js
index a94abf8ac8..0dafa8a70d 100644
--- a/packages/standard-components/src/Chart/index.js
+++ b/packages/standard-components/src/Chart/index.js
@@ -1,14 +1,2 @@
-import "britecharts/dist/css/britecharts.min.css"
-
-export { default as donut } from "./Donut.svelte"
 export { default as bar } from "./Bar.svelte"
 export { default as line } from "./Line.svelte"
-export { default as brush } from "./Brush.svelte"
-export { default as bullet } from "./Bullet.svelte"
-export { default as groupedbar } from "./GroupedBar.svelte"
-export { default as heatmap } from "./Heatmap.svelte"
-export { default as sparkline } from "./Sparkline.svelte"
-export { default as scatterplot } from "./ScatterPlot.svelte"
-export { default as step } from "./Step.svelte"
-export { default as stackedarea } from "./StackedArea.svelte"
-export { default as stackedbar } from "./StackedBar.svelte"
diff --git a/packages/standard-components/src/Chart/tests/bar.html b/packages/standard-components/src/Chart/tests/bar.html
deleted file mode 100644
index 9828587375..0000000000
--- a/packages/standard-components/src/Chart/tests/bar.html
+++ /dev/null
@@ -1,72 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
-
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-selection/1.2.0/d3-selection.js"></script>
-
-    <script src="../../../node_modules/britecharts/dist/umd/bar.min.js" type="text/javascript"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/britecharts/dist/css/britecharts.min.css" type="text/css" />
-
-</head>
-<body>
-    
-    <article>
-        <h2 class="tutorial__heading">Bar Chart</h2>
-        <div class="bar-chart"></div>
-    </article>
-
-    <script>
-
-        const dataset = [
-        {
-            "name": "Radiating",
-            "value": 2
-        },
-        {
-            "name": "Opalescent",
-            "value": 4
-        },
-        {
-            "name": "Shining",
-            "value": 3
-        },
-        {
-            "name": "Vibrant",
-            "value": 6
-        },
-        {
-            "name": "Vivid",
-            "value": 6
-        },
-        {
-            "name": "Brilliant",
-            "value": 1
-        }
-    ]
-
-        const barContainer = d3.select('.bar-chart');
-
-        const barChart = britecharts.bar()
-
-        barChart
-            .width(700)
-            .height(300)
-            .enableLabels(true)
-            .labelsNumberFormat('.0%')
-            .isAnimated(true)
-            .yAxisLabel("Quantity")
-            .xAxisLabel("Color")
-            .betweenBarsPadding("0.8")
-
-            // .on('customMouseOver', tooltip.show)
-            // .on('customMouseMove', tooltip.update)
-            // .on('customMouseOut', tooltip.hide);
-
-        barContainer.datum(dataset).call(barChart);
-
-    </script>
-</body>
-</html>
\ No newline at end of file
diff --git a/packages/standard-components/src/Chart/tests/line.html b/packages/standard-components/src/Chart/tests/line.html
deleted file mode 100644
index 0340a3ddd4..0000000000
--- a/packages/standard-components/src/Chart/tests/line.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>HTML Line</title>
-
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-selection/1.2.0/d3-selection.js"></script>
-<!-- <script src="https://cdn.jsdelivr.net/npm/britecharts@2.10.0/dist/umd/line.min.js"
-        type="text/javascript"></script> -->
-
-            <script src="../../../node_modules/britecharts/dist/umd/line.min.js" type="text/javascript"></script>
-            <script src="../../../node_modules/britecharts/dist/umd/tooltip.min.js" type="text/javascript"></script>
-
-
-
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/britecharts/dist/css/britecharts.min.css" type="text/css" />
-</head>
-<body>
-
-    <article>
-        <div class="js-line-chart-container line-chart-container card--chart"></div>
-    </article>
-    
-    <script>
-
-const testData = {
-  data: [
-  {
-amount: 8,
-audited: new Date("2020-01-01T16:00:00-08:00"),
-city: "Belfast",
-name: 1,
-tableId: "2334751ac0764c1a931bff5b6b6767eb",
-type: "row",
-_id: "ceb87054790f480e80512368545755bb",
-_rev: "2-56e401ebaf59e6310b85fb0c6c2fece5",
-},
-{
-amount: 12,
-audited: new Date("2020-01-03T16:00:00-08:00"),
-city: "Belfast",
-name: 1,
-tableId: "2334751ac0764c1a931bff5b6b6767eb",
-type: "row",
-_id: "0a36103b55124f348a23d10b2f3ed0e3",
-_rev: "2-50d62530b2edfc63d5fd0b3719dbb286",
-},
-{
-amount: 6,
-audited: new Date("2020-01-04T16:00:00-08:00"),
-city: "Belfast",
-name: 1,
-tableId: "2334751ac0764c1a931bff5b6b6767eb",
-type: "row",
-_id: "68ade2bb94754caa8fc62c7084e3cef7",
-_rev: "2-a03fe02f3595920adfbcd9c70564fe9d",
-},
-{
-amount: 2,
-audited: new Date("2020-01-01T16:00:00-08:00"),
-city: "Dublin",
-name: 2,
-tableId: "2334751ac0764c1a931bff5b6b6767eb",
-type: "row",
-_id: "2ab6dabf833f4d99b3438fa4353ba429",
-_rev: "2-45b190489e76842981902cc9f04369ec",
-},
-{
-amount: 16,
-audited: new Date("2020-01-02T16:00:00-08:00"),
-city: "Dublin",
-name: 2,
-tableId: "2334751ac0764c1a931bff5b6b6767eb",
-type: "row",
-_id: "1b2ca36db1724427a98ba95547f946e0",
-_rev: "2-c43def17ada959948b9af5484ad5b6b7",
-},
-{
-amount: 7,
-audited: new Date("2020-01-03T16:00:00-08:00"),
-city: "Dublin",
-name: 2,
-tableId: "2334751ac0764c1a931bff5b6b6767eb",
-type: "row",
-_id: "d9235d884a224ca68ac30cefdbb8ae53",
-_rev: "2-695e426a261a25474cbf6b1f069dccb4",
-},
-{
-amount: 3,
-audited: new Date("2020-01-04T16:00:00-08:00"),
-city: "Dublin",
-name: 2,
-tableId: "2334751ac0764c1a931bff5b6b6767eb",
-type: "row",
-_id: "9f8bc39a9cfb4f779da8c998d7622927",
-_rev: "2-8ae1aff82e1ffc6ffa75f6b9d074e003",
-},
-{
-amount: 4,
-audited: new Date("2020-01-02T16:00:00-08:00"),
-city: "London",
-name: 3,
-tableId: "2334751ac0764c1a931bff5b6b6767eb",
-type: "row",
-_id: "75274e906073493bbf75cda8656e8db0",
-_rev: "2-6cfc6bb2fccb83c92b50aa5507f2a092"
-},
-{
-amount: 22,
-audited: new Date("2020-01-06T16:00:00-08:00"),
-city: "London",
-name: 3,
-tableId: "2334751ac0764c1a931bff5b6b6767eb",
-type: "row",
-_id: "da3d4b151bc641f4ace487a2314d2550",
-_rev: "2-ac18490eaa016be0e71bd4c4ea332981",
-}
-  ]
-}
-
-const topicLabel = "city"
-const valueLabel = "amount"
-const dateLabel = "audited"
-
-function prepareData() {
-  let dataByTopic = []
-  testData.data.forEach((data, idx, arr) => {
-    let topicName = data[topicLabel]
-    if(!dataByTopic.some(dt => dt.topicName === topicName)) {
-      let d = {topicName, topic: dataByTopic.length + 1, dates: arr.filter(d => d[topicLabel] === topicName).map(d => ({date: d[dateLabel], value: d[valueLabel]}))}
-      dataByTopic.push(d)
-    }
-  })
-  return {dataByTopic}
-}
-
-
-    
-
-const newData = prepareData()
-
-const dataByTopic = {
-  dataByTopic: [
-    {
-      topicName: 'San Francisco',
-      topic: 123,
-      dates: [
-          {
-              date: '2017-01-16T16:00:00-08:00',
-              value: 1
-          },
-          {
-              date: '2017-01-16T17:00:00-08:00',
-              value: 2
-          }
-      ]
-  },
-  {
-      topicName: 'Belfast',
-      topic: 456,
-      dates: [
-          {
-              date: '2017-01-16T16:00:00-08:00',
-              value: 5
-          },
-          {
-              date: '2017-01-16T17:00:00-08:00',
-              value: 8
-          }
-      ]
-  }
- ]
-}
-
-const data = {
-    data: [
-      {
-        topicName: "Oakland",
-        name: 2,
-        date: "2017-01-16T16:00:00-08:00",
-        value: 3,
-      },
-      {
-        topicName: "Oakland",
-        name: 2,
-        date: "2017-01-17T16:00:00-08:00",
-        value: 7,
-      },
-      {
-        topicName: "Oakland",
-        name: 2,
-        date: "2017-01-18T16:00:00-08:00",
-        value: 5,
-      },
-      {
-        topicName: "Oakland",
-        name: 2,
-        date: "2017-01-19T16:00:00-08:00",
-        value: 6,
-      },
-      {
-        topicName: "Oakland",
-        name: 2,
-        date: "2017-01-20T16:00:00-08:00",
-        value: 1,
-      },
-    ],
-  }
-
-    const lineContainer = d3.select('.js-line-chart-container');
-
-    const lineChart = britecharts.line()
-    const tooltip = britecharts.tooltip()
-
-    lineChart.grid("horizontal").aspectRatio(0.5).isAnimated(true).shouldShowAllDataPoints(true)
-
-    lineContainer.datum(newData).call(lineChart);
-    
-    const tooltipContainer = d3.select(`.js-line-chart-container .metadata-group .vertical-marker-container`)
-
-    tooltip.title("yeooo")
-    tooltip.topicLabel("topics")
-    lineChart.on("customMouseOver", tooltip.show)
-    lineChart.on("customMouseMove", tooltip.update)
-    lineChart.on("customMouseOut", tooltip.hide)
-
-
-    tooltipContainer.datum([]).call(tooltip)
-
-    
-    </script>
-    
-</body>
-</html>
\ No newline at end of file
diff --git a/packages/standard-components/src/Chart/utils.js b/packages/standard-components/src/Chart/utils.js
deleted file mode 100644
index 7cd682e88d..0000000000
--- a/packages/standard-components/src/Chart/utils.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import britecharts from "britecharts"
-
-export const notNull = value => value || value === false
-
-export const hasProp = (data, prop) => data.every(d => prop in d)
-
-export const chartTypes = britecharts ? Object.keys(britecharts) : null
-
-//expose chart color schemas for use or reference outside compnent
-export const colorSchemas = britecharts ? britecharts.colors.colorSchemas : null
-
-//export color gradients for use or reference outside the component
-export const colorGradients = britecharts
-  ? britecharts.colors.colorGradients
-  : null
-
-export const getColorSchema = color =>
-  color ? colorSchemas[color] : colorSchemas["britecharts"]
-
-export const getChartGradient = gradient =>
-  gradient ? colorGradients[gradient] : null
-
-export function reformatDataKey(data = [], dataKey = null, formatKey = null) {
-  let ignoreList = ["_id", "_rev", "id"]
-  if (dataKey && data.every(d => d[dataKey])) {
-    return data.map(d => {
-      let clonedRow = { ...d }
-      if (clonedRow[formatKey]) {
-        delete clonedRow[formatKey]
-      }
-      let value = clonedRow[dataKey]
-      if (!ignoreList.includes(dataKey)) {
-        delete clonedRow[dataKey]
-      }
-      clonedRow[formatKey] = value
-      return clonedRow
-    })
-  } else {
-    return data
-  }
-}
diff --git a/packages/standard-components/src/DataChart.svelte b/packages/standard-components/src/DataChart.svelte
deleted file mode 100644
index 4948fa2cc6..0000000000
--- a/packages/standard-components/src/DataChart.svelte
+++ /dev/null
@@ -1,49 +0,0 @@
-<script>
-  import { onMount } from "svelte"
-  import FusionCharts from "fusioncharts"
-  import Charts from "fusioncharts/fusioncharts.charts"
-  import FusionTheme from "fusioncharts/themes/fusioncharts.theme.fusion"
-  import SvelteFC, { fcRoot } from "svelte-fusioncharts"
-
-  fcRoot(FusionCharts, Charts, FusionTheme)
-
-  export let _bb
-  export let table
-  export let type = "column2d"
-
-  let store = _bb.store
-
-  $: chartConfigs = {
-    type,
-    width: "600",
-    height: "400",
-    dataFormat: "json",
-    dataSource: {
-      data: $store[table] || [],
-    },
-  }
-
-  $: console.log("CHART CONFIGS", chartConfigs)
-
-  async function fetchData() {
-    const FETCH_ROWS_URL = `/api/views/all_${table}`
-    const response = await _bb.api.get(FETCH_ROWS_URL)
-    if (response.status === 200) {
-      const json = await response.json()
-      store.update(state => {
-        state[table] = json
-        return state
-      })
-    } else {
-      throw new Error("Failed to fetch rows.", response)
-    }
-  }
-
-  onMount(async () => {
-    await fetchData()
-  })
-</script>
-
-<div id="container">
-  <SvelteFC {...chartConfigs} />
-</div>
diff --git a/packages/standard-components/src/index.js b/packages/standard-components/src/index.js
index c99c2cbe56..60473bec70 100644
--- a/packages/standard-components/src/index.js
+++ b/packages/standard-components/src/index.js
@@ -5,7 +5,6 @@ export { default as text } from "./Text.svelte"
 export { default as heading } from "./Heading.svelte"
 export { default as input } from "./Input.svelte"
 export { default as textfield } from "./Textfield.svelte"
-
 export { default as button } from "./Button.svelte"
 export { default as login } from "./Login.svelte"
 export { default as saveRowButton } from "./Templates/saveRowButton"
@@ -15,7 +14,6 @@ export { default as Navigation } from "./Navigation.svelte"
 export { default as datagrid } from "./DataGrid/Component.svelte"
 export { default as dataform } from "./DataForm.svelte"
 export { default as dataformwide } from "./DataFormWide.svelte"
-export { default as datachart } from "./DataChart.svelte"
 export { default as datalist } from "./DataList.svelte"
 export { default as list } from "./List.svelte"
 export { default as datasearch } from "./DataSearch.svelte"
@@ -26,5 +24,5 @@ export { default as cardhorizontal } from "./CardHorizontal.svelte"
 export { default as rowdetail } from "./RowDetail.svelte"
 export { default as newrow } from "./NewRow.svelte"
 export { default as datepicker } from "./DatePicker.svelte"
-export * from "./Chart"
 export { default as icon } from "./Icon.svelte"
+export * from "./Chart"