svelteplot 0.0.1-alpha.24 → 0.0.1-alpha.26

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/index.d.ts

@@ -20,6 +20,7 @@ export { default as LineY } from './marks/LineY.svelte';
 export { default as RuleX } from './marks/RuleX.svelte';
 export { default as RuleY } from './marks/RuleY.svelte';
 export { default as SymbolLegend } from './marks/SymbolLegend.svelte';
+export { default as Text } from './marks/Text.svelte';
 export { default as TickX } from './marks/TickX.svelte';
 export { default as TickY } from './marks/TickY.svelte';
 export { stackX, stackY } from './transforms/stack.js';

package/dist/index.js

@@ -22,6 +22,7 @@ export { default as LineY } from './marks/LineY.svelte';
 export { default as RuleX } from './marks/RuleX.svelte';
 export { default as RuleY } from './marks/RuleY.svelte';
 export { default as SymbolLegend } from './marks/SymbolLegend.svelte';
+export { default as Text } from './marks/Text.svelte';
 export { default as TickX } from './marks/TickX.svelte';
 export { default as TickY } from './marks/TickY.svelte';
 // transforms

package/dist/marks/Text.svelte

@@ -0,0 +1,57 @@
+<script context="module"></script>
+
+<script>import { getContext } from "svelte";
+import BaseMark from "./BaseMark.svelte";
+import getBaseStyles from "../helpers/getBaseStyles.js";
+import resolveChannel from "../helpers/resolveChannel.js";
+const BaseMark_Text = BaseMark;
+const plot = getContext("svelteplot");
+let { data, ...channels } = $props();
+function isValid(value) {
+  return value !== null && !Number.isNaN(value);
+}
+</script>
+
+<BaseMark_Text
+    type="text"
+    {data}
+    channels={['x', 'y', 'text', 'fill', 'stroke']}
+    {...channels}
+>
+    <g class="text">
+        {#each data as datum, i}
+            {@const cx = resolveChannel('x', datum, channels)}
+            {@const cy = resolveChannel('y', datum, channels)}
+            {@const maybeFillColor = resolveChannel('fill', datum, channels)}
+            {@const maybeStrokeColor = resolveChannel('stroke', datum, channels)}
+            <!-- {@const radius =
+                typeof r === 'number'
+                    ? r
+                    : plot.radiusScale(resolveChannel('r', datum, channels))}
+            {@const size = radius * radius * Math.PI} -->
+           
+            {#if isValid(cx) && isValid(cy)}
+                <text
+                    style={getBaseStyles(datum, channels)}
+                    style:fill={maybeFillColor ? plot.colorScale(maybeFillColor) : maybeStrokeColor ? null : 'currentColor'}
+                    style:stroke={maybeStrokeColor
+                        ? plot.colorScale(maybeStrokeColor)
+                        : null}
+                    dominant-baseline="central"
+                    transform="translate({[plot.xScale(cx), plot.yScale(cy)]})"
+                >{resolveChannel('text', datum, channels)}</text>
+            {/if}
+        {/each}
+    </g>
+</BaseMark_Text>
+
+<style>
+    text {
+        text-anchor: middle;
+        fill: none;
+        stroke: none;
+        font-size: 13px;
+        font-weight: 500;
+        stroke-width: 1.6px;
+    }
+</style>

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

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+import type { MarkProps, BaseMarkStyleProps, ChannelAccessor, DataRow } from '../types.js';
+export type TextMarkProps = MarkProps & BaseMarkStyleProps & {
+    data: DataRow[];
+    x?: ChannelAccessor;
+    y?: ChannelAccessor;
+    text?: ChannelAccessor;
+};
+declare const __propDef: {
+    props: TextMarkProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TextProps = typeof __propDef.props;
+export type TextEvents = typeof __propDef.events;
+export type TextSlots = typeof __propDef.slots;
+export default class Text extends SvelteComponentTyped<TextProps, TextEvents, TextSlots> {
+}
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "svelteplot",
-    "version": "0.0.1-alpha.24",
+    "version": "0.0.1-alpha.26",
     "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",