@mozaic-ds/web-components 0.7.0 → 0.9.0-beta

package/public/components/chart/GroupedBarChart.js

@@ -1,2 +1,751 @@
-import{S as t,i as e,a as r,b as i,f as a,s,e as o,d as l,T as n,n as c,y as g,g as h,o as m,J as d,a1 as f,t as u,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{a as v,b as A,c as j}from"../../axis-fbc0f7b5.js";import{b as N}from"../../band-d7a07d2c.js";import{l as S}from"../../linear-f46d7e9e.js";function _(t,e,r){const i=t.slice();return i[6]=e[r],i}function E(t,e,r){const i=t.slice();return i[38]=e[r],i}function C(t){let e,r,a,s,c,g,d,f,b=t[38]+"";return{c(){e=o("div"),r=n("svg"),a=n("rect"),c=l(),g=o("span"),d=u(b),f=l(),h(a,"x","0"),h(a,"y","0"),h(a,"width","24"),h(a,"height","16"),h(a,"fill",s=t[7](t[38],t[1])),h(r,"class","legend__box"),h(g,"class","legend__title"),h(e,"class","legend__item")},m(t,s){i(t,e,s),p(e,r),p(r,a),p(e,c),p(e,g),p(g,d),p(e,f)},p(t,e){6&e[0]&&s!==(s=t[7](t[38],t[1]))&&h(a,"fill",s),4&e[0]&&b!==(b=t[38]+"")&&x(d,b)},d(t){t&&m(e)}}}function P(t){let e,r,a,s=t[4].text+"";return{c(){e=o("div"),r=u(s),h(e,"class","tooltip"),h(e,"style",a=`top: ${t[4].top}px; left: ${t[4].left}px; width: ${t[4].width}px;`)},m(t,a){i(t,e,a),p(e,r)},p(t,i){16&i[0]&&s!==(s=t[4].text+"")&&x(r,s),16&i[0]&&a!==(a=`top: ${t[4].top}px; left: ${t[4].left}px; width: ${t[4].width}px;`)&&h(e,"style",a)},d(t){t&&m(e)}}}function F(t){let e,r,a=t[6]+"";return{c(){e=new k(!1),r=b(),e.a=r},m(t,s){e.m(a,t,s),i(t,r,s)},p(t,r){32&r[0]&&a!==(a=t[6]+"")&&e.p(a)},d(t){t&&m(r),t&&e.d()}}}function O(t){let e,r,a,s,f,u,p,x,b=t[2],$=[];for(let e=0;e<b.length;e+=1)$[e]=C(E(t,b,e));let k=t[4].show&&P(t),y=t[5],w=[];for(let e=0;e<y.length;e+=1)w[e]=F(_(t,y,e));return{c(){e=o("div"),r=l(),a=o("div");for(let t=0;t<$.length;t+=1)$[t].c();s=l(),k&&k.c(),f=l(),u=o("div");for(let t=0;t<w.length;t+=1)w[t].c();p=l(),x=n("text"),this.c=c,g(e,"background-color",t[0]),h(a,"class","legend"),g(u,"height","0"),g(u,"width","0"),h(u,"class","pattern")},m(o,l){i(o,e,l),t[21](e),i(o,r,l),i(o,a,l);for(let t=0;t<$.length;t+=1)$[t]&&$[t].m(a,null);i(o,s,l),k&&k.m(o,l),i(o,f,l),i(o,u,l);for(let t=0;t<w.length;t+=1)w[t]&&w[t].m(u,null);i(o,p,l),i(o,x,l)},p(t,r){if(1&r[0]&&g(e,"background-color",t[0]),134&r[0]){let e;for(b=t[2],e=0;e<b.length;e+=1){const i=E(t,b,e);$[e]?$[e].p(i,r):($[e]=C(i),$[e].c(),$[e].m(a,null))}for(;e<$.length;e+=1)$[e].d(1);$.length=b.length}if(t[4].show?k?k.p(t,r):(k=P(t),k.c(),k.m(f.parentNode,f)):k&&(k.d(1),k=null),32&r[0]){let e;for(y=t[5],e=0;e<y.length;e+=1){const i=_(t,y,e);w[e]?w[e].p(i,r):(w[e]=F(i),w[e].c(),w[e].m(u,null))}for(;e<w.length;e+=1)w[e].d(1);w.length=y.length}},i:c,o:c,d(i){i&&m(e),t[21](null),i&&m(r),i&&m(a),d($,i),i&&m(s),k&&k.d(i),i&&m(f),i&&m(u),d(w,i),i&&m(p),i&&m(x)}}}function R(t){return t?JSON.parse(t):{top:10,right:40,bottom:20,left:60,xAxis:20}}function z(t,e,r){let i,a,s,o,l,n,c,g,{data:h=""}=e,{chartheight:m="300"}=e,{backgroundcolor:d="#fff"}=e,{leftscalemax:u=50}=e,{rightscalemax:p}=e,{color:x="#0B96CC"}=e,{ticknumbers:b=4}=e,{tickleftformat:k=(t=>`${Number(t)}`)}=e,{tickbottomformat:_=(t=>`${t}`)}=e,{tickrightformat:E=(t=>`${Number(t)}`)}=e,{svgs:C}=e,{margins:P}=e,F=!1,O={show:!1,text:"",top:0,left:0,width:0},z=new w,B=0,J=0;function q(){let t=y(c).style("width");return""!==t&&t||(t=""+window.innerWidth/2),parseInt(t)}function I(t){return l.map((e=>({key:e,value:t[e].value,scalePosition:t[e].scalePosition,color:t[e].color,customtooltip:t[e].customtooltip})))}function D(t){const e=p?t-(R(P).left+R(P).right):t-R(P).right,r=N().domain(a).range([0,e]).padding(.2),i=S().domain([0,u]).range([s,0]),o=S().domain([0,p]).range([s,0]),n=N().domain(l).range([0,r.bandwidth()]).padding(.05);return{x:r,yleft:i,yright:o,xSubgroup:n}}function H(t,e,a,o){g.append("g").selectAll("g").data(i).join("g").attr("transform",(e=>`translate(${String(t(e.group))}, 0)`)).attr("class","bar").selectAll("rect").data((t=>I(t))).join("rect").attr("x",(t=>e(t.key))).attr("y",(t=>"right"===t.scalePosition?o(0):a(0))).attr("width",e.bandwidth()).attr("height",(t=>s-("right"===t.scalePosition?o(0):a(0)))).style("fill",(t=>t.color||x)).style("cursor","pointer").on("mouseout",((t,e)=>{g.selectAll("rect").filter((function(t){return t!=e})).style("opacity",1),r(4,O.show=!1,O)})).on("mouseover",((t,e)=>{var i,a;g.selectAll("rect").filter((function(t){return t!=e})).style("opacity",.7);const{left:s,top:o,width:l}=null!==(a=null===(i=t.target.parentElement)||void 0===i?void 0:i.getBoundingClientRect())&&void 0!==a?a:{left:0,top:0,width:0};r(4,O={show:!0,text:e.customtooltip?`${e.customtooltip}`:`${e.key} - ${e.value}`,left:s,top:o-50,width:l})})).on("click",((t,e)=>{z.dispatch("bar-clicked",e)})),g.selectAll("rect").transition().duration(800).attr("y",(t=>"right"===t.scalePosition?o(+t.value):a(+t.value))).attr("height",(t=>s-("right"===t.scalePosition?o(+t.value):a(+t.value)))).delay(((t,e)=>100*e))}function K(t,e,r){g.select(".x-axis").call(v(t).tickFormat(_)),g.select(".y-left-axis").call(A(e).ticks(b).tickFormat(k)),p&&g.select(".y-right-axis").call(j(r).ticks(b).tickFormat(E)).attr("transform",`translate(${J-R(P).left-B},0)`);const i=p?J-R(P).left-B:J-B;g.selectAll(".y-left-axis .tick line").attr("stroke","#EEEDEA").attr("stroke-width","1px").attr("x2",i)}function L(){J=q();const{x:t,yleft:e,yright:i,xSubgroup:a}=D(J);r(6,g=y(c).append("svg").attr("width",J).attr("height",Number(s)+Number(R(P).top)+Number(R(P).bottom)+Number(R(P).xAxis)).attr("id","svg-chart").append("g").attr("transform",`translate(${R(P).left/2+R(P).right/2},${R(P).top})`)),g.append("g").attr("transform",`translate(0, ${Number(s)+Number(R(P).xAxis)})`).call(v(t)).attr("class","x-axis").attr("stroke-width","0"),g.append("g").call(A(e).ticks(b).tickFormat(k)).attr("class","y-left-axis").attr("stroke-width","0"),B=function(t){const{width:e}=c.getElementsByClassName(`y-${t}-axis`)[0].getBoundingClientRect();return e}("left"),p&&g.append("g").call(j(i).ticks(b).tickFormat(k)).attr("class","y-right-axis").attr("transform",`translate(${J-R(P).left-B},0)`).attr("stroke-width","0"),H(t,a,e,i)}function M(){var t;if(J=q(),n){const e=q();null===(t=c.querySelector("#svg-chart"))||void 0===t||t.setAttribute("width",`${e}px`);const{x:r,yleft:a,yright:s,xSubgroup:o}=D(e);K(r,a,s),g.selectAll(".bar").data(i).attr("transform",(t=>`translate(${String(r(t.group))}, 0)`)).selectAll("rect").data((t=>I(t))).attr("x",(t=>o(t.key))).attr("width",o.bandwidth())}}return f((()=>{new ResizeObserver(M).observe(c),r(20,F=!0)})),t.$$set=t=>{"data"in t&&r(8,h=t.data),"chartheight"in t&&r(9,m=t.chartheight),"backgroundcolor"in t&&r(0,d=t.backgroundcolor),"leftscalemax"in t&&r(10,u=t.leftscalemax),"rightscalemax"in t&&r(11,p=t.rightscalemax),"color"in t&&r(12,x=t.color),"ticknumbers"in t&&r(13,b=t.ticknumbers),"tickleftformat"in t&&r(14,k=t.tickleftformat),"tickbottomformat"in t&&r(15,_=t.tickbottomformat),"tickrightformat"in t&&r(16,E=t.tickrightformat),"svgs"in t&&r(17,C=t.svgs),"margins"in t&&r(18,P=t.margins)},t.$$.update=()=>{256&t.$$.dirty[0]&&r(1,i=h?JSON.parse(h):[]),2&t.$$.dirty[0]&&(a=i.map((t=>t.group))),2&t.$$.dirty[0]&&r(2,l=i[0]?Object.keys(i[0]).filter((t=>"group"!==t)):[]),512&t.$$.dirty[0]&&(s=parseInt(m,10)),131072&t.$$.dirty[0]&&r(5,o=C?JSON.parse(C):[]),1573120&t.$$.dirty[0]&&h.length>0&&F&&(n?h!==n&&(!function(){var t;null===(t=c.querySelector("#svg-chart"))||void 0===t||t.setAttribute("width",`${J}px`);const{x:e,yleft:r,yright:i,xSubgroup:a}=D(J);K(e,r,i),g.selectAll(".bar").remove(),H(e,a,r,i)}(),r(19,n=h)):(L(),r(19,n=h)))},[d,i,l,c,O,o,g,function(t,e){var r;return e.length>0?null===(r=e[0][t])||void 0===r?void 0:r.color:""},h,m,u,p,x,b,k,_,E,C,P,n,F,function(t){$[t?"unshift":"push"]((()=>{c=t,r(3,c)}))}]}class B extends t{constructor(t){super();const o=document.createElement("style");o.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:absolute}text{font-family:"LeroyMerlin", sans-serif;font-size:0.875rem;color:#4d4d4d}',this.shadowRoot.appendChild(o),e(this,{target:this.shadowRoot,props:r(this.attributes),customElement:!0},z,O,s,{data:8,chartheight:9,backgroundcolor:0,leftscalemax:10,rightscalemax:11,color:12,ticknumbers:13,tickleftformat:14,tickbottomformat:15,tickrightformat:16,svgs:17,margins:18},null,[-1,-1]),t&&(t.target&&i(t.target,this,t.anchor),t.props&&(this.$set(t.props),a()))}static get observedAttributes(){return["data","chartheight","backgroundcolor","leftscalemax","rightscalemax","color","ticknumbers","tickleftformat","tickbottomformat","tickrightformat","svgs","margins"]}get data(){return this.$$.ctx[8]}set data(t){this.$$set({data:t}),a()}get chartheight(){return this.$$.ctx[9]}set chartheight(t){this.$$set({chartheight:t}),a()}get backgroundcolor(){return this.$$.ctx[0]}set backgroundcolor(t){this.$$set({backgroundcolor:t}),a()}get leftscalemax(){return this.$$.ctx[10]}set leftscalemax(t){this.$$set({leftscalemax:t}),a()}get rightscalemax(){return this.$$.ctx[11]}set rightscalemax(t){this.$$set({rightscalemax:t}),a()}get color(){return this.$$.ctx[12]}set color(t){this.$$set({color:t}),a()}get ticknumbers(){return this.$$.ctx[13]}set ticknumbers(t){this.$$set({ticknumbers:t}),a()}get tickleftformat(){return this.$$.ctx[14]}set tickleftformat(t){this.$$set({tickleftformat:t}),a()}get tickbottomformat(){return this.$$.ctx[15]}set tickbottomformat(t){this.$$set({tickbottomformat:t}),a()}get tickrightformat(){return this.$$.ctx[16]}set tickrightformat(t){this.$$set({tickrightformat:t}),a()}get svgs(){return this.$$.ctx[17]}set svgs(t){this.$$set({svgs:t}),a()}get margins(){return this.$$.ctx[18]}set margins(t){this.$$set({margins:t}),a()}}export{B 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 { a as axisBottom, b as axisLeft, c as axisRight } from '../../axis-fbc0f7b5.js';
+import { b as band } from '../../band-d7a07d2c.js';
+import { l as linear } from '../../linear-f46d7e9e.js';
+
+/* src/components/chart/GroupedBarChart.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[38] = list[i];
+	return child_ctx;
+}
+
+// (253: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[38] + "";
+	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 = /*getLegendColor*/ ctx[7](/*subgroup*/ ctx[38], /*parsedData*/ ctx[1]));
+			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] & /*subgroups, parsedData*/ 6 && rect_fill_value !== (rect_fill_value = /*getLegendColor*/ ctx[7](/*subgroup*/ ctx[38], /*parsedData*/ ctx[1]))) {
+				attr(rect, "fill", rect_fill_value);
+			}
+
+			if (dirty[0] & /*subgroups*/ 4 && t1_value !== (t1_value = /*subgroup*/ ctx[38] + "")) set_data(t1, t1_value);
+		},
+		d(detaching) {
+			if (detaching) detach(div);
+		}
+	};
+}
+
+// (269:0) {#if tooltipData.show}
+function create_if_block(ctx) {
+	let div;
+	let t_value = /*tooltipData*/ ctx[4].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[4].top}px; left: ${/*tooltipData*/ ctx[4].left}px; width: ${/*tooltipData*/ ctx[4].width}px;`);
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+			append(div, t);
+		},
+		p(ctx, dirty) {
+			if (dirty[0] & /*tooltipData*/ 16 && t_value !== (t_value = /*tooltipData*/ ctx[4].text + "")) set_data(t, t_value);
+
+			if (dirty[0] & /*tooltipData*/ 16 && div_style_value !== (div_style_value = `top: ${/*tooltipData*/ ctx[4].top}px; left: ${/*tooltipData*/ ctx[4].left}px; width: ${/*tooltipData*/ ctx[4].width}px;`)) {
+				attr(div, "style", div_style_value);
+			}
+		},
+		d(detaching) {
+			if (detaching) detach(div);
+		}
+	};
+}
+
+// (279: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 div1;
+	let t1;
+	let t2;
+	let div2;
+	let t3;
+	let text_1;
+	let each_value_1 = /*subgroups*/ ctx[2];
+	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 if_block = /*tooltipData*/ ctx[4].show && create_if_block(ctx);
+	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();
+			div1 = element("div");
+
+			for (let i = 0; i < each_blocks_1.length; i += 1) {
+				each_blocks_1[i].c();
+			}
+
+			t1 = space();
+			if (if_block) if_block.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[21](div0);
+			insert(target, t0, 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, t1, anchor);
+			if (if_block) if_block.m(target, anchor);
+			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 (dirty[0] & /*subgroups, getLegendColor, parsedData*/ 134) {
+				each_value_1 = /*subgroups*/ ctx[2];
+				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 (/*tooltipData*/ ctx[4].show) {
+				if (if_block) {
+					if_block.p(ctx, dirty);
+				} else {
+					if_block = create_if_block(ctx);
+					if_block.c();
+					if_block.m(t2.parentNode, t2);
+				}
+			} else if (if_block) {
+				if_block.d(1);
+				if_block = null;
+			}
+
+			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[21](null);
+			if (detaching) detach(t0);
+			if (detaching) detach(div1);
+			destroy_each(each_blocks_1, detaching);
+			if (detaching) detach(t1);
+			if (if_block) if_block.d(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 height;
+	let parsedSvgs;
+	let { data = '' } = $$props;
+	let subgroups;
+	let { chartheight = '300' } = $$props;
+	let { backgroundcolor = '#fff' } = $$props;
+	let { leftscalemax = 50 } = $$props;
+	let { rightscalemax } = $$props;
+	let { color = '#0B96CC' } = $$props;
+	let { ticknumbers = 4 } = $$props;
+	let { tickleftformat = d => `${Number(d)}` } = $$props;
+	let { tickbottomformat = d => `${d}` } = $$props;
+	let { tickrightformat = d => `${Number(d)}` } = $$props;
+	let { svgs } = $$props;
+	let { margins } = $$props;
+	let _data;
+	let chart;
+	let svg;
+	let hasMounted = false;
+
+	let tooltipData = {
+		show: false,
+		text: '',
+		top: 0,
+		left: 0,
+		width: 0
+	};
+
+	let eventHandler = new EventHandler();
+	let leftScaleWidth = 0;
+	let width = 0;
+
+	function getChartWidth() {
+		let chartWidth = select(chart).style('width');
+
+		if (chartWidth === '' || !chartWidth) {
+			chartWidth = `${window.innerWidth / 2}`;
+		}
+
+		return parseInt(chartWidth);
+	}
+
+	function getBarKeyValue(d) {
+		return subgroups.map(key => ({
+			key,
+			value: d[key].value,
+			scalePosition: d[key].scalePosition,
+			color: d[key].color,
+			customtooltip: d[key].customtooltip
+		}));
+	}
+
+	function getAxes(width) {
+		const xWidth = rightscalemax
+		? width - (getParsedMargins(margins).left + getParsedMargins(margins).right)
+		: width - getParsedMargins(margins).right;
+
+		const x = band().domain(groups).range([0, xWidth]).padding(0.2);
+		const yleft = linear().domain([0, leftscalemax]).range([height, 0]);
+		const yright = linear().domain([0, rightscalemax]).range([height, 0]);
+		const xSubgroup = band().domain(subgroups).range([0, x.bandwidth()]).padding(0.05);
+		return { x, yleft, yright, xSubgroup };
+	}
+
+	function getAxisWidth(position) {
+		const { width } = chart.getElementsByClassName(`y-${position}-axis`)[0].getBoundingClientRect();
+		return width;
+	}
+
+	function addRectandles(x, xSubgroup, yleft, yright) {
+		svg.append('g').selectAll('g').data(parsedData).join('g').attr('transform', d => `translate(${String(x(d.group))}, 0)`).attr('class', 'bar').selectAll('rect').data(d => getBarKeyValue(d)).join('rect').attr('x', d => xSubgroup(d.key)).attr('y', d => d.scalePosition === 'right' ? yright(0) : yleft(0)).attr('width', xSubgroup.bandwidth()).attr('height', d => height - (d.scalePosition === 'right' ? yright(0) : yleft(0))).style('fill', d => d.color || color).style('cursor', 'pointer').on('mouseout', (_e, chartEvent) => {
+			const others = svg.selectAll('rect').filter(function (arc) {
+				return arc != chartEvent;
+			});
+
+			others.style('opacity', 1);
+			$$invalidate(4, tooltipData.show = false, tooltipData);
+		}).on('mouseover', (e, chartEvent) => {
+			var _a, _b;
+
+			const others = svg.selectAll('rect').filter(function (arc) {
+				return arc != chartEvent;
+			});
+
+			others.style('opacity', 0.7);
+
+			const { left, top, width } = (_b = (_a = e.target.parentElement) === null || _a === void 0
+			? void 0
+			: _a.getBoundingClientRect()) !== null && _b !== void 0
+			? _b
+			: { left: 0, top: 0, width: 0 };
+
+			$$invalidate(4, tooltipData = {
+				show: true,
+				text: chartEvent.customtooltip
+				? `${chartEvent.customtooltip}`
+				: `${chartEvent.key} - ${chartEvent.value}`,
+				left,
+				top: top - 50,
+				width
+			});
+		}).on('click', (_e, chartEvent) => {
+			eventHandler.dispatch('bar-clicked', chartEvent);
+		});
+
+		svg.selectAll('rect').transition().duration(800).attr('y', d => d.scalePosition === 'right'
+		? yright(+d.value)
+		: yleft(+d.value)).attr('height', d => height - (d.scalePosition === 'right'
+		? yright(+d.value)
+		: yleft(+d.value))).delay((_d, i) => i * 100);
+	}
+
+	function updateAxes(x, yleft, yright) {
+		svg.select('.x-axis').call(axisBottom(x).tickFormat(tickbottomformat));
+		svg.select('.y-left-axis').call(axisLeft(yleft).ticks(ticknumbers).tickFormat(tickleftformat));
+
+		if (rightscalemax) {
+			svg.select('.y-right-axis').call(axisRight(yright).ticks(ticknumbers).tickFormat(tickrightformat)).attr('transform', `translate(${width - getParsedMargins(margins).left - leftScaleWidth},0)`);
+		}
+
+		const x2 = rightscalemax
+		? width - getParsedMargins(margins).left - leftScaleWidth
+		: width - leftScaleWidth;
+
+		svg.selectAll('.y-left-axis .tick line').attr('stroke', '#EEEDEA').attr('stroke-width', '1px').attr('x2', x2);
+	}
+
+	function render() {
+		width = getChartWidth();
+		const { x, yleft, yright, xSubgroup } = 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(yleft).ticks(ticknumbers).tickFormat(tickleftformat)).attr('class', 'y-left-axis').attr('stroke-width', '0');
+		leftScaleWidth = getAxisWidth('left');
+
+		if (rightscalemax) {
+			svg.append('g').call(axisRight(yright).ticks(ticknumbers).tickFormat(tickleftformat)).attr('class', 'y-right-axis').attr('transform', `translate(${width - getParsedMargins(margins).left - leftScaleWidth},0)`).attr('stroke-width', '0');
+		}
+
+		addRectandles(x, xSubgroup, yleft, yright);
+	}
+
+	function update() {
+		var _a;
+
+		(_a = chart.querySelector('#svg-chart')) === null || _a === void 0
+		? void 0
+		: _a.setAttribute('width', `${width}px`);
+
+		const { x, yleft, yright, xSubgroup } = getAxes(width);
+		updateAxes(x, yleft, yright);
+		svg.selectAll('.bar').remove();
+		addRectandles(x, xSubgroup, yleft, yright);
+	}
+
+	function resize() {
+		var _a;
+		width = getChartWidth();
+
+		if (_data) {
+			const width = getChartWidth();
+
+			(_a = chart.querySelector('#svg-chart')) === null || _a === void 0
+			? void 0
+			: _a.setAttribute('width', `${width}px`);
+
+			const { x, yleft, yright, xSubgroup } = getAxes(width);
+			updateAxes(x, yleft, yright);
+			svg.selectAll('.bar').data(parsedData).attr('transform', d => `translate(${String(x(d.group))}, 0)`).selectAll('rect').data(d => getBarKeyValue(d)).attr('x', d => xSubgroup(d.key)).attr('width', xSubgroup.bandwidth());
+		}
+	}
+
+	function getLegendColor(subgroup, parsedData) {
+		var _a;
+
+		if (parsedData.length > 0) return (_a = parsedData[0][subgroup]) === null || _a === void 0
+		? void 0
+		: _a.color;
+
+		return '';
+	}
+
+	onMount(() => {
+		const resizeObserver = new ResizeObserver(resize);
+		resizeObserver.observe(chart);
+		$$invalidate(20, hasMounted = true);
+	});
+
+	function div0_binding($$value) {
+		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+			chart = $$value;
+			$$invalidate(3, chart);
+		});
+	}
+
+	$$self.$$set = $$props => {
+		if ('data' in $$props) $$invalidate(8, data = $$props.data);
+		if ('chartheight' in $$props) $$invalidate(9, chartheight = $$props.chartheight);
+		if ('backgroundcolor' in $$props) $$invalidate(0, backgroundcolor = $$props.backgroundcolor);
+		if ('leftscalemax' in $$props) $$invalidate(10, leftscalemax = $$props.leftscalemax);
+		if ('rightscalemax' in $$props) $$invalidate(11, rightscalemax = $$props.rightscalemax);
+		if ('color' in $$props) $$invalidate(12, color = $$props.color);
+		if ('ticknumbers' in $$props) $$invalidate(13, ticknumbers = $$props.ticknumbers);
+		if ('tickleftformat' in $$props) $$invalidate(14, tickleftformat = $$props.tickleftformat);
+		if ('tickbottomformat' in $$props) $$invalidate(15, tickbottomformat = $$props.tickbottomformat);
+		if ('tickrightformat' in $$props) $$invalidate(16, tickrightformat = $$props.tickrightformat);
+		if ('svgs' in $$props) $$invalidate(17, svgs = $$props.svgs);
+		if ('margins' in $$props) $$invalidate(18, margins = $$props.margins);
+	};
+
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty[0] & /*data*/ 256) {
+			$$invalidate(1, parsedData = data ? JSON.parse(data) : []);
+		}
+
+		if ($$self.$$.dirty[0] & /*parsedData*/ 2) {
+			groups = parsedData.map(d => d.group);
+		}
+
+		if ($$self.$$.dirty[0] & /*parsedData*/ 2) {
+			$$invalidate(2, subgroups = parsedData[0]
+			? Object.keys(parsedData[0]).filter(d => d !== 'group')
+			: []);
+		}
+
+		if ($$self.$$.dirty[0] & /*chartheight*/ 512) {
+			height = parseInt(chartheight, 10);
+		}
+
+		if ($$self.$$.dirty[0] & /*svgs*/ 131072) {
+			$$invalidate(5, parsedSvgs = svgs ? JSON.parse(svgs) : []);
+		}
+
+		if ($$self.$$.dirty[0] & /*data, hasMounted, _data*/ 1573120) {
+			if (data.length > 0 && hasMounted) {
+				if (!_data) {
+					render();
+					$$invalidate(19, _data = data);
+				} else if (data !== _data) {
+					update();
+					$$invalidate(19, _data = data);
+				}
+			}
+		}
+	};
+
+	return [
+		backgroundcolor,
+		parsedData,
+		subgroups,
+		chart,
+		tooltipData,
+		parsedSvgs,
+		svg,
+		getLegendColor,
+		data,
+		chartheight,
+		leftscalemax,
+		rightscalemax,
+		color,
+		ticknumbers,
+		tickleftformat,
+		tickbottomformat,
+		tickrightformat,
+		svgs,
+		margins,
+		_data,
+		hasMounted,
+		div0_binding
+	];
+}
+
+class GroupedBarChart 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:absolute}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: 8,
+				chartheight: 9,
+				backgroundcolor: 0,
+				leftscalemax: 10,
+				rightscalemax: 11,
+				color: 12,
+				ticknumbers: 13,
+				tickleftformat: 14,
+				tickbottomformat: 15,
+				tickrightformat: 16,
+				svgs: 17,
+				margins: 18
+			},
+			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",
+			"leftscalemax",
+			"rightscalemax",
+			"color",
+			"ticknumbers",
+			"tickleftformat",
+			"tickbottomformat",
+			"tickrightformat",
+			"svgs",
+			"margins"
+		];
+	}
+
+	get data() {
+		return this.$$.ctx[8];
+	}
+
+	set data(data) {
+		this.$$set({ data });
+		flush();
+	}
+
+	get chartheight() {
+		return this.$$.ctx[9];
+	}
+
+	set chartheight(chartheight) {
+		this.$$set({ chartheight });
+		flush();
+	}
+
+	get backgroundcolor() {
+		return this.$$.ctx[0];
+	}
+
+	set backgroundcolor(backgroundcolor) {
+		this.$$set({ backgroundcolor });
+		flush();
+	}
+
+	get leftscalemax() {
+		return this.$$.ctx[10];
+	}
+
+	set leftscalemax(leftscalemax) {
+		this.$$set({ leftscalemax });
+		flush();
+	}
+
+	get rightscalemax() {
+		return this.$$.ctx[11];
+	}
+
+	set rightscalemax(rightscalemax) {
+		this.$$set({ rightscalemax });
+		flush();
+	}
+
+	get color() {
+		return this.$$.ctx[12];
+	}
+
+	set color(color) {
+		this.$$set({ color });
+		flush();
+	}
+
+	get ticknumbers() {
+		return this.$$.ctx[13];
+	}
+
+	set ticknumbers(ticknumbers) {
+		this.$$set({ ticknumbers });
+		flush();
+	}
+
+	get tickleftformat() {
+		return this.$$.ctx[14];
+	}
+
+	set tickleftformat(tickleftformat) {
+		this.$$set({ tickleftformat });
+		flush();
+	}
+
+	get tickbottomformat() {
+		return this.$$.ctx[15];
+	}
+
+	set tickbottomformat(tickbottomformat) {
+		this.$$set({ tickbottomformat });
+		flush();
+	}
+
+	get tickrightformat() {
+		return this.$$.ctx[16];
+	}
+
+	set tickrightformat(tickrightformat) {
+		this.$$set({ tickrightformat });
+		flush();
+	}
+
+	get svgs() {
+		return this.$$.ctx[17];
+	}
+
+	set svgs(svgs) {
+		this.$$set({ svgs });
+		flush();
+	}
+
+	get margins() {
+		return this.$$.ctx[18];
+	}
+
+	set margins(margins) {
+		this.$$set({ margins });
+		flush();
+	}
+}
+
+export { GroupedBarChart as default };
 //# sourceMappingURL=GroupedBarChart.js.map