Chart Not Re-Rendering

[ananduremanan]

Hi, I'm new to svelte and I'm using flowbite Chart to show some data which is fetched from an API. When re-fetching the data all other UI elements are updating based on the fetched data, but Chart require to refresh the page to re-render. Here are what I did so far.

Navbar.svelte

<script lang="ts">
	import { Search, Button } from 'flowbite-svelte';
	import { SearchOutline } from 'flowbite-svelte-icons';
	import { createEventDispatcher } from 'svelte';

	let searchInput: string = '';
	const dispatch = createEventDispatcher();
	let autoSearchArray: any[];

	const SearchHandler = () => {
		if (searchInput != '') {
			localStorage.setItem('user_loc', JSON.stringify({ default_loc: searchInput }));
			dispatch('loc_set', { location: searchInput }); // This is intended for fetching the data again
		}
	};

	const handleSearchInput = async () => {
		if (searchInput != '') {
			try {
				const res = await fetch(`${import.meta.env.VITE_WEATHER_API_SEARCH}${searchInput}&aqi=no`);
				const data = await res.json();
				autoSearchArray = data;
			} catch (error) {
				console.error(error);
			}
		}
	};
</script>

<nav class="flex gap-2">
	<div class="ml-auto relative">
		<Search
			size="sm"
			class="w-30 self-end bg-white"
			bind:value={searchInput}
			on:input={handleSearchInput}
		/>
		{#if autoSearchArray && autoSearchArray.length > 0}
			<div
				class="absolute left-0 mt-1 w-full bg-white border border-gray-300 rounded shadow-lg z-10"
			>
				{#each autoSearchArray as locationItem}
					<button
						class="px-4 py-2 border-b border-gray-200 hover:bg-orange-400 w-full"
						on:click={() => {
							searchInput = locationItem.name;
							autoSearchArray = [];
						}}
					>
						{locationItem.name}, {locationItem.country}
					</button>
				{/each}
			</div>
		{/if}
	</div>
	<Button class="p-1 bg-white border text-black" on:click={SearchHandler}>
		<SearchOutline />
	</Button>
</nav>

+layout.svelte

<script lang="ts">
	export const prerender = true;
	export const ssr = false;
	import Navbar from '$lib/NavBar.svelte';
	import '../app.css';
	import Dashboard from './Dashboard.svelte';
	import { onMount } from 'svelte';
	import { chartOptions } from '$lib';

	let weather_details: any;
	let weather_data: any;
	let forecast: any;
	let is_Fetching: boolean = false;

	const getDay = (dateString: string) => {
		const dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
		const date = new Date(dateString);
		return dayNames[date.getDay()];
	};

	const getLocation = () => {
		const userLoc = localStorage.getItem('user_loc') || localStorage.getItem('default');
		return userLoc ? JSON.parse(userLoc).default_loc : null;
	};

	const getWeather = async (location: any) => {
		try {
			is_Fetching = true;
			const res = await fetch(`${import.meta.env.VITE_WEATHER_API}${location}&aqi=no`);
			return await res.json();
		} catch (error) {
			console.error(error);
			return null;
		} finally {
			is_Fetching = false;
		}
	};

	const fetchWeatherDetails = async (location: string) => {
		localStorage.setItem('default', JSON.stringify({ default_loc: 'kochi' }));
		weather_details = await getWeather(location);

		forecast = {
			day_overall: weather_details.forecast.forecastday[0].day
		};

		weather_data = {
			day: getDay(weather_details.location.localtime),
			date: weather_details.location.localtime.slice(0, 10),
			location: weather_details.location.name,
			temperature: weather_details.current.temp_c,
			condition: weather_details.current.condition.text,
			last_updated: weather_details.current.last_updated.slice(0, 10),
			is_day: weather_details.current.is_day,
			humidity: weather_details.current.humidity,
			wind: weather_details.current.wind_kph,
			icon: weather_details.current.condition.icon,
			forecastChartOptions: chartOptions(weather_details.forecast.forecastday[0].hour)
		};
	};

	onMount(() => {
		const location = getLocation();
		fetchWeatherDetails(location);
	});

	const handleLocationSet = (event: any) => {
		fetchWeatherDetails(event.detail.location);
	};
</script>

{#if weather_data}
	<main
		class={`${weather_data.is_day === 1 ? 'bg-gradient-to-r from-white to-yellow-100' : 'bg-gradient-to-r from-black to-blue-900'} p-4 h-screen`}
	>
		<Navbar on:loc_set={handleLocationSet} />
		<Dashboard {weather_data} {is_Fetching} {forecast} />
	</main>
{/if}

Dashboard.svelte

<script lang="ts">
	export let weather_data: any;
	export let is_Fetching: boolean;
	export let forecast: any;

	import { Skeleton, Chart, Indicator } from 'flowbite-svelte';

	const check_bg = (time: any) => {
		let background_img = '';
		if (time === 1) {
			background_img = '/images/sunny.svg';
		} else {
			background_img = 'images/night.svg';
		}
		return background_img;
	};
</script>

<section>
	{#if weather_data}
		<div class="flex flex-col md:flex-row gap-4 w-full mt-8">
			<div
				class="h-96 bg-cover bg-no-repeat p-10 rounded-3xl md:w-3/5 shadow-lg"
				style="background-image: url({check_bg(weather_data && weather_data.is_day)})"
			>
				{#if is_Fetching}
					<Skeleton />
				{:else if weather_data}
					<div class={weather_data.is_day ? 'text-black' : 'text-white'}>
						<div class="text-xl">{weather_data.day}</div>
						<div class="text-sm mt-2">
							{weather_data.date}, {weather_data.location}
						</div>
						<div class="text-8xl mt-8">{weather_data.temperature}º</div>
						<div class="flex">
							<img src={weather_data.icon} alt="" />
							<div class="mt-4 text-sm text-gray-400">
								{weather_data.condition}, last updated: {weather_data.last_updated}
								{#if forecast}
									<div>Chance of Rain: {forecast.day_overall.daily_chance_of_rain} %</div>
								{/if}
							</div>
						</div>
					</div>
				{/if}
			</div>

			<div
				class="relative h-96 bg-cover bg-no-repeat p-6 rounded-3xl md:w-2/5 shadow-lg"
				style="background-image: url({check_bg(weather_data && weather_data.is_day)})"
			>
				{#if is_Fetching}
					<Skeleton class="w-full" />
				{:else if weather_data}
					<Chart options={weather_data.forecastChartOptions} class="w-full -mt-8" />
					<div class="absolute top-6 right-16">
						<p>Forecast</p>
						<div class="text-xs flex items-center gap-1">
							<Indicator color="red" size="xs" />Humidity: {weather_data.humidity}
						</div>
						<div class="text-xs flex items-center gap-1">
							<Indicator color="blue" size="xs" />Wind: {weather_data.wind} Kph
						</div>
					</div>
				{/if}
			</div>
		</div>
	{/if}
</section>

ChartOptions

export const chartOptions = (forecastArray: any[]) => {
	const hoursToDisplay = [6, 11, 14, 17, 20, 23];

	const filteredForecast = forecastArray.filter((entry: any) => {
		const hour = new Date(entry.time).getHours();
		return hoursToDisplay.includes(hour);
	});
	let options = {
		chart: {
			height: '400px',
			maxWidth: '100%',
			type: 'area',
			fontFamily: 'Inter, sans-serif',
			dropShadow: {
				enabled: false
			},
			toolbar: {
				show: false
			}
		},
		tooltip: {
			enabled: true,
			x: {
				show: false
			}
		},
		fill: {
			type: 'gradient',
			gradient: {
				opacityFrom: 0.55,
				opacityTo: 0,
				shade: '#1C64F2',
				gradientToColors: ['#1C64F2']
			}
		},
		dataLabels: {
			enabled: true
		},
		stroke: {
			width: 4
		},
		grid: {
			show: false,
			strokeDashArray: 4,
			padding: {
				left: 0,
				right: 0,
				top: 0
			}
		},
		series: [
			{
				name: 'Temprature',
				data: filteredForecast.map((entry: any) => entry.temp_c),
				color: '#1A56DB'
			}
		],
		xaxis: {
			categories: filteredForecast.map((entry: any) => new Date(entry.time).getHours()),
			labels: {
				show: true
			},
			axisBorder: {
				show: true
			},
			axisTicks: {
				show: true
			}
		},
		yaxis: {
			show: true
		}
	};

	return options;
};