Skip to content

Commit f29d0c5

Browse files
gkagka
committed
feat: apply a lot of mark defaults
1 parent 5a58c93 commit f29d0c5

26 files changed

+393
-92
lines changed

‎src/lib/marks/Arrow.svelte

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,9 +67,12 @@
6767
6868
const {
6969
data = [{}],
70-
class: className = null,
70+
class: className = '',
7171
...options
72-
}: ArrowMarkProps = $derived({ ...DEFAULTS, ...markProps });
72+
}: ArrowMarkProps = $derived({
73+
...DEFAULTS,
74+
...markProps
75+
});
7376
7477
const { getPlotState } = getContext<PlotContext>('svelteplot');
7578
const plot = $derived(getPlotState());

‎src/lib/marks/BoxX.svelte

Lines changed: 23 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,37 @@
11
<!-- @component
22
Creates a horizontal box plot for visualizing data distribution with quartiles and outliers
33
-->
4+
<script module lang="ts">
5+
export type BoxXMarkProps = BoxYMarkProps;
6+
</script>
7+
48
<script lang="ts">
59
import GroupMultiple from './helpers/GroupMultiple.svelte';
6-
import type { BoxProps } from './BoxY.svelte';
10+
import type { BoxYMarkProps } from './BoxY.svelte';
711
import { BarX, TickX, RuleY, Dot, groupY } from '$lib/index.js';
812
import { resolveChannel } from '$lib/helpers/resolve.js';
13+
import { getContext } from 'svelte';
14+
import type { PlotDefaults } from '../types.js';
915
10-
let {
16+
let markProps: BoxXMarkProps = $props();
17+
const DEFAULTS = {
18+
...getContext<PlotDefaults>('svelteplot/_defaults').box,
19+
...getContext<PlotDefaults>('svelteplot/_defaults').boxX
20+
};
21+
const {
1122
data = [{}],
12-
x,
13-
y,
14-
rule,
1523
bar,
16-
tickMedian = true,
17-
tickMinMax = false,
24+
rule,
25+
tickMedian,
26+
tickMinMax,
1827
dot,
19-
class: className = null
20-
}: BoxProps = $props();
28+
x,
29+
y,
30+
class: className = ''
31+
}: BoxXMarkProps = $derived({
32+
...DEFAULTS,
33+
...markProps
34+
});
2135
2236
const { data: grouped } = $derived(
2337
groupY(

‎src/lib/marks/BoxY.svelte

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
Creates a vertical box plot for visualizing data distribution with quartiles and outliers
33
-->
44
<script lang="ts" module>
5-
export type BoxProps = {
5+
export type BoxYMarkProps = Pick<BaseMarkProps, 'class'> & {
66
data: DataRecord[];
77
x: ChannelAccessor;
88
y: ChannelAccessor;
@@ -31,21 +31,31 @@
3131

3232
<script lang="ts">
3333
import GroupMultiple from './helpers/GroupMultiple.svelte';
34-
import type { ChannelAccessor, DataRecord } from '$lib/types.js';
34+
import type { BaseMarkProps, ChannelAccessor, DataRecord } from '$lib/types.js';
3535
import { groupX, BarY, TickY, RuleX, Dot } from '$lib/index.js';
3636
import { resolveChannel } from '$lib/helpers/resolve.js';
37+
import { getContext } from 'svelte';
38+
import type { PlotDefaults } from '../types.js';
3739
38-
let {
40+
let markProps: BoxYMarkProps = $props();
41+
const DEFAULTS = {
42+
...getContext<PlotDefaults>('svelteplot/_defaults').box,
43+
...getContext<PlotDefaults>('svelteplot/_defaults').boxY
44+
};
45+
const {
3946
data = [{}],
40-
x,
41-
y,
42-
rule,
47+
class: className = '',
4348
bar,
44-
tickMedian = true,
45-
tickMinMax = false,
49+
rule,
50+
tickMedian,
51+
tickMinMax,
4652
dot,
47-
class: className = null
48-
}: BoxProps = $props();
53+
x,
54+
y
55+
}: BoxYMarkProps = $derived({
56+
...DEFAULTS,
57+
...markProps
58+
});
4959
5060
let { data: grouped } = $derived(
5161
groupX(

‎src/lib/marks/Brush.svelte

Lines changed: 30 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -44,27 +44,41 @@
4444
import { getContext } from 'svelte';
4545
import Frame from '$lib/marks/Frame.svelte';
4646
import Rect from '$lib/marks/Rect.svelte';
47-
import type { BaseMarkProps, PlotContext } from '$lib/types.js';
47+
import type { BaseMarkProps, PlotContext, PlotDefaults } from '$lib/types.js';
4848
import { clientToLayerCoordinates } from './helpers/events.js';
4949
50-
let {
51-
brush = $bindable({ enabled: false }),
52-
stroke = 'currentColor',
50+
let { brush = $bindable(), ...markProps }: BrushMarkProps = $props();
51+
52+
const DEFAULTS = {
53+
stroke: 'currentColor',
54+
strokeDasharray: '2,3',
55+
strokeOpacity: 0.6,
56+
resizeHandleSize: 10,
57+
constrainToDomain: false,
58+
...getContext<PlotDefaults>('svelteplot/_defaults').brush
59+
};
60+
61+
const {
62+
data = [{}],
63+
stroke,
5364
strokeWidth,
54-
strokeDasharray = '2,3',
55-
strokeOpacity = 0.6,
65+
strokeDasharray,
66+
strokeOpacity,
5667
strokeLinecap,
5768
strokeDashoffset,
5869
strokeLinejoin,
5970
strokeMiterlimit,
6071
cursor: forceCursor,
6172
limitDimension = false,
62-
constrainToDomain = false,
63-
resizeHandleSize = 10,
73+
constrainToDomain,
74+
resizeHandleSize,
6475
onbrushstart,
6576
onbrushend,
6677
onbrush
67-
}: BrushMarkProps = $props();
78+
}: BrushMarkProps = $derived({
79+
...DEFAULTS,
80+
...markProps
81+
});
6882
6983
const { getPlotState } = getContext<PlotContext>('svelteplot');
7084
const plot = $derived(getPlotState());
@@ -361,4 +375,10 @@
361375
{strokeMiterlimit}
362376
{strokeWidth} />
363377
{/if}
364-
<Frame fill="transparent" inset={-20} {cursor} {onpointerdown} {onpointermove} />
378+
<Frame
379+
fill="transparent"
380+
stroke="transparent"
381+
inset={-20}
382+
{cursor}
383+
{onpointerdown}
384+
{onpointermove} />

‎src/lib/marks/BrushX.svelte

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,14 @@
44

55
<script lang="ts">
66
import Brush, { type BrushMarkProps } from './Brush.svelte';
7+
import type { PlotDefaults } from '../types.js';
8+
import { getContext } from 'svelte';
79
8-
let { brush, ...restProps }: BrushXMarkProps = $props();
10+
let { brush = $bindable(), ...options }: BrushXMarkProps = $props();
11+
const DEFAULTS = {
12+
...getContext<PlotDefaults>('svelteplot/_defaults').brush,
13+
...getContext<PlotDefaults>('svelteplot/_defaults').brushX
14+
};
915
</script>
1016

11-
<Brush bind:brush limitDimension="x" {...restProps} />
17+
<Brush bind:brush limitDimension="x" {...DEFAULTS} {...options} />

‎src/lib/marks/BrushY.svelte

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,14 @@
44

55
<script lang="ts">
66
import Brush, { type BrushMarkProps } from './Brush.svelte';
7+
import type { PlotDefaults } from '../types.js';
8+
import { getContext } from 'svelte';
79
8-
let { brush, ...restProps }: BrushYMarkProps = $props();
10+
let { brush = $bindable(), ...options }: BrushYMarkProps = $props();
11+
const DEFAULTS = {
12+
...getContext<PlotDefaults>('svelteplot/_defaults').brush,
13+
...getContext<PlotDefaults>('svelteplot/_defaults').brushY
14+
};
915
</script>
1016

11-
<Brush bind:brush limitDimension="y" {...restProps} />
17+
<Brush bind:brush limitDimension="y" {...DEFAULTS} {...options} />

‎src/lib/marks/Cell.svelte

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@
88
DataRecord,
99
BaseMarkProps,
1010
BaseRectMarkProps,
11-
ChannelAccessor
11+
ChannelAccessor,
12+
PlotDefaults
1213
} from '../types.js';
1314
1415
export type CellMarkProps = BaseMarkProps &
@@ -29,7 +30,20 @@
2930
import { isValid } from '../helpers/isValid.js';
3031
import RectPath from './helpers/RectPath.svelte';
3132
32-
let { data = [{}], class: className = null, ...options }: CellMarkProps = $props();
33+
let markProps: CellMarkProps = $props();
34+
35+
const DEFAULTS = {
36+
...getContext<PlotDefaults>('svelteplot/_defaults').cell
37+
};
38+
39+
const {
40+
data = [{}],
41+
class: className = '',
42+
...options
43+
}: CellMarkProps = $derived({
44+
...DEFAULTS,
45+
...markProps
46+
});
3347
3448
const { getPlotState } = getContext<PlotContext>('svelteplot');
3549
const plot = $derived(getPlotState());

‎src/lib/marks/Geo.svelte

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,8 @@
2222
PlotContext,
2323
BaseMarkProps,
2424
ConstantAccessor,
25-
LinkableMarkProps
25+
LinkableMarkProps,
26+
PlotDefaults
2627
} from '../types.js';
2728
import Mark from '../Mark.svelte';
2829
import { geoPath } from 'd3-geo';
@@ -38,14 +39,23 @@
3839
const { getPlotState } = getContext<PlotContext>('svelteplot');
3940
const plot = $derived(getPlotState());
4041
41-
let {
42+
let markProps: GeoMarkProps = $props();
43+
44+
const DEFAULTS = {
45+
...getContext<PlotDefaults>('svelteplot/_defaults').geo
46+
};
47+
48+
const {
4249
data = [{}],
4350
canvas = false,
4451
geoType,
4552
dragRotate,
46-
class: className = null,
53+
class: className = '',
4754
...options
48-
}: GeoMarkProps = $props();
55+
}: GeoMarkProps = $derived({
56+
...DEFAULTS,
57+
...markProps
58+
});
4959
5060
const path = $derived(
5161
callWithProps(geoPath, [plot.scales.projection], {

‎src/lib/marks/Graticule.svelte

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,17 +17,26 @@
1717
import Geo from './Geo.svelte';
1818
import { geoGraticule } from 'd3-geo';
1919
import { getContext } from 'svelte';
20+
import type { PlotDefaults } from '../types.js';
21+
22+
let markProps: GraticuleMarkProps = $props();
2023
2124
const DEFAULTS = {
22-
graticuleStep: 10,
23-
...getContext<Partial<PlotDefaults>>('svelteplot/defaults')
25+
...getContext<PlotDefaults>('svelteplot/_defaults').graticule
2426
};
2527
26-
let { step = DEFAULTS.graticuleStep, stepX, stepY, ...options }: GraticuleMarkProps = $props();
28+
const {
29+
data = [{}],
30+
class: className = '',
31+
...options
32+
}: GraticuleMarkProps = $derived({
33+
...DEFAULTS,
34+
...markProps
35+
});
2736
2837
let graticule = $derived.by(() => {
2938
const graticule = geoGraticule();
30-
graticule.stepMinor([stepX || step, stepY || step]);
39+
graticule.stepMinor([options.stepX || options.step, options.stepY || options.step]);
3140
return graticule;
3241
});
3342
</script>

‎src/lib/marks/GridX.svelte

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,27 @@
1111
<script lang="ts">
1212
import { getContext } from 'svelte';
1313
import Mark from '../Mark.svelte';
14-
import type { PlotContext, BaseMarkProps, RawValue } from '../types.js';
14+
import type { PlotContext, BaseMarkProps, RawValue, PlotDefaults } from '../types.js';
1515
import { resolveChannel, resolveStyles } from '../helpers/resolve.js';
1616
import { autoTicks } from '$lib/helpers/autoTicks.js';
1717
import { testFilter } from '$lib/helpers/index.js';
1818
import { RAW_VALUE } from '$lib/transforms/recordize.js';
1919
20-
let { data = [], automatic = false, ...options }: GridXMarkProps = $props();
20+
let markProps: GridXMarkProps = $props();
21+
22+
const DEFAULTS = {
23+
...getContext<PlotDefaults>('svelteplot/_defaults').grid,
24+
...getContext<PlotDefaults>('svelteplot/_defaults').gridX
25+
};
26+
27+
const {
28+
data = [],
29+
automatic = false,
30+
...options
31+
}: GridXMarkProps = $derived({
32+
...DEFAULTS,
33+
...markProps
34+
});
2135
2236
const { getPlotState } = getContext<PlotContext>('svelteplot');
2337
const plot = $derived(getPlotState());

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy