Completion Bug Fixes and Updates

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

@@ -667,11 +667,6 @@ export default {
                     key: "labelsNumberFormat",
                     control: Input,
                   },
-                  {
-                    label: "Label Size",
-                    key: "labelSize",
-                    control: Input,
-                  },
                 ],
               },
             },
@@ -762,6 +757,11 @@ export default {
                     valueKey: "checked",
                     control: Checkbox,
                   },
+                  {
+                    label: "Tooltip Title",
+                    key: "tooltipTitle",
+                    control: Input,
+                  },
                 ],
               },
             },

packages/standard-components/components.json

@@ -424,16 +424,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",
@@ -469,6 +465,7 @@
 			"xAxisFormat": "string",
 			"xAxisCustomFormat": "string",
 			"xAxisLabel": "string",
+			"yAxisLabel": "string",
 			"tooltipTitle": "string"
 		}
 	},
@@ -490,7 +487,7 @@
 		}
 	},
 	"heatmap": {
-		"description": "Groupedbar chart",
+		"description": "Heatmap chart",
 		"data": true,
 		"props": {
 			"model": "string",
@@ -518,7 +515,8 @@
 			"nameLabel": "string",
 			"valueLabel":"string",
 			"yTicks": "string",
-			"useLegend": "bool"
+			"useLegend": "bool",
+			"tooltipTitle": "string"
 		}
 	},
 	"bullet": {

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

@@ -1,22 +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 tick label overlaps bar, seems to be no apu method to change this? Could do it by querying for it in the dom
-      for this element: <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
@@ -28,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
@@ -63,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)
@@ -90,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() {
@@ -193,13 +198,8 @@
     tooltipContainer.datum([]).call(tooltip)
   }
 
-  $: _data = model ? $store[model] : data
-
   $: colorSchema = getColorSchema(color)
   $: chartGradient = getChartGradient(gradient)
 </script>
 
 <div bind:this={chartElement} class={chartClass} />
-{#if useLegend}
-  <div class={legendClass} />
-{/if}

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

@@ -1,14 +1,10 @@
 <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"
   import { select } from "d3-selection"
   import shortid from "shortid"
-  /* 
-    ISSUES
-    - Renders but seems to be a problem with tooltip hover
-  */
 
   const _id = shortid.generate()
 
@@ -21,15 +17,11 @@
   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
 
   let data = []
@@ -50,22 +42,33 @@
   export let yAxisLabelOffset = null
   export let yTicks = null
   export let yTickTextOffset = null
+  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()
-        data = $store[model]
+    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)
-      chartDrawn = true
     }
   })
 
@@ -83,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)
@@ -135,29 +145,23 @@
     if (notNull(yTickTextOffset)) {
       chart.yTickTextOffset(yTickTextOffset)
     }
+    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 chartDrawn}
+<!-- {#if chartDrawn}
   <Tooltip bind:tooltip {nameLabel} {valueLabel} {chartClass} />
-{/if}
+{/if} -->

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

@@ -1,13 +1,10 @@
 <script>
-  import { getColorSchema, getChartGradient, notNull } from "./utils"
-  import sort from "fast-sort"
-  import Tooltip from "./Tooltip.svelte"
+  import { getColorSchema, getChartGradient, notNull, hasProp } from "./utils"
   import britecharts from "britecharts"
   import { onMount } from "svelte"
 
   import { select } from "d3-selection"
   import shortid from "shortid"
-  import { log } from "console"
 
   const _id = shortid.generate()
 
@@ -18,22 +15,23 @@
 
   const chart = britecharts.line()
   const chartClass = `line-container-${_id}`
-  const legendClass = `legend-container-${_id}`
 
-  let data = { data: [] }
+  let data = { dataByTopic: [] }
 
   let chartElement
   let chartContainer
-  let tooltip
   let tooltipContainer
 
+  let tooltip = britecharts.tooltip()
+
   export let customMouseOver = () => tooltip.show()
   export let customMouseMove = (
     dataPoint,
     topicColorMap,
-    dataPointXPosition
+    dataPointXPosition,
+    yPosition
   ) => {
-    tooltip.update(dataPoint, topicColorMap, dataPointXPosition)
+    tooltip.update(dataPoint, topicColorMap, dataPointXPosition, yPosition)
   }
   export let customMouseOut = () => tooltip.hide()
 
@@ -69,16 +67,31 @@
   let chartDrawn = false
 
   onMount(async () => {
-    if (chart) {
+    if (model) {
       data = await getAndPrepareData()
-      chartContainer = select(`.${chartClass}`)
-      bindChartUIProps()
-      bindChartEvents()
-      chartContainer.datum(data).call(chart)
-      chartDrawn = true
+      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"
+        )
+      }
     }
   })
 
+  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)
@@ -93,12 +106,17 @@
     }
   }
 
+  const schemaIsValid = data =>
+    hasProp(data, valueLabel) &&
+    hasProp(data, dateLabel) &&
+    hasProp(data, topicLabel)
+
   async function getAndPrepareData() {
     let dataByTopic = []
     let _data = []
 
     if (!topicLabel) {
-      topicLabel = "topic"
+      topicLabel = "topicName"
     }
 
     if (!valueLabel) {
@@ -109,35 +127,38 @@
       dateLabel = "date"
     }
 
-    if (model) {
-      await fetchData()
-      _data = $store[model]
-    }
-
-    _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] })),
+    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)
         }
-        d.dates = d.dates.sort((a, b) => a.date - b.date)
-        dataByTopic.push(d)
-      }
-    })
+      })
+    }
 
     return { dataByTopic }
   }
 
-  $: console.table("DATA", data)
-
   function bindChartUIProps() {
     chart.grid("horizontal")
     chart.isAnimated(true)
-    // chart.tooltipThreshold(800)
+    chart.tooltipThreshold(800)
+    chart.aspectRatio(0.5)
+    chart.xAxisCustomFormat("custom")
 
     if (notNull(color)) {
       chart.colorSchema(colorSchema)
@@ -202,17 +223,19 @@
     if (notNull(lines)) {
       chart.lines(lines)
     }
+
+    tooltip.title(tooltipTitle || "Line Tooltip")
   }
 
   function bindChartEvents() {
     if (customMouseOver) {
-      chart.on("customMouseOver", 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)
@@ -227,10 +250,3 @@
 </script>
 
 <div bind:this={chartElement} class={chartClass} />
-{#if chartDrawn}
-  <Tooltip
-    bind:tooltip
-    title={tooltipTitle || 'Line Tooltip'}
-    topicLabel="topics"
-    {chartClass} />
-{/if}

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

@@ -26,7 +26,9 @@
   export let xAxisValueType = null
 
   onMount(() => {
-    tooltipContainer = select(`.${chartClass} .metadata-group`)
+    tooltipContainer = select(
+      `.${chartClass} .metadata-group .vertical-marker-container`
+    )
     tooltipContainer.datum([]).call(tooltip)
   })
 

packages/standard-components/src/Chart/tests/line.html

@@ -10,6 +10,8 @@
         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" />
@@ -133,8 +135,10 @@ function prepareData() {
   return {dataByTopic}
 }
 
+
+    
+
 const newData = prepareData()
-debugger
 
 const dataByTopic = {
   dataByTopic: [
@@ -207,11 +211,24 @@ const data = {
     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>

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