added error handling for failed build query (bad metrics), cleaned up…

… store logic, added background theme styling timeseries panel chart

packages/ui/core-components/src/lib/molecules/timeseries-panel/MetricTable.svelte

@@ -7,10 +7,7 @@
 	export let selectedMetric;
 	export let data;
 	export let fmt = 'num0';
-	export let store
-
-	let metricsStore = $store.metricsStore
-
+	export let metricsStore;
 
 	const [send, receive] = crossfade({
 		duration: 200,

packages/ui/core-components/src/lib/molecules/timeseries-panel/TimeSeriesPanel.stories.svelte

@@ -132,7 +132,11 @@
 		metrics={['arr', 'wau', 'cloud_wau', 'week_4_retention', 'gh_stars']}
 		x="date"
 	>
-		<Metric metric="kyle wong" label="WAU" link="http://www.google.com" />
+		<Metric
+			metric="count(*)-100*power(1.002,row_number() OVER ())"
+			label="WAU"
+			link="http://www.google.com"
+		/>
 		<Metric
 			metric="greatest(100, 1000 * power(0.995, row_number() OVER ()))"
 			label="ARR"
@@ -156,41 +160,32 @@
 	</TimeSeriesPanel>
 </Story>
 
-<!-- <Story name="TEST">
-	{@const data = Query.create(
-		`SELECT departure_date::date as date, fare from flights LIMIT 1000`,
-		query
-	)}
-
-	<DataTable {data} />
+<Story name="Error: Bad Metric">
 	<TimeSeriesPanel
 		data={Query.create(queryString, query, { disableCache: true })}
 		metrics={['arr', 'wau', 'cloud_wau', 'week_4_retention', 'gh_stars']}
+		x="date"
 	>
+		<Metric metric="**Breaking Metric**" label="WAU" link="http://www.google.com" />
 		<Metric
-			metric="greatest(200,count(*)*power(1.001,row_number() OVER ()))"
+			metric="greatest(100, 1000 * power(0.995, row_number() OVER ()))"
 			label="ARR"
 			link="http://www.google.com"
 		/>
 		<Metric
-			metric="greatest(200,count(*)*power(1.001,row_number() OVER ()))"
-			label="WAU"
-			link="http://www.google.com"
-		/>
-		<Metric
-			metric="greatest(200,count(*)*power(1.001,row_number() OVER ()))"
+			metric="count(*)*power(1.004,row_number() OVER ())"
 			label="Cloud WAU"
 			link="http://www.google.com"
 		/>
 		<Metric
-			metric="greatest(200,count(*)*power(1.001,row_number() OVER ()))"
+			metric="count(*)-100*power(1.001,row_number() OVER ())"
 			label="Week 4 Retention"
 			link="http://www.google.com"
 		/>
 		<Metric
-			metric="greatest(200,count(*)*power(1.001,row_number() OVER ()))"
+			metric="count(*)*power(1.009,row_number() OVER ())"
 			label="GH Stars"
 			link="http://www.google.com"
 		/>
 	</TimeSeriesPanel>
-</Story> -->
+</Story>

packages/ui/core-components/src/lib/molecules/timeseries-panel/TimeSeriesPanelChart.svelte

@@ -173,7 +173,7 @@
 
 <div class="grid grid-cols-1 grid-rows-6 gap-y-1 relative">
 	<div
-		class="print:hidden absolute inset-0 h-full w-full bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] [background-size:12px_12px] [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_60%,transparent_100%)]"
+		class="print:hidden absolute inset-0 h-full w-full bg-[radial-gradient(hsl(var(--twc-base-300))_1px,transparent_1px)] [background-size:12px_12px] [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_60%,transparent_100%)]"
 	/>
 	<div class="row-span-2 relative">
 		<div class="font-bold text-base-heading">{selectedMetric}</div>

packages/ui/core-components/src/lib/molecules/timeseries-panel/_TimeSeriesPanel.svelte

@@ -7,33 +7,39 @@
 	import TimeSeriesPanelChart from './TimeSeriesPanelChart.svelte';
 	import { getContext, onMount } from 'svelte';
 	import { Skeleton } from '../../atoms/skeletons';
+	import ErrorChart from '../../unsorted/viz/core/ErrorChart.svelte';
 
 	export let data = undefined;
 	export let x = undefined;
 	export let fmt = undefined;
 	export let defaultTimeRange = undefined;
 	export let selectedMetric;
-	export let metricsStore = [];
 
 	const store = getContext('store');
 
 	$: store.updateData(data, x);
 
-	$: if ($store.metricsStore.length > 0 && !selectedMetric) {
-		selectedMetric = $store.metricsStore[0].label;
-		
+	$: if ($store.value.metricsStore.length > 0 && !selectedMetric) {
+		selectedMetric = $store.value.metricsStore[0].label;
 	}
-
 </script>
 
-{#if $store.data.length > 0 && $store.metricsStore.length > 0}
+{#if $store.value.data.length > 0 && $store.value.metricsStore.length > 0}
 	<div class="rounded-xl p-3 grid lg:grid-cols-2 md:grid-cols-1 gap-6 alert mb-4">
-		<MetricTable bind:selectedMetric data={$store.data} {fmt} {store}/>
-		<TimeSeriesPanelChart data={$store.data} {selectedMetric} {store} {defaultTimeRange} />
+		<MetricTable
+			bind:selectedMetric
+			data={$store.value.data}
+			{fmt}
+			metricsStore={$store.value.metricsStore}
+		/>
+		<TimeSeriesPanelChart data={$store.value.data} {selectedMetric} {store} {defaultTimeRange} />
+	</div>
+{:else if $store.error}
+	<div class="w-full h-64">
+		<ErrorChart title={'Time Series Panel'} error={$store.error} />
 	</div>
 {:else}
 	<div class="w-full h-64">
 		<Skeleton />
-
 	</div>
 {/if}

packages/ui/core-components/src/lib/molecules/timeseries-panel/timeSeriesStore.js

@@ -16,8 +16,11 @@ export class TimeSeriesStore {
 	#lastDate = new Date();
 
 	#filteredData = [];
+
 	#value = { data: this.#data, metricsStore: this.#metricStore };
 
+	#error = undefined;
+
 	//runs whenever data changes
 	updateData = async (data, x) => {
 		//need to fix update data re-running probably due to metrics causing a update each time it get updated
@@ -61,12 +64,11 @@ export class TimeSeriesStore {
 			// Try to create and execute the query
 			const queryResult = Query.create(newQueryBuild.toString(), query);
 
-			if (queryResult.error) {
-				throw new Error('Error creating query: ' + queryResult.error);
-			}
-
 			this.#data = await queryResult.fetch();
 
+			if (queryResult.error) {
+				this.#error = queryResult.error;
+			}
 			// Set the last date based on the fetched data
 			this.#lastDate =
 				this.#data.length > 0
@@ -142,7 +144,7 @@ export class TimeSeriesStore {
 	 */
 	subscribe = (fn) => {
 		this.#subscribers.add(fn);
-		fn(this.#value);
+		fn({ value: this.#value, error: this.#error });
 		return () => this.#subscribers.delete(fn);
 	};
 
@@ -153,7 +155,7 @@ export class TimeSeriesStore {
 	publish = () => {
 		if (this.#publishIdx++ > 100000) throw new Error('Query published too many times.');
 
-		this.#subscribers.forEach((fn) => fn(this.#value));
+		this.#subscribers.forEach((fn) => fn({ value: this.#value, error: this.#error }));
 	};
 	//////////////////////////////////////
 	/// </ Implement Store Contract /> ///