Merge branch 'master' of github.com:Budibase/budibase into master

2020-08-18 21:00:09 +01:00 · 2020-08-18 21:00:09 +01:00 · b589d3c3ed
parent f2036a98f5 8e5d631aa1
commit b589d3c3ed
16 changed files with 1032 additions and 482 deletions
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@ -306,7 +306,7 @@ export default {
                label: "destinationUrl",
                key: "destinationUrl",
                control: Input,
-                placeholder: "/table/{{context._id}}",
+                placeholder: "/table/_id",
              },
            ],
          },
@ -555,102 +555,463 @@ export default {
          ],
        },
        {
-          name: "Donut Chart",
-          _component: "@budibase/standard-components/donut",
-          description: "Donut chart",
-          icon: "ri-pie-chart-line",
-          properties: {
-            settings: [
-              {
-                label: "Table",
-                key: "model",
-                control: ModelSelect,
-              },
-              {
-                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",
+          name: "Chart",
+          description: "Shiny chart",
+          icon: "ri-bar-chart-fill",
+          children: [
+            {
+              name: "Donut",
+              _component: "@budibase/standard-components/donut",
+              description: "Donut chart",
+              icon: "ri-pie-chart-fill",
+              properties: {
+                settings: [
+                  {
+                    label: "Table",
+                    key: "model",
+                    control: ModelSelect,
+                  },
+                  {
+                    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: "Name Field",
+                    key: "nameKey",
+                    control: Input,
+                  },
+                  {
+                    label: "Value Field",
+                    key: "valueKey",
+                    control: Input,
+                  },
+                  {
+                    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,
+                  },
                ],
              },
-              {
-                label: "Name Field",
-                key: "nameKey",
-                control: Input,
+            },
+            {
+              name: "Bar",
+              _component: "@budibase/standard-components/bar",
+              description: "Bar chart",
+              icon: "ri-bar-chart-fill",
+              properties: {
+                settings: [
+                  {
+                    label: "Table",
+                    key: "model",
+                    control: ModelSelect,
+                  },
+                  {
+                    label: "Name Label",
+                    key: "nameLabel",
+                    control: Input,
+                  },
+                  {
+                    label: "Value Label",
+                    key: "valueLabel",
+                    control: Input,
+                  },
+                  {
+                    label: "Y Axis Label",
+                    key: "yAxisLabel",
+                    control: Input,
+                  },
+                  {
+                    label: "X Axis Label",
+                    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,
+                  },
+                ],
              },
-              {
-                label: "Value Field",
-                key: "valueKey",
-                control: Input,
+            },
+            {
+              name: "Groupedbar",
+              _component: "@budibase/standard-components/groupedbar",
+              description: "Groupedbar chart",
+              icon: "ri-bar-chart-grouped-fill",
+              properties: {
+                settings: [
+                  {
+                    label: "Table",
+                    key: "model",
+                    control: ModelSelect,
+                  },
+                  {
+                    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: "Group Label",
+                    key: "groupLabel",
+                    control: Input,
+                  },
+                  {
+                    label: "Name Label",
+                    key: "nameLabel",
+                    control: Input,
+                  },
+                  {
+                    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,
+                  },
+                ],
              },
-              {
-                label: "External Radius",
-                key: "externalRadius",
-                control: Input,
+            },
+            {
+              name: "Line",
+              _component: "@budibase/standard-components/line",
+              description: "Line chart",
+              icon: "ri-line-chart-fill",
+              properties: {
+                settings: [
+                  {
+                    label: "Table",
+                    key: "model",
+                    control: ModelSelect,
+                  },
+                  {
+                    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: "Date Label",
+                    key: "dateLabel",
+                    control: Input,
+                  },
+                  {
+                    label: "Topic Label",
+                    key: "topicLabel",
+                    control: Input,
+                  },
+                  {
+                    label: "Value Label",
+                    key: "valueLabel",
+                    control: Input,
+                  },
+                  {
+                    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: "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,
-              },
-              {
-                label: "Legend Height",
-                key: "legendHeight",
-                control: Input,
-              },
-            ],
-          },
-          children: [],
+            },
+          ],
        },
        // {
        //  name: "Data List",
--- a/packages/builder/src/index.html
+++ b/packages/builder/src/index.html
@ -8,7 +8,7 @@
 	<title>Budibase Builder</title>

 	<link href="https://cdn.jsdelivr.net/npm/remixicon@2.3.0/fonts/remixicon.css" rel="stylesheet">
-
+  
 	<link rel='icon' type='image/png' href='/_builder/favicon.png'>
 	<link rel='stylesheet' href='/_builder/global.css'>
 	<link rel='stylesheet' href='/_builder/codemirror.css'>
@ -18,10 +18,18 @@
 	<link rel='stylesheet' href='/_builder/bbui.css'>
 	<link rel='stylesheet' href='/_builder/fonts.css'>
 	<link rel='stylesheet' href="/_builder/uikit.min.css">
+
+    <!-- <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/britecharts/dist/css/britecharts.min.css"
+      type="text/css"
+    /> -->
 </head>

 <body id="app">
+	
 	<script src='/_builder/bundle.js'></script>
+
 </body>

 </html>
--- a/packages/standard-components/components.json
+++ b/packages/standard-components/components.json
@ -502,16 +502,12 @@
 			"betweenBarsPadding": "number",
 			"gradient": "string",
 			"color": "string",
-			"enableLabels": "bool",
 			"hasSingleBarHighlight": "bool",
 			"height": "number",
 			"width": "number",
 			"isAnimated": "bool",
 			"isHorizontal": "bool",
-			"xAxisLabelOffset": "number",
-			"yAxisLabelOffset": "number",
 			"labelNumberFormat": "number",
-			"labelSize": "number",
 			"locale": "string",
 			"nameLabel": "string",
 			"valueLabel": "string",
@ -546,7 +542,9 @@
 			"xAxisScale": "string",
 			"xAxisFormat": "string",
 			"xAxisCustomFormat": "string",
-			"xAxisLabel": "string"
+			"xAxisLabel": "string",
+			"yAxisLabel": "string",
+			"tooltipTitle": "string"
 		}
 	},
 	"brush":{
@ -567,7 +565,7 @@
 		}
 	},
 	"heatmap": {
-		"description": "Groupedbar chart",
+		"description": "Heatmap chart",
 		"data": true,
 		"props": {
 			"model": "string",
@ -587,8 +585,7 @@
 			"color": "string",
 			"height": "string",
 			"width": "string",
-			"margin": "string",
-			"aspectRatio": "number",
+			"margin":"string",
 			"grid":"string",
 			"groupLabel": "string",
 			"isAnimated": "bool",
@ -596,8 +593,8 @@
 			"nameLabel": "string",
 			"valueLabel":"string",
 			"yTicks": "string",
-			"yTickTextOffset": "string",
-			"useLegend": "bool"
+			"useLegend": "bool",
+			"tooltipTitle": "string"
 		}
 	},
 	"bullet": {
--- a/packages/standard-components/dist/generators.js
+++ b/packages/standard-components/dist/generators.js
--- a/packages/standard-components/dist/index.js.map
+++ b/packages/standard-components/dist/index.js.map
--- a/packages/standard-components/package.json
+++ b/packages/standard-components/package.json
@ -20,6 +20,7 @@
    "rollup-plugin-json": "^4.0.0",
    "rollup-plugin-livereload": "^1.0.1",
    "rollup-plugin-node-resolve": "^5.0.0",
+    "rollup-plugin-postcss": "^3.1.5",
    "rollup-plugin-svelte": "^5.0.0",
    "rollup-plugin-terser": "^5.1.1",
    "shortid": "^2.2.15",
@ -34,8 +35,8 @@
  "gitHead": "284cceb9b703c38566c6e6363c022f79a08d5691",
  "dependencies": {
    "@beyonk/svelte-googlemaps": "^2.2.0",
-    "britecharts": "^2.16.0",
-    "d3-selection": "^1.4.1",
+    "britecharts": "^2.16.1",
+    "d3-selection": "^1.4.2",
    "fast-sort": "^2.2.0",
    "fusioncharts": "^3.15.1-sr.1",
    "svelte-fusioncharts": "^1.0.0"
--- a/packages/standard-components/rollup.config.js
+++ b/packages/standard-components/rollup.config.js
@ -1,6 +1,7 @@
 import svelte from "rollup-plugin-svelte"
 import resolve from "rollup-plugin-node-resolve"
 import commonjs from "@rollup/plugin-commonjs"
+import postcss from "rollup-plugin-postcss"

 export default {
  input: "src/index.js",
@ -9,10 +10,13 @@ export default {
      file: "dist/index.js",
      format: "esm",
      name: "budibaseStandardComponents",
-      sourcemap: "inline",
+      sourcemap: true,
    },
  ],
  plugins: [
+    postcss({
+      plugins: [],
+    }),
    svelte({
      hydratable: true,
    }),
--- a/packages/standard-components/src/Chart/Bar.svelte
+++ b/packages/standard-components/src/Chart/Bar.svelte
@ -1,23 +1,20 @@
 <script>
-  import { getColorSchema, getChartGradient } from "./Chart.svelte"
+  import {
+    getColorSchema,
+    getChartGradient,
+    notNull,
+    hasProp,
+  } from "./utils.js"
  import britecharts from "britecharts"
  import { onMount } from "svelte"

  import { select } from "d3-selection"
  import shortid from "shortid"
-  /*
-    ISSUES:
-    - x and y axis label set and appear in the dom but do not display next to the axis
-    - x and y axis label offset - does effect position of labels but does not render text (see above)
-    - x tick label overlaps bar, seems to be no apu method to change this? Could do it by querying for it in the dom
-      specifically and doing this: <tspan x="-10" dy="0.32em">4.0</tspan>
-  */

  let tooltip
  const _id = shortid.generate()
  const chart = britecharts.bar()
  const chartClass = `bar-container-${_id}`
-  const legendClass = `legend-container-${_id}`

  let chartElement = null
  let chartContainer = null
@ -29,13 +26,13 @@
  export let customMouseOut = () => tooltip.hide()
  export let customClick = null

-  export let data = []
+  let data = []
  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 = true
+  export let enableLabels = false
  export let hasPercentage = null
  export let hasSingleBarHighlight = true
  export let highlightBarFunction = null
@ -64,18 +61,25 @@
  let store = _bb.store

  onMount(async () => {
-    if (chartElement) {
-      if (model) {
-        await fetchData()
+    if (model) {
+      await fetchData()
+      data = $store[model]
+      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")
      }
-      chartContainer = select(`.${chartClass}`)
-      bindChartUIProps()
-      bindChartEvents()
-      chartContainer.datum(_data).call(chart)
-      bindChartTooltip()
    }
  })

+  const schemaIsValid = () =>
+    (hasProp(data, "name") || hasProp(data, nameLabel)) &&
+    (hasProp(data, "value") || hasProp(data, valueLabel))
+
  async function fetchData() {
    const FETCH_RECORDS_URL = `/api/views/all_${model}`
    const response = await _bb.api.get(FETCH_RECORDS_URL)
@ -91,85 +95,85 @@
  }

  function bindChartUIProps() {
-    chart.numberFormat(".1f")
+    chart.numberFormat(".0f")
    chart.labelsNumberFormat(".1f")

-    if (color) {
+    if (notNull(color)) {
      chart.colorSchema(colorSchema)
    }
-    if (gradient) {
+    if (notNull(gradient)) {
      chart.chartGradient(chartGradient)
    }
-    if (xAxisLabel) {
+    if (notNull(xAxisLabel)) {
      chart.xAxisLabel(xAxisLabel)
    }
-    if (yAxisLabel) {
+    if (notNull(yAxisLabel)) {
      chart.yAxisLabel(yAxisLabel)
    }
-    if (betweenBarsPadding) {
+    if (notNull(betweenBarsPadding)) {
      chart.betweenBarsPadding(Number(betweenBarsPadding))
    }
-    if (enableLabels) {
+    if (notNull(enableLabels)) {
      chart.enableLabels(enableLabels)
    }
-    if (hasPercentage) {
+    if (notNull(hasPercentage)) {
      chart.hasPercentage(hasPercentage)
    }
-    if (hasSingleBarHighlight) {
+    if (notNull(hasSingleBarHighlight)) {
      chart.hasSingleBarHighlight(hasSingleBarHighlight)
    }
-    if (labelsMargin) {
+    if (notNull(labelsMargin)) {
      chart.labelsMargin(labelsMargin)
    }
-    if (height) {
+    if (notNull(height)) {
      chart.height(height)
    }
-    if (highlightBarFunction) {
+    if (notNull(highlightBarFunction)) {
      chart.highlightBarFunction(highlightBarFunction)
    }
-    if (width) {
+    if (notNull(width)) {
      chart.width(width)
    }
-    if (isAnimated) {
+    if (notNull(isAnimated)) {
      chart.isAnimated(isAnimated)
    }
-    if (isHorizontal) {
+    if (notNull(isHorizontal)) {
      chart.isHorizontal(isHorizontal)
    }
-    if (yAxisLabelOffset) {
+    if (notNull(yAxisLabelOffset)) {
      chart.yAxisLabelOffset(yAxisLabelOffset)
    }
-    if (xAxisLabelOffset) {
+    if (notNull(xAxisLabelOffset)) {
      chart.xAxisLabelOffset(Number(xAxisLabelOffset))
    }
-    if (labelsNumberFormat) {
+    if (notNull(labelsNumberFormat)) {
      chart.labelsNumberFormat(labelsNumberFormat)
    }
-    if (valueLabel) {
+    if (notNull(valueLabel)) {
      chart.valueLabel(valueLabel)
    }
-    if (locale) {
+    if (notNull(locale)) {
      chart.locale(locale)
    }
-    if (nameLabel) {
+    if (notNull(nameLabel)) {
      chart.nameLabel(nameLabel)
    }
-    if (numberFormat) {
+    if (notNull(numberFormat)) {
      chart.numberFormat(numberFormat)
    }
-    if (labelsSize) {
+    if (notNull(labelsSize)) {
      chart.labelsSize(labelsSize)
    }
-    if (xTicks) {
+    if (notNull(xTicks)) {
      chart.xTicks(xTicks)
    }
-    if (yTicks) {
+    if (notNull(yTicks)) {
      chart.yTicks(yTicks)
    }
-    if (percentageAxisToMaxRatio) {
+    if (notNull(percentageAxisToMaxRatio)) {
      chart.percentageAxisToMaxRatio(percentageAxisToMaxRatio)
    }
-    chartContainer.datum(_data).call(chart)
+    chartContainer.datum(data).call(chart)
  }

  function bindChartEvents() {
@ -194,25 +198,8 @@
    tooltipContainer.datum([]).call(tooltip)
  }

-  $: _data = model ? $store[model] : data
-
  $: colorSchema = getColorSchema(color)
  $: chartGradient = getChartGradient(gradient)
 </script>

-<!-- SVG Test 
-  <svg viewBox="6 -8 200 22">
-    <text x="5" y="10" class="text-svg">Hello World</text>
-  </svg>-->
-
 <div bind:this={chartElement} class={chartClass} />
-{#if useLegend}
-  <div class={legendClass} />
-{/if}
-
-<style>
-  .text-svg {
-    font: italic 15px serif;
-    fill: red;
-  }
-</style>
--- a/packages/standard-components/src/Chart/GroupedBar.svelte
+++ b/packages/standard-components/src/Chart/GroupedBar.svelte
@ -1,13 +1,8 @@
 <script>
-  import { getColorSchema, getChartGradient, notNull } from "./utils"
+  import { getColorSchema, getChartGradient, notNull, hasProp } from "./utils"
+  import Tooltip from "./Tooltip.svelte"
  import britecharts from "britecharts"
  import { onMount } from "svelte"
-
-  /* 
-    ISSUES
-    - Renders but seems to be a problem with tooltip hover
-  */
-
  import { select } from "d3-selection"
  import shortid from "shortid"

@ -22,22 +17,18 @@
  const chartClass = `groupedbar-container-${_id}`
  const legendClass = `legend-container-${_id}`

-  let tooltip
+  let tooltip = britecharts.tooltip()
  let tooltipContainer
  let chartElement = null
  let chartContainer = null

-  export let customMouseOver = () => tooltip.show()
-  export let customMouseMove = (dataPoint, topicColorMap, dataPointXPosition) =>
-    tooltip.update(dataPoint, topicColorMap, dataPointXPosition)
-  export let customMouseOut = () => tooltip.hide()
  export let customClick = null

-  export let data = []
+  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 margin = null
  export let aspectRatio = null
  export let grid = null
  export let groupLabel = null
@ -51,18 +42,33 @@
  export let yAxisLabelOffset = null
  export let yTicks = null
  export let yTickTextOffset = null
-  export let useLegend = true
+  export let tooltipTitle = ""
+
+  $: console.log("DATA", data)
+
+  let chartDrawn = false
+
+  const schemaIsValid = () =>
+    (hasProp(data, "name") || hasProp(data, nameLabel)) &&
+    (hasProp(data, "group") || hasProp(data, groupLabel)) &&
+    (hasProp(data, "value") || hasProp(data, valueLabel))

  onMount(async () => {
-    if (chart) {
-      if (model) {
-        await fetchData()
+    if (model) {
+      await fetchData()
+      data = $store[model]
+      if (schemaIsValid()) {
+        chartContainer = select(`.${chartClass}`)
+        bindChartUIProps()
+        bindChartEvents()
+        chartContainer.datum(data).call(chart)
+        bindTooltip()
+        chartDrawn = true
+      } else {
+        console.error(
+          "Grouped bar - Please provide valid name, value and group labels"
+        )
      }
-      chartContainer = select(`.${chartClass}`)
-      bindChartUIProps()
-      //   bindChartEvents()
-      chartContainer.datum(data).call(chart)
-      //   bindChartTooltip()
    }
  })

@ -80,6 +86,13 @@
    }
  }

+  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)
@ -90,6 +103,9 @@
    if (notNull(width)) {
      chart.width(width)
    }
+    if (notNull(margin)) {
+      chart.margin(margin)
+    }
    if (notNull(aspectRatio)) {
      chart.aspectRatio(aspectRatio)
    }
@ -129,35 +145,23 @@
    if (notNull(yTickTextOffset)) {
      chart.yTickTextOffset(yTickTextOffset)
    }
-  }
-
-  function bindChartTooltip() {
-    tooltip = britecharts.miniTooltip()
-    tooltipContainer = select(`.${chartClass} .metadata-group`)
-    tooltipContainer.datum([]).call(tooltip)
+    tooltip.title(tooltipTitle || "Groupedbar Title")
+    debugger
  }

  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)
-    }
+    chart.on("customMouseMove", tooltip.update)
+    chart.on("customMouseOut", tooltip.hide)
+    chart.on("customMouseOver", tooltip.show)
  }

-  $: _data = model ? $store[model] : data
-
  $: colorSchema = getColorSchema(color)
 </script>

 <div bind:this={chartElement} class={chartClass} />
-{#if useLegend}
-  <div class={legendClass} />
-{/if}
+<!-- {#if chartDrawn}
+  <Tooltip bind:tooltip {nameLabel} {valueLabel} {chartClass} />
+{/if} -->
--- a/packages/standard-components/src/Chart/Legend.svelte
+++ b/packages/standard-components/src/Chart/Legend.svelte
@ -70,6 +70,7 @@
      if (notNull(unit)) {
        legend.unit(unit)
      }
+
      legendContainer.datum(data).call(legend)
    }
  }
@ -78,5 +79,8 @@
 </script>

 {#if useLegend}
-  <div bind:this={legendElement} class={legendClass} />
+  <div
+    bind:this={legendElement}
+    style={`width: ${width}px`}
+    class={legendClass} />
 {/if}
--- a/packages/standard-components/src/Chart/Line.svelte
+++ b/packages/standard-components/src/Chart/Line.svelte
@ -1,5 +1,5 @@
 <script>
-  import { getColorSchema, getChartGradient, notNull } from "./utils"
+  import { getColorSchema, getChartGradient, notNull, hasProp } from "./utils"
  import britecharts from "britecharts"
  import { onMount } from "svelte"

@ -15,33 +15,43 @@

  const chart = britecharts.line()
  const chartClass = `line-container-${_id}`
-  const legendClass = `legend-container-${_id}`
+
+  let data = { dataByTopic: [] }

  let chartElement
  let chartContainer
-  let tooltip
  let tooltipContainer

-  export let customMouseHover = null
-  export let customMouseMove = null
-  export let customMouseOut = null
+  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 data = []
  export let color = "britecharts"
  export let axisTimeCombinations = ""
  export let grid = "horizontal"
  export let aspectRatio = 0.5
-  export let dateLabel = "date"
  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"
@ -49,24 +59,39 @@
  export let xAxisFormat = "day-month"
  export let xAxisCustomFormat = "%H"
  export let yAxisLabel = null
-  export let useLegend = true
  export let yAxisLabelPadding = null
  export let lines = null //not handled by setting prop
  export let tooltipThreshold = null
+  export let tooltipTitle = ""
+
+  let chartDrawn = false

  onMount(async () => {
-    if (chart) {
-      if (model) {
-        await fetchData()
+    if (model) {
+      data = await getAndPrepareData()
+      if (data.dataByTopic.length > 0) {
+        chartContainer = select(`.${chartClass}`)
+        bindChartUIProps()
+        bindChartEvents()
+        chartContainer.datum(data).call(chart)
+        chartDrawn = true
+        bindTooltip()
+      } else {
+        console.error(
+          "Line Chart - Please provide valid name, value and topic labels"
+        )
      }
-      chartContainer = select(`.${chartClass}`)
-      bindChartUIProps()
-      bindChartEvents()
-      chartContainer.datum(_data).call(chart)
-      bindChartTooltip()
    }
  })

+  function bindTooltip() {
+    tooltipContainer = select(
+      `.${chartClass} .metadata-group .vertical-marker-container`
+    )
+    tooltip.topicLabel("topics")
+    tooltipContainer.datum([]).call(tooltip)
+  }
+
  async function fetchData() {
    const FETCH_RECORDS_URL = `/api/views/all_${model}`
    const response = await _bb.api.get(FETCH_RECORDS_URL)
@ -81,10 +106,66 @@
    }
  }

+  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"
+    }
+
+    await fetchData()
+    _data = $store[model]
+
+    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.grid("horizontal")
+    chart.isAnimated(true)
+    chart.tooltipThreshold(800)
+    chart.aspectRatio(0.5)
+    chart.xAxisCustomFormat("custom")
+
    if (notNull(color)) {
      chart.colorSchema(colorSchema)
    }
+    if (notNull(lineGradient)) {
+      chart.lineGradient(chartGradient)
+    }
    if (notNull(axisTimeCombinations)) {
      chart.axisTimeCombinations(axisTimeCombinations)
    }
@ -94,9 +175,6 @@
    if (notNull(aspectRatio)) {
      chart.aspectRatio(aspectRatio)
    }
-    if (notNull(dateLabel)) {
-      chart.dateLabel(dateLabel)
-    }
    if (notNull(width)) {
      chart.width(width)
    }
@ -118,12 +196,6 @@
    if (notNull(shouldShowAllDataPoints)) {
      chart.shouldShowAllDataPoints(shouldShowAllDataPoints)
    }
-    if (notNull(topicLabel)) {
-      chart.topicLabel(topicLabel)
-    }
-    if (notNull(valueLabel)) {
-      chart.valueLabel(valueLabel)
-    }
    if (notNull(xAxisLabel)) {
      chart.xAxisLabel(xAxisLabel)
    }
@ -145,17 +217,25 @@
    if (notNull(yAxisLabelPadding)) {
      chart.yAxisLabelPadding(yAxisLabelPadding)
    }
+    if (notNull(tooltipThreshold)) {
+      chart.tooltipThreshold(tooltipThreshold)
+    }
+    if (notNull(lines)) {
+      chart.lines(lines)
+    }
+
+    tooltip.title(tooltipTitle || "Line Tooltip")
  }

  function bindChartEvents() {
-    if (customMouseHover) {
-      chart.on("customMouseHover", customMouseHover)
+    if (customMouseOver) {
+      chart.on("customMouseOver", tooltip.show)
    }
    if (customMouseMove) {
-      chart.on("customMouseMove", customMouseMove)
+      chart.on("customMouseMove", tooltip.update)
    }
    if (customMouseOut) {
-      chart.on("customMouseOut", customMouseOut)
+      chart.on("customMouseOut", tooltip.hide)
    }
    if (customDataEntryClick) {
      chart.on("customDataEntryClick", customDataEntryClick)
@ -165,45 +245,8 @@
    }
  }

-  function bindChartTooltip() {
-    tooltip = britecharts.miniTooltip()
-
-    tooltipContainer = select(`.${chartClass} .metadata-group`)
-    tooltipContainer.datum([]).call(tooltip)
-  }
-
-  $: _data = model ? $store[model] : data
-
  $: colorSchema = getColorSchema(color)
+  $: chartGradient = getChartGradient(lineGradient)
 </script>

 <div bind:this={chartElement} class={chartClass} />
-{#if useLegend}
-  <div class={legendClass} />
-{/if}
-
-<!-- 
-
-isAnimated={true}
-aspectRatio={0.5}
-grid='horizontal'
-tooltipThreshold={600}
-width={600}
-dateLabel='fullDate'
-
- {type}
-  {data}
-  {colorSchema}
-  {axisTimeCombinations}
-  {lineCurve}
-  {numberFormat}
-  {height}
-  {topicLabel}
-  {shouldShowAllDataPoints}
-  {xAxisLabel}
-  {valueLabel}
-  {xAxisValueType}
-  {xAxisScale}
-  {xAxisCustomFormat}
-
- -->
--- a/packages/standard-components/src/Chart/Tooltip.svelte
+++ b/packages/standard-components/src/Chart/Tooltip.svelte
@ -0,0 +1,81 @@
+<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>
--- a/packages/standard-components/src/Chart/index.js
+++ b/packages/standard-components/src/Chart/index.js
@ -1,3 +1,4 @@
+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"
--- a/packages/standard-components/src/Chart/tests/bar.html
+++ b/packages/standard-components/src/Chart/tests/bar.html
@ -6,8 +6,8 @@
    <title>Document</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/bar.min.js"
-        type="text/javascript"></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" />

--- a/packages/standard-components/src/Chart/tests/line.html
+++ b/packages/standard-components/src/Chart/tests/line.html
@ -0,0 +1,235 @@
+<!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,
+modelId: "2334751ac0764c1a931bff5b6b6767eb",
+type: "record",
+_id: "ceb87054790f480e80512368545755bb",
+_rev: "2-56e401ebaf59e6310b85fb0c6c2fece5",
+},
+{
+amount: 12,
+audited: new Date("2020-01-03T16:00:00-08:00"),
+city: "Belfast",
+name: 1,
+modelId: "2334751ac0764c1a931bff5b6b6767eb",
+type: "record",
+_id: "0a36103b55124f348a23d10b2f3ed0e3",
+_rev: "2-50d62530b2edfc63d5fd0b3719dbb286",
+},
+{
+amount: 6,
+audited: new Date("2020-01-04T16:00:00-08:00"),
+city: "Belfast",
+name: 1,
+modelId: "2334751ac0764c1a931bff5b6b6767eb",
+type: "record",
+_id: "68ade2bb94754caa8fc62c7084e3cef7",
+_rev: "2-a03fe02f3595920adfbcd9c70564fe9d",
+},
+{
+amount: 2,
+audited: new Date("2020-01-01T16:00:00-08:00"),
+city: "Dublin",
+name: 2,
+modelId: "2334751ac0764c1a931bff5b6b6767eb",
+type: "record",
+_id: "2ab6dabf833f4d99b3438fa4353ba429",
+_rev: "2-45b190489e76842981902cc9f04369ec",
+},
+{
+amount: 16,
+audited: new Date("2020-01-02T16:00:00-08:00"),
+city: "Dublin",
+name: 2,
+modelId: "2334751ac0764c1a931bff5b6b6767eb",
+type: "record",
+_id: "1b2ca36db1724427a98ba95547f946e0",
+_rev: "2-c43def17ada959948b9af5484ad5b6b7",
+},
+{
+amount: 7,
+audited: new Date("2020-01-03T16:00:00-08:00"),
+city: "Dublin",
+name: 2,
+modelId: "2334751ac0764c1a931bff5b6b6767eb",
+type: "record",
+_id: "d9235d884a224ca68ac30cefdbb8ae53",
+_rev: "2-695e426a261a25474cbf6b1f069dccb4",
+},
+{
+amount: 3,
+audited: new Date("2020-01-04T16:00:00-08:00"),
+city: "Dublin",
+name: 2,
+modelId: "2334751ac0764c1a931bff5b6b6767eb",
+type: "record",
+_id: "9f8bc39a9cfb4f779da8c998d7622927",
+_rev: "2-8ae1aff82e1ffc6ffa75f6b9d074e003",
+},
+{
+amount: 4,
+audited: new Date("2020-01-02T16:00:00-08:00"),
+city: "London",
+name: 3,
+modelId: "2334751ac0764c1a931bff5b6b6767eb",
+type: "record",
+_id: "75274e906073493bbf75cda8656e8db0",
+_rev: "2-6cfc6bb2fccb83c92b50aa5507f2a092"
+},
+{
+amount: 22,
+audited: new Date("2020-01-06T16:00:00-08:00"),
+city: "London",
+name: 3,
+modelId: "2334751ac0764c1a931bff5b6b6767eb",
+type: "record",
+_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>
--- a/packages/standard-components/src/Chart/utils.js
+++ b/packages/standard-components/src/Chart/utils.js
@ -2,6 +2,8 @@ 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
@ -17,3 +19,23 @@ export const getColorSchema = color =>

 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 clonedRecord = { ...d }
+      if (clonedRecord[formatKey]) {
+        delete clonedRecord[formatKey]
+      }
+      let value = clonedRecord[dataKey]
+      if (!ignoreList.includes(dataKey)) {
+        delete clonedRecord[dataKey]
+      }
+      clonedRecord[formatKey] = value
+      return clonedRecord
+    })
+  } else {
+    return data
+  }
+}