WIP: Bar, Brush, Bullet, Donut and Line

packages/builder/src/components/userInterface/temporaryPanelStructure.js

@@ -393,7 +393,7 @@ export default {
               },
               properties: {
                 design: {
-                  ...all
+                  ...all,
                 },
                 settings: [
                   {
@@ -414,6 +414,12 @@ export default {
                     valueKey: "checked",
                     control: Checkbox,
                   },
+                  {
+                    label: "Has Hover",
+                    key: "hasHoverAnimation",
+                    valueKey: "checked",
+                    control: Checkbox,
+                  },
                   {
                     label: "Colors",
                     key: "color",
@@ -459,6 +465,7 @@ export default {
                   {
                     label: "Show Legend",
                     key: "useLegend ",
+                    valueKey: "checked",
                     control: Checkbox,
                   },
                 ],
@@ -561,8 +568,13 @@ export default {
                     valueKey: "checked",
                   },
                   {
-                    label: "Label Offset",
+                    label: "X Axis Label Offset",
-                    key: "labelOffset",
+                    key: "xAxisLabelOffset",
+                    control: Input,
+                  },
+                  {
+                    label: "Y Axis Label Offset",
+                    key: "yAxisLabelOffset",
                     control: Input,
                   },
                   {
@@ -598,6 +610,172 @@ export default {
                 ],
               },
             },
+            {
+              name: "Brush",
+              _component: "@budibase/standard-components/brush",
+              description: "Brush chart",
+              icon: "ri-bar-chart-fill",
+              presetProps: {
+                data: [
+                  {
+                    value: 1,
+                    date: "2011-01-06T00:00:00Z",
+                  },
+                  {
+                    value: 2,
+                    date: "2011-01-07T00:00:00Z",
+                  },
+                ],
+              },
+              properties: {
+                settings: [
+                  {
+                    label: "Gradient",
+                    key: "gradient",
+                    control: OptionSelect,
+                    options: [
+                      { value: "", label: "None" },
+                      { value: "bluePurple", label: "Blue Purple" },
+                      { value: "greenBlue", label: "Green Blue" },
+                      { value: "orangePink", label: "Orange Pink" },
+                    ],
+                  },
+                  {
+                    label: "Height",
+                    key: "height",
+                    control: Input,
+                  },
+                  {
+                    label: "Width",
+                    key: "width",
+                    control: Input,
+                  },
+                  {
+                    label: "Date Range",
+                    key: "dateRange",
+                    control: Input,
+                  },
+                  {
+                    label: "Locale",
+                    key: "locale",
+                    control: Input,
+                  },
+                  {
+                    label: "Time Interval",
+                    key: "roundingTimeInterval",
+                    control: OptionSelect,
+                    options: [
+                      "timeDay",
+                      "timeMillisecond",
+                      "utcMillisecond",
+                      "timeSecond",
+                      "utcSecond",
+                      "timeMinute",
+                      "utcMinute",
+                      "timeHour",
+                      "utcHour",
+                      "utcDay",
+                      "timeWeek",
+                      "utcWeek",
+                      "timeSunday",
+                      "utcSunday",
+                      "timeMonday",
+                      "utcMonday",
+                      "timeTuesday",
+                      "utcTuesday",
+                      "timeWednesday",
+                      "utcWednesday",
+                      "timeThursday",
+                      "utcThursday",
+                      "timeFriday",
+                      "utcFriday",
+                      "timeSaturday",
+                      "utcSaturday",
+                      "timeMonth",
+                      "utcMonth",
+                      "timeYear",
+                      "utcYear",
+                    ],
+                  },
+                  {
+                    label: "X Axis Format",
+                    key: "xAxisFormat",
+                    control: OptionSelect,
+                    options: [
+                      "day-month",
+                      "minute-hour",
+                      "hour-daymonth",
+                      "month-year",
+                      "custom",
+                    ],
+                  },
+                  {
+                    label: "X Ticks",
+                    key: "xTicks",
+                    control: Input,
+                  },
+                ],
+              },
+            },
+            {
+              name: "Bullet",
+              _component: "@budibase/standard-components/bullet",
+              description: "Bullet chart",
+              icon: "ri-bar-chart-fill",
+              presetProps: {
+                data: {
+                  ranges: [130, 160, 250],
+                  measures: [150, 180],
+                  markers: [175],
+                },
+              },
+              properties: {
+                settings: [
+                  {
+                    label: "Color",
+                    key: "color",
+                    control: OptionSelect,
+                    options: [
+                      "britecharts",
+                      "blueGreen",
+                      "green",
+                      "grey",
+                      "orange",
+                      "pink",
+                      "purple",
+                      "red",
+                      "teal",
+                      "yellow",
+                    ],
+                  },
+                  {
+                    label: "Title",
+                    key: "title",
+                    control: Input,
+                  },
+                  {
+                    label: "Subtitle",
+                    key: "subtitle",
+                    control: Input,
+                  },
+                  {
+                    label: "Axis Padding",
+                    key: "paddingBetweenAxisAndChart",
+                    control: Input,
+                  },
+                  {
+                    label: "Height",
+                    key: "height",
+                    control: Input,
+                  },
+                  {
+                    label: "Width",
+                    key: "width",
+                    control: Input,
+                  },
+                ],
+              },
+            },
             {
               name: "Line",
               _component: "@budibase/standard-components/line",
@@ -684,6 +862,12 @@ export default {
                       "yellow",
                     ],
                   },
+                  {
+                    label: "X Axis Value Type",
+                    key: "xAxisValueType",
+                    control: OptionSelect,
+                    options: ["date", "number"],
+                  },
                   {
                     label: "Grid",
                     key: "grid",
@@ -782,6 +966,11 @@ export default {
                     key: "xAxisCustomFormat",
                     control: Input,
                   },
+                  {
+                    label: "X Axis Label",
+                    key: "xAxisLabel",
+                    control: Input,
+                  },
                 ],
               },
             },

packages/standard-components/components.json

@@ -261,11 +261,14 @@
 			"width": "number",
 			"hasFixedHighlightedSlice": "bool",
 			"hasLastHoverSliceHighlighted": "bool",
+			"hasHoverAnimation": "bool",
+			"numberFormat": "string",
 			"isAnimated": "bool",
 			"externalRadius": "number",
 			"internalRadius": "number",
 			"radiusHoverOffset": "number",
-			"useLegend": "bool"
+			"useLegend": "bool",
+			"percentageFormat": "string"
 		}
 	},
 	"bar": {
@@ -281,7 +284,8 @@
 			"width": "number",
 			"isAnimated": "bool",
 			"isHorizontal": "bool",
-			"labelOffset": "number",
+			"xAxisLabelOffset": "number",
+			"yAxisLabelOffset": "number",
 			"labelNumberFormat": "number",
 			"labelSize": "number",
 			"locale": "string",
@@ -289,7 +293,9 @@
 			"numberLabel": "string",
 			"xAxisLabel": "string",
 			"yAxisLabel": "string",
-			"useLegend": "bool"
+			"useLegend": "bool",
+			"xTicks": "number",
+			"yTicks": "number"
 		}
 	},
 	"line": {
@@ -310,13 +316,42 @@
 			"shouldShowAllDataPoints": "bool",
 			"topicLabel": "string",
 			"valueLabel": "string",
-			"xAxisLabel": "string",
 			"xAxisValueType": "string",
 			"xAxisScale": "string",
 			"xAxisFormat": "string",
+			"xAxisCustomFormat": "string",
+			"xAxisLabel": "string"
+		}
+	},
+	"brush":{
+		"description": "brush chart",
+		"data": true,
+		"props": {
+			"gradient": "string",
+			"height": "number",
+			"width": "number",
+			"margin": "string",
+			"dateRange": "string",
+			"locale": "string",
+			"roundingTimeInterval": "string",
+			"xAxisFormat": "string",
+			"xTicks": "number",
 			"xAxisCustomFormat": "string"
 		}
 	},
