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/Forecast/ThreeDayForecast | |
| parent | 5dc48738e6f2800fde963a7581e200bd4de18463 (diff) | |
| download | Aurora-data-c863afe68005e4b54c0b5d4a9cf917b0e35e6f84.tar.gz Aurora-data-c863afe68005e4b54c0b5d4a9cf917b0e35e6f84.zip | |
Add pretty bar chart
Diffstat (limited to 'src/components/Forecast/ThreeDayForecast')
| -rw-r--r-- | src/components/Forecast/ThreeDayForecast/PredictionItem.svelte | 11 |
1 files changed, 10 insertions, 1 deletions
diff --git a/src/components/Forecast/ThreeDayForecast/PredictionItem.svelte b/src/components/Forecast/ThreeDayForecast/PredictionItem.svelte index 0d4a94d..81f527b 100644 --- a/src/components/Forecast/ThreeDayForecast/PredictionItem.svelte +++ b/src/components/Forecast/ThreeDayForecast/PredictionItem.svelte @@ -1,5 +1,6 @@ <script> import Chip from "../../Basic/Chip.svelte"; + import Bar from "../../Basic/Bar.svelte"; export let prediction; @@ -71,6 +72,12 @@ width: 1rem; text-align: center; } + .KP { + flex-grow: 1; + margin-right: 1rem; + font-size: 1.7rem; + height: 2.2rem; + } </style> @@ -84,8 +91,10 @@ <Chip>{prediction.observed}</Chip> </div> {/if} + <div class="KP"> + <Bar percentage={kp/9} value={kp} /> + </div> <div class="data"> - <h2>{kp}</h2> {#if hasNOMETData} <div> <p><i class="fas fa-thermometer-half"></i> {Math.round(temp)}°C</p> |