svelteplot 0.0.1-alpha.6 → 0.0.1-alpha.7

package/dist/Plot.svelte

@@ -1,11 +1,7 @@
 <script>import { setContext } from "svelte";
-import { Frame, GridX, GridY } from "./";
+import { Frame, GridX, GridY, AxisX, AxisY, ColorLegend, SymbolLegend } from "./index.js";
 import { DEFAULT_PLOT_OPTIONS, Plot } from "./classes/Plot.svelte";
 import mergeDeep from "./helpers/mergeDeep.js";
-import AxisX from "./marks/AxisX.svelte";
-import AxisY from "./marks/AxisY.svelte";
-import ColorLegend from "./marks/ColorLegend.svelte";
-import SymbolLegend from "./marks/SymbolLegend.svelte";
 let {
   // snippets
   header,

package/dist/Plot.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { PlotProps } from './types';
+import type { PlotProps } from './types.js';
 declare const __propDef: {
     props: PlotProps;
     events: {

package/dist/classes/Channel.svelte.js

@@ -1,6 +1,6 @@
 import resolveChannel from '../helpers/resolveChannel.js';
 import { extent } from 'd3-array';
-import { MARK_PROP_CHANNEL, CHANNEL_TYPES } from '../contants';
+import { MARK_PROP_CHANNEL } from '../contants.js';
 import { isBooleanOrNull, isColorOrNull, isDateOrNull, isNumberOrNull, isStringOrNull } from '../helpers/typeChecks.js';
 import { uniq } from 'underscore';
 export class Channel {

package/dist/helpers/GroupMultiple.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { DataRow } from '../types';
+import type { DataRow } from '../types.js';
 declare const __propDef: {
     props: {
         data: DataRow[];

package/dist/helpers/colors.d.ts

@@ -1,5 +1,5 @@
 import { interpolateBrBG } from 'd3-scale-chromatic';
-import type { ColorScheme } from '../types';
+import type { ColorScheme } from '../types.js';
 export declare const categoricalSchemes: Map<string, readonly string[]>;
 export declare function isCategoricalScheme(scheme: string): boolean;
 type SchemeGetter = (n: number) => readonly string[];

package/dist/helpers/getBaseStyles.d.ts

@@ -1,2 +1,2 @@
-import type { ChannelAccessor, MarkStyleProps, DataRow } from '../types';
+import type { ChannelAccessor, MarkStyleProps, DataRow } from '../types.js';
 export default function (datum: DataRow, props: Partial<Record<MarkStyleProps, ChannelAccessor>>): string;

package/dist/helpers/isDataRecord.d.ts

@@ -1,2 +1,2 @@
-import type { DataRecord } from '../types';
+import type { DataRecord } from '../types.js';
 export default function (value: any): value is DataRecord;

package/dist/helpers/typeChecks.d.ts

@@ -1,4 +1,4 @@
-import type { RawValue } from '../types';
+import type { RawValue } from '../types.js';
 export declare function isBooleanOrNull(v: RawValue): boolean;
 export declare function isDateOrNull(v: RawValue): boolean;
 export declare function isNumberOrNull(v: RawValue): boolean;

package/dist/helpers/wrapArray.d.ts

@@ -1,2 +1,2 @@
-import type { DataRow } from '../types';
-export default function (data: DataRow[]): (Date | [number, number] | import("../types").DataRecord)[];
+import type { DataRow } from '../types.js';
+export default function (data: DataRow[]): (Date | [number, number] | import("../types.js").DataRecord)[];

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

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { AxisMarkOptions } from '../types';
+import type { AxisMarkOptions } from '../types.js';
 declare const __propDef: {
     props: AxisMarkOptions & {
         anchor?: "bottom" | "top" | undefined;

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

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { AxisYMarkProps } from '../types';
+import type { AxisYMarkProps } from '../types.js';
 declare const __propDef: {
     props: AxisYMarkProps;
     events: {

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

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { BaseMarkProps } from '../types';
+import type { BaseMarkProps } from '../types.js';
 declare class __sveltets_Render<T extends BaseMarkProps> {
     props(): T & {
         children?: Function | undefined;

package/dist/marks/ColorLegend.svelte

@@ -5,29 +5,29 @@ const plot = getContext("svelteplot");
 </script>
 
 {#if plot.color.manualActiveMarks.length > 0}
-<div class="color-legend">
-    {#each plot.colorScale.domain() as value}
-        {@const symbolV = plot.symbolScale(value)}
-        {@const symbolType = maybeSymbol(symbolV)}
-        <div class="item">
-            <div class="swatch">
-                <svg width="15" height="15"
-                    >{#if plot.colorSymbolRedundant}
-                        <path
-                            transform="translate(7.5,7.5)"
-                            fill={plot.hasFilledDotMarks ? plot.colorScale(value) : 'none'}
-                            stroke={plot.hasFilledDotMarks ? null : plot.colorScale(value)}
-                            d={d3Symbol(symbolType, 40)()}
-                        />
-                    {:else}
-                        <rect fill={plot.colorScale(value)} width="15" height="15" />
-                    {/if}</svg
-                >
+    <div class="color-legend">
+        {#each plot.colorScale.domain() as value}
+            {@const symbolV = plot.symbolScale(value)}
+            {@const symbolType = maybeSymbol(symbolV)}
+            <div class="item">
+                <div class="swatch">
+                    <svg width="15" height="15"
+                        >{#if plot.colorSymbolRedundant}
+                            <path
+                                transform="translate(7.5,7.5)"
+                                fill={plot.hasFilledDotMarks ? plot.colorScale(value) : 'none'}
+                                stroke={plot.hasFilledDotMarks ? null : plot.colorScale(value)}
+                                d={d3Symbol(symbolType, 40)()}
+                            />
+                        {:else}
+                            <rect fill={plot.colorScale(value)} width="15" height="15" />
+                        {/if}</svg
+                    >
+                </div>
+                <span class="item-label">{value}</span>
             </div>
-            <span class="item-label">{value}</span>
-        </div>
-    {/each}
-</div>
+        {/each}
+    </div>
 {/if}
 
 <style>
@@ -40,7 +40,9 @@ const plot = getContext("svelteplot");
     .item {
         margin: 0 1em 0.5ex 0;
     }
-    path { stroke-width: 1.5;}
+    path {
+        stroke-width: 1.5;
+    }
     .item,
     .item-label,
     .swatch {

package/dist/marks/Dot.svelte

@@ -30,10 +30,10 @@ function isValid(value) {
     {data}
     channels={[
         ...(x ? ['x'] : []),
-        ...(y ? ['y'] : []), 
-        ...(r ? ['radius'] : []), 
-        ...(symbol ? ['symbol'] : []), 
-        ...(fill || stroke ? ['color']: [])
+        ...(y ? ['y'] : []),
+        ...(r ? ['radius'] : []),
+        ...(symbol ? ['symbol'] : []),
+        ...(fill || stroke ? ['color'] : [])
     ]}
     {x}
     {y}

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

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { DotMarkProps } from '../types';
+import type { DotMarkProps } from '../types.js';
 declare const __propDef: {
     props: DotMarkProps;
     events: {

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

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { RawValue } from '../types';
+import type { RawValue } from '../types.js';
 declare const __propDef: {
     props: {
         data: RawValue[];

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

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { RawValue } from '../types';
+import type { RawValue } from '../types.js';
 declare const __propDef: {
     props: {
         data: RawValue[];

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

@@ -1,7 +1,7 @@
 import { SvelteComponent } from "svelte";
-import type { FrameProps } from '../types';
+import type { FrameProps } from '../types.js';
 declare const __propDef: {
-    props: import("../types").BaseMarkStyleProps;
+    props: import("../types.js").BaseMarkStyleProps;
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/dist/marks/GridX.svelte

@@ -1,8 +1,8 @@
 <script>import { getContext } from "svelte";
+import { get } from "underscore";
 import BaseMark from "./BaseMark.svelte";
 import resolveChannel from "../helpers/resolveChannel.js";
 import getBaseStyles from "../helpers/getBaseStyles.js";
-import { get } from "underscore";
 const BaseMark_GridX = BaseMark;
 const plot = getContext("svelteplot");
 let {

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

@@ -1,9 +1,9 @@
 import { SvelteComponent } from "svelte";
-import type { GridOptions } from '../types';
+import type { GridOptions } from '../types.js';
 declare const __propDef: {
-    props: Partial<import("../types").MarkProps> & GridOptions & {
-        y1?: import("../types").ChannelAccessor | undefined;
-        y2?: import("../types").ChannelAccessor | undefined;
+    props: Partial<import("../types.js").MarkProps> & GridOptions & {
+        y1?: import("../types.js").ChannelAccessor | undefined;
+        y2?: import("../types.js").ChannelAccessor | undefined;
         automatic?: boolean | undefined;
     };
     events: {

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

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { GridYMarkProps } from '../types';
+import type { GridYMarkProps } from '../types.js';
 declare const __propDef: {
     props: GridYMarkProps;
     events: {

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

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { LineMarkProps } from '../types';
+import type { LineMarkProps } from '../types.js';
 declare const __propDef: {
     props: LineMarkProps;
     events: {

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

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { RawValue } from '../types';
+import type { RawValue } from '../types.js';
 declare const __propDef: {
     props: {
         data: RawValue[];

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

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { RawValue } from '../types';
+import type { RawValue } from '../types.js';
 declare const __propDef: {
     props: {
         data: RawValue[];

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

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { RuleXMarkProps } from '../types';
+import type { RuleXMarkProps } from '../types.js';
 declare const __propDef: {
     props: RuleXMarkProps;
     events: {

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

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { RuleYMarkProps } from '../types';
+import type { RuleYMarkProps } from '../types.js';
 declare const __propDef: {
     props: RuleYMarkProps;
     events: {

package/dist/marks/SymbolLegend.svelte

@@ -5,28 +5,26 @@ const plot = getContext("svelteplot");
 </script>
 
 {#if plot.color.manualActiveMarks.length > 0 && !(plot.options.color?.legend && plot.colorSymbolRedundant)}
-<div class="symbol-legend">
-    {#each plot.symbolScale.domain() as value}
-        {@const symbolV = plot.symbolScale(value)}
-        {@const symbolType = maybeSymbol(symbolV)}
-        {@const color = plot.colorSymbolRedundant ? plot.colorScale(value) : 'currentColor'}
-        <div class="item">
-            <div class="swatch">
-                <svg width="15" height="15"
-                    >
+    <div class="symbol-legend">
+        {#each plot.symbolScale.domain() as value}
+            {@const symbolV = plot.symbolScale(value)}
+            {@const symbolType = maybeSymbol(symbolV)}
+            {@const color = plot.colorSymbolRedundant ? plot.colorScale(value) : 'currentColor'}
+            <div class="item">
+                <div class="swatch">
+                    <svg width="15" height="15">
                         <path
                             transform="translate(7.5,7.5)"
                             fill={plot.hasFilledDotMarks ? color : 'none'}
                             stroke={plot.hasFilledDotMarks ? null : color}
                             d={d3Symbol(symbolType, 40)()}
                         />
-                   </svg
-                >
+                    </svg>
+                </div>
+                <span class="item-label">{value}</span>
             </div>
-            <span class="item-label">{value}</span>
-        </div>
-    {/each}
-</div>
+        {/each}
+    </div>
 {/if}
 
 <style>
@@ -38,7 +36,9 @@ const plot = getContext("svelteplot");
     .item {
         margin: 0 1em 0.5ex 0;
     }
-    path { stroke-width: 1.5;}
+    path {
+        stroke-width: 1.5;
+    }
     .item,
     .item-label,
     .swatch {

package/dist/types.d.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-import type { CHANNEL_TYPES } from './contants';
+import type { CHANNEL_TYPES } from './contants.js';
 import type { Plot } from './classes/Plot.svelte';
 import type { MouseEventHandler } from 'svelte/elements';
 export type Datasets = {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "svelteplot",
-    "version": "0.0.1-alpha.6",
+    "version": "0.0.1-alpha.7",
     "scripts": {
         "dev": "vite dev",
         "build": "vite build",