Charts: add new Pie Chart

ChartsCSS · May 5, 2021 · 90ecdf8 · 90ecdf8
1 parent 5b4d0d6
commit 90ecdf8
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 1 deletion.
diff --git a/src/charts/_pie.scss b/src/charts/_pie.scss
@@ -10,7 +10,44 @@
       @include circle();
 
       tr {
-        @include visually-hidden();
+        th {
+          @include visually-hidden();
+        }
+
+        td {
+          display: flex;
+          justify-content: center;
+          border-radius: 50%;
+
+          @include position-fullwidth();
+
+          background: conic-gradient(
+            transparent 0 calc( 1turn * var( --start ) ),
+            var( --c, transparent ) calc( 1turn * var( --start, 0 ) ) calc( 1turn * var( --end ) ),
+            transparent calc( 1turn * var( --end ) ) 1turn
+          );
+
+          &::before{
+            content: "";
+            @include position-fullwidth();
+          }
+
+          &::after {
+            content: "";
+            width: 100%;
+          }
+
+          .data {
+            display: flex;
+            justify-content: center;
+            border-radius: 50%;
+
+            @include position-fullwidth();
+
+            transform: rotate( calc( 0.5turn * var( --start, 0 ) + 0.5turn * var( --end, 0 ) ) );
+          }
+        }
+
       }
     }
   }

diff --git a/src/components/_colors.scss b/src/components/_colors.scss
@@ -12,6 +12,11 @@
     &.line tbody tr td:nth-of-type(#{ $total-colors }n + #{ $i })::before {
       background: var(--color, var(--color-#{ $i }));
     }
+
+    &.pie tbody tr:nth-of-type(#{ $total-colors }n + #{ $i }) td,
+    &.pie.multiple tbody tr td:nth-of-type(#{ $total-colors }n + #{ $i }) {
+      --c: var(--color, var(--color-#{ $i }, transparent) );
+    }
   }
 
 }
diff --git a/src/general/_mixins.scss b/src/general/_mixins.scss
@@ -23,3 +23,13 @@
   border-radius: 50%;
   background-color: var(--chart-bg-color);
 }
+
+@mixin position-fullwidth {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}