From e4b4c5723fc9433bd1f117cd0e445dffb741fe64 Mon Sep 17 00:00:00 2001
From: cmack <conoramck@gmail.com>
Date: Wed, 12 Aug 2020 10:02:36 +0100
Subject: [PATCH] WIP: Chart Tests and Line Refactor

---
 .../userInterface/temporaryPanelStructure.js  |  87 +-----
 .../standard-components/src/Chart/Bar.svelte  |   1 -
 .../src/Chart/GroupedBar.svelte               |   8 +-
 .../standard-components/src/Chart/Line.svelte | 256 ++++++++++--------
 .../src/Chart/Tooltip.svelte                  |   7 -
 .../src/Chart/tests/bar.html                  |   4 +-
 .../src/Chart/tests/line.html                 |  71 +++++
 7 files changed, 227 insertions(+), 207 deletions(-)
 create mode 100644 packages/standard-components/src/Chart/tests/line.html

diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index b76c24725b..5605cad135 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -1580,58 +1580,6 @@ export default {
               _component: "@budibase/standard-components/line",
               description: "Line chart",
               icon: "ri-bar-chart-fill",
-              presetProps: {
-                data: {
-                  data: [
-                    {
-                      topicName: "San Francisco",
-                      name: 1,
-                      date: "2020-01-16",
-                      value: 1,
-                    },
-                    {
-                      topicName: "San Fran",
-                      name: 2,
-                      date: "2020-01-17",
-                      value: 2,
-                    },
-                    {
-                      topicName: "LA",
-                      name: 3,
-                      date: "2020-01-18",
-                      value: 3,
-                    },
-                    {
-                      topicName: "Toronto",
-                      name: 4,
-                      date: "2020-01-19",
-                      value: 7,
-                    },
-                    {
-                      topicName: "Van",
-                      name: 4,
-                      date: "2020-01-20",
-                      value: 12,
-                    },
-                    {
-                      topicName: "Dundee",
-                      name: 4,
-                      date: "2020-01-21",
-                      value: 16,
-                    },
-                    {
-                      topicName: "Dublin",
-                      name: 4,
-                      date: "2020-01-22",
-                      value: 31,
-                    },
-                  ],
-                },
-                aspectRatio: 0.5,
-                grid: "horizontal",
-                dateLabel: "fullDate",
-                shouldShowAllDataPoints: true,
-              },
               properties: {
                 settings: [
                   {
@@ -1639,16 +1587,6 @@ export default {
                     key: "model",
                     control: ModelSelect,
                   },
-                  {
-                    label: "X Axis Combo",
-                    key: "axisTimeCombinations",
-                    control: Input,
-                  },
-                  {
-                    label: "X Axis Combo",
-                    key: "axisTimeCombinations",
-                    control: Input,
-                  },
                   {
                     label: "Colors",
                     key: "color",
@@ -1688,6 +1626,16 @@ export default {
                     key: "dateLabel",
                     control: Input,
                   },
+                  {
+                    label: "Topic Label",
+                    key: "topicLabel",
+                    control: Input,
+                  },
+                  {
+                    label: "Value Label",
+                    key: "valueLabel",
+                    control: Input,
+                  },
                   {
                     label: "Width",
                     key: "width",
@@ -1721,21 +1669,6 @@ export default {
                       "catmullRom",
                     ],
                   },
-                  {
-                    label: "Locale",
-                    key: "locale",
-                    control: Input,
-                  },
-                  {
-                    label: "Topic Label",
-                    key: "topicLabel",
-                    control: Input,
-                  },
-                  {
-                    label: "Value Label",
-                    key: "valueLabel",
-                    control: Input,
-                  },
                   {
                     label: "X Axis Label",
                     key: "xAxisLabel",
diff --git a/packages/standard-components/src/Chart/Bar.svelte b/packages/standard-components/src/Chart/Bar.svelte
index 42a1b22828..2a4018e33a 100644
--- a/packages/standard-components/src/Chart/Bar.svelte
+++ b/packages/standard-components/src/Chart/Bar.svelte
@@ -8,7 +8,6 @@
   /*
     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
       for this element: <tspan x="-10" dy="0.32em">4.0</tspan>
   */
diff --git a/packages/standard-components/src/Chart/GroupedBar.svelte b/packages/standard-components/src/Chart/GroupedBar.svelte
index 05582de94d..9d0d4fe24c 100644
--- a/packages/standard-components/src/Chart/GroupedBar.svelte
+++ b/packages/standard-components/src/Chart/GroupedBar.svelte
@@ -159,11 +159,5 @@
 
 <div bind:this={chartElement} class={chartClass} />
 {#if chartDrawn}
-  <Tooltip
-    bind:tooltip
-    {chartDrawn}
-    {nameLabel}
-    {valueLabel}
-    {chartClass}
-    {data} />
+  <Tooltip bind:tooltip {nameLabel} {valueLabel} {chartClass} />
 {/if}
diff --git a/packages/standard-components/src/Chart/Line.svelte b/packages/standard-components/src/Chart/Line.svelte
index afb37322f3..ac67b83368 100644
--- a/packages/standard-components/src/Chart/Line.svelte
+++ b/packages/standard-components/src/Chart/Line.svelte
@@ -1,5 +1,6 @@
 <script>
   import { getColorSchema, getChartGradient, notNull } from "./utils"
+  import Tooltip from "./Tooltip.svelte"
   import britecharts from "britecharts"
   import { onMount } from "svelte"
 
@@ -17,18 +18,56 @@
   const chartClass = `line-container-${_id}`
   const legendClass = `legend-container-${_id}`
 
+  const testData = {
+    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,
+      },
+    ],
+  }
+
+  let data = testData
+
   let chartElement
   let chartContainer
   let tooltip
   let tooltipContainer
 
-  export let customMouseHover = null
-  export let customMouseMove = null
-  export let customMouseOut = null
+  export let customMouseOver = null //() => tooltip.show()
+  export let customMouseMove = null //(dataPoint, topicColorMap, dataPointXPosition) =>
+  //tooltip.update(dataPoint, topicColorMap, dataPointXPosition)
+  export let customMouseOut = null //() => tooltip.hide()
+
   export let customDataEntryClick = null
   export let customTouchMove = null
 
-  export let data = []
   export let color = "britecharts"
   export let axisTimeCombinations = ""
   export let grid = "horizontal"
@@ -38,6 +77,7 @@
   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
@@ -49,21 +89,20 @@
   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
 
+  let chartDrawn = false
+
   onMount(async () => {
     if (chart) {
-      if (model) {
-        await fetchData()
-      }
+      // data = await getAndPrepareData()
       chartContainer = select(`.${chartClass}`)
       bindChartUIProps()
       bindChartEvents()
-      chartContainer.datum(_data).call(chart)
-      bindChartTooltip()
+      chartContainer.datum(data).call(chart)
+      chartDrawn = true
     }
   })
 
@@ -81,75 +120,100 @@
     }
   }
 
+  async function getAndPrepareData() {
+    let data = []
+    if (model) {
+      await fetchData()
+      data = $store[model]
+    }
+    return { data }
+  }
+
+  $: console.log("DATA", data)
+
   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)
-    }
+    chart.grid("horizontal")
+    chart.dateLabel("date")
+    chart.aspectRatio(0.5)
+    chart.isAnimated(true)
+
+    // if (notNull(color)) {
+    //   //chart.colorSchema(colorSchema)
+    // }
+    // if (notNull(lineGradient)) {
+    //   chart.lineGradient(chartGradient)
+    // }
+    // if (notNull(axisTimeCombinations)) {
+    //   chart.axisTimeCombinations(axisTimeCombinations)
+    // }
+    // if (notNull(grid)) {
+    //   chart.grid(grid)
+    // }
+    // if (notNull(aspectRatio)) {
+    //   chart.aspectRatio(aspectRatio)
+    // }
+    // if (notNull(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)
+    // }
+    // if (notNull(tooltipThreshold)) {
+    //   chart.tooltipThreshold(tooltipThreshold)
+    // }
+    // if (notNull(lines)) {
+    //   chart.lines(lines)
+    // }
   }
 
   function bindChartEvents() {
-    if (customMouseHover) {
-      chart.on("customMouseHover", customMouseHover)
+    if (customMouseOver) {
+      chart.on("customMouseOver", customMouseOver)
     }
     if (customMouseMove) {
       chart.on("customMouseMove", customMouseMove)
@@ -165,45 +229,11 @@
     }
   }
 
-  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}
-
- -->
+<!-- {#if chartDrawn}
+  <Tooltip bind:tooltip {valueLabel} {chartClass} />
+{/if} -->
diff --git a/packages/standard-components/src/Chart/Tooltip.svelte b/packages/standard-components/src/Chart/Tooltip.svelte
index c510562c80..5df4320017 100644
--- a/packages/standard-components/src/Chart/Tooltip.svelte
+++ b/packages/standard-components/src/Chart/Tooltip.svelte
@@ -10,8 +10,6 @@
   export let chartClass = ""
   let tooltipContainer
 
-  export let data = []
-
   export let axisTimeCombinations = null
   export let dateCustomFormat = null
   export let dateFormat = null
@@ -32,11 +30,6 @@
     tooltipContainer.datum([]).call(tooltip)
   })
 
-  //   $: if (chartDrawn) {
-  //     tooltipContainer = select(`.${chartClass} .metadata-group`)
-  //     tooltipContainer.datum([]).call(tooltip)
-  //   }
-
   $: if (tooltipContainer) {
     if (notNull(axisTimeCombinations)) {
       tooltip.axisTimeCombinations(axisTimeCombinations)
diff --git a/packages/standard-components/src/Chart/tests/bar.html b/packages/standard-components/src/Chart/tests/bar.html
index 4bedca035a..cf90c96c17 100644
--- 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" />
 
diff --git a/packages/standard-components/src/Chart/tests/line.html b/packages/standard-components/src/Chart/tests/line.html
new file mode 100644
index 0000000000..433c798c87
--- /dev/null
+++ b/packages/standard-components/src/Chart/tests/line.html
@@ -0,0 +1,71 @@
+<!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>
+
+
+        <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 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()
+
+    lineChart.grid("horizontal").dateLabel("date").aspectRatio(0.5).isAnimated(true)
+
+    lineContainer.datum(data).call(lineChart);
+    
+    </script>
+    
+</body>
+</html>
\ No newline at end of file