+	"bullet": {
+		"description": "Bullet chart",
+		"data": true,
+		"props": {
+			"color": "string",
+			"customSubtitle": "string",
+			"customTitle": "string",
+			"numberFormat": "string",
+			"paddingBetweenAxisAndChart": "number",
+			"height": "number",
+			"width": "number"
+		}
+	},
 	"datachart": {
 		"description": "shiny chart",
 		"data": true,

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

@@ -34,28 +34,35 @@
   export let gradient = null
   export let color = "britecharts"
   export let enableLabels = true
+  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 labelOffset = null
+  export let xAxisLabelOffset = null
+  export let yAxisLabelOffset = null
   export let labelsNumberFormat = null
-  export let labelSize = 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
 
   export let useLegend = true
 
   onMount(() => {
-    //call charts props in here
     if (chartElement) {
       chartContainer = select(`.${chartClass}`)
       bindChartUIProps()
       bindChartEvents()
-      bindChartTooltip()
       chartContainer.datum(data).call(chart)
+      bindChartTooltip()
     }
   })
 
@@ -73,17 +80,26 @@
       chart.yAxisLabel(yAxisLabel)
     }
     if (betweenBarsPadding) {
-      chart.betweenBarsPadding(betweenBarsPadding)
+      chart.betweenBarsPadding(Number(betweenBarsPadding))
     }
     if (enableLabels) {
       chart.enableLabels(enableLabels)
     }
