bendtherules/opencharts
1
0
Fork 0
mirror of https://github.com/bendtherules/opencharts.git synced 2026-08-19 00:33:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Workflow change

Browse Source
This commit is contained in:
bendtherules
2014-03-28 09:42:33 -07:00
parent e7f894ad9b
commit 24d1afffbd
9 changed files with 396 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
line/line-quirks.txt
+3
View File
@@ -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
+96
View File
@@ -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
+28
View File
@@ -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
+98
View File
@@ -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
+30
View File
@@ -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");