ts: improve area prop type

resolves #97
svelteplot · gka · Jun 11, 2025 · Jun 6, 2025 · Jun 6, 2025 · Jun 6, 2025
commit 8188532da458c933e8d71cfcb1961328222282a3
diff --git a/src/lib/marks/Area.svelte b/src/lib/marks/Area.svelte
@@ -1,24 +1,21 @@
 <!-- @component
     Creates an area chart with filled regions between two x-y value pairs
 -->
-<script module lang="ts">
-    export type AreaMarkProps = {
-        data: DataRecord[];
-        x1?: ChannelAccessor;
-        x2?: ChannelAccessor;
-        y1?: ChannelAccessor;
-        y2?: ChannelAccessor;
-        z?: ChannelAccessor;
+<script lang="ts" generics="Datum extends DataRecord">
+    interface AreaMarkProps extends BaseMarkProps<Datum>, LinkableMarkProps<Datum> {
+        data: Datum[];
+        x1?: ChannelAccessor<Datum>;
+        x2?: ChannelAccessor<Datum>;
+        y1?: ChannelAccessor<Datum>;
+        y2?: ChannelAccessor<Datum>;
+        z?: ChannelAccessor<Datum>;
         curve?: CurveName | CurveFactory;
         tension?: number;
         sort?: ConstantAccessor<RawValue> | { channel: 'stroke' | 'fill' };
         stack?: Partial<StackOptions>;
         canvas?: boolean;
-    } & BaseMarkProps &
-        LinkableMarkProps;
-</script>
+    }
 
-<script lang="ts">
     import Mark from '../Mark.svelte';
     import GroupMultiple from './helpers/GroupMultiple.svelte';
     import { getContext } from 'svelte';
