diff options
| author | Jakob Stendahl <jakob.stendahl@outlook.com> | 2022-04-28 13:08:53 +0200 |
|---|---|---|
| committer | Jakob Stendahl <jakob.stendahl@outlook.com> | 2022-04-28 13:08:53 +0200 |
| commit | c863afe68005e4b54c0b5d4a9cf917b0e35e6f84 (patch) | |
| tree | afb79059dd4ea4729dd2f2a2a1322f352c8e874d /src/components/Basic | |
| parent | 5dc48738e6f2800fde963a7581e200bd4de18463 (diff) | |
| download | Aurora-data-c863afe68005e4b54c0b5d4a9cf917b0e35e6f84.tar.gz Aurora-data-c863afe68005e4b54c0b5d4a9cf917b0e35e6f84.zip | |
Add pretty bar chart
Diffstat (limited to 'src/components/Basic')
| -rw-r--r-- | src/components/Basic/Bar.svelte | 35 |
1 files changed, 21 insertions, 14 deletions
diff --git a/src/components/Basic/Bar.svelte b/src/components/Basic/Bar.svelte index 7b17c3e..88d541e 100644 --- a/src/components/Basic/Bar.svelte +++ b/src/components/Basic/Bar.svelte @@ -1,6 +1,6 @@ <script lang="ts"> - export let percentage = 0.7; - export let vertical = false; + export let percentage; + export let value; </script> <style> @@ -10,7 +10,7 @@ .wrapper { position: relative; - background-color: #c6c6c6; + /* background-color: #c6c6c6; */ border-radius:15px; width: 100%; height: 100%; @@ -22,27 +22,34 @@ border-radius: 15px; height: 100%; width: 100%; - top: calc(100% - var(--progress)); + left: calc(100% - var(--progress)); } .bar { position: absolute; height: 100%; width: 100%; - bottom: calc(100% - var(--progress)); + right: calc(100% - var(--progress)); overflow: hidden; - background: linear-gradient(0deg, - rgba(217,217,217,1) 0%, - rgba(164,255,177,1) 70%, - rgba(255,136,240,1) 100%); + background: linear-gradient(90deg, + rgba(255, 42,228,1) 0%, + rgba(164,255,177,1) 60%, + rgba(214,255,241,1) 85%, + rgba(255,255,255,1) 100%); border-radius: 15px; } + + .value { + position: absolute; + right: 0.1rem; + top: 0; + font-size: 1.5rem; + } </style> -<div> - <div class="wrapper" class:vertical style="--progress: {percentage*100}%"> - <div class="bar-wrapper"> - <div class="bar"></div> - </div> +<div class="wrapper" style="--progress: {percentage*100}%"> + <div class="bar-wrapper"> + <div class="bar"></div> </div> + <span class="value">{value}</span> </div> |