svelte-plots-basic 1.0.0 → 1.0.1

package/README.md

@@ -2,7 +2,7 @@
 
 ## Description
 
-`svelte-plots-basic` is a [Svelte](https://svelte.dev) component library for creating very simple 2D plots/charts. It is currently under active development and breaking changes may occur. In its current state (v. 0.1.0) it allows to create bar, scatter, area and line charts as well as any combination of the four. The charts are created using [SVG](https://en.wikipedia.org/wiki/Scalable_Vector_Graphics) and are re-scalable.
+`svelte-plots-basic` is a [Svelte](https://svelte.dev) component library for creating very simple 2D plots/charts. It is currently under active development and breaking changes may occur. In its current state (v. 0.1.1) it allows to create bar, scatter, area and line charts as well as any combination of the four. The charts are created using [SVG](https://en.wikipedia.org/wiki/Scalable_Vector_Graphics) and are re-scalable.
 
 The description is not complete yet and will be updated during February-March of 2022.
 

package/dist/index.js

@@ -489,7 +489,7 @@
     const get_xaxis_slot_changes = dirty => ({});
     const get_xaxis_slot_context = ctx => ({});
 
-    // (311:3) {#if title !== ""}
+    // (313:3) {#if title !== ""}
     function create_if_block_3(ctx) {
     	let div;
 
@@ -510,7 +510,7 @@
     	};
     }
 
-    // (312:3) {#if yLabel !== ""}
+    // (314:3) {#if yLabel !== ""}
     function create_if_block_2(ctx) {
     	let div;
     	let span;
@@ -534,7 +534,7 @@
     	};
     }
 
-    // (313:3) {#if xLabel !== ""}
+    // (315:3) {#if xLabel !== ""}
     function create_if_block_1(ctx) {
     	let div;
     	let span;
@@ -558,7 +558,7 @@
     	};
     }
 
-    // (341:3) {#if !$isOk}
+    // (343:3) {#if !$isOk}
     function create_if_block$9(ctx) {
     	let p;
 
@@ -609,7 +609,7 @@
     	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[23], null);
     	const box_slot_template = /*#slots*/ ctx[24].box;
     	const box_slot = create_slot(box_slot_template, ctx, /*$$scope*/ ctx[23], get_box_slot_context);
