svelteplot 0.3.7-pr-133.0 → 0.3.7-pr-131.1

package/dist/Mark.svelte

@@ -11,7 +11,7 @@
                 {
                     mark: Mark<GenericMarkOptions>;
                     usedScales: ReturnType<typeof getUsedScales>;
-                    scaledData: ScaledDataRecord[];
+                    scaledData: ScaledDataRecord<Datum>[];
                 }
             ]
         >;

package/dist/Mark.svelte.d.ts

@@ -71,7 +71,7 @@ declare class __sveltets_Render<Datum extends DataRecord> {
         children?: Snippet<[{
             mark: any;
             usedScales: ReturnType<typeof getUsedScales>;
-            scaledData: ScaledDataRecord[];
+            scaledData: ScaledDataRecord<Datum>[];
         }]> | undefined;
         defaults?: Partial<Record<ScaledChannelName, RawValue>>;
     };

package/dist/marks/CustomMark.svelte

@@ -4,10 +4,18 @@
 -->
 <script lang="ts" generics="Datum extends DataRecord">
     interface CustomMarkProps extends BaseMarkProps<Datum> {
-        data: Datum[];
+        data?: Datum[];
         x?: ChannelAccessor<Datum>;
+        x1?: ChannelAccessor<Datum>;
+        x2?: ChannelAccessor<Datum>;
         y?: ChannelAccessor<Datum>;
-        children: Snippet<[{ datum: Datum; x: number; y: number }]>;
+        y1?: ChannelAccessor<Datum>;
+        y2?: ChannelAccessor<Datum>;
+        r?: ChannelAccessor<Datum>;
+        mark?: Snippet<
+            [{ record: ScaledDataRecord<Datum>; index: number; usedScales: UsedScales }]
+        >;
+        marks?: Snippet<[{ records: ScaledDataRecord<Datum>[]; usedScales: UsedScales }]>;
     }
 
     import { getContext } from 'svelte';
@@ -15,36 +23,47 @@
         PlotContext,
         DataRecord,
         ChannelAccessor,
-        BaseMarkProps
+        BaseMarkProps,
+        ScaledDataRecord,
+        UsedScales,
+        ScaledChannelName
     } from '../types/index.js';
     import type { Snippet } from 'svelte';
+    import { sort } from '../index.js';
 
-    const { getPlotState } = getContext<PlotContext>('svelteplot');
-    let plot = $derived(getPlotState());
+    import Mark from '../Mark.svelte';
 
-    import { resolveChannel } from '../helpers/resolve.js';
-    import { projectXY } from '../helpers/scales.js';
-    import { isValid } from '../helpers/index.js';
-    import GroupMultiple from './helpers/GroupMultiple.svelte';
+    let { data = [{} as Datum], mark, marks, ...options }: CustomMarkProps = $props();
 
-    let {
-        data = [{} as Datum],
-        x,
-        y,
-        children,
-        class: className = null
-    }: CustomMarkProps = $props();
+    const args = $derived(sort({ data, ...options })) as CustomMarkProps;
+
+    const channels: ScaledChannelName[] = [
+        'x',
+        'x1',
+        'x2',
+        'y',
+        'y1',
+        'y2',
+        'r',
+        'fill',
+        'stroke',
+        'opacity',
+        'fillOpacity',
+        'strokeOpacity'
+    ];
 </script>
 
