Avances en del proyeto de Omar

pgserver.js

@@ -6,15 +6,20 @@ const cors = require('cors');
 
 const app = express();
 
+// parse 'numeric' type from postgres as float in JS
+var types = require("pg").types;
+types.setTypeParser(1700, val => {
+    return parseFloat(val);
+});
 
 //app.use(logger('dev'));
 app.use(logger('combined', {
-    skip: function (req, res) { return res.statusCode < 400 }
+    skip: function(req, res) { return res.statusCode < 400 }
 }));
 app.use(cors());
 app.use('/', express.static(__dirname + '/public'));
 
-const {Pool} = require('pg');
+const { Pool } = require('pg');
 const dbconfig = require('./config/dbconfig.json');
 const readOnlyPool = new Pool(dbconfig);
 readOnlyPool.connect();
@@ -23,6 +28,7 @@ const DirCache = require('./utils/dircache.js')
 const cache = new DirCache(`./cache/${dbconfig.database?dbconfig.database:process.env.PGDATABASE?process.env.PGDATABASE:''}`);
 
 const mvt = require('./mvt.js')(app, readOnlyPool, cache);
+
 const geojson = require('./geojson.js')(app, readOnlyPool);
 const geobuf = require('./geobuf.js')(app, readOnlyPool);
 const listLayers = require('./list_layers.js')(app, readOnlyPool);

public/grijalva/index2.html

@@ -26,20 +26,16 @@
     <div class="container" id="startHeader">
         <div class="jumbotron mt-5" style="background-color: rgba(233,236,239,0.75); opacity: 0.99;">
             <h1 class="display-4">Contenido de agua en la cuenca del r&iacute;o Grijalva</h1>
-            <p class="lead">Explora la apariencia de la cuenca del r&iacute;o Grijalva a trav&eacute;s del tiempo  
-            por medio de la visualizaci&oacute;n de cuerpos de agua y 
-            algunos indicadores obtenidos del an&aacute;lisis de im&aacute;genes de radar de Sentinel-1.</p>    
+            <p class="lead">Explora la apariencia de la cuenca del r&iacute;o Grijalva a trav&eacute;s del tiempo por medio de la visualizaci&oacute;n de cuerpos de agua y algunos indicadores obtenidos del an&aacute;lisis de im&aacute;genes de radar de Sentinel-1.</p>
             <hr class="my-4">
             <p>Escoge las fechas para las que quieres explorar el contenido de agua y sus indicadores.</p>
             <div class="container">
                 <div class="row justify-content-center">
                     <div class="col-4 text-center">
-                        <input type="text" name="date-initial" id="date-initial" readonly="readonly" size="12"
-                            placeholder="Fecha inicial" data-calendar="false" />
+                        <input type="text" name="date-initial" id="date-initial" readonly="readonly" size="12" placeholder="Fecha inicial" data-calendar="false" />
                     </div>
                     <div class="col-4 text-center">
-                        <input type="text" name="date-final" id="date-final" readonly="readonly" size="12"
-                            placeholder="Fecha final" data-calendar="true" />
+                        <input type="text" name="date-final" id="date-final" readonly="readonly" size="12" placeholder="Fecha final" data-calendar="true" />
                     </div>
                 </div>
             </div>
@@ -76,22 +72,24 @@
                 <div class="col-md-6" id="story">
                     <div class="loader"></div>
                     <div class="row h-50 border-bottom">
-                        <div class="col-6 border-right">
-                            <div id="areacpo-graph"></div>
+                        <div class="col-6 border-right" id="radial_chart">
+                            <div id="radial_chart2"></div>
                         </div>
-                        <div class="col-6">
-                            <div id="perimcpo-graph"></div>
+                        <div class="col-6" id="linesChart">
+                            <div id="linesChart2"></div>
                         </div>
                     </div>
                     <div class="row h-50">
-                        <div class="col-6 border-right">
-                            <div id="dlccpo-graph"></div>
+                        <div class="col-6 border-right" id="stackedAreaChart">
+                            <div id="dlccpo-graph2"></div>
                         </div>
-                        <div class="col-6">
-                            <div id="dimfrcpo-graph"></div>
+                        <div class="col-6" id="dimfrcpo-graph">
+                            <div id="dimfrcpo-graph2"></div>
                         </div>
                     </div>
                 </div>
+
+
             </div>
         </div>
 
@@ -116,8 +114,7 @@
     </div>
 
     <!-- Modal -->
-    <div class="modal fade" id="explainIndicatorModal" tabindex="-1" role="dialog"
-        aria-labelledby="explainIndicatorModal" aria-hidden="true">
+    <div class="modal fade" id="explainIndicatorModal" tabindex="-1" role="dialog" aria-labelledby="explainIndicatorModal" aria-hidden="true">
         <div class="modal-dialog modal-dialog-centered" role="document">
             <div class="modal-content">
                 <div class="modal-header">
@@ -150,9 +147,16 @@
     <script src="../js/Leaflet.Sync.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
     <script src="../js/jszip.min.js"></script>
+
+    <!-- amcharts -->
+    <script src="https://www.amcharts.com/lib/4/core.js"></script>
+    <script src="https://www.amcharts.com/lib/4/charts.js"></script>
+    <script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
+
     <script src="../js/cuerpos_functions.js"></script>
     <script src="../js/cuerpos_basemap.js"></script>
     <script src="../js/cuerpos_charts.js"></script>
 
 </body>
+
 </html>
\ No newline at end of file