Merge pull request #1322 from evidence-dev/fix-chart-loading

Add SSR loading to all ECharts components
evidence-dev · Nov 30, 2023 · 969c8de · 969c8de
2 parents ffa649e + c7af488
commit 969c8de
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 39 deletions.
diff --git a/.changeset/real-poems-study.md b/.changeset/real-poems-study.md
@@ -0,0 +1,5 @@
+---
+'@evidence-dev/core-components': patch
+---
+
+Add SSR loading to all charts
diff --git a/packages/core-components/src/lib/unsorted/ui/ChartLoading.svelte b/packages/core-components/src/lib/unsorted/ui/ChartLoading.svelte
@@ -1,7 +1,3 @@
-<script context="module">
-	export const evidenceInclude = true;
-</script>
-
 <script>
 	import { fade } from 'svelte/transition';
 

diff --git a/packages/core-components/src/lib/unsorted/viz/Chart.svelte b/packages/core-components/src/lib/unsorted/viz/Chart.svelte
@@ -3,7 +3,6 @@
 </script>
 
 <script>
-	import { browser } from '$app/environment';
 	import { writable } from 'svelte/store';
 	import { setContext } from 'svelte';
 	import { propKey, configKey, strictBuild } from './context';
@@ -14,7 +13,6 @@
 	$: setContext(configKey, config);
 
 	import ECharts from './ECharts.svelte';
-	import ChartLoading from '../ui/ChartLoading.svelte';
 	import getColumnSummary from '@evidence-dev/component-utilities/getColumnSummary';
 	import getDistinctValues from '@evidence-dev/component-utilities/getDistinctValues';
 	import getDistinctCount from '@evidence-dev/component-utilities/getDistinctCount';
@@ -1006,13 +1004,8 @@
 </script>
 
 {#if !error}
-	{#if !browser}
-		<slot />
-		<ChartLoading {height} />
-	{:else}
-		<slot />
-		<ECharts config={$config} {height} {width} {data} {showAllXAxisLabels} {swapXY} />
-	{/if}
+	<slot />
+	<ECharts config={$config} {height} {width} {data} {showAllXAxisLabels} {swapXY} />
 {:else}
 	<ErrorChart {error} {chartType} />
 {/if}
diff --git a/packages/core-components/src/lib/unsorted/viz/ECharts.svelte b/packages/core-components/src/lib/unsorted/viz/ECharts.svelte
@@ -3,10 +3,12 @@
 </script>
 
 <script>
+	import { browser } from '$app/environment';
 	import echarts from '@evidence-dev/component-utilities/echarts';
 	import echartsCanvasDownload from '@evidence-dev/component-utilities/echartsCanvasDownload';
 	import EchartsCopyTarget from './EchartsCopyTarget.svelte';
 	import DownloadData from '../ui/DownloadData.svelte';
+	import ChartLoading from '../ui/ChartLoading.svelte';
 	import { flush } from 'svelte/internal';
 	import { createEventDispatcher } from 'svelte';
 
@@ -45,19 +47,23 @@
 	on:mouseleave={() => (hovering = false)}
 >
 	{#if !printing}
-		<div
-			class="chart"
-			style="
-            height: {height};
-            width: {width};
-            margin-left: 0;
-            margin-top: 15px;
-            margin-bottom: 10px;
-            overflow: visible;
-            display: {copying ? 'none' : 'inherit'}
-        "
-			use:echarts={{ ...config, ...$$restProps, dispatch }}
-		/>
+		{#if !browser}
+			<ChartLoading {height} />
+		{:else}
+			<div
+				class="chart"
+				style="
+				height: {height};
+				width: {width};
+				margin-left: 0;
+				margin-top: 15px;
+				margin-bottom: 10px;
+				overflow: visible;
+				display: {copying ? 'none' : 'inherit'}
+			"
+				use:echarts={{ ...config, ...$$restProps, dispatch }}
+			/>
+		{/if}
 	{/if}
 
 	<EchartsCopyTarget {config} {height} {width} {copying} {printing} />

diff --git a/packages/core-components/src/lib/unsorted/viz/EChartsMap.svelte b/packages/core-components/src/lib/unsorted/viz/EChartsMap.svelte
@@ -3,10 +3,12 @@
 </script>
 
 <script>
+	import { browser } from '$app/environment';
 	import echartsMap from '@evidence-dev/component-utilities/echartsMap';
 	import echartsCanvasDownload from '@evidence-dev/component-utilities/echartsCanvasDownload';
 	import EchartsCopyTarget from './EchartsCopyTarget.svelte';
 	import DownloadData from '../ui/DownloadData.svelte';
+	import ChartLoading from '../ui/ChartLoading.svelte';
 	import { flush } from 'svelte/internal';
 
 	export let config = undefined;
@@ -44,19 +46,23 @@
 	on:mouseleave={() => (hovering = false)}
 >
 	{#if !printing}
-		<div
-			class="chart"
-			style="
-            height: {height};
-            width: {width};
-            margin-left: 0;
-            margin-top: 15px;
-            margin-bottom: 10px;
-            overflow: visible;
-            display: {copying ? 'none' : 'inherit'}
-        "
-			use:echartsMap={{ config, hasLink }}
-		/>
+		{#if !browser}
+			<ChartLoading {height} />
+		{:else}
+			<div
+				class="chart"
+				style="
+				height: {height};
+				width: {width};
+				margin-left: 0;
+				margin-top: 15px;
+				margin-bottom: 10px;
+				overflow: visible;
+				display: {copying ? 'none' : 'inherit'}
+			"
+				use:echartsMap={{ config, hasLink }}
+			/>
+		{/if}
 	{/if}
 
 	<EchartsCopyTarget {config} {height} {width} {copying} {printing} />