@@ -49,15 +46,15 @@
 
     const DEFAULTS = {
         fill: 'currentColor',
-        curve: 'linear',
+        curve: 'linear' as CurveName,
         tension: 0,
         ...getContext<PlotDefaults>('svelteplot/_defaults').area
     };
 
     const {
-        data,
+        data = [{} as Datum],
         /** the curve */
-        curve = 'linear',
+        curve = 'linear' as CurveName,
         tension = 0,
         class: className = '',
         canvas = false,

diff --git a/src/lib/marks/AreaX.svelte b/src/lib/marks/AreaX.svelte
@@ -2,27 +2,30 @@
     Creates a horizontal area chart with x value and baseline.  Areas are implicitly 
     stacked horizontally if just the x channel is defined.
 -->
-<script lang="ts">
-    import Area, { type AreaMarkProps } from './Area.svelte';
+<script lang="ts" generics="Datum extends DataRow">
+    interface AreaXMarkProps extends Omit<ComponentProps<typeof Area>, 'y1' | 'y2'> {
+        x?: ChannelAccessor<Datum>;
+        y?: ChannelAccessor<Datum>;
+    }
+    import Area from './Area.svelte';
     import { renameChannels } from '$lib/transforms/rename.js';
     import { stackX } from '$lib/transforms/stack.js';
     import { recordizeX } from '$lib/transforms/recordize.js';
-    import type { ChannelAccessor, PlotDefaults } from '../types.js';
-    import { getContext } from 'svelte';
+    import type { ChannelAccessor, DataRow, PlotDefaults } from '../types.js';
+    import { getContext, type ComponentProps } from 'svelte';
 
-    type AreaXProps = Omit<AreaMarkProps, 'y1' | 'y2'> & {
-        x?: ChannelAccessor;
-        y?: ChannelAccessor;
-    };
-
-    let markProps: AreaMarkProps = $props();
+    let markProps: AreaXMarkProps = $props();
 
     const DEFAULTS = getContext<PlotDefaults>('svelteplot/_defaults').areaX;
 
-    const { data, stack, ...options }: AreaMarkProps = $derived({ ...DEFAULTS, ...markProps });
+    const { data, stack, ...options }: AreaXMarkProps = $derived({
+        ...(markProps.x == undefined ? { x1: 0, x2: 0 } : {}),
+        ...DEFAULTS,
+        ...markProps
+    });
 
     const args = $derived(
-        renameChannels<AreaXProps>(
+        renameChannels<AreaXMarkProps>(
             stackX(recordizeX({ data, ...options, y1: null, y2: null }), stack),
             { y: 'y1' }
         )

diff --git a/src/lib/marks/AreaY.svelte b/src/lib/marks/AreaY.svelte
@@ -2,30 +2,30 @@
     Creates a vertical area chart with y value and baseline. Areas are implicitly 
     stacked vertically if just the y channel is defined.
 -->
-<script lang="ts">
-    import Area, { type AreaMarkProps } from './Area.svelte';
+<script lang="ts" generics="Datum extends DataRow">
+    interface AreaYMarkProps extends Omit<ComponentProps<typeof Area>, 'x1' | 'x2'> {
+        x?: ChannelAccessor<Datum>;
+        y?: ChannelAccessor<Datum>;
+    }
+    import Area from './Area.svelte';
     import { renameChannels } from '$lib/transforms/rename.js';
     import { stackY } from '$lib/transforms/stack.js';
     import { recordizeY } from '$lib/transforms/recordize.js';
-    import type { ChannelAccessor, PlotDefaults } from '../types.js';
-    import { getContext } from 'svelte';
+    import type { ChannelAccessor, DataRow, PlotDefaults } from '../types.js';
+    import { getContext, type Component, type ComponentProps } from 'svelte';
 
-    /**
-     * AreaY mark foo
-     */
-    type AreaYProps = Omit<AreaMarkProps, 'x1' | 'x2'> & {
-        x?: ChannelAccessor;
-        y?: ChannelAccessor;
-    };
-
-    let markProps: AreaMarkProps = $props();
+    let markProps: AreaYMarkProps = $props();
 
     const DEFAULTS = getContext<PlotDefaults>('svelteplot/_defaults').areaY;
 
-    const { data, stack, ...options }: AreaMarkProps = $derived({ ...DEFAULTS, ...markProps });
+    const { data, stack, ...options }: AreaYMarkProps = $derived({
+        ...(markProps.y == undefined ? { y1: 0, y2: 0 } : {}),
+        ...DEFAULTS,
+        ...markProps
+    });
 
     const args = $derived(
-        renameChannels<AreaYProps>(
+        renameChannels<AreaYMarkProps>(
             stackY(recordizeY({ data, ...options, x1: null, x2: null }), stack),
             { x: 'x1' }
         )

diff --git a/src/routes/examples/[group]/[page]/+page.svelte b/src/routes/examples/[group]/[page]/+page.svelte
@@ -65,13 +65,17 @@
         <div class="svp-code-block">
             <HighlightSvelte
                 lang="svelte"
-                code={pagesSrc[plotKey].substring(
-                    pagesSrc[plotKey].indexOf(
+                code={pagesSrc[plotKey]
+                    .substring(
                         pages[plotKey].fullCode
-                            ? '<script lang="ts">'
-                            : '<Plot'
+                            ? pagesSrc[plotKey].indexOf(
+                                  '<script lang="ts">'
+                              )
+                            : pagesSrc[plotKey].lastIndexOf(
+                                  '</scr' + 'ipt>'
+                              ) + 9
                     )
-                )} />
+                    .trim()} />
         </div>
     </div>
 

diff --git a/src/routes/examples/area/_index.svelte b/src/routes/examples/area/_index.svelte
@@ -0,0 +1,5 @@
+<script module>
+    export let title = 'Area';
+</script>
+
+<h1>Area examples</h1>
diff --git a/src/routes/examples/area/area-x.svelte b/src/routes/examples/area/area-x.svelte
@@ -0,0 +1,23 @@
+<script module>
+    export const title = 'AreaX';
+</script>
+
+<script lang="ts">
+    import { Plot, AreaX } from 'svelteplot';
+    import { page } from '$app/state';
+    import type { ExamplesData } from '../types';
+    import { setContext } from 'svelte';
+    let { aapl } = $derived(page.data.data) as ExamplesData;
+</script>
+
+<div>
+    <Plot><AreaX data={aapl} y="Date" x="Close" /></Plot>
+    <Plot><AreaX data={aapl} y="Date" x1="Close" /></Plot>
+    <Plot><AreaX data={aapl} y="Date" x2="Close" /></Plot>
+</div>
+
+<style>
+    div {
+        columns: 3;
+    }
+</style>
diff --git a/src/routes/examples/area/area-y.svelte b/src/routes/examples/area/area-y.svelte
@@ -0,0 +1,19 @@
+<script module>
+    export const title = 'AreaY';
+</script>
+
+<script lang="ts">
+    import { Plot, AreaY } from 'svelteplot';
+    import { page } from '$app/state';
+    import type { ExamplesData } from '../types';
+    import { setContext } from 'svelte';
+    let { aapl } = $derived(page.data.data) as ExamplesData;
+
+    setContext('svelteplot/defaults', {
+        height: 200
+    });
+</script>
+
+<Plot><AreaY data={aapl} x="Date" y="Close" /></Plot>
+<Plot><AreaY data={aapl} x="Date" y1="Close" /></Plot>
+<Plot><AreaY data={aapl} x="Date" y2="Close" /></Plot>
diff --git a/src/routes/examples/area/area.svelte b/src/routes/examples/area/area.svelte
@@ -0,0 +1,14 @@
+<script module>
+    export const title = 'Simple area';
+</script>
+
+<script lang="ts">
+    import { Plot, Area } from 'svelteplot';
+    import { page } from '$app/state';
+    import type { ExamplesData } from '../types';
+    let { aapl } = $derived(page.data.data) as ExamplesData;
+</script>
+
+<Plot y={{ grid: true }}>
+    <Area data={aapl} x1="Date" y1={0} y2="Close" />
+</Plot>
diff --git a/static/examples/area/area-x.dark.png b/static/examples/area/area-x.dark.png
diff --git a/static/examples/area/area-x.png b/static/examples/area/area-x.png
diff --git a/static/examples/area/area-y.dark.png b/static/examples/area/area-y.dark.png
diff --git a/static/examples/area/area-y.png b/static/examples/area/area-y.png
diff --git a/static/examples/area/area.dark.png b/static/examples/area/area.dark.png
diff --git a/static/examples/area/area.png b/static/examples/area/area.png