svelteplot 0.3.8-pr-134.3 → 0.3.8-pr-143.0

package/dist/helpers/getBaseStyles.js

@@ -11,11 +11,16 @@ const styleProps = {
     blend: 'mix-blend-mode',
     clipPath: 'clip-path',
     mask: 'mask',
+    fontFamily: 'font-family',
     fontSize: 'font-size',
-    fontWeight: 'font-weight',
     fontStyle: 'font-style',
+    fontWeight: 'font-weight',
     textAnchor: 'text-anchor',
     fontVariant: 'font-variant',
+    letterSpacing: 'letter-spacing',
+    textDecoration: 'text-decoration',
+    textTransform: 'text-transform',
+    wordSpacing: 'word-spacing',
     cursor: 'cursor',
     pointerEvents: 'pointer-events'
 };

package/dist/helpers/index.js

@@ -23,7 +23,10 @@ export function isSnippet(value) {
     return typeof value === 'function' && value.length === 1;
 }
 export function isValid(value) {
-    return value !== null && value !== undefined && !Number.isNaN(value);
+    return (value !== null &&
+        value !== undefined &&
+        !Number.isNaN(value) &&
+        (typeof value !== 'number' || Number.isFinite(value)));
 }
 export function maybeData(data) {
     // if (data.type === 'FeatureCollection') return data.features;

package/dist/helpers/resolve.js

@@ -1,7 +1,7 @@
 import { CHANNEL_SCALE } from '../constants.js';
 import isDataRecord from './isDataRecord.js';
 import isRawValue from './isRawValue.js';
-import { isValid } from './isValid.js';
+import { isValid } from './index.js';
 import { getBaseStylesObject } from './getBaseStyles.js';
 import { RAW_VALUE } from '../transforms/recordize.js';
 export function resolveProp(accessor, datum, _defaultValue = null) {

package/dist/marks/AxisX.svelte

@@ -209,7 +209,9 @@
             )}
             x={plot.options.marginLeft +
                 plot.plotWidth * (titleAlign === 'right' ? 1 : titleAlign === 'center' ? 0.5 : 0)}
-            y={anchor === 'top' ? 13 : plot.height - 13}
+            y={anchor === 'top'
+                ? (options.titleFontSize || 11) + 5
+                : plot.height - (options.titleFontSize || 11) - 5}
             class="axis-x-title"
             dominant-baseline={anchor === 'top' ? 'auto' : 'hanging'}>{useTitle}</text>
     {/if}

package/dist/marks/Cell.svelte

@@ -26,7 +26,7 @@
     import { recordizeY, sort } from '../index.js';
     import { resolveChannel } from '../helpers/resolve.js';
 
-    import { isValid } from '../helpers/isValid.js';
+    import { isValid } from '../helpers/index.js';
     import RectPath from './helpers/RectPath.svelte';
 
     let markProps: CellMarkProps = $props();

package/dist/marks/Dot.svelte

@@ -32,7 +32,6 @@
     import { recordizeXY } from '../transforms/recordize.js';
     import { addEventHandlers } from './helpers/events.js';
     import Anchor from './helpers/Anchor.svelte';
