svelte-plots-basic 1.0.6 → 1.1.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.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.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.
 
@@ -44,9 +44,9 @@ Just create a new Svelte app following the [quick start guide](https://svelte.de
          showLabels="no"
          faceColor="#e0e0e0"
          edgeColor="#e0e0e0"
-         labels="{years}"
-         xValues="{years}"
-         yValues="{amount}"
+         labels={years}
+         xValues={years}
+         yValues={amount}
       />
    </Axes>
 </div>
@@ -67,35 +67,36 @@ Example below shows how to create a plot with axis, box and grid as well as how
 
 <div class="plot">
    <Axes>
-      // x and y axis with automatic ticks and grid lines
-      <XAxis showGrid="{true}"></XAxis>
-      <YAxis showGrid="{true}"></YAxis>
 
       // bar, line and marker series with the same data values
       <BarSeries
          showLabels="no"
          faceColor="#eee"
          edgeColor="#eee"
-         xValues="{years}"
-         yValues="{amount}"
+         xValues={years}
+         yValues={amount}
       />
       <LineSeries
          lineColor="blue"
-         lineWidth="{2}"
-         xValues="{years}"
-         yValues="{amount}"
+         lineWidth={2}
+         xValues={years}
+         yValues={amount}
       />
       <ScatterSeries
          marker="✺"
          showLabels="hover"
          markerColor="blue"
-         labels="{years}"
-         xValues="{years}"
-         yValues="{amount}"
+         labels={years}
+         xValues={years}
+         yValues={amount}
       />
 
+      // x and y axis with automatic ticks and grid lines
+      <XAxis showGrid={true} slot="xaxis" />
+      <YAxis showGrid={true} slot="yaxis" />
+
       // box around the axes
-      <Box />
+      <Box slot="box" />
    </Axes>
 </div>
 ```
@@ -125,6 +126,7 @@ Each component is responsible for visualization of the corresponding axis. The a
 * `ticks` — vector with ticks
 * `tickLabels` — vector with values to be shown as labels beside each tick
 * `showGrid` — a logical parameter, which allows to show grid lines on the plot
+* `slot` — name of the slot, `"xaxis"` or `"yaxis"`
 
 The components must be placed in a particular slot of the parent `Axes` component.
 

package/dist/index.js

@@ -165,9 +165,9 @@
     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;
     }
 
@@ -185,20 +185,23 @@
     }
     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 +502,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 +515,7 @@
     const get_xaxis_slot_changes = dirty => ({});
     const get_xaxis_slot_context = ctx => ({});
 
-    // (338:3) {#if title !== ""}
+    // (342:3) {#if title !== ""}
     function create_if_block_3(ctx) {
     	let div;
 
@@ -533,7 +536,7 @@
     	};
     }
 
-    // (339:3) {#if yLabel !== ""}
+    // (343:3) {#if yLabel !== ""}
     function create_if_block_2(ctx) {
     	let div;
     	let span;
@@ -557,7 +560,7 @@
     	};
     }
 
-    // (340:3) {#if xLabel !== ""}
+    // (344:3) {#if xLabel !== ""}
     function create_if_block_1(ctx) {
     	let div;
     	let span;
@@ -581,7 +584,7 @@
     	};
     }
 
-    // (368:3) {#if !$isOk}
+    // (372:3) {#if !$isOk}
     function create_if_block$9(ctx) {
     	let p;
 
@@ -626,14 +629,14 @@
     	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);
+    	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[3] && create_if_block$9();
 
     	return {
@@ -658,12 +661,12 @@
     			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[8][0]);
+    			attr(rect, "y", rect_y_value = /*cpy*/ ctx[7][1]);
+    			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, "clip-path", "url(#" + /*clipPathID*/ ctx[9] + ")");
     			attr(svg, "preserveAspectRatio", "none");
     			attr(svg, "class", "axes");
     			attr(div0, "class", "axes-wrapper svelte-n80kcc");
@@ -702,13 +705,14 @@
     				box_slot.m(svg, null);
     			}
 
-    			/*div0_binding*/ ctx[27](div0);
+    			/*div0_binding*/ ctx[28](div0);
     			append(div1, t3);
     			if (if_block3) if_block3.m(div1, null);
+    			/*div1_binding*/ ctx[29](div1);
     			current = true;
 
     			if (!mounted) {
-    				dispose = listen(svg, "click", /*handleClick*/ ctx[15]);
+    				dispose = listen(svg, "click", /*handleClick*/ ctx[16]);
     				mounted = true;
     			}
     		},
@@ -752,77 +756,77 @@
     				if_block2 = null;
     			}
 
-    			if (!current || dirty[0] & /*cpx*/ 128 && rect_x_value !== (rect_x_value = /*cpx*/ ctx[7][0])) {
+    			if (!current || dirty[0] & /*cpx*/ 256 && rect_x_value !== (rect_x_value = /*cpx*/ ctx[8][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*/ 128 && rect_y_value !== (rect_y_value = /*cpy*/ ctx[7][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*/ 256 && rect_width_value !== (rect_width_value = /*cpx*/ ctx[8][1] - /*cpx*/ ctx[8][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*/ 128 && rect_height_value !== (rect_height_value = /*cpy*/ ctx[7][0] - /*cpy*/ ctx[7][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
     					);
     				}
@@ -871,8 +875,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_binding*/ ctx[28](null);
     			if (if_block3) if_block3.d();
+    			/*div1_binding*/ ctx[29](null);
     			mounted = false;
     			dispose();
     		}
@@ -945,20 +950,21 @@
     	const clipPathID = "plottingArea" + Math.round(Math.random() * 10000);
 
     	/* parameters for internal use inside the component */
-    	let axesWrapper; // pointer to axes wrapper DOM element
+    	let plotElement;
 
+    	let axesElement;
     	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(24, $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(22, $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(23, $yLim = value));
     	const scale = writable("medium"); // scale factor (how big the shown plot is)
     	component_subscribe($$self, scale, value => $$invalidate(4, $scale = value));
     	const isOk = writable(false); // are axes ready for drawing
@@ -966,18 +972,18 @@
 
     	/** 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(20, axesMargins[0] = 1, axesMargins);
+    		$$invalidate(20, axesMargins[2] = 0.5, axesMargins);
+    		$$invalidate(20, axesMargins[1] = axesMargins[1] > 0.5 ? axesMargins[1] : 0.5, axesMargins);
+    		$$invalidate(20, 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(20, axesMargins[1] = 1, axesMargins);
+    		$$invalidate(20, axesMargins[3] = 0.5, axesMargins);
+    		$$invalidate(20, axesMargins[0] = axesMargins[0] > 0.5 ? axesMargins[0] : 0.5, axesMargins);
+    		$$invalidate(20, 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 +1132,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 +1157,73 @@
     		dispatch("axesclick");
     	}
 
+    	/* observer for the plotting area size */
+    	var ro = 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);
+    				scale.update(x => getScale(pcr.width, pcr.height));
+    			}
+    		});
+
+    	onMount(() => {
+    		ro.observe(plotElement);
+    	});
+
     	function div0_binding($$value) {
     		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
-    			axesWrapper = $$value;
-    			$$invalidate(5, axesWrapper);
+    			axesElement = $$value;
+    			$$invalidate(6, axesElement);
+    		});
+    	}
+
+    	function div1_binding($$value) {
+    		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+    			plotElement = $$value;
+    			$$invalidate(5, plotElement);
     		});
     	}
 
     	$$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(17, limX = $$props.limX);
+    		if ('limY' in $$props) $$invalidate(18, 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(19, multiSeries = $$props.multiSeries);
+    		if ('$$scope' in $$props) $$invalidate(26, $$scope = $$props.$$scope);
     	};
 
     	$$self.$$.update = () => {
-    		if ($$self.$$.dirty[0] & /*limX*/ 65536) {
+    		if ($$self.$$.dirty[0] & /*limX*/ 131072) {
     			// 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*/ 262144) {
     			if (!limY.some(v => v === undefined)) yLim.update(v => limY);
     		}
 
-    		if ($$self.$$.dirty[0] & /*axesMargins, $scale*/ 524304) {
+    		if ($$self.$$.dirty[0] & /*axesMargins, $scale*/ 1048592) {
     			// computes real margins in pixels based on current scale
-    			$$invalidate(20, margins = axesMargins.map(v => v * AXES_MARGIN_FACTORS[$scale]));
+    			$$invalidate(21, 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*/ 65011712) {
     			// 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*/ 50331656) {
     			// computes coordinates for clip path box
-    			$$invalidate(7, cpx = $isOk ? scaleX($xLim, $xLim, $width) : [0, 1]);
+    			$$invalidate(8, 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*/ 12582920) {
+    			$$invalidate(7, cpy = $isOk ? scaleY($yLim, $yLim, $height) : [1, 0]);
     		}
     	};
 
@@ -1219,7 +1233,8 @@
     		yLabel,
     		$isOk,
     		$scale,
-    		axesWrapper,
+    		plotElement,
+    		axesElement,
     		cpy,
     		cpx,
     		clipPathID,
@@ -1241,7 +1256,8 @@
     		$xLim,
     		$$scope,
     		slots,
-    		div0_binding
+    		div0_binding,
+    		div1_binding
     	];
     }
 
@@ -1256,12 +1272,12 @@
     			create_fragment$b,
     			safe_not_equal,
     			{
-    				limX: 16,
-    				limY: 17,
+    				limX: 17,
+    				limY: 18,
     				title: 0,
     				xLabel: 1,
     				yLabel: 2,
-    				multiSeries: 18
+    				multiSeries: 19
     			},
     			add_css$3,
     			[-1, -1]
@@ -1283,7 +1299,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 +1679,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 +2065,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();
@@ -2345,7 +2361,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;
@@ -2512,7 +2528,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();
@@ -2779,10 +2795,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) {
@@ -2881,7 +2897,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);
@@ -3102,7 +3118,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();
@@ -3370,7 +3386,7 @@
     }
 
     /**********************************************
-     * Functions for statistical tests            *
+     * Functions for statistical tests and models *
      **********************************************/
 
 
@@ -3426,7 +3442,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%}");
@@ -3594,7 +3610,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}");
@@ -3761,7 +3777,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;
@@ -3952,7 +3968,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;

package/dist/index.mjs

@@ -159,9 +159,9 @@ function set_style(node, key, value, important) {
 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;
 }
 
@@ -179,20 +179,23 @@ function onMount(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 +496,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 +509,7 @@ const get_yaxis_slot_context = ctx => ({});
 const get_xaxis_slot_changes = dirty => ({});
 const get_xaxis_slot_context = ctx => ({});
 
-// (338:3) {#if title !== ""}
+// (342:3) {#if title !== ""}
 function create_if_block_3(ctx) {
 	let div;
 
@@ -527,7 +530,7 @@ function create_if_block_3(ctx) {
 	};
 }
 
-// (339:3) {#if yLabel !== ""}
+// (343:3) {#if yLabel !== ""}
 function create_if_block_2(ctx) {
 	let div;
 	let span;
@@ -551,7 +554,7 @@ function create_if_block_2(ctx) {
 	};
 }
 
-// (340:3) {#if xLabel !== ""}
+// (344:3) {#if xLabel !== ""}
 function create_if_block_1(ctx) {
 	let div;
 	let span;
@@ -575,7 +578,7 @@ function create_if_block_1(ctx) {
 	};
 }
 
-// (368:3) {#if !$isOk}
+// (372:3) {#if !$isOk}
 function create_if_block$9(ctx) {
 	let p;
 
@@ -620,14 +623,14 @@ function create_fragment$b(ctx) {
 	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);
+	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[3] && create_if_block$9();
 
 	return {
@@ -652,12 +655,12 @@ 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[8][0]);
+			attr(rect, "y", rect_y_value = /*cpy*/ ctx[7][1]);
+			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, "clip-path", "url(#" + /*clipPathID*/ ctx[9] + ")");
 			attr(svg, "preserveAspectRatio", "none");
 			attr(svg, "class", "axes");
 			attr(div0, "class", "axes-wrapper svelte-n80kcc");
@@ -696,13 +699,14 @@ function create_fragment$b(ctx) {
 				box_slot.m(svg, null);
 			}
 
-			/*div0_binding*/ ctx[27](div0);
+			/*div0_binding*/ ctx[28](div0);
 			append(div1, t3);
 			if (if_block3) if_block3.m(div1, null);
+			/*div1_binding*/ ctx[29](div1);
 			current = true;
 
 			if (!mounted) {
-				dispose = listen(svg, "click", /*handleClick*/ ctx[15]);
+				dispose = listen(svg, "click", /*handleClick*/ ctx[16]);
 				mounted = true;
 			}
 		},
@@ -746,77 +750,77 @@ 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*/ 256 && rect_x_value !== (rect_x_value = /*cpx*/ ctx[8][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*/ 128 && rect_y_value !== (rect_y_value = /*cpy*/ ctx[7][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*/ 256 && rect_width_value !== (rect_width_value = /*cpx*/ ctx[8][1] - /*cpx*/ ctx[8][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*/ 128 && rect_height_value !== (rect_height_value = /*cpy*/ ctx[7][0] - /*cpy*/ ctx[7][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
 					);
 				}
@@ -865,8 +869,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_binding*/ ctx[28](null);
 			if (if_block3) if_block3.d();
+			/*div1_binding*/ ctx[29](null);
 			mounted = false;
 			dispose();
 		}
@@ -939,20 +944,21 @@ 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 plotElement;
 
+	let axesElement;
 	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(24, $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(22, $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(23, $yLim = value));
 	const scale = writable("medium"); // scale factor (how big the shown plot is)
 	component_subscribe($$self, scale, value => $$invalidate(4, $scale = value));
 	const isOk = writable(false); // are axes ready for drawing
@@ -960,18 +966,18 @@ function instance$b($$self, $$props, $$invalidate) {
 
 	/** 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(20, axesMargins[0] = 1, axesMargins);
+		$$invalidate(20, axesMargins[2] = 0.5, axesMargins);
+		$$invalidate(20, axesMargins[1] = axesMargins[1] > 0.5 ? axesMargins[1] : 0.5, axesMargins);
+		$$invalidate(20, 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(20, axesMargins[1] = 1, axesMargins);
+		$$invalidate(20, axesMargins[3] = 0.5, axesMargins);
+		$$invalidate(20, axesMargins[0] = axesMargins[0] > 0.5 ? axesMargins[0] : 0.5, axesMargins);
+		$$invalidate(20, 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 +1126,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 +1151,73 @@ function instance$b($$self, $$props, $$invalidate) {
 		dispatch("axesclick");
 	}
 
+	/* observer for the plotting area size */
+	var ro = 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);
+				scale.update(x => getScale(pcr.width, pcr.height));
+			}
+		});
+
+	onMount(() => {
+		ro.observe(plotElement);
+	});
+
 	function div0_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
-			axesWrapper = $$value;
-			$$invalidate(5, axesWrapper);
+			axesElement = $$value;
+			$$invalidate(6, axesElement);
+		});
+	}
+
+	function div1_binding($$value) {
+		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+			plotElement = $$value;
+			$$invalidate(5, plotElement);
 		});
 	}
 
 	$$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(17, limX = $$props.limX);
+		if ('limY' in $$props) $$invalidate(18, 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(19, multiSeries = $$props.multiSeries);
+		if ('$$scope' in $$props) $$invalidate(26, $$scope = $$props.$$scope);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty[0] & /*limX*/ 65536) {
+		if ($$self.$$.dirty[0] & /*limX*/ 131072) {
 			// 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*/ 262144) {
 			if (!limY.some(v => v === undefined)) yLim.update(v => limY);
 		}
 
-		if ($$self.$$.dirty[0] & /*axesMargins, $scale*/ 524304) {
+		if ($$self.$$.dirty[0] & /*axesMargins, $scale*/ 1048592) {
 			// computes real margins in pixels based on current scale
-			$$invalidate(20, margins = axesMargins.map(v => v * AXES_MARGIN_FACTORS[$scale]));
+			$$invalidate(21, 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*/ 65011712) {
 			// 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*/ 50331656) {
 			// computes coordinates for clip path box
-			$$invalidate(7, cpx = $isOk ? scaleX($xLim, $xLim, $width) : [0, 1]);
+			$$invalidate(8, 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*/ 12582920) {
+			$$invalidate(7, cpy = $isOk ? scaleY($yLim, $yLim, $height) : [1, 0]);
 		}
 	};
 
@@ -1213,7 +1227,8 @@ function instance$b($$self, $$props, $$invalidate) {
 		yLabel,
 		$isOk,
 		$scale,
-		axesWrapper,
+		plotElement,
+		axesElement,
 		cpy,
 		cpx,
 		clipPathID,
@@ -1235,7 +1250,8 @@ function instance$b($$self, $$props, $$invalidate) {
 		$xLim,
 		$$scope,
 		slots,
-		div0_binding
+		div0_binding,
+		div1_binding
 	];
 }
 
@@ -1250,12 +1266,12 @@ class Axes extends SvelteComponent {
 			create_fragment$b,
 			safe_not_equal,
 			{
-				limX: 16,
-				limY: 17,
+				limX: 17,
+				limY: 18,
 				title: 0,
 				xLabel: 1,
 				yLabel: 2,
-				multiSeries: 18
+				multiSeries: 19
 			},
 			add_css$3,
 			[-1, -1]
@@ -1277,7 +1293,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 +1673,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 +2059,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 +2355,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 +2522,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,10 +2789,10 @@ 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-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) {
@@ -2875,7 +2891,7 @@ function create_each_block$1(ctx) {
 			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);
@@ -3096,7 +3112,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 +3380,7 @@ class TextLegend extends SvelteComponent {
 }
 
 /**********************************************
- * Functions for statistical tests            *
+ * Functions for statistical tests and models *
  **********************************************/
 
 
@@ -3420,7 +3436,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 +3604,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 +3771,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 +3962,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;

package/package.json

@@ -14,7 +14,7 @@
     "svelte": "^3.0.0"
   },
   "dependencies": {
-    "mdatools": "^0.1.0"
+    "mdatools": "^0.5.3"
   },
   "keywords": [
     "svelte",
@@ -25,7 +25,7 @@
     "dist"
   ],
   "description": "Svelte components for creating simple plots",
-  "version": "1.0.6",
+  "version": "1.1.1",
   "repository": {
     "type": "git",
     "url": "svkucheryavski/svelte-plots-basic"

package/src/Axes.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { onMount, setContext, createEventDispatcher } from 'svelte';
+	import { setContext, createEventDispatcher, onMount } from 'svelte';
 	import { writable } from 'svelte/store';
 
    /* input parameters */
@@ -34,6 +34,7 @@
       "large": 20
    };
 
+
    // line styles for different scales and types
    const LINE_STYLES = {
       small: ["0", "3,3", "1,1", "3,1"],
@@ -45,7 +46,8 @@
    const clipPathID = "plottingArea" + Math.round(Math.random() * 10000);
 
    /* parameters for internal use inside the component */
-   let axesWrapper;                                   // pointer to axes wrapper DOM element
+   let plotElement;
+   let axesElement;
    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 */
@@ -263,21 +265,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, {seriesTitle: el.parentNode.getAttribute('title'), elementID: el.dataset.id});
@@ -329,10 +316,27 @@
    // computes coordinates for clip path box
    $: 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 => {
+       for (let entry of entries) {
+
+         const pcr = plotElement.getBoundingClientRect();
+         const acr = axesElement.getBoundingClientRect();
+
+         width.update(x => acr.width);
+         height.update(x => acr.height);
+         scale.update(x => getScale(pcr.width, pcr.height));
+       }
+    });
+
+    onMount(() => {
+       ro.observe(plotElement);
+    });
 </script>
 
 
-<div class="plot {'plot_' + $scale}"  class:plot_error="{!$isOk}">
+<div class="plot {'plot_' + $scale}"  bind:this={plotElement} class:plot_error="{!$isOk}">
 
    <!-- plot title and axis labels -->
    {#if title !== ""}<div class="axes__title">{@html title}</div>{/if}
@@ -340,7 +344,7 @@
    {#if xLabel !== ""}<div class="axes__xlabel"><span>{@html xLabel}</span></div>{/if}
 
    <!-- axes (coordinate system) -->
-   <div class="axes-wrapper" bind:this={axesWrapper} >
+   <div class="axes-wrapper" bind:this={axesElement} >
       <svg on:click={handleClick} preserveAspectRatio="none" class="axes">
 
          <!-- define clipping path -->

package/src/TextLabels.svelte

@@ -72,7 +72,7 @@
 {/if}
 
 <style>
-   text {
+   text, text > :global(tspan) {
       dominant-baseline: middle;
    }
 </style>