Bar chart with tests and general bug fixes

packages/builder/src/components/common/Checkbox.svelte

@@ -12,16 +12,18 @@
 </script>
 
 <input type="checkbox" class="checkbox" id="_checkbox" />
-<label for="_checkbox" class:checked on:click={handleChange}>
+<div on:click={handleChange}>
-  <div class="tick_mark" />
+  <div class="check-div" class:checked>
-</label>
+    <div class="tick_mark" />
+  </div>
+</div>
 
 <style>
   .checkbox {
     display: none;
   }
 
-  label {
+  .check-div {
     position: relative;
     width: 20px;
     height: 20px;
@@ -36,7 +38,7 @@
     border-radius: 4px;
   }
 
-  label:before {
+  .check-div:before {
     content: "";
     position: absolute;
     top: 50%;
@@ -51,7 +53,7 @@
     border-radius: 2px;
   }
 
-  label:active {
+  .check-div:active {
     transform: translateY(-50%) scale(0.9);
   }
 

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

@@ -1068,6 +1068,16 @@ export default {
                     key: "model",
                     control: ModelSelect,
                   },
+                  {
+                    label: "Name Label",
+                    key: "nameLabel",
+                    control: Input,
+                  },
+                  {
+                    label: "Value Label",
+                    key: "valueLabel",
+                    control: Input,
+                  },
                   {
                     label: "Y Axis Label",
                     key: "yAxisLabel",
@@ -1079,10 +1089,21 @@ export default {
                     control: Input,
                   },
                   {
-                    label: "Bar Padding",
+                    label: "X Axis Label Offset",
-                    key: "betweenBarsPadding",
+                    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",
@@ -1111,12 +1132,6 @@ export default {
                       { value: "orangePink", label: "Orange Pink" },
                     ],
                   },
-                  {
-                    label: "Enable Labels",
-                    key: "enableLabels",
-                    control: Checkbox,
-                    valueKey: "checked",
-                  },
                   {
                     label: "Highlight Single Bar",
                     key: "hasSingleBarHighlight",
@@ -1145,16 +1160,6 @@ export default {
                     control: Checkbox,
                     valueKey: "checked",
                   },
-                  {
-                    label: "X Axis Label Offset",
-                    key: "xAxisLabelOffset",
-                    control: Input,
-                  },
-                  {
-                    label: "Y Axis Label Offset",
-                    key: "yAxisLabelOffset",
-                    control: Input,
-                  },
                   {
                     label: "Label Number Format",
                     key: "labelsNumberFormat",
@@ -1165,32 +1170,6 @@ export default {
                     key: "labelSize",
                     control: Input,
                   },
-                  {
-                    label: "Locale",
-                    key: "locale",
-                    control: Input,
-                  },
-                  {
-                    label: "Name Label",
-                    key: "nameLabel",
-                    control: Input,
-                  },
-                  {
-                    label: "Value Label",
-                    key: "valueLabel",
-                    control: Input,
-                  },
-                  {
-                    label: "Number Format",
-                    key: "numberFormat",
-                    control: Input,
-                  },
-                  {
-                    label: "Use Legend",
-                    key: "useLegend",
-                    keyValue: "checked",
-                    control: Checkbox,
-                  },
                 ],
               },
             },

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

@@ -7,8 +7,10 @@
   import shortid from "shortid"
   /*
     ISSUES:
-    nameLabel, valueLabel - what are these? Seem to break whenever passed a string or number. What type?
+    - x and y axis label set and appear in the dom but do not display next to the axis
-    https://github.com/britecharts/britecharts/blob/a2c45ab023112b36e14f47c278e3a1e1c05f8383/src/charts/bar.js#L145
+    - 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
@@ -30,7 +32,7 @@
   export let data = []
   export let xAxisLabel = ""
   export let yAxisLabel = ""
-  export let betweenBarsPadding = 5
+  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
@@ -63,7 +65,9 @@
 
   onMount(async () => {
     if (chartElement) {
-      await fetchData()
+      if (model) {
+        await fetchData()
+      }
       chartContainer = select(`.${chartClass}`)
       bindChartUIProps()
       bindChartEvents()
@@ -87,6 +91,9 @@
   }
 
   function bindChartUIProps() {
+    chart.numberFormat(".1f")
+    chart.labelsNumberFormat(".1f")
+
     if (color) {
       chart.colorSchema(colorSchema)
     }
@@ -130,7 +137,7 @@
       chart.isHorizontal(isHorizontal)
     }
     if (yAxisLabelOffset) {
-      chart.yAxisLabelOffset(Number(yAxisLabelOffset))
+      chart.yAxisLabelOffset(yAxisLabelOffset)
     }
     if (xAxisLabelOffset) {
       chart.xAxisLabelOffset(Number(xAxisLabelOffset))
@@ -162,6 +169,7 @@
     if (percentageAxisToMaxRatio) {
       chart.percentageAxisToMaxRatio(percentageAxisToMaxRatio)
     }
+    chartContainer.datum(_data).call(chart)
   }
 
   function bindChartEvents() {
@@ -181,6 +189,7 @@
 
   function bindChartTooltip() {
     tooltip = britecharts.miniTooltip()
+    tooltip.numberFormat(".0f")
     tooltipContainer = select(`.${chartClass} .metadata-group`)
     tooltipContainer.datum([]).call(tooltip)
   }
@@ -191,7 +200,19 @@
   $: 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>

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

@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-selection/1.2.0/d3-selection.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/britecharts@2.10.0/dist/umd/bar.min.js"
+        type="text/javascript"></script>
+
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/britecharts/dist/css/britecharts.min.css" type="text/css" />
+
+</head>
+<body>
+    
+    <article>
+        <h2 class="tutorial__heading">Bar Chart</h2>
+        <div class="bar-chart"></div>
+    </article>
+
+    <script>
+
+        const dataset = [
+        {
+            "name": "Radiating",
+            "value": 2
+        },
+        {
+            "name": "Opalescent",
+            "value": 4
+        },
+        {
+            "name": "Shining",
+            "value": 3
+        },
+        {
+            "name": "Vibrant",
+            "value": 6
+        },
+        {
+            "name": "Vivid",
+            "value": 6
+        },
+        {
+            "name": "Brilliant",
+            "value": 1
+        }
+    ]
+
+        const barContainer = d3.select('.bar-chart');
+
+        const barChart = britecharts.bar()
+
+        barChart
+            .width(700)
+            .height(300)
+            .enableLabels(true)
+            .labelsNumberFormat('.0%')
+            .isAnimated(true)
+            .yAxisLabel("Quantity")
+            .xAxisLabel("Color")
+            .betweenBarsPadding("0.8")
+
+            // .on('customMouseOver', tooltip.show)
+            // .on('customMouseMove', tooltip.update)
+            // .on('customMouseOut', tooltip.hide);
+
+        barContainer.datum(dataset).call(barChart);
+
+    </script>
+</body>
+</html>