bezel-charts 1.4.0 → 1.6.0

package/src/index.js

@@ -8,6 +8,8 @@ import './entries/spark.js';
 import './entries/line.js';
 import './entries/area.js';
 import './entries/bars.js';
+import './entries/histogram.js';
+import './entries/boxplot.js';
 import './entries/scatter.js';
 import './entries/ring.js';
 import './entries/donut.js';
@@ -18,6 +20,6 @@ import { NAMES, render, toSVG } from './render.js';
 import { THEMES } from './core/themes.js';
 import { BezelChart } from './element.js';
 
-export const version = '1.4.0';
+export const version = '1.6.0';
 export const types = NAMES.slice();
 export { render, toSVG, BezelChart, THEMES as themes };

package/src/render.js

@@ -2,7 +2,7 @@
 import { THEMES } from './core/themes.js';
 import { bool } from './core/util.js';
 /** Every chart type, in the order the full bundle loads them. */
-export const NAMES = ['spark', 'line', 'area', 'bars', 'scatter', 'ring', 'donut', 'gauge', 'progress', 'heatmap'];
+export const NAMES = ['spark', 'line', 'area', 'bars', 'histogram', 'boxplot', 'scatter', 'ring', 'donut', 'gauge', 'progress', 'heatmap'];
 
 /** The renderers loaded so far. Each chart's entry file adds its own, so a page only loads the charts it uses. */
 export const TYPES = {};

package/dist/charts/shared-4QPUIMAU.js

