aframe-charts-component/dist/aframe-charts-component.js

Make 3D Charts with this component based on A-Frame.

(()=>{if("undefined"==typeof AFRAME)throw new Error("Component attempted to register before AFRAME was available.");function t(t){let e={x:0,y:0,z:0};if(null==t.attributes.position)return e;let i=t.attributes.position.value.split(" ");return""!==i[0]&&null!=i[0]&&(e.x=i[0]),""!==i[1]&&null!=i[1]&&(e.y=i[1]),""!==i[2]&&null!=i[2]&&(e.z=i[2]),e}function e(t,e){let i=0;"bar"!==e.type&&"cylinder"!==e.type||(i=t.size/2);let o=t.label+": "+t.y,n=2;o.length>16&&(n=o.length/8);let l=document.createElement("a-plane");return l.setAttribute("position",{x:t.x+i,y:t.y+3,z:t.z}),l.setAttribute("height","2"),l.setAttribute("width",n),l.setAttribute("color","white"),l.setAttribute("text",{value:"DataPoint:\n\n"+o,align:"center",width:6,color:"black"}),l.setAttribute("light",{intensity:.3}),l}function i(t,e,i){let o="",n=t.slice(),l=n.indexOf(e);n.splice(l,1);for(let t=0;t<n.length;t++)"pie"===i.type?o+=n[t].label+": "+n[t].size:o+=n[t].label+": "+n[t].y,t!==n.length-1&&(o+="\n");return o}function o(t,e,i){let o="";o="pie"===i.type?e.size:e.y;let n=document.createElement("a-plane");return n.setAttribute("position",t.position_sel_text),n.setAttribute("rotation",t.rotation),n.setAttribute("height","0.5"),n.setAttribute("width",t.width),n.setAttribute("color","white"),n.setAttribute("text__title",{value:e.label+": "+o,align:"center",width:"7",color:e.color}),n.setAttribute("light",{intensity:"0.3"}),n}function n(t,e){let i=document.createElement("a-plane");return i.setAttribute("position",t.position_all_text),i.setAttribute("rotation",t.rotation),i.setAttribute("height",t.height),i.setAttribute("width",t.width),i.setAttribute("color","white"),i.setAttribute("text__title",{value:e,align:"center",width:"6",color:"black"}),i.setAttribute("light",{intensity:"0.3"}),i}function l(t,e,i,o){let n=document.createElement("a-cylinder");return n.setAttribute("color",t.color),n.setAttribute("theta-start",e),n.setAttribute("theta-length",i),n.setAttribute("side","double"),n.setAttribute("radius",o),n}function r(t,e,i,o){let n=document.createElement("a-torus");return n.setAttribute("color",t.color),n.setAttribute("rotation",{x:90,y:0,z:e}),n.setAttribute("arc",i),n.setAttribute("side","double"),n.setAttribute("radius",o),n.setAttribute("radius-tubular",o/4),n}function s(t){let e=document.createElement("a-sphere");return e.setAttribute("position",{x:t.x,y:t.y,z:t.z}),e.setAttribute("color",t.color),e.setAttribute("radius",t.size),e}function a(t){let e=document.createElement("a-box");return e.setAttribute("position",{x:t.x+t.size/2,y:t.y/2,z:t.z}),e.setAttribute("color",t.color),e.setAttribute("height",t.y),e.setAttribute("depth",t.size),e.setAttribute("width",t.size),e}function u(t){let e=document.createElement("a-cylinder");return e.setAttribute("position",{x:t.x+t.size/2,y:t.y/2,z:t.z}),e.setAttribute("color",t.color),e.setAttribute("height",t.y),e.setAttribute("radius",t.size/2),e}function d(t,e,i){let o=document.createElement("a-plane");return o.setAttribute("position",t.position),o.setAttribute("scale",{x:1,y:1,z:.01}),o.setAttribute("height","0.5"),o.setAttribute("width",t.width),o.setAttribute("text__title",{value:t.name,align:"center",width:"8",color:"black"}),o.addEventListener("click",(function(){let t=e.split(",");for(let e of t){let t=document.getElementById(e),o=t.getAttribute("charts");o.dataPoints=i,t.setAttribute("charts",o)}})),o}AFRAME.registerComponent("charts",{schema:{type:{type:"string",default:"bubble"},dataPoints:{type:"asset"},axis_visible:{type:"boolean",default:!0},axis_position:{type:"vec3",default:{x:0,y:0,z:0}},axis_color:{type:"string",default:"red"},axis_length:{type:"number",default:0},axis_tick_separation:{type:"number",default:1},axis_tick_length:{type:"number",default:.2},axis_tick_color:{type:"string",default:"red"},axis_negative:{type:"boolean",default:!0},axis_grid:{type:"boolean",default:!1},axis_grid_3D:{type:"boolean",default:!1},axis_text:{type:"boolean",default:!0},axis_text_color:{type:"string",default:"white"},axis_text_size:{type:"number",default:10},pie_radius:{type:"number",default:1},pie_doughnut:{type:"boolean",default:!1},show_popup_info:{type:"boolean",default:!1},show_legend_info:{type:"boolean",default:!1},show_legend_position:{type:"vec3",default:{x:0,y:0,z:0}},show_legend_rotation:{type:"vec3",default:{x:0,y:0,z:0}},show_legend_title:{type:"string",default:"Legend"},entity_id_list:{type:"string",default:""},dataPoints_list:{type:"string",default:""}},multiple:!1,init:function(){this.loader=new THREE.FileLoader},update:function(e){const i=this.data;if(i.dataPoints&&i.dataPoints!==e.dataPoints)for(;this.el.firstChild;)this.el.firstChild.remove();if(i.dataPoints){if(i.dataPoints.constructor===[{}].constructor)this.onDataLoaded(this,i.dataPoints,!0);else if(i.dataPoints.constructor==="".constructor)try{this.onDataLoaded(this,JSON.parse(i.dataPoints),!0)}catch(t){this.loader.load(i.dataPoints,this.onDataLoaded.bind(this,!1))}}else"totem"===i.type&&function(e,i){if(""===e.dataPoints_list)return;let o=e.dataPoints_list.constructor==={}.constructor?e.dataPoints_list:JSON.parse(e.dataPoints_list.replace(/'/g,'"')),n=t(i),l=function(t){let e="Select dataSource:".length;for(let i in t)i.length>e&&(e=i.length);let i=2;return e>9&&(i=e/4.4),i}(o);i.appendChild(function(t,e){let i=document.createElement("a-plane");return i.setAttribute("position",e),i.setAttribute("scale",{x:1,y:1,z:.01}),i.setAttribute("height","0.5"),i.setAttribute("color","blue"),i.setAttribute("width",t),i.setAttribute("text__title",{value:"Select dataSource:",align:"center",width:"9",color:"white"}),i}(l,n));let r=.75;for(let t in o){let s={};s.position={x:n.x,y:parseInt(n.y)-r,z:n.z},s.name=t,s.width=l,i.appendChild(d(s,e.entity_id_list,o[t])),r+=.65}}(i,this.el)},remove:function(){},pause:function(){},play:function(){},onDataLoaded:function(d,x){let c=x;try{d||(c=JSON.parse(x))}catch(t){throw new Error("Can't parse JSON file. Maybe is not a valid JSON file")}const y=this.data;let h,_=this.el;!function(t,e,i){if(e.axis_visible&&"pie"!==e.type){if(0===e.axis_length){let t=function(t){let e=0,i=!1;for(let o of t){(o.x<0||o.y<0||o.z<0)&&(i=!0);let t=Math.abs(o.x),n=Math.abs(o.y),l=Math.abs(o.z);t>e&&(e=t),n>e&&(e=n),l>e&&(e=l)}return{max:e,has_negative:i}}(i);e.axis_length=t.max,e.axis_negative&&(e.axis_negative=t.has_negative)}e.axis_grid||e.axis_grid_3D?function(t,e){let i=e.axis_length,o=e.axis_position,n=e.axis_color,l=e.axis_negative,r=0,s=0,a=e.axis_grid_3D,u=e.axis_text,d=e.axis_text_color,x=e.axis_text_size;for(let e of["x","y","z"]){let c={x:o.x,y:o.y,z:o.z};c[e]=i+o[e];let y={x:o.x,y:o.y,z:o.z};l&&(r=i,s=i+1,y[e]=-i+o[e]);let h=document.createElement("a-entity");h.setAttribute("line__"+e,{start:y,end:c,color:n});for(let l=1-s;l<=i;l++){let s,c,y,_;if("x"===e?(s={x:o.x+l,y:o.y-r,z:o.z},c={x:o.x+l,y:o.y+i,z:o.z},y={x:o.x+l,y:o.y,z:o.z-r},_={x:o.x+l,y:o.y,z:o.z+i}):"y"===e?(s={x:o.x,y:o.y+l,z:o.z-r},c={x:o.x,y:o.y+l,z:o.z+i},y={x:o.x-r,y:o.y+l,z:o.z},_={x:o.x+i,y:o.y+l,z:o.z}):(s={x:o.x-r,y:o.y,z:o.z+l},c={x:o.x+i,y:o.y,z:o.z+l},y={x:o.x,y:o.y-r,z:o.z+l},_={x:o.x,y:o.y+i,z:o.z+l}),u){let i=document.createElement("a-text");i.setAttribute("position",c),"x"===e?i.setAttribute("text__"+e+l,{value:Math.round(100*l)/100,width:x,color:d,xOffset:5}):"y"===e?i.setAttribute("text__"+e+l,{value:Math.round(100*l)/100,width:x,color:d,xOffset:4}):i.setAttribute("text__"+e+l,{value:Math.round(100*l)/100,width:x,color:d,xOffset:4.5}),t.appendChild(i)}if(h.setAttribute("line__"+e+l,{start:s,end:c,color:n}),h.setAttribute("line__"+e+l+i,{start:y,end:_,color:n}),a)for(let t=1-r;t<=i;t++){let s,a;"x"===e?(s={x:o.x+l,y:o.y-r,z:o.z+t},a={x:o.x+l,y:o.y+i,z:o.z+t}):"y"===e?(s={x:o.x+t,y:o.y+l,z:o.z-r},a={x:o.x+t,y:o.y+l,z:o.z+i}):(s={x:o.x-r,y:o.y+t,z:o.z+l},a={x:o.x+i,y:o.y+t,z:o.z+l}),h.setAttribute("line__"+e+l+t+i,{start:s,end:a,color:n})}}t.appendChild(h)}}(t,e):function(t,e){let i=e.axis_length,o=e.axis_position,n=e.axis_color,l=e.axis_tick_separation,r=e.axis_tick_length,s=e.axis_tick_color,a=e.axis_negative,u=0,d=e.axis_text,x=e.axis_text_color,c=e.axis_text_size;for(let e of["x","y","z"]){let y={x:o.x,y:o.y,z:o.z};y[e]=i+o[e];let h={x:o.x,y:o.y,z:o.z};a&&(u=i+1,h[e]=-i+o[e]);let _=document.createElement("a-entity");_.setAttribute("line__"+e,{start:h,end:y,color:n});for(let n=l-u;n<=i;n+=l){let i,l;if("x"===e?(i={x:o.x+n,y:o.y-r,z:o.z},l={x:o.x+n,y:o.y+r,z:o.z}):"y"===e?(i={x:o.x,y:o.y+n,z:o.z-r},l={x:o.x,y:o.y+n,z:o.z+r}):(i={x:o.x-r,y:o.y,z:o.z+n},l={x:o.x+r,y:o.y,z:o.z+n}),_.setAttribute("line__"+e+n,{start:i,end:l,color:s}),d){let o=document.createElement("a-text");o.setAttribute("position",i),"x"===e?o.setAttribute("text__"+e+n,{value:Math.round(100*n)/100,width:c,color:x,xOffset:5}):"y"===e?o.setAttribute("text__"+e+n,{value:Math.round(100*n)/100,width:c,color:x,xOffset:4}):o.setAttribute("text__"+e+n,{value:Math.round(100*n)/100,width:c,color:x,xOffset:4.5}),t.appendChild(o)}}t.appendChild(_)}}(t,e)}}(_,y,c);let p,b,f,z,g=y.show_popup_info&&"pie"!==y.type&&!y.pie_doughnut,A=y.show_legend_info;A&&c.length>0&&(z=function(e,i,o){let n=2;e.length-1>6&&(n=(e.length-1)/3);let l=i.show_legend_title.length;for(let t of e){let e=t.label+": ";"pie"===i.type?e+=t.size:e+=t.y,e.length>l&&(l=e.length)}let r=2;l>9&&(r=l/4.4);let s=t(o),a={x:i.show_legend_position.x-s.x,y:i.show_legend_position.y-s.y+n/2+.5,z:i.show_legend_position.z-s.z},u={x:i.show_legend_position.x-s.x,y:i.show_legend_position.y-s.y+n/2,z:i.show_legend_position.z-s.z},d={x:i.show_legend_position.x-s.x,y:i.show_legend_position.y-s.y,z:i.show_legend_position.z-s.z},x=function(t){let e={x:0,y:0,z:0};if(null==t.attributes.rotation)return e;let i=t.attributes.rotation.value.split(" ");return""!==i[0]&&null!=i[0]&&(e.x=i[0]),""!==i[1]&&null!=i[1]&&(e.y=i[1]),""!==i[2]&&null!=i[2]&&(e.z=i[2]),e}(o),c={x:i.show_legend_rotation.x-x.x,y:i.show_legend_rotation.y-x.y,z:i.show_legend_rotation.z-x.z};return{height:n,width:r,title:i.show_legend_title,rotation:c,position_tit:a,position_sel_text:u,position_all_text:d}}(c,y,_),p=function(t){let e=document.createElement("a-plane");return e.setAttribute("position",t.position_tit),e.setAttribute("rotation",t.rotation),e.setAttribute("height","0.5"),e.setAttribute("width",t.width),e.setAttribute("color","white"),e.setAttribute("text__title",{value:t.title,align:"center",width:"8",color:"black"}),e}(z),b=o(z,c[0],y),f=n(z,i(c,c[0],y)),_.appendChild(p),_.appendChild(b),_.appendChild(f));let w=0,m=0,v=0;if("pie"===y.type)for(let t of c)v+=t.size;for(let t of c){let d;"bar"===y.type?d=a(t):"cylinder"===y.type?d=u(t):"pie"===y.type?(m=360*t.size/v,d=y.pie_doughnut?r(t,w,m,y.pie_radius):l(t,w,m,y.pie_radius),w+=m):d=s(t),d.addEventListener("mouseenter",(function(){this.setAttribute("scale",{x:1.3,y:1.3,z:1.3}),g&&(h=e(t,y),_.appendChild(h)),A&&(_.removeChild(b),_.removeChild(f),b=o(z,t,y),f=n(z,i(c,t,y)),_.appendChild(b),_.appendChild(f))})),d.addEventListener("mouseleave",(function(){this.setAttribute("scale",{x:1,y:1,z:1}),g&&_.removeChild(h)})),_.appendChild(d)}}})})();