CO2-Dashboard mit JavaScript, PatternFly und React für CO2-Ampel – Wenzlaff.de

Wer noch ein JavaScript CO2-Dashboard für seine CO2 Ampel mit PatternFly und React braucht, kann gerne diesen Code verwenden:

import './App.css';
import "@patternfly/react-core/dist/styles/base.css";
import { ChartDonut, ChartThemeColor } from '@patternfly/react-charts';
import { Label, Text, TextVariants} from '@patternfly/react-core';

function App() {
  return (
    <div className="App">

      <Text component={TextVariants.h1}>Dashboard</Text>

      <Label color="green" href="http://www.wenzlaff.info">CO 2</Label>

      <ChartDonut
        ariaDesc="CO2 Daten"
        ariaTitle="CO2-Ampel"
        constrainToVisibleArea={true}
        data={[{ x: 'CO 2', y: 405} , { x: 'Rest', y: 1595 }]}
        labels={({ datum }) => `${datum.x}: ${datum.y}%`}
        subTitle="ppm CO2"
        title="405"
        themeColor={ChartThemeColor.green}
      />

    </div>
  );
}

export default App;

import './App.css';

import "@patternfly/react-core/dist/styles/base.css";

import { ChartDonut, ChartThemeColor } from '@patternfly/react-charts';

import { Label, Text, TextVariants} from '@patternfly/react-core';

function App() {

return (

<Text component={TextVariants.h1}>Dashboard</Text>

<ChartDonut

ariaDesc="CO2 Daten"

ariaTitle="CO2-Ampel"

constrainToVisibleArea={true}

data={[{ x: 'CO 2', y: 405} , { x: 'Rest', y: 1595 }]}

labels={({ datum }) => `${datum.x}: ${datum.y}%`}

subTitle="ppm CO2"

title="405"

themeColor={ChartThemeColor.green}

</div>

);

}

export default App;

Wenn npm und node installiert ist kann leicht einen neue Single-Page-Applikation mit React erstellt werden:

// kein Druckfehler npx
npx create-react-app co2-app
cd co2-app
// Code oben in die src/App.js einfügen
npm start
// Aufruf im Browser
http://localhost:3000

// kein Druckfehler npx

npx create-react-app co2-app

cd co2-app

// Code oben in die src/App.js einfügen

npm start

// Aufruf im Browser

http://localhost:3000