Use beginAtZero as y default, shorten keys

that-one-tom · Oct 30, 2022 · 108b6ec · 108b6ec
1 parent e4a318d
commit 108b6ec
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 7 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "budibase-chartjs",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Chart.js component for Budibase",
   "license": "MIT",
   "svelte": "index.js",

diff --git a/schema.json b/schema.json
@@ -9,14 +9,14 @@
     "settings": [
       {
         "type": "text",
-        "key": "chartdata",
+        "key": "data",
         "label": "Data",
         "required": true,
         "defaultValue": "{\"labels\":[\"January\",\"February\",\"March\",\"April\",\"May\",\"June\",\"July\"],\"datasets\":[{\"label\":\"My First dataset\",\"fill\":true,\"lineTension\":0.3,\"backgroundColor\":\"rgba(225, 204,230, .3)\",\"borderColor\":\"rgb(205, 130, 158)\",\"borderCapStyle\":\"butt\",\"borderDash\":[],\"borderDashOffset\":0,\"borderJoinStyle\":\"miter\",\"pointBorderColor\":\"rgb(205, 130,1 58)\",\"pointBackgroundColor\":\"rgb(255, 255, 255)\",\"pointBorderWidth\":10,\"pointHoverRadius\":5,\"pointHoverBackgroundColor\":\"rgb(0, 0, 0)\",\"pointHoverBorderColor\":\"rgba(220, 220, 220,1)\",\"pointHoverBorderWidth\":2,\"pointRadius\":1,\"pointHitRadius\":10,\"data\":[65,59,80,81,56,55,40]},{\"label\":\"My Second dataset\",\"fill\":true,\"lineTension\":0.3,\"backgroundColor\":\"rgba(184, 185, 210, .3)\",\"borderColor\":\"rgb(35, 26, 136)\",\"borderCapStyle\":\"butt\",\"borderDash\":[],\"borderDashOffset\":0,\"borderJoinStyle\":\"miter\",\"pointBorderColor\":\"rgb(35, 26, 136)\",\"pointBackgroundColor\":\"rgb(255, 255, 255)\",\"pointBorderWidth\":10,\"pointHoverRadius\":5,\"pointHoverBackgroundColor\":\"rgb(0, 0, 0)\",\"pointHoverBorderColor\":\"rgba(220, 220, 220, 1)\",\"pointHoverBorderWidth\":2,\"pointRadius\":1,\"pointHitRadius\":10,\"data\":[28,48,40,19,86,27,90]}]}"
       },
       {
         "type": "select",
-        "key": "charttype",
+        "key": "type",
         "label": "Type",
         "defaultValue": "line",
         "required": true,
@@ -29,7 +29,7 @@
       },
       {
         "type": "text",
-        "key": "chartoptions",
+        "key": "options",
         "label": "Options",
         "defaultValue": "{}"
       }

diff --git a/src/Component.svelte b/src/Component.svelte
@@ -4,13 +4,22 @@
   /* import { Bar } from 'svelte-chartjs'; */
   import 'chart.js/auto';
 
-  export let chartdata;
-  export let chartoptions;
+  export let data;
+  export let options;
+
+  const default_options = {
+    responsive: true,
+    scales: {
+      y: {
+        beginAtZero: true
+      }
+    }
+  }
   
   const { styleable } = getContext("sdk");
   const component = getContext("component");
 </script>
 
 <div use:styleable={$component.styles}>
-  <Line data={ typeof chartdata === 'string' ? JSON.parse(chartdata) : chartdata } options={Object.assign({ responsive: true }, typeof chartoptions === 'string' ? JSON.parse(chartoptions) : chartoptions)} />
+  <Line data={ typeof data === 'string' ? JSON.parse(data) : data } options={Object.assign(default_options, typeof options === 'string' ? JSON.parse(options) : options)} />
 </div>