svelteplot 0.0.1-alpha.25 → 0.0.1-alpha.26

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.25",
+    "version": "0.0.1-alpha.26",
     "scripts": {
         "dev": "vite dev",
         "build": "vite build",