UNPKG

@devgateway/dvz-ui-react

Version:

A modular, embeddable React component library for data visualization and UI, built with TypeScript. Provides reusable components for charts, maps, dashboards, and more, with built-in support for internationalization and Redux integration.

2 lines (1 loc) 3.83 kB
"use strict";const y=require("react/jsx-runtime"),z=require("react"),O=require("../data/DataProvider.js"),B=require("../data/DataConsumer.js"),C=require("d3"),P=require("react-intl"),I=require("react-dom"),A=require("./Tooltip.js");function L(n){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const s in n)if(s!=="default"){const r=Object.getOwnPropertyDescriptor(n,s);Object.defineProperty(t,s,r.get?r:{enumerable:!0,get:()=>n[s]})}}return t.default=n,Object.freeze(t)}const d=L(C),E=L(I);class F extends z.Component{constructor(){super(),this.create=this.create.bind(this),this.showToolTip=this.showToolTip.bind(this),this.moveToolTip=this.moveToolTip.bind(this),this.gRef=z.createRef()}showToolTip(t,s,r,a){const l=d.select("body").append("div").attr("class","d3MapTooltip").style("position","absolute").html("").style("left",a.pageX+15+"px").style("top",a.pageY-50+"px");E.render(y.jsx(A.default,{intl:this.props.intl,tooltip:t,data:s,tooltipEnableMarkdown:!1}),l._groups[0][0])}moveToolTip(t){d.select(".d3MapTooltip").style("left",t.pageX+15+"px").style("top",t.pageY-50+"px")}hiddenToolTip(t){d.selectAll(".d3MapTooltip").remove()}create(){const{app:t,tooltip:s,data:r,markFillColor:a,markBorderColor:l,markSizeScale:u,markerLabelSize:k,measures:S,projection:h,id:x,useBreaks:D,breaks:p,pointDimensionStyles:f=[],pointStyleBy:m,dimension2:v,visible:g=!0}=this.props,T=d.scaleThreshold().domain(p.map(e=>e.end)).range(p.map(e=>e.size)),q=d.scaleThreshold().domain(p.map(e=>e.end)).range(p.map(e=>e.color)),R=d.scaleThreshold().domain(p.map(e=>e.end)).range(p.map(e=>e.borderColor));let j=[];const b=d.select(this.gRef.current);if(t!="csv"&&r&&r.children)j=r.children.map(e=>{const i=e.value.split(",");let c={color:a,size:u,border:l},o=1;return m==="measure"?(o=e[S[0]],c={color:q(o),size:T(o),border:R(o)}):m==="dimension"&&e.children&&(o=e.children[0].value,c={color:f[o+"_color"]||a,size:f[o+"_size"]||u,border:f[o+"_border"]||l}),{x:i[0],y:i[1],value:o,metadata:e,pointStyle:c}});else if(t=="csv"){const e=r.meta.fields[0],i=r.meta.fields[1],c=r.meta.fields[2];j=r.data.map(o=>{let w={color:a,size:u,border:l};return{x:o[e],y:o[i],value:o[c],meta:o,pointStyle:w}})}const _=e=>{const{pointStyleBy:i,dimension2:c}=this.props,o={};return i==="dimension"&&c!="none"&&(o[c]=e.metadata.children[0].value),{...o,...e,...e.metadata}},M=this.props.transform?this.props.transform.k:1;b.attr("class","lat-long "+x),b.selectAll(".latLong").remove(),b.selectAll(".latLong").data(j).enter().append("circle").attr("cx",function(e){return h([e.y,e.x])[0]}).attr("cy",function(e){return h([e.y,e.x])[1]}).attr("class","latLong").attr("r",e=>e.pointStyle.size*1/M).attr("stroke-width",2).style("vector-effect","non-scaling-stroke").attr("stroke",e=>e.pointStyle.border).attr("fill",e=>e.pointStyle.color).on("mouseenter",(e,i)=>{this.showToolTip(s,_(i),i.pointStyle.color,e)}).on("mousemove",(e,i)=>{this.moveToolTip(e)}).on("mouseleave",(e,i)=>{this.hiddenToolTip(e)}),this.props.transform&&b.attr("transform",this.props.transform)}componentDidUpdate(t,s,r){const{projection:a}=this.props;this.create()}componentDidMount(){this.create()}render(){const{id:t}=this.props;return y.jsx("g",{className:"latLong "+t,ref:this.gRef})}}const N=n=>{const{id:t,unique:s,filters:r,csv:a,app:l,group:u="default",apiJoinAttribute:k,editing:S,dimension2:h,pointStyleBy:x,dvzProxyDatasetId:D,settings:p}=n,f=x==="dimension"&&h!="none"?"/"+h:"",m={},v=r||{};return v&&v.forEach&&v.forEach(g=>{g.value!=null&&g.value.filter(T=>T!=null&&T.toString().trim()!="").length>0&&(m[g.param]=g.value)}),D&&(m.dvzProxyDatasetId=D),y.jsx(O,{editing:S,params:m,app:l,csv:decodeURIComponent(a),group:u,ignoreErrors:!0,isSvg:!0,store:[l,s,t],source:[k+f],children:y.jsx(B,{children:y.jsx(F,{...n})})})},U=P.injectIntl(N);module.exports=U;