svelteplot 0.0.1-alpha.23 → 0.0.1-alpha.25

package/dist/Plot.svelte

@@ -74,7 +74,13 @@ const onMouseMove = (evt) => {
 let hasLegend = $derived(color?.legend || symbol?.legend);
 </script>
 
-<figure data-testid={testid} class="svelteplot" bind:clientWidth={width} style:max-width={maxWidth}>
+<figure 
+    data-testid={testid} class="svelteplot" 
+    data-reactive-hack-x={plot.x.dataValues.length}
+    data-reactive-hack-y={plot.y.dataValues.length}
+    data-reactive-hack-color={plot.color.dataValues.length}
+    data-reactive-hack-symbol={plot.symbol.dataValues.length}
+    bind:clientWidth={width} style:max-width={maxWidth}>
     <div
         role="document"
         class="plot-body"

package/dist/classes/Scale.svelte.js

@@ -50,21 +50,6 @@ export class Scale {
     isColor = $derived(this.name === 'color');
     scaleType = $derived(this.scaleOptions.type ||
         inferScaleType(this.dataValues, { isPosition: this.isPosition, isColor: this.isColor }));
-    // readonly valueType = $derived(
-    //     this.dataValues.every((v) => v == null)
-    //         ? 'null'
-    //         : this.dataValues.every(isColorOrNull)
-    //           ? 'color'
-    //           : this.dataValues.every(isBooleanOrNull)
-    //             ? 'boolean'
-    //             : this.dataValues.every(isStringOrNull)
-    //               ? 'text'
-    //               : this.dataValues.every(isNumberOrNull)
-    //                 ? 'number'
-    //                 : this.dataValues.every(isDateOrNull)
-    //                   ? 'date'
-    //                   : 'mixed'
-    // );
     domain = $derived(this.scaleOptions.domain || inferScaleDomain(this.dataValues, this.scaleType));
 }
 // opacity: typeof === 'number' && between [0,1]

package/dist/marks/Area.svelte

@@ -14,8 +14,10 @@ let {
   data,
   curve,
   tension,
+  x = null,
   x1 = null,
   x2 = null,
+  y = null,
   y1 = null,
   y2 = null,
   z = null,
@@ -25,9 +27,9 @@ let {
   ...styleProps
 } = $props();
 let channels = $derived({
-  x1,
+  x1: x1 == null ? x : x1,
   x2,
-  y1,
+  y1: y1 == null ? y : y1,
   y2,
   fill,
   stroke,
@@ -45,7 +47,7 @@ let sortedGroups = $derived(
 let areaPath = $derived(
   callWithProps(area, [], {
     curve: maybeCurve(curve, tension),
-    ...x1 != null && x2 != null ? {
+    ...channels.x1 != null && channels.x2 != null ? {
       // "vertical" area
       x0: (d) => plot.xScale(resolveChannel("x1", d, channels)),
       x1: (d) => plot.xScale(resolveChannel("x2", d, channels)),
@@ -58,15 +60,16 @@ let areaPath = $derived(
     }
   })
 );
+$inspect({ channels, x });
 </script>
 
 <BaseMark_Area
     type="area"
     {data}
     channels={['x1', 'x2', 'y1', 'y2', 'fill', 'stroke']}
-    {x1}
+    x1={x1 != null ? x1 : x}
     {x2}
-    {y1}
+    y1={y1 != null ? y1 : y}
     {y2}
     {fill}
     {stroke}

package/dist/marks/Area.svelte.d.ts

@@ -1,8 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
 import type { MarkProps, BaseMarkStyleProps, ChannelAccessor, Curve } from '../types.js';
 export type AreaMarkProps = MarkProps & BaseMarkStyleProps & {
+    x?: ChannelAccessor;
     x1?: ChannelAccessor;
     x2?: ChannelAccessor;
+    y?: ChannelAccessor;
     y1?: ChannelAccessor;
     y2?: ChannelAccessor;
     z?: ChannelAccessor;

package/dist/marks/AreaX.svelte

@@ -1,10 +1,10 @@
 <script context="module"></script>
 
 <script>import Area from "./Area.svelte";
-import { stackX, recordizeX, renameChannels } from "..";
+import { stackX, recordizeX } from "..";
 let { data: rawData, stack, ...rawChannels } = $props();
 let { data, ...channels } = $derived(
-  renameChannels(stackX(recordizeX({ data: rawData, ...rawChannels }), stack), { y: "y1" })
+  stackX(recordizeX({ data: rawData, ...rawChannels }), stack)
 );
 </script>
 

package/dist/marks/AreaY.svelte

@@ -1,10 +1,10 @@
 <script context="module"></script>
 
 <script>import Area from "./Area.svelte";
-import { stackY, recordizeY, renameChannels } from "..";
+import { stackY, recordizeY } from "..";
 let { data: rawData, stack, ...rawChannels } = $props();
 let { data, ...channels } = $derived(
-  renameChannels(stackY(recordizeY({ data: rawData, ...rawChannels }), stack), { x: "x1" })
+  stackY(recordizeY({ data: rawData, ...rawChannels }), stack)
 );
 $inspect({ data, channels });
 </script>

package/dist/transforms/stack.js

@@ -56,7 +56,6 @@ function stackXY(byDim, data, channels, options) {
             });
         })
             .flat(1);
-        console.log({ newData });
         return {
             data: newData,
             ...channels,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "svelteplot",
-    "version": "0.0.1-alpha.23",
+    "version": "0.0.1-alpha.25",
     "scripts": {
         "dev": "vite dev",
         "build": "vite build",
@@ -29,6 +29,7 @@
     "devDependencies": {
         "@playwright/test": "^1.40.1",
         "@sveltejs/adapter-auto": "^3.1.0",
+        "@sveltejs/adapter-static": "^3.0.1",
         "@sveltejs/kit": "^2.3.2",
         "@sveltejs/package": "^2.2.5",
         "@sveltejs/vite-plugin-svelte": "^3.0.1",