@mozaic-ds/web-components 0.5.0 → 0.6.0

package/public/components/chart/GroupedBarChart.js

@@ -1,751 +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, 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 };
+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};
 //# sourceMappingURL=GroupedBarChart.js.map