From e5c20424d9752e531286286df4b0041ec9c34489 Mon Sep 17 00:00:00 2001 From: "Rob Gregory [Minty]" Date: Mon, 14 Oct 2019 01:19:11 +0100 Subject: [PATCH] Added configuration options for all available properties of Liquid Fill Chart --- package-lock.json | 6 +- package.json | 12 +- .../resources/templates/MintyClientApp.svelte | 2 +- .../templates/_charts/JustGage.svelte | 2 +- .../_charts/canvas_gauges/LinearGauge.svelte | 4 +- .../_charts/canvas_gauges/RadialGauge.svelte | 4 +- .../_charts/echarts/EchartsLiquidFill.svelte | 86 ++--- .../echarts/EchartsLiquidFillConfig.svelte | 304 +++++++----------- .../_charts/echarts/config/About.svelte | 74 +++++ .../_charts/echarts/config/Amplitude.svelte | 22 ++ .../echarts/config/AnimationDuration.svelte | 22 ++ .../config/AnimationDurationUpdate.svelte | 22 ++ .../echarts/config/AnimationEasing.svelte | 41 +++ .../config/AnimationEasingUpdate.svelte | 41 +++ .../config/BackgroundStyleBorderColor.svelte | 62 ++++ .../config/BackgroundStyleBorderWidth.svelte | 46 +++ .../config/BackgroundStyleColor.svelte | 62 ++++ .../BackgroundStyleItemStyleOpacity.svelte | 41 +++ .../BackgroundStyleItemStyleShadowBlur.svelte | 45 +++ ...BackgroundStyleItemStyleShadowColor.svelte | 62 ++++ .../_charts/echarts/config/Center.svelte | 35 ++ .../_charts/echarts/config/Color.svelte | 61 ++++ .../_charts/echarts/config/Direction.svelte | 16 + .../config/EmphasisItemStyleOpacity.svelte | 41 +++ .../echarts/config/ItemStyleOpacity.svelte | 41 +++ .../echarts/config/ItemStyleShadowBlur.svelte | 45 +++ .../config/ItemStyleShadowColor.svelte | 62 ++++ .../_charts/echarts/config/LabelAlign.svelte | 34 ++ .../echarts/config/LabelBaseline.svelte | 34 ++ .../_charts/echarts/config/LabelColor.svelte | 62 ++++ .../echarts/config/LabelFontSize.svelte | 22 ++ .../echarts/config/LabelFontWeight.svelte | 35 ++ .../echarts/config/LabelInsideColor.svelte | 62 ++++ .../echarts/config/LabelPosition.svelte | 34 ++ .../_charts/echarts/config/LabelShow.svelte | 13 + .../config/OutlineBorderDistance.svelte | 46 +++ .../_charts/echarts/config/OutlineShow.svelte | 12 + .../config/OutlineitemStyleBorderColor.svelte | 62 ++++ .../config/OutlineitemStyleBorderWidth.svelte | 46 +++ .../config/OutlineitemStyleColor.svelte | 62 ++++ .../config/OutlineitemStyleShadowBlur.svelte | 45 +++ .../config/OutlineitemStyleShadowColor.svelte | 62 ++++ .../_charts/echarts/config/Period.svelte | 22 ++ .../_charts/echarts/config/Radius.svelte | 22 ++ .../_charts/echarts/config/Shape.svelte | 53 +++ .../echarts/config/WaveAnimation.svelte | 13 + .../_charts/echarts/config/WaveLength.svelte | 22 ++ .../config/echarts-liquid-fill-store.js | 40 +++ .../templates/_components/ReadingsList.svelte | 18 +- .../templates/_components/_scss/_logo.scss | 2 +- .../templates/_routes/_scss/_views.scss | 39 +-- .../resources/templates/_routes/index.svelte | 2 +- .../templates/_routes/settings copy.svelte | 113 +++++++ .../templates/_routes/settings.svelte | 61 +++- .../resources/templates/_routes/views.svelte | 30 +- .../_stores/echarts-liquid-fill-store.js | 40 --- .../resources/templates/minty-client-app.scss | 78 ++--- .../resources/templates/public/global.css | 53 ++- .../resources/templates/public/index.html | 4 +- 59 files changed, 2088 insertions(+), 416 deletions(-) create mode 100644 src/main/resources/templates/_charts/echarts/config/About.svelte create mode 100644 src/main/resources/templates/_charts/echarts/config/Amplitude.svelte create mode 100644 src/main/resources/templates/_charts/echarts/config/AnimationDuration.svelte create mode 100644 src/main/resources/templates/_charts/echarts/config/AnimationDurationUpdate.svelte create mode 100644 src/main/resources/templates/_charts/echarts/config/AnimationEasing.svelte create mode 100644 src/main/resources/templates/_charts/echarts/config/AnimationEasingUpdate.svelte create mode 100644 src/main/resources/templates/_charts/echarts/config/BackgroundStyleBorderColor.svelte create mode 100644 src/main/resources/templates/_charts/echarts/config/BackgroundStyleBorderWidth.svelte create mode 100644 src/main/resources/templates/_charts/echarts/config/BackgroundStyleColor.svelte create mode 100644 src/main/resources/templates/_charts/echarts/config/BackgroundStyleItemStyleOpacity.svelte create mode 100644 src/main/resources/templates/_charts/echarts/config/BackgroundStyleItemStyleShadowBlur.svelte create mode 100644 src/main/resources/templates/_charts/echarts/config/BackgroundStyleItemStyleShadowColor.svelte create mode 100644 src/main/resources/templates/_charts/echarts/config/Center.svelte create mode 100644 src/main/resources/templates/_charts/echarts/config/Color.svelte create mode 100644 src/main/resources/templates/_charts/echarts/config/Direction.svelte create mode 100644 src/main/resources/templates/_charts/echarts/config/EmphasisItemStyleOpacity.svelte create mode 100644 src/main/resources/templates/_charts/echarts/config/ItemStyleOpacity.svelte create mode 100644 src/main/resources/templates/_charts/echarts/config/ItemStyleShadowBlur.svelte create mode 100644 src/main/resources/templates/_charts/echarts/config/ItemStyleShadowColor.svelte create mode 100644 src/main/resources/templates/_charts/echarts/config/LabelAlign.svelte create mode 100644 src/main/resources/templates/_charts/echarts/config/LabelBaseline.svelte create mode 100644 src/main/resources/templates/_charts/echarts/config/LabelColor.svelte create mode 100644 src/main/resources/templates/_charts/echarts/config/LabelFontSize.svelte create mode 100644 src/main/resources/templates/_charts/echarts/config/LabelFontWeight.svelte create mode 100644 src/main/resources/templates/_charts/echarts/config/LabelInsideColor.svelte create mode 100644 src/main/resources/templates/_charts/echarts/config/LabelPosition.svelte create mode 100644 src/main/resources/templates/_charts/echarts/config/LabelShow.svelte create mode 100644 src/main/resources/templates/_charts/echarts/config/OutlineBorderDistance.svelte create mode 100644 src/main/resources/templates/_charts/echarts/config/OutlineShow.svelte create mode 100644 src/main/resources/templates/_charts/echarts/config/OutlineitemStyleBorderColor.svelte create mode 100644 src/main/resources/templates/_charts/echarts/config/OutlineitemStyleBorderWidth.svelte create mode 100644 src/main/resources/templates/_charts/echarts/config/OutlineitemStyleColor.svelte create mode 100644 src/main/resources/templates/_charts/echarts/config/OutlineitemStyleShadowBlur.svelte create mode 100644 src/main/resources/templates/_charts/echarts/config/OutlineitemStyleShadowColor.svelte create mode 100644 src/main/resources/templates/_charts/echarts/config/Period.svelte create mode 100644 src/main/resources/templates/_charts/echarts/config/Radius.svelte create mode 100644 src/main/resources/templates/_charts/echarts/config/Shape.svelte create mode 100644 src/main/resources/templates/_charts/echarts/config/WaveAnimation.svelte create mode 100644 src/main/resources/templates/_charts/echarts/config/WaveLength.svelte create mode 100644 src/main/resources/templates/_charts/echarts/config/echarts-liquid-fill-store.js create mode 100644 src/main/resources/templates/_routes/settings copy.svelte delete mode 100644 src/main/resources/templates/_stores/echarts-liquid-fill-store.js diff --git a/package-lock.json b/package-lock.json index b8717cbc..969d6696 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9872,9 +9872,9 @@ "dev": true }, "svelte-grid": { - "version": "1.10.1", - "resolved": "https://registry.npmjs.org/svelte-grid/-/svelte-grid-1.10.1.tgz", - "integrity": "sha512-37JQzsURkP2TF+RWGQWJAKXVCInP3lP7HcIYbjdMV2oAPg1+qJleiUcD/bV8wS8EoyDengkHvlxQvULt5cFlZA==", + "version": "1.10.4", + "resolved": "https://registry.npmjs.org/svelte-grid/-/svelte-grid-1.10.4.tgz", + "integrity": "sha512-1aWThTMqhRuxvWXpdYtFj0qr0j+cgD5jx0Q9n8qyXt1oqLFknz13dxi7x7AbIPrYdXcGfEQxtxCJ9MwAhOFRcg==", "dev": true }, "svelte-loader": { diff --git a/package.json b/package.json index df655150..9ee71c98 100644 --- a/package.json +++ b/package.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" diff --git a/src/main/resources/templates/MintyClientApp.svelte b/src/main/resources/templates/MintyClientApp.svelte index a13216af..34177ee3 100644 --- a/src/main/resources/templates/MintyClientApp.svelte +++ b/src/main/resources/templates/MintyClientApp.svelte @@ -55,7 +55,7 @@ let readings = []; let sensors = []; let types = []; - let demoModeActive = false; + let demoModeActive = true; $: demoTickCount = $storeDemoCurrentJsonFile; onMount(() => { diff --git a/src/main/resources/templates/_charts/JustGage.svelte b/src/main/resources/templates/_charts/JustGage.svelte index 60587e2d..b324c954 100644 --- a/src/main/resources/templates/_charts/JustGage.svelte +++ b/src/main/resources/templates/_charts/JustGage.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); } diff --git a/src/main/resources/templates/_charts/canvas_gauges/LinearGauge.svelte b/src/main/resources/templates/_charts/canvas_gauges/LinearGauge.svelte index b269a546..9b64ea5d 100644 --- a/src/main/resources/templates/_charts/canvas_gauges/LinearGauge.svelte +++ b/src/main/resources/templates/_charts/canvas_gauges/LinearGauge.svelte @@ -1,5 +1,5 @@ -
+
diff --git a/src/main/resources/templates/_charts/echarts/EchartsLiquidFillConfig.svelte b/src/main/resources/templates/_charts/echarts/EchartsLiquidFillConfig.svelte index bbde6fa4..e4af94ea 100644 --- a/src/main/resources/templates/_charts/echarts/EchartsLiquidFillConfig.svelte +++ b/src/main/resources/templates/_charts/echarts/EchartsLiquidFillConfig.svelte @@ -2,174 +2,88 @@ import { afterUpdate, onMount, tick } from "svelte"; import Dialog, { Title, Content, Actions, InitialFocus } from "@smui/dialog"; import Button from "@smui/button"; - import Textfield, { Input, Textarea } from "@smui/textfield"; - import HelperText from "@smui/textfield/helper-text"; - // import Slider from "@smui/slider"; - import Select, { Option } from "@smui/select"; import Tab, { Icon, Label } from "@smui/tab"; import TabBar from "@smui/tab-bar"; - import Switch from "@smui/switch"; - import FormField from "@smui/form-field"; - 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"; + // Configuration Input Fields + import About from "./config/About"; + import Shape from "./config/Shape"; + import Color from "./config/Color"; + import Direction from "./config/Direction"; + import OutlineShow from "./config/OutlineShow"; + import Center from "./config/Center"; + import Radius from "./config/Radius"; + import Amplitude from "./config/Amplitude"; + import WaveLength from "./config/WaveLength"; + import Period from "./config/Period"; + import WaveAnimation from "./config/WaveAnimation"; + import AnimationEasing from "./config/AnimationEasing"; + import AnimationEasingUpdate from "./config/AnimationEasingUpdate"; + import AnimationDuration from "./config/AnimationDuration"; + import AnimationDurationUpdate from "./config/AnimationDurationUpdate"; + import OutlineBorderDistance from "./config/OutlineBorderDistance"; + import OutlineitemStyleColor from "./config/OutlineitemStyleColor"; + import OutlineitemStyleBorderColor from "./config/OutlineitemStyleBorderColor"; + import OutlineitemStyleBorderWidth from "./config/OutlineitemStyleBorderWidth"; + import OutlineitemStyleShadowBlur from "./config/OutlineitemStyleShadowBlur"; + import OutlineitemStyleShadowColor from "./config/OutlineitemStyleShadowColor"; + import BackgroundStyleColor from "./config/BackgroundStyleColor"; + import BackgroundStyleBorderWidth from "./config/BackgroundStyleBorderWidth"; + import BackgroundStyleBorderColor from "./config/BackgroundStyleBorderColor"; + import BackgroundStyleItemStyleShadowBlur from "./config/BackgroundStyleItemStyleShadowBlur"; + import BackgroundStyleItemStyleShadowColor from "./config/BackgroundStyleItemStyleShadowColor"; + import BackgroundStyleItemStyleOpacity from "./config/BackgroundStyleItemStyleOpacity"; + import ItemStyleOpacity from "./config/ItemStyleOpacity"; + import ItemStyleShadowBlur from "./config/ItemStyleShadowBlur"; + import ItemStyleShadowColor from "./config/ItemStyleShadowColor"; + import EmphasisItemStyleOpacity from "./config/EmphasisItemStyleOpacity"; + import LabelShow from "./config/LabelShow"; + import LabelColor from "./config/LabelColor"; + import LabelInsideColor from "./config/LabelInsideColor"; + import LabelFontSize from "./config/LabelFontSize"; + import LabelFontWeight from "./config/LabelFontWeight"; + import LabelAlign from "./config/LabelAlign"; + import LabelBaseline from "./config/LabelBaseline"; + import LabelPosition from "./config/LabelPosition"; - const SHAPES = [ - { type: "circle", desc: "Circle", icon: "fal fa-circle fa-fw" }, - { - type: "rect", - desc: "Rectangle", - icon: "fal fa-rectangle-landscape fa-fw" - }, - { - type: "roundRect", - desc: "Rounded Rectangle", - icon: "fad fa-rectangle-landscape fa-fw" - }, - { type: "triangle", desc: "Triangle", icon: "fal fa-triangle fa-fw" }, - { type: "diamond", desc: "Diamond", icon: "fal fa-diamond fa-fw" }, - { type: "pin", desc: "Pin", icon: "fal fa-map-marker fa-fw" }, - { type: "arrow", desc: "Arrow", icon: "fal fa-arrow-alt-up fa-fw" } + let iconTabs = [ + { id: "data", icon: "fad fa-layer-plus", label: "Data" }, + { id: "wave", icon: "fad fa-water", label: "Wave" }, + { id: "outline", icon: "fad fa-border-all", label: "Outline" }, + { id: "background", icon: "fal fa-chess-board", label: "Background" }, + { id: "label", icon: "fad fa-text-size", label: "Label" }, + { id: "layout", icon: "fad fa-arrows-alt", label: "Layout" }, + { id: "animation", icon: "fad fa-camera-movie", label: "Animation" }, + { id: "about", icon: "fad fa-info-circle", label: "About" } ]; - const EASING = [ - "linear", - "ease", - "ease-in", - "ease-out", - "ease-in-out", - "step-start", - "step-end" - ]; - const ALIGN = ["left", "center", "right"]; - const POSTITION = ["inside", "left", "right", "top", "bottom"]; - const FONT_WEIGHT = ["normal", "bold", "bolder", "lighter"]; export let data; - let dialog; - - // afterUpdate(async () => { - // await tick(); - // initPickr(); - // }); - - function initPickr() { - let pickers = document.querySelectorAll(".color-picker"); - pickers.forEach(picker => { - Pickr.create({ - el: picker, - theme: "nano", - components: { - preview: true, - opacity: true, - hue: true, - interaction: { - rgba: false, - input: false, - save: true, - cancel: false - } - } - }); - }); - } export const openDialog = item => { data = data; - dialog.open(); - // initDialog(item); - // initPickr(); + dialog && dialog.open(); }; - function initDialog(item) { - let module = document.getElementById(item.id); - let items = module.querySelectorAll('.svlt-grid-item'); - - debugger; - //svlt-grid-item svelte-sfqi95 - module.classList.add("scrim"); - module.style.width = "100vw"; - module.style.height = "100vh"; - } - export const closeDialog = () => { dialog.close(); }; - function changeColour(ele) { - console.log(ele); - } - - let directionChecked = true; - $: $direction = directionChecked ? "right" : "left"; - let outlineShowChecked = true; - $: $outlineShow = outlineShowChecked; - + let dialog; let shapeSelected; - $: $shape = shapeSelected; + let activeTab; - let colorText; - $: $color = colorText; - // $: console.log("COLOR:" + color); + $: dialog && dialog.open(); // @todo remove after issue seen {#if data !== undefined} - {#if Array.isArray(data)} @@ -180,48 +94,69 @@ </TabBar> {:else}{data.label.desc}{/if} - - - - - - + +
+ + + + + + + + + {#if activeTab && activeTab.id === 'data'} +
+ {:else if activeTab && activeTab.id === 'layout'} +
+ + + + + {:else if activeTab && activeTab.id === 'wave'} + + + + + + {:else if activeTab && activeTab.id === 'outline'} + + + + + + + + {:else if activeTab && activeTab.id === 'background'} + + + + + + + {:else if activeTab && activeTab.id === 'label'} + + + + + + + + + {:else if activeTab && activeTab.id === 'animation'} + + + + + + + + {:else if activeTab && activeTab.id === 'about'} + + {:else} +

Error - Please Report

+ {/if} - - -
- - - - - Wave direction - {$direction} - - -
- - - - - Show Outline - {$outlineShow} - - - +
- {/if} diff --git a/src/main/resources/templates/_charts/echarts/config/About.svelte b/src/main/resources/templates/_charts/echarts/config/About.svelte new file mode 100644 index 00000000..7101f709 --- /dev/null +++ b/src/main/resources/templates/_charts/echarts/config/About.svelte @@ -0,0 +1,74 @@ + + + + +
+ + window.open('https://github.com/ecomfe/echarts-liquidfill')}> + +

+ ECharts Liquid Fill Chart +

+

+ Baidu EFE team +

+ This component has been built using:- +
  • Apache ECharts
    • +
  • ecomfe/echarts-liquidfill
    • +     +     + + + + + + + window.open('https://github.com/apache/incubator-echarts')}> + + + window.open('https://github.com/ecomfe/echarts-liquidfill')}> + + + + +     +
    diff --git a/src/main/resources/templates/_charts/echarts/config/Amplitude.svelte b/src/main/resources/templates/_charts/echarts/config/Amplitude.svelte new file mode 100644 index 00000000..cb384221 --- /dev/null +++ b/src/main/resources/templates/_charts/echarts/config/Amplitude.svelte @@ -0,0 +1,22 @@ + + + +Value in pixels 'px' or as a percentage '%' \ No newline at end of file diff --git a/src/main/resources/templates/_charts/echarts/config/AnimationDuration.svelte b/src/main/resources/templates/_charts/echarts/config/AnimationDuration.svelte new file mode 100644 index 00000000..868b55e7 --- /dev/null +++ b/src/main/resources/templates/_charts/echarts/config/AnimationDuration.svelte @@ -0,0 +1,22 @@ + + + +Value in milliseconds \ No newline at end of file diff --git a/src/main/resources/templates/_charts/echarts/config/AnimationDurationUpdate.svelte b/src/main/resources/templates/_charts/echarts/config/AnimationDurationUpdate.svelte new file mode 100644 index 00000000..b409e470 --- /dev/null +++ b/src/main/resources/templates/_charts/echarts/config/AnimationDurationUpdate.svelte @@ -0,0 +1,22 @@ + + + +Value in milliseconds \ No newline at end of file diff --git a/src/main/resources/templates/_charts/echarts/config/AnimationEasing.svelte b/src/main/resources/templates/_charts/echarts/config/AnimationEasing.svelte new file mode 100644 index 00000000..9a9cee76 --- /dev/null +++ b/src/main/resources/templates/_charts/echarts/config/AnimationEasing.svelte @@ -0,0 +1,41 @@ + + + Start animation raising from bottom diff --git a/src/main/resources/templates/_charts/echarts/config/AnimationEasingUpdate.svelte b/src/main/resources/templates/_charts/echarts/config/AnimationEasingUpdate.svelte new file mode 100644 index 00000000..493f1e13 --- /dev/null +++ b/src/main/resources/templates/_charts/echarts/config/AnimationEasingUpdate.svelte @@ -0,0 +1,41 @@ + + + + Chart value & position changes \ No newline at end of file diff --git a/src/main/resources/templates/_charts/echarts/config/BackgroundStyleBorderColor.svelte b/src/main/resources/templates/_charts/echarts/config/BackgroundStyleBorderColor.svelte new file mode 100644 index 00000000..a101552f --- /dev/null +++ b/src/main/resources/templates/_charts/echarts/config/BackgroundStyleBorderColor.svelte @@ -0,0 +1,62 @@ + + + + +
    + +
    +
    + diff --git a/src/main/resources/templates/_charts/echarts/config/BackgroundStyleBorderWidth.svelte b/src/main/resources/templates/_charts/echarts/config/BackgroundStyleBorderWidth.svelte new file mode 100644 index 00000000..9409b767 --- /dev/null +++ b/src/main/resources/templates/_charts/echarts/config/BackgroundStyleBorderWidth.svelte @@ -0,0 +1,46 @@ + + +
    + + + + + + Background Stroke Line Width + + + +
    + diff --git a/src/main/resources/templates/_charts/echarts/config/BackgroundStyleColor.svelte b/src/main/resources/templates/_charts/echarts/config/BackgroundStyleColor.svelte new file mode 100644 index 00000000..7a063de2 --- /dev/null +++ b/src/main/resources/templates/_charts/echarts/config/BackgroundStyleColor.svelte @@ -0,0 +1,62 @@ + + + + +
    + +
    +
    + diff --git a/src/main/resources/templates/_charts/echarts/config/BackgroundStyleItemStyleOpacity.svelte b/src/main/resources/templates/_charts/echarts/config/BackgroundStyleItemStyleOpacity.svelte new file mode 100644 index 00000000..358b5d66 --- /dev/null +++ b/src/main/resources/templates/_charts/echarts/config/BackgroundStyleItemStyleOpacity.svelte @@ -0,0 +1,41 @@ + + +
    + + + + + + Background Opacity + + + +
    diff --git a/src/main/resources/templates/_charts/echarts/config/BackgroundStyleItemStyleShadowBlur.svelte b/src/main/resources/templates/_charts/echarts/config/BackgroundStyleItemStyleShadowBlur.svelte new file mode 100644 index 00000000..5eba35ac --- /dev/null +++ b/src/main/resources/templates/_charts/echarts/config/BackgroundStyleItemStyleShadowBlur.svelte @@ -0,0 +1,45 @@ + + +
    + + + + + + Background Shadow Blur Size + + + +
    diff --git a/src/main/resources/templates/_charts/echarts/config/BackgroundStyleItemStyleShadowColor.svelte b/src/main/resources/templates/_charts/echarts/config/BackgroundStyleItemStyleShadowColor.svelte new file mode 100644 index 00000000..bbdcd0f9 --- /dev/null +++ b/src/main/resources/templates/_charts/echarts/config/BackgroundStyleItemStyleShadowColor.svelte @@ -0,0 +1,62 @@ + + + + +
    + +
    +
    + \ No newline at end of file diff --git a/src/main/resources/templates/_charts/echarts/config/Center.svelte b/src/main/resources/templates/_charts/echarts/config/Center.svelte new file mode 100644 index 00000000..e798510d --- /dev/null +++ b/src/main/resources/templates/_charts/echarts/config/Center.svelte @@ -0,0 +1,35 @@ + + + +Value in pixels 'px' or as a percentage '%' + +Value in pixels 'px' or as a percentage '%' diff --git a/src/main/resources/templates/_charts/echarts/config/Color.svelte b/src/main/resources/templates/_charts/echarts/config/Color.svelte new file mode 100644 index 00000000..a671a8ab --- /dev/null +++ b/src/main/resources/templates/_charts/echarts/config/Color.svelte @@ -0,0 +1,61 @@ + + + + +
    + +
    +
    + diff --git a/src/main/resources/templates/_charts/echarts/config/Direction.svelte b/src/main/resources/templates/_charts/echarts/config/Direction.svelte new file mode 100644 index 00000000..51a512e8 --- /dev/null +++ b/src/main/resources/templates/_charts/echarts/config/Direction.svelte @@ -0,0 +1,16 @@ + + + + + + Wave Direction + {$direction} + + diff --git a/src/main/resources/templates/_charts/echarts/config/EmphasisItemStyleOpacity.svelte b/src/main/resources/templates/_charts/echarts/config/EmphasisItemStyleOpacity.svelte new file mode 100644 index 00000000..959f2e8c --- /dev/null +++ b/src/main/resources/templates/_charts/echarts/config/EmphasisItemStyleOpacity.svelte @@ -0,0 +1,41 @@ + + +
    + + + + + + Wave Hover Opacity + + + +
    \ No newline at end of file diff --git a/src/main/resources/templates/_charts/echarts/config/ItemStyleOpacity.svelte b/src/main/resources/templates/_charts/echarts/config/ItemStyleOpacity.svelte new file mode 100644 index 00000000..a2cd9959 --- /dev/null +++ b/src/main/resources/templates/_charts/echarts/config/ItemStyleOpacity.svelte @@ -0,0 +1,41 @@ + + +
    + + + + + + Wave Opacity + + + +
    \ No newline at end of file diff --git a/src/main/resources/templates/_charts/echarts/config/ItemStyleShadowBlur.svelte b/src/main/resources/templates/_charts/echarts/config/ItemStyleShadowBlur.svelte new file mode 100644 index 00000000..976469c0 --- /dev/null +++ b/src/main/resources/templates/_charts/echarts/config/ItemStyleShadowBlur.svelte @@ -0,0 +1,45 @@ + + +
    + + + + + + Wave Shadow Blur Size + + + +
    diff --git a/src/main/resources/templates/_charts/echarts/config/ItemStyleShadowColor.svelte b/src/main/resources/templates/_charts/echarts/config/ItemStyleShadowColor.svelte new file mode 100644 index 00000000..205ab74f --- /dev/null +++ b/src/main/resources/templates/_charts/echarts/config/ItemStyleShadowColor.svelte @@ -0,0 +1,62 @@ + + + + +
    + +
    +
    + diff --git a/src/main/resources/templates/_charts/echarts/config/LabelAlign.svelte b/src/main/resources/templates/_charts/echarts/config/LabelAlign.svelte new file mode 100644 index 00000000..ea01ec84 --- /dev/null +++ b/src/main/resources/templates/_charts/echarts/config/LabelAlign.svelte @@ -0,0 +1,34 @@ + + + + \ No newline at end of file diff --git a/src/main/resources/templates/_charts/echarts/config/LabelBaseline.svelte b/src/main/resources/templates/_charts/echarts/config/LabelBaseline.svelte new file mode 100644 index 00000000..8dcad52a --- /dev/null +++ b/src/main/resources/templates/_charts/echarts/config/LabelBaseline.svelte @@ -0,0 +1,34 @@ + + + + \ No newline at end of file diff --git a/src/main/resources/templates/_charts/echarts/config/LabelColor.svelte b/src/main/resources/templates/_charts/echarts/config/LabelColor.svelte new file mode 100644 index 00000000..f556deef --- /dev/null +++ b/src/main/resources/templates/_charts/echarts/config/LabelColor.svelte @@ -0,0 +1,62 @@ + + + + +
    + +
    +
    + diff --git a/src/main/resources/templates/_charts/echarts/config/LabelFontSize.svelte b/src/main/resources/templates/_charts/echarts/config/LabelFontSize.svelte new file mode 100644 index 00000000..205c0904 --- /dev/null +++ b/src/main/resources/templates/_charts/echarts/config/LabelFontSize.svelte @@ -0,0 +1,22 @@ + + + +Value in pixels 'px', 'em', 'rem', '%', etc. \ No newline at end of file diff --git a/src/main/resources/templates/_charts/echarts/config/LabelFontWeight.svelte b/src/main/resources/templates/_charts/echarts/config/LabelFontWeight.svelte new file mode 100644 index 00000000..d261f8fb --- /dev/null +++ b/src/main/resources/templates/_charts/echarts/config/LabelFontWeight.svelte @@ -0,0 +1,35 @@ + + + + \ No newline at end of file diff --git a/src/main/resources/templates/_charts/echarts/config/LabelInsideColor.svelte b/src/main/resources/templates/_charts/echarts/config/LabelInsideColor.svelte new file mode 100644 index 00000000..8479e895 --- /dev/null +++ b/src/main/resources/templates/_charts/echarts/config/LabelInsideColor.svelte @@ -0,0 +1,62 @@ + + + + +
    + +
    +
    + diff --git a/src/main/resources/templates/_charts/echarts/config/LabelPosition.svelte b/src/main/resources/templates/_charts/echarts/config/LabelPosition.svelte new file mode 100644 index 00000000..73ea0478 --- /dev/null +++ b/src/main/resources/templates/_charts/echarts/config/LabelPosition.svelte @@ -0,0 +1,34 @@ + + + + \ No newline at end of file diff --git a/src/main/resources/templates/_charts/echarts/config/LabelShow.svelte b/src/main/resources/templates/_charts/echarts/config/LabelShow.svelte new file mode 100644 index 00000000..ebfbe5f4 --- /dev/null +++ b/src/main/resources/templates/_charts/echarts/config/LabelShow.svelte @@ -0,0 +1,13 @@ + + + + + Show Label + \ No newline at end of file diff --git a/src/main/resources/templates/_charts/echarts/config/OutlineBorderDistance.svelte b/src/main/resources/templates/_charts/echarts/config/OutlineBorderDistance.svelte new file mode 100644 index 00000000..16c559fa --- /dev/null +++ b/src/main/resources/templates/_charts/echarts/config/OutlineBorderDistance.svelte @@ -0,0 +1,46 @@ + + +
    + + + + + + Outline Border Distance + + + +
    + diff --git a/src/main/resources/templates/_charts/echarts/config/OutlineShow.svelte b/src/main/resources/templates/_charts/echarts/config/OutlineShow.svelte new file mode 100644 index 00000000..33c163c0 --- /dev/null +++ b/src/main/resources/templates/_charts/echarts/config/OutlineShow.svelte @@ -0,0 +1,12 @@ + + + + + Show Outline + diff --git a/src/main/resources/templates/_charts/echarts/config/OutlineitemStyleBorderColor.svelte b/src/main/resources/templates/_charts/echarts/config/OutlineitemStyleBorderColor.svelte new file mode 100644 index 00000000..a665ae26 --- /dev/null +++ b/src/main/resources/templates/_charts/echarts/config/OutlineitemStyleBorderColor.svelte @@ -0,0 +1,62 @@ + + + + +
    + +
    +
    + diff --git a/src/main/resources/templates/_charts/echarts/config/OutlineitemStyleBorderWidth.svelte b/src/main/resources/templates/_charts/echarts/config/OutlineitemStyleBorderWidth.svelte new file mode 100644 index 00000000..0b98bbf3 --- /dev/null +++ b/src/main/resources/templates/_charts/echarts/config/OutlineitemStyleBorderWidth.svelte @@ -0,0 +1,46 @@ + + +
    + + + + + + Outline Border Width + + + +
    + diff --git a/src/main/resources/templates/_charts/echarts/config/OutlineitemStyleColor.svelte b/src/main/resources/templates/_charts/echarts/config/OutlineitemStyleColor.svelte new file mode 100644 index 00000000..50e6f974 --- /dev/null +++ b/src/main/resources/templates/_charts/echarts/config/OutlineitemStyleColor.svelte @@ -0,0 +1,62 @@ + + + + +
    + +
    +
    + diff --git a/src/main/resources/templates/_charts/echarts/config/OutlineitemStyleShadowBlur.svelte b/src/main/resources/templates/_charts/echarts/config/OutlineitemStyleShadowBlur.svelte new file mode 100644 index 00000000..2a5969d9 --- /dev/null +++ b/src/main/resources/templates/_charts/echarts/config/OutlineitemStyleShadowBlur.svelte @@ -0,0 +1,45 @@ + + +
    + + + + + + Outline Shadow Blur Size + + + +
    diff --git a/src/main/resources/templates/_charts/echarts/config/OutlineitemStyleShadowColor.svelte b/src/main/resources/templates/_charts/echarts/config/OutlineitemStyleShadowColor.svelte new file mode 100644 index 00000000..5bea74d5 --- /dev/null +++ b/src/main/resources/templates/_charts/echarts/config/OutlineitemStyleShadowColor.svelte @@ -0,0 +1,62 @@ + + + + +
    + +
    +
    + \ No newline at end of file diff --git a/src/main/resources/templates/_charts/echarts/config/Period.svelte b/src/main/resources/templates/_charts/echarts/config/Period.svelte new file mode 100644 index 00000000..47089688 --- /dev/null +++ b/src/main/resources/templates/_charts/echarts/config/Period.svelte @@ -0,0 +1,22 @@ + + + +Milliseconds to move forward a wave-length or auto \ No newline at end of file diff --git a/src/main/resources/templates/_charts/echarts/config/Radius.svelte b/src/main/resources/templates/_charts/echarts/config/Radius.svelte new file mode 100644 index 00000000..4153bde8 --- /dev/null +++ b/src/main/resources/templates/_charts/echarts/config/Radius.svelte @@ -0,0 +1,22 @@ + + + +Value in pixels 'px' or as a percentage '%' \ No newline at end of file diff --git a/src/main/resources/templates/_charts/echarts/config/Shape.svelte b/src/main/resources/templates/_charts/echarts/config/Shape.svelte new file mode 100644 index 00000000..e4bcaa50 --- /dev/null +++ b/src/main/resources/templates/_charts/echarts/config/Shape.svelte @@ -0,0 +1,53 @@ + + + + \ No newline at end of file diff --git a/src/main/resources/templates/_charts/echarts/config/WaveAnimation.svelte b/src/main/resources/templates/_charts/echarts/config/WaveAnimation.svelte new file mode 100644 index 00000000..1271c086 --- /dev/null +++ b/src/main/resources/templates/_charts/echarts/config/WaveAnimation.svelte @@ -0,0 +1,13 @@ + + + + + Show Wave Animation + \ No newline at end of file diff --git a/src/main/resources/templates/_charts/echarts/config/WaveLength.svelte b/src/main/resources/templates/_charts/echarts/config/WaveLength.svelte new file mode 100644 index 00000000..54340f80 --- /dev/null +++ b/src/main/resources/templates/_charts/echarts/config/WaveLength.svelte @@ -0,0 +1,22 @@ + + + +Value in pixels 'px' or as a percentage '%' \ No newline at end of file diff --git a/src/main/resources/templates/_charts/echarts/config/echarts-liquid-fill-store.js b/src/main/resources/templates/_charts/echarts/config/echarts-liquid-fill-store.js new file mode 100644 index 00000000..6612cea6 --- /dev/null +++ b/src/main/resources/templates/_charts/echarts/config/echarts-liquid-fill-store.js @@ -0,0 +1,40 @@ +import { writable, readable } from 'svelte/store'; + +export const color = writable( '#294D99' ); +export const center = writable([ '50%', '50%' ]); +export const radius = writable('50%'); +export const amplitude = writable('8%'); +export const waveLength = writable('80%'); +export const period = writable('auto'); +export const direction = writable('right'); +export const shape = writable('roundRect'); +export const waveAnimation = writable(true); +export const animationEasing = writable('linear'); +export const animationEasingUpdate = writable('linear'); +export const animationDuration = writable(2000); +export const animationDurationUpdate = writable(1000); +export const outlineShow = writable(true); +export const outlineBorderDistance = writable(10); +export const outlineitemStyleColor = writable('red'); +export const outlineitemStyleBorderColor = writable('rgba(21,137,200,0.5)'); +export const outlineitemStyleBorderWidth = writable(6); +export const outlineitemStyleShadowBlur = writable(0); +export const outlineitemStyleShadowColor = writable('rgba(0, 0, 0, 0.25)'); +export const backgroundStyleColor = writable('#E3F7FF'); +export const backgroundStyleBorderWidth = writable(1); +export const backgroundStyleBorderColor = writable('#990'); +export const backgroundStyleItemStyleShadowBlur = writable(0.5); +export const backgroundStyleItemStyleShadowColor = writable('#090'); +export const backgroundStyleItemStyleOpacity = writable(0.5); +export const itemStyleOpacity = writable(0.7); +export const itemStyleShadowBlur = writable(0); +export const itemStyleShadowColor = writable('#000'); +export const emphasisItemStyleOpacity = writable(0.8); +export const labelShow = writable(true); +export const labelColor = writable('#000'); +export const labelInsideColor = writable('#0f0'); +export const labelFontSize = writable(12); +export const labelFontWeight = writable('bold'); +export const labelAlign = writable('center'); +export const labelBaseline = writable('middle'); +export const labelPosition = writable('inside'); diff --git a/src/main/resources/templates/_components/ReadingsList.svelte b/src/main/resources/templates/_components/ReadingsList.svelte index 0cb55c4e..1b9bce16 100644 --- a/src/main/resources/templates/_components/ReadingsList.svelte +++ b/src/main/resources/templates/_components/ReadingsList.svelte @@ -20,6 +20,10 @@ return reading.type === index; }); } + + function getReadings(type) { + return readings.filter(reading => reading.type === type.type); + } @@ -32,11 +36,9 @@ {type.desc} - {/each} - {#if readings} -
    +{#if readings} - {#each readings as reading (reading.id + '_' + reading.index)} + {#each getReadings(type) as reading (reading.id + '_' + reading.index + '_' + type.type)} @@ -48,14 +50,10 @@ {$storeTypes[reading.type].desc} - {:else} -
    Loading...
    {/each}     -
    - {:else} -
    - {/if} + {/if} + {/each}
    diff --git a/src/main/resources/templates/_components/_scss/_logo.scss b/src/main/resources/templates/_components/_scss/_logo.scss index 8f5e88bc..f1d6cf28 100644 --- a/src/main/resources/templates/_components/_scss/_logo.scss +++ b/src/main/resources/templates/_components/_scss/_logo.scss @@ -7,9 +7,9 @@ } .logo::before { + content: "\f126"; position: absolute; font-family: 'Font Awesome 5 Pro'; - content: "\f126"; color: var(--theme-primary); transform: rotate(130deg); font-weight: 400; diff --git a/src/main/resources/templates/_routes/_scss/_views.scss b/src/main/resources/templates/_routes/_scss/_views.scss index cb4acd19..9afac860 100644 --- a/src/main/resources/templates/_routes/_scss/_views.scss +++ b/src/main/resources/templates/_routes/_scss/_views.scss @@ -1,23 +1,19 @@ -.content { - width: 100%; - height: 100%; - color: black; - display: flex; - justify-content: center; - align-items: center; - font-size: large; -} .hide { display: none; } -.margin-b { - margin-bottom: 10px; +.svlt-grid-item { + border: 1px solid rgba(187, 186, 186, 0.753); } -.wrapper { - position: absolute; - display: inline-flex; - width: 100%; + +.svlt-grid-shadow { + background: rgba(228, 226, 226, 0.863) !important; + border: 1px dashed rgba(68, 68, 68, 0.514) !important; + transition: transform 0.2s; +} + +.svlt-grid-transition > svlt-grid-item { + transition: transform 0.2s; } .toolbar { @@ -111,16 +107,3 @@ } } -// .card-container { -// display: inline-flex; -// justify-content: center; -// align-items: center; -// min-height: 500px; -// min-width: 380px; -// background-color:var(--theme-on-error); -// margin-right: 20px; -// margin-bottom: 20px; -// } -// .card-container.short { -// min-height: 200px; -// } diff --git a/src/main/resources/templates/_routes/index.svelte b/src/main/resources/templates/_routes/index.svelte index a9279295..aae914df 100644 --- a/src/main/resources/templates/_routes/index.svelte +++ b/src/main/resources/templates/_routes/index.svelte @@ -46,4 +46,4 @@
    - + diff --git a/src/main/resources/templates/_routes/settings copy.svelte b/src/main/resources/templates/_routes/settings copy.svelte new file mode 100644 index 00000000..9646d9f7 --- /dev/null +++ b/src/main/resources/templates/_routes/settings copy.svelte @@ -0,0 +1,113 @@ + + + + +
    +
    + + + + Label + + + Helper Text + + 
    Value: {valueManualC}
    +
    +
    +
    + + Helper Text + + 
    Value: {valueStandardA}
    +
    + +
    + + + + + diff --git a/src/main/resources/templates/_routes/settings.svelte b/src/main/resources/templates/_routes/settings.svelte index 0386f931..f7fd3650 100644 --- a/src/main/resources/templates/_routes/settings.svelte +++ b/src/main/resources/templates/_routes/settings.svelte @@ -1,8 +1,16 @@ - +
    +
    + + + + Label + + + Helper Text + + 
    Value: {valueManualC}
    +
    +
    +
    + + Helper Text + + 
    Value: {valueStandardA}
    +
    + +
    + +

    Current Value : {value}

    - +
    +
    - +
    - -
    + +
    {#if items !== undefined} @@ -208,10 +194,6 @@
    - - - -
    Remove
    - + Minty Sensor Server @@ -34,7 +34,7 @@ +