Skip to content

Commit 97b2393

Browse files
gkagka
committed
ts: improve area prop type
resolves #97
1 parent 37fe846 commit 97b2393

File tree

15 files changed

+112
-47
lines changed

15 files changed

+112
-47
lines changed

‎src/lib/marks/Area.svelte

Lines changed: 12 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,21 @@
11
<!-- @component
22
Creates an area chart with filled regions between two x-y value pairs
33
-->
4-
<script module lang="ts">
5-
export type AreaMarkProps = {
6-
data: DataRecord[];
7-
x1?: ChannelAccessor;
8-
x2?: ChannelAccessor;
9-
y1?: ChannelAccessor;
10-
y2?: ChannelAccessor;
11-
z?: ChannelAccessor;
4+
<script lang="ts" generics="Datum extends DataRecord">
5+
interface AreaMarkProps extends BaseMarkProps<Datum>, LinkableMarkProps<Datum> {
6+
data: Datum[];
7+
x1?: ChannelAccessor<Datum>;
8+
x2?: ChannelAccessor<Datum>;
9+
y1?: ChannelAccessor<Datum>;
10+
y2?: ChannelAccessor<Datum>;
11+
z?: ChannelAccessor<Datum>;
1212
curve?: CurveName | CurveFactory;
1313
tension?: number;
1414
sort?: ConstantAccessor<RawValue> | { channel: 'stroke' | 'fill' };
1515
stack?: Partial<StackOptions>;
1616
canvas?: boolean;
17-
} & BaseMarkProps &
18-
LinkableMarkProps;
19-
</script>
17+
}
2018
21-
<script lang="ts">
2219
import Mark from '../Mark.svelte';
2320
import GroupMultiple from './helpers/GroupMultiple.svelte';
2421
import { getContext } from 'svelte';
@@ -49,15 +46,15 @@
4946
5047
const DEFAULTS = {
5148
fill: 'currentColor',
52-
curve: 'linear',
49+
curve: 'linear' as CurveName,
5350
tension: 0,
5451
...getContext<PlotDefaults>('svelteplot/_defaults').area
5552
};
5653
5754
const {
58-
data,
55+
data = [{} as Datum],
5956
/** the curve */
60-
curve = 'linear',
57+
curve = 'linear' as CurveName,
6158
tension = 0,
6259
class: className = '',
6360
canvas = false,

‎src/lib/marks/AreaX.svelte

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,27 +2,30 @@
22
Creates a horizontal area chart with x value and baseline. Areas are implicitly
33
stacked horizontally if just the x channel is defined.
44
-->
5-
<script lang="ts">
6-
import Area, { type AreaMarkProps } from './Area.svelte';
5+
<script lang="ts" generics="Datum extends DataRow">
6+
interface AreaXMarkProps extends Omit<ComponentProps<typeof Area>, 'y1' | 'y2'> {
7+
x?: ChannelAccessor<Datum>;
8+
y?: ChannelAccessor<Datum>;
9+
}
10+
import Area from './Area.svelte';
711
import { renameChannels } from '$lib/transforms/rename.js';
812
import { stackX } from '$lib/transforms/stack.js';
913
import { recordizeX } from '$lib/transforms/recordize.js';
10-
import type { ChannelAccessor, PlotDefaults } from '../types.js';
11-
import { getContext } from 'svelte';
14+
import type { ChannelAccessor, DataRow, PlotDefaults } from '../types.js';
15+
import { getContext, type ComponentProps } from 'svelte';
1216
13-
type AreaXProps = Omit<AreaMarkProps, 'y1' | 'y2'> & {
14-
x?: ChannelAccessor;
15-
y?: ChannelAccessor;
16-
};
17-
18-
let markProps: AreaMarkProps = $props();
17+
let markProps: AreaXMarkProps = $props();
1918
2019
const DEFAULTS = getContext<PlotDefaults>('svelteplot/_defaults').areaX;
2120
22-
const { data, stack, ...options }: AreaMarkProps = $derived({ ...DEFAULTS, ...markProps });
21+
const { data, stack, ...options }: AreaXMarkProps = $derived({
22+
...(markProps.x == undefined ? { x1: 0, x2: 0 } : {}),
23+
...DEFAULTS,
24+
...markProps
25+
});
2326
2427
const args = $derived(
25-
renameChannels<AreaXProps>(
28+
renameChannels<AreaXMarkProps>(
2629
stackX(recordizeX({ data, ...options, y1: null, y2: null }), stack),
2730
{ y: 'y1' }
2831
)

‎src/lib/marks/AreaY.svelte

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,30 +2,30 @@
22
Creates a vertical area chart with y value and baseline. Areas are implicitly
33
stacked vertically if just the y channel is defined.
44
-->
5-
<script lang="ts">
6-
import Area, { type AreaMarkProps } from './Area.svelte';
5+
<script lang="ts" generics="Datum extends DataRow">
6+
interface AreaYMarkProps extends Omit<ComponentProps<typeof Area>, 'x1' | 'x2'> {
7+
x?: ChannelAccessor<Datum>;
8+
y?: ChannelAccessor<Datum>;
9+
}
10+
import Area from './Area.svelte';
711
import { renameChannels } from '$lib/transforms/rename.js';
812
import { stackY } from '$lib/transforms/stack.js';
913
import { recordizeY } from '$lib/transforms/recordize.js';
10-
import type { ChannelAccessor, PlotDefaults } from '../types.js';
11-
import { getContext } from 'svelte';
14+
import type { ChannelAccessor, DataRow, PlotDefaults } from '../types.js';
15+
import { getContext, type Component, type ComponentProps } from 'svelte';
1216
13-
/**
14-
* AreaY mark foo
15-
*/
16-
type AreaYProps = Omit<AreaMarkProps, 'x1' | 'x2'> & {
17-
x?: ChannelAccessor;
18-
y?: ChannelAccessor;
19-
};
20-
21-
let markProps: AreaMarkProps = $props();
17+
let markProps: AreaYMarkProps = $props();
2218
2319
const DEFAULTS = getContext<PlotDefaults>('svelteplot/_defaults').areaY;
2420
25-
const { data, stack, ...options }: AreaMarkProps = $derived({ ...DEFAULTS, ...markProps });
21+
const { data, stack, ...options }: AreaYMarkProps = $derived({
22+
...(markProps.y == undefined ? { y1: 0, y2: 0 } : {}),
23+
...DEFAULTS,
24+
...markProps
25+
});
2626
2727
const args = $derived(
28-
renameChannels<AreaYProps>(
28+
renameChannels<AreaYMarkProps>(
2929
stackY(recordizeY({ data, ...options, x1: null, x2: null }), stack),
3030
{ x: 'x1' }
3131
)

‎src/routes/examples/[group]/[page]/+page.svelte

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -65,13 +65,17 @@
6565
<div class="svp-code-block">
6666
<HighlightSvelte
6767
lang="svelte"
68-
code={pagesSrc[plotKey].substring(
69-
pagesSrc[plotKey].indexOf(
68+
code={pagesSrc[plotKey]
69+
.substring(
7070
pages[plotKey].fullCode
71-
? '<script lang="ts">'
72-
: '<Plot'
71+
? pagesSrc[plotKey].indexOf(
72+
'<script lang="ts">'
73+
)
74+
: pagesSrc[plotKey].lastIndexOf(
75+
'</scr' + 'ipt>'
76+
) + 9
7377
)
74-
)} />
78+
.trim()} />
7579
</div>
7680
</div>
7781

‎src/routes/examples/area/_index.svelte

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<script module>
2+
export let title = 'Area';
3+
</script>
4+
5+
<h1>Area examples</h1>

‎src/routes/examples/area/area-x.svelte

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<script module>
2+
export const title = 'AreaX';
3+
</script>
4+
5+
<script lang="ts">
6+
import { Plot, AreaX } from 'svelteplot';
7+
import { page } from '$app/state';
8+
import type { ExamplesData } from '../types';
9+
import { setContext } from 'svelte';
10+
let { aapl } = $derived(page.data.data) as ExamplesData;
11+
</script>
12+
13+
<div>
14+
<Plot><AreaX data={aapl} y="Date" x="Close" /></Plot>
15+
<Plot><AreaX data={aapl} y="Date" x1="Close" /></Plot>
16+
<Plot><AreaX data={aapl} y="Date" x2="Close" /></Plot>
17+
</div>
18+
19+
<style>
20+
div {
21+
columns: 3;
22+
}
23+
</style>

‎src/routes/examples/area/area-y.svelte

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<script module>
2+
export const title = 'AreaY';
3+
</script>
4+
5+
<script lang="ts">
6+
import { Plot, AreaY } from 'svelteplot';
7+
import { page } from '$app/state';
8+
import type { ExamplesData } from '../types';
9+
import { setContext } from 'svelte';
10+
let { aapl } = $derived(page.data.data) as ExamplesData;
11+
12+
setContext('svelteplot/defaults', {
13+
height: 200
14+
});
15+
</script>
16+
17+
<Plot><AreaY data={aapl} x="Date" y="Close" /></Plot>
18+
<Plot><AreaY data={aapl} x="Date" y1="Close" /></Plot>
19+
<Plot><AreaY data={aapl} x="Date" y2="Close" /></Plot>

‎src/routes/examples/area/area.svelte

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<script module>
2+
export const title = 'Simple area';
3+
</script>
4+
5+
<script lang="ts">
6+
import { Plot, Area } from 'svelteplot';
7+
import { page } from '$app/state';
8+
import type { ExamplesData } from '../types';
9+
let { aapl } = $derived(page.data.data) as ExamplesData;
10+
</script>
11+
12+
<Plot y={{ grid: true }}>
13+
<Area data={aapl} x1="Date" y1={0} y2="Close" />
14+
</Plot>

‎static/examples/area/area-x.dark.png

32 KB
Loading

‎static/examples/area/area-x.png

31.2 KB
Loading

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