Merge pull request #1810 from evidence-dev/03-28-24-release

03 28 24 release

.changeset/cyan-suits-fry.md

@@ -0,0 +1,5 @@
+---
+'@evidence-dev/core-components': patch
+---
+
+Fix errors caused by formatting null values

.changeset/friendly-windows-beg.md

@@ -0,0 +1,5 @@
+---
+'@evidence-dev/core-components': minor
+---
+
+add `Select all` option to `Dropdown`s, add dropdowns to `DateRange` for easier year selection

.changeset/gold-eagles-vanish.md

@@ -0,0 +1,5 @@
+---
+'@evidence-dev/core-components': patch
+---
+
+Adjust scatter hover to focus on individual point

.changeset/great-snails-kiss.md

@@ -0,0 +1,6 @@
+---
+'@evidence-dev/component-utilities': patch
+'@evidence-dev/core-components': patch
+---
+
+Add support for connected charts

.changeset/nervous-snakes-flow.md

@@ -0,0 +1,5 @@
+---
+'@evidence-dev/core-components': patch
+---
+
+Add table groups and standalone Delta component

.changeset/twelve-bottles-wink.md

@@ -0,0 +1,6 @@
+---
+'@evidence-dev/component-utilities': patch
+'@evidence-dev/core-components': patch
+---
+
+Fix map image download

.changeset/violet-scissors-walk.md

@@ -0,0 +1,5 @@
+---
+'@evidence-dev/core-components': patch
+---
+
+Add options to Evidence layout

.github/workflows/tests.yml

@@ -68,3 +68,8 @@ jobs:
           SQLITE_FILENAME: ':memory:'
 
           DUCKDB_FILENAME: ':memory:'
+
+      - name: Test the CLI via test-env for merges to main
+        if: ${{ github.base_ref == 'main' }}
+        run: |
+          pnpm run sources:test-env && pnpm run build:test-env

.prettierrc

@@ -4,12 +4,5 @@
 	"trailingComma": "none",
 	"printWidth": 100,
 	"plugins": ["prettier-plugin-svelte"],
-	"overrides": [
-		{
-			"files": "*.svelte",
-			"options": {
-				"parser": "svelte"
-			}
-		}
-	]
+	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
 }

package.json

@@ -33,7 +33,7 @@
 		"fs-extra": "11.2.0",
 		"git-remote-origin-url": "4.0.0",
 		"npm-run-all": "^4.1.5",
-		"prettier": "^3.1.0",
+		"prettier": "^3.2.5",
 		"prettier-plugin-svelte": "^3.1.2",
 		"prismjs": "1.29.0",
 		"remark-parse": "8.0.2",
@@ -62,9 +62,9 @@
 		"serve:docs": "pnpm --filter ./sites/docs serve",
 		"release": "run-s package:core-components build:tailwind build:evidence build:plugin-connector && pnpm changeset publish",
 		"release:next": "VERSION=$(git rev-parse --short HEAD) && pnpm -r exec npm pkg set version=0.0.0-\"$VERSION\" && pnpm install --frozen-lockfile && pnpm -r publish --tag next --no-git-checks",
-		"test": "run-s package:core-components build:tailwind build:evidence && pnpm i --frozen-lockfile && pnpm -r test",
+		"test": "pnpm -r test",
 		"test:ui": "pnpm -r test:ui",
-		"postinstall": "run-s build:plugin-connector build:preprocess build:tailwind build:query-store package:core-components build:evidence && pnpm install --ignore-scripts",
+		"postinstall": "run-s build:plugin-connector build:preprocess build:tailwind build:query-store package:core-components build:evidence",
 		"docs": "pnpm --filter ./sites/docs start",
 		"lint": "prettier --plugin-search-dir . --check . && eslint .",
 		"format": "prettier --plugin-search-dir . --write .",

packages/lib/component-utilities/src/echarts.js

@@ -1,4 +1,4 @@
-import { registerTheme, init } from 'echarts';
+import { registerTheme, init, connect } from 'echarts';
 import { evidenceThemeLight } from './echartsThemes';
 import debounce from 'debounce';
 
@@ -27,6 +27,12 @@ export default (node, option) => {
 		renderer: useSvg ? 'svg' : option.renderer ?? 'canvas'
 	});
 
+	// If connectGroup supplied, connect chart to other charts matching that connectGroup
+	if (option.connectGroup) {
+		chart.group = option.connectGroup;
+		connect(option.connectGroup);
+	}
+
 	// This function applies overrides to the echarts config generated by our chart components.
 	// In cases where these affect the spacing of the chart, some jumping/reanimation will be visible when
 	// the chart is animated. This is because we need to pass the initial options without the overrides to echarts

packages/lib/component-utilities/src/echartsCanvasDownload.js

