singledivui/dist/singledivui.min.js

An experimental chart library that renders line, bar, area, bubble, and scatter charts using a single HTML element and modern CSS.

/*!
 * SingleDivUI v2.0.0 | https://singledivui.com | (c) 2023-2026 Soundar | MIT License
 */

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t=t||self).SingleDivUI={})}(this,function(t){"use strict";var y=Math;function v(t,e){var n=y.floor(y.log10(t)),t=t/y.pow(10,n),e=e?t<1.5?1:t<3?2:t<7?5:10:t<=1?1:t<=2?2:t<=5?5:10;return e*y.pow(10,n)}var i=Math,n="px",r=2;function b(t){return Number.isFinite(Number(t))}function o(t,e){for(var n in e=e||{}){var i=e[n],r=Object.prototype.toString.call(i);t[n]="[object Object]"===r?o(t[n]||{},i):i}return t}function x(t,e){return"string"==typeof t&&t!=+t?t:+(+t).toFixed(r)+(e||n)}function S(t,e,n){t-=e,e=i.abs(t),n=i.sqrt(i.pow(n,2)+i.pow(e,2)),e=i.asin(e/n)*(180/i.PI);return x(e=t<0?-e:e,"deg")}function _(t,e,n,i,r){return(t-e)/(n-e)*(r-i)+i}function g(t,e,n){var i,r,o,a,l={};for(i in t){var s=t[i];r=i,a=o=void 0,o="string"==typeof(s=s)||"number"==typeof s,a=!n||!n.includes(r),o&&a&&(l[(e||"")+r.split(/(?=[A-Z])/).join("-").toLowerCase()]=x(s))}return l}function h(t,e,n){p(t,"width",e,n)}function d(t,e,n){p(t,"height",e,n)}function a(t,e){e&&t.removeAttribute(e)}function l(t){return t&&t instanceof Element}var s="undefined"!=typeof document?document:{},u=function(t){return s.querySelector(t)};function c(t,e,n,i){var r,t=function(t,e){var n,i="";for(n in t){var r=t[n];if(e){var o=u(n.split(":")[0]);for(a in r)o.style.setProperty(a,r[a])}else{for(var a in i+=n+" { ",r)i+=a+":"+r[a]+"; ";i+="} \n\n"}}return i}(t,"inline"===e);return t&&("string"==typeof e&&(e=u(e)),l(e)||(e=s.head),t=s.createTextNode(t),n||(r="",i&&(r="#sd-styles"+i.replace("#","-").replace(".","_"),i=s.querySelector(r))&&i.remove(),n=function(t){var t=t.split("#"),e=s.createElement(t[0]);t[1]&&(e.id=t[1]);return e}("style"+r)),e.appendChild(n),n.appendChild(t)),n}function F(t,e){var n=s.createElement("span");p(n,"font",e),n.innerHTML=t,s.body.appendChild(n);e=n.getBoundingClientRect().width;return n.remove(),e}function p(t,e,n,i){var r="string"==typeof n;i||r&&n!=+n||(n+="px"),t.style[e]=n}var z=Math,w="&#160;";function f(t,e,n,i,r,o){var a,l,s=r.xAxis,u=r.yAxis,u=void 0===u?{}:u,s=Object.assign({},r,void 0===s?{}:s),r=Object.assign({},r,u),u="bubble"!==o&&"scatter"!==o,o="bar"===o,c=s.padding,p=(c=Array.isArray(c)?c:[0,0])[0]||0,c=c[1]||0,n=(o&&(p+=1),e/(u=u?(l=(f=n).length-1)-(a=0)+(p+c):(a=(o=M(n,s)).min,l=o.max,(f=o.scale).length-1+(p+c)))),n=.5*Math.floor(n/.5),o=M(i,r),c=o.min,i=o.max,h=(o=o.reverseScale).length-1,d=t/h,o=j(o,r.labelFormatter),f=function(t,n,e){var i=e.labelFontSize,r=e.labelFontFamily;if(e.verticalLabel)return t.join("\\a ");function o(t){var t=t+u,e=z.round(t/s);0<=e&&(l+=" ".repeat(e)),u=t-e*s}var a=x(i)+" "+r,l="",s=F(w,a),u=0;return t.forEach(function(t){var e=F(t,a),e=(n-e)/2;o(e),l+=t,o(e)}),l}(f=j(f,s.labelFormatter),n,s),p=n*p,y=(b=o,m=(y=r).labelFontSize,y=y.labelFontFamily,m=x(m)+" "+y,y=0<b.length?b[0]:"",v=1<b.length?b[1]:"",b=2<b.length?b[b.length-1]:"",z.max(F(y,m),F(v,m),F(b,m))),v={},b={},m=(b["--_y-label-width"]=x(y),v["--_x-label"]='"'.concat(f,'"'),b["--_y-label"]='"'.concat(o.join("\\a "),'"'),s.verticalLabel&&(v["--_x-label-height"]=x(n),v["--_x-label-direction"]="vertical-lr"),function(t,e){var n,i={};for(n in t){var r=t[n];r===e[n]&&(i[n]=r,delete t[n],delete e[n])}var o=g(i,"--"),a=g(t,"--x-"),l=g(e,"--y-");return Object.assign({},o,a,l)}(s,r));return m["--_row-size"]=x(d),m["--_column-size"]=x(n),m["--_start-position"]=x(p),{row:h,col:u,rowSize:d,columnSize:n,xMin:a,xMax:l,yMin:c,yMax:i,chartHeight:t,chartWidth:e,startPosition:p,styles:{common:m,x:v,y:b}}}function j(t,e){return"function"==typeof e?t.map(e):t}function M(t,e){for(var n,i,r,o=e.maxTicks,a=e.startFromZero,e=e.customScale,l=e.min,s=e.max,e=e.interval,l=(b(l)&&(u=parseFloat(l)),b(s)&&(n=parseFloat(s)),b(e)&&(i=parseFloat(e)),b(u)?u:a?0:z.min.apply(z,t)),s=b(n)?n:z.max.apply(z,t),e=l,u=s,a=o,c=i,p=[],h=0<c?(r=e,u):(h=v(u-e,!1),c=v(h/(a-1),!0),r=y.floor(e/c)*c,y.ceil(u/c)*c),d=y.ceil((h-r)/c),f=0;f<=d;f++)p.push(r+f*c);return a=p.slice().reverse(),{min:r,max:a[0],scale:p,reverseScale:a,step:c}}var C="--background-";function m(t,e){var o,n,a,l,i,s,u,c,p,h,r=t.points,d=t.pointRadius,f=t.pointStyle,y=t.lineSize,t=t.isArea,v=e.columnSize,b=e.yMin,m=e.yMax,g=e.chartHeight,e=e.startPosition;return n=t?0:6,a=[],l=[],i={},s=v/2,c=e,p=(u=e=0)<(d=0<=(d=parseFloat(d))?d:n),h=t||!(parseFloat(y)<=0),p&&(u=t?0:d,c+=e=d),r.forEach(function(t,e){var n,i,r,t=_(t,b,m,0,g)+u;p&&(r=c+s*(2*e-1),a.push("var(--point)"),l.push(x(r)+" "+x(-t))),h&&0<e&&(i=S(r=o,n=t,v),e=c+v*(e-1),r=(r+n)/2,a.push("linear-gradient(".concat(i,", var(--line))")),l.push(x(e)+" "+x(-r))),o=t}),(p||h)&&(i[C+"image"]=a.join(", "),i[C+"position"]=l.join(", "),i[C+"size"]=x(v)+" 200%"),p&&("circle-dot"===f?i["--dot-ratio"]=2.5:"circle"===f&&(i["--dot-radius"]="0px"),d!==n&&(i["--point-radius"]=x(d)),i["--_layer-padd-x"]=x(e),i["--_layer-padd-y"]=x(u)),i}var A="--background-",E="60%";function R(t){return(R="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function L(t,e){var n=t.points,r=t.isScatter,o=t.scatterRadius,t=t.scatterShape,a=e.xMin,l=e.xMax,s=e.yMin,u=e.yMax,c=e.chartHeight,p=e.chartWidth,h=e.startPosition,d=[],f=[],y=[],e={};return n.forEach(function(t){var e,n,i;null!=t&&"object"===R(t)&&b(t.x)&&b(t.y)&&(n=_(parseFloat(t.x),a,l,0,p),i=_(parseFloat(t.y),s,u,0,c),t=parseFloat(t.r)||10,e=2*(t=r?o:t),n=h+n-t,i=c-i-t,d.push("var(--point)"),f.push(x(e)+" "+x(e)),y.push(x(n)+" "+x(i)))}),r&&"plus"===t&&n.length%2==0&&y.push(y[y.length-1]),e["--background-image"]=d.join(", "),r||(e["--background-size"]=f.join(", ")),e["--background-position"]=y.join(", "),e}var W=["circle","square","triangle","plus"];var k={line:m,bar:function(t,e){var n=t.points,i=t.barSize,r=t.barColor,o=e.yMin,a=e.yMax,l=e.chartHeight,s=e.columnSize,t=e.startPosition,u=[],c=[],p=[],e={},h=s/2,d=function t(e,n){var i=parseFloat(e);if("string"==typeof e&&e.match(/%$/))return i/100*n;if(0<i)return i;return t(E,n)}(i,s),f=t-h-d/2;return n.forEach(function(t,e){var n,t=_(t,o,a,0,l),i=(0<=t||(t=0),s*e+f);u.push((e=e,r instanceof Array?((n=r.length)<=e&&(e%=n),"linear-gradient(".concat(r[e]," 100%, transparent)")):"var(--bar)")),c.push(x(d)+" "+x(t)),p.push(x(i))}),e[A+"image"]=u.join(", "),e[A+"size"]=c.join(", "),e[A+"position-x"]=p.join(", "),e},area:function(t,e){return void 0===t.pointRadius&&(t.pointRadius=0),t.isArea=!0,new m(t,e)},bubble:L,scatter:function(t,e){var n=t.scatterRadius,i=t.scatterShape;return null==n&&(t.scatterRadius=4),W.includes(i)&&(t.scatterImage="var(--point-".concat(i,")")),t.isScatter=!0,new L(t,e)}},H=["type","barSize","pointStyle","pointRadius","scatterShape"];function N(t,e){var t=Object.assign({},t),n=t.type,n=k[n];n&&(n=new n(t,e),e=g(t,"--",H),this.styles=Object.assign({},e,n))}var T="SingleDivUI.Chart",O="sd-",P="sd-graph";function e(t,e){var n=t,i="";if("string"==typeof t&&(n=u(t),i=t),l(n)){n.offsetParent||console.warn(T+": Element seems not visible in the DOM, this might cause the styling issues!\n\nTo resolve that call the refresh method when the Chart become visible in the DOM. \n",n);var r=n[T];if(r)return r.update(e),r;i=i||(n.id?"#"+n.id:(r=this._uniKey="data-sd-"+Math.random().toString(16).slice(2,10),n.setAttribute(r,""),"[".concat(r,"]"))),this.control=n,this.selector=i,(n[T]=this).options=o({},this.defaults),o(this.options,e),this._init()}else console.error(T+": Element(".concat(t,") is not available!"))}e.prototype={PLUGIN_NAME:T,version:"2.0.0",options:{},control:null,styleEle:null,defaults:{type:null,data:{labels:[],series:{points:[],lineColor:null,lineSize:null,pointRadius:null,pointColor:null,pointBorderWidth:null,pointBorderColor:null,pointStyle:null,pointInnerColor:null,dotRadius:null,barSize:null,barColor:null,areaColor:null,bubbleColor:null,bubbleBorderColor:null,bubbleBorderWidth:null,scatterColor:null,scatterRadius:null,scatterShape:null}},graphSettings:{labelFontSize:"11px",labelFontFamily:"Verdana, Arial, sans-serif",gridLineColor:null,gridLineSize:null,axisLineColor:null,axisLineSize:null,labelColor:null,labelDistance:null,xAxis:{verticalLabel:!1,padding:[0,0],labelFormatter:null,maxTicks:10,startFromZero:!1,customScale:{min:null,max:null,interval:null}},yAxis:{maxTicks:10,startFromZero:!1,labelFormatter:null,customScale:{min:null,max:null,interval:null}}},height:260,width:"100%",responsive:!0,stylesAppendTo:"head"},_init:function(){this._initialize(),this._render()},_initialize:function(){var e,n,t,i,r,o,a=this.control,l=this.options,s=l.type,u=l.width,c=l.height,l=l.responsive,p="sd-chart "+P;s&&(p+=" sd-"+s),e=s=a,n="add",(s=p)&&s.split(" ").forEach(function(t){return e.classList[n](t)}),h(a,u),d(a,c),l&&(this._tResizeFn||(this._tResizeFn=(t=this._onResize,i=300,r=this,o=!0,function(){o&&(o=!1,setTimeout(function(){o=!0,t.call(r)},i))})),window.addEventListener("resize",this._tResizeFn))},_render:function(){var t=this.control,e=this.options,n=e.type,i=e.data,r=e.graphSettings,r=void 0===r?{}:r,o=i.series,a=(o.type=n,t.clientHeight),t=this.chartWidth=t.clientWidth,i=i.labels,l=o.points,a=("bubble"!==n&&"scatter"!==n||(i=o.points.map(function(t){return t.x}),l=o.points.map(function(t){return t.y})),new f(a,t,i,l,r,n)),t=new N(o,a),i=this._generateStyles(a,t,n);this.styleEle=c(i,e.stylesAppendTo,this.styleEle,this.selector)},_generateStyles:function(t,e,n){var i={},r=this.selector+".",t=t.styles,e=e.styles,o=r+P,a=o+":after",l=o+":before",r=r+O+n;return i[o]=t.common,i[a]=t.x,i[l]=t.y,e&&(i[r]=e),i},_onResize:function(){var t=this.control;this.chartWidth!==t.clientWidth&&this.refresh()},update:function(t){t&&(o(this.options,t),this.refresh())},refresh:function(){this._clearAll(),this._init()},destroy:function(){this._clearAll(!0)},_clearAll:function(t){var e,n=this.control,i=(e=O,n.className=n.className.split(" ").filter(function(t){return!t.startsWith(e)}).join(" "),"inline"===this.options.stylesAppendTo?a(n,"style"):(h(n,"",!0),d(n,"",!0)),this.styleEle);(i||{}).innerHTML="",this._tResizeFn&&window.removeEventListener("resize",this._tResizeFn),t&&(i&&i.remove(),this.styleEle=null,a(n,this._uniKey),delete n[T])}},t.Chart=e,Object.defineProperty(t,"__esModule",{value:!0})});