svelte-plots-basic 1.0.4 → 1.0.7

package/dist/index.js

@@ -512,7 +512,7 @@
     const get_xaxis_slot_changes = dirty => ({});
     const get_xaxis_slot_context = ctx => ({});
 
-    // (330:3) {#if title !== ""}
+    // (338:3) {#if title !== ""}
     function create_if_block_3(ctx) {
     	let div;
 
@@ -533,7 +533,7 @@
     	};
     }
 
-    // (331:3) {#if yLabel !== ""}
+    // (339:3) {#if yLabel !== ""}
     function create_if_block_2(ctx) {
     	let div;
     	let span;
@@ -557,7 +557,7 @@
     	};
     }
 
-    // (332:3) {#if xLabel !== ""}
+    // (340:3) {#if xLabel !== ""}
     function create_if_block_1(ctx) {
     	let div;
     	let span;
@@ -581,7 +581,7 @@
     	};
     }
 
-    // (360:3) {#if !$isOk}
+    // (368:3) {#if !$isOk}
     function create_if_block$9(ctx) {
     	let p;
 
@@ -1141,17 +1141,27 @@
     	});
 
     	// handle click on plot elements and dispatch manual events
+    	function dispatchClickEvent(eventName, el) {
+    		dispatch(eventName, {
+    			seriesTitle: el.parentNode.getAttribute('title'),
+    			elementID: el.dataset.id
+    		});
+    	}
+
     	function handleClick(e) {
+    		// scatter plot markers
     		if (e.target.tagName === "text" && e.target.parentNode.classList.contains("series_scatter")) {
-    			dispatch("markerclick", { markerid: e.target.dataset.id });
+    			dispatchClickEvent("markerclick", e.target);
     			return;
     		}
 
+    		// bar plot bars
     		if (e.target.tagName === "rect" && e.target.parentNode.classList.contains("series_bar")) {
-    			dispatch("barclick", { markerid: e.target.dataset.id });
+    			dispatchClickEvent("barclick", e.target);
     			return;
     		}
 
+    		// outside any plot element
     		dispatch("axesclick");
     	}
 
@@ -2048,7 +2058,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;
@@ -2069,7 +2079,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);
@@ -2079,7 +2089,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;
 
@@ -2109,6 +2119,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);
@@ -2117,7 +2131,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;
@@ -2128,28 +2142,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);
     			}
     		},
