{"version":3,"sources":["components/RadialSeparators.js","components/CircularProgressProduction.js","components/CircularProgressDesufurization.js","styles/global.js","App.js","index.js"],"names":["Separator","props","style","position","width","height","transform","turns","top","RadialSeparators","count","_","range","map","index","CircularProgressProduction","percentage","value","strokeWidth","circleRatio","maxValue","styles","buildStyles","strokeLinecap","rotation","pathColor","trailColor","textColor","textSize","background","zIndex","borderTopLeftRadius","borderTopRightRadius","display","alignItems","justifyContent","textAlign","color","fontSize","fontStyle","margin","CircularProgressDesufurization","GlobalStyle","createGlobalStyle","App","useState","unity1Production","setUnity1Production","unity1Desulfurization","setUnity1Desulfurization","unity2Production","setUnity2Production","unity2Desulfurization","setUnity2Desulfurization","dateIsUploadXml","setDateIsUploadXml","productionsMath","setProductionsMath","oReq","XMLHttpRequest","open","onload","pag","responseText","split","console","log","index0","indexOf","xmlDate1","index05","xmlDate2","pm","index1","init1blue","index2","init2blue","index3","lastIndexOf","init1green","index4","init2green","convertInit1GreenToFloat","parseFloat","convertInit2GreenToFloat","removeTrashCaracter","replace","send","Container","Title","class","DateText","UnitsContainer","Unity1Container","left","Unity2Container","styled","div","h1","span","ReactDOM","render","StrictMode","document","getElementById"],"mappings":"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","file":"static/js/main.7fa99364.chunk.js","sourcesContent":["import React from \"react\";\r\nimport _ from \"lodash\";\r\n\r\nfunction Separator(props) {\r\n  return (\r\n    <div\r\n      style={{\r\n        position: \"absolute\",\r\n        width: '100%',\r\n        height: \"100%\",\r\n        transform: `rotate(${props.turns}turn)`,\r\n        top: \"100%\",\r\n      }}\r\n    >\r\n      <div style={props.style} />\r\n    </div>\r\n  );\r\n}\r\n\r\nfunction RadialSeparators(props) {\r\n  const turns = 1 / props.count;\r\n  return _.range(props.count).map(index => (\r\n    <Separator turns={index * turns} style={props.style} />\r\n  ));\r\n}\r\n\r\nexport default RadialSeparators;\r\n","import {\r\n  CircularProgressbarWithChildren,\r\n  buildStyles,\r\n} from \"react-circular-progressbar\";\r\nimport \"react-circular-progressbar/dist/styles.css\";\r\nimport RadialSeparators from \"./RadialSeparators\";\r\n\r\nexport function CircularProgressProduction({ percentage }) {\r\n  return (\r\n    <>\r\n      <CircularProgressbarWithChildren\r\n        \r\n        value={percentage}\r\n        strokeWidth=\"12\"\r\n        circleRatio=\"0.5\"\r\n        maxValue=\"345\"\r\n        styles={buildStyles({\r\n          strokeLinecap: \"butt\",\r\n          rotation: 0.75,\r\n          pathColor: \"#20a837\",\r\n          trailColor: \"rgba(0, 0, 0, 0)\",\r\n          textColor: \"#fff\",\r\n          textSize: \"0.9rem\",\r\n          \r\n        })}\r\n        \r\n      >\r\n        <RadialSeparators\r\n          count={32}\r\n          style={{\r\n            background: \"#fff\",\r\n            width: \"1px\",\r\n            height: `${5}%`,\r\n          }}\r\n        />\r\n        <div\r\n          style={{\r\n            position: \"absolute\",\r\n            zIndex: \"-999\",\r\n            top: \"100%\",\r\n            height: \"50%\",\r\n            background: \"#214ade\",\r\n            borderTopLeftRadius: \"300px\",\r\n            borderTopRightRadius: \"300px\",\r\n            display: \"flex\",\r\n            alignItems: \"center\",\r\n            justifyContent: \"center\",\r\n          }}\r\n        >\r\n          <span\r\n            style={{\r\n              width: '80%',\r\n              textAlign: 'center',\r\n              color: \"#fff\",\r\n              fontSize: '1.1rem',\r\n              fontStyle: \"normal\",\r\n              margin: '8% auto 0 23%'\r\n            }}\r\n          >\r\n            {percentage} MW\r\n          </span>\r\n        </div>\r\n      </CircularProgressbarWithChildren>\r\n    </>\r\n  );\r\n}\r\n","import {\r\n  CircularProgressbarWithChildren,\r\n  buildStyles,\r\n} from \"react-circular-progressbar\";\r\nimport \"react-circular-progressbar/dist/styles.css\";\r\n\r\nexport function CircularProgressDesufurization({ percentage }) {\r\n  return (\r\n    <>\r\n      <CircularProgressbarWithChildren\r\n        value={percentage}\r\n        strokeWidth=\"12\"\r\n        circleRatio=\"0.5\"\r\n        maxValue=\"100\"\r\n        styles={buildStyles({\r\n          strokeLinecap: \"butt\",\r\n          rotation: 0.75,\r\n          pathColor: \"#1DA1C7\",\r\n          trailColor: \"rgba(0, 0, 0, 0)\",\r\n          textColor: \"#fff\",\r\n          textSize: \"0.9rem\",\r\n        })}\r\n      >\r\n        <div\r\n          style={{\r\n            position: \"absolute\",\r\n            zIndex: \"-999\",\r\n            top: \"100%\",\r\n            height: \"50%\",\r\n            background: \"#214ade\",\r\n            borderTopLeftRadius: \"300px\",\r\n            borderTopRightRadius: \"300px\",\r\n            display: \"flex\",\r\n            alignItems: \"center\",\r\n            justifyContent: \"center\",\r\n          }}\r\n        >\r\n          <span\r\n            style={{\r\n              width: \"80%\",\r\n              textAlign: \"center\",\r\n              color: \"#fff\",\r\n              fontSize: \"1.1rem\",\r\n              fontStyle: \"normal\",\r\n              margin: \"8% auto 0 23%\",\r\n            }}\r\n          >\r\n            {percentage} %\r\n          </span>\r\n        </div>\r\n      </CircularProgressbarWithChildren>\r\n    </>\r\n  );\r\n}\r\n","import { createGlobalStyle } from 'styled-components';\r\nimport './fonts/fonts.css';\r\n\r\n\r\nconst GlobalStyle = createGlobalStyle`\r\n  * {\r\n    border: 0;\r\n    box-sizing: border-box;\r\n    margin: 0;\r\n    padding: 0;\r\n  }\r\n\r\n\r\n  #root {\r\n    overflow-y: hidden;\r\n  }\r\n`;\r\n\r\nexport default GlobalStyle;\r\n","import { useState } from \"react\";\r\nimport { CircularProgressProduction } from \"./components/CircularProgressProduction\";\r\nimport { CircularProgressDesufurization } from \"./components/CircularProgressDesufurization\";\r\nimport styled from \"styled-components\";\r\nimport GlobalStyle from './styles/global';\r\nfunction App() {\r\n  const [unity1Production, setUnity1Production] = useState();\r\n  const [unity1Desulfurization, setUnity1Desulfurization] = useState();\r\n\r\n  const [unity2Production, setUnity2Production] = useState();\r\n  const [unity2Desulfurization, setUnity2Desulfurization] = useState();\r\n\r\n  const [dateIsUploadXml, setDateIsUploadXml] = useState();\r\n\r\n  const [productionsMath, setProductionsMath] = useState(0);\r\n\r\n  let oReq = new XMLHttpRequest();\r\n\r\n  oReq.open(\"GET\", \"AES_op_data.xml\", true);\r\n\r\n  oReq.onload = () => {\r\n    const pag = oReq.responseText.split(\" \");\r\n   \r\n    console.log(pag);\r\n\r\n    const index0 = pag.indexOf(\"<MessageDateTime\");\r\n    const xmlDate1 = pag[index0 + 1];\r\n\r\n    const index05 = pag.indexOf(\"<MessageDateTime\");\r\n    const xmlDate2 = pag[index05 + 2];\r\n    const pm = pag[index05 + 3];\r\n\r\n    const index1 = pag.indexOf(\"MW\");\r\n    const init1blue = pag[index1 + 2];\r\n    console.log(init1blue);\r\n    const index2 = pag.indexOf(\"%\");\r\n    const init2blue = pag[index2 + 2];\r\n    \r\n\r\n    const index3 = pag.lastIndexOf(\"MW\");\r\n    const init1green = pag[index3 + 2];\r\n\r\n    const index4 = pag.lastIndexOf(\"%\");\r\n    const init2green = pag[index4 + 2];\r\n\r\n    //Setting state production values ​​for each unit:\r\n    setUnity1Production(init1green);\r\n    setUnity2Production(init2green);\r\n\r\n    // Converting xml return from string to number\r\n    const convertInit1GreenToFloat = parseFloat(init1blue);\r\n    const convertInit2GreenToFloat = parseFloat(init1green);\r\n\r\n    setProductionsMath(convertInit1GreenToFloat + convertInit2GreenToFloat);\r\n\r\n    //Setting state desulfurization values ​​for each unit:\r\n    setUnity1Desulfurization(init1blue);\r\n    setUnity2Desulfurization(init2blue);\r\n    \r\n\r\n    //Replace Caracters from XML:\r\n    const removeTrashCaracter = xmlDate1.replace('=\"', \"\");\r\n    //Setting state date value:\r\n    setDateIsUploadXml(removeTrashCaracter + \" \" + xmlDate2 + ' ' + pm);\r\n  };\r\n\r\n  oReq.send();\r\n\r\n  return (\r\n    <>\r\n      <GlobalStyle/>\r\n      <Container>\r\n        <Title>\r\n          <div><span>Electricity Production</span></div><div class=\"strong\"><strong>Total: {productionsMath} MW</strong></div>\r\n        </Title>\r\n        <DateText>Data from: {dateIsUploadXml} </DateText>\r\n        <UnitsContainer>\r\n          <Unity1Container>\r\n            <span>Unit 1</span>\r\n\r\n            <div>\r\n              <span>0</span>\r\n              <CircularProgressProduction percentage={unity1Desulfurization} />\r\n              <span>345</span>\r\n            </div>\r\n\r\n            <p\r\n              style={{\r\n                width: \"130%\",\r\n                position: \"absolute\",\r\n                top: \"25%\",\r\n                left: \"-14%\",\r\n                textAlign: \"center\",\r\n              }}\r\n            >\r\n              electricity production in MW (gross)\r\n            </p>\r\n\r\n            <div>\r\n              <CircularProgressDesufurization\r\n                percentage={unity2Desulfurization}\r\n              />\r\n            </div>\r\n\r\n            <p\r\n              style={{\r\n                width: \"140%\" ,\r\n                position: \"absolute\",\r\n                top: \"70%\",\r\n                left: \"-20%\",\r\n                textAlign: \"center\",\r\n              }}\r\n            >\r\n              Flue Gas Desulfurization efficiency in %\r\n            </p>\r\n          </Unity1Container>\r\n\r\n          <Unity2Container>\r\n            <span>Unit 2</span>\r\n\r\n            <div>\r\n              <span>0</span>\r\n              <CircularProgressProduction percentage={unity1Production} />\r\n              <span>345</span>\r\n            </div>\r\n            <p\r\n              style={{\r\n                width: \"130%\",\r\n                position: \"absolute\",\r\n                top: \"25%\",\r\n                left: \"-14%\",\r\n                textAlign: \"center\",\r\n              }}\r\n            >\r\n              electricity production in MW (gross)\r\n            </p>\r\n\r\n            <div>\r\n              <CircularProgressDesufurization\r\n                percentage={unity2Production}\r\n              />\r\n            </div>\r\n            <p\r\n              style={{\r\n                width: \"140%\",\r\n                position: \"absolute\",\r\n                top: \"70%\",\r\n                left: \"-20%\",\r\n                textAlign: \"center\",\r\n              }}\r\n            >\r\n              Flue Gas Desulfurization efficiency in %\r\n            </p>\r\n          </Unity2Container>\r\n        </UnitsContainer>\r\n      </Container>\r\n    </>\r\n  );\r\n}\r\n\r\nexport default App;\r\n\r\nconst Container = styled.div`\r\n  width: 80vw;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  margin: 20px auto;\r\n`;\r\n\r\nconst Title = styled.h1`\r\n  font-family: 'Open Sans Light', sans-serif;\r\n  font-weight: 300;\r\n  font-size: 20px;\r\n  letter-spacing: 0.05em;\r\n  line-height: 1.2;\r\n  text-align: left;\r\n  display: flex;\r\n  .strong{\r\n    font-family: 'Open Sans', sans-serif;\r\n    font-weight:bold;\r\n    \r\n\r\n  }\r\n  div{\r\n    margin: 10px 15px;\r\n  }\r\n  color: #000;\r\n  @media (max-width: 769px) {\r\n    text-align: center;\r\n    display: block;\r\n    \r\n  }\r\n\r\n  margin-bottom: 30px;\r\n`;\r\n\r\nconst DateText = styled.span`\r\nfont-family:'Open Sans Light', sans-serif;\r\n  font-weight: 300;\r\n  letter-spacing: 0.05em;\r\n  font-size: 16px;\r\n  line-height: 1.2;\r\n  text-align: left;\r\n  color: #000;\r\n`;\r\n\r\nconst UnitsContainer = styled.div`\r\n  width: 60%;\r\n  display: flex;\r\n  margin-top: 30px;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n\r\n  @media (max-width: 769px) {\r\n    flex-direction: column;\r\n    width: 90%;\r\n  }\r\n\r\n  div {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n\r\n    position: relative;\r\n\r\n    span {\r\n      font-family: 'Open Sans',sans-serif;\r\n      font-weight: 100;\r\n      font-size: 16px;\r\n      line-height: 1.2;\r\n      font-size: 24px;\r\n      text-align: left;\r\n      color: #000;\r\n      margin-bottom: 50px;\r\n      margin-top: 0px;\r\n    }\r\n\r\n    div {\r\n      align-items: center;\r\n      width: 15vw;\r\n      height: 15vw;\r\n      margin-bottom: 10px;\r\n\r\n      @media (max-width: 769px) {\r\n        width: 50vw;\r\n        height: 50vw;\r\n      }\r\n\r\n      span {\r\n        font-style: italic;\r\n        font-size: 12px;\r\n        font-family: 'Open Sans', sans-serif;\r\n      }\r\n\r\n      position: relative;\r\n\r\n      span:nth-child(1) {\r\n        position: absolute;\r\n\r\n        top: 44%;\r\n        left: -20px;\r\n      }\r\n\r\n      span:nth-child(3) {\r\n        position: absolute;\r\n\r\n        top: 44%;\r\n        right: -33px;\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst Unity1Container = styled.div`\r\n  p{\r\n    font-family: 'Open Sans Light', sans-serif;\r\n    font-size: 14px;\r\n    padding-top: 60px;\r\n    letter-spacing: 0.05em;\r\n    \r\n  }\r\n`;\r\n\r\nconst Unity2Container = styled.div`\r\n\r\n  p{\r\n    font-family: 'Open Sans Light', sans-serif;\r\n    font-size: 14px;\r\n    padding-top: 60px;\r\n    letter-spacing: 0.05em;\r\n    \r\n  }\r\n\r\n`;\r\n","import React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport App from './App';\r\n\r\nReactDOM.render(\r\n  <React.StrictMode>\r\n    <App />\r\n  </React.StrictMode>,\r\n  document.getElementById('root')\r\n);"],"sourceRoot":""}