@@ -41,7 +41,6 @@ export default (node, option) => {
 				...option.echartsOptions
 			});
 		}
-		console.log(chart.getOption());
 	};
 
 	// seriesOptions - loop through series and apply same changes to each

packages/lib/component-utilities/src/echartsMap.js

@@ -1,4 +1,4 @@
-import { init, registerMap } from 'echarts';
+import { init, registerMap, connect } from 'echarts';
 import usStateMap from './usStateMap.json';
 
 export default (node, option) => {
@@ -36,6 +36,12 @@ export default (node, option) => {
 		height: `${node.clientWidth * 0.5 + extraHeight}`
 	});
 
+	// If connectGroup supplied, connect chart to other charts matching that connectGroup
+	if (option.connectGroup) {
+		chart.group = option.connectGroup;
+		connect(option.connectGroup);
+	}
+
 	if (node && node.parentNode) {
 		// node.parentNode refers to the chart's container
 		node.style.height = chart.getHeight() + 'px';

packages/lib/sdk/.prettierrc

@@ -4,12 +4,5 @@
 	"trailingComma": "none",
 	"printWidth": 100,
 	"plugins": ["prettier-plugin-svelte"],
-	"overrides": [
-		{
-			"files": "*.svelte",
-			"options": {
-				"parser": "svelte"
-			}
-		}
-	]
+	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
 }

packages/ui/core-components/package.json

@@ -95,7 +95,7 @@
 		"postcss": "^8.4.23",
 		"postcss-load-config": "^4.0.1",
 		"prettier": "^2.8.0",
-		"prettier-plugin-svelte": "^2.8.1",
+		"prettier-plugin-svelte": "^3.1.2",
 		"publint": "^0.1.9",
 		"react": "^17.0.1",
 		"react-dom": "^17.0.1",

packages/ui/core-components/src/lib/atoms/inputs/dropdown/Dropdown.svelte

@@ -255,9 +255,20 @@
 									</VirtualList>
 								{/if}
 							</Command.Group>
