[HTML/CSS] pure css pie charts

- updating docs and adding refs to downloaded docs

pies/README.md

@@ -11,3 +11,15 @@ sass style.scss:pie-charts.css
 ```
 sass --watch style.scss:pie-charts.css
 ```
+
+## references 
+Les réferences indiquées dans le html sont disponibles en pdf et le code en mode txt.
+CF : 
+ - [doc monopart](./pure-CSS-pie-charts-monopart.pdf)
+ - [code monopart](./pure-CSS-pie-charts-monopart-code.txt)
+ - [doc multipart](./pure-CSS-pie-charts-multipart.pdf)
+ - [code multipart](./pure-CSS-pie-charts-multipart-code.txt)
+	
+	
+	
+	

pies/_global.scss

@@ -4,10 +4,17 @@
   right:5px;
   border-radius:5px;
   padding:10px;
-  background-color:lightblue;
+  background-color:rgb(216, 216, 216);
   a {
+    padding:5px;
+    margin:0;
+    border-right:solid 1px rgb(128,128,128);
+    display: inline-block;
+    &:last-child {
+      border-right:none;
+    }
     &[href],&:link,&:hover,&:focus,&:active {
-      color:darkblue;
+      color:rgb(78, 78, 78);
     }
   }
 }

pies/index.html

@@ -20,8 +20,7 @@
       <a href="https://codeburst.io/how-to-pure-css-pie-charts-w-css-variables-38287aea161e">
         <strong>HOW TO: Pure CSS pie charts w/ CSS variables</strong>
         <br/><span>Create customisable pie charts in ~30 lines of CSS</span>
-      </a>
+      </a><a href="https://www.freecodecamp.org/news/css-only-pie-chart/">
-      <a href="https://www.freecodecamp.org/news/css-only-pie-chart/">
         <strong>How to Create a Pie Chart Using Only CSS</strong>
         <br/><span>only one slice ;)</span>
       </a>

pies/pie-charts.css

@@ -4,9 +4,16 @@
   right: 5px;
   border-radius: 5px;
   padding: 10px;
-  background-color: lightblue; }
+  background-color: #d8d8d8; }
+  .references a {
+    padding: 5px;
+    margin: 0;
+    border-right: solid 1px gray;
+    display: inline-block; }
+    .references a:last-child {
+      border-right: none; }
     .references a[href], .references a:link, .references a:hover, .references a:focus, .references a:active {
-    color: darkblue; }
+      color: #4e4e4e; }
 
 :root {
   font-family: sans-serif; }

pies/pie-charts.css.map

