diff --git a/example/package.json b/example/package.json index a77627c..4adcb64 100644 --- a/example/package.json +++ b/example/package.json @@ -10,13 +10,18 @@ "eject": "node ../node_modules/react-scripts/bin/react-scripts.js eject" }, "dependencies": { + "@fortawesome/fontawesome-svg-core": "file:../node_modules/@fortawesome/fontawesome-svg-core", + "@fortawesome/free-solid-svg-icons": "file:../node_modules/@fortawesome/free-solid-svg-icons", + "@fortawesome/react-fontawesome": "file:../node_modules/@fortawesome/react-fontawesome", "apexcharts": "file:../node_modules/apexcharts", "react": "file:../node_modules/react", "react-apexcharts": "file:../node_modules/react-apexcharts", "react-dom": "file:../node_modules/react-dom", "react-scripts": "file:../node_modules/react-scripts", + "react-spring": "file:../node_modules/react-spring", "react-redux": "file:../node_modules/react-redux", "redux": "file:../node_modules/redux", + "react-svg": "file:../node_modules/react-svg", "visual-components": "file:.." }, "devDependencies": { diff --git a/package.json b/package.json index 91cc946..df12944 100644 --- a/package.json +++ b/package.json @@ -27,10 +27,15 @@ "react": "^16.0.0" }, "dependencies": { + "@fortawesome/fontawesome-svg-core": "^1.2.25", + "@fortawesome/free-solid-svg-icons": "^5.11.2", + "@fortawesome/react-fontawesome": "^0.1.7", "apexcharts": "^3.10.1", "react-apexcharts": "^1.3.3", "redux": "^4.0.5", - "react-redux": "^7.1.3" + "react-redux": "^7.1.3", + "react-spring": "^8.0.27", + "react-svg": "^11.0.9" }, "devDependencies": { "apexcharts": "^3.10.1", diff --git a/src/components/RollspecificGoals/Planer/Planer.js b/src/components/RollspecificGoals/Planer/Planer.js index b73b84f..c7461dd 100644 --- a/src/components/RollspecificGoals/Planer/Planer.js +++ b/src/components/RollspecificGoals/Planer/Planer.js @@ -1,103 +1,99 @@ +import { faAngleDoubleUp } from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import React, { Component } from 'react'; +import { ReactSVG } from 'react-svg'; -import ReactSVG from 'react-svg'; - -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' -import { faAngleDoubleUp, faAngleUp, faMinus, faAngleDoubleDown, faAngleDown } from '@fortawesome/free-solid-svg-icons' - -import VerticalBar from "../Elements/VerticalBar"; - -import step_1 from './img/Infrastruktur_1.svg' -import step_2 from './img/Infrastruktur_2.svg' -import step_3 from './img/Infrastruktur_3.svg' -import step_4 from './img/Infrastruktur_4.svg' -import step_5 from './img/Infrastruktur_5.svg' - -import roll_icon from '../../../icons/rolls/Planer.svg' +import roll_icon from '../../../icons/rolls/Planer.svg'; +import VerticalBar from '../Elements/VerticalBar'; +import step_1 from './img/Infrastruktur_1.svg'; +import step_2 from './img/Infrastruktur_2.svg'; +import step_3 from './img/Infrastruktur_3.svg'; +import step_4 from './img/Infrastruktur_4.svg'; +import step_5 from './img/Infrastruktur_5.svg'; class Planer extends React.Component { - constructor(props) { - super(props); - - this.settings = { - title: "Test", - - show_infographic: true, - show_progress: true, - show_flow: true - }; - - this.state = { - progress: 0, - steps: [ - step_1, - step_2, - step_3, - step_4, - step_5 - ], - step_nr: 0, - } - + constructor(props) { + super(props); + + this.settings = { + title: "Test", + + show_infographic: true, + show_progress: true, + show_flow: true + }; + + this.state = { + progress: 0, + steps: [ + step_1, + step_2, + step_3, + step_4, + step_5 + ], + step_nr: 0, } - componentDidMount() { - setInterval(() => { - this.setState(prevState => ({ - progress: - (prevState.progress + Math.floor(Math.random() * 1) + 1) % 100 - - })); - - if (this.state.progress < 20) { - this.setState({step_nr: 0}) - } else if (this.state.progress < 40) { - this.setState({step_nr: 1}) - } else if (this.state.progress < 60) { - this.setState({step_nr: 2}) - } else if (this.state.progress < 80) { - this.setState({step_nr: 3}) - } else { - this.setState({step_nr: 4}) - } - }, 100); - - - } - - - render(){ - return ( -
-
-
- -
-
-

Infrastruktur

-
-
- -
-
- logo -
- -
-
-
- -
-
- -
-
-
-
+ } + + componentDidMount() { + setInterval(() => { + this.setState(prevState => ({ + progress: + (prevState.progress + Math.floor(Math.random() * 1) + 1) % 100 + + })); + + if (this.state.progress < 20) { + this.setState({ step_nr: 0 }) + } else if (this.state.progress < 40) { + this.setState({ step_nr: 1 }) + } else if (this.state.progress < 60) { + this.setState({ step_nr: 2 }) + } else if (this.state.progress < 80) { + this.setState({ step_nr: 3 }) + } else { + this.setState({ step_nr: 4 }) + } + }, 100); + + + } + + + render() { + return ( +
+
+
+ +
+
+

Infrastruktur

+
+
+ +
+
+ logo +
+ +
+
+
+ +
+
+ +
- ) - } +
+
+
+ ) + } } export default Planer diff --git a/src/icons/rolls/Energie.svg b/src/icons/rolls/Energie.svg new file mode 100644 index 0000000..13d8579 --- /dev/null +++ b/src/icons/rolls/Energie.svg @@ -0,0 +1 @@ +Energie \ No newline at end of file diff --git a/src/icons/rolls/Industrie.svg b/src/icons/rolls/Industrie.svg new file mode 100644 index 0000000..b1d0ab9 --- /dev/null +++ b/src/icons/rolls/Industrie.svg @@ -0,0 +1 @@ +Industrie \ No newline at end of file diff --git a/src/icons/rolls/Investor.svg b/src/icons/rolls/Investor.svg new file mode 100644 index 0000000..b84ccc5 --- /dev/null +++ b/src/icons/rolls/Investor.svg @@ -0,0 +1 @@ +Investor \ No newline at end of file diff --git a/src/icons/rolls/Nischenspieler.svg b/src/icons/rolls/Nischenspieler.svg new file mode 100644 index 0000000..c0026d3 --- /dev/null +++ b/src/icons/rolls/Nischenspieler.svg @@ -0,0 +1 @@ +Nischenspieler \ No newline at end of file diff --git a/src/icons/rolls/Planer.svg b/src/icons/rolls/Planer.svg new file mode 100644 index 0000000..d9c7bde --- /dev/null +++ b/src/icons/rolls/Planer.svg @@ -0,0 +1,11 @@ + + Planer + + + + + + + + + \ No newline at end of file diff --git a/src/icons/rolls/Politik.svg b/src/icons/rolls/Politik.svg new file mode 100644 index 0000000..eb08a82 --- /dev/null +++ b/src/icons/rolls/Politik.svg @@ -0,0 +1 @@ +Politik \ No newline at end of file diff --git a/src/icons/rolls/Population.svg b/src/icons/rolls/Population.svg new file mode 100644 index 0000000..bf239f2 --- /dev/null +++ b/src/icons/rolls/Population.svg @@ -0,0 +1 @@ +Population \ No newline at end of file diff --git a/src/index.js b/src/index.js index bb1d419..0dc8472 100644 --- a/src/index.js +++ b/src/index.js @@ -7,6 +7,9 @@ import GenericRolls from './components/Generic/GenericRolls/GenericRolls'; import GenericTimeseries from './components/Generic/GenericTimeseries/GenericTimeseries'; import GenericValue from './components/Generic/GenericValue/GenericValue'; import PieChart from './components/PieChart/PieChart'; +import EnergyProvider from './components/RollspecificGoals/EnergyProvider/EnergyProvider'; +import Industry from './components/RollspecificGoals/Industry/Industry'; +import Planer from './components/RollspecificGoals/Planer/Planer'; import RollspecificGoals from './components/RollspecificGoals/RollspecificGoals'; export const ExampleComponent = ({ text }) => { @@ -16,10 +19,13 @@ export const ExampleComponent = ({ text }) => { export const visualComponentDict = { donut_chart: DonutChart, donut_chart_2: DonutChart2, + energy_provider: EnergyProvider, generic_rolls: GenericRolls, generic_timeseries: GenericTimeseries, generic_value: GenericValue, + industry: Industry, pie_chart: PieChart, + planer: Planer, rollspecific_goals: RollspecificGoals, carbon_budget: CarbonBudget }