- import type {
- BaseMarkProps,
- ChannelAccessor,
- ConstantAccessor,
- CurveName,
- DataRecord,
- PlotContext
- } from '$lib/types.js';
- import { Line, Area } from '$lib/index.js';
- import { randomId, coalesce } from '$lib/helpers/index.js';
- import { getContext } from 'svelte';
- import { extent, max, min } from 'd3-array';
- import { resolveChannel } from '$lib/helpers/resolve.js';
- import type { CurveFactory } from 'd3-shape';
-
- type DifferenceYMarkProps = {
+
+
+
+
+
diff --git a/src/lib/marks/DotY.svelte b/src/lib/marks/DotY.svelte
index 128dd7f1..81099b5e 100644
--- a/src/lib/marks/DotY.svelte
+++ b/src/lib/marks/DotY.svelte
@@ -1,8 +1,15 @@
+
+
+
diff --git a/src/lib/marks/Frame.svelte b/src/lib/marks/Frame.svelte
index 4d5d2689..c0153ee1 100644
--- a/src/lib/marks/Frame.svelte
+++ b/src/lib/marks/Frame.svelte
@@ -1,16 +1,20 @@
-
- let { automatic, class: className = '', ...options }: FrameMarkProps = $props();
+
-
+ {#snippet children({ usedScales })}
+
+ {/snippet}
diff --git a/src/lib/marks/Geo.svelte b/src/lib/marks/Geo.svelte
index ecb780f1..cd56da36 100644
--- a/src/lib/marks/Geo.svelte
+++ b/src/lib/marks/Geo.svelte
@@ -1,12 +1,26 @@
+
+
+
+
+
+
diff --git a/src/lib/marks/LineY.svelte b/src/lib/marks/LineY.svelte
index f81b2a2b..14ba10da 100644
--- a/src/lib/marks/LineY.svelte
+++ b/src/lib/marks/LineY.svelte
@@ -1,8 +1,11 @@
+
diff --git a/src/lib/marks/Link.svelte b/src/lib/marks/Link.svelte
index 0b360d3c..00d50f32 100644
--- a/src/lib/marks/Link.svelte
+++ b/src/lib/marks/Link.svelte
@@ -1,3 +1,22 @@
+
+
+
+
+
+
+
- {#each groups as group}
+ {#each groups as group, g (g)}
{/each}
diff --git a/src/lib/marks/RegressionY.svelte b/src/lib/marks/RegressionY.svelte
index 6191ea35..c141e245 100644
--- a/src/lib/marks/RegressionY.svelte
+++ b/src/lib/marks/RegressionY.svelte
@@ -1,3 +1,10 @@
+
+
+
- {#each groups as group}
+ {#each groups as group, i (i)}
{/each}
diff --git a/src/lib/marks/RuleX.svelte b/src/lib/marks/RuleX.svelte
index ad0fbcce..cd8d31af 100644
--- a/src/lib/marks/RuleX.svelte
+++ b/src/lib/marks/RuleX.svelte
@@ -1,3 +1,18 @@
+
+
+
+
+
+
diff --git a/src/lib/marks/Spike.svelte b/src/lib/marks/Spike.svelte
index 7e1f8a77..35218f9f 100644
--- a/src/lib/marks/Spike.svelte
+++ b/src/lib/marks/Spike.svelte
@@ -1,6 +1,14 @@
+
+
+
0}
- {#each plot.scales.color.domain as value}
+ {#each plot.scales.color.domain as value (value)}
{@const symbolV = plot.scales.symbol.fn(value)}
{@const symbolType = maybeSymbol(symbolV)}
{@const color = plot.colorSymbolRedundant
diff --git a/src/lib/marks/Text.svelte b/src/lib/marks/Text.svelte
index d1e51d8a..7f84e330 100644
--- a/src/lib/marks/Text.svelte
+++ b/src/lib/marks/Text.svelte
@@ -1,26 +1,13 @@
-
+
+
+
+
@@ -170,7 +170,7 @@
implement canvas rendering for vector mark
{:else}
- {#each scaledData as d}
+ {#each scaledData as d, i (i)}
{@const r = resolveChannel('r', d.datum, { r: 3, ...args })}
{#if d.valid && isValid(r)}
{@const dx = +resolveProp(args.dx, d.datum, 0)}
diff --git a/src/lib/marks/helpers/BaseAxisX.svelte b/src/lib/marks/helpers/BaseAxisX.svelte
index 2e002978..daa2f33d 100644
--- a/src/lib/marks/helpers/BaseAxisX.svelte
+++ b/src/lib/marks/helpers/BaseAxisX.svelte
@@ -11,7 +11,7 @@
RawValue,
ScaleType
} from '$lib/types.js';
- import { resolveScaledStyles, resolveProp } from '$lib/helpers/resolve.js';
+ import { resolveProp, resolveStyles } from '$lib/helpers/resolve.js';
import { max } from 'd3-array';
import { randomId, testFilter } from '$lib/helpers/index.js';
@@ -88,7 +88,7 @@
const T = tickObjects.length;
for (let i = 0; i < T; i++) {
let j = i;
- // find the preceeding tick that was not hidden
+ // find the preceding tick that was not hidden
do {
j--;
} while (j >= 0 && tickObjects[j].hidden);
@@ -142,7 +142,7 @@
- {#each positionedTicks as tick, t}
+ {#each positionedTicks as tick, t (t)}
{#if testFilter(tick.value, options) && !tick.hidden}
{@const textLines = tick.text}
{@const prevTextLines = t && positionedTicks[t - 1].text}
@@ -152,27 +152,41 @@
{@const moveDown =
(tickSize + tickPadding + (tickRotate !== 0 ? tickFontSize * 0.35 : 0)) *
(anchor === 'bottom' ? 1 : -1)}
+ {@const [textStyle, textClass] = resolveStyles(
+ plot,
+ tick,
+ {
+ fontVariant: isQuantitative ? 'tabular-nums' : 'normal',
+ ...options,
+ fontSize: tickFontSize,
+ stroke: null
+ },
+ 'fill',
+ { x: true }
+ )}
0 ? 'start' : 'middle'}>
{#if tickSize}
+ {@const [tickLineStyle, tickLineClass] = resolveStyles(
+ plot,
+ tick,
+ options,
+ 'stroke',
+ { x: true }
+ )}
{/if}
{!prevTextLines || prevTextLines[i] !== line
? line
diff --git a/src/lib/marks/helpers/BaseAxisY.svelte b/src/lib/marks/helpers/BaseAxisY.svelte
index 21f9489e..119bef86 100644
--- a/src/lib/marks/helpers/BaseAxisY.svelte
+++ b/src/lib/marks/helpers/BaseAxisY.svelte
@@ -1,7 +1,7 @@
- {#each positionedTicks as tick, t}
+ {#each positionedTicks as tick, t (t)}
{#if testFilter(tick.value, options) && !tick.hidden}
{@const tickClass_ = resolveProp(tickClass, tick.value)}
+ {@const [textStyle, textClass] = resolveStyles(
+ plot,
+ tick,
+ {
+ fontVariant: isQuantitative ? 'tabular-nums' : 'normal',
+ ...options,
+ fontSize: tickFontSize,
+ stroke: null
+ },
+ 'fill',
+ { y: true }
+ )}
{#if tickSize}
+ {@const [tickLineStyle, tickLineClass] = resolveStyles(
+ plot,
+ tick,
+ options,
+ 'stroke',
+ { y: true }
+ )}
{/if}
{Array.isArray(tick.text) ? tick.text.join(' ') : tick.text}
diff --git a/src/lib/marks/helpers/DotCanvas.svelte b/src/lib/marks/helpers/DotCanvas.svelte
index ac3c510c..a897b6ce 100644
--- a/src/lib/marks/helpers/DotCanvas.svelte
+++ b/src/lib/marks/helpers/DotCanvas.svelte
@@ -6,7 +6,6 @@
ScaledDataRecord,
PlotContext
} from '$lib/types.js';
- import { CSS_VAR } from '$lib/constants.js';
import { resolveProp } from '$lib/helpers/resolve.js';
import { maybeSymbol } from '$lib/helpers/symbols.js';
import { symbol as d3Symbol } from 'd3-shape';
diff --git a/src/lib/marks/helpers/GeoCanvas.svelte b/src/lib/marks/helpers/GeoCanvas.svelte
index d45867e9..c9284462 100644
--- a/src/lib/marks/helpers/GeoCanvas.svelte
+++ b/src/lib/marks/helpers/GeoCanvas.svelte
@@ -8,7 +8,7 @@
} from '$lib/types.js';
import { CSS_VAR } from '$lib/constants.js';
import { resolveProp, resolveScaledStyleProps } from '$lib/helpers/resolve.js';
- import { getContext, untrack } from 'svelte';
+ import { getContext } from 'svelte';
import { type GeoPath } from 'd3-geo';
import CanvasLayer from './CanvasLayer.svelte';
import type { Attachment } from 'svelte/attachments';
diff --git a/src/lib/marks/helpers/LinearGradientX.svelte b/src/lib/marks/helpers/LinearGradientX.svelte
index 2cc27bf6..4d64d50b 100644
--- a/src/lib/marks/helpers/LinearGradientX.svelte
+++ b/src/lib/marks/helpers/LinearGradientX.svelte
@@ -21,7 +21,7 @@
- {#each projectedStops as { px, color }}
+ {#each projectedStops as { px, color }, i (i)}
{/each}
diff --git a/src/lib/marks/helpers/LinearGradientY.svelte b/src/lib/marks/helpers/LinearGradientY.svelte
index 5418e1ff..8ee1f6f0 100644
--- a/src/lib/marks/helpers/LinearGradientY.svelte
+++ b/src/lib/marks/helpers/LinearGradientY.svelte
@@ -21,7 +21,7 @@
- {#each projectedStops as { py, color }}
+ {#each projectedStops as { py, color }, i (i)}
{/each}
diff --git a/src/lib/marks/helpers/MarkerPath.svelte b/src/lib/marks/helpers/MarkerPath.svelte
index 72d4c691..8ca944f6 100644
--- a/src/lib/marks/helpers/MarkerPath.svelte
+++ b/src/lib/marks/helpers/MarkerPath.svelte
@@ -25,7 +25,7 @@
datum: DataRecord;
/**
* the marker shape to use at the start of the path, defaults to
- * cirlce
+ * circle
*/
markerStart?: boolean | MarkerShape;
/**
@@ -96,7 +96,7 @@
class={className}
stroke-width={strokeWidth_}
use:addEventHandlers={{ getPlotState, options: mark.options, datum }}>
- {#each Object.entries( { start: markerStart, mid: markerMid, end: markerEnd, all: marker } ) as [key, marker]}
+ {#each Object.entries( { start: markerStart, mid: markerMid, end: markerEnd, all: marker } ) as [key, marker] (key)}
{@const markerId = `marker-${key === 'all' ? '' : `${key}-`}${id}`}
{#if isSnippet(marker)}
{@render marker(markerId, color)}
diff --git a/src/lib/marks/helpers/RectPath.svelte b/src/lib/marks/helpers/RectPath.svelte
index 565c76bc..0b35cc65 100644
--- a/src/lib/marks/helpers/RectPath.svelte
+++ b/src/lib/marks/helpers/RectPath.svelte
@@ -25,7 +25,8 @@ Helper component for rendering rectangular marks in SVG
height,
useInsetAsFallbackVertically = true,
useInsetAsFallbackHorizontally = true,
- usedScales
+ usedScales,
+ fallbackStyle = 'fill'
}: {
datum: ScaledDataRecord;
class: string | null;
@@ -47,39 +48,40 @@ Helper component for rendering rectangular marks in SVG
*/
useInsetAsFallbackHorizontally?: boolean;
usedScales: UsedScales;
+ fallbackStyle?: 'fill' | 'stroke';
} = $props();
const { getPlotState } = getContext('svelteplot');
const plot = $derived(getPlotState());
- const dx = $derived(+(resolveProp(options.dx, datum.datum, 0) as number));
- const dy = $derived(+(resolveProp(options.dy, datum.datum, 0) as number));
- const inset = $derived(+(resolveProp(options.inset, datum.datum, 0) as number));
+ const dx = $derived(+(resolveProp(options.dx, datum?.datum, 0) as number));
+ const dy = $derived(+(resolveProp(options.dy, datum?.datum, 0) as number));
+ const inset = $derived(+(resolveProp(options.inset, datum?.datum, 0) as number));
const insetLeft = $derived(
+(resolveProp(
options.insetLeft,
- datum.datum,
+ datum?.datum,
useInsetAsFallbackHorizontally ? inset : 0
) as number)
);
const insetRight = $derived(
+(resolveProp(
options.insetRight,
- datum.datum,
+ datum?.datum,
useInsetAsFallbackHorizontally ? inset : 0
) as number)
);
const insetTop = $derived(
+(resolveProp(
options.insetTop,
- datum.datum,
+ datum?.datum,
useInsetAsFallbackVertically ? inset : 0
) as number)
);
const insetBottom = $derived(
+(resolveProp(
options.insetBottom,
- datum.datum,
+ datum?.datum,
useInsetAsFallbackVertically ? inset : 0
) as number)
);
@@ -94,12 +96,14 @@ Helper component for rendering rectangular marks in SVG
borderRadius.bottomLeft ?? 0
) > 0)
);
- const [style, styleClass] = $derived(resolveStyles(plot, datum, options, 'fill', usedScales));
+ const [style, styleClass] = $derived(
+ resolveStyles(plot, datum, options, fallbackStyle, usedScales)
+ );
{#if hasBorderRadius}
{:else}
{/if}
diff --git a/src/lib/marks/helpers/events.ts b/src/lib/marks/helpers/events.ts
index 8d5cf2a7..044eb28e 100644
--- a/src/lib/marks/helpers/events.ts
+++ b/src/lib/marks/helpers/events.ts
@@ -1,6 +1,6 @@
-import type { BaseMarkProps, DataRecord, PlotScale, PlotScales, PlotState } from '$lib/types.js';
+import type { BaseMarkProps, DataRecord, PlotScale, PlotState } from '$lib/types.js';
import type { MouseEventHandler } from 'svelte/elements';
-import { invert, pick } from 'es-toolkit';
+import { pick } from 'es-toolkit';
import { RAW_VALUE } from '$lib/transforms/recordize.js';
import { INDEX } from '$lib/constants.js';
@@ -15,14 +15,14 @@ declare global {
}
/**
- * Translates client coordinates (clientX, clientY) to the layer coordinates
+ * Translates client coordinates (clientX, clientY) to the layer coordinates
* of the plot frame, regardless of which element triggered the event
*/
export function clientToLayerCoordinates(
event: MouseEvent,
plotBody: HTMLElement | null | undefined
): [number, number] {
- // If layerX/Y already exist and the target is the plot frame (rect element),
+ // If layerX/Y already exist and the target is the plot frame (rect element),
// we can use them directly
// if (event.layerX !== undefined && (event.target as SVGElement).tagName === 'rect') {
// return [event.layerX, event.layerY];
@@ -34,10 +34,7 @@ export function clientToLayerCoordinates(
const plotBodyRect = plotBody.getBoundingClientRect();
// Calculate the coordinates relative to the plot body
- return [
- event.clientX - plotBodyRect.left,
- event.clientY - plotBodyRect.top
- ];
+ return [event.clientX - plotBodyRect.left, event.clientY - plotBodyRect.top];
}
export function addEventHandlers(
@@ -77,7 +74,7 @@ export function addEventHandlers(
'ontouchcancel',
'ontouchend',
'ontouchmove',
- 'onwheel',
+ 'onwheel'
]);
const listeners = new Map>();
diff --git a/src/lib/transforms/bin.test.ts b/src/lib/transforms/bin.test.ts
index 3f554a29..d8478715 100644
--- a/src/lib/transforms/bin.test.ts
+++ b/src/lib/transforms/bin.test.ts
@@ -73,7 +73,7 @@ describe('binX', () => {
y: d
}));
- it('bins dailys into weekly data', () => {
+ it('bins daily into weekly data', () => {
const { data, ...channels } = binX(
{
data: dailyData,
@@ -119,7 +119,7 @@ describe('binX', () => {
expect(binDuration).toBeLessThanOrEqual(7 * 24 * 60 * 60 * 1000);
});
- // it.only('bins dailys into weekly data', () => {
+ // it.only('bins daily into weekly data', () => {
// const { data, ...channels } = binX(
// {
// data: dailyData,
diff --git a/src/lib/transforms/bin.ts b/src/lib/transforms/bin.ts
index c4898276..0c75331a 100644
--- a/src/lib/transforms/bin.ts
+++ b/src/lib/transforms/bin.ts
@@ -5,13 +5,12 @@ import { maybeInterval } from '$lib/helpers/autoTicks.js';
import {
bin as d3Bin,
extent,
- groups as d3Groups,
thresholdFreedmanDiaconis,
thresholdScott,
thresholdSturges,
type ThresholdCountGenerator
} from 'd3-array';
-import { Reducer, reduceOutputs, type ReducerName } from '$lib/helpers/reduce.js';
+import { reduceOutputs, type ReducerName } from '$lib/helpers/reduce.js';
import { groupFacetsAndZ } from '$lib/helpers/group.js';
import { isDate } from '$lib/helpers/typeChecks.js';
@@ -159,7 +158,7 @@ export function binY(
}
/**
- * for binning in x and y dimension simulatenously
+ * for binning in x and y dimension simultaneously
*/
export function bin(
{ data, ...channels }: TransformArg,
diff --git a/src/lib/transforms/interval.test.ts b/src/lib/transforms/interval.test.ts
index 24ecd474..802e5eb0 100644
--- a/src/lib/transforms/interval.test.ts
+++ b/src/lib/transforms/interval.test.ts
@@ -1,4 +1,4 @@
-import { describe, it, expect, vi } from 'vitest';
+import { describe, it, expect } from 'vitest';
import { intervalX, intervalY } from './interval.js';
describe('intervalX', () => {
@@ -53,7 +53,7 @@ describe('intervalX', () => {
const xTime = item.x.getTime();
// x1 should be before x
- expect(x1Time).toBeLessThan(xTime);
+ expect(x1Time).toBeLessThanOrEqual(xTime);
// x2 should be after x
expect(x2Time).toBeGreaterThan(xTime);
diff --git a/src/lib/transforms/recordize.ts b/src/lib/transforms/recordize.ts
index a4043b92..b5125ae0 100644
--- a/src/lib/transforms/recordize.ts
+++ b/src/lib/transforms/recordize.ts
@@ -19,7 +19,7 @@ export function recordizeX(
data: data.map((value, index) => ({
__value: value,
...(withIndex ? { [INDEX]: index } : {}),
- [RAW_VALUE]: value,
+ [RAW_VALUE]: value
})) as DataRecord[],
...channels,
x: RAW_VALUE,
@@ -44,7 +44,7 @@ export function recordizeY(
return {
data: Array.from(data).map((value, index) => ({
...(withIndex ? { __index: index } : {}),
- [RAW_VALUE]: value,
+ [RAW_VALUE]: value
})) as DataRecord[],
...channels,
...(withIndex ? { x: '__index' } : {}),
@@ -93,10 +93,10 @@ export function recordize({ data, ...channels }: TransformArgsRow): TransformArg
if (!isDataRecord(data[0])) {
return {
data: (data as RawValue[]).map((d) => ({
- [RAW_VALUE]: d,
+ [RAW_VALUE]: d
})) as DataRecord[],
- ...channels,
+ ...channels
};
}
return { data, ...channels };
-}
\ No newline at end of file
+}
diff --git a/src/lib/transforms/rename.test.ts b/src/lib/transforms/rename.test.ts
index e453a54d..dfe06725 100644
--- a/src/lib/transforms/rename.test.ts
+++ b/src/lib/transforms/rename.test.ts
@@ -1,8 +1,6 @@
import { describe, it, expect } from 'vitest';
-import { renameChannels, renameChannelsAndData, replaceChannels } from './rename.js';
+import { renameChannels } from './rename.js';
import type { DataRecord } from '$lib/types.js';
-import { csvParse } from 'd3-dsv';
-import { readFileSync } from 'fs';
const inputData: DataRecord[] = [
{ year: 2000, facet: 'A', value: 10 },
diff --git a/src/lib/transforms/shift.ts b/src/lib/transforms/shift.ts
index 3b59174c..53bc35b8 100644
--- a/src/lib/transforms/shift.ts
+++ b/src/lib/transforms/shift.ts
@@ -1,6 +1,6 @@
import { resolveChannel } from '$lib/helpers/resolve.js';
import { maybeTimeInterval } from '$lib/helpers/time.js';
-import type { ChannelName, DataRecord, TransformArg } from '$lib/types.js';
+import type { DataRecord, TransformArg } from '$lib/types.js';
type RequireAtLeastOne = Pick> &
{
diff --git a/src/lib/transforms/window.ts b/src/lib/transforms/window.ts
index 041b158d..d3585205 100644
--- a/src/lib/transforms/window.ts
+++ b/src/lib/transforms/window.ts
@@ -1,6 +1,6 @@
import { maybeInterval } from '$lib/helpers/autoTicks.js';
import { isValid } from '$lib/helpers/index.js';
-import { Reducer, mayberReducer, type ReducerName } from '$lib/helpers/reduce.js';
+import { mayberReducer, type ReducerName } from '$lib/helpers/reduce.js';
import { resolveChannel } from '$lib/helpers/resolve.js';
import type { DataRecord, ScaledChannelName, TransformArg } from '$lib/types.js';
import { groups as d3Groups } from 'd3-array';
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 7e83e2cf..7b782c76 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -151,12 +151,12 @@ export type ScaleOptions = {
base?: number;
// sorting for band and point scales
sort?:
- | ChannelAccessor
- | ((a: RawValue, b: RawValue) => number)
- | {
- channel: string;
- order: 'ascending' | 'descending';
- };
+ | ChannelAccessor
+ | ((a: RawValue, b: RawValue) => number)
+ | {
+ channel: string;
+ order: 'ascending' | 'descending';
+ };
// symlog scales
constant?: number;
};
@@ -164,18 +164,18 @@ export type ScaleOptions = {
export type ColorScaleOptions = ScaleOptions & {
legend: boolean;
type:
- | ScaleType
- | 'categorical'
- | 'sequential'
- | 'cyclical'
- | 'threshold'
- | 'quantile'
- | 'quantize'
- | 'diverging'
- | 'diverging-log'
- | 'diverging-pow'
- | 'diverging-sqrt'
- | 'diverging-symlog';
+ | ScaleType
+ | 'categorical'
+ | 'sequential'
+ | 'cyclical'
+ | 'threshold'
+ | 'quantile'
+ | 'quantize'
+ | 'diverging'
+ | 'diverging-log'
+ | 'diverging-pow'
+ | 'diverging-sqrt'
+ | 'diverging-symlog';
scheme: string;
/**
* fallback color used for null/undefined
@@ -394,9 +394,9 @@ export type PlotOptions = {
*/
locale: string;
/**
- *
+ * pass a @emotion/css function to style plot using dynamic classes
*/
- css: (d: string) => string;
+ css: (d: string) => string | undefined;
};
export type PlotDefaults = {
@@ -438,6 +438,11 @@ export type PlotDefaults = {
*/
numberFormat: Intl.NumberFormatOptions;
markerDotRadius: number;
+ /**
+ * fallback color to be used for null/NA
+ */
+ unknown: string;
+ css: (d: string) => string | undefined;
};
export type GenericMarkOptions = Record;
@@ -474,9 +479,9 @@ export type PlotScale = {
uniqueScaleProps: Set;
skip: Map>;
fn: ScaleLinear &
- ScaleBand &
- ScaleOrdinal &
- ScaleOrdinal;
+ ScaleBand &
+ ScaleOrdinal &
+ ScaleOrdinal;
};
export type CurveName =
@@ -627,6 +632,19 @@ export type FacetContext = {
getFacetState: () => FacetState;
};
+export type LinkableMarkProps = {
+ /**
+ * simple browser tooltip to be displayed on mouseover
+ */
+ title: ConstantAccessor;
+ /**
+ * if set, the mark element will be wrapped in a link
+ * element
+ */
+ href: ConstantAccessor;
+ target: ConstantAccessor<'_self' | '_blank' | string>;
+};
+
export type BaseMarkProps = Partial<{
/**
* Filter the data without modifying the inferred scales
@@ -683,31 +701,21 @@ export type BaseMarkProps = Partial<{
ontouchcancel?: MouseEventHandler;
oncontextmenu?: MouseEventHandler;
onwheel?: MouseEventHandler;
- /**
- * simple browser tooltip to be displayed on mouseover
- */
- title: ConstantAccessor;
- /**
- * if set, the mark element will be wrapped in a link
- * element
- */
- href: ConstantAccessor;
- target: ConstantAccessor<'_self' | '_blank' | string>;
/**
* if you want to give your mark element an extra CSS class
*/
- class: string;
+ class: string | null;
cursor: ConstantAccessor;
}>;
export type BorderRadius =
| number
| {
- topLeft?: number;
- topRight?: number;
- bottomRight?: number;
- bottomLeft?: number;
- };
+ topLeft?: number;
+ topRight?: number;
+ bottomRight?: number;
+ bottomLeft?: number;
+ };
export type BaseRectMarkProps = {
inset?: ConstantAccessor;
@@ -795,6 +803,7 @@ export type MarkStyleProps =
| 'fill'
| 'fillOpacity'
| 'fontWeight'
+ | 'fontVariant'
| 'fontSize'
| 'fontStyle'
| 'stroke'
@@ -894,4 +903,4 @@ export type MapMethod =
export type MapOptions = Partial>;
-export type UsedScales = Record;
\ No newline at end of file
+export type UsedScales = Record;
diff --git a/src/lib/ui/RadioInput.svelte b/src/lib/ui/RadioInput.svelte
index 703b93ba..3015b6c7 100644
--- a/src/lib/ui/RadioInput.svelte
+++ b/src/lib/ui/RadioInput.svelte
@@ -18,7 +18,7 @@
{#if label}
{/if}
- {#each options as p}
+ {#each options as p (p)}