@@ -2161,7 +2175,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() {
@@ -2173,7 +2187,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 {
@@ -2200,6 +2214,7 @@
     	let ry;
     	let rw;
     	let rh;
+    	let barsStyleStr;
     	let $axesHeight;
     	let $yLim;
     	let $axesWidth;
@@ -2215,9 +2230,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.";
@@ -2266,19 +2278,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;`);
     		}
     	};
 
@@ -2286,11 +2303,11 @@
     		left,
     		title,
     		style,
+    		barsStyleStr,
     		rh,
     		rw,
     		ry,
     		rx,
-    		barsStyleStr,
     		xLim,
     		yLim,
     		axesWidth,
@@ -2765,7 +2782,7 @@
     /* src/TextLabels.svelte generated by Svelte v3.46.3 */
 
     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) {
@@ -2864,7 +2881,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);

package/dist/index.mjs

@@ -506,7 +506,7 @@ const get_yaxis_slot_context = ctx => ({});
 const get_xaxis_slot_changes = dirty => ({});
 const get_xaxis_slot_context = ctx => ({});
 
-// (330:3) {#if title !== ""}
+// (338:3) {#if title !== ""}
 function create_if_block_3(ctx) {
 	let div;
 
@@ -527,7 +527,7 @@ function create_if_block_3(ctx) {
 	};
 }
 
-// (331:3) {#if yLabel !== ""}
+// (339:3) {#if yLabel !== ""}
 function create_if_block_2(ctx) {
 	let div;
 	let span;
@@ -551,7 +551,7 @@ function create_if_block_2(ctx) {
 	};
 }
 
-// (332:3) {#if xLabel !== ""}
+// (340:3) {#if xLabel !== ""}
 function create_if_block_1(ctx) {
 	let div;
 	let span;
@@ -575,7 +575,7 @@ function create_if_block_1(ctx) {
 	};
 }
 
-// (360:3) {#if !$isOk}
+// (368:3) {#if !$isOk}
 function create_if_block$9(ctx) {
 	let p;
 
@@ -1135,17 +1135,27 @@ function instance$b($$self, $$props, $$invalidate) {
 	});
 
 	// handle click on plot elements and dispatch manual events
+	function dispatchClickEvent(eventName, el) {
+		dispatch(eventName, {
+			seriesTitle: el.parentNode.getAttribute('title'),
+			elementID: el.dataset.id
+		});
+	}
+
 	function handleClick(e) {
+		// scatter plot markers
 		if (e.target.tagName === "text" && e.target.parentNode.classList.contains("series_scatter")) {
-			dispatch("markerclick", { markerid: e.target.dataset.id });
+			dispatchClickEvent("markerclick", e.target);
 			return;
 		}
 
+		// bar plot bars
 		if (e.target.tagName === "rect" && e.target.parentNode.classList.contains("series_bar")) {
-			dispatch("barclick", { markerid: e.target.dataset.id });
+			dispatchClickEvent("barclick", e.target);
 			return;
 		}
 
+		// outside any plot element
 		dispatch("axesclick");
 	}
 
@@ -2042,7 +2052,7 @@ function get_each_context$3(ctx, list, i) {
 	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;
@@ -2063,7 +2073,7 @@ function create_if_block$6(ctx) {
 
 			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);
@@ -2073,7 +2083,7 @@ function create_if_block$6(ctx) {
 			}
 		},
 		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;
 
@@ -2103,6 +2113,10 @@ function create_if_block$6(ctx) {
 			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);
@@ -2111,7 +2125,7 @@ function create_if_block$6(ctx) {
 	};
 }
 
-// (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;
@@ -2122,28 +2136,28 @@ function create_each_block$3(ctx) {
 	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);
 			}
 		},
@@ -2155,7 +2169,7 @@ function create_each_block$3(ctx) {
 
 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() {
@@ -2167,7 +2181,7 @@ function create_fragment$8(ctx) {
 			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 {
@@ -2194,6 +2208,7 @@ function instance$8($$self, $$props, $$invalidate) {
 	let ry;
 	let rw;
 	let rh;
+	let barsStyleStr;
 	let $axesHeight;
 	let $yLim;
 	let $axesWidth;
@@ -2209,9 +2224,6 @@ function instance$8($$self, $$props, $$invalidate) {
 	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.";
@@ -2260,19 +2272,24 @@ function instance$8($$self, $$props, $$invalidate) {
 	$$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;`);
 		}
 	};
 
@@ -2280,11 +2297,11 @@ function instance$8($$self, $$props, $$invalidate) {
 		left,
 		title,
 		style,
+		barsStyleStr,
 		rh,
 		rw,
 		ry,
 		rx,
-		barsStyleStr,
 		xLim,
 		yLim,
 		axesWidth,
@@ -2759,7 +2776,7 @@ class Segments extends SvelteComponent {
 /* src/TextLabels.svelte generated by Svelte v3.46.3 */
 
 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) {
@@ -2858,7 +2875,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);

package/package.json

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

package/src/Axes.svelte

@@ -277,19 +277,27 @@
       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});
+   }
+
    function handleClick(e) {
 
+      // scatter plot markers
       if (e.target.tagName === "text" && e.target.parentNode.classList.contains("series_scatter")) {
-         dispatch("markerclick", {markerid: e.target.dataset.id})
+         dispatchClickEvent("markerclick", e.target);
          return;
       }
 
+      // bar plot bars
       if (e.target.tagName === "rect" && e.target.parentNode.classList.contains("series_bar")) {
-         dispatch("barclick", {markerid: e.target.dataset.id})
+         dispatchClickEvent("barclick", e.target);
          return;
       }
 
+      // outside any plot element
       dispatch("axesclick")
    }
 

package/src/Rectangles.svelte

@@ -14,8 +14,6 @@
    export let title = "";
    export let style = "series_rect";
 
-   // 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) {
@@ -48,6 +46,10 @@
    $: ry = axes.scaleY(top, $yLim, $axesHeight);
    $: rw = axes.scaleX(width, $xLim, $axesWidth, true);
    $: rh = axes.scaleY(height, $yLim, $axesHeight, true);
+
+   // styles for bars and labels
+   $: barsStyleStr = `fill:${faceColor};stroke:${borderColor};stroke-width: ${lineWidth}px;`;
+
 </script>
 
 {#if rx !== undefined && ry !== undefined}

package/src/TextLabels.svelte

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