diff --git a/charts/area/area-quirks.txt b/charts/area/area-quirks.txt new file mode 100644 index 0000000..22f024d --- /dev/null +++ b/charts/area/area-quirks.txt @@ -0,0 +1 @@ +Same as line-quirks \ No newline at end of file diff --git a/charts/area/area.css b/charts/area/area.css new file mode 100644 index 0000000..70092ad --- /dev/null +++ b/charts/area/area.css @@ -0,0 +1,226 @@ +* { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +html, +body { + width: 100%; + height: 100%; +} +body { + margin: 0; + padding: 0.1px; +} +.chart { + width: 50vh; + height: 50vh; + margin: 25vh 25vw; + background-color: #90ee90; + position: relative; +} +.chart-container { + width: 100%; + height: 100%; +} +.axis { + width: 100%; + height: 100%; + position: absolute; +} +.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; + width: 100%; + height: 100%; + padding-left: 1em; + padding-bottom: 1em; +} +.scene .scene-container { + width: 100%; + height: 100%; + background-color: #add8e6; + position: relative; + overflow: hidden; +} +.line-inner { + background-color: #008000; + position: absolute; + -webkit-transform-origin: left center; + -moz-transform-origin: left center; + -ms-transform-origin: left center; + -o-transform-origin: left center; + transform-origin: left center; +} +.line-part { + position: absolute; + width: 100%; + height: 100%; +} +.area { + position: absolute; + overflow: hidden; +} +.area .area-rotated { + -webkit-transform-origin: left top; + -moz-transform-origin: left top; + -ms-transform-origin: left top; + -o-transform-origin: left top; + transform-origin: left top; +} +.area .area-rotated, +.area .area-lower-block { + position: absolute; + background-color: #389ab9; +} +.area .area-lower-block { + width: 100%; +} +/* {{p=it.points;}} */ +/*{{ for(count=0;count0){ }} + {{ h=y2; }}; + top: {{= -y_diff+"%" }}; + {{ } }} + height: {{= h+"%" }}; + {{ } }} + */ + junk: ""; +} +.part-/*{{= count+1}}*/ .area .area-rotated { +/* + width: {{= 100*hypotenuse/x_diff+"%" }}; + height: {{= Math.abs(y_diff)*100/h+"%" }}; + -webkit-transform: rotate( {{= rot_angle }} ); + -moz-transform: rotate( {{= rot_angle }} ); + -ms-transform: rotate( {{= rot_angle }} ); + -o-transform: rotate( {{= rot_angle }} ); + transform: rotate( {{= rot_angle }} ); + + {{ if (y_diff<0){ }} + // do nthng + {{ } }} + {{ if (y_diff>0){ }} + + top : {{= 100*Math.abs(y_diff)/y2+"%" }}; + {{ } }} + */ + junk: ""; +} +.part-/*{{= count+1}}*/ .area .area-lower-block { +/* + {{ if (y_diff>0){ }} + height: {{= (100*y1/y2)+"%" }}; + top : {{= 100*Math.abs(y_diff)/y2+"%" }}; + {{ } }} + {{ if (y_diff<0){ }} + height: {{= (100*y2/y1)+"%" }}; + top: {{= Math.abs(y_diff)*100/y1+"%" }}; + {{ } }} + */ + junk: ""; +} +/* {{ } }} */ +.non-area { +/* + top: {{= -it.point_radius.slice(0,it.point_radius.length-2)+"px" }}; + */ + position: relative; +} +.line-inner { +/* + {{ w= Number(it.point_radius.slice(0,it.point_radius.length-2))*2 +it.point_radius.slice(it.point_radius.length-2); }} + + height: {{= w }}; + */ + junk: ""; +} +.point-inner { + position: absolute; +/* + left :-{{= it.point_radius }}; + width:{{= w }}; + height :{{= w }}; + */ + border-radius: 50% 50%; + background-color: #4a29f8; +} diff --git a/charts/area/area.html b/charts/area/area.html new file mode 100644 index 0000000..06930dc --- /dev/null +++ b/charts/area/area.html @@ -0,0 +1,37 @@ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ /*{{ if (it.points.length){ }}*/ +
+
+ /*{{ for (count=0;count +
+
+
+
+
+ /*{{ if (count+1
+ /*{{ }; }} +
+
+
+ /*{{ }; }}*/ + /*{{ }; }}*/ +
+
+ + diff --git a/charts/area/area.styl b/charts/area/area.styl new file mode 100644 index 0000000..e1d5bfe --- /dev/null +++ b/charts/area/area.styl @@ -0,0 +1,229 @@ +full=100% +half=50% +* + -webkit-box-sizing border-box + -moz-box-sizing border-box + box-sizing border-box + +html,body + width full + height full + +body + margin 0 + padding .1px +.chart + width 50vh + 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 + position relative + overflow hidden + +.line-inner + background-color green + position absolute + + -webkit-transform-origin : left center; + -moz-transform-origin : left center; + -ms-transform-origin : left center; + -o-transform-origin : left center; + transform-origin : left center; + +.line-part + position absolute + width: 100%; + height: 100%; + +.area + // background-color darken(lightblue,10%) + position absolute + overflow hidden + + .area-rotated + -webkit-transform-origin : left top; + -moz-transform-origin : left top; + -ms-transform-origin : left top; + -o-transform-origin : left top; + transform-origin : left top; + + .area-rotated, .area-lower-block + position absolute + background-color darken(lightblue,40%) + + .area-lower-block + width: 100%; +/* {{p=it.points;}} */ +/*{{ for(count=0;count0){ }} + {{ h=y2; }}; + top: {{= -y_diff+"%" }}; + {{ } }} + height: {{= h+"%" }}; + {{ } }} + */ + junk "" + + .area-rotated + /* + width: {{= 100*hypotenuse/x_diff+"%" }}; + height: {{= Math.abs(y_diff)*100/h+"%" }}; + -webkit-transform: rotate( {{= rot_angle }} ); + -moz-transform: rotate( {{= rot_angle }} ); + -ms-transform: rotate( {{= rot_angle }} ); + -o-transform: rotate( {{= rot_angle }} ); + transform: rotate( {{= rot_angle }} ); + + {{ if (y_diff<0){ }} + // do nthng + {{ } }} + {{ if (y_diff>0){ }} + + top : {{= 100*Math.abs(y_diff)/y2+"%" }}; + {{ } }} + */ + junk "" + + .area-lower-block + /* + {{ if (y_diff>0){ }} + height: {{= (100*y1/y2)+"%" }}; + top : {{= 100*Math.abs(y_diff)/y2+"%" }}; + {{ } }} + {{ if (y_diff<0){ }} + height: {{= (100*y2/y1)+"%" }}; + top: {{= Math.abs(y_diff)*100/y1+"%" }}; + {{ } }} + */ + junk "" +/* {{ } }} */ + +.non-area + /* + top: {{= -it.point_radius.slice(0,it.point_radius.length-2)+"px" }}; + */ + position relative + + +.line-inner + /* + {{ w= Number(it.point_radius.slice(0,it.point_radius.length-2))*2 +it.point_radius.slice(it.point_radius.length-2); }} + + height: {{= w }}; + */ + junk "" + + +.point-inner + position absolute + /* + left :-{{= it.point_radius }}; + width:{{= w }}; + height :{{= w }}; + */ + border-radius 50% 50% + background-color #4A29F8 diff --git a/charts/area/loader.html b/charts/area/loader.html new file mode 100644 index 0000000..7f90fd3 --- /dev/null +++ b/charts/area/loader.html @@ -0,0 +1,14 @@ + + + + + Area Graph + + + + + + + + + diff --git a/charts/area/loader_area.js b/charts/area/loader_area.js new file mode 100644 index 0000000..53d303a --- /dev/null +++ b/charts/area/loader_area.js @@ -0,0 +1,26 @@ +addEventListener("load", load_em_all); + +points = [ + ["0%", "20%"], + ["20%", "60%"], + ["45%", "45%"], + ["55%", "30%"], + ["85%", "80%"] +]; + +function load_em_all() +{ + load_html_css_js("html", "area.html", + { + "points": points, + "point_radius": "10px" + }); + load_html_css_js("css", "area.css", + { + "points": points, + "point_radius": "5px" + }); +} + +// load_em_all(); +// console.log("Loaded stuffs"); diff --git a/bar_hor/bar_hor.css b/charts/bar_hor/bar_hor.css similarity index 100% rename from bar_hor/bar_hor.css rename to charts/bar_hor/bar_hor.css diff --git a/bar_hor/bar_hor.html b/charts/bar_hor/bar_hor.html similarity index 100% rename from bar_hor/bar_hor.html rename to charts/bar_hor/bar_hor.html diff --git a/bar_hor/bar_hor.styl b/charts/bar_hor/bar_hor.styl similarity index 100% rename from bar_hor/bar_hor.styl rename to charts/bar_hor/bar_hor.styl diff --git a/bar_ver/bar_ver.css b/charts/bar_ver/bar_ver.css similarity index 100% rename from bar_ver/bar_ver.css rename to charts/bar_ver/bar_ver.css diff --git a/bar_ver/bar_ver.html b/charts/bar_ver/bar_ver.html similarity index 100% rename from bar_ver/bar_ver.html rename to charts/bar_ver/bar_ver.html diff --git a/bar_ver/bar_ver.styl b/charts/bar_ver/bar_ver.styl similarity index 100% rename from bar_ver/bar_ver.styl rename to charts/bar_ver/bar_ver.styl diff --git a/charts/line/line-quirks.txt b/charts/line/line-quirks.txt new file mode 100644 index 0000000..67fe051 --- /dev/null +++ b/charts/line/line-quirks.txt @@ -0,0 +1,18 @@ +Needs proper unit detection +% coverter -> Makes x% to (100-x)% +think about how to know if document is loaded or defer it to onloaded + +If responsive, how to get angle? +Take care of last dot + +think why margin-left is not needed +think about making two css (with script) and passing div as input +** make .styl conformant with new html structure ** + +To make containing area graph +------------------------------ +make area below- outer bigger rect as width-height with overflow:none, inner -> rotated (diff height) rect + inner smaller rect + _ +/_| -> inner rotated diff height +|_| -> inner smaller + total containing rect -> outer bigger rect diff --git a/charts/line/line.css b/charts/line/line.css new file mode 100644 index 0000000..bfb9e6a --- /dev/null +++ b/charts/line/line.css @@ -0,0 +1,158 @@ +* { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +html, +body { + width: 100%; + height: 100%; +} +body { + margin: 0; + padding: 0.1px; +} +.chart { + width: 50vh; + height: 50vh; + margin: 25vh 25vw; + background-color: #90ee90; + position: relative; +} +.chart-container { + width: 100%; + height: 100%; +} +.axis { + width: 100%; + height: 100%; + position: absolute; +} +.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; + width: 100%; + height: 100%; + padding-left: 1em; + padding-bottom: 1em; +} +.scene .scene-container { + width: 100%; + height: 100%; + background-color: #add8e6; + position: relative; + overflow: hidden; +} +.line-inner { + background-color: #008000; + position: absolute; + -webkit-transform-origin: left center; + -moz-transform-origin: left center; + -ms-transform-origin: left center; + -o-transform-origin: left center; + transform-origin: left center; +} +.line-part { + position: absolute; + width: 100%; + height: 100%; +} +/* {{p=it.points;}} */ +/*{{ for(count=0;count /*{{ for (count=0;count -
+
+ /*{{ if (count+1
+ /*{{ }; }} +
+ - /*{{ } }}*/ - /*{{ } }}*/ + /*{{ }; }}*/ + /*{{ }; }}*/ diff --git a/charts/line/line.styl b/charts/line/line.styl new file mode 100644 index 0000000..65b8bad --- /dev/null +++ b/charts/line/line.styl @@ -0,0 +1,165 @@ +full=100% +half=50% +* + -webkit-box-sizing border-box + -moz-box-sizing border-box + box-sizing border-box + +html,body + width full + height full + +body + margin 0 + padding .1px + +.chart + width 50vh + 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 + position relative + overflow hidden + +.line-inner + background-color green + position absolute + + -webkit-transform-origin : left center; + -moz-transform-origin : left center; + -ms-transform-origin : left center; + -o-transform-origin : left center; + transform-origin : left center; + +.line-part + position absolute + width: 100%; + height: 100%; + +/* {{p=it.points;}} */ +/*{{ for(count=0;count + + + + Line Graph + + + + + + + + + diff --git a/charts/line/loader_line.js b/charts/line/loader_line.js new file mode 100644 index 0000000..21e2618 --- /dev/null +++ b/charts/line/loader_line.js @@ -0,0 +1,26 @@ +addEventListener("load", load_em_all); + +points = [ + ["0%", "20%"], + ["20%", "60%"], + ["45%", "45%"], + ["55%", "30%"], + ["85%", "80%"] +]; + +function load_em_all() +{ + load_html_css_js("html", "line.html", + { + "points": points, + "point_radius": "10px" + }); + load_html_css_js("css", "line.css", + { + "points": points, + "point_radius": "5px" + }); +} + +// load_em_all(); +// console.log("Loaded stuffs"); diff --git a/pie/pie.css b/charts/pie/pie.css similarity index 100% rename from pie/pie.css rename to charts/pie/pie.css diff --git a/pie/pie.html b/charts/pie/pie.html similarity index 100% rename from pie/pie.html rename to charts/pie/pie.html diff --git a/pie/pie.styl b/charts/pie/pie.styl similarity index 100% rename from pie/pie.styl rename to charts/pie/pie.styl diff --git a/js/doT.js b/js/doT.js new file mode 100644 index 0000000..66c777a --- /dev/null +++ b/js/doT.js @@ -0,0 +1,131 @@ +// doT.js +// 2011, Laura Doktorova, https://github.com/olado/doT +// +// doT.js is an open source component of http://bebedo.com +// Licensed under the MIT license. +// +(function() { + "use strict"; + + var doT = { + version: '0.2.0', + templateSettings: { + evaluate: /\{\{([\s\S]+?)\}\}/g, + interpolate: /\{\{=([\s\S]+?)\}\}/g, + encode: /\{\{!([\s\S]+?)\}\}/g, + use: /\{\{#([\s\S]+?)\}\}/g, + define: /\{\{##\s*([\w\.$]+)\s*(\:|=)([\s\S]+?)#\}\}/g, + 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, //fn, compile template + compile: undefined //fn, for express + }; + + var global = (function(){ return this || (0,eval)('this'); }()); + + if (typeof module !== 'undefined' && module.exports) { + module.exports = doT; + } else if (typeof define === 'function' && define.amd) { + define(function(){return doT;}); + } else { + global.doT = doT; + } + + function encodeHTMLSource() { + var encodeHTMLRules = { "&": "&", "<": "<", ">": ">", '"': '"', "'": ''', "/": '/' }, + matchHTML = /&(?!#?\w+;)|<|>|"|'|\//g; + return function(code) { + return code ? code.toString().replace(matchHTML, function(m) {return encodeHTMLRules[m] || m;}) : code; + }; + } + global.encodeHTML = encodeHTMLSource(); + + var startend = { + append: { start: "'+(", end: ")+'", startencode: "'+encodeHTML(" }, + split: { start: "';out+=(", end: ");out+='", startencode: "';out+=encodeHTML("} + }, skip = /$^/; + + function resolveDefs(c, block, def) { + return ((typeof block === 'string') ? block : block.toString()) + .replace(c.define || skip, function(m, code, assign, value) { + if (code.indexOf('def.') === 0) { + code = code.substring(4); + } + if (!(code in def)) { + if (assign === ':') { + def[code]= value; + } else { + eval("def['"+code+"']=" + value); + } + } + return ''; + }) + .replace(c.use || skip, function(m, code) { + var v = eval(code); + return v ? resolveDefs(c, v, def) : v; + }); + } + + function unescape(code) { + return code.replace(/\\('|\\)/g, "$1").replace(/[\r\t\n]/g, ' '); + } + + doT.template = function(tmpl, c, def) { + c = c || doT.templateSettings; + var cse = c.append ? startend.append : startend.split, str, needhtmlencode, sid=0, indv; + + if (c.use || c.define) { + var olddef = global.def; global.def = def || {}; // workaround minifiers + str = resolveDefs(c, tmpl, global.def); + global.def = olddef; + } else str = tmpl; + + str = ("var out='" + (c.strip ? str.replace(/(^|\r|\n)\t* +| +\t*(\r|\n|$)/g,' ') + .replace(/\r|\n|\t|\/\*[\s\S]*?\*\//g,''): str) + .replace(/'|\\/g, '\\$&') + .replace(c.interpolate || skip, function(m, code) { + return cse.start + unescape(code) + cse.end; + }) + .replace(c.encode || skip, function(m, code) { + needhtmlencode = true; + return cse.startencode + unescape(code) + cse.end; + }) + .replace(c.conditional || skip, function(m, elsecase, code) { + return elsecase ? + (code ? "';}else if(" + unescape(code) + "){out+='" : "';}else{out+='") : + (code ? "';if(" + unescape(code) + "){out+='" : "';}out+='"); + }) + .replace(c.iterate || skip, function(m, iterate, vname, iname) { + if (!iterate) return "';} } out+='"; + sid+=1; indv=iname || "i"+sid; iterate=unescape(iterate); + return "';var arr"+sid+"="+iterate+";if(arr"+sid+"){var "+vname+","+indv+"=-1,l"+sid+"=arr"+sid+".length-1;while("+indv+" Makes x% to (100-x)% -think about how to know if document is loaded or defer it to onloaded diff --git a/line/line.css b/line/line.css deleted file mode 100644 index db3c79a..0000000 --- a/line/line.css +++ /dev/null @@ -1,96 +0,0 @@ -* { - -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 Load any graph - - - + + +