From 90ecdf861c77c456f8f1411c35777d2865131898 Mon Sep 17 00:00:00 2001
From: Rami Yushuvaev <r_a_m_i@hotmail.com>
Date: Wed, 5 May 2021 19:04:20 +0300
Subject: [PATCH] Charts: add new Pie Chart

---
 src/charts/_pie.scss        | 39 ++++++++++++++++++++++++++++++++++++-
 src/components/_colors.scss |  5 +++++
 src/general/_mixins.scss    | 10 ++++++++++
 3 files changed, 53 insertions(+), 1 deletion(-)

diff --git a/src/charts/_pie.scss b/src/charts/_pie.scss
index 56a5a98..d1b0668 100644
--- 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
index 538d58f..1474d11 100644
--- 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
index 5cbc94e..cb94089 100644
--- 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%;
+}