Workflow change

js/doT.min.js

@@ -0,0 +1,8 @@
+/* Laura Doktorova https://github.com/olado/doT */
+(function(){function o(){var a={"&":"&#38;","<":"&#60;",">":"&#62;",'"':"&#34;","'":"&#39;","/":"&#47;"},b=/&(?!#?\w+;)|<|>|"|'|\//g;return function(){return this?this.replace(b,function(c){return a[c]||c}):this}}function p(a,b,c){return(typeof b==="string"?b:b.toString()).replace(a.define||i,function(l,e,f,g){if(e.indexOf("def.")===0)e=e.substring(4);if(!(e in c))if(f===":"){a.defineParams&&g.replace(a.defineParams,function(n,h,d){c[e]={arg:h,text:d}});e in c||(c[e]=g)}else(new Function("def","def['"+
+e+"']="+g))(c);return""}).replace(a.use||i,function(l,e){if(a.useParams)e=e.replace(a.useParams,function(g,n,h,d){if(c[h]&&c[h].arg&&d){g=(h+":"+d).replace(/'|\\/g,"_");c.__exp=c.__exp||{};c.__exp[g]=c[h].text.replace(RegExp("(^|[^\\w$])"+c[h].arg+"([^\\w$])","g"),"$1"+d+"$2");return n+"def.__exp['"+g+"']"}});var f=(new Function("def","return "+e))(c);return f?p(a,f,c):f})}function m(a){return a.replace(/\\('|\\)/g,"$1").replace(/[\r\t\n]/g," ")}var j={version:"1.0.1",templateSettings:{evaluate:/\{\{([\s\S]+?(\}?)+)\}\}/g,
+interpolate:/\{\{=([\s\S]+?)\}\}/g,encode:/\{\{!([\s\S]+?)\}\}/g,use:/\{\{#([\s\S]+?)\}\}/g,useParams:/(^|[^\w$])def(?:\.|\[[\'\"])([\w$\.]+)(?:[\'\"]\])?\s*\:\s*([\w$\.]+|\"[^\"]+\"|\'[^\']+\'|\{[^\}]+\})/g,define:/\{\{##\s*([\w\.$]+)\s*(\:|=)([\s\S]+?)#\}\}/g,defineParams:/^\s*([\w$]+):([\s\S]+)/,conditional:/\{\{\?(\?)?\s*([\s\S]*?)\s*\}\}/g,iterate:/\{\{~\s*(?:\}\}|([\s\S]+?)\s*\:\s*([\w$]+)\s*(?:\:\s*([\w$]+))?\s*\}\})/g,varname:"it",strip:true,append:true,selfcontained:false},template:undefined,
+compile:undefined},q;if(typeof module!=="undefined"&&module.exports)module.exports=j;else if(typeof define==="function"&&define.amd)define(function(){return j});else{q=function(){return this||(0,eval)("this")}();q.doT=j}String.prototype.encodeHTML=o();var r={append:{start:"'+(",end:")+'",endencode:"||'').toString().encodeHTML()+'"},split:{start:"';out+=(",end:");out+='",endencode:"||'').toString().encodeHTML();out+='"}},i=/$^/;j.template=function(a,b,c){b=b||j.templateSettings;var l=b.append?r.append:
+r.split,e,f=0,g;a=b.use||b.define?p(b,a,c||{}):a;a=("var out='"+(b.strip?a.replace(/(^|\r|\n)\t* +| +\t*(\r|\n|$)/g," ").replace(/\r|\n|\t|\/\*[\s\S]*?\*\//g,""):a).replace(/'|\\/g,"\\$&").replace(b.interpolate||i,function(h,d){return l.start+m(d)+l.end}).replace(b.encode||i,function(h,d){e=true;return l.start+m(d)+l.endencode}).replace(b.conditional||i,function(h,d,k){return d?k?"';}else if("+m(k)+"){out+='":"';}else{out+='":k?"';if("+m(k)+"){out+='":"';}out+='"}).replace(b.iterate||i,function(h,
+d,k,s){if(!d)return"';} } out+='";f+=1;g=s||"i"+f;d=m(d);return"';var arr"+f+"="+d+";if(arr"+f+"){var "+k+","+g+"=-1,l"+f+"=arr"+f+".length-1;while("+g+"<l"+f+"){"+k+"=arr"+f+"["+g+"+=1];out+='"}).replace(b.evaluate||i,function(h,d){return"';"+m(d)+"out+='"})+"';return out;").replace(/\n/g,"\\n").replace(/\t/g,"\\t").replace(/\r/g,"\\r").replace(/(\s|;|\}|^|\{)out\+='';/g,"$1").replace(/\+''/g,"").replace(/(\s|;|\}|^|\{)out\+=''\+/g,"$1out+=");if(e&&b.selfcontained)a="String.prototype.encodeHTML=("+
+o.toString()+"());"+a;try{return new Function(b.varname,a)}catch(n){typeof console!=="undefined"&&console.log("Could not create a template function: "+a);throw n;}};j.compile=function(a,b){return j.template(a,null,b)}})();

js/dynamic_load.js

@@ -0,0 +1,117 @@
+function load_html_css_js(fileType, fileName, contextDict, targetDiv)
+{
+    if (fileType.toLowerCase() == "css")
+    {
+        tmp_ele = document.createElement("style");
+        append_to("head", tmp_ele);
+    }
+    else if (fileType.toLowerCase() == "js")
+    {
+        tmp_ele = document.createElement("script");
+        append_to("head", tmp_ele);
+    }
+    else if (fileType.toLowerCase() == "html")
+    {
+        if (!targetDiv)
+        {
+            tmp_body = document.getElementsByTagName("body")[0];
+            targetDiv = tmp_body;
+
+            console.log(document.getElementsByTagName("body")[0]);
+        }
+        tmp_ele = targetDiv;
+    }
+    else
+    {
+        //raise error
+    }
+
+    targetDiv = tmp_ele;
+
+    function func_success(xhr)
+    {
+        load_template(targetDiv, remove_multi_comment(xhr.responseText), contextDict);
+    }
+    do_xhr(fileName, func_success);
+
+    return tmp_ele;
+}
+
+function append_to(tagName, tmp_ele)
+{
+    tmp_head = document.getElementsByTagName(tagName)[0];
+    tmp_head.appendChild(tmp_ele);
+}
+
+function load_template(targetDiv, fileText, contextDict)
+{
+    func_template = doT.template(fileText);
+    targetDiv.innerHTML = func_template(contextDict);
+    console.log(targetDiv.innerHTML);
+    // think about returning func_template for efficient drawing of multiple similar graphs
+}
+// regexp to remove multi-line comment -> /\/\*(.*)\*\//g
+// only /* or */ -> (\/\*)|(\*\/)
+function remove_multi_comment(tmp_str)
+{
+    regexp_multi_comment = /(\/\*)|(\*\/)/g; // compile and re-use it
+    replaced_str = tmp_str.replace(regexp_multi_comment, "");
+    return replaced_str;
+}
+
+function do_xhr(fileName, func_success)
+{
+    var xhr = createXHR();
+    xhr.onreadystatechange = function ()
+    {
+        if (xhr.readyState == 4)
+        {
+            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304)
+            {
+                func_success(xhr);
+            }
+            else
+            {
+                alert("Request was unsuccessful: " + xhr.status);
+            }
+        }
+    };
+    xhr.open("get", fileName, true);
+    xhr.send(null);
+}
+
+function createXHR()
+{
+    if (typeof XMLHttpRequest != "undefined")
+    {
+        return new XMLHttpRequest();
+    }
+    else if (typeof ActiveXObject != "undefined")
+    {
+        if (typeof arguments.callee.activeXString != "string")
+        {
+            var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"],
+                i, len;
+
+            for (i = 0, len = versions.length; i < len; i++)
+            {
+                try
+                {
+                    new ActiveXObject(versions[i]);
+                    arguments.callee.activeXString = versions[i];
+                    break;
+                }
+                catch (ex)
+                {
+                    //skip
+                }
+            }
+        }
+
+        return new ActiveXObject(arguments.callee.activeXString);
+    }
+    else
+    {
+        throw new Error("No XHR object available.");
+    }
+}

line/line-quirks.txt

@@ -0,0 +1,3 @@
+Needs proper unit detection
+% coverter -> Makes x% to (100-x)%
+think about how to know if document is loaded or defer it to onloaded

line/line.css

@@ -0,0 +1,96 @@
+* {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.chart {
+  width: 50vw;
+  height: 50vh;
+  margin: 25vh 25vw;
+  background-color: #90ee90;
+  position: relative;
+}
+.chart-container {
+  width: 100%;
+  height: 100%;
+}
+.axis {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 4;
+}
+.axis .axis-x,
+.axis .axis-y {
+  position: absolute;
+  background-color: #d3d3d3;
+}
+.axis .axis-y {
+  width: 1em;
+  height: 100%;
+}
+.axis .axis-y .axis-line {
+  left: 50%;
+}
+.axis .axis-y .axis-line .axis-line-container {
+  margin: 0 -0.125em;
+  height: 100%;
+  width: 0.25em;
+}
+.axis .axis-x {
+  height: 1em;
+  width: 100%;
+  bottom: 0;
+}
+.axis .axis-x .axis-line {
+  top: 50%;
+}
+.axis .axis-x .axis-line .axis-line-container {
+  margin: -0.125em 0;
+  height: 0.25em;
+  width: 100%;
+}
+.axis-line {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 5;
+}
+.axis-line-container {
+  background-color: #000;
+}
+.scene {
+  position: absolute;
+  z-index: 1;
+  background-color: #008000;
+  width: 100%;
+  height: 100%;
+  padding-left: 1em;
+  padding-bottom: 1em;
+}
+.scene .scene-container {
+  width: 100%;
+  height: 100%;
+  background-color: #add8e6;
+}
+.line-part {
+  background-color: #008000;
+  position: absolute;
+}
+/*{{ console.log(it.points.length); }}*/
+/*{{ for(count=0;count<it.points.length;count++){ }}*/
+.part-/*{{= count+1}}*/ {
+/* top: {{=it.points[count][0]}};
+       left: {{=it.points[count][1]}}; */
+  junk: "";
+}
+/*{{ } }}*/
+.line-inner {
+  position: absolute;
+/*left :-{{=it.point_radius}};*/
+/*top :-{{=it.point_radius}};*/
+/*width  :{{= Number(it.point_radius.slice(0,it.point_radius.length-2))*2 +it.point_radius.slice(it.point_radius.length-2) }};*/
+/*height  :{{= Number(it.point_radius.slice(0,it.point_radius.length-2))*2 +it.point_radius.slice(it.point_radius.length-2) }};*/
+  border-radius: 50% 50%;
+  background-color: #008000;
+}

line/line.html

@@ -0,0 +1,28 @@
+
+<div class="chart">
+    <div class="chart-container">
+        <div class="axis">
+            <div class="axis-y">
+                <div class="axis-line">
+                    <div class="axis-line-container"></div>
+                </div>
+            </div>
+            <div class="axis-x">
+                <div class="axis-line">
+                    <div class="axis-line-container"></div>
+                </div>
+            </div>
+        </div>
+        /*{{ if (it.points.length){ }}*/
+        <div class="scene">
+            <div class="scene-container">
+                /*{{ for (count=0;count<it.points.length;count++){ }}*/
+                <div class="line-part part-{{= count+1 }}">
+                    <div class="line-inner"></div>
+                </div>
+                /*{{ } }}*/
+        /*{{ } }}*/
+            </div>
+        </div>
+    </div>
+</div>

line/line.styl

@@ -0,0 +1,98 @@
+full=100%
+half=50%
+*
+    -webkit-box-sizing border-box
+    -moz-box-sizing border-box
+    box-sizing border-box
+
+.chart
+    width 50vw
+    height 50vh
+    margin 25vh 25vw
+    background-color lightgreen
+    position relative
+
+.chart-container
+    width full
+    height full
+
+axis-thick=1em
+axis-line-thick=.25em
+.axis
+    width full
+    height full
+    position absolute
+    z-index 4
+    
+    .axis-x
+    .axis-y
+        position absolute
+        background-color lightgray
+
+    .axis-y
+        width axis-thick
+        height full
+
+        .axis-line
+            left half
+
+            .axis-line-container
+                margin 0 -0.5*axis-line-thick
+                height full
+                width axis-line-thick
+
+
+    .axis-x
+        height axis-thick
+        width full
+        bottom 0
+
+        .axis-line
+            top 50%
+
+            .axis-line-container
+                margin -0.5*axis-line-thick 0
+                height axis-line-thick
+                width full
+
+.axis-line
+    width full
+    height full
+    position absolute
+    z-index 5
+.axis-line-container
+    background-color black
+
+.scene
+    position absolute
+    z-index 1
+    background-color green
+    width full
+    height full
+    padding-left axis-thick
+    padding-bottom axis-thick
+
+    .scene-container
+        width full
+        height full
+        background-color lightblue
+
+.line-part
+    background-color green
+    position absolute
+/*{{ console.log(it.points.length); }}*/
+/*{{ for(count=0;count<it.points.length;count++){ }}*/
+.part-/*{{= count+1}}*/
+    /* top: {{=it.points[count][0]}};
+       left: {{=it.points[count][1]}}; */
+    junk ""
+/*{{ } }}*/
+
+.line-inner
+    position absolute
+    /*left :-{{=it.point_radius}};*/
+    /*top :-{{=it.point_radius}};*/
+    /*width  :{{= Number(it.point_radius.slice(0,it.point_radius.length-2))*2 +it.point_radius.slice(it.point_radius.length-2) }};*/
+    /*height  :{{= Number(it.point_radius.slice(0,it.point_radius.length-2))*2 +it.point_radius.slice(it.point_radius.length-2) }};*/
+    border-radius 50% 50%
+    background-color green

line/loader_line.js

@@ -0,0 +1,30 @@
+// document.addEventListener("load", load_em_all);
+
+function load_em_all()
+{
+    load_html_css_js("html", "./line/line.html",
+    {
+        "points": [
+            ["10%", "10%"],
+            ["30%", "30%"],
+            ["60%", "60%"],
+            ["80%", "80%"],
+            ["50%", "50%"]
+        ],
+        "point_radius": "10px"
+    });
+    load_html_css_js("css", "./line/line.css",
+    {
+        "points": [
+            ["10%", "10%"],
+            ["30%", "30%"],
+            ["60%", "60%"],
+            ["80%", "80%"],
+            ["50%", "50%"]
+        ],
+        "point_radius": "10px"
+    });
+}
+
+load_em_all();
+console.log("Loaded stuffs");

loader.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Load any graph</title>
+
+    <script src="js/dynamic_load.js" type="text/javascript" charset="utf-8" ></script>
+    <script src="js/doT.min.js" type="text/javascript" charset="utf-8" ></script>
+    <script src="/line/loader_line.js" type="text/javascript" charset="utf-8" ></script>
+</head>
+<body>
+    
+</body>
+</html>

todo.txt

@@ -1,3 +1,5 @@
+** use jade for html templating **
+
 (responsive and animatable by design)
 (with custom width, color, border-radius, font, intelligent labels)
 bar charts (hor,ver)