Added configuration options for all available properties of Liquid Fill Chart

Author: MintyMods

package-lock.json

@@ -14,7 +14,7 @@
 	"homepage": "https://github.com/MintyMods/MintySensorServer#readme",
 	"scripts": {
 		"build": "cross-env NODE_ENV=production webpack -p",
-		"dev": "webpack-dev-server --https --port 8081 --color true --content-base src/main/resources/templates/public --content-base src/main/resources/public --content-base src/main/resources/static"
+		"dev": "webpack-dev-server --https --port 8081 --color true --mode development --content-base src/main/resources/templates/public --content-base src/main/resources/public --content-base src/main/resources/static"
 	},
 	"browserslist": [
 		">1%",
@@ -26,29 +26,29 @@
 	"devDependencies": {
 		"@babel/core": "^7.6.2",
 		"@babel/preset-env": "^7.6.2",
+		"autoprefixer": "^9.6.2",
 		"babel-loader": "^8.0.6",
 		"clean-webpack-plugin": "^3.0.0",
+		"copy-webpack-plugin": "^5.0.4",
 		"cross-env": "^5.2.1",
 		"css-loader": "^2.1.1",
 		"file-loader": "^4.2.0",
+		"friendly-errors-webpack-plugin": "^1.7.0",
 		"html-webpack-plugin": "^3.2.0",
 		"mini-css-extract-plugin": "^0.6.0",
 		"node-sass": "^4.12.0",
 		"postcss-css-variables": "^0.13.0",
+		"postcss-flexbugs-fixes": "^4.1.0",
 		"postcss-loader": "^3.0.0",
 		"sass-loader": "^7.3.1",
 		"serve": "^11.2.0",
 		"style-loader": "^0.23.1",
 		"svelte": "^3.12.1",
-		"svelte-grid": "^1.10.1",
+		"svelte-grid": "^1.10.4",
 		"svelte-loader": "^2.13.6",
 		"svelte-material-ui": "^1.0.0-beta.15",
 		"svelte-spa-router": "^1.2.0",
 		"svelte-watch-resize": "^1.0.3",
-		"friendly-errors-webpack-plugin": "^1.7.0",
-		"postcss-flexbugs-fixes": "^4.1.0",
-		"copy-webpack-plugin": "^5.0.4",
-		"autoprefixer": "^9.6.2",
 		"webpack": "^4.41.0",
 		"webpack-cli": "^3.3.9",
 		"webpack-dev-server": "^3.8.1"

package.json

@@ -55,7 +55,7 @@
   let readings = [];
   let sensors = [];
   let types = [];
-  let demoModeActive = false;
+  let demoModeActive = true;
   $: demoTickCount = $storeDemoCurrentJsonFile;
 
   onMount(() => {

src/main/resources/templates/MintyClientApp.svelte

@@ -8,7 +8,7 @@
   let readings;
   
   export function showConfig() {
-    PNotify.info("Just Guage Config " + data.id + '_' + data.index);
+    PNotify.info("Just Gauge Config " + data.id + '_' + data.index);
   }
 
 

src/main/resources/templates/_charts/JustGage.svelte

@@ -1,5 +1,5 @@
 <script>
-  //  Canvas Guages 2.1.5
+  //  Canvas Gauges 2.1.5
   // https://canvas-gauges.com
   import { onMount, beforeUpdate } from "svelte";
   export let data;
@@ -9,7 +9,7 @@
   const id = "linear-gauge";
 
   export function showConfig() {
-    PNotify.info("Linear Guage Config");
+    PNotify.info("Linear Gauge Config");
   }
 
   // onMount(() => {

src/main/resources/templates/_charts/canvas_gauges/LinearGauge.svelte

@@ -1,13 +1,13 @@
 <script>
-  //  Canvas Guages 2.1.5
+  //  Canvas Gauges 2.1.5
   // https://canvas-gauges.com
   import { beforeUpdate } from "svelte";
   export let data;
   let gauge;
   $: data = data;
 
   export function showConfig() {
-    PNotify.info("Radial Guage Config");
+    PNotify.info("Radial Gauge Config");
   }
 
   beforeUpdate(() => {

src/main/resources/templates/_charts/canvas_gauges/RadialGauge.svelte

@@ -4,7 +4,46 @@
   import { onDestroy, onMount } from "svelte";
   import { watchResize } from "svelte-watch-resize";
   import EchartsLiquidFillConfig from "./EchartsLiquidFillConfig.svelte";
-
+  import {
+    color,
+    center,
+    radius,
+    amplitude,
+    waveLength,
+    period,
+    direction,
+    shape,
+    waveAnimation,
+    animationEasing,
+    animationEasingUpdate,
+    animationDuration,
+    animationDurationUpdate,
+    outlineShow,
+    outlineBorderDistance,
+    outlineitemStyleColor,
+    outlineitemStyleBorderColor,
+    outlineitemStyleBorderWidth,
+    outlineitemStyleShadowBlur,
+    outlineitemStyleShadowColor,
+    backgroundStyleColor,
+    backgroundStyleBorderWidth,
+    backgroundStyleBorderColor,
+    backgroundStyleItemStyleShadowBlur,
+    backgroundStyleItemStyleShadowColor,
+    backgroundStyleItemStyleOpacity,
+    itemStyleOpacity,
+    itemStyleShadowBlur,
+    itemStyleShadowColor,
+    emphasisItemStyleOpacity,
+    labelShow,
+    labelColor,
+    labelInsideColor,
+    labelFontSize,
+    labelFontWeight,
+    labelAlign,
+    labelBaseline,
+    labelPosition
+  } from "./config/echarts-liquid-fill-store.js";
   export let data;
   export let options;
   const id =
@@ -125,58 +164,19 @@
     };
   }
 
-  import {
-    color,
-    center,
-    radius,
-    amplitude,
-    waveLength,
-    period,
-    direction,
-    shape,
-    waveAnimation,
-    animationEasing,
-    animationEasingUpdate,
-    animationDuration,
-    animationDurationUpdate,
-    outlineShow,
-    outlineBorderDistance,
-    outlineitemStyleColor,
-    outlineitemStyleBorderColor,
-    outlineitemStyleBorderWidth,
-    outlineitemStyleShadowBlur,
-    outlineitemStyleShadowColor,
-    backgroundStyleColor,
-    backgroundStyleBorderWidth,
-    backgroundStyleBorderColor,
-    backgroundStyleItemStyleShadowBlur,
-    backgroundStyleItemStyleShadowColor,
-    backgroundStyleItemStyleOpacity,
-    itemStyleOpacity,
-    itemStyleShadowBlur,
-    itemStyleShadowColor,
-    emphasisItemStyleOpacity,
-    labelShow,
-    labelColor,
-    labelInsideColor,
-    labelFontSize,
-    labelFontWeight,
-    labelAlign,
-    labelBaseline,
-    labelPosition
-  } from "../../_stores/echarts-liquid-fill-store.js";
+
 </script>
 
 <style>
-  .guage {
+  .gauge {
     display: block;
     width: 100%;
     height: 100%;
     transform: scale(1.7);
   }
 </style>
 
-<div {id} class="guage" use:watchResize={resizeChart} />
+<div {id} class="gauge" use:watchResize={resizeChart} />
 
 <EchartsLiquidFillConfig bind:this={config} {data} />