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,87 @@
+full=100%
+half=50%
+html,body{
+    width: 100%;
+    height: 100%;
+}
+
+body{
+    margin: 0;
+    text-align center
+}
+
+.pie-chart{
+    position absolute
+    width 50vh
+    height 50vh
+    left 25vh
+    top 25vh
+}
+
+.wrapper
+    position relative
+    width full
+    height full
+
+.pie-part
+    width full
+    height half
+    position absolute
+
+.pie-part
+    .part-inner
+        position: absolute;
+        width: full
+        height: full
+        left: 0
+        top: 0
+        background-color: green;
+        border-top-right-radius: 50% 100%;
+        border-top-left-radius: 50% 100%;
+        -webkit-transform-origin: 50% 100%;
+        -moz-transform-origin: 50% 100%;
+        -ms-transform-origin: 50% 100%;
+        -o-transform-origin: 50% 100%;
+        transform-origin: 50% 100%;
+
+clipper{
+    overflow: hidden;
+    position: absolute;
+    left: 0;
+    top: 50%;
+    width: 100%;
+    height: 50%;
+}
+clipper-inner
+    left 0
+    top -100%
+
+transform()
+    -webkit-transform arguments
+    -moz-transform arguments
+    -ms-transform arguments
+    -o-transform arguments
+    transform arguments
+
+angles=(0 120 150 220)
+angles_sum=null
+colors= rgb(200, 50, 255) rgb(150, 100, 255) rgb(100, 150, 255) rgb(50, 200, 255)
+
+for count in 1..4
+    col=colors[(count - 1)]
+    angle=angles[(count - 1)]
+    if angles_sum is not defined
+        angles_sum=angle
+    else
+        angles_sum+=angle
+    .part-{count} 
+        .part-inner
+            background-color col
+            transform rotate(angle deg)
+            z-index count
+
+    if angles_sum>180
+        .part-{count}
+            @extend clipper
+            .part-inner
+                @extend clipper-inner