Line + Area chart done, directory re-arranged

2026-08-18 13:52:49 +00:00 · 2014-03-29 22:10:11 -07:00
parent 24d1afffbd
commit d67252f045
27 changed files with 1056 additions and 233 deletions
@@ -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<it.points.length;count++){ }}*/
+.part-/*{{= count+1}}*/
+    /* 
+    left: {{=it.points[count][0]}};
+    top: {{=it.points[count][1]}};
+    */
+    junk ""
+    .line-inner
+        /*
+        {{ if (count+1<it.points.length){ }}
+        {{ 
+            sqr=function(numb){return Math.pow(numb,2)};
+            p1=p[count];
+            p2=p[count+1];
+            x2=Number(p2[0].slice(0,p2[0].length-1));
+            x1=Number(p1[0].slice(0,p1[0].length-1));
+            y2=100-Number(p2[1].slice(0,p2[1].length-1));
+            y1=100-Number(p1[1].slice(0,p1[1].length-1));
+            x_diff=(x2-x1);
+            y_diff=(y2-y1);
+            hypotenuse=Math.sqrt(sqr(x_diff)+sqr(y_diff));
+            rot_angle= -180/Math.PI*Math.atan2(y_diff,x_diff)+"deg";
+         }}
+         width: {{= hypotenuse+"%" }} ; 
+         -webkit-transform: rotate({{= rot_angle }});
+         -moz-transform: rotate({{= rot_angle }});
+         -ms-transform: rotate({{= rot_angle }});
+         -o-transform: rotate({{= rot_angle }});
+         transform: rotate({{= rot_angle }});
+        */
+        /*{{ } }}*/
+        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