svelte-plots-basic 1.0.5 → 1.1.0

package/dist/index.js

@@ -162,12 +162,65 @@
             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;
     }
 
@@ -180,25 +233,25 @@
             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);
@@ -499,7 +552,7 @@
         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}");
@@ -512,7 +565,7 @@
     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;
 
@@ -533,7 +586,7 @@
     	};
     }
 
-    // (339:3) {#if yLabel !== ""}
+    // (330:3) {#if yLabel !== ""}
     function create_if_block_2(ctx) {
     	let div;
     	let span;
@@ -557,7 +610,7 @@
     	};
     }
 
-    // (340:3) {#if xLabel !== ""}
+    // (331:3) {#if xLabel !== ""}
     function create_if_block_1(ctx) {
     	let div;
     	let span;
@@ -581,7 +634,7 @@
     	};
     }
 
-    // (368:3) {#if !$isOk}
+    // (359:3) {#if !$isOk}
     function create_if_block$9(ctx) {
     	let p;
 
@@ -618,23 +671,25 @@
     	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() {
@@ -658,17 +713,19 @@
     			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);
@@ -702,13 +759,14 @@
     				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;
     			}
     		},
@@ -752,83 +810,83 @@
     				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();
@@ -839,12 +897,12 @@
     				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) {
@@ -871,8 +929,9 @@
     			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();
     		}
@@ -945,39 +1004,40 @@
     	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)
@@ -1126,20 +1186,6 @@
 
     	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, {
@@ -1165,51 +1211,63 @@
     		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]);
     		}
     	};
 
@@ -1217,9 +1275,12 @@
     		title,
     		xLabel,
     		yLabel,
+    		plotWidth,
+    		plotHeight,
+    		$height,
     		$isOk,
+    		$width,
     		$scale,
-    		axesWrapper,
     		cpy,
     		cpx,
     		clipPathID,
@@ -1235,13 +1296,12 @@
     		multiSeries,
     		axesMargins,
     		margins,
-    		$height,
     		$yLim,
-    		$width,
     		$xLim,
     		$$scope,
     		slots,
-    		div0_binding
+    		div0_elementresize_handler,
+    		div1_elementresize_handler
     	];
     }
 
@@ -1256,12 +1316,12 @@
     			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]
@@ -1283,7 +1343,7 @@
        "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();
@@ -1663,7 +1723,7 @@
     	}
     }
 
-    /* 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();
@@ -2049,7 +2109,7 @@
     	}
     }
 
-    /* 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();
@@ -2058,7 +2118,7 @@
     	return child_ctx;
     }
 
-    // (53:0) {#if rx !== undefined && ry !== undefined}
+    // (55:0) {#if rx !== undefined && ry !== undefined}
     function create_if_block$6(ctx) {
     	let g;
     	let g_class_value;
@@ -2079,7 +2139,7 @@
 
     			attr(g, "class", g_class_value = "series " + /*style*/ ctx[2]);
     			attr(g, "title", /*title*/ ctx[1]);