-    	let if_block3 = !/*$isOk*/ ctx[3] && create_if_block$9();
+    	let if_block3 = !/*$isOk*/ ctx[5] && create_if_block$9();
 
     	return {
     		c() {
@@ -632,17 +632,17 @@
     			if (box_slot) box_slot.c();
     			t3 = space();
     			if (if_block3) if_block3.c();
-    			attr(rect, "x", rect_x_value = /*cpx*/ ctx[7][0]);
-    			attr(rect, "y", rect_y_value = /*cpy*/ ctx[6][1]);
-    			attr(rect, "width", rect_width_value = /*cpx*/ ctx[7][1] - /*cpx*/ ctx[7][0]);
-    			attr(rect, "height", rect_height_value = /*cpy*/ ctx[6][0] - /*cpy*/ ctx[6][1]);
+    			attr(rect, "x", rect_x_value = /*cpx*/ ctx[4][0]);
+    			attr(rect, "y", rect_y_value = /*cpy*/ ctx[3][1]);
+    			attr(rect, "width", rect_width_value = /*cpx*/ ctx[4][1] - /*cpx*/ ctx[4][0]);
+    			attr(rect, "height", rect_height_value = /*cpy*/ ctx[3][0] - /*cpy*/ ctx[3][1]);
     			attr(clipPath, "id", /*clipPathID*/ ctx[8]);
     			attr(g, "clip-path", "url(#" + /*clipPathID*/ ctx[8] + ")");
     			attr(svg, "preserveAspectRatio", "none");
     			attr(svg, "class", "axes");
     			attr(div0, "class", "axes-wrapper");
-    			attr(div1, "class", div1_class_value = "plot " + ('plot_' + /*$scale*/ ctx[4]));
-    			toggle_class(div1, "plot_error", !/*$isOk*/ ctx[3]);
+    			attr(div1, "class", div1_class_value = "plot " + ('plot_' + /*$scale*/ ctx[6]));
+    			toggle_class(div1, "plot_error", !/*$isOk*/ ctx[5]);
     		},
     		m(target, anchor) {
     			insert(target, div1, anchor);
@@ -721,19 +721,19 @@
     				if_block2 = null;
     			}
 
-    			if (!current || dirty[0] & /*cpx*/ 128 && rect_x_value !== (rect_x_value = /*cpx*/ ctx[7][0])) {
+    			if (!current || dirty[0] & /*cpx*/ 16 && rect_x_value !== (rect_x_value = /*cpx*/ ctx[4][0])) {
     				attr(rect, "x", rect_x_value);
     			}
 
-    			if (!current || dirty[0] & /*cpy*/ 64 && rect_y_value !== (rect_y_value = /*cpy*/ ctx[6][1])) {
+    			if (!current || dirty[0] & /*cpy*/ 8 && rect_y_value !== (rect_y_value = /*cpy*/ ctx[3][1])) {
     				attr(rect, "y", rect_y_value);
     			}
 
-    			if (!current || dirty[0] & /*cpx*/ 128 && rect_width_value !== (rect_width_value = /*cpx*/ ctx[7][1] - /*cpx*/ ctx[7][0])) {
+    			if (!current || dirty[0] & /*cpx*/ 16 && rect_width_value !== (rect_width_value = /*cpx*/ ctx[4][1] - /*cpx*/ ctx[4][0])) {
     				attr(rect, "width", rect_width_value);
     			}
 
-    			if (!current || dirty[0] & /*cpy*/ 64 && rect_height_value !== (rect_height_value = /*cpy*/ ctx[6][0] - /*cpy*/ ctx[6][1])) {
+    			if (!current || dirty[0] & /*cpy*/ 8 && rect_height_value !== (rect_height_value = /*cpy*/ ctx[3][0] - /*cpy*/ ctx[3][1])) {
     				attr(rect, "height", rect_height_value);
     			}
 
@@ -797,7 +797,7 @@
     				}
     			}
 
-    			if (!/*$isOk*/ ctx[3]) {
+    			if (!/*$isOk*/ ctx[5]) {
     				if (if_block3) ; else {
     					if_block3 = create_if_block$9();
     					if_block3.c();
@@ -808,12 +808,12 @@
     				if_block3 = null;
     			}
 
-    			if (!current || dirty[0] & /*$scale*/ 16 && div1_class_value !== (div1_class_value = "plot " + ('plot_' + /*$scale*/ ctx[4]))) {
+    			if (!current || dirty[0] & /*$scale*/ 64 && div1_class_value !== (div1_class_value = "plot " + ('plot_' + /*$scale*/ ctx[6]))) {
     				attr(div1, "class", div1_class_value);
     			}
 
-    			if (dirty[0] & /*$scale, $isOk*/ 24) {
-    				toggle_class(div1, "plot_error", !/*$isOk*/ ctx[3]);
+    			if (dirty[0] & /*$scale, $isOk*/ 96) {
+    				toggle_class(div1, "plot_error", !/*$isOk*/ ctx[5]);
     			}
     		},
     		i(local) {
@@ -925,9 +925,9 @@
     	const yLim = writable([undefined, undefined]); // actual limits for y-axis in plot units
     	component_subscribe($$self, yLim, value => $$invalidate(20, $yLim = value));
     	const scale = writable("medium"); // scale factor (how big the shown plot is)
-    	component_subscribe($$self, scale, value => $$invalidate(4, $scale = value));
+    	component_subscribe($$self, scale, value => $$invalidate(6, $scale = value));
     	const isOk = writable(false); // are axes ready for drawing
-    	component_subscribe($$self, isOk, value => $$invalidate(3, $isOk = value));
+    	component_subscribe($$self, isOk, value => $$invalidate(5, $isOk = value));
 
     	/** Adds margins for x-axis (e.g. when x-axis must be shown) */
     	const addXAxisMargins = function () {
@@ -1108,7 +1108,7 @@
     	function div0_binding($$value) {
     		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
     			axesWrapper = $$value;
-    			$$invalidate(5, axesWrapper);
+    			$$invalidate(7, axesWrapper);
     		});
     	}
 
@@ -1132,24 +1132,24 @@
     			if (!limY.some(v => v === undefined)) yLim.update(v => limY);
     		}
 
-    		if ($$self.$$.dirty[0] & /*axesMargins, $scale*/ 262160) {
+    		if ($$self.$$.dirty[0] & /*axesMargins, $scale*/ 262208) {
     			// computes real margins in pixels based on current scale
     			margins = axesMargins.map(v => v * AXES_MARGIN_FACTORS[$scale]);
     		}
 
-    		if ($$self.$$.dirty[0] & /*$yLim, $xLim*/ 5242880) {
-    			// computes status which tells that axes limits look fine and it is safe to draw
-    			// the status is based on the axis limits validity
-    			isOk.update(v => Array.isArray($yLim) && Array.isArray($xLim) && $xLim.length === 2 && $yLim.length === 2 && !$yLim.some(v => v === undefined) && !$xLim.some(v => v === undefined) && !$yLim.some(v => isNaN(v)) && !$xLim.some(v => isNaN(v)) && $xLim[1] !== $xLim[0] && $yLim[1] !== $yLim[0]);
+    		if ($$self.$$.dirty[0] & /*$isOk, $yLim, $height*/ 1572896) {
+    			$$invalidate(3, cpy = $isOk ? scaleY($yLim, $yLim, $height) : [1, 0]);
     		}
 
-    		if ($$self.$$.dirty[0] & /*$isOk, $xLim, $width*/ 6291464) {
+    		if ($$self.$$.dirty[0] & /*$isOk, $xLim, $width*/ 6291488) {
     			// computes coordinates for clip path box
-    			$$invalidate(7, cpx = $isOk ? scaleX($xLim, $xLim, $width) : [0, 1]);
+    			$$invalidate(4, cpx = $isOk ? scaleX($xLim, $xLim, $width) : [0, 1]);
     		}
 
-    		if ($$self.$$.dirty[0] & /*$isOk, $yLim, $height*/ 1572872) {
-    			$$invalidate(6, cpy = $isOk ? scaleY($yLim, $yLim, $height) : [1, 0]);
+    		if ($$self.$$.dirty[0] & /*$yLim, $xLim, cpy, cpx*/ 5242904) {
+    			// computes status which tells that axes limits look fine and it is safe to draw
+    			// the status is based on the axis limits validity
+    			isOk.update(v => Array.isArray($yLim) && Array.isArray($xLim) && $xLim.length === 2 && $yLim.length === 2 && !$yLim.some(v => v === undefined) && !$xLim.some(v => v === undefined) && !$yLim.some(v => isNaN(v)) && !$xLim.some(v => isNaN(v)) && $xLim[1] !== $xLim[0] && $yLim[1] !== $yLim[0] && cpy[0] > cpy[1] && cpx[1] > cpx[0]);
     		}
     	};
 
@@ -1157,11 +1157,11 @@
     		title,
     		xLabel,
     		yLabel,
+    		cpy,
+    		cpx,
     		$isOk,
     		$scale,
     		axesWrapper,
-    		cpy,
-    		cpx,
     		clipPathID,
     		width,
     		height,

package/dist/index.mjs

@@ -483,7 +483,7 @@ const get_yaxis_slot_context = ctx => ({});
 const get_xaxis_slot_changes = dirty => ({});
 const get_xaxis_slot_context = ctx => ({});
 
-// (311:3) {#if title !== ""}
+// (313:3) {#if title !== ""}
 function create_if_block_3(ctx) {
 	let div;
 
@@ -504,7 +504,7 @@ function create_if_block_3(ctx) {
 	};
 }
 
-// (312:3) {#if yLabel !== ""}
+// (314:3) {#if yLabel !== ""}
 function create_if_block_2(ctx) {
 	let div;
 	let span;
@@ -528,7 +528,7 @@ function create_if_block_2(ctx) {
 	};
 }
 
-// (313:3) {#if xLabel !== ""}
+// (315:3) {#if xLabel !== ""}
 function create_if_block_1(ctx) {
 	let div;
 	let span;
@@ -552,7 +552,7 @@ function create_if_block_1(ctx) {
 	};
 }
 
-// (341:3) {#if !$isOk}
+// (343:3) {#if !$isOk}
 function create_if_block$9(ctx) {
 	let p;
 
@@ -603,7 +603,7 @@ function create_fragment$b(ctx) {
 	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[23], null);
 	const box_slot_template = /*#slots*/ ctx[24].box;
 	const box_slot = create_slot(box_slot_template, ctx, /*$$scope*/ ctx[23], get_box_slot_context);
-	let if_block3 = !/*$isOk*/ ctx[3] && create_if_block$9();
+	let if_block3 = !/*$isOk*/ ctx[5] && create_if_block$9();
 
 	return {
 		c() {
@@ -626,17 +626,17 @@ function create_fragment$b(ctx) {
 			if (box_slot) box_slot.c();
 			t3 = space();
 			if (if_block3) if_block3.c();
-			attr(rect, "x", rect_x_value = /*cpx*/ ctx[7][0]);
-			attr(rect, "y", rect_y_value = /*cpy*/ ctx[6][1]);
-			attr(rect, "width", rect_width_value = /*cpx*/ ctx[7][1] - /*cpx*/ ctx[7][0]);
-			attr(rect, "height", rect_height_value = /*cpy*/ ctx[6][0] - /*cpy*/ ctx[6][1]);
+			attr(rect, "x", rect_x_value = /*cpx*/ ctx[4][0]);
+			attr(rect, "y", rect_y_value = /*cpy*/ ctx[3][1]);
+			attr(rect, "width", rect_width_value = /*cpx*/ ctx[4][1] - /*cpx*/ ctx[4][0]);
+			attr(rect, "height", rect_height_value = /*cpy*/ ctx[3][0] - /*cpy*/ ctx[3][1]);
 			attr(clipPath, "id", /*clipPathID*/ ctx[8]);
 			attr(g, "clip-path", "url(#" + /*clipPathID*/ ctx[8] + ")");
 			attr(svg, "preserveAspectRatio", "none");
 			attr(svg, "class", "axes");
 			attr(div0, "class", "axes-wrapper");
-			attr(div1, "class", div1_class_value = "plot " + ('plot_' + /*$scale*/ ctx[4]));
-			toggle_class(div1, "plot_error", !/*$isOk*/ ctx[3]);
+			attr(div1, "class", div1_class_value = "plot " + ('plot_' + /*$scale*/ ctx[6]));
+			toggle_class(div1, "plot_error", !/*$isOk*/ ctx[5]);
 		},
 		m(target, anchor) {
 			insert(target, div1, anchor);
@@ -715,19 +715,19 @@ function create_fragment$b(ctx) {
 				if_block2 = null;
 			}
 
-			if (!current || dirty[0] & /*cpx*/ 128 && rect_x_value !== (rect_x_value = /*cpx*/ ctx[7][0])) {
+			if (!current || dirty[0] & /*cpx*/ 16 && rect_x_value !== (rect_x_value = /*cpx*/ ctx[4][0])) {
 				attr(rect, "x", rect_x_value);
 			}
 
-			if (!current || dirty[0] & /*cpy*/ 64 && rect_y_value !== (rect_y_value = /*cpy*/ ctx[6][1])) {
+			if (!current || dirty[0] & /*cpy*/ 8 && rect_y_value !== (rect_y_value = /*cpy*/ ctx[3][1])) {
 				attr(rect, "y", rect_y_value);
 			}
 
-			if (!current || dirty[0] & /*cpx*/ 128 && rect_width_value !== (rect_width_value = /*cpx*/ ctx[7][1] - /*cpx*/ ctx[7][0])) {
+			if (!current || dirty[0] & /*cpx*/ 16 && rect_width_value !== (rect_width_value = /*cpx*/ ctx[4][1] - /*cpx*/ ctx[4][0])) {
 				attr(rect, "width", rect_width_value);
 			}
 
-			if (!current || dirty[0] & /*cpy*/ 64 && rect_height_value !== (rect_height_value = /*cpy*/ ctx[6][0] - /*cpy*/ ctx[6][1])) {
+			if (!current || dirty[0] & /*cpy*/ 8 && rect_height_value !== (rect_height_value = /*cpy*/ ctx[3][0] - /*cpy*/ ctx[3][1])) {
 				attr(rect, "height", rect_height_value);
 			}
 
@@ -791,7 +791,7 @@ function create_fragment$b(ctx) {
 				}
 			}
 
-			if (!/*$isOk*/ ctx[3]) {
+			if (!/*$isOk*/ ctx[5]) {
 				if (if_block3) ; else {
 					if_block3 = create_if_block$9();
 					if_block3.c();
@@ -802,12 +802,12 @@ function create_fragment$b(ctx) {
 				if_block3 = null;
 			}
 
-			if (!current || dirty[0] & /*$scale*/ 16 && div1_class_value !== (div1_class_value = "plot " + ('plot_' + /*$scale*/ ctx[4]))) {
+			if (!current || dirty[0] & /*$scale*/ 64 && div1_class_value !== (div1_class_value = "plot " + ('plot_' + /*$scale*/ ctx[6]))) {
 				attr(div1, "class", div1_class_value);
 			}
 
-			if (dirty[0] & /*$scale, $isOk*/ 24) {
-				toggle_class(div1, "plot_error", !/*$isOk*/ ctx[3]);
+			if (dirty[0] & /*$scale, $isOk*/ 96) {
+				toggle_class(div1, "plot_error", !/*$isOk*/ ctx[5]);
 			}
 		},
 		i(local) {
@@ -919,9 +919,9 @@ function instance$b($$self, $$props, $$invalidate) {
 	const yLim = writable([undefined, undefined]); // actual limits for y-axis in plot units
 	component_subscribe($$self, yLim, value => $$invalidate(20, $yLim = value));
 	const scale = writable("medium"); // scale factor (how big the shown plot is)
-	component_subscribe($$self, scale, value => $$invalidate(4, $scale = value));
+	component_subscribe($$self, scale, value => $$invalidate(6, $scale = value));
 	const isOk = writable(false); // are axes ready for drawing
-	component_subscribe($$self, isOk, value => $$invalidate(3, $isOk = value));
+	component_subscribe($$self, isOk, value => $$invalidate(5, $isOk = value));
 
 	/** Adds margins for x-axis (e.g. when x-axis must be shown) */
 	const addXAxisMargins = function () {
@@ -1102,7 +1102,7 @@ function instance$b($$self, $$props, $$invalidate) {
 	function div0_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			axesWrapper = $$value;
-			$$invalidate(5, axesWrapper);
+			$$invalidate(7, axesWrapper);
 		});
 	}
 
@@ -1126,24 +1126,24 @@ function instance$b($$self, $$props, $$invalidate) {
 			if (!limY.some(v => v === undefined)) yLim.update(v => limY);
 		}
 
-		if ($$self.$$.dirty[0] & /*axesMargins, $scale*/ 262160) {
+		if ($$self.$$.dirty[0] & /*axesMargins, $scale*/ 262208) {
 			// computes real margins in pixels based on current scale
 			margins = axesMargins.map(v => v * AXES_MARGIN_FACTORS[$scale]);
 		}
 
-		if ($$self.$$.dirty[0] & /*$yLim, $xLim*/ 5242880) {
-			// computes status which tells that axes limits look fine and it is safe to draw
-			// the status is based on the axis limits validity
-			isOk.update(v => Array.isArray($yLim) && Array.isArray($xLim) && $xLim.length === 2 && $yLim.length === 2 && !$yLim.some(v => v === undefined) && !$xLim.some(v => v === undefined) && !$yLim.some(v => isNaN(v)) && !$xLim.some(v => isNaN(v)) && $xLim[1] !== $xLim[0] && $yLim[1] !== $yLim[0]);
+		if ($$self.$$.dirty[0] & /*$isOk, $yLim, $height*/ 1572896) {
+			$$invalidate(3, cpy = $isOk ? scaleY($yLim, $yLim, $height) : [1, 0]);
 		}
 
-		if ($$self.$$.dirty[0] & /*$isOk, $xLim, $width*/ 6291464) {
+		if ($$self.$$.dirty[0] & /*$isOk, $xLim, $width*/ 6291488) {
 			// computes coordinates for clip path box
-			$$invalidate(7, cpx = $isOk ? scaleX($xLim, $xLim, $width) : [0, 1]);
+			$$invalidate(4, cpx = $isOk ? scaleX($xLim, $xLim, $width) : [0, 1]);
 		}
 
-		if ($$self.$$.dirty[0] & /*$isOk, $yLim, $height*/ 1572872) {
-			$$invalidate(6, cpy = $isOk ? scaleY($yLim, $yLim, $height) : [1, 0]);
+		if ($$self.$$.dirty[0] & /*$yLim, $xLim, cpy, cpx*/ 5242904) {
+			// computes status which tells that axes limits look fine and it is safe to draw
+			// the status is based on the axis limits validity
+			isOk.update(v => Array.isArray($yLim) && Array.isArray($xLim) && $xLim.length === 2 && $yLim.length === 2 && !$yLim.some(v => v === undefined) && !$xLim.some(v => v === undefined) && !$yLim.some(v => isNaN(v)) && !$xLim.some(v => isNaN(v)) && $xLim[1] !== $xLim[0] && $yLim[1] !== $yLim[0] && cpy[0] > cpy[1] && cpx[1] > cpx[0]);
 		}
 	};
 
@@ -1151,11 +1151,11 @@ function instance$b($$self, $$props, $$invalidate) {
 		title,
 		xLabel,
 		yLabel,
+		cpy,
+		cpx,
 		$isOk,
 		$scale,
 		axesWrapper,
-		cpy,
-		cpx,
 		clipPathID,
 		width,
 		height,

package/package.json

@@ -25,7 +25,7 @@
     "dist"
   ],
   "description": "Svelte components for creating simple plots",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "repository": {
     "type": "git",
     "url": "svkucheryavski/svelte-plots-basic"

package/src/Axes.svelte

@@ -296,7 +296,9 @@
       !$yLim.some(v => isNaN(v)) &&
       !$xLim.some(v => isNaN(v)) &&
       $xLim[1] !== $xLim[0] &&
-      $yLim[1] !== $yLim[0]
+      $yLim[1] !== $yLim[0] &&
+      cpy[0] > cpy[1] &&
+      cpx[1] > cpx[0]
    )
 
    // computes coordinates for clip path box