graficosDaPapulacao.scss

population02.tsx

@@ -0,0 +1,110 @@
+import m from 'mithril';
+import { Window, Tab, Tabs, Btn, Sidebar, Chart } from '../ui';
+import populationIcon from './icon.jpg'
+
+/**
+ * Componente que mostra janela com informações demográficas.
+ */
+export class Population {
+    view() {
+        return <Window>
+            <Sidebar src={populationIcon} title="Populacao" />
+            <Tabs>
+                <Tab title="Satisfação">
+                    <div id="satisfacaoChart">Satisfação:
+                        <Chart type="pie" data={dataSatisfacao} options={options}></Chart>
+                    </div>
+                </Tab>
+
+
+                </Tab>
+            </Tabs>
+        </Window>
+    }
+
+
+}
+
+
+
+let dataRiqueza = {
+    labels: ['Super Ricos', 'Ricos', 'Classe média', 'Classe média-baixa', 'Pobres', 'Miseravéis'],
+    datasets: [{
+        label: '# of Votes',
+        data: [1/100, 3/100, 20/100, 30/100, 40/100, 6/100],
+        backgroundColor: [
+            'rgba(255, 99, 132, 0.2)',
+            'rgba(54, 162, 235, 0.2)',
+            'rgba(255, 206, 86, 0.2)',
+            'rgba(75, 192, 192, 0.2)',
+            'rgba(153, 102, 255, 0.2)',
+            'rgba(255, 159, 64, 0.2)'
+        ],
+        borderColor: [
+            'rgba(255, 99, 132, 1)',
+            'rgba(54, 162, 235, 1)',
+            'rgba(255, 206, 86, 1)',
+            'rgba(75, 192, 192, 1)',
+            'rgba(153, 102, 255, 1)',
+            'rgba(255, 159, 64, 1)'
+        ],
+        borderWidth: 1
+    }]
+};
+
+let dataSatisfacao = {
+    labels: ['Contentes', 'Infelizes', 'Revoltados', 'Revolucionarios'],
+    datasets: [{
+        label: '# of Votes',
+        data: [50/100, 35/100, 5/100, 10/100,],
+        backgroundColor: [
+            'rgba(255, 99, 132, 0.2)',
+            'rgba(54, 162, 235, 0.2)',
+            'rgba(255, 206, 86, 0.2)',
+            'rgba(75, 192, 192, 0.2)'
+
+        ],
+        borderColor: [
+            'rgba(255, 99, 132, 1)',
+            'rgba(54, 162, 235, 1)',
+            'rgba(255, 206, 86, 1)',
+            'rgba(75, 192, 192, 1)'
+
+        ],
+        borderWidth: 1
+    }]
+};
+
+let dataSaude = {
+    labels: ['saudáveis', 'doentes', 'moribundos'],
+    datasets: [{
+        label: '# of Votes',
+        data: [50/100, 35/100, 15/100,],
+        backgroundColor: [
+            'rgba(255, 99, 132, 0.2)',
+            'rgba(54, 162, 235, 0.2)',
+            'rgba(255, 206, 86, 0.2)',
+            'rgba(75, 192, 192, 0.2)'
+
+        ],
+        borderColor: [
+            'rgba(255, 99, 132, 1)',
+            'rgba(54, 162, 235, 1)',
+            'rgba(255, 206, 86, 1)',
+            'rgba(75, 192, 192, 1)'
+
+        ],
+        borderWidth: 1
+    }]
+};
+
+
+let options = {
+    scales: {
+        yAxes: [{
+            ticks: {
+                beginAtZero: true
+            }
+        }]
+    }
+};

web/src/conspiracy/Tabs/Acoes.tsx

@@ -1,4 +1,4 @@
-import {Illums} from '../components/Illums'
+import {Illums} from '../Components/Illums'
 import silvio from '../Imgs/silvio.jpg';
 import michael from '../Imgs/michael.jpg';
 import algore from '../Imgs/al gore.jpg';

web/src/population/_population.scss

