@mozaic-ds/web-components 0.4.1-beta.0 → 0.5.0

package/public/components/chart/Radar.js

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