singledivui/dist/singledivui.min.js

Simple JavaScript Chart Library built with a single <div> element alone

/*!
 * SingleDivUI v1.0.1 | https://singledivui.com | (c) 2023 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 m(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 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 _(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 z(t,e,n,i,r){return(t-e)/(n-e)*(r-i)+i}function b(t,e,n){var i,r,o,l,a={};for(i in t){var s=t[i];r=i,l=o=void 0,o="string"==typeof(s=s)||"number"==typeof s,l=!n||!n.includes(r),o&&l&&(a[(e||"")+r.split(/(?=[A-Z])/).join("-").toLowerCase()]=x(s))}return a}function c(t,e,n){h(t,"width",e,n)}function p(t,e,n){h(t,"height",e,n)}function l(t){return t&&t instanceof Element}var a=document,s=function(t){return a.querySelector(t)};function u(t,e,n,i){console.log("selector",i);var r,t=function(t,e){var n,i="";for(n in t){var r=t[n];if(e){var o=s(n.split(":")[0]);for(l in r)o.style.setProperty(l,r[l])}else{for(var l in i+=n+" { ",r)i+=l+":"+r[l]+"; ";i+="} \n\n"}}return i}(t,"inline"===e);return t&&("string"==typeof e&&(e=s(e)),l(e)||(e=a.head),t=a.createTextNode(t),n||(r="",i&&(r="#sd-styles"+i.replace("#","-").replace(".","_"),i=a.querySelector(r))&&i.remove(),n=function(t){var t=t.split("#"),e=a.createElement(t[0]);t[1]&&(e.id=t[1]);return e}("style"+r)),e.appendChild(n),n.appendChild(t)),n}function g(t,e){var n=a.createElement("span");h(n,"font",e),n.innerHTML=t,a.body.appendChild(n);e=n.getBoundingClientRect().width;return n.remove(),e}function h(t,e,n,i){var r="string"==typeof n;i||r&&n!=+n||(n+="px"),t.style[e]=n}function f(e,n,t){return t&&t.split(" ").forEach(function(t){return e.classList[n](t)}),t}var F=Math,S=function(t){return!isNaN(parseFloat(t))},w="&#160;";function d(t,e,n,i,r,o){var l=r.xAxis,a=r.yAxis,a=void 0===a?{}:a,l=Object.assign({},r,void 0===l?{}:l),r=Object.assign({},r,a),a=l.padding,s=(a=a instanceof Array?a:[0,0])[0]||0,a=a[1]||0,o=(o&&(s+=1),function(t,e){var n,i,r,o=e.maxTicks,l=e.startFromZero,e=e.customScale,a=e.min,s=e.max,e=e.interval;S(a)&&(n=parseFloat(a));S(s)&&(i=parseFloat(s));S(e)&&(r=parseFloat(e));a=S(n)?n:l?0:F.min.apply(F,t),s=S(i)?i:F.max.apply(F,t);return function(t,e,n,i){for(var r,o=[],l=0<i?(r=t,e):(l=m(e-t,!1),i=m(l/(n-1),!0),r=y.floor(t/i)*i,y.ceil(e/i)*i),a=y.ceil((l-r)/i),s=0;s<=a;s++)o.push(r+s*i);return o.reverse(),{min:r,max:o[0],scale:o,step:i}}(a,s,o,r)}(i,r)),i=o.min,u=o.max,c=(o=o.scale).length-1,p=t/c,a=n.length-1+(s+a),e=e/a,e=.5*Math.floor(e/.5),o=C(o,r.labelFormatter),n=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=F.round(t/s);0<=e&&(a+=" ".repeat(e)),u=t-e*s}var l=x(i)+" "+r,a="",s=g(w,l),u=0;return t.forEach(function(t){var e=g(t,l),e=(n-e)/2;o(e),a+=t,o(e)}),a}(n=C(n,l.labelFormatter),e,l),s=e*s,h=(d=o,v=(h=r).labelFontSize,h=h.labelFontFamily,v=x(v)+" "+h,h=0<d.length?d[0]:"",f=1<d.length?d[1]:"",d=2<d.length?d[d.length-1]:"",F.max(g(h,v),g(f,v),g(d,v))),f={},d={},v=(d["--_y-label-width"]=x(h),f["--_x-label"]='"'.concat(n,'"'),d["--_y-label"]='"'.concat(o.join("\\a "),'"'),l.verticalLabel&&(f["--_x-label-height"]=x(e),f["--_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=b(i,"--"),l=b(t,"--x-"),a=b(e,"--y-");return Object.assign({},o,l,a)}(l,r));return v["--_row-size"]=x(p),v["--_column-size"]=x(e),v["--_start-position"]=x(s),{row:c,col:a,rowSize:p,columnSize:e,yMin:i,yMax:u,chartMax:t,startPosition:s,styles:{common:v,x:f,y:d}}}function C(t,e){return"function"==typeof e?t.map(e):t}var j="--background-";function v(t,e){var o,n,l,a,i,s,u,c,p,h,r=t.points,f=t.pointRadius,d=t.pointStyle,v=t.lineSize,t=t.isArea,y=e.columnSize,m=e.yMin,b=e.yMax,g=e.chartMax,e=e.startPosition;return n=t?0:6,l=[],a=[],i={},s=y/2,c=e,p=(u=e=0)<(f=0<=(f=parseFloat(f))?f:n),h=t||!(parseFloat(v)<=0),p&&(u=t?0:f,c+=e=f),r.forEach(function(t,e){var n,i,r,t=z(t,m,b,0,g)+u;p&&(r=c+s*(2*e-1),l.push("var(--point)"),a.push(x(r)+" "+x(-t))),h&&0<e&&(i=_(r=o,n=t,y),e=c+y*(e-1),r=(r+n)/2,l.push("linear-gradient(".concat(i,", var(--line))")),a.push(x(e)+" "+x(-r))),o=t}),(p||h)&&(i[j+"image"]=l.join(", "),i[j+"position"]=a.join(", "),i[j+"size"]=x(y)+" 200%"),p&&("circle-dot"===d?i["--dot-ratio"]=2.5:"circle"===d&&(i["--dot-radius"]="0px"),f!==n&&(i["--point-radius"]=x(f)),i["--_layer-padd-x"]=x(e),i["--_layer-padd-y"]=x(u)),i}var A="--background-",M="60%";var E={line:v,bar:function(t,e){var n=t.points,i=t.barSize,r=t.barColor,o=e.yMin,l=e.yMax,a=e.chartMax,s=e.columnSize,t=e.startPosition,u=[],c=[],p=[],e={},h=s/2,f=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(M,n)}(i,s),d=t-h-f/2;return n.forEach(function(t,e){var n,t=z(t,o,l,0,a),i=(0<=t||(t=0),s*e+d);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(f)+" "+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 v(t,e)}},L=["type","barSize","pointStyle","pointRadius"];function R(t,e){var t=Object.assign({},t),n=t.type,n=E[n];n&&(n=new n(t,e),e=b(t,"--",L),this.styles=Object.assign({},e,n))}var T="SingleDivUI.Chart",O="sd-",P=O+"graph";function e(t,e){var n=t,i="";if("string"==typeof t&&(n=s(t),i=t),l(n)){var r=n[T];if(r)return r.update(e),r;i||(i=(r=n.id)?"#"+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:"1.0.1",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}},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},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 t,e,n,i,r=this.control,o=this.options,l=o.type,a=o.width,s=o.height,o=o.responsive,u="sd-chart "+P;l&&(u+=" "+O+l),this.rootClasses=f(r,"add",u),c(r,a),p(r,s),o&&(this._tResizeFn||(this._tResizeFn=(t=this._onResize,e=300,n=this,i=!0,function(){i&&(i=!1,setTimeout(function(){i=!0,t.call(n)},e))})),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;o.type=n;t=new d(t.clientHeight,this.chartWidth=t.clientWidth,i.labels,o.points,r,"bar"===n),i=new R(o,t),r=this._generateStyles(t,i,n);this.styleEle=u(r,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,l=o+":after",a=o+":before",r=r+O+n;return i[o]=t.common,i[l]=t.x,i[a]=t.y,e&&(i[r]=e),i},_onResize:function(){var t=this.control;this.chartWidth!==t.clientWidth&&this.refresh()},update:function(t){o(this.options,t),this.refresh()},refresh:function(){this._clearAll(),this._init()},destroy:function(){this._clearAll(!0)},_clearAll:function(t){var e=this.control,n=(n=this.rootClasses,f(e,"remove",n),"inline"===this.options.stylesAppendTo?e.removeAttribute("style"):(c(e,"",!0),p(e,"",!0)),this.styleEle);(n||{}).innerHTML="",this._tResizeFn&&window.removeEventListener("resize",this._tResizeFn),t&&(n&&n.remove(),this.styleEle=null,delete e[T])}},t.Chart=e,Object.defineProperty(t,"__esModule",{value:!0})});