-							{#if $selectedValues.length > 0 && multiple}
+							{#if multiple}
 								<Command.Separator />
 								<Command.Item
+									class="justify-center text-center"
+									onSelect={() => {
+										$selectedValues = $items.map((x) => ({ label: x.label, value: x.value }));
+										selectedValuesToInput();
+									}}
+								>
+									Select all
+								</Command.Item>
+								<Command.Separator />
+								<Command.Item
+									disabled={$selectedValues.length === 0}
 									class="justify-center text-center"
 									onSelect={() => {
 										$selectedValues = [];

packages/ui/core-components/src/lib/atoms/shadcn/range-calendar/range-calendar-next-button.svelte

@@ -14,7 +14,7 @@
 <RangeCalendarPrimitive.NextButton
 	on:click
 	class={cn(
-		buttonVariants({ variant: 'outline' }),
+		buttonVariants({ variant: 'ghost' }),
 		'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
 		className
 	)}

packages/ui/core-components/src/lib/atoms/shadcn/range-calendar/range-calendar-prev-button.svelte

@@ -14,7 +14,7 @@
 <RangeCalendarPrimitive.PrevButton
 	on:click
 	class={cn(
-		buttonVariants({ variant: 'outline' }),
+		buttonVariants({ variant: 'ghost' }),
 		'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
 		className
 	)}

packages/ui/core-components/src/lib/atoms/shadcn/range-calendar/range-calendar.svelte

@@ -1,27 +1,84 @@
 <script>
 	import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
 	import * as RangeCalendar from './index.js';
+	import * as Select from '../select/index.js';
 	import { cn } from '$lib/utils.js';
+	import { DateFormatter, getLocalTimeZone } from '@internationalized/date';
+	// required to dodge the styling on the shadcn version
+	import { Select as SelectPrimitive } from 'bits-ui';
 
-	/** @type {any | undefined} */
+	/** @typedef {import("@internationalized/date").DateValue} DateValue */
+	/** @typedef {import("@internationalized/date").CalendarDate} CalendarDate */
+
+	/** @type {import("bits-ui").DateRange | undefined} */
 	let value = undefined;
-	/** @type {any | undefined} */
+	/** @type {DateValue | undefined} */
 	let placeholder = undefined;
+	/** @type {{ start: DateValue; end: DateValue; } | undefined} */
+	let selectedDateRange = undefined;
 	/** @type {'short' | 'long' | undefined} */
 	let weekdayFormat = 'short';
-	/** @type {any | undefined} */
+	/** @type {DateValue | undefined} */
 	let startValue = undefined;
+	/** @type {CalendarDate | undefined} */
+	let minValue = undefined;
+	/** @type {CalendarDate | undefined} */
+	let maxValue = undefined;
 
 	/** @type {string | undefined | null} */
 	let className = undefined;
 
-	export { className as class, value, placeholder, weekdayFormat, startValue };
+	const monthOptions = [
+		'January',
+		'February',
+		'March',
+		'April',
+		'May',
+		'June',
+		'July',
+		'August',
+		'September',
+		'October',
+		'November',
+		'December'
+	].map((month, i) => ({ value: i + 1, label: month }));
+
+	const monthFmt = new DateFormatter('en-US', {
+		month: 'long'
+	});
+
+	$: yearOptions = Array.from({ length: 100 }, (_, i) => ({
+		label: String(new Date().getFullYear() - i),
+		value: new Date().getFullYear() - i
+	})).filter(({ value }) => !(minValue?.year > value || value > maxValue?.year));
+
+	$: defaultYear = placeholder
+		? { value: placeholder.year, label: String(placeholder.year) }
+		: undefined;
+
+	$: defaultMonth = placeholder
+		? { value: placeholder.month, label: monthFmt.format(placeholder.toDate(getLocalTimeZone())) }
+		: undefined;
+
+	export {
+		className as class,
+		value,
+		placeholder,
+		weekdayFormat,
+		startValue,
+		selectedDateRange,
+		minValue,
+		maxValue
+	};
 </script>
 
 <RangeCalendarPrimitive.Root
 	bind:value
 	bind:placeholder
 	bind:startValue
+	bind:selectedDateRange
+	{minValue}
+	{maxValue}
 	{weekdayFormat}
 	class={cn('p-3', className)}
 	{...$$restProps}
@@ -31,12 +88,61 @@
 >
 	<RangeCalendar.Header>
 		<RangeCalendar.PrevButton />
-		<RangeCalendar.Heading />
+		<RangeCalendar.Heading
+			class="flex items-center justify-between font-normal text-gray-700 group"
+		>
+			<Select.Root
+				selected={defaultMonth}
+				items={monthOptions}
+				onSelectedChange={(v) => {
+					if (!v || !placeholder) return;
+					if (v.value === placeholder?.month) return;
+					placeholder = placeholder.set({ month: v.value });
+				}}
+			>
+				<SelectPrimitive.Trigger
+					aria-label="Select month"
+					class="text-sm pr-1 pl-2 py-1 rounded-tl rounded-bl border-r border-white transition-colors duration-200 group-hover:bg-gray-100 group-hover:border-gray-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-400"
+				>
+					<Select.Value placeholder="Select month" />
+				</SelectPrimitive.Trigger>
+				<Select.Content class="max-h-[200px] overflow-y-auto !w-[118px]">
+					{#each monthOptions as { value, label }}
+						<Select.Item {value} {label}>
+							{label}
+						</Select.Item>
+					{/each}
+				</Select.Content>
+			</Select.Root>
+			<Select.Root
+				selected={defaultYear}
+				items={yearOptions}
+				onSelectedChange={(v) => {
+					if (!v || !placeholder) return;
+					if (v.value === placeholder?.year) return;
+					placeholder = placeholder.set({ year: v.value });
+				}}
+			>
+				<SelectPrimitive.Trigger
+					aria-label="Select year"
+					class=" pr-2 pl-1 py-1 rounded-tr rounded-br text-sm group-hover:bg-gray-100 transition-colors duration-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-400"
+				>
+					<Select.Value placeholder="Select year" />
+				</SelectPrimitive.Trigger>
+				<Select.Content class="max-h-[200px] overflow-y-auto !w-[79px]">
+					{#each yearOptions as { value, label }}
+						<Select.Item {value} {label}>
+							{label}
+						</Select.Item>
+					{/each}
+				</Select.Content>
+			</Select.Root>
+		</RangeCalendar.Heading>
 		<RangeCalendar.NextButton />
 	</RangeCalendar.Header>
 	<RangeCalendar.Months>
 		{#each months as month}
-			<RangeCalendar.Grid>
+			<RangeCalendar.Grid class="mx-auto w-fit">
 				<RangeCalendar.GridHead>
 					<RangeCalendar.GridRow class="flex">
 						{#each weekdays as weekday}

packages/ui/core-components/src/lib/organisms/layout/BreadCrumbs.svelte

@@ -55,7 +55,7 @@
 	$: crumbs = buildCrumbs(pathArray);
 </script>
 
-<div class="flex items-start mt-8 sm:mt-12 whitespace-nowrap overflow-auto">
+<div class="flex items-start mt-0 whitespace-nowrap overflow-auto">
 	<div class="inline-flex items-center text-sm capitalize gap-1 text-gray-500 mb-2 sm:mb-4">
 		{#each crumbs as crumb, i}
 			{#if i > 0}