Merge pull request #1366 from evidence-dev/echarts-options

Add echarts custom options
evidence-dev · Dec 1, 2023 · 9bbb2d5 · 9bbb2d5
2 parents 1e1e7e3 + 9da524d
commit 9bbb2d5
Show file tree

Hide file tree

Showing 30 changed files with 359 additions and 25 deletions.
diff --git a/packages/component-utilities/src/echarts.js b/packages/component-utilities/src/echarts.js
@@ -24,6 +24,11 @@ export default (node, option) => {
 	const chart = init(node, 'evidence-light', { renderer: useSvg ? 'svg' : 'canvas' });
 
 	chart.setOption(option);
+	// Check if echartsOptions are provided and apply them
+	const prevOption = chart.getOption();
+	if (prevOption.echartsOptions) {
+		chart.setOption(prevOption.echartsOptions);
+	}
 
 	const dispatch = option.dispatch;
 	chart.on('click', function (params) {
@@ -85,7 +90,12 @@ export default (node, option) => {
 
 	return {
 		update(option) {
-			chart.setOption(option, true, true);
+			chart.setOption(option);
+			// Check if echartsOptions are provided and apply them
+			const prevOption = chart.getOption();
+			if (prevOption.echartsOptions) {
+				chart.setOption(prevOption.echartsOptions);
+			}
 			updateLabelWidths();
 		},
 		destroy() {

diff --git a/packages/component-utilities/src/echartsCanvasDownload.js b/packages/component-utilities/src/echartsCanvasDownload.js
@@ -10,6 +10,11 @@ export default (node, option) => {
 	option.animation = false;
 
 	chart.setOption(option);
+	// Check if echartsOptions are provided and apply them
+	const prevOption = chart.getOption();
+	if (prevOption.echartsOptions) {
+		chart.setOption(prevOption.echartsOptions);
+	}
 
 	let src = chart.getConnectedDataURL({
 		type: 'png',

diff --git a/packages/component-utilities/src/echartsCopy.js b/packages/component-utilities/src/echartsCopy.js
@@ -4,12 +4,16 @@ import { evidenceThemeLight } from './echartsThemes';
 export default (node, option) => {
 	registerTheme('evidence-light', evidenceThemeLight);
 
-	const { config, ratio } = option;
+	const { config, ratio, echartsOptions } = option;
 
 	const chart = init(node, 'evidence-light', { renderer: 'canvas' });
 	config.animation = false; // disable animation
 
 	chart.setOption(config);
+	// Check if echartsOptions are provided and apply them
+	if (echartsOptions) {
+		chart.setOption(echartsOptions);
+	}
 
 	let src = chart.getConnectedDataURL({
 		type: 'jpeg',

diff --git a/packages/component-utilities/src/echartsMap.js b/packages/component-utilities/src/echartsMap.js
@@ -9,6 +9,10 @@ export default (node, option) => {
 	const chart = init(node, 'none', { renderer: 'svg' });
 
 	chart.setOption(option.config);
+	// Check if echartsOptions are provided and apply them
+	if (option.echartsOptions) {
+		chart.setOption(option.echartsOptions);
+	}
 
 	let resizeObserver;
 	const containerElement = document.querySelector('div.content > article');
@@ -38,6 +42,10 @@ export default (node, option) => {
 	return {
 		update(option) {
 			chart.setOption(option.config, true, true);
+			// Check if echartsOptions are provided and apply them
+			if (option.echartsOptions) {
+				chart.setOption(option.echartsOptions);
+			}
 		},
 		destroy() {
 			if (resizeObserver) {

diff --git a/packages/core-components/src/lib/unsorted/viz/AreaChart.svelte b/packages/core-components/src/lib/unsorted/viz/AreaChart.svelte
@@ -63,6 +63,9 @@
 	export let labelColor = undefined;
 	export let labelFmt = undefined;
 	export let showAllLabels = undefined;
+
+	export let echartsOptions = undefined;
+	export let printEchartsConfig = false;
 </script>
 
 <Chart
@@ -96,6 +99,8 @@
 	{stacked100}
 	{chartAreaHeight}
 	{colorPalette}
+	{echartsOptions}
+	{printEchartsConfig}
 >
 	<Area
 		{line}

diff --git a/packages/core-components/src/lib/unsorted/viz/BarChart.svelte b/packages/core-components/src/lib/unsorted/viz/BarChart.svelte
@@ -82,7 +82,8 @@
 	export let stackTotalLabel = undefined;
 	export let showAllLabels = undefined;
 
-	export let options = undefined;
+	export let echartsOptions = undefined;
+	export let printEchartsConfig = false;
 </script>
 
 <Chart
@@ -118,6 +119,8 @@
 	{chartAreaHeight}
 	{showAllXAxisLabels}
 	{colorPalette}
+	{echartsOptions}
+	{printEchartsConfig}
 >
 	<Bar
 		{type}
@@ -132,7 +135,6 @@
 		{labelFmt}
 		{stackTotalLabel}
 		{showAllLabels}
-		{options}
 	/>
 	<slot />
 </Chart>
diff --git a/packages/core-components/src/lib/unsorted/viz/BoxPlot.svelte b/packages/core-components/src/lib/unsorted/viz/BoxPlot.svelte
@@ -42,6 +42,9 @@
 	export let yMax = undefined;
 	export let swapXY = false;
 
+	export let echartsOptions = undefined;
+	export let printEchartsConfig = false;
+
 	$: {
 		if (swapXY === 'true' || swapXY === true) {
 			swapXY = true;
@@ -89,6 +92,8 @@
 	{title}
 	{subtitle}
 	chartType="Box Plot"
+	{echartsOptions}
+	{printEchartsConfig}
 >
 	<Box {boxPlotData} {color} {min} {max} />
 	<slot />

diff --git a/packages/core-components/src/lib/unsorted/viz/BubbleChart.svelte b/packages/core-components/src/lib/unsorted/viz/BubbleChart.svelte
@@ -53,6 +53,8 @@
 	let useTooltip = true;
 
 	export let colorPalette = undefined;
+	export let echartsOptions = undefined;
+	export let printEchartsConfig = false;
 </script>
 
 <Chart
@@ -88,6 +90,8 @@
 	{sort}
 	{chartAreaHeight}
 	{colorPalette}
+	{echartsOptions}
+	{printEchartsConfig}
 >
 	<Bubble {shape} {fillColor} {opacity} {outlineColor} {outlineWidth} {scaleTo} {useTooltip} />
 	<slot />

diff --git a/packages/core-components/src/lib/unsorted/viz/Chart.svelte b/packages/core-components/src/lib/unsorted/viz/Chart.svelte
@@ -44,6 +44,9 @@
 
 	export let showAllXAxisLabels = false;
 
+	export let printEchartsConfig = false; // helper for custom chart development
+	printEchartsConfig = printEchartsConfig === 'true' || printEchartsConfig === true;
+
 	// This should be reworked to fit better with svelte's reactivity.
 
 	// We rewrite the x and y values with fallbacks if they aren't present
@@ -135,7 +138,7 @@
 	export let legend = undefined;
 
 	// Additional Config Options:
-	export let options = undefined; // additional ECharts config object that will append to the config generated by our API
+	export let echartsOptions = undefined; // additional ECharts config object that will append to the config generated by our API
 
 	export let stackType = undefined; // used in BarChart (stacked, grouped) and AreaChart (stacked)
 	export let stacked100 = false;
@@ -980,10 +983,6 @@
 				color: colorPalette
 			};
 
-			if (options) {
-				chartConfig = { ...chartConfig, ...options };
-			}
-
 			config.update(() => {
 				return chartConfig;
 			});
@@ -999,13 +998,21 @@
 			});
 		}
 	}
-
 	$: data;
 </script>
 
 {#if !error}
 	<slot />
-	<ECharts config={$config} {height} {width} {data} {showAllXAxisLabels} {swapXY} />
+	<ECharts
+		config={$config}
+		{height}
+		{width}
+		{data}
+		{showAllXAxisLabels}
+		{swapXY}
+		{echartsOptions}
+		{printEchartsConfig}
+	/>
 {: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
@@ -8,6 +8,7 @@
 	import echartsCanvasDownload from '@evidence-dev/component-utilities/echartsCanvasDownload';
 	import EchartsCopyTarget from './EchartsCopyTarget.svelte';
 	import DownloadData from '../ui/DownloadData.svelte';
+	import CodeBlock from '../ui/CodeBlock.svelte';
 	import ChartLoading from '../ui/ChartLoading.svelte';
 	import { flush } from 'svelte/internal';
 	import { createEventDispatcher } from 'svelte';
@@ -19,6 +20,9 @@
 
 	export let data;
 
+	export let echartsOptions = undefined;
+	export let printEchartsConfig; // helper for custom chart development
+
 	const dispatch = createEventDispatcher();
 
 	let downloadChart = false;
@@ -61,12 +65,12 @@
 				overflow: visible;
 				display: {copying ? 'none' : 'inherit'}
 			"
-				use:echarts={{ ...config, ...$$restProps, dispatch }}
+				use:echarts={{ ...config, ...$$restProps, echartsOptions, dispatch }}
 			/>
 		{/if}
 	{/if}
 
-	<EchartsCopyTarget {config} {height} {width} {copying} {printing} />
+	<EchartsCopyTarget {config} {height} {width} {copying} {printing} {echartsOptions} />
 
 	<div class="chart-footer">
 		<DownloadData
@@ -99,6 +103,12 @@
 			<DownloadData text="Download data" {data} class="download-button" display={hovering} />
 		{/if}
 	</div>
+
+	{#if printEchartsConfig && !printing}
+		<CodeBlock>
+			{JSON.stringify(config, undefined, 3)}
+		</CodeBlock>
+	{/if}
 </div>
 
 {#if downloadChart}
@@ -114,7 +124,7 @@
         margin-bottom: 15px;
         overflow: visible;
     "
-		use:echartsCanvasDownload={config}
+		use:echartsCanvasDownload={{ ...config, ...$$restProps, echartsOptions }}
 	/>
 {/if}
 

diff --git a/packages/core-components/src/lib/unsorted/viz/EChartsMap.svelte b/packages/core-components/src/lib/unsorted/viz/EChartsMap.svelte
@@ -8,6 +8,7 @@
 	import echartsCanvasDownload from '@evidence-dev/component-utilities/echartsCanvasDownload';
 	import EchartsCopyTarget from './EchartsCopyTarget.svelte';
 	import DownloadData from '../ui/DownloadData.svelte';
+	import CodeBlock from '../ui/CodeBlock.svelte';
 	import ChartLoading from '../ui/ChartLoading.svelte';
 	import { flush } from 'svelte/internal';
 
@@ -20,6 +21,9 @@
 
 	export let hasLink = false;
 
+	export let echartsOptions = undefined;
+	export let printEchartsConfig = false;
+
 	let downloadChart = false;
 	let copying = false;
 	let printing = false;
@@ -60,12 +64,12 @@
 				overflow: visible;
 				display: {copying ? 'none' : 'inherit'}
 			"
-				use:echartsMap={{ config, hasLink }}
+				use:echartsMap={{ config, hasLink, echartsOptions }}
 			/>
 		{/if}
 	{/if}
 
-	<EchartsCopyTarget {config} {height} {width} {copying} {printing} />
+	<EchartsCopyTarget {config} {height} {width} {copying} {printing} {echartsOptions} />
 
 	<div class="chart-footer">
 		<DownloadData
@@ -98,6 +102,12 @@
 			<DownloadData text="Download data" {data} class="download-button" display={hovering} />
 		{/if}
 	</div>
+
+	{#if printEchartsConfig && !printing}
+		<CodeBlock>
+			{JSON.stringify(config, undefined, 3)}
+		</CodeBlock>
+	{/if}
 </div>
 
 {#if downloadChart}
@@ -113,7 +123,7 @@
         margin-bottom: 15px;
         overflow: visible;
     "
-		use:echartsCanvasDownload={config}
+		use:echartsCanvasDownload={{ ...config, echartsOptions }}
 	/>
 {/if}
 

diff --git a/packages/core-components/src/lib/unsorted/viz/EchartsCopyTarget.svelte b/packages/core-components/src/lib/unsorted/viz/EchartsCopyTarget.svelte
@@ -10,6 +10,7 @@
 	export let width = '100%';
 	export let copying = false;
 	export let printing = false;
+	export let echartsOptions = undefined;
 </script>
 
 {#if copying}
@@ -24,7 +25,7 @@
           overflow: visible;
           break-inside: avoid;
       "
-		use:eChartsCopy={{ config, ratio: 2 }}
+		use:eChartsCopy={{ config, ratio: 2, echartsOptions }}
 	/>
 {:else if printing}
 	<div
@@ -38,6 +39,6 @@
 		overflow: visible;
 		break-inside: avoid;
   "
-		use:eChartsCopy={{ config, ratio: 4 }}
+		use:eChartsCopy={{ config, ratio: 4, echartsOptions }}
 	/>
 {/if}
diff --git a/packages/core-components/src/lib/unsorted/viz/FunnelChart.svelte b/packages/core-components/src/lib/unsorted/viz/FunnelChart.svelte
@@ -30,6 +30,8 @@
 	export let funnelSort = 'none';
 
 	export let colorPalette = undefined;
+	export let echartsOptions = undefined;
+	export let printEchartsConfig = false;
 
 	export let showPercent = false;
 	showPercent = showPercent === 'true' || showPercent === true;
@@ -202,4 +204,4 @@
 	};
 </script>
 
-<ECharts {config} {width} {height} />
+<ECharts {config} {width} {height} {echartsOptions} {printEchartsConfig} />
diff --git a/packages/core-components/src/lib/unsorted/viz/Histogram.svelte b/packages/core-components/src/lib/unsorted/viz/Histogram.svelte
@@ -32,6 +32,8 @@
 	export let fillOpacity = undefined;
 
 	export let colorPalette = undefined;
+	export let echartsOptions = undefined;
+	export let printEchartsConfig = false;
 </script>
 
 <Chart
@@ -57,6 +59,8 @@
 	hist="true"
 	{chartAreaHeight}
 	{colorPalette}
+	{echartsOptions}
+	{printEchartsConfig}
 >
 	<Hist {fillColor} {fillOpacity} />
 	<slot />