svelte-plots-basic 1.0.7 → 1.1.0

package/dist/index.mjs

@@ -156,12 +156,65 @@ function set_style(node, key, value, important) {
         node.style.setProperty(key, value, important ? 'important' : '');
     }
 }
+// unfortunately this can't be a constant as that wouldn't be tree-shakeable
+// so we cache the result instead
+let crossorigin;
+function is_crossorigin() {
+    if (crossorigin === undefined) {
+        crossorigin = false;
+        try {
+            if (typeof window !== 'undefined' && window.parent) {
+                void window.parent.document;
+            }
+        }
+        catch (error) {
+            crossorigin = true;
+        }
+    }
+    return crossorigin;
+}
+function add_resize_listener(node, fn) {
+    const computed_style = getComputedStyle(node);
+    if (computed_style.position === 'static') {
+        node.style.position = 'relative';
+    }
+    const iframe = element('iframe');
+    iframe.setAttribute('style', 'display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; ' +
+        'overflow: hidden; border: 0; opacity: 0; pointer-events: none; z-index: -1;');
+    iframe.setAttribute('aria-hidden', 'true');
+    iframe.tabIndex = -1;
+    const crossorigin = is_crossorigin();
+    let unsubscribe;
+    if (crossorigin) {
+        iframe.src = "data:text/html,<script>onresize=function(){parent.postMessage(0,'*')}</script>";
+        unsubscribe = listen(window, 'message', (event) => {
+            if (event.source === iframe.contentWindow)
+                fn();
+        });
+    }
+    else {
+        iframe.src = 'about:blank';
+        iframe.onload = () => {
+            unsubscribe = listen(iframe.contentWindow, 'resize', fn);
+        };
+    }
+    append(node, iframe);
+    return () => {
+        if (crossorigin) {
+            unsubscribe();
+        }
+        else if (unsubscribe && iframe.contentWindow) {
+            unsubscribe();
+        }
+        detach(iframe);
+    };
+}
 function toggle_class(element, name, toggle) {
     element.classList[toggle ? 'add' : 'remove'](name);
 }
