@mozaic-ds/web-components 0.5.0 → 0.6.1

package/public/components/chart/StackedBarChart.js

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