cambios interfaz, parte del script de las graficas

noobToLinux · Apr 13, 2024 · 04598d7 · 04598d7
1 parent 234fe61
commit 04598d7
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 7 deletions.
diff --git a/graphScript.js b/graphScript.js
@@ -0,0 +1,61 @@
+const e=2.7182818;
+
+function fSat(alpha,gamma){
+    function f(x){
+        return x**alpha/(x**alpha+gamma**alpha);
+    }
+    return f;
+}
+
+function fGeoAdStock(theta){
+    function f(actual,previous){
+        return actual + theta*previous;
+    }
+    return f;
+}
+
+function fWeibullAdStock(shape,scale,type='pdf'){
+    function pdf(t){
+        return scale*shape*(scale*t)**(shape-1)*e**((-1)*(scale*t)**shape);
+    }
+
+    function cdf(t){
+        return 1-e**((-1)*(scale*t)**shape)
+    }
+    let funMap = {
+        'pdf':pdf,
+        'cdf':cdf
+    }
+    function f(actual,previous,t){
+        return actual + funMap[type](t)*previous;
+    }
+    return f;
+}
+
+function getChart(){
+    return document.getElementById('Grafica');
+}
+
+function genXRange(min,max,step){
+    let xValues = [];
+    for (let x=min; x<=max; x+=step){xValues.push(x);}
+    return xValues;
+}
+
+function getGraphData(xValues,yFunc){
+    let dataList = [];
+    let previous = 0;
+    for (let i=1; i<xValues.length; i++){
+        let actual = x[i]
+        data = {'x':x,'y':yFunc(x)};
+        dataList.push(data);
+    }
+    return {'dataset':dataList}
+}
+
+function plotGeometric(){
+    let config = {
+        'type':'line',
+        'data': [],
+    }
+}
diff --git a/index.html b/index.html
@@ -7,6 +7,7 @@
     <!-- Enlazar un archivo de hojas de estilo externo -->
     <link rel="stylesheet" href="styles.css">
     <!-- Enlazar un archivo de js externo -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.js" integrity="sha512-7DgGWBKHddtgZ9Cgu8aGfJXvgcVv4SWSESomRtghob4k4orCBUTSRQ4s5SaC2Rz+OptMqNk0aHHsaUBk6fzIXw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script src="script.js" defer></script>
 </head>
 <body>
@@ -37,7 +38,7 @@
             </header>
             <main id="VariablesNames">
                 <div id="divInputVarNames">
-                    <input type="text" placeholder="Variable name" id="inputVarNames">
+                    <input type="text" placeholder="Variable name" id="inputVarNames" maxlength="25">
                     <button onclick="addRow()">Añadir</button>
                 </div>
                 <div id="variablesList">
@@ -135,7 +136,7 @@
                         </div>
                         <div class="keyValue weibullParam">
                             <span>Shape:</span>
-                            <input type="number" class="shapeParam">
+                            <input type="number" min="0.0001" class="shapeParam">
                         </div>
                         <div class="keyValue weibullParam">
                             <span>Scale:</span>
@@ -199,10 +200,19 @@
         <header>
             <h2>Gráfica de <span id="NombreGrafica">No seleccionado</span></h2>
         </header>
+        <canvas id="Grafica"></canvas>
     </section>
     <section class="InnerBox" id="Generate"> <!--BotonesGenerar-->
-        <input type="text" placeholder="random seed">
-        <input type="text" placeholder="path to CSV">
+        <div class="keyValuePairs">
+            <div class="keyValue">
+                <span>Semilla de aleatoriedad:</span>
+                <input type="number" min="0">
+            </div>
+            <div class="keyValue">
+                <span>Desfase:</span>
+                <input type="text" placeholder="path to CSV">
+            </div>
+        </div>
         <button>Generar JSON</button>
     </section>
 </main>

diff --git a/script.js b/script.js
@@ -130,6 +130,7 @@ function addVarAdStock(vName){
     shapeSpan.innerHTML = 'Shape:';
     shapeInput = document.createElement('input');
     shapeInput.type = 'number';
+    shapeInput.min = "0.0001"
     shapeInput.classList.add('shapeParam');
 
     scaleSpan = document.createElement('span');
@@ -293,4 +294,4 @@ function removeAllVarsParams(vName){
     removeSaturation(vName);
     removeCampaign(vName);
     return undefined;
-}
+}
diff --git a/styles.css b/styles.css
@@ -45,17 +45,22 @@ header {
     grid-area: g;
     background-color: #d0fdca;
     color: #d0fdca; /*No funciona con el var, no se porque*/
+    display: flex;
+    flex-direction: column;
 }
 .InnerBox header {
     background-color: var(--background-vars);
     padding-left: 10px;
 }
 #Generate {
     grid-area: b;
+    color: #d0fdca;
 }
 #Generate button {
     width: 80px;
     height: 35px;
+    margin-left: 5%;
+    margin-top: 5%;
 }
 
 
@@ -137,7 +142,11 @@ input {
 }
 
 .keyValue span {
-    min-width: 30%;
+    min-width: 40%;
+}
+
+.keyValue input {
+    min-width: 40%;
 }
 
 /*parámetros de variables*/
@@ -180,11 +189,23 @@ input[type="radio"]:checked+label{
     display:none;
 }
 #radioWeibull:checked ~ .divInputAdStockParam .keyValuePairs .weibullParam{
-    display:block;
+    display: flex;
+    align-items: center;
+    padding-left: 5%;
 }
 
 input[type="number"]:out-of-range {
     border-color: red;
     box-shadow: 0px 0px 3px 3px red;
 }
 
+/*Gráfica*/
+
+canvas {
+    width: 50vh;
+    height: 50vh;
+    background-color: white;
+    margin: auto;
+    border-radius: 5px;
+}
+