{"id":17121,"date":"2021-06-13T19:03:58","date_gmt":"2021-06-13T17:03:58","guid":{"rendered":"http:\/\/blog.wenzlaff.de\/?p=17121"},"modified":"2023-08-20T14:55:19","modified_gmt":"2023-08-20T12:55:19","slug":"co2-dashboard-mit-javascript-patternfly-und-react","status":"publish","type":"post","link":"http:\/\/blog.wenzlaff.de\/?p=17121","title":{"rendered":"CO2-Dashboard mit JavaScript, PatternFly und React f\u00fcr CO2-Ampel"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2021\/06\/wenzlaff.de-2021-06-13-um-18.04.30-244x300.png\" alt=\"\" width=\"244\" height=\"300\" class=\"aligncenter size-medium wp-image-17122\" srcset=\"http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2021\/06\/wenzlaff.de-2021-06-13-um-18.04.30-244x300.png 244w, http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2021\/06\/wenzlaff.de-2021-06-13-um-18.04.30-834x1024.png 834w, http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2021\/06\/wenzlaff.de-2021-06-13-um-18.04.30-768x943.png 768w, http:\/\/blog.wenzlaff.de\/wp-content\/uploads\/2021\/06\/wenzlaff.de-2021-06-13-um-18.04.30.png 990w\" sizes=\"auto, (max-width: 244px) 100vw, 244px\" \/>Wer noch ein JavaScript CO2-Dashboard f\u00fcr seine CO2 Ampel mit <a href=\"https:\/\/www.patternfly.org\/\" rel=\"noopener\" target=\"_blank\">PatternFly<\/a> und <a href=\"https:\/\/react.dev\/\" rel=\"noopener\" target=\"_blank\">React<\/a> braucht, kann gerne diesen Code verwenden: <!--more--><\/p>\n<pre class=\"lang:js decode:true \" >\r\n\r\nimport '.\/App.css';\r\nimport \"@patternfly\/react-core\/dist\/styles\/base.css\";\r\nimport { ChartDonut, ChartThemeColor } from '@patternfly\/react-charts';\r\nimport { Label, Text, TextVariants} from '@patternfly\/react-core';\r\n\r\nfunction App() {\r\n  return (\r\n    &lt;div className=\"App\"&gt;\r\n\r\n      &lt;Text component={TextVariants.h1}&gt;Dashboard&lt;\/Text&gt;\r\n\r\n      &lt;Label color=\"green\" href=\"http:\/\/www.wenzlaff.info\"&gt;CO 2&lt;\/Label&gt;\r\n\r\n      &lt;ChartDonut\r\n        ariaDesc=\"CO2 Daten\"\r\n        ariaTitle=\"CO2-Ampel\"\r\n        constrainToVisibleArea={true}\r\n        data={[{ x: 'CO 2', y: 405} , { x: 'Rest', y: 1595 }]}\r\n        labels={({ datum }) =&gt; `${datum.x}: ${datum.y}%`}\r\n        subTitle=\"ppm CO2\"\r\n        title=\"405\"\r\n        themeColor={ChartThemeColor.green}\r\n      \/&gt;\r\n\r\n    &lt;\/div&gt;\r\n  );\r\n}\r\n\r\nexport default App;<\/pre>\n<p>Wenn npm und node installiert ist kann leicht einen neue Single-Page-Applikation mit React erstellt werden:<\/p>\n<pre class=\"lang:default decode:true \" >\r\n\/\/ kein Druckfehler npx\r\nnpx create-react-app co2-app\r\ncd co2-app\r\n\/\/ Code oben in die src\/App.js einf\u00fcgen\r\nnpm start\r\n\/\/ Aufruf im Browser\r\nhttp:\/\/localhost:3000<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Wer noch ein JavaScript CO2-Dashboard f\u00fcr seine CO2 Ampel mit PatternFly und React braucht, kann gerne diesen Code verwenden:<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[220,3137],"tags":[4056,527,4058,4642,2475,1531,4945,4943,167,4462,4944,4946,4947],"class_list":["post-17121","post","type-post","status-publish","format-standard","hentry","category-anleitung","category-javascript","tag-ampel","tag-co2","tag-co2-ampel","tag-javascript","tag-node","tag-npm","tag-npx","tag-patternfly","tag-programmieren","tag-react","tag-react-neu","tag-single-page-application","tag-spa"],"_links":{"self":[{"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=\/wp\/v2\/posts\/17121","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=17121"}],"version-history":[{"count":0,"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=\/wp\/v2\/posts\/17121\/revisions"}],"wp:attachment":[{"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=17121"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=17121"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=17121"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}