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

package/public/components/chart/BarChart.js

@@ -1,2 +1,584 @@
-import{S as t,i as e,a as r,b as s,f as a,s as o,e as i,d as n,T as c,n as l,y as u,g as d,o as m,J as h,a1 as g,t as f,j as p,k as $,K as x,v as b,Z as k}from"../../index-c33b3772.js";import{s as y}from"../../transform-15d69d5d.js";import{E as v}from"../../EventHandler-02058705.js";import{a as w,b as A}from"../../axis-fbc0f7b5.js";import{b as N}from"../../band-d7a07d2c.js";import{l as S}from"../../linear-f46d7e9e.js";function j(t,e,r){const s=t.slice();return s[4]=e[r],s}function E(t){let e,r,a,o=t[2].text+"";return{c(){e=i("div"),r=f(o),d(e,"class","tooltip"),d(e,"style",a=`top: ${t[2].top}px; left: ${t[2].left}px; width: ${t[2].width}px;`)},m(t,a){s(t,e,a),p(e,r)},p(t,s){4&s[0]&&o!==(o=t[2].text+"")&&$(r,o),4&s[0]&&a!==(a=`top: ${t[2].top}px; left: ${t[2].left}px; width: ${t[2].width}px;`)&&d(e,"style",a)},d(t){t&&m(e)}}}function C(t){let e,r,a=t[4]+"";return{c(){e=new k(!1),r=x(),e.a=r},m(t,o){e.m(a,t,o),s(t,r,o)},p(t,r){8&r[0]&&a!==(a=t[4]+"")&&e.p(a)},d(t){t&&m(r),t&&e.d()}}}function O(t){let e,r,a,o,g,f,p=t[2].show&&E(t),$=t[3],x=[];for(let e=0;e<$.length;e+=1)x[e]=C(j(t,$,e));return{c(){e=i("div"),r=n(),p&&p.c(),a=n(),o=i("div");for(let t=0;t<x.length;t+=1)x[t].c();g=n(),f=c("text"),this.c=l,u(e,"background-color",t[0]),u(o,"height","0"),u(o,"width","0"),d(o,"class","pattern")},m(i,n){s(i,e,n),t[18](e),s(i,r,n),p&&p.m(i,n),s(i,a,n),s(i,o,n);for(let t=0;t<x.length;t+=1)x[t]&&x[t].m(o,null);s(i,g,n),s(i,f,n)},p(t,r){if(1&r[0]&&u(e,"background-color",t[0]),t[2].show?p?p.p(t,r):(p=E(t),p.c(),p.m(a.parentNode,a)):p&&(p.d(1),p=null),8&r[0]){let e;for($=t[3],e=0;e<$.length;e+=1){const s=j(t,$,e);x[e]?x[e].p(s,r):(x[e]=C(s),x[e].c(),x[e].m(o,null))}for(;e<x.length;e+=1)x[e].d(1);x.length=$.length}},i:l,o:l,d(s){s&&m(e),t[18](null),s&&m(r),p&&p.d(s),s&&m(a),s&&m(o),h(x,s),s&&m(g),s&&m(f)}}}function J(t){return t?JSON.parse(t):{top:10,right:40,bottom:20,left:60,xAxis:20}}function R(t,e,r){let s,a,o,i,n,{data:c=""}=e,{chartheight:l="300"}=e,{backgroundcolor:u="#fff"}=e,{scalemax:d=50}=e,{scalemin:m=0}=e,{color:h="#0B96CC"}=e,{ticknumbers:f=4}=e,{tickleftformat:p}=e;p=t=>`${t}`;let $,x,k,{tickbottomformat:j=(t=>`${t}`)}=e,{svgs:E}=e,{margins:C}=e,O=!1,R={show:!1,text:"",top:0,left:0,width:0},z=new v;function F(){let t=y(x).style("width");return""!==t&&t||(t=""+window.innerWidth/2),parseInt(t)}function q(t){return n.map((e=>({key:e,value:t[e].value,customtooltip:t[e].customtooltip})))}function B(t){const e=N().domain(s).range([0,t-(J(C).left/2+J(C).right/2)]).padding(.2),r=S().domain([m,d]).range([a,0]),o=N().domain(n).range([0,e.bandwidth()]).padding(.05);return{x:e,y:r,xSubgroup:o}}function I(t,e,s){k.append("g").selectAll("g").data(i).join("g").attr("transform",(e=>`translate(${String(t(e.group))}, 0)`)).attr("class","bar").selectAll("rect").data((t=>q(t))).join("rect").attr("x",(t=>e(t.key))).attr("y",(()=>s(0))).attr("width",e.bandwidth()).attr("height",(()=>a-s(0))).style("fill",(()=>h)).style("cursor","pointer").on("mouseout",((t,e)=>{k.selectAll("rect").filter((function(t){return t!=e})).style("opacity",1),r(2,R.show=!1,R)})).on("mouseover",((t,e)=>{k.selectAll("rect").filter((function(t){return t!=e})).style("opacity",.7);const{left:s,top:a,width:o}=t.target.getBoundingClientRect();r(2,R={show:!0,text:e.customtooltip?`${e.customtooltip}`:`${e.key} - ${e.value}`,left:s,top:a-50,width:o})})).on("click",((t,e)=>{z.dispatch("bar-clicked",e)})),k.selectAll("rect").transition().duration(800).attr("y",(t=>+t.value<0?s(0):s(+t.value))).attr("height",(t=>+t.value<0?s(+t.value)-s(0):a-s(+t.value+Number(m)))).delay(((t,e)=>100*e))}function D(t,e){k.select(".x-axis").call(w(t).tickFormat(j)),k.select(".y-axis").call(A(e).ticks(f).tickFormat(p));const r=F();k.selectAll(".y-axis .tick line").attr("stroke","#EEEDEA").attr("stroke-width","1px").attr("x2",r)}function H(){var t;if($){const e=F();null===(t=x.querySelector("#svg-chart"))||void 0===t||t.setAttribute("width",`${e}px`);const{x:r,y:s,xSubgroup:a}=B(e);D(r,s),k.selectAll(".bar").data(i).attr("transform",(t=>`translate(${Number(r(t.group))}, 0)`)).selectAll("rect").data((t=>q(t))).attr("x",(t=>a(t.key))).attr("width",a.bandwidth())}}return g((()=>{new ResizeObserver(H).observe(x),r(17,O=!0)})),t.$$set=t=>{"data"in t&&r(6,c=t.data),"chartheight"in t&&r(7,l=t.chartheight),"backgroundcolor"in t&&r(0,u=t.backgroundcolor),"scalemax"in t&&r(8,d=t.scalemax),"scalemin"in t&&r(9,m=t.scalemin),"color"in t&&r(10,h=t.color),"ticknumbers"in t&&r(11,f=t.ticknumbers),"tickleftformat"in t&&r(5,p=t.tickleftformat),"tickbottomformat"in t&&r(12,j=t.tickbottomformat),"svgs"in t&&r(13,E=t.svgs),"margins"in t&&r(14,C=t.margins)},t.$$.update=()=>{64&t.$$.dirty[0]&&r(15,i=c?JSON.parse(c):[]),32768&t.$$.dirty[0]&&(s=i.map((t=>t.group))),32768&t.$$.dirty[0]&&(n=i[0]?Object.keys(i[0]).filter((t=>"group"!==t)):[]),128&t.$$.dirty[0]&&(a=parseInt(l,10)),8192&t.$$.dirty[0]&&r(3,o=E?JSON.parse(E):[]),196672&t.$$.dirty[0]&&c.length>0&&O&&($?c!==$&&(!function(){var t;const e=F();null===(t=x.querySelector("#svg-chart"))||void 0===t||t.setAttribute("width",`${e}px`);const{x:r,y:s,xSubgroup:a}=B(e);D(r,s),k.selectAll(".bar").remove(),I(r,a,s)}(),r(16,$=c)):(!function(){const t=F(),{x:e,y:s,xSubgroup:o}=B(t);r(4,k=y(x).append("svg").attr("width",t).attr("height",Number(a)+Number(J(C).top)+Number(J(C).bottom)+Number(J(C).xAxis)).attr("id","svg-chart").append("g").attr("transform",`translate(${J(C).left/2+J(C).right/2},${J(C).top})`)),k.append("g").attr("transform",`translate(0, ${Number(a)+Number(J(C).xAxis)})`).call(w(e)).attr("class","x-axis").attr("stroke-width","0"),k.append("g").call(A(s).ticks(f).tickFormat(p)).attr("class","y-axis").attr("stroke-width","0"),I(e,o,s)}(),r(16,$=c)))},[u,x,R,o,k,p,c,l,d,m,h,f,j,E,C,i,$,O,function(t){b[t?"unshift":"push"]((()=>{x=t,r(1,x)}))}]}class z extends t{constructor(t){super();const i=document.createElement("style");i.textContent='.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(i),e(this,{target:this.shadowRoot,props:r(this.attributes),customElement:!0},R,O,o,{data:6,chartheight:7,backgroundcolor:0,scalemax:8,scalemin:9,color:10,ticknumbers:11,tickleftformat:5,tickbottomformat:12,svgs:13,margins:14},null,[-1,-1]),t&&(t.target&&s(t.target,this,t.anchor),t.props&&(this.$set(t.props),a()))}static get observedAttributes(){return["data","chartheight","backgroundcolor","scalemax","scalemin","color","ticknumbers","tickleftformat","tickbottomformat","svgs","margins"]}get data(){return this.$$.ctx[6]}set data(t){this.$$set({data:t}),a()}get chartheight(){return this.$$.ctx[7]}set chartheight(t){this.$$set({chartheight:t}),a()}get backgroundcolor(){return this.$$.ctx[0]}set backgroundcolor(t){this.$$set({backgroundcolor:t}),a()}get scalemax(){return this.$$.ctx[8]}set scalemax(t){this.$$set({scalemax:t}),a()}get scalemin(){return this.$$.ctx[9]}set scalemin(t){this.$$set({scalemin:t}),a()}get color(){return this.$$.ctx[10]}set color(t){this.$$set({color:t}),a()}get ticknumbers(){return this.$$.ctx[11]}set ticknumbers(t){this.$$set({ticknumbers:t}),a()}get tickleftformat(){return this.$$.ctx[5]}set tickleftformat(t){this.$$set({tickleftformat:t}),a()}get tickbottomformat(){return this.$$.ctx[12]}set tickbottomformat(t){this.$$set({tickbottomformat:t}),a()}get svgs(){return this.$$.ctx[13]}set svgs(t){this.$$set({svgs:t}),a()}get margins(){return this.$$.ctx[14]}set margins(t){this.$$set({margins:t}),a()}}export{z 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 } from '../../axis-fbc0f7b5.js';
+import { b as band } from '../../band-d7a07d2c.js';
+import { l as linear } from '../../linear-f46d7e9e.js';
+
+/* src/components/chart/BarChart.svelte generated by Svelte v3.58.0 */
+
+function get_each_context(ctx, list, i) {
+	const child_ctx = ctx.slice();
+	child_ctx[4] = list[i];
+	return child_ctx;
+}
+
+// (215:0) {#if tooltipData.show}
+function create_if_block(ctx) {
+	let div;
+	let t_value = /*tooltipData*/ ctx[2].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[2].top}px; left: ${/*tooltipData*/ ctx[2].left}px;`);
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+			append(div, t);
+		},
+		p(ctx, dirty) {
+			if (dirty[0] & /*tooltipData*/ 4 && t_value !== (t_value = /*tooltipData*/ ctx[2].text + "")) set_data(t, t_value);
+
+			if (dirty[0] & /*tooltipData*/ 4 && div_style_value !== (div_style_value = `top: ${/*tooltipData*/ ctx[2].top}px; left: ${/*tooltipData*/ ctx[2].left}px;`)) {
+				attr(div, "style", div_style_value);
+			}
+		},
+		d(detaching) {
+			if (detaching) detach(div);
+		}
+	};
+}
+
+// (224:2) {#each parsedSvgs as svg}
+function create_each_block(ctx) {
+	let html_tag;
+	let raw_value = /*svg*/ ctx[4] + "";
+	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*/ 8 && raw_value !== (raw_value = /*svg*/ ctx[4] + "")) 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 text_1;
+	let if_block = /*tooltipData*/ ctx[2].show && create_if_block(ctx);
+	let each_value = /*parsedSvgs*/ ctx[3];
+	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.length; i += 1) {
+				each_blocks[i].c();
+			}
+
+			t2 = space();
+			text_1 = svg_element("text");
+			this.c = noop;
+			set_style(div0, "background-color", /*backgroundcolor*/ ctx[0]);
+			set_style(div1, "height", "0");
+			set_style(div1, "width", "0");
+			attr(div1, "class", "pattern");
+		},
+		m(target, anchor) {
+			insert(target, div0, anchor);
+			/*div0_binding*/ ctx[18](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.length; i += 1) {
+				if (each_blocks[i]) {
+					each_blocks[i].m(div1, null);
+				}
+			}
+
+			insert(target, t2, 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[2].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] & /*parsedSvgs*/ 8) {
+				each_value = /*parsedSvgs*/ ctx[3];
+				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(div1, 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[18](null);
+			if (detaching) detach(t0);
+			if (if_block) if_block.d(detaching);
+			if (detaching) detach(t1);
+			if (detaching) detach(div1);
+			destroy_each(each_blocks, detaching);
+			if (detaching) detach(t2);
+			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 groups;
+	let height;
+	let parsedSvgs;
+	let { data = '' } = $$props;
+	let parsedData;
+	let subgroups;
+	let { chartheight = '300' } = $$props;
+	let { backgroundcolor = '#fff' } = $$props;
+	let { scalemax = 50 } = $$props;
+	let { scalemin = 0 } = $$props;
+	let { color = '#0B96CC' } = $$props;
+	let { ticknumbers = 4 } = $$props;
+	let { tickleftformat } = $$props;
+	tickleftformat = d => `${d}`;
+	let { tickbottomformat = d => `${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();
+
+	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,
+			customtooltip: d[key].customtooltip
+		}));
+	}
+
+	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([scalemin, scalemax]).range([height, 0]);
+		const xSubgroup = band().domain(subgroups).range([0, x.bandwidth()]).padding(0.05);
+		return { x, y, xSubgroup };
+	}
+
+	function addRectandles(x, xSubgroup, y) {
+		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', () => y(0)).attr('width', xSubgroup.bandwidth()).attr('height', () => height - y(0)).style('fill', () => color).style('cursor', 'pointer').on('mouseout', (_e, chartEvent) => {
+			const others = svg.selectAll('rect').filter(function (arc) {
+				return arc != chartEvent;
+			});
+
+			others.style('opacity', 1);
+			$$invalidate(2, 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();
+			console.log(xSubgroup.bandwidth());
+
+			$$invalidate(2, 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.value < 0 ? y(0) : y(+d.value)).attr('height', d => +d.value < 0
+		? y(+d.value) - y(0)
+		: height - y(+d.value + Number(scalemin))).delay((_d, i) => i * 100);
+	}
+
+	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, xSubgroup } = getAxes(width);
+		$$invalidate(4, 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, xSubgroup, 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, xSubgroup } = getAxes(width);
+		updateAxes(x, y);
+		svg.selectAll('.bar').remove();
+		addRectandles(x, xSubgroup, 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, xSubgroup } = getAxes(width);
+			updateAxes(x, y);
+			svg.selectAll('.bar').data(parsedData).attr('transform', d => `translate(${Number(x(d.group))}, 0)`).selectAll('rect').data(d => getBarKeyValue(d)).attr('x', d => xSubgroup(d.key)).attr('width', xSubgroup.bandwidth());
+		}
+	}
+
+	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(1, chart);
+		});
+	}
+
+	$$self.$$set = $$props => {
+		if ('data' in $$props) $$invalidate(6, data = $$props.data);
+		if ('chartheight' in $$props) $$invalidate(7, chartheight = $$props.chartheight);
+		if ('backgroundcolor' in $$props) $$invalidate(0, backgroundcolor = $$props.backgroundcolor);
+		if ('scalemax' in $$props) $$invalidate(8, scalemax = $$props.scalemax);
+		if ('scalemin' in $$props) $$invalidate(9, scalemin = $$props.scalemin);
+		if ('color' in $$props) $$invalidate(10, color = $$props.color);
+		if ('ticknumbers' in $$props) $$invalidate(11, ticknumbers = $$props.ticknumbers);
+		if ('tickleftformat' in $$props) $$invalidate(5, tickleftformat = $$props.tickleftformat);
+		if ('tickbottomformat' in $$props) $$invalidate(12, tickbottomformat = $$props.tickbottomformat);
+		if ('svgs' in $$props) $$invalidate(13, svgs = $$props.svgs);
+		if ('margins' in $$props) $$invalidate(14, margins = $$props.margins);
+	};
+
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty[0] & /*data*/ 64) {
+			$$invalidate(15, parsedData = data ? JSON.parse(data) : []);
+		}
+
+		if ($$self.$$.dirty[0] & /*parsedData*/ 32768) {
+			groups = parsedData.map(d => d.group);
+		}
+
+		if ($$self.$$.dirty[0] & /*parsedData*/ 32768) {
+			subgroups = parsedData[0]
+			? Object.keys(parsedData[0]).filter(d => d !== 'group')
+			: [];
+		}
+
+		if ($$self.$$.dirty[0] & /*chartheight*/ 128) {
+			height = parseInt(chartheight, 10);
+		}
+
+		if ($$self.$$.dirty[0] & /*svgs*/ 8192) {
+			$$invalidate(3, parsedSvgs = svgs ? JSON.parse(svgs) : []);
+		}
+
+		if ($$self.$$.dirty[0] & /*data, hasMounted, _data*/ 196672) {
+			if (data.length > 0 && hasMounted) {
+				if (!_data) {
+					render();
+					$$invalidate(16, _data = data);
+				} else if (data !== _data) {
+					update();
+					$$invalidate(16, _data = data);
+				}
+			}
+		}
+	};
+
+	return [
+		backgroundcolor,
+		chart,
+		tooltipData,
+		parsedSvgs,
+		svg,
+		tickleftformat,
+		data,
+		chartheight,
+		scalemax,
+		scalemin,
+		color,
+		ticknumbers,
+		tickbottomformat,
+		svgs,
+		margins,
+		parsedData,
+		_data,
+		hasMounted,
+		div0_binding
+	];
+}
+
+class BarChart extends SvelteElement {
+	constructor(options) {
+		super();
+		const style = document.createElement('style');
+		style.textContent = `.tooltip{height:auto;background-color:#4d4d4d;border-radius:4px;color:#ffffff;text-align:center;padding:0.5rem 1rem;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: 6,
+				chartheight: 7,
+				backgroundcolor: 0,
+				scalemax: 8,
+				scalemin: 9,
+				color: 10,
+				ticknumbers: 11,
+				tickleftformat: 5,
+				tickbottomformat: 12,
+				svgs: 13,
+				margins: 14
+			},
+			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",
+			"scalemin",
+			"color",
+			"ticknumbers",
+			"tickleftformat",
+			"tickbottomformat",
+			"svgs",
+			"margins"
+		];
+	}
+
+	get data() {
+		return this.$$.ctx[6];
+	}
+
+	set data(data) {
+		this.$$set({ data });
+		flush();
+	}
+
+	get chartheight() {
+		return this.$$.ctx[7];
+	}
+
+	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[8];
+	}
+
+	set scalemax(scalemax) {
+		this.$$set({ scalemax });
+		flush();
+	}
+
+	get scalemin() {
+		return this.$$.ctx[9];
+	}
+
+	set scalemin(scalemin) {
+		this.$$set({ scalemin });
+		flush();
+	}
+
+	get color() {
+		return this.$$.ctx[10];
+	}
+
+	set color(color) {
+		this.$$set({ color });
+		flush();
+	}
+
+	get ticknumbers() {
+		return this.$$.ctx[11];
+	}
+
+	set ticknumbers(ticknumbers) {
+		this.$$set({ ticknumbers });
+		flush();
+	}
+
+	get tickleftformat() {
+		return this.$$.ctx[5];
+	}
+
+	set tickleftformat(tickleftformat) {
+		this.$$set({ tickleftformat });
+		flush();
+	}
+
+	get tickbottomformat() {
+		return this.$$.ctx[12];
+	}
+
+	set tickbottomformat(tickbottomformat) {
+		this.$$set({ tickbottomformat });
+		flush();
+	}
+
+	get svgs() {
+		return this.$$.ctx[13];
+	}
+
+	set svgs(svgs) {
+		this.$$set({ svgs });
+		flush();
+	}
+
+	get margins() {
+		return this.$$.ctx[14];
+	}
+
+	set margins(margins) {
+		this.$$set({ margins });
+		flush();
+	}
+}
+
+export { BarChart as default };
 //# sourceMappingURL=BarChart.js.map

package/public/components/chart/BarChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"BarChart.js","sources":["../../../src/components/chart/BarChart.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import {\n    select,\n    scaleBand,\n    scaleLinear,\n    axisBottom,\n    axisLeft,\n    Selection,\n    ScaleBand,\n    ScaleLinear,\n  } from 'd3';\n  import { onMount } from 'svelte';\n  import type { BarData, BarKeyValue, BarMargin } from './bar-chart.types';\n  import { EventHandler } from '../../utilities/EventHandler';\n\n  export let data = '';\n  let parsedData: BarData[];\n  let subgroups: string[];\n  $: parsedData = data ? (JSON.parse(data) as BarData[]) : [];\n  $: groups = parsedData.map((d: BarData) => d.group);\n  $: subgroups = parsedData[0]\n    ? Object.keys(parsedData[0]).filter((d: string) => d !== 'group')\n    : [];\n\n  export let chartheight = '300';\n  $: height = parseInt(chartheight, 10);\n\n  export let backgroundcolor = '#fff';\n  export let scalemax = 50;\n  export let scalemin = 0;\n  export let color = '#0B96CC';\n  export let ticknumbers = 4;\n  export let tickleftformat: (d: number, i: number) => string;\n  tickleftformat = (d) => `${d}`;\n  export let tickbottomformat: (d: number, i: number) => string = (d) => `${d}`;\n\n  export let svgs: string;\n  $: parsedSvgs = svgs ? (JSON.parse(svgs) as SVGElement[]) : [];\n\n  export let margins: string;\n\n  let _data: string;\n  let chart: HTMLDivElement;\n  let svg: Selection<SVGGElement, any, any, any>;\n  let hasMounted = false;\n  let tooltipData = { show: false, text: '', top: 0, left: 0, width: 0 };\n  let eventHandler = new EventHandler();\n\n  $: if (data.length > 0 && hasMounted) {\n    if (!_data) {\n      render();\n      _data = data;\n    } else if (data !== _data) {\n      update();\n      _data = data;\n    }\n  }\n\n  function getParsedMargins(margins: string): BarMargin {\n    if (margins) return JSON.parse(margins) as BarMargin;\n    else\n      return {\n        top: 10,\n        right: 40,\n        bottom: 20,\n        left: 60,\n        xAxis: 20,\n      } as BarMargin;\n  }\n\n  function getChartWidth() {\n    let chartWidth = select(chart).style('width');\n    if (chartWidth === '' || !chartWidth) {\n      chartWidth = `${window.innerWidth / 2}`;\n    }\n    return parseInt(chartWidth);\n  }\n\n  function getBarKeyValue(d: BarData): BarKeyValue[] {\n    return subgroups.map((key) => ({\n      key: key,\n      value: d[key].value,\n      customtooltip: d[key].customtooltip,\n    }));\n  }\n\n  function getAxes(width: number) {\n    const x = scaleBand()\n      .domain(groups)\n      .range([\n        0,\n        width -\n          (getParsedMargins(margins).left / 2 +\n            getParsedMargins(margins).right / 2),\n      ])\n      .padding(0.2);\n    const y = scaleLinear().domain([scalemin, scalemax]).range([height, 0]);\n    const xSubgroup = scaleBand()\n      .domain(subgroups)\n      .range([0, x.bandwidth()])\n      .padding(0.05);\n    return { x, y, xSubgroup };\n  }\n\n  function addRectandles(\n    x: ScaleBand<string>,\n    xSubgroup: ScaleBand<string>,\n    y: ScaleLinear<number, number, never>,\n  ) {\n    svg\n      .append('g')\n      .selectAll('g')\n      .data(parsedData)\n      .join('g')\n      .attr('transform', (d) => `translate(${String(x(d.group))}, 0)`)\n      .attr('class', 'bar')\n      .selectAll('rect')\n      .data((d) => getBarKeyValue(d))\n      .join('rect')\n      .attr('x', (d) => xSubgroup(d.key)!)\n      .attr('y', () => y(0))\n      .attr('width', xSubgroup.bandwidth())\n      .attr('height', () => height - y(0))\n      .style('fill', () => color)\n      .style('cursor', 'pointer')\n      .on('mouseout', (_e: MouseEvent, chartEvent: BarKeyValue) => {\n        const others = svg.selectAll('rect').filter(function (arc) {\n          return arc != chartEvent;\n        });\n        others.style('opacity', 1);\n        tooltipData.show = false;\n      })\n      .on('mouseover', (e: MouseEvent, chartEvent: BarKeyValue) => {\n        const others = svg.selectAll('rect').filter(function (arc) {\n          return arc != chartEvent;\n        });\n        others.style('opacity', 0.7);\n        const { left, top, width } = (\n          e.target as HTMLElement\n        ).getBoundingClientRect();\n        tooltipData = {\n          show: true,\n          text: chartEvent.customtooltip\n            ? `${chartEvent.customtooltip}`\n            : `${chartEvent.key} - ${chartEvent.value}`,\n          left: left,\n          top: top - 50,\n          width,\n        };\n      })\n      .on('click', (_e: MouseEvent, chartEvent: BarKeyValue) => {\n        eventHandler.dispatch('bar-clicked', chartEvent);\n      });\n\n    svg\n      .selectAll<SVGElement, BarKeyValue>('rect')\n      .transition()\n      .duration(800)\n      .attr('y', (d) => (+d.value < 0 ? y(0) : y(+d.value)))\n      .attr('height', (d) =>\n        +d.value < 0\n          ? y(+d.value) - y(0)\n          : height - y(+d.value + Number(scalemin)),\n      )\n      .delay((_d, i) => i * 100);\n  }\n\n  function updateAxes(\n    x: ScaleBand<string>,\n    y: ScaleLinear<number, number, never>,\n  ) {\n    svg\n      .select('.x-axis')\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call\n      .call((axisBottom(x) as any).tickFormat(tickbottomformat));\n    svg\n      .select('.y-axis')\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call\n      .call((axisLeft(y) as any).ticks(ticknumbers).tickFormat(tickleftformat));\n\n    const width = getChartWidth();\n    svg\n      .selectAll('.y-axis .tick line')\n      .attr('stroke', '#EEEDEA')\n      .attr('stroke-width', '1px')\n      .attr('x2', width);\n  }\n\n  function render() {\n    const width = getChartWidth();\n    const { x, y, xSubgroup } = getAxes(width);\n\n    svg = select<HTMLElement, any>(chart)\n      .append('svg')\n      .attr('width', width)\n      .attr(\n        'height',\n        Number(height) +\n          Number(getParsedMargins(margins).top) +\n          Number(getParsedMargins(margins).bottom) +\n          Number(getParsedMargins(margins).xAxis),\n      )\n      .attr('id', 'svg-chart')\n      .append('g')\n      .attr(\n        'transform',\n        `translate(${\n          getParsedMargins(margins).left / 2 +\n          getParsedMargins(margins).right / 2\n        },${getParsedMargins(margins).top})`,\n      );\n\n    svg\n      .append('g')\n      .attr(\n        'transform',\n        `translate(0, ${\n          Number(height) + Number(getParsedMargins(margins).xAxis)\n        })`,\n      )\n      .call(axisBottom(x))\n      .attr('class', 'x-axis')\n      .attr('stroke-width', '0');\n\n    svg\n      .append('g')\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call\n      .call((axisLeft(y) as any).ticks(ticknumbers).tickFormat(tickleftformat))\n      .attr('class', 'y-axis')\n      .attr('stroke-width', '0');\n\n    addRectandles(x, xSubgroup, y);\n  }\n\n  function update() {\n    const width = getChartWidth();\n    chart.querySelector('#svg-chart')?.setAttribute('width', `${width}px`);\n\n    const { x, y, xSubgroup } = getAxes(width);\n    updateAxes(x, y);\n    svg.selectAll('.bar').remove();\n    addRectandles(x, xSubgroup, y);\n  }\n\n  function resize() {\n    if (_data) {\n      const width = getChartWidth();\n      chart.querySelector('#svg-chart')?.setAttribute('width', `${width}px`);\n\n      const { x, y, xSubgroup } = getAxes(width);\n      updateAxes(x, y);\n\n      svg\n        .selectAll('.bar')\n        .data(parsedData)\n        .attr('transform', (d) => `translate(${Number(x(d.group))}, 0)`)\n        .selectAll<SVGElement, BarKeyValue>('rect')\n        .data((d) => getBarKeyValue(d))\n        .attr('x', (d) => xSubgroup(d.key)!)\n        .attr('width', xSubgroup.bandwidth());\n    }\n  }\n\n  onMount(() => {\n    const resizeObserver = new ResizeObserver(resize);\n    resizeObserver.observe(chart);\n    hasMounted = true;\n  });\n</script>\n\n<div bind:this={chart} style=\"background-color: {backgroundcolor};\" />\n\n{#if tooltipData.show}\n  <div\n    class=\"tooltip\"\n    style={`top: ${tooltipData.top}px; left: ${tooltipData.left}px; width: ${tooltipData.width}px;`}\n  >\n    {tooltipData.text}\n  </div>\n{/if}\n\n<div style=\"height: 0; width: 0;\" class=\"pattern\">\n  {#each parsedSvgs as svg}\n    {@html svg}\n  {/each}\n</div>\n<text />\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n\n  .tooltip {\n    height: auto;\n    background-color: $color-grey-700;\n    border-radius: 4px;\n    color: $color-grey-000;\n    text-align: center;\n    padding: magic-unit-rem(0.5) 0;\n    position: absolute;\n  }\n\n  .pattern {\n    z-index: -1;\n    position: relative;\n  }\n\n  text {\n    font-family: 'LeroyMerlin', sans-serif;\n    font-size: $size-font-04;\n    color: $color-grey-700;\n  }\n</style>\n"],"names":["t_value","ctx","text","top","left","width","insert","target","div","anchor","dirty","set_data","t","html_tag","p","raw_value","if_block","show","create_if_block","length","i","div0","div1","text_1","getParsedMargins","margins","JSON","parse","right","bottom","xAxis","parsedData","subgroups","data","$$props","chartheight","backgroundcolor","scalemax","scalemin","color","ticknumbers","tickleftformat","d","_data","chart","svg","tickbottomformat","svgs","hasMounted","tooltipData","eventHandler","EventHandler","getChartWidth","chartWidth","select","style","window","innerWidth","parseInt","getBarKeyValue","map","key","value","customtooltip","getAxes","x","scaleBand","domain","groups","range","padding","y","scaleLinear","height","xSubgroup","bandwidth","addRectandles","append","selectAll","join","attr","String","group","on","_e","chartEvent","filter","arc","e","getBoundingClientRect","dispatch","transition","duration","Number","delay","_d","updateAxes","call","axisBottom","tickFormat","axisLeft","ticks","resize","_a","querySelector","setAttribute","onMount","ResizeObserver","observe","$$invalidate","Object","keys","parsedSvgs","remove","update","render","$$value"],"mappings":"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"}
+{"version":3,"file":"BarChart.js","sources":["../../../src/components/chart/BarChart.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import {\n    select,\n    scaleBand,\n    scaleLinear,\n    axisBottom,\n    axisLeft,\n    Selection,\n    ScaleBand,\n    ScaleLinear,\n  } from 'd3';\n  import { onMount } from 'svelte';\n  import type { BarData, BarKeyValue, BarMargin } from './bar-chart.types';\n  import { EventHandler } from '../../utilities/EventHandler';\n\n  export let data = '';\n  let parsedData: BarData[];\n  let subgroups: string[];\n  $: parsedData = data ? (JSON.parse(data) as BarData[]) : [];\n  $: groups = parsedData.map((d: BarData) => d.group);\n  $: subgroups = parsedData[0]\n    ? Object.keys(parsedData[0]).filter((d: string) => d !== 'group')\n    : [];\n\n  export let chartheight = '300';\n  $: height = parseInt(chartheight, 10);\n\n  export let backgroundcolor = '#fff';\n  export let scalemax = 50;\n  export let scalemin = 0;\n  export let color = '#0B96CC';\n  export let ticknumbers = 4;\n  export let tickleftformat: (d: number, i: number) => string;\n  tickleftformat = (d) => `${d}`;\n  export let tickbottomformat: (d: number, i: number) => string = (d) => `${d}`;\n\n  export let svgs: string;\n  $: parsedSvgs = svgs ? (JSON.parse(svgs) as SVGElement[]) : [];\n\n  export let margins: string;\n\n  let _data: string;\n  let chart: HTMLDivElement;\n  let svg: Selection<SVGGElement, any, any, any>;\n  let hasMounted = false;\n  let tooltipData = { show: false, text: '', top: 0, left: 0, width: 0 };\n  let eventHandler = new EventHandler();\n\n  $: if (data.length > 0 && hasMounted) {\n    if (!_data) {\n      render();\n      _data = data;\n    } else if (data !== _data) {\n      update();\n      _data = data;\n    }\n  }\n\n  function getParsedMargins(margins: string): BarMargin {\n    if (margins) return JSON.parse(margins) as BarMargin;\n    else\n      return {\n        top: 10,\n        right: 40,\n        bottom: 20,\n        left: 60,\n        xAxis: 20,\n      } as BarMargin;\n  }\n\n  function getChartWidth() {\n    let chartWidth = select(chart).style('width');\n    if (chartWidth === '' || !chartWidth) {\n      chartWidth = `${window.innerWidth / 2}`;\n    }\n    return parseInt(chartWidth);\n  }\n\n  function getBarKeyValue(d: BarData): BarKeyValue[] {\n    return subgroups.map((key) => ({\n      key: key,\n      value: d[key].value,\n      customtooltip: d[key].customtooltip,\n    }));\n  }\n\n  function getAxes(width: number) {\n    const x = scaleBand()\n      .domain(groups)\n      .range([\n        0,\n        width -\n          (getParsedMargins(margins).left / 2 +\n            getParsedMargins(margins).right / 2),\n      ])\n      .padding(0.2);\n    const y = scaleLinear().domain([scalemin, scalemax]).range([height, 0]);\n    const xSubgroup = scaleBand()\n      .domain(subgroups)\n      .range([0, x.bandwidth()])\n      .padding(0.05);\n    return { x, y, xSubgroup };\n  }\n\n  function addRectandles(\n    x: ScaleBand<string>,\n    xSubgroup: ScaleBand<string>,\n    y: ScaleLinear<number, number, never>,\n  ) {\n    svg\n      .append('g')\n      .selectAll('g')\n      .data(parsedData)\n      .join('g')\n      .attr('transform', (d) => `translate(${String(x(d.group))}, 0)`)\n      .attr('class', 'bar')\n      .selectAll('rect')\n      .data((d) => getBarKeyValue(d))\n      .join('rect')\n      .attr('x', (d) => xSubgroup(d.key)!)\n      .attr('y', () => y(0))\n      .attr('width', xSubgroup.bandwidth())\n      .attr('height', () => height - y(0))\n      .style('fill', () => color)\n      .style('cursor', 'pointer')\n      .on('mouseout', (_e: MouseEvent, chartEvent: BarKeyValue) => {\n        const others = svg.selectAll('rect').filter(function (arc) {\n          return arc != chartEvent;\n        });\n        others.style('opacity', 1);\n        tooltipData.show = false;\n      })\n      .on('mouseover', (e: MouseEvent, chartEvent: BarKeyValue) => {\n        const others = svg.selectAll('rect').filter(function (arc) {\n          return arc != chartEvent;\n        });\n        others.style('opacity', 0.7);\n        const { left, top, width } = (\n          e.target as HTMLElement\n        ).getBoundingClientRect();\n        console.log(xSubgroup.bandwidth());\n        tooltipData = {\n          show: true,\n          text: chartEvent.customtooltip\n            ? `${chartEvent.customtooltip}`\n            : `${chartEvent.key} - ${chartEvent.value}`,\n          left: left,\n          top: top - 50,\n          width,\n        };\n      })\n      .on('click', (_e: MouseEvent, chartEvent: BarKeyValue) => {\n        eventHandler.dispatch('bar-clicked', chartEvent);\n      });\n\n    svg\n      .selectAll<SVGElement, BarKeyValue>('rect')\n      .transition()\n      .duration(800)\n      .attr('y', (d) => (+d.value < 0 ? y(0) : y(+d.value)))\n      .attr('height', (d) =>\n        +d.value < 0\n          ? y(+d.value) - y(0)\n          : height - y(+d.value + Number(scalemin)),\n      )\n      .delay((_d, i) => i * 100);\n  }\n\n  function updateAxes(\n    x: ScaleBand<string>,\n    y: ScaleLinear<number, number, never>,\n  ) {\n    svg\n      .select('.x-axis')\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call\n      .call((axisBottom(x) as any).tickFormat(tickbottomformat));\n    svg\n      .select('.y-axis')\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call\n      .call((axisLeft(y) as any).ticks(ticknumbers).tickFormat(tickleftformat));\n\n    const width = getChartWidth();\n    svg\n      .selectAll('.y-axis .tick line')\n      .attr('stroke', '#EEEDEA')\n      .attr('stroke-width', '1px')\n      .attr('x2', width);\n  }\n\n  function render() {\n    const width = getChartWidth();\n    const { x, y, xSubgroup } = getAxes(width);\n\n    svg = select<HTMLElement, any>(chart)\n      .append('svg')\n      .attr('width', width)\n      .attr(\n        'height',\n        Number(height) +\n          Number(getParsedMargins(margins).top) +\n          Number(getParsedMargins(margins).bottom) +\n          Number(getParsedMargins(margins).xAxis),\n      )\n      .attr('id', 'svg-chart')\n      .append('g')\n      .attr(\n        'transform',\n        `translate(${\n          getParsedMargins(margins).left / 2 +\n          getParsedMargins(margins).right / 2\n        },${getParsedMargins(margins).top})`,\n      );\n\n    svg\n      .append('g')\n      .attr(\n        'transform',\n        `translate(0, ${\n          Number(height) + Number(getParsedMargins(margins).xAxis)\n        })`,\n      )\n      .call(axisBottom(x))\n      .attr('class', 'x-axis')\n      .attr('stroke-width', '0');\n\n    svg\n      .append('g')\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call\n      .call((axisLeft(y) as any).ticks(ticknumbers).tickFormat(tickleftformat))\n      .attr('class', 'y-axis')\n      .attr('stroke-width', '0');\n\n    addRectandles(x, xSubgroup, y);\n  }\n\n  function update() {\n    const width = getChartWidth();\n    chart.querySelector('#svg-chart')?.setAttribute('width', `${width}px`);\n\n    const { x, y, xSubgroup } = getAxes(width);\n    updateAxes(x, y);\n    svg.selectAll('.bar').remove();\n    addRectandles(x, xSubgroup, y);\n  }\n\n  function resize() {\n    if (_data) {\n      const width = getChartWidth();\n      chart.querySelector('#svg-chart')?.setAttribute('width', `${width}px`);\n\n      const { x, y, xSubgroup } = getAxes(width);\n      updateAxes(x, y);\n\n      svg\n        .selectAll('.bar')\n        .data(parsedData)\n        .attr('transform', (d) => `translate(${Number(x(d.group))}, 0)`)\n        .selectAll<SVGElement, BarKeyValue>('rect')\n        .data((d) => getBarKeyValue(d))\n        .attr('x', (d) => xSubgroup(d.key)!)\n        .attr('width', xSubgroup.bandwidth());\n    }\n  }\n\n  onMount(() => {\n    const resizeObserver = new ResizeObserver(resize);\n    resizeObserver.observe(chart);\n    hasMounted = true;\n  });\n</script>\n\n<div bind:this={chart} style=\"background-color: {backgroundcolor};\" />\n{#if tooltipData.show}\n  <div\n    class=\"tooltip\"\n    style={`top: ${tooltipData.top}px; left: ${tooltipData.left}px;`}\n  >\n    {tooltipData.text}\n  </div>\n{/if}\n<div style=\"height: 0; width: 0;\" class=\"pattern\">\n  {#each parsedSvgs as svg}\n    {@html svg}\n  {/each}\n</div>\n<text />\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n\n  .tooltip {\n    height: auto;\n    background-color: $color-grey-700;\n    border-radius: 4px;\n    color: $color-grey-000;\n    text-align: center;\n    padding: $mu050 $mu100;\n    position: absolute;\n  }\n\n  .pattern {\n    z-index: -1;\n    position: relative;\n  }\n\n  text {\n    font-family: 'LeroyMerlin', sans-serif;\n    font-size: $size-font-04;\n    color: $color-grey-700;\n  }\n</style>\n"],"names":["scaleBand","scaleLinear"],"mappings":"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"}