-    import type { D } from 'vitest/dist/chunks/reporters.d.DL9pg5DB.js';
 
     const DEFAULTS = {
         ...getContext<PlotDefaults>('svelteplot/_defaults').dot

package/dist/marks/Text.svelte

@@ -4,17 +4,27 @@
 -->
 
 <script lang="ts" generics="Datum extends DataRecord">
+    import type * as CSS from 'csstype';
+
     interface TextMarkProps extends BaseMarkProps<Datum>, LinkableMarkProps<Datum> {
-        data: Datum[];
-        x: ChannelAccessor<Datum>;
-        y: ChannelAccessor<Datum>;
+        data?: Datum[];
+        x?: ChannelAccessor<Datum>;
+        y?: ChannelAccessor<Datum>;
         children?: Snippet;
         text: ConstantAccessor<string | null | false | undefined, Datum>;
         title?: ConstantAccessor<string, Datum>;
         /**
          * the font size of the text
          */
-        fontSize?: ConstantAccessor<number, Datum>;
+        fontFamily?: ConstantAccessor<CSS.Property.FontFamily, Datum>;
+        fontSize?: ConstantAccessor<CSS.Property.FontSize, Datum>;
+        fontWeight?: ConstantAccessor<CSS.Property.FontWeight, Datum>;
+        fontStyle?: ConstantAccessor<CSS.Property.FontStyle, Datum>;
+        fontVariant?: ConstantAccessor<CSS.Property.FontVariant, Datum>;
+        letterSpacing?: ConstantAccessor<CSS.Property.LetterSpacing, Datum>;
+        wordSpacing?: ConstantAccessor<CSS.Property.WordSpacing, Datum>;
+        textTransform?: ConstantAccessor<CSS.Property.TextTransform, Datum>;
+        textDecoration?: ConstantAccessor<CSS.Property.TextDecoration, Datum>;
         /**
          * if you want to apply class names to individual text elements
          */
@@ -62,7 +72,7 @@
 
     const DEFAULTS = {
         fontSize: 12,
-        fontWeight: 500,
+        c: 500,
         strokeWidth: 1.6,
         frameAnchor: 'center',
         lineHeight: 1.1,

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

@@ -1,3 +1,4 @@
+import type * as CSS from 'csstype';
 import { type Snippet } from 'svelte';
 import type { DataRecord, ConstantAccessor, ChannelAccessor, RawValue, LinkableMarkProps } from '../types/index.js';
 declare class __sveltets_Render<Datum extends DataRecord> {
@@ -17,16 +18,16 @@ declare class __sveltets_Render<Datum extends DataRecord> {
         stroke: ChannelAccessor<Datum>;
         strokeWidth: ConstantAccessor<number, Datum>;
         strokeOpacity: ConstantAccessor<number, Datum>;
-        strokeLinejoin: ConstantAccessor<import("csstype").Property.StrokeLinejoin, Datum>;
-        strokeLinecap: ConstantAccessor<import("csstype").Property.StrokeLinecap, Datum>;
+        strokeLinejoin: ConstantAccessor<CSS.Property.StrokeLinejoin, Datum>;
+        strokeLinecap: ConstantAccessor<CSS.Property.StrokeLinecap, Datum>;
         strokeMiterlimit: ConstantAccessor<number, Datum>;
         opacity: ChannelAccessor<Datum>;
         strokeDasharray: ConstantAccessor<string, Datum>;
         strokeDashoffset: ConstantAccessor<number, Datum>;
-        mixBlendMode: ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
+        mixBlendMode: ConstantAccessor<CSS.Property.MixBlendMode, Datum>;
         clipPath: string;
         imageFilter: ConstantAccessor<string, Datum>;
-        shapeRendering: ConstantAccessor<import("csstype").Property.ShapeRendering, Datum>;
+        shapeRendering: ConstantAccessor<CSS.Property.ShapeRendering, Datum>;
         paintOrder: ConstantAccessor<string, Datum>;
         onclick?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
         ondblclick?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
@@ -59,18 +60,26 @@ declare class __sveltets_Render<Datum extends DataRecord> {
         oncontextmenu?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
         onwheel?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
         class: string | null;
-        cursor: ConstantAccessor<import("csstype").Property.Cursor, Datum>;
+        cursor: ConstantAccessor<CSS.Property.Cursor, Datum>;
     }> & LinkableMarkProps<Datum> & {
-        data: Datum[];
-        x: ChannelAccessor<Datum>;
-        y: ChannelAccessor<Datum>;
+        data?: Datum[] | undefined;
+        x?: ChannelAccessor<Datum>;
+        y?: ChannelAccessor<Datum>;
         children?: Snippet;
         text: ConstantAccessor<string | false | null | undefined, Datum>;
         title?: ConstantAccessor<string, Datum>;
         /**
          * the font size of the text
          */
-        fontSize?: ConstantAccessor<number, Datum>;
+        fontFamily?: ConstantAccessor<CSS.Property.FontFamily, Datum>;
+        fontSize?: ConstantAccessor<CSS.Property.FontSize<0 | (string & {})>, Datum>;
+        fontWeight?: ConstantAccessor<CSS.Property.FontWeight, Datum>;
+        fontStyle?: ConstantAccessor<CSS.Property.FontStyle, Datum>;
+        fontVariant?: ConstantAccessor<CSS.Property.FontVariant, Datum>;
+        letterSpacing?: ConstantAccessor<CSS.Property.LetterSpacing<0 | (string & {})>, Datum>;
+        wordSpacing?: ConstantAccessor<CSS.Property.WordSpacing<0 | (string & {})>, Datum>;
+        textTransform?: ConstantAccessor<CSS.Property.TextTransform, Datum>;
+        textDecoration?: ConstantAccessor<CSS.Property.TextDecoration<0 | (string & {})>, Datum>;
         /**
          * if you want to apply class names to individual text elements
          */

package/dist/marks/TickX.svelte

@@ -35,7 +35,7 @@
     } from '../types/index.js';
     import { recordizeX } from '../index.js';
     import { projectX, projectY } from '../helpers/scales.js';
-    import { isValid } from '../helpers/isValid.js';
+    import { isValid } from '../helpers/index.js';
     import { testFilter, parseInset } from '../helpers/index.js';
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');

package/dist/marks/TickY.svelte

@@ -34,7 +34,7 @@
     } from '../types/index.js';
     import { recordizeY } from '../index.js';
     import { projectX, projectY } from '../helpers/scales.js';
-    import { isValid } from '../helpers/isValid.js';
+    import { isValid } from '../helpers/index.js';
     import { testFilter, parseInset } from '../helpers/index.js';
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');

package/dist/types/mark.d.ts

@@ -7,7 +7,7 @@ export type Mark<T> = {
     options: T;
 };
 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';
+export type MarkStyleProps = 'strokeDasharray' | 'strokeLinejoin' | 'strokeLinecap' | 'opacity' | 'cursor' | 'pointerEvents' | 'blend' | 'fill' | 'fillOpacity' | 'fontFamily' | 'fontWeight' | 'fontVariant' | 'fontSize' | 'fontStyle' | 'letterSpacing' | 'wordSpacing' | 'stroke' | 'strokeWidth' | 'strokeOpacity' | 'x' | 'y' | 'clipPath' | 'mask' | 'filter' | 'angle' | 'radius' | 'symbol' | 'textAnchor' | 'textTransform' | 'textDecoration' | 'width';
 import type { MouseEventHandler } from 'svelte/elements';
 import type { ChannelAccessor, ConstantAccessor, DataRecord, RawValue } from './index.js';
 import type * as CSS from 'csstype';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "svelteplot",
-    "version": "0.3.8-pr-134.3",
+    "version": "0.3.8-pr-143.0",
     "license": "ISC",
     "author": {
         "name": "Gregor Aisch",

package/dist/helpers/isValid.d.ts

@@ -1,6 +0,0 @@
-/**
- * @deprecated import from helpers/index.ts instead!
- * @param value
- * @returns
- */
-export { isValid } from './index.js';

package/dist/helpers/isValid.js

@@ -1,6 +0,0 @@
-/**
- * @deprecated import from helpers/index.ts instead!
- * @param value
- * @returns
- */
-export { isValid } from './index.js';