@mozaic-ds/web-components 0.5.0 → 0.6.1

package/public/components/chart/BarChart.js

@@ -1,583 +1,2 @@
-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; width: ${/*tooltipData*/ ctx[2].width}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; width: ${/*tooltipData*/ ctx[2].width}px;`)) {
-				attr(div, "style", div_style_value);
-			}
-		},
-		d(detaching) {
-			if (detaching) detach(div);
-		}
-	};
-}
-
-// (225: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();
-
-			$$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 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: 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 };
+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};
 //# 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":["scaleBand","scaleLinear"],"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        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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"}