Merge pull request #1210 from evidence-dev/fix/1203/y-axis-label-trunc

Fix Y Axis labels being truncated on horizontal bar charts
evidence-dev · Oct 2, 2023 · 5945778 · 5945778
2 parents 74eee5b + cc11af8
commit 5945778
Show file tree

Hide file tree

Showing 6 changed files with 3,973 additions and 6,382 deletions.
diff --git a/.changeset/nervous-apples-exercise.md b/.changeset/nervous-apples-exercise.md
@@ -0,0 +1,6 @@
+---
+'@evidence-dev/component-utilities': patch
+'@evidence-dev/core-components': patch
+---
+
+Fix y-axis labels being truncated on horizontal bar charts
diff --git a/packages/component-utilities/src/echarts.js b/packages/component-utilities/src/echarts.js
@@ -465,17 +465,22 @@ export default (node, option) => {
 			const modConst = 4 / 5;
 			const clientWidth = node?.clientWidth ?? 0;
 
-			/** @type {import("echarts").EChartsOption} */
-			const newOption = {
-				xAxis: {
-					axisLabel: {
-						interval: 0,
-						overflow: 'truncate',
-						width: (clientWidth * modConst) / distinctXValues.size
+			// We disable this behavior because it doesn't make sense on horizontal bar charts
+			// Category labels will grow to be visible
+			// Value labels are interpolatable anyway
+			if (!option.swapXY) {
+				/** @type {import("echarts").EChartsOption} */
+				const newOption = {
+					xAxis: {
+						axisLabel: {
+							interval: 0,
+							overflow: 'truncate',
+							width: (clientWidth * modConst) / distinctXValues.size
+						}
 					}
-				}
-			};
-			chart.setOption(newOption);
+				};
+				chart.setOption(newOption);
+			}
 		}
 	};
 

diff --git a/packages/core-components/src/lib/unsorted/viz/BarChart.stories.svelte b/packages/core-components/src/lib/unsorted/viz/BarChart.stories.svelte
@@ -57,6 +57,20 @@
 	}}
 />
 
+<Story
+	name="Crowded (Explicit X Type) (Horizontal)"
+	args={{
+		xType: 'category',
+		swapXY: true,
+		data: genSeries({
+			...defaultGenSeriesOpts,
+			minSeriesLen: 15,
+			maxSeriesLen: 15,
+			minSeriesCount: 4
+		}).data
+	}}
+/>
+
 <!-- 
 	This story doesn't work because our series mocking currently doesn't include evidenceColumnTypes
 	<Story
@@ -79,4 +93,4 @@
 		data: MissingYCase.data,
 		...MissingYCase.keys
 	}}
-/>>
+/>
diff --git a/packages/core-components/src/lib/unsorted/viz/BarChart.svelte b/packages/core-components/src/lib/unsorted/viz/BarChart.svelte
@@ -41,7 +41,15 @@
 		)?.evidenceType;
 	});
 
-	export let showAllXAxisLabels = xType === 'category' || xEvidenceType === 'string';
+	$: if (!showAllXaxisLabelsManuallySet)
+		showAllXAxisLabels = xType === 'category' || xEvidenceType === 'string';
+
+	/** @type {boolean} */
+	export let showAllXAxisLabels;
+	const showAllXaxisLabelsManuallySet = typeof showAllXAxisLabels !== 'undefined';
+
+	$: if (typeof showAllXAxisLabels === 'string')
+		showAllXAxisLabels = showAllXAxisLabels?.toLowerCase() === 'true';
 
 	$: {
 		if (swapXY === 'true' || swapXY === true) {

diff --git a/packages/core-components/src/lib/unsorted/viz/Chart.svelte b/packages/core-components/src/lib/unsorted/viz/Chart.svelte
@@ -821,7 +821,7 @@
 
 {#if !error}
 	<slot />
-	<ECharts config={$config} {height} {width} {data} {showAllXAxisLabels} />
+	<ECharts config={$config} {height} {width} {data} {showAllXAxisLabels} {swapXY} />
 {:else}
 	<ErrorChart {error} {chartType} />
 {/if}