-<GroupMultiple class="g-custom-mark {className || ''}" length={className ? 2 : data.length}>
-    {#each data as datum, i (i)}
-        {@const x_ = resolveChannel<Datum>('x', datum, { x, y })}
-        {@const y_ = resolveChannel<Datum>('y', datum, { x, y })}
-        {#if isValid(x_) && isValid(y_)}
-            {@const [px, py] = projectXY(plot.scales, x_, y_)}
-            <g transform="translate({px}, {py})">
-                {@render children({ datum, x: px, y: py })}
-            </g>
+<Mark type="custom" required={[]} channels={channels.filter((d) => !!options[d])} {...args}>
+    {#snippet children({ scaledData, usedScales })}
+        {#if marks}
+            {@render marks({ records: scaledData.filter((d) => d.valid), usedScales })}
+        {/if}
+        {#if mark}
+            {#each scaledData as datum, i (i)}
+                {#if datum.valid}
+                    {@render mark({ record: datum, index: i, usedScales })}
+                {/if}
+            {/each}
         {/if}
-    {/each}
-</GroupMultiple>
+    {/snippet}
+</Mark>

package/dist/types/channel.d.ts

@@ -8,4 +8,5 @@ export type ChannelAccessor<T = Record<string | symbol, RawValue>> = ChannelValu
 };
 export type ChannelValue<T = Record<string | symbol, RawValue>> = RawValue | keyof T | ((d: T) => RawValue) | null | undefined;
 export type ScaledChannelName = 'fill' | 'fillOpacity' | 'opacity' | 'r' | 'length' | 'stroke' | 'strokeOpacity' | 'symbol' | 'fx' | 'fy' | 'x' | 'x1' | 'x2' | 'y' | 'y1' | 'y2';
+export type ScaledChannelType<T extends ScaledChannelName> = T extends 'fill' | 'stroke' | 'symbol' ? string : number;
 export type ChannelName = ScaledChannelName | 'z' | 'sort' | 'filter' | 'interval';

package/dist/types/data.d.ts

@@ -1,4 +1,4 @@
-import type { ScaledChannelName } from './channel.js';
+import type { ScaledChannelName, ScaledChannelType } from './channel.js';
 export type RawValue = number | Date | boolean | string | symbol;
 export type DataRecord<T = Record<string | symbol, RawValue>> = T & {
     ___orig___?: RawValue | [RawValue, RawValue];
@@ -6,7 +6,9 @@ export type DataRecord<T = Record<string | symbol, RawValue>> = T & {
 export type ResolvedDataRecord<T = Record<string | symbol, RawValue>> = Partial<Record<ScaledChannelName, any>> & {
     datum: DataRecord<T>;
 };
-export type ScaledDataRecord<T = Record<string | symbol, RawValue>> = Partial<Record<ScaledChannelName, number | string | boolean | undefined>> & {
+export type ScaledDataRecord<T = Record<string | symbol, RawValue>> = Partial<{
+    [K in ScaledChannelName]?: ScaledChannelType<K>;
+}> & {
     datum: DataRecord<T>;
     valid: Boolean;
 };

package/dist/types/mark.d.ts

@@ -6,7 +6,7 @@ export type Mark<T> = {
     data: DataRecord<T>[];
     options: T;
 };
-export type MarkType = 'area' | 'arrow' | 'barX' | 'barY' | 'cell' | 'dot' | 'vector' | 'frame' | 'geo' | 'gridX' | 'gridY' | 'line' | 'rect' | 'regression' | 'ruleX' | 'ruleY' | 'swoopyArrow' | 'text' | 'tickX' | 'tickY';
+export type MarkType = 'area' | 'arrow' | 'barX' | 'barY' | 'cell' | 'custom' | 'dot' | 'vector' | 'frame' | 'geo' | 'gridX' | 'gridY' | 'line' | 'rect' | 'regression' | 'ruleX' | 'ruleY' | 'swoopyArrow' | 'text' | 'tickX' | 'tickY';
 export type MarkStyleProps = 'strokeDasharray' | 'strokeLinejoin' | 'strokeLinecap' | 'opacity' | 'cursor' | 'pointerEvents' | 'blend' | 'fill' | 'fillOpacity' | 'fontWeight' | 'fontVariant' | 'fontSize' | 'fontStyle' | 'stroke' | 'strokeWidth' | 'strokeOpacity' | 'x' | 'y' | 'clipPath' | 'mask' | 'filter' | 'angle' | 'radius' | 'symbol' | 'textAnchor' | 'width';
 import type { MouseEventHandler } from 'svelte/elements';
 import type { ChannelAccessor, ConstantAccessor, DataRecord, RawValue } from './index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "svelteplot",
-    "version": "0.3.7-pr-133.0",
+    "version": "0.3.7-pr-131.1",
     "license": "ISC",
     "author": {
         "name": "Gregor Aisch",