-function custom_event(type, detail, bubbles = false) {
+function custom_event(type, detail, { bubbles = false, cancelable = false } = {}) {
     const e = document.createEvent('CustomEvent');
-    e.initCustomEvent(type, bubbles, false, detail);
+    e.initCustomEvent(type, bubbles, cancelable, detail);
     return e;
 }
 
@@ -174,25 +227,25 @@ function get_current_component() {
         throw new Error('Function called outside component initialization');
     return current_component;
 }
-function onMount(fn) {
-    get_current_component().$$.on_mount.push(fn);
-}
 function createEventDispatcher() {
     const component = get_current_component();
-    return (type, detail) => {
+    return (type, detail, { cancelable = false } = {}) => {
         const callbacks = component.$$.callbacks[type];
         if (callbacks) {
             // TODO are there situations where events could be dispatched
             // in a server (non-DOM) environment?
-            const event = custom_event(type, detail);
+            const event = custom_event(type, detail, { cancelable });
             callbacks.slice().forEach(fn => {
                 fn.call(component, event);
             });
+            return !event.defaultPrevented;
         }
+        return true;
     };
 }
 function setContext(key, context) {
     get_current_component().$$.context.set(key, context);
+    return context;
 }
 function getContext(key) {
     return get_current_component().$$.context.get(key);
@@ -493,7 +546,7 @@ function writable(value, start = noop) {
     return { set, update, subscribe };
 }
 
-/* src/Axes.svelte generated by Svelte v3.46.3 */
+/* src/Axes.svelte generated by Svelte v3.48.0 */
 
 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}");
@@ -506,7 +559,7 @@ const get_yaxis_slot_context = ctx => ({});
 const get_xaxis_slot_changes = dirty => ({});
 const get_xaxis_slot_context = ctx => ({});
 
-// (338:3) {#if title !== ""}
+// (329:3) {#if title !== ""}
 function create_if_block_3(ctx) {
 	let div;
 
@@ -527,7 +580,7 @@ function create_if_block_3(ctx) {
 	};
 }
 
-// (339:3) {#if yLabel !== ""}
+// (330:3) {#if yLabel !== ""}
 function create_if_block_2(ctx) {
 	let div;
 	let span;
@@ -551,7 +604,7 @@ function create_if_block_2(ctx) {
 	};
 }
 
-// (340:3) {#if xLabel !== ""}
+// (331:3) {#if xLabel !== ""}
 function create_if_block_1(ctx) {
 	let div;
 	let span;
@@ -575,7 +628,7 @@ function create_if_block_1(ctx) {
 	};
 }
 
-// (368:3) {#if !$isOk}
+// (359:3) {#if !$isOk}
 function create_if_block$9(ctx) {
 	let p;
 
@@ -612,23 +665,25 @@ function create_fragment$b(ctx) {
 	let rect_width_value;
 	let rect_height_value;
 	let g;
+	let div0_resize_listener;
 	let t3;
 	let div1_class_value;
+	let div1_resize_listener;
 	let current;
 	let mounted;
 	let dispose;
 	let if_block0 = /*title*/ ctx[0] !== "" && create_if_block_3(ctx);
 	let if_block1 = /*yLabel*/ ctx[2] !== "" && create_if_block_2(ctx);
 	let if_block2 = /*xLabel*/ ctx[1] !== "" && create_if_block_1(ctx);
-	const xaxis_slot_template = /*#slots*/ ctx[26].xaxis;
-	const xaxis_slot = create_slot(xaxis_slot_template, ctx, /*$$scope*/ ctx[25], get_xaxis_slot_context);
-	const yaxis_slot_template = /*#slots*/ ctx[26].yaxis;
-	const yaxis_slot = create_slot(yaxis_slot_template, ctx, /*$$scope*/ ctx[25], get_yaxis_slot_context);
-	const default_slot_template = /*#slots*/ ctx[26].default;
-	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[25], null);
-	const box_slot_template = /*#slots*/ ctx[26].box;
-	const box_slot = create_slot(box_slot_template, ctx, /*$$scope*/ ctx[25], get_box_slot_context);
-	let if_block3 = !/*$isOk*/ ctx[3] && create_if_block$9();
+	const xaxis_slot_template = /*#slots*/ ctx[27].xaxis;
+	const xaxis_slot = create_slot(xaxis_slot_template, ctx, /*$$scope*/ ctx[26], get_xaxis_slot_context);
+	const yaxis_slot_template = /*#slots*/ ctx[27].yaxis;
+	const yaxis_slot = create_slot(yaxis_slot_template, ctx, /*$$scope*/ ctx[26], get_yaxis_slot_context);
+	const default_slot_template = /*#slots*/ ctx[27].default;
+	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[26], null);
+	const box_slot_template = /*#slots*/ ctx[27].box;
+	const box_slot = create_slot(box_slot_template, ctx, /*$$scope*/ ctx[26], get_box_slot_context);
+	let if_block3 = !/*$isOk*/ ctx[6] && create_if_block$9();
 
 	return {
 		c() {
@@ -652,17 +707,19 @@ function create_fragment$b(ctx) {
 			t3 = space();
 			if (if_block3) if_block3.c();
 			set_style(rect, "pointer-events", "none");
-			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(clipPath, "id", /*clipPathID*/ ctx[8]);
-			attr(g, "clip-path", "url(#" + /*clipPathID*/ ctx[8] + ")");
+			attr(rect, "x", rect_x_value = /*cpx*/ ctx[10][0]);
+			attr(rect, "y", rect_y_value = /*cpy*/ ctx[9][1]);
+			attr(rect, "width", rect_width_value = /*cpx*/ ctx[10][1] - /*cpx*/ ctx[10][0]);
+			attr(rect, "height", rect_height_value = /*cpy*/ ctx[9][0] - /*cpy*/ ctx[9][1]);
+			attr(clipPath, "id", /*clipPathID*/ ctx[11]);
+			attr(g, "clip-path", "url(#" + /*clipPathID*/ ctx[11] + ")");
 			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");
-			toggle_class(div1, "plot_error", !/*$isOk*/ ctx[3]);
+			add_render_callback(() => /*div0_elementresize_handler*/ ctx[28].call(div0));
+			attr(div1, "class", div1_class_value = "plot " + ('plot_' + /*$scale*/ ctx[8]) + " svelte-n80kcc");
+			add_render_callback(() => /*div1_elementresize_handler*/ ctx[29].call(div1));
+			toggle_class(div1, "plot_error", !/*$isOk*/ ctx[6]);
 		},
 		m(target, anchor) {
 			insert(target, div1, anchor);
@@ -696,13 +753,14 @@ function create_fragment$b(ctx) {
 				box_slot.m(svg, null);
 			}
 
-			/*div0_binding*/ ctx[27](div0);
+			div0_resize_listener = add_resize_listener(div0, /*div0_elementresize_handler*/ ctx[28].bind(div0));
 			append(div1, t3);
 			if (if_block3) if_block3.m(div1, null);
+			div1_resize_listener = add_resize_listener(div1, /*div1_elementresize_handler*/ ctx[29].bind(div1));
 			current = true;
 
 			if (!mounted) {
-				dispose = listen(svg, "click", /*handleClick*/ ctx[15]);
+				dispose = listen(svg, "click", /*handleClick*/ ctx[18]);
 				mounted = true;
 			}
 		},
@@ -746,83 +804,83 @@ 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*/ 1024 && rect_x_value !== (rect_x_value = /*cpx*/ ctx[10][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*/ 512 && rect_y_value !== (rect_y_value = /*cpy*/ ctx[9][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*/ 1024 && rect_width_value !== (rect_width_value = /*cpx*/ ctx[10][1] - /*cpx*/ ctx[10][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*/ 512 && rect_height_value !== (rect_height_value = /*cpy*/ ctx[9][0] - /*cpy*/ ctx[9][1])) {
 				attr(rect, "height", rect_height_value);
 			}
 
 			if (xaxis_slot) {
-				if (xaxis_slot.p && (!current || dirty[0] & /*$$scope*/ 33554432)) {
+				if (xaxis_slot.p && (!current || dirty[0] & /*$$scope*/ 67108864)) {
 					update_slot_base(
 						xaxis_slot,
 						xaxis_slot_template,
 						ctx,
-						/*$$scope*/ ctx[25],
+						/*$$scope*/ ctx[26],
 						!current
-						? get_all_dirty_from_scope(/*$$scope*/ ctx[25])
-						: get_slot_changes(xaxis_slot_template, /*$$scope*/ ctx[25], dirty, get_xaxis_slot_changes),
+						? get_all_dirty_from_scope(/*$$scope*/ ctx[26])
+						: get_slot_changes(xaxis_slot_template, /*$$scope*/ ctx[26], dirty, get_xaxis_slot_changes),
 						get_xaxis_slot_context
 					);
 				}
 			}
 
 			if (yaxis_slot) {
-				if (yaxis_slot.p && (!current || dirty[0] & /*$$scope*/ 33554432)) {
+				if (yaxis_slot.p && (!current || dirty[0] & /*$$scope*/ 67108864)) {
 					update_slot_base(
 						yaxis_slot,
 						yaxis_slot_template,
 						ctx,
-						/*$$scope*/ ctx[25],
+						/*$$scope*/ ctx[26],
 						!current
-						? get_all_dirty_from_scope(/*$$scope*/ ctx[25])
-						: get_slot_changes(yaxis_slot_template, /*$$scope*/ ctx[25], dirty, get_yaxis_slot_changes),
+						? get_all_dirty_from_scope(/*$$scope*/ ctx[26])
+						: get_slot_changes(yaxis_slot_template, /*$$scope*/ ctx[26], dirty, get_yaxis_slot_changes),
 						get_yaxis_slot_context
 					);
 				}
 			}
 
 			if (default_slot) {
-				if (default_slot.p && (!current || dirty[0] & /*$$scope*/ 33554432)) {
+				if (default_slot.p && (!current || dirty[0] & /*$$scope*/ 67108864)) {
 					update_slot_base(
 						default_slot,
 						default_slot_template,
 						ctx,
-						/*$$scope*/ ctx[25],
+						/*$$scope*/ ctx[26],
 						!current
-						? get_all_dirty_from_scope(/*$$scope*/ ctx[25])
-						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[25], dirty, null),
+						? get_all_dirty_from_scope(/*$$scope*/ ctx[26])
+						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[26], dirty, null),
 						null
 					);
 				}
 			}
 
 			if (box_slot) {
-				if (box_slot.p && (!current || dirty[0] & /*$$scope*/ 33554432)) {
+				if (box_slot.p && (!current || dirty[0] & /*$$scope*/ 67108864)) {
 					update_slot_base(
 						box_slot,
 						box_slot_template,
 						ctx,
-						/*$$scope*/ ctx[25],
+						/*$$scope*/ ctx[26],
 						!current
-						? get_all_dirty_from_scope(/*$$scope*/ ctx[25])
-						: get_slot_changes(box_slot_template, /*$$scope*/ ctx[25], dirty, get_box_slot_changes),
+						? get_all_dirty_from_scope(/*$$scope*/ ctx[26])
+						: get_slot_changes(box_slot_template, /*$$scope*/ ctx[26], dirty, get_box_slot_changes),
 						get_box_slot_context
 					);
 				}
 			}
 
-			if (!/*$isOk*/ ctx[3]) {
+			if (!/*$isOk*/ ctx[6]) {
 				if (if_block3) ; else {
 					if_block3 = create_if_block$9();
 					if_block3.c();
@@ -833,12 +891,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]) + " svelte-n80kcc")) {
+			if (!current || dirty[0] & /*$scale*/ 256 && div1_class_value !== (div1_class_value = "plot " + ('plot_' + /*$scale*/ ctx[8]) + " svelte-n80kcc")) {
 				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*/ 320) {
+				toggle_class(div1, "plot_error", !/*$isOk*/ ctx[6]);
 			}
 		},
 		i(local) {
@@ -865,8 +923,9 @@ function create_fragment$b(ctx) {
 			if (yaxis_slot) yaxis_slot.d(detaching);
 			if (default_slot) default_slot.d(detaching);
 			if (box_slot) box_slot.d(detaching);
-			/*div0_binding*/ ctx[27](null);
+			div0_resize_listener();
 			if (if_block3) if_block3.d();
+			div1_resize_listener();
 			mounted = false;
 			dispose();
 		}
@@ -939,39 +998,40 @@ function instance$b($$self, $$props, $$invalidate) {
 	const clipPathID = "plottingArea" + Math.round(Math.random() * 10000);
 
 	/* parameters for internal use inside the component */
-	let axesWrapper; // pointer to axes wrapper DOM element
+	let plotWidth; // width of plot
 
+	let plotHeight; // height of plot
 	let axesMargins = [0.034, 0.034, 0.034, 0.034]; // initial margins (will be multiplied to FACTORS)
 
 	/* reactive parameters to be shared with children via context */
 	const width = writable(100); // actual width of plotting area in pixels
 
-	component_subscribe($$self, width, value => $$invalidate(23, $width = value));
+	component_subscribe($$self, width, value => $$invalidate(7, $width = value));
 	const height = writable(100); // actual height of plotting area in pixels
-	component_subscribe($$self, height, value => $$invalidate(21, $height = value));
+	component_subscribe($$self, height, value => $$invalidate(5, $height = value));
 	const xLim = writable([undefined, undefined]); // actual limits for x-axis in plot units
-	component_subscribe($$self, xLim, value => $$invalidate(24, $xLim = value));
+	component_subscribe($$self, xLim, value => $$invalidate(25, $xLim = value));
 	const yLim = writable([undefined, undefined]); // actual limits for y-axis in plot units
-	component_subscribe($$self, yLim, value => $$invalidate(22, $yLim = value));
+	component_subscribe($$self, yLim, value => $$invalidate(24, $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(8, $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(6, $isOk = value));
 
 	/** Adds margins for x-axis (e.g. when x-axis must be shown) */
 	const addXAxisMargins = function () {
-		$$invalidate(19, axesMargins[0] = 1, axesMargins);
-		$$invalidate(19, axesMargins[2] = 0.5, axesMargins);
-		$$invalidate(19, axesMargins[1] = axesMargins[1] > 0.5 ? axesMargins[1] : 0.5, axesMargins);
-		$$invalidate(19, axesMargins[3] = axesMargins[3] > 0.5 ? axesMargins[3] : 0.5, axesMargins);
+		$$invalidate(22, axesMargins[0] = 1, axesMargins);
+		$$invalidate(22, axesMargins[2] = 0.5, axesMargins);
+		$$invalidate(22, axesMargins[1] = axesMargins[1] > 0.5 ? axesMargins[1] : 0.5, axesMargins);
+		$$invalidate(22, axesMargins[3] = axesMargins[3] > 0.5 ? axesMargins[3] : 0.5, axesMargins);
 	};
 
 	/** Adds margins for y-axis (e.g. when y-axis must be shown) */
 	const addYAxisMargins = function () {
-		$$invalidate(19, axesMargins[1] = 1, axesMargins);
-		$$invalidate(19, axesMargins[3] = 0.5, axesMargins);
-		$$invalidate(19, axesMargins[0] = axesMargins[0] > 0.5 ? axesMargins[0] : 0.5, axesMargins);
-		$$invalidate(19, axesMargins[2] = axesMargins[2] > 0.5 ? axesMargins[2] : 0.5, axesMargins);
+		$$invalidate(22, axesMargins[1] = 1, axesMargins);
+		$$invalidate(22, axesMargins[3] = 0.5, axesMargins);
+		$$invalidate(22, axesMargins[0] = axesMargins[0] > 0.5 ? axesMargins[0] : 0.5, axesMargins);
+		$$invalidate(22, axesMargins[2] = axesMargins[2] > 0.5 ? axesMargins[2] : 0.5, axesMargins);
 	};
 
 	/** Adjusts limits for x-axis (e.g. when new series is added)
@@ -1120,20 +1180,6 @@ function instance$b($$self, $$props, $$invalidate) {
 
 	setContext('axes', context);
 
-	/* observer for the plotting area size */
-	var ro = new ResizeObserver(entries => {
-			for (let entry of entries) {
-				const cr = entry.contentRect;
-				width.update(x => cr.width);
-				height.update(x => cr.height);
-				scale.update(x => getScale(cr.width, cr.height));
-			}
-		});
-
-	onMount(() => {
-		ro.observe(axesWrapper);
-	});
-
 	// handle click on plot elements and dispatch manual events
 	function dispatchClickEvent(eventName, el) {
 		dispatch(eventName, {
@@ -1159,51 +1205,63 @@ function instance$b($$self, $$props, $$invalidate) {
 		dispatch("axesclick");
 	}
 
-	function div0_binding($$value) {
-		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
-			axesWrapper = $$value;
-			$$invalidate(5, axesWrapper);
-		});
+	function div0_elementresize_handler() {
+		$height = this.clientHeight;
+		height.set($height);
+		$width = this.clientWidth;
+		width.set($width);
+	}
+
+	function div1_elementresize_handler() {
+		plotHeight = this.clientHeight;
+		plotWidth = this.clientWidth;
+		$$invalidate(4, plotHeight);
+		$$invalidate(3, plotWidth);
 	}
 
 	$$self.$$set = $$props => {
-		if ('limX' in $$props) $$invalidate(16, limX = $$props.limX);
-		if ('limY' in $$props) $$invalidate(17, limY = $$props.limY);
+		if ('limX' in $$props) $$invalidate(19, limX = $$props.limX);
+		if ('limY' in $$props) $$invalidate(20, limY = $$props.limY);
 		if ('title' in $$props) $$invalidate(0, title = $$props.title);
 		if ('xLabel' in $$props) $$invalidate(1, xLabel = $$props.xLabel);
 		if ('yLabel' in $$props) $$invalidate(2, yLabel = $$props.yLabel);
-		if ('multiSeries' in $$props) $$invalidate(18, multiSeries = $$props.multiSeries);
-		if ('$$scope' in $$props) $$invalidate(25, $$scope = $$props.$$scope);
+		if ('multiSeries' in $$props) $$invalidate(21, multiSeries = $$props.multiSeries);
+		if ('$$scope' in $$props) $$invalidate(26, $$scope = $$props.$$scope);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty[0] & /*limX*/ 65536) {
+		if ($$self.$$.dirty[0] & /*plotWidth, plotHeight*/ 24) {
+			// update plot scale based on its size
+			scale.update(x => getScale(plotWidth, plotHeight));
+		}
+
+		if ($$self.$$.dirty[0] & /*limX*/ 524288) {
 			// this is reactive in case if limX and limY are interactively changed by parent script
 			if (!limX.some(v => v === undefined)) xLim.update(v => limX);
 		}
 
-		if ($$self.$$.dirty[0] & /*limY*/ 131072) {
+		if ($$self.$$.dirty[0] & /*limY*/ 1048576) {
 			if (!limY.some(v => v === undefined)) yLim.update(v => limY);
 		}
 
-		if ($$self.$$.dirty[0] & /*axesMargins, $scale*/ 524304) {
+		if ($$self.$$.dirty[0] & /*axesMargins, $scale*/ 4194560) {
 			// computes real margins in pixels based on current scale
-			$$invalidate(20, margins = axesMargins.map(v => v * AXES_MARGIN_FACTORS[$scale]));
+			$$invalidate(23, margins = axesMargins.map(v => v * AXES_MARGIN_FACTORS[$scale]));
 		}
 
-		if ($$self.$$.dirty[0] & /*$yLim, $xLim, $width, margins, $height*/ 32505856) {
+		if ($$self.$$.dirty[0] & /*$yLim, $xLim, $width, margins, $height*/ 58720416) {
 			// 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] && $width > margins[1] + margins[3] && $height > margins[0] + margins[2]);
 		}
 
-		if ($$self.$$.dirty[0] & /*$isOk, $xLim, $width*/ 25165832) {
+		if ($$self.$$.dirty[0] & /*$isOk, $xLim, $width*/ 33554624) {
 			// computes coordinates for clip path box
-			$$invalidate(7, cpx = $isOk ? scaleX($xLim, $xLim, $width) : [0, 1]);
+			$$invalidate(10, cpx = $isOk ? scaleX($xLim, $xLim, $width) : [0, 1]);
 		}
 
-		if ($$self.$$.dirty[0] & /*$isOk, $yLim, $height*/ 6291464) {
-			$$invalidate(6, cpy = $isOk ? scaleY($yLim, $yLim, $height) : [1, 0]);
+		if ($$self.$$.dirty[0] & /*$isOk, $yLim, $height*/ 16777312) {
+			$$invalidate(9, cpy = $isOk ? scaleY($yLim, $yLim, $height) : [1, 0]);
 		}
 	};
 
@@ -1211,9 +1269,12 @@ function instance$b($$self, $$props, $$invalidate) {
 		title,
 		xLabel,
 		yLabel,
+		plotWidth,
+		plotHeight,
+		$height,
 		$isOk,
+		$width,
 		$scale,
-		axesWrapper,
 		cpy,
 		cpx,
 		clipPathID,
@@ -1229,13 +1290,12 @@ function instance$b($$self, $$props, $$invalidate) {
 		multiSeries,
 		axesMargins,
 		margins,
-		$height,
 		$yLim,
-		$width,
 		$xLim,
 		$$scope,
 		slots,
-		div0_binding
+		div0_elementresize_handler,
+		div1_elementresize_handler
 	];
 }
 
@@ -1250,12 +1310,12 @@ class Axes extends SvelteComponent {
 			create_fragment$b,
 			safe_not_equal,
 			{
-				limX: 16,
-				limY: 17,
+				limX: 19,
+				limY: 20,
 				title: 0,
 				xLabel: 1,
 				yLabel: 2,
-				multiSeries: 18
+				multiSeries: 21
 			},
 			add_css$3,
 			[-1, -1]
@@ -1277,7 +1337,7 @@ const Colors = {
    "PRIMARY_TEXT": "#333",
 };
 
-/* src/XAxis.svelte generated by Svelte v3.46.3 */
+/* src/XAxis.svelte generated by Svelte v3.48.0 */
 
 function get_each_context$5(ctx, list, i) {
 	const child_ctx = ctx.slice();
@@ -1657,7 +1717,7 @@ class XAxis extends SvelteComponent {
 	}
 }
 
-/* src/YAxis.svelte generated by Svelte v3.46.3 */
+/* src/YAxis.svelte generated by Svelte v3.48.0 */
 
 function get_each_context$4(ctx, list, i) {
 	const child_ctx = ctx.slice();
@@ -2043,7 +2103,7 @@ class YAxis extends SvelteComponent {
 	}
 }
 
-/* src/Rectangles.svelte generated by Svelte v3.46.3 */
+/* src/Rectangles.svelte generated by Svelte v3.48.0 */
 
 function get_each_context$3(ctx, list, i) {
 	const child_ctx = ctx.slice();
@@ -2339,7 +2399,7 @@ class Rectangles extends SvelteComponent {
 	}
 }
 
-/* src/Box.svelte generated by Svelte v3.46.3 */
+/* src/Box.svelte generated by Svelte v3.48.0 */
 
 function create_if_block$5(ctx) {
 	let g;
@@ -2506,7 +2566,7 @@ class Box extends SvelteComponent {
 	}
 }
 
-/* src/Segments.svelte generated by Svelte v3.46.3 */
+/* src/Segments.svelte generated by Svelte v3.48.0 */
 
 function get_each_context$2(ctx, list, i) {
 	const child_ctx = ctx.slice();
@@ -2773,7 +2833,7 @@ class Segments extends SvelteComponent {
 	}
 }
 
-/* src/TextLabels.svelte generated by Svelte v3.46.3 */
+/* src/TextLabels.svelte generated by Svelte v3.48.0 */
 
 function add_css$2(target) {
 	append_styles(target, "svelte-1xvrp9d", "text.svelte-1xvrp9d,text.svelte-1xvrp9d>tspan{dominant-baseline:middle}");
@@ -3096,7 +3156,7 @@ class TextLabels extends SvelteComponent {
 	}
 }
 
-/* src/TextLegend.svelte generated by Svelte v3.46.3 */
+/* src/TextLegend.svelte generated by Svelte v3.48.0 */
 
 function get_each_context(ctx, list, i) {
 	const child_ctx = ctx.slice();
@@ -3364,7 +3424,7 @@ class TextLegend extends SvelteComponent {
 }
 
 /**********************************************
- * Functions for statistical tests            *
+ * Functions for statistical tests and models *
  **********************************************/
 
 
@@ -3420,7 +3480,7 @@ function diff(x) {
    return x.slice(1).map( (y, i) => (y - x[i]));
 }
 
-/* src/BarSeries.svelte generated by Svelte v3.46.3 */
+/* src/BarSeries.svelte generated by Svelte v3.48.0 */
 
 function add_css$1(target) {
 	append_styles(target, "svelte-kw726w", ".series_bar > rect{stroke-width:1px}.series_bar > rect:hover{opacity:90%}");
@@ -3588,7 +3648,7 @@ class BarSeries extends SvelteComponent {
 	}
 }
 
-/* src/ScatterSeries.svelte generated by Svelte v3.46.3 */
+/* src/ScatterSeries.svelte generated by Svelte v3.48.0 */
 
 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}");
@@ -3755,7 +3815,7 @@ class ScatterSeries extends SvelteComponent {
 	}
 }
 
-/* src/LineSeries.svelte generated by Svelte v3.46.3 */
+/* src/LineSeries.svelte generated by Svelte v3.48.0 */
 
 function create_if_block$1(ctx) {
 	let g;
@@ -3946,7 +4006,7 @@ class LineSeries extends SvelteComponent {
 	}
 }
 
-/* src/AreaSeries.svelte generated by Svelte v3.46.3 */
+/* src/AreaSeries.svelte generated by Svelte v3.48.0 */
 
 function create_if_block(ctx) {
 	let g;