opencharts/charts/area/area.styl

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;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 ""
    .area
        /*
        width: {{=x_diff+"%"}};
        {{ if (count+1<it.points.length){ }}
            {{ if (y_diff<0){ }}
                {{ h=y1; }};
            {{ } }}
            {{ if (y_diff>0){ }}
                {{ 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