Untitled

		<State initial={{ xDomain: [null, null], yDomain: [0, null] }} let:value let:set>
			<Chart
				data={epidata}
				x="time_value"
				xScale={scaleTime()}
				xDomain={value?.xDomain}
				y="value"
				yDomain={value?.yDomain}
				c="geo_value"
				cScale={scaleOrdinal()}
				cDomain={Object.keys(stateColors)}
				cRange={Object.values(stateColors)}
				padding={{ left: 16, bottom: 24, right: 48 }}
				tooltip={{ mode: 'voronoi' }}
				let:tooltip
				let:cScale
			>
				<Svg>
					<Axis placement="left" grid rule />
					<Axis placement="bottom" rule />
					{#each epidataGroup as [group, data]}
						{@const color =
							tooltip.data == null || tooltip.data.geo_value === group
								? cScale?.(group)
								: 'hsl(var(--color-surface-content) / 20%)'}
						<Spline {data} class="stroke-2" stroke={color}>
							<svelte:fragment slot="end">
								<circle r={4} fill={color} />
								<Text
									value={group}
									verticalAnchor="middle"
									dx={6}
									dy={-2}
									class="text-xs"
									fill={color}
								/>
							</svelte:fragment>
						</Spline>
					{/each}
					<Highlight points lines />
					<Brush
						axis="both"
						on:change={(e) => {
							set({
								// @ts-expect-error
								xDomain: e.detail.xDomain,
								// @ts-expect-error
								yDomain: e.detail.yDomain
							});
						}}
					/>
				</Svg>

				<Tooltip.Root let:data>
					<Tooltip.Header>{moment(data.time_value).format('MMMM Do YYYY')}</Tooltip.Header>
					<Tooltip.List>
						<Tooltip.Item label={data.geo_value} value={data.value} />
					</Tooltip.List>
				</Tooltip.Root>
			</Chart>
		</State>