From d4e9740f608751bb5c51b813c31ea9f9b586886b Mon Sep 17 00:00:00 2001 From: Matous Trca Date: Mon, 12 Sep 2022 10:42:12 +0200 Subject: [PATCH] format value in the footer according to locale --- dev/sample.json | 12 ++++++------ dist/accolade-chart-lib.es.js | 2 +- dist/accolade-chart-lib.umd.js | 2 +- package.json | 2 +- src/chart.js | 2 +- 5 files changed, 10 insertions(+), 10 deletions(-) diff --git a/dev/sample.json b/dev/sample.json index d515ceb..ea897db 100644 --- a/dev/sample.json +++ b/dev/sample.json @@ -2,11 +2,11 @@ "rows": { "1": { "values": { - "1": "50", - "2": "60", - "3": "70", - "4": "80", - "5": "90" + "1": "5000", + "2": "6000", + "3": "70.542355060", + "4": "8000351", + "5": "9000" }, "colors": "7", "name": "Test" @@ -252,5 +252,5 @@ "orientation": "column", "sortType": "keySort", "sortDirection": "asc", - "locale": "cs" + "locale": "en" } \ No newline at end of file diff --git a/dist/accolade-chart-lib.es.js b/dist/accolade-chart-lib.es.js index e4d50ac..06b391d 100644 --- a/dist/accolade-chart-lib.es.js +++ b/dist/accolade-chart-lib.es.js @@ -7125,7 +7125,7 @@ function renderChartFooter(set2, { cols, colors: colorMap, unit: unit2, displayL colorElem.style.backgroundColor = `rgb(${r}, ${g}, ${b})`; const valueElem = document.createElement(`div`); valueElem.className = `value`; - valueElem.innerHTML = `${format(``)(value)}${unit2 ? `${unit2 === `%` && locale2 === `en` ? `` : ` `}${unit2}` : ``}`; + valueElem.innerHTML = `${format(`,`)(value)}${unit2 ? `${unit2 === `%` && locale2 === `en` ? `` : ` `}${unit2}` : ``}`; const labelElem = document.createElement(`div`); labelElem.className = `label`; labelElem.innerHTML = label; diff --git a/dist/accolade-chart-lib.umd.js b/dist/accolade-chart-lib.umd.js index 634924d..9558b1b 100644 --- a/dist/accolade-chart-lib.umd.js +++ b/dist/accolade-chart-lib.umd.js @@ -18,4 +18,4 @@ var Hh=Object.defineProperty,zh=Object.defineProperties;var Vh=Object.getOwnProp
- `)).on("mousemove",({clientX:A,clientY:_})=>{const S={getBoundingClientRect(){return{width:0,height:0,x:A,y:_,left:A,right:A,top:_,bottom:_}}},H=L.node(),B=H.lastElementChild;Bf(S,H,{placement:"top",middleware:[Mf(20),Ef(),Tf(),wf({element:B})]}).then(({x:Q,y:G,middlewareData:{arrow:ct},placement:dt})=>{Object.assign(H.style,{top:dt==="top"?`${G}px`:0,transform:dt==="bottom"?"translateY(100%)":"none",left:`${Q}px`}),Object.assign(B.style,{top:dt==="top"?"100%":0,transform:dt==="bottom"?"translateY(-100%) rotate(180deg)":"none",left:`${ct.x}px`})})}).on("mouseout",()=>L.style("opacity","0"))}function jf({chart:t,set:e,colors:n,cols:r,width:i,sortDirection:o,sortType:s}){const a=On().duration(1e3).delay(1e3),c=df().value(([,b])=>b).sort(null)(e.sort(Ao(s,o,r)).map(b=>b)),u=i/2,h=u*.55,d=ff().innerRadius(h).outerRadius(u),m=(b,M)=>{const T=ut(J({},b),{data:[b.data[0],0],endAngle:0,padAngle:0,startAngle:0,value:0}),O=$n(T,b);return function(P){const F=O(P);return d(F,M)}},x=t.selectAll(".doughnut").data([1]).enter().append("g").attr("class","doughnut").attr("transform",`translate(${i/2}, ${i/2})`),w=t.select(".doughnut").selectAll(".arc").data(c,({data:[b]})=>b);w.exit().remove(),w.enter().append("path").attr("class","arc").merge(w).transition(a).attrTween("d",m).attr("fill",(b,M)=>{const[T]=e[M],{colors:O}=r[T],{border:{r:P,g:F,b:q}}=n[O];return`rgb(${P}, ${F}, ${q})`});const C=x.selectAll(".center").data([1]);C.enter().append("circle").attr("class","center").attr("stroke","white").attr("stroke-width",60).attr("stroke-opacity",.8).attr("cx",0).attr("cy",0).attr("fill","none").attr("r",0).merge(C).transition().duration(500).attr("r",h)}function yo(t,{cols:e,rows:n,colors:r,isTransposed:i}){const[o,s]=i?Gf(e,n):[e,n];Zf(t),Wf(t,o),Uf(t,s,o,r)}function Gf(t,e){const[[n,r],...i]=Object.entries(t),o=J({0:r},Object.fromEntries(Object.entries(e).map(([a,{values:c,colors:u}])=>[a,{colors:u,value:c[n]}]))),s=Object.fromEntries(i.map(([a,{value:c,colors:u}])=>[a,{colors:u,values:J({0:c},Object.fromEntries(Object.entries(e).map(([h,{values:d}])=>[h,d[a]])))}]));return[o,s]}function Wf(t,e){const n=document.createElement("thead"),r=document.createElement("tr");let i=0;for(const o in e){i+=1;const s=document.createElement("th");s.innerHTML=e[o].value.replace("|","
"),r.appendChild(s),i===1&&r.appendChild(s.cloneNode(!0))}n.appendChild(r),t.appendChild(n)}function Uf(t,e,n,r){const i=document.createElement("tbody"),o=Kf(r),s=Object.values(n);let a=0;for(const c in e){a+=1;const u=document.createElement("tr"),{values:h,colors:d}=e[c];if(Object.values(h).every(x=>!x))continue;let m=0;for(const x in h){const{colors:w}=s[m];m+=1;const E=document.createElement("td");o(E,d,w,a%2==0),E.innerHTML=h[x].replace("|","
"),u.appendChild(E),m===1&&u.appendChild(E.cloneNode(!0))}i.appendChild(u)}t.appendChild(i)}function Kf(t){return t?(e,n,r,i)=>{const{start:o,border:s}=t[n]||gr,{start:a,end:c,border:u}=t[r]||gr;o.a&&(e.style.backgroundColor=`rgba(${o.r},${o.g},${o.b},${o.a})`),i&&c.a?e.style.backgroundColor=`rgba(${c.r},${c.g},${c.b},${c.a})`:a.a&&(e.style.backgroundColor=`rgba(${a.r},${a.g},${a.b},${a.a})`),s.a&&(e.style.color=`rgba(${s.r},${s.g},${s.b},${s.a})`),u.a&&(e.style.color=`rgba(${u.r},${u.g},${u.b},${u.a})`)}:()=>null}function Zf(t){for(;t.firstChild;)t.removeChild(t.firstChild)}function Ge(t,e){const n=8,r=e.scrollLeft,i=e.scrollWidth-e.offsetWidth,o=t<0?0:t>i?i:t;if(Math.abs(r-o)>1){const s=Math.abs(r-o),a=r>o?-1:1;e.scrollLeft=e.scrollLeft+a*(s>n?s/n:1),window.requestAnimationFrame(()=>Ge(o,e)),window.canClick=!1}else window.canClick=!0}function Qf(t,e,n){e.scrollLeft=e.scrollWidth,window.canClick=!0;const r=document.createElement("div");r.className="table-header";const i=document.createElement("button");i.innerText="\u2190",i.className="hidden",i.addEventListener("click",()=>{window.canClick&&Ge(e.scrollLeft-n,e)});const o=document.createElement("button");o.innerText="\u2192",o.className="hidden",o.addEventListener("click",()=>{window.canClick&&Ge(e.scrollLeft+n,e)});const s=document.createElement("span");s.innerText=t,r.appendChild(i),r.appendChild(s),r.appendChild(o);const a=Jf(i,o);return e.addEventListener("scroll",({target:c})=>a(c)),a(e),r}function Jf(t,e){return n=>{t.classList.toggle("hidden",Math.abs(n.scrollLeft)<2),e.classList.toggle("hidden",Math.abs(n.scrollLeft+n.offsetWidth-n.scrollWidth)<2)}}function We(t){return t===vr}function Rt(t){return t===xr}function un(t){return t===yr}function th(t){return t===vr||t===xr||t===yr}function nh(t){return t===Jo}function Ue(t){return t.width-vo(t)}function Zn(t){return t.height-rh(t)}function vo({rows:t,chartType:e,verticalLabel:n}){return Rt(e)?0:se(t)*St*pr+(n?ae:0)}function eh({chartType:t}){return Rt(t)?0:dr.top}function rh({chartType:t}){return Rt(t)?0:dr.bottom+ae}function Qn({chartType:t,rows:e},n=!0){if(un(t)){if(!n)return Ft(e);const i={};return Object.keys(e).forEach(o=>{Object.keys(e[o].values).forEach(s=>{i[s]=parseInt(i[s],10)>e[o].values[s]?i[s]:e[o].values[s]})}),Ft(i)}const[r]=Object.keys(e);return Ft(e[r].values)}function ih(t,e){const n=Qn(e),r=xo(n,e),i=wo(n,e),s=t.append("svg").attr("viewBox",`0 0 ${e.width} ${e.height}`).attr("fontStyle","normal").attr("fontFamily",_t).append("g").attr("transform",`translate(${vo(e)}, ${eh(e)})`);return s.append("g").attr("class","axis axis--y").call(i),s.append("g").attr("class","axis axis--x").attr("transform",`translate(0, ${Zn(e)})`).call(r),s.append("defs"),s}function xo(t,e){if(Rt(e.chartType))return()=>null;const n=Ze(t,e);return r=>{const i=xa(n).tickSize(0);r.call(i),r.select(".domain").remove();const o=r.selectAll(".tick text").attr("font-size",St).attr("font-family",_t).attr("dy",16).attr("fill",ot.label).text("");o.append("tspan").attr("dy","1.4em").attr("x","0").text(s=>Ke(e.cols[s].value,e.locale,0)),o.append("tspan").attr("dy","1.4em").attr("x","0").text(s=>Ke(e.cols[s].value,e.locale,1)),o.append("tspan").attr("dy","1.4em").attr("x","0").text(s=>Ke(e.cols[s].value,e.locale,2))}}function Ke(t,e,n){const[r,i,o,s]=t.split(/\.|\s|\.\s|\. | /).filter(Boolean);return[r,i,o].every(c=>parseInt(c,10))?(e==="cs"?[`${r}. ${i}.`,o,s]:[`${r}.${i}.`,o,s])[n]:[r,i,o,s][n]}function wo(t,e){if(Je(e.locale),Rt(e.chartType))return()=>null;const n=_o(t,e),r=Ue(e);return i=>{const o=va(n).tickSize(r).tickPadding(0);i.call(o),i.select(".domain").remove(),i.selectAll(".tick line").attr("opacity",s=>s>Math.max(...t.map(([,a])=>a))?0:1).attr("stroke",ot.tick),i.selectAll(".tick text").text(s=>qt(",")(s)).attr("opacity",s=>s>Math.max(...t.map(([,a])=>a))?0:1).attr("font-size",St).attr("font-family",_t).attr("fill",ot.label).attr("x",-10).attr("dy",6).attr("text-anchor","end")}}function Ze(t,e){return qi().domain(t.map(([n])=>n)).rangeRound([0,Ue(e)]).padding(We(e.chartType)?.33:0)}function _o(t,e){const{rows:n,chartType:r}=e,i=Object.values(n).reduce((c,u)=>c.concat(Object.values(u.values)),[]).filter(W);let o=1;if(We(r)){const u=Ze(t,e).bandwidth()*Kt,h=Zn(e);o=(h+u)/h*1.1}else un(r)&&(o=1.05);const s=un(r)?Math.min(...i):0,a=Math.max(...i)*o;return Xi().domain([s,a]).range([Zn(e),0])}function bo(t,e,n){Je(e.locale);const{chartType:r,horizontalLabel:i,verticalLabel:o,sortDirection:s,sortType:a}=e,c={set:Qn(e,!un(r)),height:Zn(e),width:Ue(e),xScale:Ze(t,e),yScale:_o(t,e),colors:e.colors,cols:e.cols,unit:e.unit,locale:e.locale,labels:{horizontalLabel:i,verticalLabel:o},sortDirection:s,sortType:a,chart:n};return We(r)?gf(c):un(r)?Yf(c):Rt(r)?jf(c):!0}function Qe({title:t,subtitle:e},n){if(!t&&!e)return;const r=document.createElement("header");r.className="header";const i=document.createElement("h1"),o=document.createElement("h2");i.innerHTML=t,e.split("|").forEach(s=>{const a=document.createElement("span");a.innerHTML=s.trim(),o.appendChild(a)}),r.appendChild(i),r.appendChild(o),n.insertAdjacentElement("afterbegin",r)}function Ao(t,e,n){const r=e===rs;return([i,o],[s,a])=>t===ts?r?-1:1:t===es?(o-a)*(r?-1:1):t===ns?(n[i].value>n[s].value?1:-1)*(r?-1:1):-1}function $o(t,{cols:e,colors:n,unit:r,displayLegend:i,sortType:o,sortDirection:s,locale:a},c){if(i===!1)return!1;const u=document.createElement("footer");return u.className="footer",t.sort(Ao(o,s,e)).forEach(([h,d])=>{const{colors:m,value:x}=e[h],{border:{r:w,g:E,b:C}}=n[m],N=document.createElement("div");N.className="line";const b=document.createElement("div");b.className="color",b.style.backgroundColor=`rgb(${w}, ${E}, ${C})`;const M=document.createElement("div");M.className="value",M.innerHTML=`${qt("")(d)}${r?`${r==="%"&&a==="en"?"":" "}${r}`:""}`;const T=document.createElement("div");T.className="label",T.innerHTML=x,N.appendChild(b),N.appendChild(T),N.appendChild(M),u.appendChild(N)}),c.insertAdjacentElement("beforeend",u),!0}function Jn([,t]){const[,e,n]=/([^a-zA-Z]*)([a-zA-Z]?)/g.exec(qt("~s")(t)),r=t<0?"-":"+";return{value:e,unit:n,sign:r}}const oh="M9.2 5.3H6.6C6.5 5.1 6.5 4.9 6.4 4.8L3.8 0.3C3.5 -0.1 3.2 -0.1 3 0.3L0.4 4.8C0.2 5.2 0 5.8 0 6.2V11.4C0 11.8 0.3 12.2 0.8 12.2H3.4C3.5 12.4 3.5 12.6 3.6 12.7L6.2 17.2C6.4 17.6 6.7 17.6 7 17.2L9.6 12.7C9.8 12.3 10 11.7 10 11.3V6.1C10 5.7 9.7 5.3 9.2 5.3",sh=mr.makeAbsolute(mr.parseSVG(oh));function ah(t,e,n){return ch(sh,o=>o*n/10+t,o=>o*n/10+e-n*Kt).join("")}function lh(t,e,n,r){return[`M${t} ${e-n*Kt/2}`,`L${t} ${r}`,`L${t+n} ${r}`,`L${t+n} ${e-n*Kt/2}`,"Z"].join(" ")}function ch(t,e,n){return t.map(r=>{switch(r.code){case"M":return`M${e(r.x)} ${n(r.y)}`;case"C":return`C${e(r.x1)} ${n(r.y1)} ${e(r.x2)} ${n(r.y2)} ${e(r.x)} ${n(r.y)}`;case"L":return`L${e(r.x)} ${n(r.y)}`;case"V":return`V${n(r.y)}`;case"H":return`H${e(r.x)}`;default:return""}}).filter(r=>r)}function uh(t){return t*Kt/2}function Eo(t,e,n,r,i){const o=t.selectAll(".verticalLabel").data([1]),s=-1*(i+1)*St*pr;o.enter().append("text").attr("class","verticalLabel").attr("x",s).attr("transform",`rotate(-90, ${s}, ${r})`).attr("y",r).attr("font-family",_t).attr("fill",ot.label).attr("fill-opacity",0).merge(o).text(e.verticalLabel).transition().duration(1e3).attr("fill-opacity",1),t.selectAll(".topLeftLabel").data([1]).enter().append("text").attr("class","topLeftLabel").attr("x",0).attr("y",0).attr("font-family",_t).attr("fill",ot.label),t.selectAll(".topRightLabel").data([1]).enter().append("text").attr("class","topRightLabel").attr("x",n-20).attr("y",0).attr("font-family",_t).attr("fill",ot.label).attr("fill-opacity",1).attr("text-anchor","end");const h=t.selectAll(".bottomRightLabel").data([1]);h.enter().append("text").attr("class","bottomRightLabel").attr("x",n-20).attr("y",r+ae*1.75).attr("font-family",_t).attr("fill",ot.label).attr("text-anchor","end").merge(h).text(e.horizontalLabel).transition().duration(1e3).attr("fill-opacity",.5)}function Je(t){const e={[wr]:{decimal:",",thousands:" ",grouping:[3],currency:[""," K\u010D"]},[is]:{decimal:".",thousands:",",grouping:[3],currency:["\xA3",""]}};return Hi(e[t]||e[wr])}function fh(t,e){if(th(e.chartType)){e.height=Rt(e.chartType)?e.width:e.height;const n=ri(t).attr("class",`renderer ${e.chartType}-chart ${e.orientation}`),r=ih(n,e),i=Qn(e);return bo(i,e,r),Qe(e,t),$o(i,e,t),o=>{const s=Qn(o);r.select(".axis--y").call(wo(s,o)),r.select(".axis--x").call(xo(s,o)),bo(s,o,r),t.querySelector("header")&&t.querySelector("header").remove(),Qe(o,t),t.querySelector("footer")&&t.querySelector("footer").remove(),$o(s,o,t)}}else if(nh(e.chartType)){t.classList.add("table");const n=document.createElement("table");n.className="table";const r=document.createElement("div");r.className="table-wrapper",Qe(e,t),yo(n,e),r.appendChild(n),t.appendChild(r);const i=.75*window.innerWidth,o=Qf(e.tableTitle,r,i);return t.insertBefore(o,r),[...n.querySelectorAll("tr")].forEach(a=>{const c=[...a.children].map(u=>u.getBoundingClientRect().height);a.style.setProperty("--cellHeight",`${Math.max(...c)}px`)}),a=>{yo(n,a)}}}var Yh="";X.colorSets=Wo,X.colors=ot,X.default=fh,Object.defineProperty(X,"__esModule",{value:!0}),X[Symbol.toStringTag]="Module"}); + `)).on("mousemove",({clientX:A,clientY:_})=>{const S={getBoundingClientRect(){return{width:0,height:0,x:A,y:_,left:A,right:A,top:_,bottom:_}}},H=L.node(),B=H.lastElementChild;Bf(S,H,{placement:"top",middleware:[Mf(20),Ef(),Tf(),wf({element:B})]}).then(({x:Q,y:G,middlewareData:{arrow:ct},placement:dt})=>{Object.assign(H.style,{top:dt==="top"?`${G}px`:0,transform:dt==="bottom"?"translateY(100%)":"none",left:`${Q}px`}),Object.assign(B.style,{top:dt==="top"?"100%":0,transform:dt==="bottom"?"translateY(-100%) rotate(180deg)":"none",left:`${ct.x}px`})})}).on("mouseout",()=>L.style("opacity","0"))}function jf({chart:t,set:e,colors:n,cols:r,width:i,sortDirection:o,sortType:s}){const a=On().duration(1e3).delay(1e3),c=df().value(([,b])=>b).sort(null)(e.sort(Ao(s,o,r)).map(b=>b)),u=i/2,h=u*.55,d=ff().innerRadius(h).outerRadius(u),m=(b,M)=>{const T=ut(J({},b),{data:[b.data[0],0],endAngle:0,padAngle:0,startAngle:0,value:0}),O=$n(T,b);return function(P){const F=O(P);return d(F,M)}},x=t.selectAll(".doughnut").data([1]).enter().append("g").attr("class","doughnut").attr("transform",`translate(${i/2}, ${i/2})`),w=t.select(".doughnut").selectAll(".arc").data(c,({data:[b]})=>b);w.exit().remove(),w.enter().append("path").attr("class","arc").merge(w).transition(a).attrTween("d",m).attr("fill",(b,M)=>{const[T]=e[M],{colors:O}=r[T],{border:{r:P,g:F,b:q}}=n[O];return`rgb(${P}, ${F}, ${q})`});const C=x.selectAll(".center").data([1]);C.enter().append("circle").attr("class","center").attr("stroke","white").attr("stroke-width",60).attr("stroke-opacity",.8).attr("cx",0).attr("cy",0).attr("fill","none").attr("r",0).merge(C).transition().duration(500).attr("r",h)}function yo(t,{cols:e,rows:n,colors:r,isTransposed:i}){const[o,s]=i?Gf(e,n):[e,n];Zf(t),Wf(t,o),Uf(t,s,o,r)}function Gf(t,e){const[[n,r],...i]=Object.entries(t),o=J({0:r},Object.fromEntries(Object.entries(e).map(([a,{values:c,colors:u}])=>[a,{colors:u,value:c[n]}]))),s=Object.fromEntries(i.map(([a,{value:c,colors:u}])=>[a,{colors:u,values:J({0:c},Object.fromEntries(Object.entries(e).map(([h,{values:d}])=>[h,d[a]])))}]));return[o,s]}function Wf(t,e){const n=document.createElement("thead"),r=document.createElement("tr");let i=0;for(const o in e){i+=1;const s=document.createElement("th");s.innerHTML=e[o].value.replace("|","
"),r.appendChild(s),i===1&&r.appendChild(s.cloneNode(!0))}n.appendChild(r),t.appendChild(n)}function Uf(t,e,n,r){const i=document.createElement("tbody"),o=Kf(r),s=Object.values(n);let a=0;for(const c in e){a+=1;const u=document.createElement("tr"),{values:h,colors:d}=e[c];if(Object.values(h).every(x=>!x))continue;let m=0;for(const x in h){const{colors:w}=s[m];m+=1;const E=document.createElement("td");o(E,d,w,a%2==0),E.innerHTML=h[x].replace("|","
"),u.appendChild(E),m===1&&u.appendChild(E.cloneNode(!0))}i.appendChild(u)}t.appendChild(i)}function Kf(t){return t?(e,n,r,i)=>{const{start:o,border:s}=t[n]||gr,{start:a,end:c,border:u}=t[r]||gr;o.a&&(e.style.backgroundColor=`rgba(${o.r},${o.g},${o.b},${o.a})`),i&&c.a?e.style.backgroundColor=`rgba(${c.r},${c.g},${c.b},${c.a})`:a.a&&(e.style.backgroundColor=`rgba(${a.r},${a.g},${a.b},${a.a})`),s.a&&(e.style.color=`rgba(${s.r},${s.g},${s.b},${s.a})`),u.a&&(e.style.color=`rgba(${u.r},${u.g},${u.b},${u.a})`)}:()=>null}function Zf(t){for(;t.firstChild;)t.removeChild(t.firstChild)}function Ge(t,e){const n=8,r=e.scrollLeft,i=e.scrollWidth-e.offsetWidth,o=t<0?0:t>i?i:t;if(Math.abs(r-o)>1){const s=Math.abs(r-o),a=r>o?-1:1;e.scrollLeft=e.scrollLeft+a*(s>n?s/n:1),window.requestAnimationFrame(()=>Ge(o,e)),window.canClick=!1}else window.canClick=!0}function Qf(t,e,n){e.scrollLeft=e.scrollWidth,window.canClick=!0;const r=document.createElement("div");r.className="table-header";const i=document.createElement("button");i.innerText="\u2190",i.className="hidden",i.addEventListener("click",()=>{window.canClick&&Ge(e.scrollLeft-n,e)});const o=document.createElement("button");o.innerText="\u2192",o.className="hidden",o.addEventListener("click",()=>{window.canClick&&Ge(e.scrollLeft+n,e)});const s=document.createElement("span");s.innerText=t,r.appendChild(i),r.appendChild(s),r.appendChild(o);const a=Jf(i,o);return e.addEventListener("scroll",({target:c})=>a(c)),a(e),r}function Jf(t,e){return n=>{t.classList.toggle("hidden",Math.abs(n.scrollLeft)<2),e.classList.toggle("hidden",Math.abs(n.scrollLeft+n.offsetWidth-n.scrollWidth)<2)}}function We(t){return t===vr}function Rt(t){return t===xr}function un(t){return t===yr}function th(t){return t===vr||t===xr||t===yr}function nh(t){return t===Jo}function Ue(t){return t.width-vo(t)}function Zn(t){return t.height-rh(t)}function vo({rows:t,chartType:e,verticalLabel:n}){return Rt(e)?0:se(t)*St*pr+(n?ae:0)}function eh({chartType:t}){return Rt(t)?0:dr.top}function rh({chartType:t}){return Rt(t)?0:dr.bottom+ae}function Qn({chartType:t,rows:e},n=!0){if(un(t)){if(!n)return Ft(e);const i={};return Object.keys(e).forEach(o=>{Object.keys(e[o].values).forEach(s=>{i[s]=parseInt(i[s],10)>e[o].values[s]?i[s]:e[o].values[s]})}),Ft(i)}const[r]=Object.keys(e);return Ft(e[r].values)}function ih(t,e){const n=Qn(e),r=xo(n,e),i=wo(n,e),s=t.append("svg").attr("viewBox",`0 0 ${e.width} ${e.height}`).attr("fontStyle","normal").attr("fontFamily",_t).append("g").attr("transform",`translate(${vo(e)}, ${eh(e)})`);return s.append("g").attr("class","axis axis--y").call(i),s.append("g").attr("class","axis axis--x").attr("transform",`translate(0, ${Zn(e)})`).call(r),s.append("defs"),s}function xo(t,e){if(Rt(e.chartType))return()=>null;const n=Ze(t,e);return r=>{const i=xa(n).tickSize(0);r.call(i),r.select(".domain").remove();const o=r.selectAll(".tick text").attr("font-size",St).attr("font-family",_t).attr("dy",16).attr("fill",ot.label).text("");o.append("tspan").attr("dy","1.4em").attr("x","0").text(s=>Ke(e.cols[s].value,e.locale,0)),o.append("tspan").attr("dy","1.4em").attr("x","0").text(s=>Ke(e.cols[s].value,e.locale,1)),o.append("tspan").attr("dy","1.4em").attr("x","0").text(s=>Ke(e.cols[s].value,e.locale,2))}}function Ke(t,e,n){const[r,i,o,s]=t.split(/\.|\s|\.\s|\. | /).filter(Boolean);return[r,i,o].every(c=>parseInt(c,10))?(e==="cs"?[`${r}. ${i}.`,o,s]:[`${r}.${i}.`,o,s])[n]:[r,i,o,s][n]}function wo(t,e){if(Je(e.locale),Rt(e.chartType))return()=>null;const n=_o(t,e),r=Ue(e);return i=>{const o=va(n).tickSize(r).tickPadding(0);i.call(o),i.select(".domain").remove(),i.selectAll(".tick line").attr("opacity",s=>s>Math.max(...t.map(([,a])=>a))?0:1).attr("stroke",ot.tick),i.selectAll(".tick text").text(s=>qt(",")(s)).attr("opacity",s=>s>Math.max(...t.map(([,a])=>a))?0:1).attr("font-size",St).attr("font-family",_t).attr("fill",ot.label).attr("x",-10).attr("dy",6).attr("text-anchor","end")}}function Ze(t,e){return qi().domain(t.map(([n])=>n)).rangeRound([0,Ue(e)]).padding(We(e.chartType)?.33:0)}function _o(t,e){const{rows:n,chartType:r}=e,i=Object.values(n).reduce((c,u)=>c.concat(Object.values(u.values)),[]).filter(W);let o=1;if(We(r)){const u=Ze(t,e).bandwidth()*Kt,h=Zn(e);o=(h+u)/h*1.1}else un(r)&&(o=1.05);const s=un(r)?Math.min(...i):0,a=Math.max(...i)*o;return Xi().domain([s,a]).range([Zn(e),0])}function bo(t,e,n){Je(e.locale);const{chartType:r,horizontalLabel:i,verticalLabel:o,sortDirection:s,sortType:a}=e,c={set:Qn(e,!un(r)),height:Zn(e),width:Ue(e),xScale:Ze(t,e),yScale:_o(t,e),colors:e.colors,cols:e.cols,unit:e.unit,locale:e.locale,labels:{horizontalLabel:i,verticalLabel:o},sortDirection:s,sortType:a,chart:n};return We(r)?gf(c):un(r)?Yf(c):Rt(r)?jf(c):!0}function Qe({title:t,subtitle:e},n){if(!t&&!e)return;const r=document.createElement("header");r.className="header";const i=document.createElement("h1"),o=document.createElement("h2");i.innerHTML=t,e.split("|").forEach(s=>{const a=document.createElement("span");a.innerHTML=s.trim(),o.appendChild(a)}),r.appendChild(i),r.appendChild(o),n.insertAdjacentElement("afterbegin",r)}function Ao(t,e,n){const r=e===rs;return([i,o],[s,a])=>t===ts?r?-1:1:t===es?(o-a)*(r?-1:1):t===ns?(n[i].value>n[s].value?1:-1)*(r?-1:1):-1}function $o(t,{cols:e,colors:n,unit:r,displayLegend:i,sortType:o,sortDirection:s,locale:a},c){if(i===!1)return!1;const u=document.createElement("footer");return u.className="footer",t.sort(Ao(o,s,e)).forEach(([h,d])=>{const{colors:m,value:x}=e[h],{border:{r:w,g:E,b:C}}=n[m],N=document.createElement("div");N.className="line";const b=document.createElement("div");b.className="color",b.style.backgroundColor=`rgb(${w}, ${E}, ${C})`;const M=document.createElement("div");M.className="value",M.innerHTML=`${qt(",")(d)}${r?`${r==="%"&&a==="en"?"":" "}${r}`:""}`;const T=document.createElement("div");T.className="label",T.innerHTML=x,N.appendChild(b),N.appendChild(T),N.appendChild(M),u.appendChild(N)}),c.insertAdjacentElement("beforeend",u),!0}function Jn([,t]){const[,e,n]=/([^a-zA-Z]*)([a-zA-Z]?)/g.exec(qt("~s")(t)),r=t<0?"-":"+";return{value:e,unit:n,sign:r}}const oh="M9.2 5.3H6.6C6.5 5.1 6.5 4.9 6.4 4.8L3.8 0.3C3.5 -0.1 3.2 -0.1 3 0.3L0.4 4.8C0.2 5.2 0 5.8 0 6.2V11.4C0 11.8 0.3 12.2 0.8 12.2H3.4C3.5 12.4 3.5 12.6 3.6 12.7L6.2 17.2C6.4 17.6 6.7 17.6 7 17.2L9.6 12.7C9.8 12.3 10 11.7 10 11.3V6.1C10 5.7 9.7 5.3 9.2 5.3",sh=mr.makeAbsolute(mr.parseSVG(oh));function ah(t,e,n){return ch(sh,o=>o*n/10+t,o=>o*n/10+e-n*Kt).join("")}function lh(t,e,n,r){return[`M${t} ${e-n*Kt/2}`,`L${t} ${r}`,`L${t+n} ${r}`,`L${t+n} ${e-n*Kt/2}`,"Z"].join(" ")}function ch(t,e,n){return t.map(r=>{switch(r.code){case"M":return`M${e(r.x)} ${n(r.y)}`;case"C":return`C${e(r.x1)} ${n(r.y1)} ${e(r.x2)} ${n(r.y2)} ${e(r.x)} ${n(r.y)}`;case"L":return`L${e(r.x)} ${n(r.y)}`;case"V":return`V${n(r.y)}`;case"H":return`H${e(r.x)}`;default:return""}}).filter(r=>r)}function uh(t){return t*Kt/2}function Eo(t,e,n,r,i){const o=t.selectAll(".verticalLabel").data([1]),s=-1*(i+1)*St*pr;o.enter().append("text").attr("class","verticalLabel").attr("x",s).attr("transform",`rotate(-90, ${s}, ${r})`).attr("y",r).attr("font-family",_t).attr("fill",ot.label).attr("fill-opacity",0).merge(o).text(e.verticalLabel).transition().duration(1e3).attr("fill-opacity",1),t.selectAll(".topLeftLabel").data([1]).enter().append("text").attr("class","topLeftLabel").attr("x",0).attr("y",0).attr("font-family",_t).attr("fill",ot.label),t.selectAll(".topRightLabel").data([1]).enter().append("text").attr("class","topRightLabel").attr("x",n-20).attr("y",0).attr("font-family",_t).attr("fill",ot.label).attr("fill-opacity",1).attr("text-anchor","end");const h=t.selectAll(".bottomRightLabel").data([1]);h.enter().append("text").attr("class","bottomRightLabel").attr("x",n-20).attr("y",r+ae*1.75).attr("font-family",_t).attr("fill",ot.label).attr("text-anchor","end").merge(h).text(e.horizontalLabel).transition().duration(1e3).attr("fill-opacity",.5)}function Je(t){const e={[wr]:{decimal:",",thousands:" ",grouping:[3],currency:[""," K\u010D"]},[is]:{decimal:".",thousands:",",grouping:[3],currency:["\xA3",""]}};return Hi(e[t]||e[wr])}function fh(t,e){if(th(e.chartType)){e.height=Rt(e.chartType)?e.width:e.height;const n=ri(t).attr("class",`renderer ${e.chartType}-chart ${e.orientation}`),r=ih(n,e),i=Qn(e);return bo(i,e,r),Qe(e,t),$o(i,e,t),o=>{const s=Qn(o);r.select(".axis--y").call(wo(s,o)),r.select(".axis--x").call(xo(s,o)),bo(s,o,r),t.querySelector("header")&&t.querySelector("header").remove(),Qe(o,t),t.querySelector("footer")&&t.querySelector("footer").remove(),$o(s,o,t)}}else if(nh(e.chartType)){t.classList.add("table");const n=document.createElement("table");n.className="table";const r=document.createElement("div");r.className="table-wrapper",Qe(e,t),yo(n,e),r.appendChild(n),t.appendChild(r);const i=.75*window.innerWidth,o=Qf(e.tableTitle,r,i);return t.insertBefore(o,r),[...n.querySelectorAll("tr")].forEach(a=>{const c=[...a.children].map(u=>u.getBoundingClientRect().height);a.style.setProperty("--cellHeight",`${Math.max(...c)}px`)}),a=>{yo(n,a)}}}var Yh="";X.colorSets=Wo,X.colors=ot,X.default=fh,Object.defineProperty(X,"__esModule",{value:!0}),X[Symbol.toStringTag]="Module"}); diff --git a/package.json b/package.json index bc47401..68fa440 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ "url": "https://github.com/visualio/accolade-chart-lib/issues" }, "homepage": "https://github.com/visualio/accolade-chart-lib#readme", - "version": "1.0.11", + "version": "1.0.12", "license": "MIT", "main": "dist/accolade-chart-lib.umd.js", "module": "dist/accolade-chart-lib.es.js", diff --git a/src/chart.js b/src/chart.js index cc8e98b..d7cd4ec 100644 --- a/src/chart.js +++ b/src/chart.js @@ -301,7 +301,7 @@ export function renderChartFooter(set, {cols, colors: colorMap, unit, displayLeg const valueElem = document.createElement(`div`) valueElem.className = `value` - valueElem.innerHTML = `${format(``)(value)}${unit ? `${unit === `%` && locale === `en` ? `` : ` `}${unit}` : ``}` + valueElem.innerHTML = `${format(`,`)(value)}${unit ? `${unit === `%` && locale === `en` ? `` : ` `}${unit}` : ``}` const labelElem = document.createElement(`div`) labelElem.className = `label`