@mozaic-ds/web-components 0.5.0 → 0.6.0

package/public/components/chart/Radar.js

@@ -1,730 +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, n as noop, g as attr, y as set_style, o as detach, a1 as onMount, t as text, d as space, j as append, k as set_data, J as destroy_each, K as empty, v as binding_callbacks } from '../../index-c33b3772.js';
-import { s as select } from '../../transform-15d69d5d.js';
-import { E as EventHandler } from '../../EventHandler-02058705.js';
-import { S as Symbol, s as symbolSquare, b as symbolCircle, a as symbolTriangle, c as symbolDiamond, l as line } from '../../symbol-b05a6e2b.js';
-import { a as sqrt, t as tau, c as cos, s as sin, p as pi } from '../../path-1b5da959.js';
-import { l as linear } from '../../linear-f46d7e9e.js';
-import '../../array-5b770a93.js';
-
-const ka = 0.89081309152928522810;
-const kr = sin(pi / 10) / sin(7 * pi / 10);
-const kx = sin(tau / 10) * kr;
-const ky = -cos(tau / 10) * kr;
-
-var symbolStar = {
-  draw(context, size) {
-    const r = sqrt(size * ka);
-    const x = kx * r;
-    const y = ky * r;
-    context.moveTo(0, -r);
-    context.lineTo(x, y);
-    for (let i = 1; i < 5; ++i) {
-      const a = tau * i / 5;
-      const c = cos(a);
-      const s = sin(a);
-      context.lineTo(s * r, -c * r);
-      context.lineTo(c * x - s * y, s * x + c * y);
-    }
-    context.closePath();
-  }
-};
-
-/* src/components/chart/Radar.svelte generated by Svelte v3.58.0 */
-
-function get_each_context(ctx, list, i) {
-	const child_ctx = ctx.slice();
-	child_ctx[1] = list[i];
-	return child_ctx;
-}
-
-// (267:2) {#if tooltipData.show}
-function create_if_block(ctx) {
-	let div1;
-	let span;
-	let b;
-	let t0_value = /*tooltipData*/ ctx[3].title + "";
-	let t0;
-	let t1;
-	let div0;
-	let each_value = /*tooltipData*/ ctx[3].text;
-	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() {
-			div1 = element("div");
-			span = element("span");
-			b = element("b");
-			t0 = text(t0_value);
-			t1 = space();
-			div0 = element("div");
-
-			for (let i = 0; i < each_blocks.length; i += 1) {
-				each_blocks[i].c();
-			}
-
-			attr(div1, "class", "chart__tooltip");
-			set_style(div1, "left", /*tooltipData*/ ctx[3].left);
-			set_style(div1, "top", /*tooltipData*/ ctx[3].top);
-		},
-		m(target, anchor) {
-			insert(target, div1, anchor);
-			append(div1, span);
-			append(span, b);
-			append(b, t0);
-			append(div1, t1);
-			append(div1, div0);
-
-			for (let i = 0; i < each_blocks.length; i += 1) {
-				if (each_blocks[i]) {
-					each_blocks[i].m(div0, null);
-				}
-			}
-		},
-		p(ctx, dirty) {
-			if (dirty[0] & /*tooltipData*/ 8 && t0_value !== (t0_value = /*tooltipData*/ ctx[3].title + "")) set_data(t0, t0_value);
-
-			if (dirty[0] & /*tooltipData*/ 8) {
-				each_value = /*tooltipData*/ ctx[3].text;
-				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(div0, null);
-					}
-				}
-
-				for (; i < each_blocks.length; i += 1) {
-					each_blocks[i].d(1);
-				}
-
-				each_blocks.length = each_value.length;
-			}
-
-			if (dirty[0] & /*tooltipData*/ 8) {
-				set_style(div1, "left", /*tooltipData*/ ctx[3].left);
-			}
-
-			if (dirty[0] & /*tooltipData*/ 8) {
-				set_style(div1, "top", /*tooltipData*/ ctx[3].top);
-			}
-		},
-		d(detaching) {
-			if (detaching) detach(div1);
-			destroy_each(each_blocks, detaching);
-		}
-	};
-}
-
-// (279:10) {:else}
-function create_else_block(ctx) {
-	let div;
-	let span0;
-	let t0_value = /*data*/ ctx[1].name + "";
-	let t0;
-	let t1;
-	let span1;
-	let t2_value = /*data*/ ctx[1].value + "";
-	let t2;
-	let t3;
-
-	return {
-		c() {
-			div = element("div");
-			span0 = element("span");
-			t0 = text(t0_value);
-			t1 = space();
-			span1 = element("span");
-			t2 = text(t2_value);
-			t3 = space();
-			attr(span0, "class", "chart__legend");
-			attr(span1, "class", "chart__elem");
-			attr(div, "class", "chart__list");
-		},
-		m(target, anchor) {
-			insert(target, div, anchor);
-			append(div, span0);
-			append(span0, t0);
-			append(div, t1);
-			append(div, span1);
-			append(span1, t2);
-			append(div, t3);
-		},
-		p(ctx, dirty) {
-			if (dirty[0] & /*tooltipData*/ 8 && t0_value !== (t0_value = /*data*/ ctx[1].name + "")) set_data(t0, t0_value);
-			if (dirty[0] & /*tooltipData*/ 8 && t2_value !== (t2_value = /*data*/ ctx[1].value + "")) set_data(t2, t2_value);
-		},
-		d(detaching) {
-			if (detaching) detach(div);
-		}
-	};
-}
-
-// (275:10) {#if data.customtooltip}
-function create_if_block_1(ctx) {
-	let div;
-	let span;
-	let t0_value = /*data*/ ctx[1].customtooltip + "";
-	let t0;
-	let t1;
-
-	return {
-		c() {
-			div = element("div");
-			span = element("span");
-			t0 = text(t0_value);
-			t1 = space();
-			attr(span, "class", "chart__elem");
-			attr(div, "class", "chart__list");
-		},
-		m(target, anchor) {
-			insert(target, div, anchor);
-			append(div, span);
-			append(span, t0);
-			append(div, t1);
-		},
-		p(ctx, dirty) {
-			if (dirty[0] & /*tooltipData*/ 8 && t0_value !== (t0_value = /*data*/ ctx[1].customtooltip + "")) set_data(t0, t0_value);
-		},
-		d(detaching) {
-			if (detaching) detach(div);
-		}
-	};
-}
-
-// (274:8) {#each tooltipData.text as data}
-function create_each_block(ctx) {
-	let if_block_anchor;
-
-	function select_block_type(ctx, dirty) {
-		if (/*data*/ ctx[1].customtooltip) return create_if_block_1;
-		return create_else_block;
-	}
-
-	let current_block_type = select_block_type(ctx);
-	let if_block = current_block_type(ctx);
-
-	return {
-		c() {
-			if_block.c();
-			if_block_anchor = empty();
-		},
-		m(target, anchor) {
-			if_block.m(target, anchor);
-			insert(target, if_block_anchor, anchor);
-		},
-		p(ctx, dirty) {
-			if (current_block_type === (current_block_type = select_block_type(ctx)) && if_block) {
-				if_block.p(ctx, dirty);
-			} else {
-				if_block.d(1);
-				if_block = current_block_type(ctx);
-
-				if (if_block) {
-					if_block.c();
-					if_block.m(if_block_anchor.parentNode, if_block_anchor);
-				}
-			}
-		},
-		d(detaching) {
-			if_block.d(detaching);
-			if (detaching) detach(if_block_anchor);
-		}
-	};
-}
-
-function create_fragment(ctx) {
-	let div;
-	let if_block = /*tooltipData*/ ctx[3].show && create_if_block(ctx);
-
-	return {
-		c() {
-			div = element("div");
-			if (if_block) if_block.c();
-			this.c = noop;
-			attr(div, "class", "chart");
-			set_style(div, "background-color", /*backgroundcolor*/ ctx[0]);
-		},
-		m(target, anchor) {
-			insert(target, div, anchor);
-			if (if_block) if_block.m(div, null);
-			/*div_binding*/ ctx[11](div);
-		},
-		p(ctx, dirty) {
-			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(div, null);
-				}
-			} else if (if_block) {
-				if_block.d(1);
-				if_block = null;
-			}
-
-			if (dirty[0] & /*backgroundcolor*/ 1) {
-				set_style(div, "background-color", /*backgroundcolor*/ ctx[0]);
-			}
-		},
-		i: noop,
-		o: noop,
-		d(detaching) {
-			if (detaching) detach(div);
-			if (if_block) if_block.d();
-			/*div_binding*/ ctx[11](null);
-		}
-	};
-}
-
-function instance($$self, $$props, $$invalidate) {
-	let parsedData;
-	let dataset;
-	let scale;
-	let { data = '' } = $$props;
-	let { backgroundcolor = '#fff' } = $$props;
-	let { delay = 500 } = $$props;
-	let { sides = 5 } = $$props;
-	let { levels = 10 } = $$props;
-	let { valuemax = 20 } = $$props;
-	let { scalemax = 20 } = $$props;
-	let { hasgrades = false } = $$props;
-
-	const symbolPath = [
-		Symbol(symbolSquare),
-		Symbol(symbolCircle),
-		Symbol(symbolTriangle),
-		Symbol(symbolDiamond),
-		Symbol(symbolStar)
-	];
-
-	const colors = ['#605F9D', '#00919F', '#758992', '#0B96CC'];
-	let chart;
-	let svg;
-	let hasMounted = false;
-	let eventHandler = new EventHandler();
-
-	let tooltipData = {
-		left: '0px',
-		top: '0px',
-		text: [],
-		title: '',
-		show: false
-	};
-
-	let size = Math.min(window.innerWidth, window.innerHeight, 400);
-	let offset = Math.PI;
-	let polyangle = Math.PI * 2 / sides;
-	let r = 0.8 * size;
-	let radius = r / 2;
-	let center = { x: size / 2, y: size / 2 };
-
-	const getPoint = (length, angle) => {
-		const point = {
-			x: center.x + length * Math.sin(offset - angle),
-			y: center.y + length * Math.cos(offset - angle)
-		};
-
-		return point;
-	};
-
-	const graduations = levels => {
-		const grades = [];
-		const step = valuemax / levels;
-
-		for (let i = 0; i <= levels; i++) {
-			const num = step * i;
-
-			if (Number.isInteger(step)) {
-				grades.push(Number(num));
-			} else {
-				grades.push(num.toFixed(2));
-			}
-		}
-
-		return grades;
-	};
-
-	const getPath = (points, parent) => {
-		const lineGenerator = line().x(d => d.x).y(d => d.y);
-		parent.append('path').attr('d', lineGenerator(points));
-	};
-
-	const getAxis = (ticks, levels) => {
-		const radarLines = svg.append('g').attr('class', 'radar-lines');
-		const point = getPoint(radius, 0);
-		getPath([center, point], radarLines);
-		const gradeLabel = svg.append('g').attr('class', 'ticks');
-
-		ticks.forEach((grade, i) => {
-			const r = i / levels * radius;
-			const p = getPoint(r, 0);
-			const points = [p, Object.assign(Object.assign({}, p), { x: p.x - 10 })];
-			getPath(points, radarLines);
-
-			if (hasgrades) {
-				getText(grade, p, true, gradeLabel);
-			}
-		});
-	};
-
-	const getLevels = (levels, sides) => {
-		for (let level = 1; level <= levels; level++) {
-			const hyp = level / levels * radius;
-			const points = [];
-
-			for (let vertex = 0; vertex < sides; vertex++) {
-				const angle = vertex * polyangle;
-				points.push(getPoint(hyp, angle));
-			}
-
-			const svgLevel = svg.append('g').style('fill', 'none').attr('stroke', '#CCCCCC');
-			getPath([...points, points[0]], svgLevel);
-		}
-	};
-
-	const getLines = sides => {
-		for (let vertex = 1, i = 0; vertex <= sides; (vertex++, i++)) {
-			const svgLine = svg.append('g').attr('stroke', '#ccc');
-			const angle = vertex * polyangle;
-
-			const formatdata = () => {
-				const tooltipData = dataset.map((elem, dataIndex) => {
-					let elemPrincipal = elem[vertex];
-
-					if (dataset[0][vertex].name === elemPrincipal.name) {
-						return {
-							name: `Serie ${dataIndex + 1}`,
-							value: elemPrincipal.value
-						};
-					}
-
-					return undefined;
-				});
-
-				return tooltipData;
-			};
-
-			svgLine.on('mouseover', _e => {
-				svgLine.attr('stroke-dasharray', '4');
-				svgLine.attr('stroke-width', '4px');
-
-				$$invalidate(3, tooltipData = {
-					left: _e.pageX + 10 + 'px',
-					title: dataset[0][i + 1].name,
-					top: _e.pageY - 25 + 'px',
-					text: formatdata(),
-					show: true
-				});
-			});
-
-			svgLine.on('mouseout', _e => {
-				svgLine.attr('stroke-dasharray', 0);
-				svgLine.attr('stroke-width', '1px');
-
-				$$invalidate(3, tooltipData = {
-					left: _e.pageX + 10 + 'px',
-					top: _e.pageY - 25 + 'px',
-					show: false,
-					text: [],
-					title: ''
-				});
-			});
-
-			svgLine.on('click', (_e, chartEvent) => {
-				eventHandler.dispatch('serie-clicked', chartEvent);
-			});
-
-			const point = getPoint(radius, angle);
-			getPath([center, point], svgLine);
-		}
-	};
-
-	const getSymbols = (points, colors, index) => {
-		svg.selectAll().data(points).enter().append('path').attr('fill', '#FFF').attr('stroke', colors[index]).attr('stroke-width', '2px').attr('d', symbolPath[index].size(50)).attr('opacity', 0.4).attr('transform', d => `translate(${d.x},${d.y})`);
-	};
-
-	const getData = (dataset, side, index) => {
-		let points = [];
-
-		dataset.forEach((d, i) => {
-			const len = scale(d.value);
-			const theta = i * (2 * Math.PI / side);
-			points.push(Object.assign(Object.assign({}, getPoint(len, theta)), { value: 'hihihi' }));
-		});
-
-		const group = svg.append('g').attr('stroke', colors[index]).attr('stroke-width', '1.5px').attr('fill-opacity', '0.2').attr('fill', colors[index]);
-
-		group.on('mousemove', _e => {
-			$$invalidate(3, tooltipData = {
-				left: _e.pageX + 10 + 'px',
-				title: `Serie-${index}`,
-				top: _e.pageY - 25 + 'px',
-				text: dataset,
-				show: true
-			});
-
-			group.attr('fill-opacity', '0.6');
-		});
-
-		group.on('mouseout', _e => {
-			$$invalidate(3, tooltipData = {
-				left: '0px',
-				top: '0px',
-				text: [],
-				title: '',
-				show: false
-			});
-
-			group.attr('fill-opacity', '0.2');
-		});
-
-		getPath([...points, points[0]], group);
-		getSymbols(points, colors, index);
-	};
-
-	const getText = (text, point, isAxis, group) => {
-		if (isAxis) {
-			group.append('text').attr('x', point.x).attr('y', point.y).html(text).style('text-anchor', 'middle').attr('fill', '#3A3936').style('font-size', '11px');
-		} else {
-			group.append('text').attr('x', point.x).attr('y', point.y).html(text).style('text-anchor', 'middle').attr('fill', '#3A3936').style('font-size', '12px');
-		}
-	};
-
-	const drawLabels = (dataset, sides) => {
-		const groupL = svg.append('g').attr('class', 'labels');
-
-		for (let vertex = 0; vertex < sides; vertex++) {
-			const angle = vertex * polyangle;
-			const label = dataset[vertex].name;
-			const point = getPoint(0.9 * (size / 2), angle);
-			getText(label, point, false, groupL);
-		}
-	};
-
-	const renderChart = () => {
-		const ticks = graduations(levels);
-		getLevels(levels, sides);
-		getAxis(ticks, levels);
-		getLines(sides);
-
-		dataset.forEach((dataValue, index) => {
-			getData(dataValue, sides, index);
-			drawLabels(dataValue, sides);
-		});
-
-		setTimeout(
-			() => {
-				updateChart(parsedData);
-			},
-			delay * parsedData.length
-		);
-	};
-
-	function updateChart(data) {
-		getLines(sides);
-
-		data.forEach((dataValue, index) => {
-			getData(dataValue, sides, index);
-			drawLabels(dataValue, sides);
-		});
-	}
-
-	onMount(() => $$invalidate(10, hasMounted = true));
-
-	function div_binding($$value) {
-		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
-			chart = $$value;
-			$$invalidate(2, chart);
-		});
-	}
-
-	$$self.$$set = $$props => {
-		if ('data' in $$props) $$invalidate(1, data = $$props.data);
-		if ('backgroundcolor' in $$props) $$invalidate(0, backgroundcolor = $$props.backgroundcolor);
-		if ('delay' in $$props) $$invalidate(4, delay = $$props.delay);
-		if ('sides' in $$props) $$invalidate(5, sides = $$props.sides);
-		if ('levels' in $$props) $$invalidate(6, levels = $$props.levels);
-		if ('valuemax' in $$props) $$invalidate(7, valuemax = $$props.valuemax);
-		if ('scalemax' in $$props) $$invalidate(8, scalemax = $$props.scalemax);
-		if ('hasgrades' in $$props) $$invalidate(9, hasgrades = $$props.hasgrades);
-	};
-
-	$$self.$$.update = () => {
-		if ($$self.$$.dirty[0] & /*data*/ 2) {
-			parsedData = data ? JSON.parse(data) : [];
-		}
-
-		if ($$self.$$.dirty[0] & /*data*/ 2) {
-			dataset = data ? JSON.parse(data) : [];
-		}
-
-		if ($$self.$$.dirty[0] & /*scalemax*/ 256) {
-			scale = linear().domain([0, scalemax]).range([0, radius]);
-		}
-
-		if ($$self.$$.dirty[0] & /*data, hasMounted, chart*/ 1030) {
-			if (data.length > 0 && hasMounted) {
-				svg = select(chart).append('svg').attr('width', size).attr('height', size).append('g');
-				renderChart();
-			}
-		}
-	};
-
-	return [
-		backgroundcolor,
-		data,
-		chart,
-		tooltipData,
-		delay,
-		sides,
-		levels,
-		valuemax,
-		scalemax,
-		hasgrades,
-		hasMounted,
-		div_binding
-	];
-}
-
-class Radar extends SvelteElement {
-	constructor(options) {
-		super();
-		const style = document.createElement('style');
-		style.textContent = `@media screen and (min-width: 680px){}@media screen and (min-width: 1024px){}@media screen and (min-width: 1280px){}@media screen and (min-width: 1920px){}.chart{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;background-color:#ffffff;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.chart__tooltip{position:absolute;width:auto;height:auto;background-color:white;border:1px solid #000;border-radius:4px;min-width:152px;color:grey;padding:0.25rem 0.5rem}.chart__list{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}`;
-		this.shadowRoot.appendChild(style);
-
-		init(
-			this,
-			{
-				target: this.shadowRoot,
-				props: attribute_to_object(this.attributes),
-				customElement: true
-			},
-			instance,
-			create_fragment,
-			safe_not_equal,
-			{
-				data: 1,
-				backgroundcolor: 0,
-				delay: 4,
-				sides: 5,
-				levels: 6,
-				valuemax: 7,
-				scalemax: 8,
-				hasgrades: 9
-			},
-			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",
-			"backgroundcolor",
-			"delay",
-			"sides",
-			"levels",
-			"valuemax",
-			"scalemax",
-			"hasgrades"
-		];
-	}
-
-	get data() {
-		return this.$$.ctx[1];
-	}
-
-	set data(data) {
-		this.$$set({ data });
-		flush();
-	}
-
-	get backgroundcolor() {
-		return this.$$.ctx[0];
-	}
-
-	set backgroundcolor(backgroundcolor) {
-		this.$$set({ backgroundcolor });
-		flush();
-	}
-
-	get delay() {
-		return this.$$.ctx[4];
-	}
-
-	set delay(delay) {
-		this.$$set({ delay });
-		flush();
-	}
-
-	get sides() {
-		return this.$$.ctx[5];
-	}
-
-	set sides(sides) {
-		this.$$set({ sides });
-		flush();
-	}
-
-	get levels() {
-		return this.$$.ctx[6];
-	}
-
-	set levels(levels) {
-		this.$$set({ levels });
-		flush();
-	}
-
-	get valuemax() {
-		return this.$$.ctx[7];
-	}
-
-	set valuemax(valuemax) {
-		this.$$set({ valuemax });
-		flush();
-	}
-
-	get scalemax() {
-		return this.$$.ctx[8];
-	}
-
-	set scalemax(scalemax) {
-		this.$$set({ scalemax });
-		flush();
-	}
-
-	get hasgrades() {
-		return this.$$.ctx[9];
-	}
-
-	set hasgrades(hasgrades) {
-		this.$$set({ hasgrades });
-		flush();
-	}
-}
-
-export { Radar as default };
+import{S as t,i as e,a,b as s,f as r,s as o,e as l,n,g as i,y as c,o as d,a1 as p,t as h,d as u,j as m,k as x,J as f,K as g,v as b}from"../../index-c33b3772.js";import{s as $}from"../../transform-15d69d5d.js";import{E as y}from"../../EventHandler-02058705.js";import{S as w,s as k,b as v,a as j,c as _,l as C}from"../../symbol-b05a6e2b.js";import{a as E,t as F,c as M,s as O,p as S}from"../../path-1b5da959.js";import{l as N}from"../../linear-f46d7e9e.js";import"../../array-5b770a93.js";const T=O(S/10)/O(7*S/10),z=O(F/10)*T,A=-M(F/10)*T;var I={draw(t,e){const a=E(.8908130915292852*e),s=z*a,r=A*a;t.moveTo(0,-a),t.lineTo(s,r);for(let e=1;e<5;++e){const o=F*e/5,l=M(o),n=O(o);t.lineTo(n*a,-l*a),t.lineTo(l*s-n*r,n*s+l*r)}t.closePath()}};function P(t,e,a){const s=t.slice();return s[1]=e[a],s}function J(t){let e,a,r,o,n,p,g=t[3].title+"",b=t[3].text,$=[];for(let e=0;e<b.length;e+=1)$[e]=H(P(t,b,e));return{c(){e=l("div"),a=l("span"),r=l("b"),o=h(g),n=u(),p=l("div");for(let t=0;t<$.length;t+=1)$[t].c();i(e,"class","chart__tooltip"),c(e,"left",t[3].left),c(e,"top",t[3].top)},m(t,l){s(t,e,l),m(e,a),m(a,r),m(r,o),m(e,n),m(e,p);for(let t=0;t<$.length;t+=1)$[t]&&$[t].m(p,null)},p(t,a){if(8&a[0]&&g!==(g=t[3].title+"")&&x(o,g),8&a[0]){let e;for(b=t[3].text,e=0;e<b.length;e+=1){const s=P(t,b,e);$[e]?$[e].p(s,a):($[e]=H(s),$[e].c(),$[e].m(p,null))}for(;e<$.length;e+=1)$[e].d(1);$.length=b.length}8&a[0]&&c(e,"left",t[3].left),8&a[0]&&c(e,"top",t[3].top)},d(t){t&&d(e),f($,t)}}}function X(t){let e,a,r,o,n,c,p,f=t[1].name+"",g=t[1].value+"";return{c(){e=l("div"),a=l("span"),r=h(f),o=u(),n=l("span"),c=h(g),p=u(),i(a,"class","chart__legend"),i(n,"class","chart__elem"),i(e,"class","chart__list")},m(t,l){s(t,e,l),m(e,a),m(a,r),m(e,o),m(e,n),m(n,c),m(e,p)},p(t,e){8&e[0]&&f!==(f=t[1].name+"")&&x(r,f),8&e[0]&&g!==(g=t[1].value+"")&&x(c,g)},d(t){t&&d(e)}}}function Y(t){let e,a,r,o,n=t[1].customtooltip+"";return{c(){e=l("div"),a=l("span"),r=h(n),o=u(),i(a,"class","chart__elem"),i(e,"class","chart__list")},m(t,l){s(t,e,l),m(e,a),m(a,r),m(e,o)},p(t,e){8&e[0]&&n!==(n=t[1].customtooltip+"")&&x(r,n)},d(t){t&&d(e)}}}function H(t){let e;function a(t,e){return t[1].customtooltip?Y:X}let r=a(t),o=r(t);return{c(){o.c(),e=g()},m(t,a){o.m(t,a),s(t,e,a)},p(t,s){r===(r=a(t))&&o?o.p(t,s):(o.d(1),o=r(t),o&&(o.c(),o.m(e.parentNode,e)))},d(t){o.d(t),t&&d(e)}}}function R(t){let e,a=t[3].show&&J(t);return{c(){e=l("div"),a&&a.c(),this.c=n,i(e,"class","chart"),c(e,"background-color",t[0])},m(r,o){s(r,e,o),a&&a.m(e,null),t[11](e)},p(t,s){t[3].show?a?a.p(t,s):(a=J(t),a.c(),a.m(e,null)):a&&(a.d(1),a=null),1&s[0]&&c(e,"background-color",t[0])},i:n,o:n,d(s){s&&d(e),a&&a.d(),t[11](null)}}}function B(t,e,a){let s,r,o,{data:l=""}=e,{backgroundcolor:n="#fff"}=e,{delay:i=500}=e,{sides:c=5}=e,{levels:d=10}=e,{valuemax:h=20}=e,{scalemax:u=20}=e,{hasgrades:m=!1}=e;const x=[w(k),w(v),w(j),w(_),w(I)],f=["#605F9D","#00919F","#758992","#0B96CC"];let g,E,F=!1,M=new y,O={left:"0px",top:"0px",text:[],title:"",show:!1},S=Math.min(window.innerWidth,window.innerHeight,400),T=Math.PI,z=2*Math.PI/c,A=.8*S/2,P={x:S/2,y:S/2};const J=(t,e)=>({x:P.x+t*Math.sin(T-e),y:P.y+t*Math.cos(T-e)}),X=(t,e)=>{const a=C().x((t=>t.x)).y((t=>t.y));e.append("path").attr("d",a(t))},Y=t=>{for(let e=1,s=0;e<=t;e++,s++){const t=E.append("g").attr("stroke","#ccc"),o=e*z,l=()=>r.map(((t,a)=>{let s=t[e];if(r[0][e].name===s.name)return{name:`Serie ${a+1}`,value:s.value}}));t.on("mouseover",(e=>{t.attr("stroke-dasharray","4"),t.attr("stroke-width","4px"),a(3,O={left:e.pageX+10+"px",title:r[0][s+1].name,top:e.pageY-25+"px",text:l(),show:!0})})),t.on("mouseout",(e=>{t.attr("stroke-dasharray",0),t.attr("stroke-width","1px"),a(3,O={left:e.pageX+10+"px",top:e.pageY-25+"px",show:!1,text:[],title:""})})),t.on("click",((t,e)=>{M.dispatch("serie-clicked",e)}));const n=J(A,o);X([P,n],t)}},H=(t,e,s)=>{let r=[];t.forEach(((t,a)=>{const s=o(t.value),l=a*(2*Math.PI/e);r.push(Object.assign(Object.assign({},J(s,l)),{value:"hihihi"}))}));const l=E.append("g").attr("stroke",f[s]).attr("stroke-width","1.5px").attr("fill-opacity","0.2").attr("fill",f[s]);l.on("mousemove",(e=>{a(3,O={left:e.pageX+10+"px",title:`Serie-${s}`,top:e.pageY-25+"px",text:t,show:!0}),l.attr("fill-opacity","0.6")})),l.on("mouseout",(t=>{a(3,O={left:"0px",top:"0px",text:[],title:"",show:!1}),l.attr("fill-opacity","0.2")})),X([...r,r[0]],l),((t,e,a)=>{E.selectAll().data(t).enter().append("path").attr("fill","#FFF").attr("stroke",e[a]).attr("stroke-width","2px").attr("d",x[a].size(50)).attr("opacity",.4).attr("transform",(t=>`translate(${t.x},${t.y})`))})(r,f,s)},R=(t,e,a,s)=>{a?s.append("text").attr("x",e.x).attr("y",e.y).html(t).style("text-anchor","middle").attr("fill","#3A3936").style("font-size","11px"):s.append("text").attr("x",e.x).attr("y",e.y).html(t).style("text-anchor","middle").attr("fill","#3A3936").style("font-size","12px")},B=(t,e)=>{const a=E.append("g").attr("class","labels");for(let s=0;s<e;s++){const e=s*z,r=t[s].name,o=J(S/2*.9,e);R(r,o,!1,a)}},D=()=>{const t=(t=>{const e=[],a=h/t;for(let s=0;s<=t;s++){const t=a*s;Number.isInteger(a)?e.push(Number(t)):e.push(t.toFixed(2))}return e})(d);((t,e)=>{for(let a=1;a<=t;a++){const s=a/t*A,r=[];for(let t=0;t<e;t++){const e=t*z;r.push(J(s,e))}const o=E.append("g").style("fill","none").attr("stroke","#CCCCCC");X([...r,r[0]],o)}})(d,c),((t,e)=>{const a=E.append("g").attr("class","radar-lines"),s=J(A,0);X([P,s],a);const r=E.append("g").attr("class","ticks");t.forEach(((t,s)=>{const o=J(s/e*A,0),l=[o,Object.assign(Object.assign({},o),{x:o.x-10})];X(l,a),m&&R(t,o,!0,r)}))})(t,d),Y(c),r.forEach(((t,e)=>{H(t,c,e),B(t,c)})),setTimeout((()=>{!function(t){Y(c),t.forEach(((t,e)=>{H(t,c,e),B(t,c)}))}(s)}),i*s.length)};return p((()=>a(10,F=!0))),t.$$set=t=>{"data"in t&&a(1,l=t.data),"backgroundcolor"in t&&a(0,n=t.backgroundcolor),"delay"in t&&a(4,i=t.delay),"sides"in t&&a(5,c=t.sides),"levels"in t&&a(6,d=t.levels),"valuemax"in t&&a(7,h=t.valuemax),"scalemax"in t&&a(8,u=t.scalemax),"hasgrades"in t&&a(9,m=t.hasgrades)},t.$$.update=()=>{2&t.$$.dirty[0]&&(s=l?JSON.parse(l):[]),2&t.$$.dirty[0]&&(r=l?JSON.parse(l):[]),256&t.$$.dirty[0]&&(o=N().domain([0,u]).range([0,A])),1030&t.$$.dirty[0]&&l.length>0&&F&&(E=$(g).append("svg").attr("width",S).attr("height",S).append("g"),D())},[n,l,g,O,i,c,d,h,u,m,F,function(t){b[t?"unshift":"push"]((()=>{g=t,a(2,g)}))}]}class D extends t{constructor(t){super();const l=document.createElement("style");l.textContent="@media screen and (min-width: 680px){}@media screen and (min-width: 1024px){}@media screen and (min-width: 1280px){}@media screen and (min-width: 1920px){}.chart{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;background-color:#ffffff;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.chart__tooltip{position:absolute;width:auto;height:auto;background-color:white;border:1px solid #000;border-radius:4px;min-width:152px;color:grey;padding:0.25rem 0.5rem}.chart__list{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}",this.shadowRoot.appendChild(l),e(this,{target:this.shadowRoot,props:a(this.attributes),customElement:!0},B,R,o,{data:1,backgroundcolor:0,delay:4,sides:5,levels:6,valuemax:7,scalemax:8,hasgrades:9},null,[-1,-1]),t&&(t.target&&s(t.target,this,t.anchor),t.props&&(this.$set(t.props),r()))}static get observedAttributes(){return["data","backgroundcolor","delay","sides","levels","valuemax","scalemax","hasgrades"]}get data(){return this.$$.ctx[1]}set data(t){this.$$set({data:t}),r()}get backgroundcolor(){return this.$$.ctx[0]}set backgroundcolor(t){this.$$set({backgroundcolor:t}),r()}get delay(){return this.$$.ctx[4]}set delay(t){this.$$set({delay:t}),r()}get sides(){return this.$$.ctx[5]}set sides(t){this.$$set({sides:t}),r()}get levels(){return this.$$.ctx[6]}set levels(t){this.$$set({levels:t}),r()}get valuemax(){return this.$$.ctx[7]}set valuemax(t){this.$$set({valuemax:t}),r()}get scalemax(){return this.$$.ctx[8]}set scalemax(t){this.$$set({scalemax:t}),r()}get hasgrades(){return this.$$.ctx[9]}set hasgrades(t){this.$$set({hasgrades:t}),r()}}export{D as default};
 //# sourceMappingURL=Radar.js.map