+    if (hasPercentage) {
+      chart.hasPercentage(hasPercentage)
+    }
     if (hasSingleBarHighlight) {
       chart.hasSingleBarHighlight(hasSingleBarHighlight)
     }
+    if (labelsMargin) {
+      chart.labelsMargin(labelsMargin)
+    }
     if (height) {
       chart.height(height)
     }
+    if (highlightBarFunction) {
+      chart.highlightBarFunction(highlightBarFunction)
+    }
     if (width) {
       chart.width(width)
     }
@@ -93,14 +109,17 @@
     if (isHorizontal) {
       chart.isHorizontal(isHorizontal)
     }
-    if (labelOffset) {
+    if (yAxisLabelOffset) {
-      chart.labelOffset(labelOffset)
+      chart.yAxisLabelOffset(Number(yAxisLabelOffset))
+    }
+    if (xAxisLabelOffset) {
+      chart.xAxisLabelOffset(Number(xAxisLabelOffset))
     }
     if (labelsNumberFormat) {
       chart.labelsNumberFormat(labelsNumberFormat)
     }
-    if (labelSize) {
+    if (valueLabel) {
-      chart.labelSize(labelSize)
+      chart.valueLabel(valueLabel)
     }
     if (locale) {
       chart.locale(locale)
@@ -111,6 +130,18 @@
     if (numberFormat) {
       chart.numberFormat(numberFormat)
     }
+    if (labelsSize) {
+      chart.labelsSize(labelsSize)
+    }
+    if (xTicks) {
+      chart.xTicks(xTicks)
+    }
+    if (yTicks) {
+      chart.yTicks(yTicks)
+    }
+    if (percentageAxisToMaxRatio) {
+      chart.percentageAxisToMaxRatio(percentageAxisToMaxRatio)
+    }
   }
 
   function bindChartEvents() {
@@ -130,7 +161,6 @@
 
   function bindChartTooltip() {
     tooltip = britecharts.miniTooltip()
-    debugger
     tooltipContainer = select(`.${chartClass} .metadata-group`)
     tooltipContainer.datum([]).call(tooltip)
   }

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

@@ -0,0 +1,94 @@
+<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
+  */
+
+  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(() => {
+    if (chart) {
+      chartContainer = select(`.${chartClass}`)
+      bindChartUIProps()
+      bindChartEvents()
+      chartContainer.datum(data).call(chart)
+    }
+  })
+
+  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)
+    }
+  }
+
+  $: chartGradient = getChartGradient(gradient)
+  $: console.log(chartGradient)
+</script>
+
+<div bind:this={chartElement} class={chartClass} />

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

@@ -0,0 +1,79 @@
+<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.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(() => {
+    if (chart) {
+      chartContainer = select(`.${chartClass}`)
+      bindChartUIProps()
+      chartContainer.datum(data).call(chart)
+    }
+  })
+
+  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)
+    }
+  }
+
+  $: colorSchema = getColorSchema(color)
+</script>
+
+<div bind:this={chartElement} class={chartClass} />

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

@@ -1,36 +1,129 @@
 <script>
-  import Chart, { getColorSchema } from "./Chart.svelte"
+  import { getColorSchema, notNull } from "./utils.js"
+  import britecharts from "britecharts"
+  import { onMount } from "svelte"
 
-  let type = "donut"
+  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 chartElement = null
+  let chartContainer = null
+
+  export let customMouseOver = null
+  export let customMouseMove = null
+  export let customMouseOut = null
+  export let customClick = null
+
+  export let orderingFunction = 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 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 useLegend = true
 
+  onMount(() => {
+    if (chart) {
+      chart.emptyDataConfig({
+        showEmptySlice: true,
+        emptySliceColor: "#000000",
+      })
+      chartContainer = select(`.${chartClass}`)
+      bindChartUIProps()
+      bindChartEvents()
+      chartContainer.datum(data).call(chart)
+    }
+  })
+
+  function bindChartUIProps() {
+    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)
+    }
+  }
+
+  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)
+    }
+  }
+
   $: colorSchema = getColorSchema(color)
 </script>
 