@@ -1,6 +1,6 @@
 {
 "version": 3,
-"mappings": "AAAA,WAAY;EACV,QAAQ,EAAC,KAAK;EACd,MAAM,EAAC,GAAG;EACV,KAAK,EAAC,GAAG;EACT,aAAa,EAAC,GAAG;EACjB,OAAO,EAAC,IAAI;EACZ,gBAAgB,EAAC,SAAS;EAExB,uGAAwC;IACtC,KAAK,EAAC,QAAQ;;ACApB,KAAK;EACH,WAAW,EAAE,UAAU;;AAGzB,aAAa;EACX,aAAa,EAAE,IAAI;EACnB,QAAQ,EAAE,QAAQ;;AAGpB,IAAK;EACH,MAAM,EAnBE,KAAK;EAoBb,KAAK,EApBG,KAAK;EAqBb,gBAAgB,EApBV,OAAO;EAqBb,GAAG,EAhBS,GAAG;EAiBf,IAAI,EAjBQ,GAAG;EAkBf,YAAU;IACR,MAAM,EAAE,kBAAwC;IAChD,QAAQ,EAAE,QAAQ;IAClB,MAAM,EAAE,IAAI;IACZ,KAAK,EAAC,IAAI;;AAId,OAAQ;EACN,MAAM,EAAE,KAA+B;EACvC,KAAK,EAAG,KAA+B;EACvC,gBAAgB,EA9BN,OAAO",
+"mappings": "AAAA,WAAY;EACV,QAAQ,EAAC,KAAK;EACd,MAAM,EAAC,GAAG;EACV,KAAK,EAAC,GAAG;EACT,aAAa,EAAC,GAAG;EACjB,OAAO,EAAC,IAAI;EACZ,gBAAgB,EAAC,OAAkB;EACnC,aAAE;IACA,OAAO,EAAC,GAAG;IACX,MAAM,EAAC,CAAC;IACR,YAAY,EAAC,cAA0B;IACvC,OAAO,EAAE,YAAY;IACrB,wBAAa;MACX,YAAY,EAAC,IAAI;IAEnB,uGAAwC;MACtC,KAAK,EAAC,OAAe;;ACP3B,KAAK;EACH,WAAW,EAAE,UAAU;;AAGzB,aAAa;EACX,aAAa,EAAE,IAAI;EACnB,QAAQ,EAAE,QAAQ;;AAGpB,IAAK;EACH,MAAM,EAnBE,KAAK;EAoBb,KAAK,EApBG,KAAK;EAqBb,gBAAgB,EApBV,OAAO;EAqBb,GAAG,EAhBS,GAAG;EAiBf,IAAI,EAjBQ,GAAG;EAkBf,YAAU;IACR,MAAM,EAAE,kBAAwC;IAChD,QAAQ,EAAE,QAAQ;IAClB,MAAM,EAAE,IAAI;IACZ,KAAK,EAAC,IAAI;;AAId,OAAQ;EACN,MAAM,EAAE,KAA+B;EACvC,KAAK,EAAG,KAA+B;EACvC,gBAAgB,EA9BN,OAAO",
 "sources": ["_global.scss","_pie-charts-multipart.scss"],
 "names": [],
 "file": "pie-charts.css"

pies/pure-CSS-pie-charts-monopart-code.txt

@@ -0,0 +1,58 @@
+<div class="pie" style="--p:20"> 20%</div>
+<div class="pie" style="--p:40;--c:darkblue;--b:10px"> 40%</div>
+<div class="pie no-round" style="--p:60;--c:purple;--b:15px"> 60%</div>
+<div class="pie animate no-round" style="--p:80;--c:orange;"> 80%</div>
+<div class="pie animate" style="--p:90;--c:lightgreen"> 90%</div>
+@property --p{
+  syntax: '<number>';
+  inherits: true;
+  initial-value: 1;
+}
+
+.pie {
+  --p:20;
+  --b:22px;
+  --c:darkred;
+  --w:150px;
+
+  width: var(--w);
+  aspect-ratio: 1;
+  position: relative;
+  display: inline-grid;
+  margin: 5px;
+  place-content: center;
+  font-size: 25px;
+  font-weight: bold;
+  font-family: sans-serif;
+}
+.pie:before,
+.pie:after {
+  content: "";
+  position: absolute;
+  border-radius: 50%;
+}
+.pie:before {
+  inset: 0;
+  background:
+    radial-gradient(farthest-side,var(--c) 98%,#0000) top/var(--b) var(--b) no-repeat,
+    conic-gradient(var(--c) calc(var(--p)*1%),#0000 0);
+  -webkit-mask: radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
+          mask: radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
+}
+.pie:after {
+  inset: calc(50% - var(--b)/2);
+  background: var(--c);
+  transform: rotate(calc(var(--p)*3.6deg)) translateY(calc(50% - var(--w)/2));
+}
+.animate {
+  animation: p 1s .5s both;
+}
+.no-round:before {
+  background-size: 0 0, auto;
+}
+.no-round:after {
+  content: none;
+}
+@keyframes p{
+  from{--p:0}
+}

pies/pure-CSS-pie-charts-multipart-code.txt

@@ -0,0 +1,97 @@
+
+https://codepen.io/jh3y/pen/aQomdd
+
+<div class="pie">
+  <div class="pie__segment" style="--offset: 0; --value: 25; --bg: #db0a5b;"></div>
+  <div class="pie__segment" style="--offset: 25; --value: 10; --bg: #22a7f0;"></div>
+  <div class="pie__segment" style="--offset: 35; --value: 60; --bg: #2ecc71; --over50: 1;"></div>
+  <div class="pie__segment" style="--offset: 95; --value: 5; --bg: #4d05e8;"></div>
+</div>
+<div class="actions">
+  <label>Offset</label>
+  <label>Value</label>
+  <input type="number" min="0" max="360" step="1" value="0"/>
+  <input type="number" min="0" max="360" step="1" value="25"/>
+  <input type="number" min="0" max="360" step="1" value="25"/>
+  <input type="number" min="0" max="360" step="1" value="10"/>
+  <input type="number" min="0" max="360" step="1" value="35"/>
+  <input type="number" min="0" max="360" step="1" value="60"/>
+  <input type="number" min="0" max="360" step="1" value="95"/>
+  <input type="number" min="0" max="360" step="1" value="5"/>
+</div>
+
+.pie {
+  border-radius: 100%;
+  height: calc(var(--size, 200) * 1px);
+  overflow: hidden;
+  position: relative;
+  width: calc(var(--size, 200) * 1px);
+}
+.pie__segment {
+  --a: calc(var(--over50, 0) * -100%);
+  --b: calc((1 + var(--over50, 0)) * 100%);
+  --degrees: calc((var(--offset, 0) / 100) * 360);
+  -webkit-clip-path: polygon(var(--a) var(--a), var(--b) var(--a), var(--b) var(--b), var(--a) var(--b));
+  clip-path: polygon(var(--a) var(--a), var(--b) var(--a), var(--b) var(--b), var(--a) var(--b));
+  height: 100%;
+  position: absolute;
+  transform: translate(0, -50%) rotate(90deg) rotate(calc(var(--degrees) * 1deg));
+  transform-origin: 50% 100%;
+  width: 100%;
+  z-index: calc(1 + var(--over50));
+}
+.pie__segment:after,
+.pie__segment:before {
+  background: var(--bg, #e74c3c);
+  content: '';
+  height: 100%;
+  position: absolute;
+  width: 100%;
+}
+.pie__segment:before {
+  --degrees: calc((var(--value, 45) / 100) * 360);
+  transform: translate(0, 100%) rotate(calc(var(--degrees) * 1deg));
+  transform-origin: 50% 0%;
+}
+.pie__segment:after {
+  opacity: var(--over50, 0);
+}
+* {
+  box-sizing: border-box;
+}
+body {
+  align-items: center;
+  background: #111;
+  color: #fafafa;
+  display: flex;
+  flex-direction: column;
+  padding: 1rem;
+  font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
+  justify-content: center;
+  min-height: 100vh;
+}
+label {
+  font-size: 1rem;
+  margin-bottom: 0.5rem;
+}
+input {
+  min-width: 80px;
+}
+.actions {
+  display: grid;
+  grid-gap: 4px;
+  grid-template-columns: auto auto;
+  z-index: 99;
+}
+
+const pie = document.querySelector('.pie');
+const actions = document.querySelector('.actions');
+const segments = pie.children;
+
+const updateSegment = e => {
+  const idx = [...actions.children].indexOf(e.target);
+  const key = idx % 2 === 0 ? 'offset' : 'value';
+  const toUpdate = segments[Math.floor(idx / 2) - 1];
+  toUpdate.style.setProperty(`--${key}`, e.target.value);
+};
+window.addEventListener('input', updateSegment);