v0.10b

src/ui/ProgressBar/ProgressBar.sass

@@ -0,0 +1,119 @@
+@import url(https://fonts.googleapis.com/css?family=Lato:700)
+
+// -- vars
+$bg-color: #34495e
+$default-size: 1em
+$label-font-size: $default-size / 4
+$label-font-size-redo: $default-size * 4
+
+// -- mixins
+@mixin size($width, $height)
+  height: $height
+  width: $width
+
+@mixin draw-progress--solid($progress, $color, $bg-color)
+  background: linear-gradient(to right, $color 50%, $bg-color 50%)
+
+  &:before
+    @if $progress <= 50
+      background: $bg-color
+      transform: rotate((100 - (50 - $progress)) / 100 * 360deg * -1)
+    @else
+      background: $color
+      transform: rotate((100 - $progress) / 100 * 360deg)
+
+.charts-container
+  &:after
+    clear: both
+    content: ''
+    display: table
+
+.pie-wrapper
+  @include size($default-size, $default-size)
+
+  font-size: 10em
+  box-sizing: border-box
+  margin: 15px
+  position: relative
+
+  *, *:before, *:after
+    box-sizing: border-box
+
+  &:nth-child(3n + 1)
+    clear: both
+
+  .pie
+    @include size(100%, 100%)
+    clip: rect(0, $default-size, $default-size, $default-size / 2)
+    left: 0
+    position: absolute
+    top: 0
+
+    .half-circle
+      @include size(100%, 100%)
+      border: ($default-size / 10) solid #3498db
+      border-radius: 50%
+      clip: rect(0, $default-size / 2, $default-size, 0)
+      left: 0
+      position: absolute
+      top: 0
+
+  .label
+    display: block
+    position: absolute
+    color: #ecf0f1
+    background: $bg-color
+    border-radius: 50%
+    cursor: default
+    font-size: $label-font-size
+    text-align: center
+
+    line-height: $label-font-size-redo * .70
+    top: $label-font-size-redo / 10
+    right: $label-font-size-redo / 10
+    bottom: $label-font-size-redo / 10
+    left: $label-font-size-redo / 10
+
+    .smaller
+      font-size: .5em
+
+    .percent
+      color: #bdc3c7
+      font-size: .45em
+      padding-bottom: 20px
+      vertical-align: super
+
+  .shadow
+    @include size(100%, 100%)
+    border: $default-size / 10 solid #bdc3c7
+    border-radius: 50%
+
+  &.style-2
+    .label
+      background: none
+      color: #7f8c8d
+
+      .smaller
+        color: #bdc3c7
+
+.pie-wrapper--solid
+  border-radius: 50%
+  overflow: hidden
+
+  &:before
+    border-radius: 0 100% 100% 0 / 50%
+    content: ''
+    display: block
+    height: 100%
+    margin-left: 50%
+    transform-origin: left
+
+  .label
+    background: transparent
+
+  &.progress-65
+    @include draw-progress--solid(65, #e67e22, $bg-color)
+  &.progress-25
+    @include draw-progress--solid(25, #9b59b6, $bg-color)
+  &.progress-88
+    @include draw-progress--solid(88, #3498db, $bg-color)

src/ui/ProgressBar/ProgressBar.tsx

@@ -0,0 +1,20 @@
+import React, {CSSProperties} from "react";
+import './ProgressBar.sass';
+
+const ProgressBar = ({ progress, color, alternative }: { progress: number, color: string, alternative?: boolean }) => {
+    const rightSide: CSSProperties = progress <= 50 ? { display: "none" } : { transform: 'rotate(180deg)' };
+    const borderColor: CSSProperties = { borderColor: color };
+
+    return (
+        <div className={alternative ? 'pie-wrapper progress style-2' : "pie-wrapper progress-75"}>
+            <span className="label">{progress}<span className="percent">%</span></span>
+            <div className="pie" style={progress <= 50 ? {} : { clip: 'rect(auto, auto, auto, auto)' }}>
+                <div className="left-side half-circle" style={{...borderColor, transform: `rotate(${progress*3.6}deg)`}}/>
+                <div className="right-side half-circle" style={{...borderColor, ...rightSide}}/>
+            </div>
+            {alternative && <div className="shadow"/>}
+        </div>
+    )
+}
+
+export default ProgressBar;