svelte-plots-basic 1.1.1 → 1.1.3

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. 1.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.
+`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. 1.1.3) 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

@@ -108,6 +108,7 @@
     }
     function append_stylesheet(node, style) {
         append(node.head || node, style);
+        return style.sheet;
     }
     function insert(target, node, anchor) {
         target.insertBefore(node, anchor || null);
@@ -183,6 +184,9 @@
     function onMount(fn) {
         get_current_component().$$.on_mount.push(fn);
     }
+    function onDestroy(fn) {
+        get_current_component().$$.on_destroy.push(fn);
+    }
     function createEventDispatcher() {
         const component = get_current_component();
         return (type, detail, { cancelable = false } = {}) => {
@@ -324,6 +328,9 @@
             });
             block.o(local);
         }
+        else if (callback) {
+            callback();
+        }
     }
     function create_component(block) {
         block && block.c();
@@ -502,10 +509,10 @@
         return { set, update, subscribe };
     }
 
-    /* src/Axes.svelte generated by Svelte v3.48.0 */
+    /* src/Axes.svelte generated by Svelte v3.50.1 */
 
     function add_css$3(target) {
-    	append_styles(target, "svelte-n80kcc", ".plot{font-family:Arial, Helvetica, sans-serif;display:grid;grid-template-columns:min-content 1fr;grid-template-rows:auto 1fr auto;grid-template-areas:\". title\"\n         \"ylab axes\"\n         \". xlab\";box-sizing:border-box;background:#fefefe;min-width:100px;min-height:50px;width:100%;height:100%;padding:0;margin:0}.plot_small{font-size:11px}.plot_medium{font-size:13px}.plot_large{font-size:16px}.plot_error{display:flex}.plot_error > .axes-wrapper{display:none}.message_error{font-size:1.2em;color:crimson;padding:20px;text-align:center}.axes-wrapper.svelte-n80kcc{grid-area:axes;position:relative;box-sizing:border-box;display:flex;width:100%;height:100%;padding:0;margin:0}.axes{display:block;box-sizing:border-box;position:absolute;padding:0;margin:0;height:100%;width:100%;max-height:100%;max-width:100%;min-height:100%;min-width:100%}.axes__xlabel{grid-area:xlab;font-size:1.0em;font-weight:600;padding:0.25em;text-align:center}.axes__ylabel{grid-area:ylab;font-size:1.0em;font-weight:600;padding:0.25em;text-align:center;vertical-align:middle;display:flex}.axes__ylabel > span{width:1.5em;line-height:1.5em;display:inline-block;writing-mode:vertical-rl;transform:rotate(180deg)}.axes__title{background:transparent;grid-area:title;font-size:1.3em;font-weight:bold;line-height:1.2em;padding:0.5em 0;text-align:center}.axis-labels{fill:#303030;font-size:0.95em}.labels{fill:#606060;font-size:0.90em}.labels{visibility:hidden;transition:visibility 0.25s linear, opacity 0.25s linear;opacity:0}");
+    	append_styles(target, "svelte-jxlrcp", ".plot{font-family:Arial, Helvetica, sans-serif;display:grid;grid-template-columns:min-content auto;grid-template-rows:min-content auto min-content;grid-template-areas:\". title\"\n         \"ylab axes\"\n         \". xlab\";box-sizing:border-box;background:#fefefe;min-width:100px;min-height:50px;width:100%;height:100%;padding:0;margin:0}.plot_small{font-size:11px}.plot_medium{font-size:13px}.plot_large{font-size:16px}.plot_error{display:flex}.plot_error > .axes-wrapper{display:none}.message_error{font-size:1.2em;color:crimson;padding:20px;text-align:center}.axes-wrapper.svelte-jxlrcp{grid-area:axes;position:relative;box-sizing:border-box;display:flex;width:100%;height:100%;padding:0;margin:0}.axes{display:block;box-sizing:border-box;position:absolute;padding:0;margin:0;height:100%;width:100%;max-height:100%;max-width:100%;min-height:100%;min-width:100%}.axes-content{padding:0;margin:0;height:100%;width:100%;max-height:100%;max-width:100%;min-height:100%;min-width:100%}.axes__xlabel{grid-area:xlab;font-size:1.0em;font-weight:600;padding:0.25em;text-align:center}.axes__ylabel{grid-area:ylab;font-size:1.0em;font-weight:600;padding:0.25em;text-align:center;vertical-align:middle;display:flex}.axes__ylabel > span{width:1.5em;line-height:1.5em;display:inline-block;writing-mode:vertical-rl;transform:rotate(180deg)}.axes__title{background:transparent;grid-area:title;font-size:1.3em;font-weight:bold;line-height:1.2em;padding:0.5em 0;text-align:center}.axis-labels{fill:#303030;font-size:0.95em}.labels{fill:#606060;font-size:0.90em}.labels{visibility:hidden;transition:visibility 0.25s linear, opacity 0.25s linear;opacity:0}");
     }
 
     const get_box_slot_changes = dirty => ({});
@@ -515,7 +522,7 @@
     const get_xaxis_slot_changes = dirty => ({});
     const get_xaxis_slot_context = ctx => ({});
 
-    // (342:3) {#if title !== ""}
+    // (352:3) {#if title !== ""}
     function create_if_block_3(ctx) {
     	let div;
 
@@ -536,7 +543,7 @@
     	};
     }
 
-    // (343:3) {#if yLabel !== ""}
+    // (353:3) {#if yLabel !== ""}
     function create_if_block_2(ctx) {
     	let div;
     	let span;
@@ -560,7 +567,7 @@
     	};
     }
 
-    // (344:3) {#if xLabel !== ""}
+    // (354:3) {#if xLabel !== ""}
     function create_if_block_1(ctx) {
     	let div;
     	let span;
@@ -584,7 +591,7 @@
     	};
     }
 
-    // (372:3) {#if !$isOk}
+    // (382:3) {#if !$isOk}
     function create_if_block$9(ctx) {
     	let p;
 
@@ -666,11 +673,12 @@
     			attr(rect, "width", rect_width_value = /*cpx*/ ctx[8][1] - /*cpx*/ ctx[8][0]);
     			attr(rect, "height", rect_height_value = /*cpy*/ ctx[7][0] - /*cpy*/ ctx[7][1]);
     			attr(clipPath, "id", /*clipPathID*/ ctx[9]);
+    			attr(g, "class", "axes-content");
     			attr(g, "clip-path", "url(#" + /*clipPathID*/ ctx[9] + ")");
     			attr(svg, "preserveAspectRatio", "none");
     			attr(svg, "class", "axes");
-    			attr(div0, "class", "axes-wrapper svelte-n80kcc");
-    			attr(div1, "class", div1_class_value = "plot " + ('plot_' + /*$scale*/ ctx[4]) + " svelte-n80kcc");
+    			attr(div0, "class", "axes-wrapper svelte-jxlrcp");
+    			attr(div1, "class", div1_class_value = "plot " + ('plot_' + /*$scale*/ ctx[4]) + " svelte-jxlrcp");
     			toggle_class(div1, "plot_error", !/*$isOk*/ ctx[3]);
     		},
     		m(target, anchor) {
@@ -843,11 +851,11 @@
     				if_block3 = null;
     			}
 
-    			if (!current || dirty[0] & /*$scale*/ 16 && div1_class_value !== (div1_class_value = "plot " + ('plot_' + /*$scale*/ ctx[4]) + " svelte-n80kcc")) {
+    			if (!current || dirty[0] & /*$scale*/ 16 && div1_class_value !== (div1_class_value = "plot " + ('plot_' + /*$scale*/ ctx[4]) + " svelte-jxlrcp")) {
     				attr(div1, "class", div1_class_value);
     			}
 
-    			if (dirty[0] & /*$scale, $isOk*/ 24) {
+    			if (!current || dirty[0] & /*$scale, $isOk*/ 24) {
     				toggle_class(div1, "plot_error", !/*$isOk*/ ctx[3]);
     			}
     		},
@@ -1157,19 +1165,31 @@
     		dispatch("axesclick");
     	}
 
-    	/* observer for the plotting area size */
-    	var ro = new ResizeObserver(entries => {
+    	/* observer for the axes area size - to update size of axes */
+    	const ro2 = new ResizeObserver(entries => {
     			for (let entry of entries) {
-    				const pcr = plotElement.getBoundingClientRect();
     				const acr = axesElement.getBoundingClientRect();
     				width.update(x => acr.width);
     				height.update(x => acr.height);
+    			}
+    		});
+
+    	/* observer for the plot area size — to update scale */
+    	const ro1 = new ResizeObserver(entries => {
+    			for (let entry of entries) {
+    				const pcr = plotElement.getBoundingClientRect();
     				scale.update(x => getScale(pcr.width, pcr.height));
     			}
     		});
 
     	onMount(() => {
-    		ro.observe(plotElement);
+    		ro1.observe(plotElement);
+    		ro2.observe(axesElement);
+    	});
+
+    	onDestroy(() => {
+    		ro1.unobserve(plotElement);
+    		ro2.unobserve(axesElement);
     	});
 
     	function div0_binding($$value) {
@@ -1299,7 +1319,7 @@
        "PRIMARY_TEXT": "#333",
     };
 
-    /* src/XAxis.svelte generated by Svelte v3.48.0 */
+    /* src/XAxis.svelte generated by Svelte v3.50.1 */
 
     function get_each_context$5(ctx, list, i) {
     	const child_ctx = ctx.slice();
@@ -1679,7 +1699,7 @@
     	}
     }
 
-    /* src/YAxis.svelte generated by Svelte v3.48.0 */
+    /* src/YAxis.svelte generated by Svelte v3.50.1 */
 
     function get_each_context$4(ctx, list, i) {
     	const child_ctx = ctx.slice();
@@ -1792,7 +1812,6 @@
     	let t;
     	let text_1_x_value;
     	let text_1_y_value;
-    	let text_1_dy_value;
 
     	return {
     		c() {
@@ -1813,7 +1832,7 @@
     			attr(text_1, "x", text_1_x_value = /*ticksX*/ ctx[3][0]);
     			attr(text_1, "y", text_1_y_value = /*ty*/ ctx[26]);
     			attr(text_1, "dx", /*dx*/ ctx[2]);
-    			attr(text_1, "dy", text_1_dy_value = 0);
+    			attr(text_1, "dy", 0);
     			attr(text_1, "transform", /*transform*/ ctx[6]);
     			set_style(text_1, "background", "red");
     			attr(text_1, "class", "mdaplot__axis-labels");
@@ -2065,7 +2084,7 @@
     	}
     }
 
-    /* src/Rectangles.svelte generated by Svelte v3.48.0 */
+    /* src/Rectangles.svelte generated by Svelte v3.50.1 */
 
     function get_each_context$3(ctx, list, i) {
     	const child_ctx = ctx.slice();
@@ -2361,7 +2380,7 @@
     	}
     }
 
-    /* src/Box.svelte generated by Svelte v3.48.0 */
+    /* src/Box.svelte generated by Svelte v3.50.1 */
 
     function create_if_block$5(ctx) {
     	let g;
@@ -2528,7 +2547,7 @@
     	}
     }
 
-    /* src/Segments.svelte generated by Svelte v3.48.0 */
+    /* src/Segments.svelte generated by Svelte v3.50.1 */
 
     function get_each_context$2(ctx, list, i) {
     	const child_ctx = ctx.slice();
@@ -2795,7 +2814,7 @@
     	}
     }
 
-    /* src/TextLabels.svelte generated by Svelte v3.48.0 */
+    /* src/TextLabels.svelte generated by Svelte v3.50.1 */
 
     function add_css$2(target) {
     	append_styles(target, "svelte-1xvrp9d", "text.svelte-1xvrp9d,text.svelte-1xvrp9d>tspan{dominant-baseline:middle}");
@@ -2885,14 +2904,13 @@
     function create_each_block$1(ctx) {
     	let text_1;
     	let raw_value = /*labels*/ ctx[0][/*i*/ ctx[29]] + "";
-    	let text_1_data_id_value;
     	let text_1_x_value;
     	let text_1_y_value;
 
     	return {
     		c() {
     			text_1 = svg_element("text");
-    			attr(text_1, "data-id", text_1_data_id_value = /*i*/ ctx[29]);
+    			attr(text_1, "data-id", /*i*/ ctx[29]);
     			attr(text_1, "x", text_1_x_value = /*x*/ ctx[7][/*i*/ ctx[29]]);
     			attr(text_1, "y", text_1_y_value = /*y*/ ctx[6][/*i*/ ctx[29]]);
     			attr(text_1, "dx", /*dx*/ ctx[5]);
@@ -3118,7 +3136,7 @@
     	}
     }
 
-    /* src/TextLegend.svelte generated by Svelte v3.48.0 */
+    /* src/TextLegend.svelte generated by Svelte v3.50.1 */
 
     function get_each_context(ctx, list, i) {
     	const child_ctx = ctx.slice();
@@ -3442,7 +3460,7 @@
        return x.slice(1).map( (y, i) => (y - x[i]));
     }
 
-    /* src/BarSeries.svelte generated by Svelte v3.48.0 */
+    /* src/BarSeries.svelte generated by Svelte v3.50.1 */
 
     function add_css$1(target) {
     	append_styles(target, "svelte-kw726w", ".series_bar > rect{stroke-width:1px}.series_bar > rect:hover{opacity:90%}");
@@ -3610,7 +3628,7 @@
     	}
     }
 
-    /* src/ScatterSeries.svelte generated by Svelte v3.48.0 */
+    /* src/ScatterSeries.svelte generated by Svelte v3.50.1 */
 
     function add_css(target) {
     	append_styles(target, "svelte-byxua3", ".series_scatter > text{font-size:1em;cursor:default}.series_scatter > text:hover{opacity:90%}.series_scatter > *:hover + .labels_hover{visibility:visible;opacity:1}");
@@ -3777,7 +3795,7 @@
     	}
     }
 
-    /* src/LineSeries.svelte generated by Svelte v3.48.0 */
+    /* src/LineSeries.svelte generated by Svelte v3.50.1 */
 
     function create_if_block$1(ctx) {
     	let g;
@@ -3968,7 +3986,7 @@
     	}
     }
 
-    /* src/AreaSeries.svelte generated by Svelte v3.48.0 */
+    /* src/AreaSeries.svelte generated by Svelte v3.50.1 */
 
     function create_if_block(ctx) {
     	let g;

package/dist/index.mjs

@@ -102,6 +102,7 @@ function get_root_for_style(node) {
 }
 function append_stylesheet(node, style) {
     append(node.head || node, style);
+    return style.sheet;
 }
 function insert(target, node, anchor) {
     target.insertBefore(node, anchor || null);
@@ -177,6 +178,9 @@ function get_current_component() {
 function onMount(fn) {
     get_current_component().$$.on_mount.push(fn);
 }
+function onDestroy(fn) {
+    get_current_component().$$.on_destroy.push(fn);
+}
 function createEventDispatcher() {
     const component = get_current_component();
     return (type, detail, { cancelable = false } = {}) => {
@@ -318,6 +322,9 @@ function transition_out(block, local, detach, callback) {
         });
         block.o(local);
     }
+    else if (callback) {
+        callback();
+    }
 }
 function create_component(block) {
     block && block.c();
@@ -496,10 +503,10 @@ function writable(value, start = noop) {
     return { set, update, subscribe };
 }
 
-/* src/Axes.svelte generated by Svelte v3.48.0 */
+/* src/Axes.svelte generated by Svelte v3.50.1 */
 
 function add_css$3(target) {
-	append_styles(target, "svelte-n80kcc", ".plot{font-family:Arial, Helvetica, sans-serif;display:grid;grid-template-columns:min-content 1fr;grid-template-rows:auto 1fr auto;grid-template-areas:\". title\"\n         \"ylab axes\"\n         \". xlab\";box-sizing:border-box;background:#fefefe;min-width:100px;min-height:50px;width:100%;height:100%;padding:0;margin:0}.plot_small{font-size:11px}.plot_medium{font-size:13px}.plot_large{font-size:16px}.plot_error{display:flex}.plot_error > .axes-wrapper{display:none}.message_error{font-size:1.2em;color:crimson;padding:20px;text-align:center}.axes-wrapper.svelte-n80kcc{grid-area:axes;position:relative;box-sizing:border-box;display:flex;width:100%;height:100%;padding:0;margin:0}.axes{display:block;box-sizing:border-box;position:absolute;padding:0;margin:0;height:100%;width:100%;max-height:100%;max-width:100%;min-height:100%;min-width:100%}.axes__xlabel{grid-area:xlab;font-size:1.0em;font-weight:600;padding:0.25em;text-align:center}.axes__ylabel{grid-area:ylab;font-size:1.0em;font-weight:600;padding:0.25em;text-align:center;vertical-align:middle;display:flex}.axes__ylabel > span{width:1.5em;line-height:1.5em;display:inline-block;writing-mode:vertical-rl;transform:rotate(180deg)}.axes__title{background:transparent;grid-area:title;font-size:1.3em;font-weight:bold;line-height:1.2em;padding:0.5em 0;text-align:center}.axis-labels{fill:#303030;font-size:0.95em}.labels{fill:#606060;font-size:0.90em}.labels{visibility:hidden;transition:visibility 0.25s linear, opacity 0.25s linear;opacity:0}");
+	append_styles(target, "svelte-jxlrcp", ".plot{font-family:Arial, Helvetica, sans-serif;display:grid;grid-template-columns:min-content auto;grid-template-rows:min-content auto min-content;grid-template-areas:\". title\"\n         \"ylab axes\"\n         \". xlab\";box-sizing:border-box;background:#fefefe;min-width:100px;min-height:50px;width:100%;height:100%;padding:0;margin:0}.plot_small{font-size:11px}.plot_medium{font-size:13px}.plot_large{font-size:16px}.plot_error{display:flex}.plot_error > .axes-wrapper{display:none}.message_error{font-size:1.2em;color:crimson;padding:20px;text-align:center}.axes-wrapper.svelte-jxlrcp{grid-area:axes;position:relative;box-sizing:border-box;display:flex;width:100%;height:100%;padding:0;margin:0}.axes{display:block;box-sizing:border-box;position:absolute;padding:0;margin:0;height:100%;width:100%;max-height:100%;max-width:100%;min-height:100%;min-width:100%}.axes-content{padding:0;margin:0;height:100%;width:100%;max-height:100%;max-width:100%;min-height:100%;min-width:100%}.axes__xlabel{grid-area:xlab;font-size:1.0em;font-weight:600;padding:0.25em;text-align:center}.axes__ylabel{grid-area:ylab;font-size:1.0em;font-weight:600;padding:0.25em;text-align:center;vertical-align:middle;display:flex}.axes__ylabel > span{width:1.5em;line-height:1.5em;display:inline-block;writing-mode:vertical-rl;transform:rotate(180deg)}.axes__title{background:transparent;grid-area:title;font-size:1.3em;font-weight:bold;line-height:1.2em;padding:0.5em 0;text-align:center}.axis-labels{fill:#303030;font-size:0.95em}.labels{fill:#606060;font-size:0.90em}.labels{visibility:hidden;transition:visibility 0.25s linear, opacity 0.25s linear;opacity:0}");
 }
 
 const get_box_slot_changes = dirty => ({});
@@ -509,7 +516,7 @@ const get_yaxis_slot_context = ctx => ({});
 const get_xaxis_slot_changes = dirty => ({});
 const get_xaxis_slot_context = ctx => ({});
 
-// (342:3) {#if title !== ""}
+// (352:3) {#if title !== ""}
 function create_if_block_3(ctx) {
 	let div;
 
@@ -530,7 +537,7 @@ function create_if_block_3(ctx) {
 	};
 }
 
-// (343:3) {#if yLabel !== ""}
+// (353:3) {#if yLabel !== ""}
 function create_if_block_2(ctx) {
 	let div;
 	let span;
@@ -554,7 +561,7 @@ function create_if_block_2(ctx) {
 	};
 }
 
-// (344:3) {#if xLabel !== ""}
+// (354:3) {#if xLabel !== ""}
 function create_if_block_1(ctx) {
 	let div;
 	let span;
@@ -578,7 +585,7 @@ function create_if_block_1(ctx) {
 	};
 }
 
-// (372:3) {#if !$isOk}
+// (382:3) {#if !$isOk}
 function create_if_block$9(ctx) {
 	let p;
 
@@ -660,11 +667,12 @@ function create_fragment$b(ctx) {
 			attr(rect, "width", rect_width_value = /*cpx*/ ctx[8][1] - /*cpx*/ ctx[8][0]);
 			attr(rect, "height", rect_height_value = /*cpy*/ ctx[7][0] - /*cpy*/ ctx[7][1]);
 			attr(clipPath, "id", /*clipPathID*/ ctx[9]);
+			attr(g, "class", "axes-content");
 			attr(g, "clip-path", "url(#" + /*clipPathID*/ ctx[9] + ")");
 			attr(svg, "preserveAspectRatio", "none");
 			attr(svg, "class", "axes");
-			attr(div0, "class", "axes-wrapper svelte-n80kcc");
-			attr(div1, "class", div1_class_value = "plot " + ('plot_' + /*$scale*/ ctx[4]) + " svelte-n80kcc");
+			attr(div0, "class", "axes-wrapper svelte-jxlrcp");
+			attr(div1, "class", div1_class_value = "plot " + ('plot_' + /*$scale*/ ctx[4]) + " svelte-jxlrcp");
 			toggle_class(div1, "plot_error", !/*$isOk*/ ctx[3]);
 		},
 		m(target, anchor) {
@@ -837,11 +845,11 @@ 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]) + " svelte-n80kcc")) {
+			if (!current || dirty[0] & /*$scale*/ 16 && div1_class_value !== (div1_class_value = "plot " + ('plot_' + /*$scale*/ ctx[4]) + " svelte-jxlrcp")) {
 				attr(div1, "class", div1_class_value);
 			}
 
-			if (dirty[0] & /*$scale, $isOk*/ 24) {
+			if (!current || dirty[0] & /*$scale, $isOk*/ 24) {
 				toggle_class(div1, "plot_error", !/*$isOk*/ ctx[3]);
 			}
 		},
@@ -1151,19 +1159,31 @@ function instance$b($$self, $$props, $$invalidate) {
 		dispatch("axesclick");
 	}
 
-	/* observer for the plotting area size */
-	var ro = new ResizeObserver(entries => {
+	/* observer for the axes area size - to update size of axes */
+	const ro2 = new ResizeObserver(entries => {
 			for (let entry of entries) {
-				const pcr = plotElement.getBoundingClientRect();
 				const acr = axesElement.getBoundingClientRect();
 				width.update(x => acr.width);
 				height.update(x => acr.height);
+			}
+		});
+
+	/* observer for the plot area size — to update scale */
+	const ro1 = new ResizeObserver(entries => {
+			for (let entry of entries) {
+				const pcr = plotElement.getBoundingClientRect();
 				scale.update(x => getScale(pcr.width, pcr.height));
 			}
 		});
 
 	onMount(() => {
-		ro.observe(plotElement);
+		ro1.observe(plotElement);
+		ro2.observe(axesElement);
+	});
+
+	onDestroy(() => {
+		ro1.unobserve(plotElement);
+		ro2.unobserve(axesElement);
 	});
 
 	function div0_binding($$value) {
@@ -1293,7 +1313,7 @@ const Colors = {
    "PRIMARY_TEXT": "#333",
 };
 
-/* src/XAxis.svelte generated by Svelte v3.48.0 */
+/* src/XAxis.svelte generated by Svelte v3.50.1 */
 
 function get_each_context$5(ctx, list, i) {
 	const child_ctx = ctx.slice();
@@ -1673,7 +1693,7 @@ class XAxis extends SvelteComponent {
 	}
 }
 
-/* src/YAxis.svelte generated by Svelte v3.48.0 */
+/* src/YAxis.svelte generated by Svelte v3.50.1 */
 
 function get_each_context$4(ctx, list, i) {
 	const child_ctx = ctx.slice();
@@ -1786,7 +1806,6 @@ function create_each_block$4(ctx) {
 	let t;
 	let text_1_x_value;
 	let text_1_y_value;
-	let text_1_dy_value;
 
 	return {
 		c() {
@@ -1807,7 +1826,7 @@ function create_each_block$4(ctx) {
 			attr(text_1, "x", text_1_x_value = /*ticksX*/ ctx[3][0]);
 			attr(text_1, "y", text_1_y_value = /*ty*/ ctx[26]);
 			attr(text_1, "dx", /*dx*/ ctx[2]);
-			attr(text_1, "dy", text_1_dy_value = 0);
+			attr(text_1, "dy", 0);
 			attr(text_1, "transform", /*transform*/ ctx[6]);
 			set_style(text_1, "background", "red");
 			attr(text_1, "class", "mdaplot__axis-labels");
@@ -2059,7 +2078,7 @@ class YAxis extends SvelteComponent {
 	}
 }
 
-/* src/Rectangles.svelte generated by Svelte v3.48.0 */
+/* src/Rectangles.svelte generated by Svelte v3.50.1 */
 
 function get_each_context$3(ctx, list, i) {
 	const child_ctx = ctx.slice();
@@ -2355,7 +2374,7 @@ class Rectangles extends SvelteComponent {
 	}
 }
 
-/* src/Box.svelte generated by Svelte v3.48.0 */
+/* src/Box.svelte generated by Svelte v3.50.1 */
 
 function create_if_block$5(ctx) {
 	let g;
@@ -2522,7 +2541,7 @@ class Box extends SvelteComponent {
 	}
 }
 
-/* src/Segments.svelte generated by Svelte v3.48.0 */
+/* src/Segments.svelte generated by Svelte v3.50.1 */
 
 function get_each_context$2(ctx, list, i) {
 	const child_ctx = ctx.slice();
@@ -2789,7 +2808,7 @@ class Segments extends SvelteComponent {
 	}
 }
 
-/* src/TextLabels.svelte generated by Svelte v3.48.0 */
+/* src/TextLabels.svelte generated by Svelte v3.50.1 */
 
 function add_css$2(target) {
 	append_styles(target, "svelte-1xvrp9d", "text.svelte-1xvrp9d,text.svelte-1xvrp9d>tspan{dominant-baseline:middle}");
@@ -2879,14 +2898,13 @@ function create_if_block$3(ctx) {
 function create_each_block$1(ctx) {
 	let text_1;
 	let raw_value = /*labels*/ ctx[0][/*i*/ ctx[29]] + "";
-	let text_1_data_id_value;
 	let text_1_x_value;
 	let text_1_y_value;
 
 	return {
 		c() {
 			text_1 = svg_element("text");
-			attr(text_1, "data-id", text_1_data_id_value = /*i*/ ctx[29]);
+			attr(text_1, "data-id", /*i*/ ctx[29]);
 			attr(text_1, "x", text_1_x_value = /*x*/ ctx[7][/*i*/ ctx[29]]);
 			attr(text_1, "y", text_1_y_value = /*y*/ ctx[6][/*i*/ ctx[29]]);
 			attr(text_1, "dx", /*dx*/ ctx[5]);
@@ -3112,7 +3130,7 @@ class TextLabels extends SvelteComponent {
 	}
 }
 
-/* src/TextLegend.svelte generated by Svelte v3.48.0 */
+/* src/TextLegend.svelte generated by Svelte v3.50.1 */
 
 function get_each_context(ctx, list, i) {
 	const child_ctx = ctx.slice();
@@ -3436,7 +3454,7 @@ function diff(x) {
    return x.slice(1).map( (y, i) => (y - x[i]));
 }
 
-/* src/BarSeries.svelte generated by Svelte v3.48.0 */
+/* src/BarSeries.svelte generated by Svelte v3.50.1 */
 
 function add_css$1(target) {
 	append_styles(target, "svelte-kw726w", ".series_bar > rect{stroke-width:1px}.series_bar > rect:hover{opacity:90%}");
@@ -3604,7 +3622,7 @@ class BarSeries extends SvelteComponent {
 	}
 }
 
-/* src/ScatterSeries.svelte generated by Svelte v3.48.0 */
+/* src/ScatterSeries.svelte generated by Svelte v3.50.1 */
 
 function add_css(target) {
 	append_styles(target, "svelte-byxua3", ".series_scatter > text{font-size:1em;cursor:default}.series_scatter > text:hover{opacity:90%}.series_scatter > *:hover + .labels_hover{visibility:visible;opacity:1}");
@@ -3771,7 +3789,7 @@ class ScatterSeries extends SvelteComponent {
 	}
 }
 
-/* src/LineSeries.svelte generated by Svelte v3.48.0 */
+/* src/LineSeries.svelte generated by Svelte v3.50.1 */
 
 function create_if_block$1(ctx) {
 	let g;
@@ -3962,7 +3980,7 @@ class LineSeries extends SvelteComponent {
 	}
 }
 
-/* src/AreaSeries.svelte generated by Svelte v3.48.0 */
+/* src/AreaSeries.svelte generated by Svelte v3.50.1 */
 
 function create_if_block(ctx) {
 	let g;

package/package.json

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

package/src/Axes.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { setContext, createEventDispatcher, onMount } from 'svelte';
+	import { setContext, createEventDispatcher, onMount, onDestroy } from 'svelte';
 	import { writable } from 'svelte/store';
 
    /* input parameters */
@@ -317,22 +317,32 @@
    $: cpx = $isOk ? scaleX($xLim, $xLim, $width) : [0, 1];
    $: cpy = $isOk ? scaleY($yLim, $yLim, $height) : [1, 0];
 
-   /* observer for the plotting area size */
-    var ro = new ResizeObserver(entries => {
+   /* observer for the axes area size - to update size of axes */
+    const ro2 = new ResizeObserver(entries => {
        for (let entry of entries) {
-
-         const pcr = plotElement.getBoundingClientRect();
          const acr = axesElement.getBoundingClientRect();
-
          width.update(x => acr.width);
          height.update(x => acr.height);
+       }
+    });
+
+   /* observer for the plot area size — to update scale */
+    const ro1 = new ResizeObserver(entries => {
+       for (let entry of entries) {
+         const pcr = plotElement.getBoundingClientRect();
          scale.update(x => getScale(pcr.width, pcr.height));
        }
     });
 
     onMount(() => {
-       ro.observe(plotElement);
+       ro1.observe(plotElement);
+       ro2.observe(axesElement);
     });
+
+    onDestroy(() => {
+       ro1.unobserve(plotElement);
+       ro2.unobserve(axesElement);
+    })
 </script>
 
 
@@ -359,7 +369,7 @@
          <slot name="yaxis"></slot>
 
          <!-- main plot content -->
-         <g clip-path="url(#{clipPathID})">
+         <g class="axes-content" clip-path="url(#{clipPathID})">
             <slot></slot>
          </g>
 
@@ -385,8 +395,8 @@
       font-family: Arial, Helvetica, sans-serif;
 
       display: grid;
-      grid-template-columns: min-content 1fr;
-      grid-template-rows: auto 1fr auto;
+      grid-template-columns: min-content auto;
+      grid-template-rows: min-content auto min-content;
       grid-template-areas:
          ". title"
          "ylab axes"
@@ -456,6 +466,18 @@
       min-width: 100%;
    }
 
+   :global(.axes-content) {
+      padding: 0;
+      margin: 0;
+      height: 100%;
+      width: 100%;
+      max-height: 100%;
+      max-width: 100%;
+      min-height: 100%;
+      min-width: 100%;
+
+   }
+
    :global(.axes__xlabel) {
       grid-area: xlab;
       font-size: 1.0em;