-    			attr(g, "style", /*barsStyleStr*/ ctx[7]);
+    			attr(g, "style", /*barsStyleStr*/ ctx[3]);
     		},
     		m(target, anchor) {
     			insert(target, g, anchor);
@@ -2089,7 +2149,7 @@
     			}
     		},
     		p(ctx, dirty) {
-    			if (dirty & /*rx, ry, rw, rh, left*/ 121) {
+    			if (dirty & /*rx, ry, rw, rh, left*/ 241) {
     				each_value = /*left*/ ctx[0];
     				let i;
 
@@ -2119,6 +2179,10 @@
     			if (dirty & /*title*/ 2) {
     				attr(g, "title", /*title*/ ctx[1]);
     			}
+
+    			if (dirty & /*barsStyleStr*/ 8) {
+    				attr(g, "style", /*barsStyleStr*/ ctx[3]);
+    			}
     		},
     		d(detaching) {
     			if (detaching) detach(g);
@@ -2127,7 +2191,7 @@
     	};
     }
 
-    // (55:3) {#each left as v, i}
+    // (57:3) {#each left as v, i}
     function create_each_block$3(ctx) {
     	let rect;
     	let rect_x_value;
@@ -2138,28 +2202,28 @@
     	return {
     		c() {
     			rect = svg_element("rect");
-    			attr(rect, "x", rect_x_value = /*rx*/ ctx[6][/*i*/ ctx[27]]);
-    			attr(rect, "y", rect_y_value = /*ry*/ ctx[5][/*i*/ ctx[27]]);
-    			attr(rect, "width", rect_width_value = /*rw*/ ctx[4][/*i*/ ctx[27]]);
-    			attr(rect, "height", rect_height_value = /*rh*/ ctx[3][/*i*/ ctx[27]]);
+    			attr(rect, "x", rect_x_value = /*rx*/ ctx[7][/*i*/ ctx[27]]);
+    			attr(rect, "y", rect_y_value = /*ry*/ ctx[6][/*i*/ ctx[27]]);
+    			attr(rect, "width", rect_width_value = /*rw*/ ctx[5][/*i*/ ctx[27]]);
+    			attr(rect, "height", rect_height_value = /*rh*/ ctx[4][/*i*/ ctx[27]]);
     		},
     		m(target, anchor) {
     			insert(target, rect, anchor);
     		},
     		p(ctx, dirty) {
-    			if (dirty & /*rx*/ 64 && rect_x_value !== (rect_x_value = /*rx*/ ctx[6][/*i*/ ctx[27]])) {
+    			if (dirty & /*rx*/ 128 && rect_x_value !== (rect_x_value = /*rx*/ ctx[7][/*i*/ ctx[27]])) {
     				attr(rect, "x", rect_x_value);
     			}
 
-    			if (dirty & /*ry*/ 32 && rect_y_value !== (rect_y_value = /*ry*/ ctx[5][/*i*/ ctx[27]])) {
+    			if (dirty & /*ry*/ 64 && rect_y_value !== (rect_y_value = /*ry*/ ctx[6][/*i*/ ctx[27]])) {
     				attr(rect, "y", rect_y_value);
     			}
 
-    			if (dirty & /*rw*/ 16 && rect_width_value !== (rect_width_value = /*rw*/ ctx[4][/*i*/ ctx[27]])) {
+    			if (dirty & /*rw*/ 32 && rect_width_value !== (rect_width_value = /*rw*/ ctx[5][/*i*/ ctx[27]])) {
     				attr(rect, "width", rect_width_value);
     			}
 
-    			if (dirty & /*rh*/ 8 && rect_height_value !== (rect_height_value = /*rh*/ ctx[3][/*i*/ ctx[27]])) {
+    			if (dirty & /*rh*/ 16 && rect_height_value !== (rect_height_value = /*rh*/ ctx[4][/*i*/ ctx[27]])) {
     				attr(rect, "height", rect_height_value);
     			}
     		},
@@ -2171,7 +2235,7 @@
 
     function create_fragment$8(ctx) {
     	let if_block_anchor;
-    	let if_block = /*rx*/ ctx[6] !== undefined && /*ry*/ ctx[5] !== undefined && create_if_block$6(ctx);
+    	let if_block = /*rx*/ ctx[7] !== undefined && /*ry*/ ctx[6] !== undefined && create_if_block$6(ctx);
 
     	return {
     		c() {
@@ -2183,7 +2247,7 @@
     			insert(target, if_block_anchor, anchor);
     		},
     		p(ctx, [dirty]) {
-    			if (/*rx*/ ctx[6] !== undefined && /*ry*/ ctx[5] !== undefined) {
+    			if (/*rx*/ ctx[7] !== undefined && /*ry*/ ctx[6] !== undefined) {
     				if (if_block) {
     					if_block.p(ctx, dirty);
     				} else {
@@ -2210,6 +2274,7 @@
     	let ry;
     	let rw;
     	let rh;
+    	let barsStyleStr;
     	let $axesHeight;
     	let $yLim;
     	let $axesWidth;
@@ -2225,9 +2290,6 @@
     	let { title = "" } = $$props;
     	let { style = "series_rect" } = $$props;
 
-    	// styles for bars and labels
-    	const barsStyleStr = `fill:${faceColor};stroke:${borderColor};stroke-width: ${lineWidth}px;`;
-
     	// multiply width and height values if needed
     	if (!Array.isArray(left) || !Array.isArray(top) || left.length < 1 || left.length != top.length) {
     		throw "Rectangles: parameters 'left' and 'top' must be vectors of the same size.";
@@ -2276,19 +2338,24 @@
     	$$self.$$.update = () => {
     		if ($$self.$$.dirty & /*left, $xLim, $axesWidth*/ 6291457) {
     			// reactive variables for coordinates of data points in pixels
-    			$$invalidate(6, rx = axes.scaleX(left, $xLim, $axesWidth));
+    			$$invalidate(7, rx = axes.scaleX(left, $xLim, $axesWidth));
     		}
 
     		if ($$self.$$.dirty & /*top, $yLim, $axesHeight*/ 1589248) {
-    			$$invalidate(5, ry = axes.scaleY(top, $yLim, $axesHeight));
+    			$$invalidate(6, ry = axes.scaleY(top, $yLim, $axesHeight));
     		}
 
     		if ($$self.$$.dirty & /*width, $xLim, $axesWidth*/ 6295552) {
-    			$$invalidate(4, rw = axes.scaleX(width, $xLim, $axesWidth, true));
+    			$$invalidate(5, rw = axes.scaleX(width, $xLim, $axesWidth, true));
     		}
 
     		if ($$self.$$.dirty & /*height, $yLim, $axesHeight*/ 1581056) {
-    			$$invalidate(3, rh = axes.scaleY(height, $yLim, $axesHeight, true));
+    			$$invalidate(4, rh = axes.scaleY(height, $yLim, $axesHeight, true));
+    		}
+
+    		if ($$self.$$.dirty & /*faceColor, borderColor, lineWidth*/ 458752) {
+    			// styles for bars and labels
+    			$$invalidate(3, barsStyleStr = `fill:${faceColor};stroke:${borderColor};stroke-width: ${lineWidth}px;`);
     		}
     	};
 
@@ -2296,11 +2363,11 @@
     		left,
     		title,
     		style,
+    		barsStyleStr,
     		rh,
     		rw,
     		ry,
     		rx,
-    		barsStyleStr,
     		xLim,
     		yLim,
     		axesWidth,
@@ -2338,7 +2405,7 @@
     	}
     }
 
-    /* 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;
@@ -2505,7 +2572,7 @@
     	}
     }
 
-    /* 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();
@@ -2772,10 +2839,10 @@
     	}
     }
 
-    /* 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-1szep8i", "text.svelte-1szep8i{dominant-baseline:middle}");
+    	append_styles(target, "svelte-1xvrp9d", "text.svelte-1xvrp9d,text.svelte-1xvrp9d>tspan{dominant-baseline:middle}");
     }
 
     function get_each_context$1(ctx, list, i) {
@@ -2874,7 +2941,7 @@
     			attr(text_1, "y", text_1_y_value = /*y*/ ctx[6][/*i*/ ctx[29]]);
     			attr(text_1, "dx", /*dx*/ ctx[5]);
     			attr(text_1, "dy", /*dy*/ ctx[4]);
-    			attr(text_1, "class", "svelte-1szep8i");
+    			attr(text_1, "class", "svelte-1xvrp9d");
     		},
     		m(target, anchor) {
     			insert(target, text_1, anchor);
@@ -3095,7 +3162,7 @@
     	}
     }
 
-    /* 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();
@@ -3363,7 +3430,7 @@
     }
 
     /**********************************************
-     * Functions for statistical tests            *
+     * Functions for statistical tests and models *
      **********************************************/
 
 
@@ -3419,7 +3486,7 @@
        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%}");
@@ -3587,7 +3654,7 @@
     	}
     }
 
-    /* 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}");
@@ -3754,7 +3821,7 @@
     	}
     }
 
-    /* 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;
@@ -3945,7 +4012,7 @@
     	}
     }
 
-    /* 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;