@@ -1,2 +0,0 @@
-/*! Bezel Charts v1.4.0 | MIT | github.com/ShazMoghaddam/bezel-charts */
-var g={dark:{tile:"#15151d",bezel:"#000000",fg:"#f2f1f7",muted:"#8c8aa0",grid:"#2a2935",up:"#5EE6C8",down:"#F675A8",palette:["#9FA1FF","#F675A8","#5EE6C8","#FFC857","#7CC4FF","#FF8A5B"]},light:{tile:"#ffffff",bezel:"#000000",fg:"#17161f",muted:"#6b6980",grid:"#e8e6ef",up:"#12a383",down:"#d63f7c",palette:["#6E70F0","#E2508C","#16A884","#D99A0E","#2F8FE0","#EE6431"]}};var x="ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif",w="ui-monospace,SFMono-Regular,Menlo,Consolas,monospace",W=0;function nt(t){return"bzc"+t+(++W).toString(36)+Math.random().toString(36).slice(2,6)}function h(t){return String(t??"").replace(/[&<>"']/g,function(e){return{"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"}[e]})}function s(t){return Math.round(t*100)/100}function u(t,e,r){return Math.max(e,Math.min(r,t))}function v(t,e){var r=parseFloat(t);return isFinite(r)?r:e}function c(t){return t!=null&&t!==""}function T(t){return Array.isArray(t)?t.map(function(e){var r=+e;return isFinite(r)?r:0}):c(t)?String(t).split(/[\s,;]+/).filter(Boolean).map(function(e){var r=+e;return isFinite(r)?r:0}):[]}function V(t){return Array.isArray(t)?t.map(String):c(t)?String(t).split(",").map(function(e){return e.trim()}):[]}function at(t){return Array.isArray(t)?Array.isArray(t[0])?t.map(T):[T(t)]:c(t)?String(t).split("|").map(T).filter(function(e){return e.length}):[]}function Y(t){return t.reduce(function(e,r){return e+r},0)}function ot(t,e,r){return String(t).length*e*(r?.6:.56)}function st(t,e){return t=String(t),t.length>e?t.slice(0,Math.max(1,e-1))+"\u2026":t}function C(t){return t===!0||t===""||t==="true"||t==="1"}function k(t,e,r){if(!isFinite(t))return"\u2013";var i=Math.abs(t),n;c(e.decimals)?n=u(parseInt(e.decimals,10)||0,0,6):n=t%1===0?0:i<10?2:i<100?1:0;var a={maximumFractionDigits:n,minimumFractionDigits:c(e.decimals)?n:0};(C(e.compact)||r)&&i>=1e4&&(a={notation:"compact",maximumFractionDigits:1});var o;try{o=new Intl.NumberFormat(e.lang||"en-GB",a).format(i)}catch{o=String(s(i))}return(t<0?"\u2212":"")+(e.prefix||"")+o+(e.suffix||"")}function lt(t,e){if(!t.length)return"";for(var r="M"+s(t[0][0])+","+s(t[0][1]),i=1;i<t.length;i++){var n=t[i-1],a=t[i];if(e)r+="L"+s(a[0])+","+s(a[1]);else{var o=(n[0]+a[0])/2;r+="C"+s(o)+","+s(n[1])+" "+s(o)+","+s(a[1])+" "+s(a[0])+","+s(a[1])}}return r}function p(t,e,r,i){return'<text x="'+s(t)+'" y="'+s(e)+'" '+(i||"")+">"+h(r)+"</text>"}function F(t,e,r,i){return'fill="'+(i||t.muted)+'" font-family="'+w+'" font-size="'+(e||10)+'"'+(r?" "+r:"")}function ct(t,e,r,i,n){return'<rect class="bzc-hit" x="'+s(t)+'" y="'+s(e)+'" width="'+s(Math.max(1,r))+'" height="'+s(Math.max(1,i))+'" fill="#000" fill-opacity="0" data-tip="'+h(n)+'"/>'}function ht(t,e,r){return t.animate?' class="'+e+'"'+(r?' style="animation-delay:'+s(r)+'s"':""):""}function ut(t,e){var r=V(t.color).filter(Boolean);return r.length?r:e.palette}function dt(t,e,r,i,n){return p(e+i/2,r+n/2+4,"No data yet",'text-anchor="middle" fill="'+t.muted+'" font-family="'+x+'" font-size="13"')}function ft(t,e){return c(t.notes)?String(t.notes).split(";").map(function(r){var i=r.indexOf(":");if(i<0)return null;var n=r.slice(0,i).trim(),a=r.slice(i+1).trim(),o=e.map(String).indexOf(n);return o<0&&String(parseInt(n,10))===n&&(o=parseInt(n,10)),o>=0&&a?{i:o,text:a}:null}).filter(Boolean):[]}function mt(t,e,r,i,n){var a=(c(t.goalLabel)?t.goalLabel:"Goal")+" "+k(v(t.goal,0),t);return'<line x1="'+s(r)+'" x2="'+s(i)+'" y1="'+s(n)+'" y2="'+s(n)+'" stroke="'+e.fg+'" stroke-opacity=".55" stroke-width="1.25" stroke-dasharray="4 4"/>'+p(i,n-5,a,F(e,10,'text-anchor="end"'))}function pt(t,e,r){var i=String(c(e.stat)?e.stat:r||"").toLowerCase();if(!i||i==="none"||!t.length)return null;var n=Y(t),a={last:t[t.length-1],total:n,sum:n,average:n/t.length,avg:n/t.length,max:Math.max.apply(null,t),min:Math.min.apply(null,t)};if(!(i in a))return null;var o=null;return i==="last"&&t.length>1&&e.delta!=="none"&&(o=t[t.length-1]-t[0]),{val:a[i],delta:o}}var N=["spark","line","area","bars","scatter","ring","donut","gauge","progress","heatmap"],A={};function wt(t,e){A[t]=e}var X=t=>t.replace(/-([a-z])/g,(e,r)=>r.toUpperCase());function U(t,e){if(!A[t])throw new Error(N.includes(t)?`Bezel Charts: the ${t} chart isn't loaded. Add import 'bezel-charts/${t}', or load dist/charts/${t}.js.`:`Bezel Charts: unknown chart type "${t}". Choose one of: ${N.join(", ")}.`);let r={};for(let[i,n]of Object.entries(e))r[X(i)]=n;return r}function S(t,e={}){let r=U(t,e);r.animate=C(r.animate),r.frame=r.frame==="none"?"none":"bezel";let i=r.theme==="light"||r.theme==="dark"?r.theme:r.autoTheme||"dark";return A[t](r,g[i])}function j(t,e={}){return A[t].table(U(t,e))}function $(t){return t.replace(/<rect class="bzc-hit"[^>]*\/>/g,"").replace(/<circle[^>]* class="bzc-hit"[^>]*\/>/g,"").replace(/ data-tip="[^"]*"/g,"")}function yt(t,e={}){return $(S(t,{...e,animate:!1}))}var q=["type","values","labels","series","heading","prefix","suffix","decimals","compact","color","theme","frame","width","height","goal","goal-label","notes","show-values","stat","delta","delta-label","max","min","value","zones","horizontal","straight","zero","start","lang","corners","background","center-label","highlight","x","y","x-label","y-label","trend","static","no-tooltips","stacked","angle-labels","dash","markers","patterns"],_=`:host{display:block;position:relative;max-width:100%}:host([hidden]){display:none}svg{display:block;max-width:100%;height:auto;overflow:visible}.tip{position:absolute;left:0;top:0;pointer-events:none;background:#0b0b10;color:#f2f1f7;font:600 12px/1.5 ${w};padding:7px 10px;border-radius:10px;white-space:pre;opacity:0;transform:translate(-50%,calc(-100% - 12px));transition:opacity .12s;z-index:3;border:1px solid #2a2935;box-shadow:0 8px 24px rgba(0,0,0,.35)}.tip.on{opacity:1}.c{outline:none}.c:focus-visible{outline:2px solid #fff;outline-offset:3px;box-shadow:0 0 0 7px #000}.k{stroke:currentColor;stroke-width:2;stroke-opacity:1}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}@media (forced-colors:active){.c:focus-visible{outline-color:Highlight}}`,Q={ArrowLeft:-1,ArrowUp:-1,ArrowRight:1,ArrowDown:1},J=()=>typeof matchMedia=="function"?matchMedia("(prefers-color-scheme: dark)"):null,K=()=>{let t=typeof document<"u"&&document.documentElement?.getAttribute?.("data-theme");return t==="light"||t==="dark"?t:null},R=new Set;typeof MutationObserver=="function"&&typeof document<"u"&&document.documentElement&&new MutationObserver(()=>R.forEach(t=>t.refresh())).observe(document.documentElement,{attributes:!0,attributeFilter:["data-theme"]});var Z=typeof HTMLElement>"u"?class{}:HTMLElement,z=class extends Z{static get observedAttributes(){return q}static get themes(){return g}get resolvedTheme(){let e=this.getAttribute("theme");return e==="light"||e==="dark"?e:this.options.autoTheme}get chartType(){return this.getAttribute("type")||"spark"}connectedCallback(){this.shadowRoot||(this.attachShadow({mode:"open"}).innerHTML=`<style>${_}</style><div class="c" role="group" aria-roledescription="chart"></div><p class="sr" id="h">Use the arrow keys to step through the values.</p><div class="tip" aria-hidden="true"></div><div class="sr" aria-live="polite"></div><div class="sr"></div>`,[,this.#t,,this.#r,this.#s,this.#h]=this.shadowRoot.children,this.shadowRoot.addEventListener("pointermove",e=>this.#d(e)),this.shadowRoot.addEventListener("pointerdown",e=>this.#d(e)),this.addEventListener("pointerleave",()=>this.#r.classList.remove("on")),this.#t.addEventListener("keydown",e=>this.#g(e)),this.#t.addEventListener("blur",()=>this.#b())),R.add(this),this.#i=J(),this.#i?.addEventListener?.("change",this.#u),typeof ResizeObserver=="function"?(this.#o=new ResizeObserver(([e])=>{let r=Math.round(e.contentRect.width);(!this.#n||!this.hasAttribute("width")&&r>0&&Math.abs(r-this.#l)>1)&&this.#a()}),this.#o.observe(this)):this.#a()}disconnectedCallback(){R.delete(this),this.#o?.disconnect(),this.#i?.removeEventListener?.("change",this.#u)}attributeChangedCallback(){!this.#n||this.#c||(this.#c=!0,queueMicrotask(()=>{this.#c=!1,this.#a()}))}get options(){let e={};for(let r of q)this.hasAttribute(r)&&(e[r]=this.getAttribute(r));return e.width||(e.width=this.#l||360),e.autoTheme=K()||(this.#i?this.#i.matches?"dark":"light":"dark"),e}refresh(){this.#n&&this.#a()}toSVG(e={}){return $(S(this.chartType,{...this.options,...e,animate:!1}))}download(e){let r=URL.createObjectURL(new Blob([this.toSVG()],{type:"image/svg+xml"})),i=Object.assign(document.createElement("a"),{href:r,download:`${(e||this.getAttribute("heading")||this.chartType).replace(/[^\w-]+/g,"-").toLowerCase()}.svg`});document.body.append(i),i.click(),i.remove(),setTimeout(()=>URL.revokeObjectURL(r),1e3)}#o=null;#t=null;#r=null;#s=null;#h=null;#e=-1;#i=null;#l=0;#n=!1;#c=!1;#u=()=>{let e=this.getAttribute("theme");(!e||e==="auto")&&this.refresh()};#a(){if(!this.shadowRoot)return;let e=Math.round(this.getBoundingClientRect?.().width||0);this.#l=e>0?e:360;let r=this.options;r.animate=!this.#n&&!this.hasAttribute("static");let i,n=null;try{i=S(this.chartType,r),n=j(this.chartType,r)}catch(d){i=`<p style="font:13px ${x};color:#d63f7c">${h(d.message)}</p>`}let a=this.#t;a.innerHTML=i.replace(/<title>[\s\S]*?<\/title>/,"");let o=a.querySelector("svg");o?(a.setAttribute("aria-label",o.getAttribute("aria-label")),o.removeAttribute("role"),o.removeAttribute("aria-label"),o.setAttribute("aria-hidden","true")):a.removeAttribute("aria-label");let l=!!o&&!this.hasAttribute("no-tooltips");l?(a.setAttribute("tabindex","0"),a.setAttribute("aria-describedby","h")):(a.removeAttribute("tabindex"),a.removeAttribute("aria-describedby")),a.style.color=g[r.theme==="light"||r.theme==="dark"?r.theme:r.autoTheme].fg,a.style.borderRadius=`${r.frame==="none"?4:u(+r.corners||22,0,60)}px`,this.#h.innerHTML=n&&n.rows.length?tt(r.heading,n):"",this.#e>=0&&l&&this.shadowRoot.activeElement===a?this.#p(this.#e):this.#e=-1,this.#n=!0,this.dispatchEvent(new CustomEvent("bezel-render",{bubbles:!0}))}#d(e){if(this.hasAttribute("no-tooltips"))return;let r=e.target?.closest?.("[data-tip]");if(!r){this.#r.classList.remove("on");return}this.#f(r,e.clientX,e.clientY)}#f(e,r,i){let n=this.#r;n.textContent=e.getAttribute("data-tip");let a=this.getBoundingClientRect?.()||{left:0,top:0,width:0},o=n.offsetWidth/2;n.style.left=`${u(r-a.left,o,Math.max(o,a.width-o))}px`,n.style.top=`${i-a.top}px`,n.classList.add("on")}#m(){return[...this.#t.querySelectorAll("[data-tip]:not([data-skip])")]}#g(e){let r=this.#m(),i=r.length;if(!i)return;let n=this.#e,a=Q[e.key];if(a)this.chartType==="heatmap"&&/Left|Right/.test(e.key)&&(a*=7),n=n<0?a>0?0:i-1:u(n+a,0,i-1);else if(e.key==="Home"||e.key==="End")n=e.key==="Home"?0:i-1;else{e.key==="Escape"&&this.#b();return}e.preventDefault(),this.#p(n,!0)}#p(e,r){let i=this.#m();if(!i.length)return;e=u(e,0,i.length-1),this.#t.querySelector(".k")?.classList.remove("k");let n=i[e],a=n.getBoundingClientRect?.()||{left:0,top:0,width:0};n.classList.add("k"),this.#e=e,this.#f(n,a.left+a.width/2,a.top),r&&(this.#s.textContent=`${n.getAttribute("data-tip").replace(/\n/g,", ")}. ${e+1} of ${i.length}`)}#b(){this.#t.querySelector(".k")?.classList.remove("k"),this.#r.classList.remove("on"),this.#s.textContent="",this.#e=-1}};function tt(t,{head:e,rows:r}){let i=n=>n.map((a,o)=>o?`<td>${h(a)}</td>`:`<th scope="row">${h(a)}</th>`).join("");return`<table><caption>${h(t||"Chart data")}</caption><thead><tr>${e.map(n=>`<th scope="col">${h(n)}</th>`).join("")}</tr></thead><tbody>${r.map(n=>`<tr>${i(n)}</tr>`).join("")}</tbody></table>`}function zt(t){typeof customElements>"u"||typeof HTMLElement>"u"||(customElements.get(`bezel-${t}`)||customElements.define(`bezel-${t}`,class extends z{get chartType(){return t}}),customElements.get("bezel-chart")||customElements.define("bezel-chart",class extends z{}))}function et(t){var e=Math.round(u(v(t.width,360),160,2400)),r=t.frame==="none"?0:4,i=t.frame==="none"?8:20;return{W:e,b:r,P:i,w:e-2*(r+i)}}var rt=".bzc-a{animation:bzc-in .6s ease both}.bzc-d{animation:bzc-draw 1.1s cubic-bezier(.3,.7,.2,1) both}.bzc-g{transform-box:fill-box;transform-origin:50% 100%;animation:bzc-grow .7s cubic-bezier(.2,.8,.2,1) both}.bzc-gn{transform-box:fill-box;transform-origin:50% 0;animation:bzc-grow .7s cubic-bezier(.2,.8,.2,1) both}.bzc-gx{transform-box:fill-box;transform-origin:0 50%;animation:bzc-growx .8s cubic-bezier(.2,.8,.2,1) both}.bzc-s{animation:bzc-sweep 1.1s cubic-bezier(.2,.8,.2,1) both}@keyframes bzc-in{from{opacity:0}}@keyframes bzc-draw{from{stroke-dashoffset:1}}@keyframes bzc-grow{from{transform:scaleY(0)}}@keyframes bzc-growx{from{transform:scaleX(0)}}@keyframes bzc-sweep{from{stroke-dasharray:0 100}}@media (prefers-reduced-motion:reduce){[class^=bzc-]{animation:none!important}}";function Ft(t,e,r,i,n){var a=et(t),o=a.W,l=a.b,d=a.P,O=a.w,E=u(v(t.corners,22),0,60),f=l+d,y="";c(t.heading)&&(y+=p(l+d,f+10,String(t.heading).toUpperCase(),F(e,11,'font-weight="600" letter-spacing="1.3"')),f+=24);var m=n&&n.stat;if(m){if(y+=p(l+d,f+30,k(m.val,t),'fill="'+e.fg+'" font-family="'+x+'" font-size="32" font-weight="800" letter-spacing="-0.5"'),m.delta!=null){var M=m.delta>0,H=m.delta===0,I=t.delta==="inverse"?!M:M,D=H?e.muted:I?e.up:e.down,P=(H?"\u25CF ":M?"\u25B2 ":"\u25BC ")+k(Math.abs(m.delta),t)+" "+(c(t.deltaLabel)?t.deltaLabel:"since start");y+=p(l+d+O,f+28,P,'text-anchor="end" fill="'+D+'" font-family="'+w+'" font-size="11" font-weight="600"')}f+=44}var G=i(l+d,f,O,r),b=Math.round(f+r+d+l),L="";t.frame!=="none"?L='<rect width="'+o+'" height="'+b+'" rx="'+E+'" fill="'+e.bezel+'"/><rect x="'+l+'" y="'+l+'" width="'+(o-2*l)+'" height="'+(b-2*l)+'" rx="'+Math.max(0,E-l)+'" fill="'+(t.background||e.tile)+'"/>':c(t.background)&&(L='<rect width="'+o+'" height="'+b+'" rx="'+E+'" fill="'+t.background+'"/>');var B=(c(t.heading)?t.heading+": ":"")+(n&&n.summary||"chart");return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 '+o+" "+b+'" width="'+o+'" height="'+b+'" role="img" aria-label="'+h(B)+'"><title>'+h(B)+"</title>"+(t.animate?"<style>"+rt+"</style>":"")+L+y+G+"</svg>"}export{x as a,w as b,nt as c,h as d,s as e,u as f,v as g,c as h,T as i,V as j,at as k,Y as l,ot as m,st as n,C as o,k as p,lt as q,p as r,F as s,ct as t,ht as u,ut as v,dt as w,ft as x,mt as y,pt as z,et as A,Ft as B,wt as C,S as D,yt as E,z as F,zt as G};