@@ -1,3 +1,124 @@
+/*Gráficos de população*/
+
 .Polulation {
-
-}
+
+     .overlay {
+          z-index: 1;
+          background-color: rgba(0, 0, 0, 0.6);
+          box-shadow: 0.5rem 0.5rem 0.5rem rgba(49, 48, 48, 0.6);
+          float: center;
+          position: relative;
+     }
+
+     .Tela {
+          margin-top: 1rem;
+          padding: 5px;
+          text-align: center;
+          color: white;
+          .Title {
+            color: red;
+          }
+     }
+}
+
+#PopulationWindow {
+     background: black;
+     background-size: cover;
+}
+
+@media screen and (min-width: 1285px) {
+     .Population {
+       .Tabs-tab {
+         padding: 0.5%;
+       }
+       .Tab-head {
+         margin-top: 0.65%;
+         margin-left: 1.5%;
+         margin-right: 0;
+         margin-bottom: 0.65%;
+       }
+       .Tabs-Content {
+         margin-left: 1.5%;
+         margin-right: 1.5%;
+       }
+       .buttons {
+         margin-right: 0;
+         margin-left: 0;
+         padding: 1%;
+         padding-bottom: 0;
+       }
+       .back-Button {
+         margin-top: 1%;
+         margin-right: 1%;
+         margin-left: 0;
+         .show {
+           margin-top: 0;
+         }
+       }
+       .nes-btn {
+         margin: 0.4rem;
+         font-size: 0.6rem;
+         min-width: 8.5rem;
+       }
+       .overlay {
+         border-radius: 2rem;
+         margin-right: 3%;
+         margin-left: 3%;
+         padding: 1%;
+         margin-top: 1.5%;
+         padding-bottom: 1.5%;
+       }
+       .chart-container {
+         height: 80rem;
+       }
+     }
+}
+
+@media screen and (max-width: 1285px) {
+     .Population {
+       .Tabs-tab {
+         padding: 0.5%;
+       }
+       .Tab-head {
+         margin-top: 0.65%;
+         margin-left: 1.5%;
+         margin-right: 0;
+         margin-bottom: 0.65%;
+       }
+       .Tabs-Content {
+         margin-left: 1.5%;
+         margin-right: 1.5%;
+       }
+       .buttons {
+         margin-right: 0;
+         margin-left: 0;
+         padding: 1%;
+         padding-bottom: 0;
+       }
+       .back-Button {
+         margin-top: 1%;
+         margin-right: 1%;
+         margin-left: 0;
+         .show {
+           margin-top: 0;
+         }
+       }
+       .nes-btn {
+         margin: 0.3rem;
+         font-size: 0.5rem;
+         min-width: 8rem;
+       }
+       .overlay {
+         border-radius: 2rem;
+         margin-right: 2%;
+         margin-left: 2%;
+         padding: 0.5%;
+         margin-top: 0.5%;
+         padding-bottom: 1%;
+       }
+       .chart-container {
+         height: 50rem;
+       }
+     }
+}
+

web/src/population/pieCharts.tsx

@@ -0,0 +1,41 @@
+<html>
+  <head>
+    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
+    <script type="text/javascript">
+      google.charts.load('current', {'packages':['corechart']});
+      google.charts.setOnLoadCallback(drawChart);
+
+      function drawChart() {
+
+        var data = google.visualization.arrayToDataTable([
+          ['Task', 'Hours per Day'],
+          ['Work',     11],
+          ['Eat',      2],
+          ['Commute',  2],
+          ['Watch TV', 2],
+          ['Sleep',    7]
+        ]);
+
+        var options = {
+          title: 'My Daily Activities'
+        };
+
+        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
+
+        chart.draw(data, options);
+      }
+    </script>
+  </head>
+  <body>
+    <div id="piechart" style="width: 900px; height: 500px;"></div>
+  </body>
+</html>
+/* 
+Ex:
+Opinião:
+-contentes: x%
+-infelizes: y%
+-revoltados: z%
+-revolucionários: w%
+x+y+z+w=100%
+*/