half-pie-chart/dist/index.js

Simply use Half Doughnut Chart to compare two element ratio

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=t(e);!function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===i&&n.firstChild?n.insertBefore(r,n.firstChild):n.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}('@import url("https://fonts.googleapis.com/css?family=Montserrat:400,800");@keyframes fade-in{0%,90%{opacity:0}to{opacity:1}}.rowPie{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-left:-15px;margin-right:-15px}.colPie{-ms-flex-preferred-size:0;-ms-flex-positive:1;flex-basis:0;flex-grow:1;max-width:100%}.colPie,.colPie-1,.colPie-10,.colPie-11,.colPie-12,.colPie-2,.colPie-3,.colPie-4,.colPie-5,.colPie-6,.colPie-7,.colPie-8,.colPie-9,.colPie-auto,.colPie-lg,.colPie-lg-1,.colPie-lg-10,.colPie-lg-11,.colPie-lg-12,.colPie-lg-2,.colPie-lg-3,.colPie-lg-4,.colPie-lg-5,.colPie-lg-6,.colPie-lg-7,.colPie-lg-8,.colPie-lg-9,.colPie-lg-auto,.colPie-md,.colPie-md-1,.colPie-md-10,.colPie-md-11,.colPie-md-12,.colPie-md-2,.colPie-md-3,.colPie-md-4,.colPie-md-5,.colPie-md-6,.colPie-md-7,.colPie-md-8,.colPie-md-9,.colPie-md-auto,.colPie-sm,.colPie-sm-1,.colPie-sm-10,.colPie-sm-11,.colPie-sm-12,.colPie-sm-2,.colPie-sm-3,.colPie-sm-4,.colPie-sm-5,.colPie-sm-6,.colPie-sm-7,.colPie-sm-8,.colPie-sm-9,.colPie-sm-auto,.colPie-xl,.colPie-xl-1,.colPie-xl-10,.colPie-xl-11,.colPie-xl-12,.colPie-xl-2,.colPie-xl-3,.colPie-xl-4,.colPie-xl-5,.colPie-xl-6,.colPie-xl-7,.colPie-xl-8,.colPie-xl-9,.colPie-xl-auto{padding-left:15px;padding-right:15px;position:relative;width:100%}.mb-4,.my-4{margin-bottom:1.5rem!important}.container-fluid,.container-lg,.container-md,.container-sm,.container-xl{margin-left:auto;margin-right:auto;padding-left:15px;padding-right:15px;width:100%}.TextPie-center{text-align:center!important}.pl-3,.px-3{padding-left:1rem!important}.leftPieTitle{margin-left:-20px}.rightPieTitle{margin-right:-20px}');class n extends e.Component{render(){return i.default.createElement(i.default.Fragment,null,i.default.createElement("style",null,`\n            @keyframes rotate-one-${this.props.name} {\n               100% {\n                 transform: rotate(0deg);\n               }\n               100% {\n                transform: rotate(${parseInt(this.props.right[0].value)/(parseInt(this.props.right[0].value)+parseInt(this.props.left[0].value))*180}deg);\n              }\n             }\n            @keyframes rotate-two-${this.props.name} {\n              0% {\n                transform: rotate(${parseInt(this.props.right[0].value)/(parseInt(this.props.right[0].value)+parseInt(this.props.left[0].value))*180}deg);\n              }\n              100% {\n                transform: rotate(180deg);\n              }\n            }\n            \n            .chart-skills-${this.props.name} *,\n            .chart-skills-${this.props.name}::before {\n              box-sizing: border-box;\n            }\n            .chart-skills-${this.props.name} {\n              position: relative;\n              width:220px;\n              height: 110px;\n              overflow: hidden;\n              margin: 0 auto ;\n              margin-top: 30px;\n              padding: 0;\n              list-style-type: none;\n            }\n            .chart-skills-${this.props.name} li {\n              position: absolute;\n              top: 100%;\n              left: 0;\n              width: inherit;\n              height: inherit;\n              border: 35px solid;\n              border-top: none;\n              border-bottom-left-radius: 175px;\n              border-bottom-right-radius: 175px;\n              transform-origin: 50% 0;\n              transform-style: preserve-3d;\n              backface-visibility: hidden;\n              animation-fill-mode: forwards;\n              animation-duration: .4s;\n              animation-timing-function: linear;\n            }\n            .chart-skills-${this.props.name} span {\n              position: absolute;\n              font-size: .85rem;\n              backface-visibility: hidden;\n              animation: fade-in .4s linear forwards;\n            }\n            .chart-skills-${this.props.name}::before,\n            .chart-skills-${this.props.name}::after {\n              position: absolute;\n            }\n            .chart-skills-${this.props.name}::after {\n              content: '${parseInt(parseInt(this.props.right[0].value)/(parseInt(this.props.right[0].value)+parseInt(this.props.left[0].value))*100)}%';\n              left: 50%;\n              bottom: 0px;\n              transform: translateX(-50%);\n              font-size: 1.8rem;\n              font-weight: bold;\n              color: ${this.props.dark?this.props.cardTextColor?this.props.cardTextColor:"#d3d3d3":this.props.cardTextColor?this.props.cardTextColor:"#373737"}!important;\n              font-family: "Montserrat", sans-serif;\n            }\n            .chart-skills-${this.props.name}::before {\n            \n              width: inherit;\n              height: inherit;\n              border: 45px solid rgba(211, 211, 211, .3);\n              border-bottom: none;\n              border-top-left-radius: 175px;\n              border-top-right-radius: 175px;\n            }\n            .chart-skills-${this.props.name} li:nth-child(1) {\n              border-color: ${this.props.right[0].color?this.props.right[0].color:"#121212"};\n              z-index: 4;\n              animation-name: rotate-one-${this.props.name};\n            }\n            .chart-skills-${this.props.name} li:nth-child(2) {\n              border-color: ${this.props.left[0].color?this.props.left[0].color:"#121212"};\n                      z-index: 3;\n              animation-name: rotate-two-${this.props.name};\n              animation-delay: .4s;\n            }\n            \n\n            .pieTextDark-${this.props.name} {\n              color: ${this.props.cardTextColor?this.props.cardTextColor:"#343a40"};!important;\n            }\n            .pieTextLight-${this.props.name} {\n              color:  ${this.props.cardTextColor?this.props.cardTextColor:"#e9e9e9"};!important;\n            }\n\n            .DashCard-${this.props.name} {\n              background-color: ${this.props.cardBackColor?this.props.cardBackColor:"rgb(245, 245, 245)"};\n              border-radius: 28px;\n              padding-top: 10px;\n              padding-bottom: 30px;\n              padding-right: 10px;\n              padding-left: 10px;\n              max-width: 300px;\n            }\n            .DashCardDark-${this.props.name} {\n              background-color: ${this.props.cardBackColor?this.props.cardBackColor:"rgb(32, 32, 32)"};\n              border-radius: 28px;\n              padding-top: 10px;\n              padding-bottom: 30px;\n              padding-right: 10px;\n              padding-left: 10px;\n              max-width: 300px;\n            }\n            .pieHead {\n              font-family: `+(this.props.fontStyle?this.props.fontStyle:"Montserrat")+", sans-serif;\n              padding-left:14px;\n              padding-top:5px;\n              font-size: 16px;\n              font-weight: 600;\n            }\n            .TextPie1 {\n              font-family:"+(this.props.fontStyle?this.props.fontStyle:"Montserrat")+", sans-serif;\n              font-size: 16px;\n              margin: 5px;\n              font-weight: 600;\n            }\n            .TextPie2 {\n              font-family: "+(this.props.fontStyle?this.props.fontStyle:"Montserrat")+", sans-serif;\n              margin: 5px;\n              font-size: 13px;\n            }\n            .TextPie3 {\n              font-family: "+(this.props.fontStyle?this.props.fontStyle:"Montserrat")+', sans-serif;\n              font-size: 19px;\n              margin: 5px;\n              font-weight: 600;\n            }\n            .TextPie4 {\n              font-family: "Montserrat", sans-serif;\n              margin: 5px;\n              font-size: 17px;\n            }\n        '),i.default.createElement("div",{className:this.props.dark?"DashCardDark-"+this.props.name:"DashCard-"+this.props.name},i.default.createElement("h1",{className:this.props.dark?"pieHead pieTextLight-"+this.props.name:"pieHead pieTextDark-"+this.props.name},this.props.title),i.default.createElement("ul",{class:"chart-skills-"+this.props.name},this.props.right[0]&&i.default.createElement("li",null),this.props.left[0]&&i.default.createElement("li",null)),i.default.createElement("div",{className:"rowPie "},i.default.createElement("div",{className:"colPie leftPieTitle"},i.default.createElement("div",{className:" TextPie-center"},i.default.createElement("p",{className:this.props.dark?"TextPie1 pieTextLight-"+this.props.name:"TextPie1 pieTextDark-"+this.props.name},this.props.right[0].displayValue),i.default.createElement("p",{className:this.props.dark?"TextPie2 pieTextLight-"+this.props.name:"TextPie2 pieTextDark-"+this.props.name},this.props.right[0].text))),i.default.createElement("div",{className:"colPie rightPieTitle"},i.default.createElement("div",{className:" TextPie-center"},i.default.createElement("p",{className:this.props.dark?"TextPie1 pieTextLight-"+this.props.name:"TextPie1 pieTextDark-"+this.props.name},this.props.left[0].displayValue),i.default.createElement("p",{className:this.props.dark?"TextPie2 pieTextLight-"+this.props.name:"TextPie2 pieTextDark-"+this.props.name},this.props.left[0].text)))),this.props.centerText&&i.default.createElement("div",{className:"rowPie "},i.default.createElement("div",{className:"colPie  TextPie-center"},i.default.createElement("p",{className:this.props.dark?"TextPie2 pieTextLight-"+this.props.name:"TextPie2 pieTextDark-"+this.props.name},i.default.createElement("b",null,this.props.centerText),"   :   ",parseInt(this.props.right[0].value)+parseInt(this.props.left[0].value),this.props.centerPostText)))))}}exports.HalfPieChart=n;