-<Chart
+<div bind:this={chartElement} class={chartClass} />
-  {type}
+{#if useLegend}
-  {useLegend}
+  <div class={legendClass} />
-  {data}
+{/if}
-  {colorSchema}
-  {height}
-  {width}
-  {margin}
-  {externalRadius}
-  {hasFixedHighlightedSlice}
-  {hasLastHoverSliceHighlighted}
-  {internalRadius}
-  {isAnimated}
-  {radiusHoverOffset} />

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

@@ -1,17 +1,31 @@
 <script>
-  import Chart, { getColorSchema, getChartGradient } from "./Chart.svelte"
+  import { getColorSchema, getChartGradient, notNull } from "./utils"
+  import britecharts from "britecharts"
+  import { onMount } from "svelte"
 
-  /*
+  import { select } from "d3-selection"
-    ISSUES:
+  import shortid from "shortid"
-    
-  */
 
-  let type = "line"
+  const _id = shortid.generate()
+
+  const chart = britecharts.line()
+  const chartClass = `line-container-${_id}`
+  const legendClass = `legend-container-${_id}`
+
+  let chartElement
+  let chartContainer
   let tooltip
+  let tooltipContainer
+
+  export let customMouseHover = null
+  export let customMouseMove = null
+  export let customMouseOut = null
+  export let customDataEntryClick = null
+  export let customTouchMove = null
 
   export let data = []
-  export let axisTimeCombinations = ""
   export let color = "britecharts"
+  export let axisTimeCombinations = ""
   export let grid = "horizontal"
   export let aspectRatio = 0.5
   export let dateLabel = "date"
@@ -29,31 +43,118 @@
   export let xAxisScale = "linear"
   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
+
+  onMount(() => {
+    chartContainer = select(`.${chartClass}`)
+    bindChartUIProps()
+    bindChartEvents()
+    chartContainer.datum(data).call(chart)
+    bindChartTooltip()
+  })
+
+  function bindChartUIProps() {
+    if (notNull(color)) {
+      chart.colorSchema(colorSchema)
+    }
+    if (notNull(axisTimeCombinations)) {
+      chart.axisTimeCombinations(axisTimeCombinations)
+    }
+    if (notNull(grid)) {
+      chart.grid(grid)
+    }
+    if (notNull(aspectRatio)) {
+      chart.aspectRatio(aspectRatio)
+    }
+    if (notNull(dateLabel)) {
+      chart.dateLabel(dateLabel)
+    }
+    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(topicLabel)) {
+      chart.topicLabel(topicLabel)
+    }
+    if (notNull(valueLabel)) {
+      chart.valueLabel(valueLabel)
+    }
+    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)
+    }
+  }
+
+  function bindChartEvents() {
+    if (customMouseHover) {
+      chart.on("customMouseHover", customMouseHover)
+    }
+    if (customMouseMove) {
+      chart.on("customMouseMove", customMouseMove)
+    }
+    if (customMouseOut) {
+      chart.on("customMouseOut", customMouseOut)
+    }
+    if (customDataEntryClick) {
+      chart.on("customDataEntryClick", customDataEntryClick)
+    }
+    if (customTouchMove) {
+      chart.on("customTouchMove", customTouchMove)
+    }
+  }
+
+  function bindChartTooltip() {
+    tooltip = britecharts.miniTooltip()
+
+    tooltipContainer = select(`.${chartClass} .metadata-group`)
+    tooltipContainer.datum([]).call(tooltip)
+  }
 
   $: colorSchema = getColorSchema(color)
-  $: console.log($$props)
 </script>
 
-<Chart
+<div bind:this={chartElement} class={chartClass} />
-  {type}
+{#if useLegend}
-  {data}
+  <div class={legendClass} />
-  {colorSchema}
+{/if}
-  {axisTimeCombinations}
-  {lineCurve}
-  {numberFormat}
-  {height}
-  {topicLabel}
-  {shouldShowAllDataPoints}
-  {xAxisLabel}
-  {valueLabel}
-  {xAxisValueType}
-  {xAxisScale}
-  {xAxisCustomFormat}
-  {aspectRatio}
-  {grid}
-  tooltipThreshold={600}
-  {width}
-  {dateLabel} />
 
 <!-- 
 

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

@@ -0,0 +1,39 @@
+<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()
+    }
+  })
+</script>
+
+<div bind:this={chartElement} class={chartClass} />
+{#if useLegend}
+  <div class={legendClass} />
+{/if}

packages/standard-components/src/Chart/index.js

@@ -1,3 +1,6 @@
 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"
+

packages/standard-components/src/Chart/utils.js

@@ -0,0 +1,19 @@
+import britecharts from "britecharts"
+
+export const notNull = value => value || value === false
+
+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