@mozaic-ds/web-components 0.4.1-beta.0 → 0.5.0

package/public/components/chart/StackedBarChart.js

@@ -1,2 +1,746 @@
-import{S as t,i as e,a as r,b as n,f as s,s as o,e as a,d as i,T as c,n as l,y as f,g as d,o as h,J as u,a1 as g,t as m,j as p,k as x,K as b,v as $,Z as k}from"../../index-c33b3772.js";import{s as y}from"../../transform-15d69d5d.js";import{E as w}from"../../EventHandler-02058705.js";import{c as v,a as A}from"../../array-5b770a93.js";import{a as N,b as j}from"../../axis-fbc0f7b5.js";import{b as _}from"../../band-d7a07d2c.js";import{l as S}from"../../linear-f46d7e9e.js";function E(t,e){if((s=t.length)>1)for(var r,n,s,o=1,a=t[e[0]],i=a.length;o<s;++o)for(n=a,a=t[e[o]],r=0;r<i;++r)a[r][1]+=a[r][0]=isNaN(n[r][1])?n[r][0]:n[r][1]}function O(t){for(var e=t.length,r=new Array(e);--e>=0;)r[e]=e;return r}function J(t,e){return t[e]}function z(t){const e=[];return e.key=t,e}function R(){var t=v([]),e=O,r=E,n=J;function s(s){var o,a,i=Array.from(t.apply(this,arguments),z),c=i.length,l=-1;for(const t of s)for(o=0,++l;o<c;++o)(i[o][l]=[0,+n(t,i[o].key,l,s)]).data=t;for(o=0,a=A(e(i));o<c;++o)i[a[o]].index=o;return r(i,a),i}return s.keys=function(e){return arguments.length?(t="function"==typeof e?e:v(Array.from(e)),s):t},s.value=function(t){return arguments.length?(n="function"==typeof t?t:v(+t),s):n},s.order=function(t){return arguments.length?(e=null==t?O:"function"==typeof t?t:v(Array.from(t)),s):e},s.offset=function(t){return arguments.length?(r=null==t?E:t,s):r},s}function C(t,e,r){const n=t.slice();return n[6]=e[r],n}function F(t,e,r){const n=t.slice();return n[32]=e[r],n}function q(t){let e,r,s,o=t[3].text+"";return{c(){e=a("div"),r=m(o),d(e,"class","tooltip"),d(e,"style",s=`top: ${t[3].top}px; left: ${t[3].left}px; width: ${t[3].width}px;`)},m(t,s){n(t,e,s),p(e,r)},p(t,n){8&n[0]&&o!==(o=t[3].text+"")&&x(r,o),8&n[0]&&s!==(s=`top: ${t[3].top}px; left: ${t[3].left}px; width: ${t[3].width}px;`)&&d(e,"style",s)},d(t){t&&h(e)}}}function I(t){let e,r,s,o,l,f,u,g,b=t[32]+"";return{c(){e=a("div"),r=c("svg"),s=c("rect"),l=i(),f=a("span"),u=m(b),g=i(),d(s,"x","0"),d(s,"y","0"),d(s,"width","24"),d(s,"height","16"),d(s,"fill",o=t[1][t[32]]),d(r,"class","legend__box"),d(f,"class","legend__title"),d(e,"class","legend__item")},m(t,o){n(t,e,o),p(e,r),p(r,s),p(e,l),p(e,f),p(f,u),p(e,g)},p(t,e){18&e[0]&&o!==(o=t[1][t[32]])&&d(s,"fill",o),16&e[0]&&b!==(b=t[32]+"")&&x(u,b)},d(t){t&&h(e)}}}function B(t){let e,r,s=t[6]+"";return{c(){e=new k(!1),r=b(),e.a=r},m(t,o){e.m(s,t,o),n(t,r,o)},p(t,r){32&r[0]&&s!==(s=t[6]+"")&&e.p(s)},d(t){t&&h(r),t&&e.d()}}}function D(t){let e,r,s,o,g,m,p,x,b=t[3].show&&q(t),$=t[4],k=[];for(let e=0;e<$.length;e+=1)k[e]=I(F(t,$,e));let y=t[5],w=[];for(let e=0;e<y.length;e+=1)w[e]=B(C(t,y,e));return{c(){e=a("div"),r=i(),b&&b.c(),s=i(),o=a("div");for(let t=0;t<k.length;t+=1)k[t].c();g=i(),m=a("div");for(let t=0;t<w.length;t+=1)w[t].c();p=i(),x=c("text"),this.c=l,f(e,"background-color",t[0]),d(o,"class","legend"),f(m,"height","0"),f(m,"width","0"),d(m,"class","pattern")},m(a,i){n(a,e,i),t[19](e),n(a,r,i),b&&b.m(a,i),n(a,s,i),n(a,o,i);for(let t=0;t<k.length;t+=1)k[t]&&k[t].m(o,null);n(a,g,i),n(a,m,i);for(let t=0;t<w.length;t+=1)w[t]&&w[t].m(m,null);n(a,p,i),n(a,x,i)},p(t,r){if(1&r[0]&&f(e,"background-color",t[0]),t[3].show?b?b.p(t,r):(b=q(t),b.c(),b.m(s.parentNode,s)):b&&(b.d(1),b=null),18&r[0]){let e;for($=t[4],e=0;e<$.length;e+=1){const n=F(t,$,e);k[e]?k[e].p(n,r):(k[e]=I(n),k[e].c(),k[e].m(o,null))}for(;e<k.length;e+=1)k[e].d(1);k.length=$.length}if(32&r[0]){let e;for(y=t[5],e=0;e<y.length;e+=1){const n=C(t,y,e);w[e]?w[e].p(n,r):(w[e]=B(n),w[e].c(),w[e].m(m,null))}for(;e<w.length;e+=1)w[e].d(1);w.length=y.length}},i:l,o:l,d(n){n&&h(e),t[19](null),n&&h(r),b&&b.d(n),n&&h(s),n&&h(o),u(k,n),n&&h(g),n&&h(m),u(w,n),n&&h(p),n&&h(x)}}}function H(t){return t?JSON.parse(t):{top:10,right:40,bottom:20,left:60,xAxis:20}}function K(t,e,r){let n,s,o,a,i,c,l,f,d,{data:h=""}=e,{chartheight:u="300"}=e,{backgroundcolor:m="#fff"}=e,{scalemax:p=50}=e,{ticknumbers:x=4}=e,{tickleftformat:b=(t=>`${Number(t)}`)}=e,{tickbottomformat:k=(t=>`${Number(t)}`)}=e,{margins:v}=e,{svgs:A}=e,{colors:E}=e,O=!1,J={show:!1,text:"",top:0,left:0,width:0},z=new w;function C(){let t=y(f).style("width");return""!==t&&t||(t=""+window.innerWidth/2),parseInt(t)}function F(t){return{x:_().domain(s).range([0,t-(H(v).left/2+H(v).right/2)]).padding(.2),y:S().domain([0,p]).range([a,0])}}function q(t,e){const s=R().keys(o)(n);d.append("g").selectAll("g").data(s).enter().append("g").attr("fill",(t=>c[t.key]||"black")).attr("class","bar").selectAll("rect").data((t=>t)).enter().append("rect").attr("x",(e=>t(e.data.group.toString()))).attr("y",(t=>e(t[1]))).attr("width",t.bandwidth()).attr("height",(t=>e(t[0])-e(t[1]))).style("cursor","pointer").on("mouseout",((t,e)=>{d.selectAll("rect").filter((function(t){return t!=e})).style("opacity",1),r(3,J.show=!1,J)})).on("mouseover",((t,e)=>{d.selectAll("rect").filter((function(t){return t!=e})).style("opacity",.7);const{left:n,top:s,width:o}=t.target.getBoundingClientRect();r(3,J={show:!0,text:e.data.customtooltip?e.data.customtooltip:""+(e[1]-e[0]),left:n,top:s-50,width:o})})).on("click",((t,e)=>{z.dispatch("bar-clicked",e)}))}function I(t,e){d.select(".x-axis").call(N(t).tickFormat(k)),d.select(".y-axis").call(j(e).ticks(x).tickFormat(b));const r=C();d.selectAll(".y-axis .tick line").attr("stroke","#EEEDEA").attr("stroke-width","1px").attr("x2",r)}function B(){var t;if(l){const e=C();null===(t=f.querySelector("#svg-chart"))||void 0===t||t.setAttribute("width",`${e}px`);const{x:r,y:s}=F(e);I(r,s);const a=R().keys(o)(n);d.selectAll(".bar").data(a).selectAll("rect").data((t=>t)).attr("x",(t=>r(t.data.group.toString()))).attr("y",(t=>s(t[1]))).attr("width",r.bandwidth()).attr("height",(t=>s(t[0])-s(t[1])))}}return g((()=>{new ResizeObserver(B).observe(f),r(17,O=!0)})),t.$$set=t=>{"data"in t&&r(7,h=t.data),"chartheight"in t&&r(8,u=t.chartheight),"backgroundcolor"in t&&r(0,m=t.backgroundcolor),"scalemax"in t&&r(9,p=t.scalemax),"ticknumbers"in t&&r(10,x=t.ticknumbers),"tickleftformat"in t&&r(11,b=t.tickleftformat),"tickbottomformat"in t&&r(12,k=t.tickbottomformat),"margins"in t&&r(13,v=t.margins),"svgs"in t&&r(14,A=t.svgs),"colors"in t&&r(15,E=t.colors)},t.$$.update=()=>{128&t.$$.dirty[0]&&r(18,n=h?JSON.parse(h):[]),262144&t.$$.dirty[0]&&(s=n.map((t=>t.group))),262144&t.$$.dirty[0]&&r(4,o=n[0]?Object.keys(n[0]).filter((t=>"group"!==t)):[]),256&t.$$.dirty[0]&&(a=parseInt(u,10)),16384&t.$$.dirty[0]&&r(5,i=A?JSON.parse(A):[]),32768&t.$$.dirty[0]&&r(1,c=E?JSON.parse(E):{}),196736&t.$$.dirty[0]&&h.length>0&&O&&(l?h!==l&&(!function(){var t;const e=C();null===(t=f.querySelector("#svg-chart"))||void 0===t||t.setAttribute("width",`${e}px`);const{x:r,y:n}=F(e);I(r,n),d.selectAll(".bar").remove(),q(r,n)}(),r(16,l=h)):(!function(){const t=C(),{x:e,y:n}=F(t);r(6,d=y(f).append("svg").attr("width",t).attr("height",Number(a)+Number(H(v).top)+Number(H(v).bottom)+Number(H(v).xAxis)).attr("id","svg-chart").append("g").attr("transform",`translate(${H(v).left/2+H(v).right/2},${H(v).top})`)),d.append("g").attr("transform",`translate(0, ${Number(a)+Number(H(v).xAxis)})`).call(N(e)).attr("class","x-axis").attr("stroke-width","0"),d.append("g").call(j(n).ticks(x).tickFormat(b)).attr("class","y-axis").attr("stroke-width","0"),q(e,n)}(),r(16,l=h)))},[m,c,f,J,o,i,d,h,u,p,x,b,k,v,A,E,l,O,n,function(t){$[t?"unshift":"push"]((()=>{f=t,r(2,f)}))}]}class L extends t{constructor(t){super();const a=document.createElement("style");a.textContent='.legend{margin-top:1rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0 1.5rem;height:100%;color:#000000;gap:1rem}.legend__item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;font-size:0.875rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.legend__title{white-space:nowrap;margin:0}.legend__box{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-right:0.25rem;height:16px;width:24px}.tooltip{height:auto;background-color:#4d4d4d;border-radius:4px;color:#ffffff;text-align:center;padding:0.5rem 0;position:absolute}.pattern{z-index:-1;position:relative}text{font-family:"LeroyMerlin", sans-serif;font-size:0.875rem;color:#4d4d4d}',this.shadowRoot.appendChild(a),e(this,{target:this.shadowRoot,props:r(this.attributes),customElement:!0},K,D,o,{data:7,chartheight:8,backgroundcolor:0,scalemax:9,ticknumbers:10,tickleftformat:11,tickbottomformat:12,margins:13,svgs:14,colors:15},null,[-1,-1]),t&&(t.target&&n(t.target,this,t.anchor),t.props&&(this.$set(t.props),s()))}static get observedAttributes(){return["data","chartheight","backgroundcolor","scalemax","ticknumbers","tickleftformat","tickbottomformat","margins","svgs","colors"]}get data(){return this.$$.ctx[7]}set data(t){this.$$set({data:t}),s()}get chartheight(){return this.$$.ctx[8]}set chartheight(t){this.$$set({chartheight:t}),s()}get backgroundcolor(){return this.$$.ctx[0]}set backgroundcolor(t){this.$$set({backgroundcolor:t}),s()}get scalemax(){return this.$$.ctx[9]}set scalemax(t){this.$$set({scalemax:t}),s()}get ticknumbers(){return this.$$.ctx[10]}set ticknumbers(t){this.$$set({ticknumbers:t}),s()}get tickleftformat(){return this.$$.ctx[11]}set tickleftformat(t){this.$$set({tickleftformat:t}),s()}get tickbottomformat(){return this.$$.ctx[12]}set tickbottomformat(t){this.$$set({tickbottomformat:t}),s()}get margins(){return this.$$.ctx[13]}set margins(t){this.$$set({margins:t}),s()}get svgs(){return this.$$.ctx[14]}set svgs(t){this.$$set({svgs:t}),s()}get colors(){return this.$$.ctx[15]}set colors(t){this.$$set({colors:t}),s()}}export{L as default};
+import { S as SvelteElement, i as init, a as attribute_to_object, b as insert, f as flush, s as safe_not_equal, e as element, d as space, T as svg_element, n as noop, y as set_style, g as attr, o as detach, J as destroy_each, a1 as onMount, t as text, j as append, k as set_data, K as empty, v as binding_callbacks, Z as HtmlTag } from '../../index-c33b3772.js';
+import { s as select } from '../../transform-15d69d5d.js';
+import { E as EventHandler } from '../../EventHandler-02058705.js';
+import { c as constant, a as array } from '../../array-5b770a93.js';
+import { a as axisBottom, b as axisLeft } from '../../axis-fbc0f7b5.js';
+import { b as band } from '../../band-d7a07d2c.js';
+import { l as linear } from '../../linear-f46d7e9e.js';
+
+function none$1(series, order) {
+  if (!((n = series.length) > 1)) return;
+  for (var i = 1, j, s0, s1 = series[order[0]], n, m = s1.length; i < n; ++i) {
+    s0 = s1, s1 = series[order[i]];
+    for (j = 0; j < m; ++j) {
+      s1[j][1] += s1[j][0] = isNaN(s0[j][1]) ? s0[j][0] : s0[j][1];
+    }
+  }
+}
+
+function none(series) {
+  var n = series.length, o = new Array(n);
+  while (--n >= 0) o[n] = n;
+  return o;
+}
+
+function stackValue(d, key) {
+  return d[key];
+}
+
+function stackSeries(key) {
+  const series = [];
+  series.key = key;
+  return series;
+}
+
+function stack() {
+  var keys = constant([]),
+      order = none,
+      offset = none$1,
+      value = stackValue;
+
+  function stack(data) {
+    var sz = Array.from(keys.apply(this, arguments), stackSeries),
+        i, n = sz.length, j = -1,
+        oz;
+
+    for (const d of data) {
+      for (i = 0, ++j; i < n; ++i) {
+        (sz[i][j] = [0, +value(d, sz[i].key, j, data)]).data = d;
+      }
+    }
+
+    for (i = 0, oz = array(order(sz)); i < n; ++i) {
+      sz[oz[i]].index = i;
+    }
+
+    offset(sz, oz);
+    return sz;
+  }
+
+  stack.keys = function(_) {
+    return arguments.length ? (keys = typeof _ === "function" ? _ : constant(Array.from(_)), stack) : keys;
+  };
+
+  stack.value = function(_) {
+    return arguments.length ? (value = typeof _ === "function" ? _ : constant(+_), stack) : value;
+  };
+
+  stack.order = function(_) {
+    return arguments.length ? (order = _ == null ? none : typeof _ === "function" ? _ : constant(Array.from(_)), stack) : order;
+  };
+
+  stack.offset = function(_) {
+    return arguments.length ? (offset = _ == null ? none$1 : _, stack) : offset;
+  };
+
+  return stack;
+}
+
+/* src/components/chart/StackedBarChart.svelte generated by Svelte v3.58.0 */
+
+function get_each_context(ctx, list, i) {
+	const child_ctx = ctx.slice();
+	child_ctx[6] = list[i];
+	return child_ctx;
+}
+
+function get_each_context_1(ctx, list, i) {
+	const child_ctx = ctx.slice();
+	child_ctx[32] = list[i];
+	return child_ctx;
+}
+
+// (197:0) {#if tooltipData.show}
+function create_if_block(ctx) {
+	let div;
+	let t_value = /*tooltipData*/ ctx[3].text + "";
+	let t;
+	let div_style_value;
+
+	return {
+		c() {
+			div = element("div");
+			t = text(t_value);
+			attr(div, "class", "tooltip");
+			attr(div, "style", div_style_value = `top: ${/*tooltipData*/ ctx[3].top}px; left: ${/*tooltipData*/ ctx[3].left}px; width: ${/*tooltipData*/ ctx[3].width}px;`);
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+			append(div, t);
+		},
+		p(ctx, dirty) {
+			if (dirty[0] & /*tooltipData*/ 8 && t_value !== (t_value = /*tooltipData*/ ctx[3].text + "")) set_data(t, t_value);
+
+			if (dirty[0] & /*tooltipData*/ 8 && div_style_value !== (div_style_value = `top: ${/*tooltipData*/ ctx[3].top}px; left: ${/*tooltipData*/ ctx[3].left}px; width: ${/*tooltipData*/ ctx[3].width}px;`)) {
+				attr(div, "style", div_style_value);
+			}
+		},
+		d(detaching) {
+			if (detaching) detach(div);
+		}
+	};
+}
+
+// (207:2) {#each subgroups as subgroup}
+function create_each_block_1(ctx) {
+	let div;
+	let svg_1;
+	let rect;
+	let rect_fill_value;
+	let t0;
+	let span;
+	let t1_value = /*subgroup*/ ctx[32] + "";
+	let t1;
+	let t2;
+
+	return {
+		c() {
+			div = element("div");
+			svg_1 = svg_element("svg");
+			rect = svg_element("rect");
+			t0 = space();
+			span = element("span");
+			t1 = text(t1_value);
+			t2 = space();
+			attr(rect, "x", "0");
+			attr(rect, "y", "0");
+			attr(rect, "width", "24");
+			attr(rect, "height", "16");
+			attr(rect, "fill", rect_fill_value = /*parsedColor*/ ctx[1][/*subgroup*/ ctx[32]]);
+			attr(svg_1, "class", "legend__box");
+			attr(span, "class", "legend__title");
+			attr(div, "class", "legend__item");
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+			append(div, svg_1);
+			append(svg_1, rect);
+			append(div, t0);
+			append(div, span);
+			append(span, t1);
+			append(div, t2);
+		},
+		p(ctx, dirty) {
+			if (dirty[0] & /*parsedColor, subgroups*/ 18 && rect_fill_value !== (rect_fill_value = /*parsedColor*/ ctx[1][/*subgroup*/ ctx[32]])) {
+				attr(rect, "fill", rect_fill_value);
+			}
+
+			if (dirty[0] & /*subgroups*/ 16 && t1_value !== (t1_value = /*subgroup*/ ctx[32] + "")) set_data(t1, t1_value);
+		},
+		d(detaching) {
+			if (detaching) detach(div);
+		}
+	};
+}
+
+// (218:2) {#each parsedSvgs as svg}
+function create_each_block(ctx) {
+	let html_tag;
+	let raw_value = /*svg*/ ctx[6] + "";
+	let html_anchor;
+
+	return {
+		c() {
+			html_tag = new HtmlTag(false);
+			html_anchor = empty();
+			html_tag.a = html_anchor;
+		},
+		m(target, anchor) {
+			html_tag.m(raw_value, target, anchor);
+			insert(target, html_anchor, anchor);
+		},
+		p(ctx, dirty) {
+			if (dirty[0] & /*parsedSvgs*/ 32 && raw_value !== (raw_value = /*svg*/ ctx[6] + "")) html_tag.p(raw_value);
+		},
+		d(detaching) {
+			if (detaching) detach(html_anchor);
+			if (detaching) html_tag.d();
+		}
+	};
+}
+
+function create_fragment(ctx) {
+	let div0;
+	let t0;
+	let t1;
+	let div1;
+	let t2;
+	let div2;
+	let t3;
+	let text_1;
+	let if_block = /*tooltipData*/ ctx[3].show && create_if_block(ctx);
+	let each_value_1 = /*subgroups*/ ctx[4];
+	let each_blocks_1 = [];
+
+	for (let i = 0; i < each_value_1.length; i += 1) {
+		each_blocks_1[i] = create_each_block_1(get_each_context_1(ctx, each_value_1, i));
+	}
+
+	let each_value = /*parsedSvgs*/ ctx[5];
+	let each_blocks = [];
+
+	for (let i = 0; i < each_value.length; i += 1) {
+		each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i));
+	}
+
+	return {
+		c() {
+			div0 = element("div");
+			t0 = space();
+			if (if_block) if_block.c();
+			t1 = space();
+			div1 = element("div");
+
+			for (let i = 0; i < each_blocks_1.length; i += 1) {
+				each_blocks_1[i].c();
+			}
+
+			t2 = space();
+			div2 = element("div");
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].c();
+			}
+
+			t3 = space();
+			text_1 = svg_element("text");
+			this.c = noop;
+			set_style(div0, "background-color", /*backgroundcolor*/ ctx[0]);
+			attr(div1, "class", "legend");
+			set_style(div2, "height", "0");
+			set_style(div2, "width", "0");
+			attr(div2, "class", "pattern");
+		},
+		m(target, anchor) {
+			insert(target, div0, anchor);
+			/*div0_binding*/ ctx[19](div0);
+			insert(target, t0, anchor);
+			if (if_block) if_block.m(target, anchor);
+			insert(target, t1, anchor);
+			insert(target, div1, anchor);
+
+			for (let i = 0; i < each_blocks_1.length; i += 1) {
+				if (each_blocks_1[i]) {
+					each_blocks_1[i].m(div1, null);
+				}
+			}
+
+			insert(target, t2, anchor);
+			insert(target, div2, anchor);
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				if (each_blocks[i]) {
+					each_blocks[i].m(div2, null);
+				}
+			}
+
+			insert(target, t3, anchor);
+			insert(target, text_1, anchor);
+		},
+		p(ctx, dirty) {
+			if (dirty[0] & /*backgroundcolor*/ 1) {
+				set_style(div0, "background-color", /*backgroundcolor*/ ctx[0]);
+			}
+
+			if (/*tooltipData*/ ctx[3].show) {
+				if (if_block) {
+					if_block.p(ctx, dirty);
+				} else {
+					if_block = create_if_block(ctx);
+					if_block.c();
+					if_block.m(t1.parentNode, t1);
+				}
+			} else if (if_block) {
+				if_block.d(1);
+				if_block = null;
+			}
+
+			if (dirty[0] & /*subgroups, parsedColor*/ 18) {
+				each_value_1 = /*subgroups*/ ctx[4];
+				let i;
+
+				for (i = 0; i < each_value_1.length; i += 1) {
+					const child_ctx = get_each_context_1(ctx, each_value_1, i);
+
+					if (each_blocks_1[i]) {
+						each_blocks_1[i].p(child_ctx, dirty);
+					} else {
+						each_blocks_1[i] = create_each_block_1(child_ctx);
+						each_blocks_1[i].c();
+						each_blocks_1[i].m(div1, null);
+					}
+				}
+
+				for (; i < each_blocks_1.length; i += 1) {
+					each_blocks_1[i].d(1);
+				}
+
+				each_blocks_1.length = each_value_1.length;
+			}
+
+			if (dirty[0] & /*parsedSvgs*/ 32) {
+				each_value = /*parsedSvgs*/ ctx[5];
+				let i;
+
+				for (i = 0; i < each_value.length; i += 1) {
+					const child_ctx = get_each_context(ctx, each_value, i);
+
+					if (each_blocks[i]) {
+						each_blocks[i].p(child_ctx, dirty);
+					} else {
+						each_blocks[i] = create_each_block(child_ctx);
+						each_blocks[i].c();
+						each_blocks[i].m(div2, null);
+					}
+				}
+
+				for (; i < each_blocks.length; i += 1) {
+					each_blocks[i].d(1);
+				}
+
+				each_blocks.length = each_value.length;
+			}
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(div0);
+			/*div0_binding*/ ctx[19](null);
+			if (detaching) detach(t0);
+			if (if_block) if_block.d(detaching);
+			if (detaching) detach(t1);
+			if (detaching) detach(div1);
+			destroy_each(each_blocks_1, detaching);
+			if (detaching) detach(t2);
+			if (detaching) detach(div2);
+			destroy_each(each_blocks, detaching);
+			if (detaching) detach(t3);
+			if (detaching) detach(text_1);
+		}
+	};
+}
+
+function getParsedMargins(margins) {
+	if (margins) return JSON.parse(margins); else return {
+		top: 10,
+		right: 40,
+		bottom: 20,
+		left: 60,
+		xAxis: 20
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let parsedData;
+	let groups;
+	let subgroups;
+	let height;
+	let parsedSvgs;
+	let { data = '' } = $$props;
+	let { chartheight = '300' } = $$props;
+	let { backgroundcolor = '#fff' } = $$props;
+	let { scalemax = 50 } = $$props;
+	let { ticknumbers = 4 } = $$props;
+	let { tickleftformat = d => `${Number(d)}` } = $$props;
+	let { tickbottomformat = d => `${Number(d)}` } = $$props;
+	let { margins } = $$props;
+	let { svgs } = $$props;
+	let { colors } = $$props;
+	let parsedColor;
+	let _data;
+	let chart;
+	let svg;
+	let hasMounted = false;
+
+	let tooltipData = {
+		show: false,
+		text: '',
+		top: 0,
+		left: 0,
+		width: 0
+	};
+
+	let eventHandler = new EventHandler();
+
+	function getChartWidth() {
+		let chartWidth = select(chart).style('width');
+
+		if (chartWidth === '' || !chartWidth) {
+			chartWidth = `${window.innerWidth / 2}`;
+		}
+
+		return parseInt(chartWidth);
+	}
+
+	function getAxes(width) {
+		const x = band().domain(groups).range([
+			0,
+			width - (getParsedMargins(margins).left / 2 + getParsedMargins(margins).right / 2)
+		]).padding(0.2);
+
+		const y = linear().domain([0, scalemax]).range([height, 0]);
+		return { x, y };
+	}
+
+	function addRectandles(x, y) {
+		const stackedData = stack().keys(subgroups)(parsedData);
+
+		svg.append('g').selectAll('g').data(stackedData).enter().append('g').attr('fill', d => parsedColor[d.key] || 'black').attr('class', 'bar').selectAll('rect').data(d => d).enter().append('rect').attr('x', d => x(d.data.group.toString())).attr('y', d => y(d[1])).attr('width', x.bandwidth()).attr('height', d => y(d[0]) - y(d[1])).style('cursor', 'pointer').on('mouseout', (_e, chartEvent) => {
+			const others = svg.selectAll('rect').filter(function (arc) {
+				return arc != chartEvent;
+			});
+
+			others.style('opacity', 1);
+			$$invalidate(3, tooltipData.show = false, tooltipData);
+		}).on('mouseover', (e, chartEvent) => {
+			const others = svg.selectAll('rect').filter(function (arc) {
+				return arc != chartEvent;
+			});
+
+			others.style('opacity', 0.7);
+			const { left, top, width } = e.target.getBoundingClientRect();
+
+			$$invalidate(3, tooltipData = {
+				show: true,
+				text: chartEvent.data.customtooltip
+				? chartEvent.data.customtooltip
+				: `${chartEvent[1] - chartEvent[0]}`,
+				left,
+				top: top - 50,
+				width
+			});
+		}).on('click', (_e, chartEvent) => {
+			eventHandler.dispatch('bar-clicked', chartEvent);
+		});
+	}
+
+	function updateAxes(x, y) {
+		svg.select('.x-axis').call(axisBottom(x).tickFormat(tickbottomformat));
+		svg.select('.y-axis').call(axisLeft(y).ticks(ticknumbers).tickFormat(tickleftformat));
+		const width = getChartWidth();
+		svg.selectAll('.y-axis .tick line').attr('stroke', '#EEEDEA').attr('stroke-width', '1px').attr('x2', width);
+	}
+
+	function render() {
+		const width = getChartWidth();
+		const { x, y } = getAxes(width);
+		$$invalidate(6, svg = select(chart).append('svg').attr('width', width).attr('height', Number(height) + Number(getParsedMargins(margins).top) + Number(getParsedMargins(margins).bottom) + Number(getParsedMargins(margins).xAxis)).attr('id', 'svg-chart').append('g').attr('transform', `translate(${getParsedMargins(margins).left / 2 + getParsedMargins(margins).right / 2},${getParsedMargins(margins).top})`));
+		svg.append('g').attr('transform', `translate(0, ${Number(height) + Number(getParsedMargins(margins).xAxis)})`).call(axisBottom(x)).attr('class', 'x-axis').attr('stroke-width', '0');
+		svg.append('g').call(axisLeft(y).ticks(ticknumbers).tickFormat(tickleftformat)).attr('class', 'y-axis').attr('stroke-width', '0');
+		addRectandles(x, y);
+	}
+
+	function update() {
+		var _a;
+		const width = getChartWidth();
+
+		(_a = chart.querySelector('#svg-chart')) === null || _a === void 0
+		? void 0
+		: _a.setAttribute('width', `${width}px`);
+
+		const { x, y } = getAxes(width);
+		updateAxes(x, y);
+		svg.selectAll('.bar').remove();
+		addRectandles(x, y);
+	}
+
+	function resize() {
+		var _a;
+
+		if (_data) {
+			const width = getChartWidth();
+
+			(_a = chart.querySelector('#svg-chart')) === null || _a === void 0
+			? void 0
+			: _a.setAttribute('width', `${width}px`);
+
+			const { x, y } = getAxes(width);
+			updateAxes(x, y);
+			const stackedData = stack().keys(subgroups)(parsedData);
+			svg.selectAll('.bar').data(stackedData).selectAll('rect').data(d => d).attr('x', d => x(d.data.group.toString())).attr('y', d => y(d[1])).attr('width', x.bandwidth()).attr('height', d => y(d[0]) - y(d[1]));
+		}
+	}
+
+	onMount(() => {
+		const resizeObserver = new ResizeObserver(resize);
+		resizeObserver.observe(chart);
+		$$invalidate(17, hasMounted = true);
+	});
+
+	function div0_binding($$value) {
+		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+			chart = $$value;
+			$$invalidate(2, chart);
+		});
+	}
+
+	$$self.$$set = $$props => {
+		if ('data' in $$props) $$invalidate(7, data = $$props.data);
+		if ('chartheight' in $$props) $$invalidate(8, chartheight = $$props.chartheight);
+		if ('backgroundcolor' in $$props) $$invalidate(0, backgroundcolor = $$props.backgroundcolor);
+		if ('scalemax' in $$props) $$invalidate(9, scalemax = $$props.scalemax);
+		if ('ticknumbers' in $$props) $$invalidate(10, ticknumbers = $$props.ticknumbers);
+		if ('tickleftformat' in $$props) $$invalidate(11, tickleftformat = $$props.tickleftformat);
+		if ('tickbottomformat' in $$props) $$invalidate(12, tickbottomformat = $$props.tickbottomformat);
+		if ('margins' in $$props) $$invalidate(13, margins = $$props.margins);
+		if ('svgs' in $$props) $$invalidate(14, svgs = $$props.svgs);
+		if ('colors' in $$props) $$invalidate(15, colors = $$props.colors);
+	};
+
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty[0] & /*data*/ 128) {
+			$$invalidate(18, parsedData = data ? JSON.parse(data) : []);
+		}
+
+		if ($$self.$$.dirty[0] & /*parsedData*/ 262144) {
+			groups = parsedData.map(d => d.group);
+		}
+
+		if ($$self.$$.dirty[0] & /*parsedData*/ 262144) {
+			$$invalidate(4, subgroups = parsedData[0]
+			? Object.keys(parsedData[0]).filter(d => d !== 'group')
+			: []);
+		}
+
+		if ($$self.$$.dirty[0] & /*chartheight*/ 256) {
+			height = parseInt(chartheight, 10);
+		}
+
+		if ($$self.$$.dirty[0] & /*svgs*/ 16384) {
+			$$invalidate(5, parsedSvgs = svgs ? JSON.parse(svgs) : []);
+		}
+
+		if ($$self.$$.dirty[0] & /*colors*/ 32768) {
+			$$invalidate(1, parsedColor = colors ? JSON.parse(colors) : {});
+		}
+
+		if ($$self.$$.dirty[0] & /*data, hasMounted, _data*/ 196736) {
+			if (data.length > 0 && hasMounted) {
+				if (!_data) {
+					render();
+					$$invalidate(16, _data = data);
+				} else if (data !== _data) {
+					update();
+					$$invalidate(16, _data = data);
+				}
+			}
+		}
+	};
+
+	return [
+		backgroundcolor,
+		parsedColor,
+		chart,
+		tooltipData,
+		subgroups,
+		parsedSvgs,
+		svg,
+		data,
+		chartheight,
+		scalemax,
+		ticknumbers,
+		tickleftformat,
+		tickbottomformat,
+		margins,
+		svgs,
+		colors,
+		_data,
+		hasMounted,
+		parsedData,
+		div0_binding
+	];
+}
+
+class StackedBarChart extends SvelteElement {
+	constructor(options) {
+		super();
+		const style = document.createElement('style');
+		style.textContent = `.legend{margin-top:1rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0 1.5rem;height:100%;color:#000000;gap:1rem}.legend__item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;font-size:0.875rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.legend__title{white-space:nowrap;margin:0}.legend__box{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-right:0.25rem;height:16px;width:24px}.tooltip{height:auto;background-color:#4d4d4d;border-radius:4px;color:#ffffff;text-align:center;padding:0.5rem 0;position:absolute}.pattern{z-index:-1;position:relative}text{font-family:"LeroyMerlin", sans-serif;font-size:0.875rem;color:#4d4d4d}`;
+		this.shadowRoot.appendChild(style);
+
+		init(
+			this,
+			{
+				target: this.shadowRoot,
+				props: attribute_to_object(this.attributes),
+				customElement: true
+			},
+			instance,
+			create_fragment,
+			safe_not_equal,
+			{
+				data: 7,
+				chartheight: 8,
+				backgroundcolor: 0,
+				scalemax: 9,
+				ticknumbers: 10,
+				tickleftformat: 11,
+				tickbottomformat: 12,
+				margins: 13,
+				svgs: 14,
+				colors: 15
+			},
+			null,
+			[-1, -1]
+		);
+
+		if (options) {
+			if (options.target) {
+				insert(options.target, this, options.anchor);
+			}
+
+			if (options.props) {
+				this.$set(options.props);
+				flush();
+			}
+		}
+	}
+
+	static get observedAttributes() {
+		return [
+			"data",
+			"chartheight",
+			"backgroundcolor",
+			"scalemax",
+			"ticknumbers",
+			"tickleftformat",
+			"tickbottomformat",
+			"margins",
+			"svgs",
+			"colors"
+		];
+	}
+
+	get data() {
+		return this.$$.ctx[7];
+	}
+
+	set data(data) {
+		this.$$set({ data });
+		flush();
+	}
+
+	get chartheight() {
+		return this.$$.ctx[8];
+	}
+
+	set chartheight(chartheight) {
+		this.$$set({ chartheight });
+		flush();
+	}
+
+	get backgroundcolor() {
+		return this.$$.ctx[0];
+	}
+
+	set backgroundcolor(backgroundcolor) {
+		this.$$set({ backgroundcolor });
+		flush();
+	}
+
+	get scalemax() {
+		return this.$$.ctx[9];
+	}
+
+	set scalemax(scalemax) {
+		this.$$set({ scalemax });
+		flush();
+	}
+
+	get ticknumbers() {
+		return this.$$.ctx[10];
+	}
+
+	set ticknumbers(ticknumbers) {
+		this.$$set({ ticknumbers });
+		flush();
+	}
+
+	get tickleftformat() {
+		return this.$$.ctx[11];
+	}
+
+	set tickleftformat(tickleftformat) {
+		this.$$set({ tickleftformat });
+		flush();
+	}
+
+	get tickbottomformat() {
+		return this.$$.ctx[12];
+	}
+
+	set tickbottomformat(tickbottomformat) {
+		this.$$set({ tickbottomformat });
+		flush();
+	}
+
+	get margins() {
+		return this.$$.ctx[13];
+	}
+
+	set margins(margins) {
+		this.$$set({ margins });
+		flush();
+	}
+
+	get svgs() {
+		return this.$$.ctx[14];
+	}
+
+	set svgs(svgs) {
+		this.$$set({ svgs });
+		flush();
+	}
+
+	get colors() {
+		return this.$$.ctx[15];
+	}
+
+	set colors(colors) {
+		this.$$set({ colors });
+		flush();
+	}
+}
+
+export { StackedBarChart as default };
 //# sourceMappingURL=StackedBarChart.js.map