svelteplot 0.0.1-alpha.10 → 0.0.1-alpha.11

package/dist/Plot.svelte

@@ -82,8 +82,8 @@ let hasLegend = $derived(color?.legend || symbol?.legend);
         onmousemove={onmousemove ? onMouseMove : null}
     >
         <!-- automatic grids -->
-        {#if grid || x?.grid}<GridX automatic />{/if}
-        {#if grid || y?.grid}<GridY automatic />{/if}
+        {#if (grid || x?.grid) && plot.hasChannelX}<GridX automatic />{/if}
+        {#if (grid || y?.grid) && plot.hasChannelY}<GridY automatic />{/if}
 
         {#if !plot.hasAxisXMark && plot.hasChannelX}
             <!-- automatic x axis -->

package/dist/classes/Plot.svelte.js

@@ -37,8 +37,8 @@ export class Plot {
     _height = $state(400);
     options = $state(DEFAULT_PLOT_OPTIONS);
     marks = $state([]);
-    hasChannelX = $derived(!!this.marks.find((mark) => mark.channels.has('x')));
-    hasChannelY = $derived(!!this.marks.find((mark) => mark.channels.has('y')));
+    hasChannelX = $derived(!!this.marks.find((mark) => !mark.automatic && mark.channels.has('x')));
+    hasChannelY = $derived(!!this.marks.find((mark) => !mark.automatic && mark.channels.has('y')));
     hasFilledDotMarks = $derived(!!this.marks.find((d) => d.type === 'dot' && d.props?.fill));
     manualMarks = $derived(this.marks.filter((mark) => !mark.automatic));
     singlePosChannelMark = $derived(this.manualMarks.length === 1 &&
@@ -90,7 +90,7 @@ export class Plot {
         // console.log('addMark: ' + mark);
         this.marks = [...this.marks, mark];
         // add mark to respective channels
-        // console.log(this.x.domain);
+        console.log('y', this.hasChannelY, this.marks.filter(m => !m.automatic && m.channels.has('y')));
     }
     removeMark(removeMark) {
         this.marks = this.marks.filter((mark) => mark.id !== removeMark.id);

package/dist/marks/AxisY.svelte

@@ -19,14 +19,14 @@ let {
 } = $props();
 let autoTickCount = $derived(plot.plotHeight / get(plot, "options.y.tickSpacing", 80));
 let autoTicks = $derived(
-  ticks.length > 0 ? ticks : get(plot, "options.y.ticks", plot.yScale.ticks(autoTickCount))
+  ticks.length > 0 ? ticks : plot.options.y?.ticks || plot.yScale.ticks(autoTickCount)
 );
 let useTickFormat = $derived(
-  typeof tickFormat === "function" ? tickFormat : plot.y.scaleType === "time" ? typeof tickFormat === "string" ? (d) => dayjs(d).format(tickFormat).split("\n") : autoTimeFormat(plot.y, plot.plotHeight) : (d) => String(d) + "x"
+  typeof tickFormat === "function" ? tickFormat : plot.y.scaleType === "time" ? typeof tickFormat === "string" ? (d) => dayjs(d).format(tickFormat).split("\n") : autoTimeFormat(plot.y, plot.plotHeight) : (d) => String(d)
 );
 let optionsLabel = $derived(plot.options.y?.label);
 let useTitle = $derived(
-  title || (optionsLabel === null ? null : optionsLabel !== void 0 ? optionsLabel : `\u2191 ${plot.y.autoTitle}`)
+  title || (optionsLabel === null ? null : optionsLabel !== void 0 ? optionsLabel : plot.y.autoTitle ? `\u2191 ${plot.y.autoTitle}` : "")
 );
 </script>
 

package/dist/marks/GridY.svelte

@@ -6,7 +6,7 @@ const plot = getContext("svelteplot");
 let { ticks = [], automatic = false, ...styleProps } = $props();
 let autoTickCount = $derived(plot.plotHeight / get(plot, "options.y.tickSpacing", 80));
 let autoTicks = $derived(
-  ticks.length > 0 ? ticks : get(plot, "options.y.ticks", plot.yScale.ticks(autoTickCount))
+  ticks.length > 0 ? ticks : plot.options.y?.ticks || plot.yScale.ticks(autoTickCount)
 );
 </script>
 

package/dist/marks/RuleX.svelte

@@ -4,11 +4,11 @@ import getBaseStyles from "../helpers/getBaseStyles.js";
 import resolveChannel from "../helpers/resolveChannel.js";
 const BaseMark_RuleX = BaseMark;
 const plot = getContext("svelteplot");
-let { data = [], x, y1, y2, ...styleProps } = $props();
+let { data = [], x, y1 = null, y2 = null, ...styleProps } = $props();
 let dataWrapped = $derived(x ? data : data.map((d) => ({ x: d, ___orig___: d })));
 </script>
 
-<BaseMark_RuleX type="rule-x" data={dataWrapped} channels={['x', 'y']} {x} {y1} {y2}>
+<BaseMark_RuleX type="rule-x" data={dataWrapped} channels={y1 || y2 ? ['x', 'y'] : ['x']} x={x || 'x'} {y1} {y2}>
     <g class="rule-x">
         {#each data as datum}
             <line

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "svelteplot",
-    "version": "0.0.1-alpha.10",
+    "version": "0.0.1-alpha.11",
     "scripts": {
         "dev": "vite dev",
         "build": "vite build",
@@ -34,6 +34,7 @@
         "@sveltejs/kit": "^1.27.6",
         "@types/chroma-js": "^2.4.3",
         "@types/d3-interpolate": "^3.0.4",
+        "@types/d3-random": "^3.0.3",
         "@types/d3-scale-chromatic": "^3.0.3",
         "@types/d3-shape": "^3.1.6",
         "@typescript-eslint/eslint-plugin": "^6.13.2",
@@ -68,6 +69,7 @@
         "chroma-js": "^2.4.2",
         "d3-array": "^3.2.4",
         "d3-interpolate": "^3.0.1",
+        "d3-random": "^3.0.1",
         "d3-scale": "^4.0.2",
         "d3-scale-chromatic": "^3.0.0",
         "d3-shape": "^3.2.0",