Rafael
jaume-nualart 7 months ago
parent 25b41e7376
commit 840a3a4c4e
  1. 10
      web-html/dash.html
  2. 2
      web-html/js/d3-horizon-chart0.0.5.js
  3. 24
      web-html/js/dash.js

@ -105,8 +105,8 @@
<script src="https://d3js.org/d3.v4.js"></script>
<!-- <script src="https://d3js.org/d3.v7.min.js"></script> -->
<!-- <script src="https://d3js.org/d3.v6.min.js"></script> -->
<!-- <script src="https://unpkg.com/d3-horizon-chart@0.0.5"></script> --> -->
<!-- <script src="https://unpkg.com/d3-horizon-chart@0.0.5"></script> -->
<script src="./js/c3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/js/bootstrap-datepicker.min.js" integrity="sha512-LsnSViqQyaXpD4mBBdRYeP6sRwJiJveh2ZIbW41EBrNmKxgr/LFZIiWT6yr+nycvhvauz8c2nYMhrP80YhG7Cw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
@ -138,7 +138,9 @@
<div id="myhouse">
</div>
<div id="templates">Manage board:&nbsp;&nbsp;
<button id="saveDash" class="btn btn-outline-success" onclick="getApiUrls();"><i class="fa fa-upload"></i>SAVE</button>
<button id="saveDash" class="btn btn-outline-success" onclick="getApiUrls();"><i class="fa fa-upload"></i>Save</button>
&nbsp;&nbsp;
<button id="loadDashList" class="btn btn-outline-success" onclick=""><i class="fa fa-folder-open-o"></i>List</button>
<span class="float-end">Templates:&nbsp;&nbsp;
<button id="button2" class="btn btn-outline-success"><i class="fa fa-map"></i> 33 %</button>
&nbsp;&nbsp;
@ -824,7 +826,7 @@ https://getbootstrap.com/docs/5.0/forms/validation/#how-it-works
<option value="Mô"></option>
</select>
</div>
<p>&nbsp;</p> -->
<p>&nbsp;</p>
<div id="horizon-optionMonthly" class="input-group date">
<span class="input-group-text input-group-addon"><i class="bi bi-calendar3" aria-hidden="true"></i></span>
<select id="HYYear" name="HYYear" class="form-select" aria-label="horizon-yearly-select">

@ -5,7 +5,7 @@
(factory((global.d3 = global.d3 || {}),global.d3,global.d3,global.d3,global.d3));
}(this, (function (exports,d3Selection,d3Scale,d3Axis,d3Array) { 'use strict';
function horizonChart () {
function horizonChart() {
// default settings:
//var colors = ['#08519c','#3182bd','#6baed6','#bdd7e7','#bae4b3','#74c476','#31a354','#006d2c'],

@ -51,7 +51,7 @@ for (var i = 0; i < listFamilies.length; i++) {
}
var listParametersRepeated2 = new Set(listParametersRepeated);
var listParameters = Array.from(listParametersRepeated2);
cl(listParameters);
// cl(listParameters);
var listParametersOptions = "";
// Get parameters select options
for (var i = 0; i < listParameters.length; i++) {
@ -343,7 +343,7 @@ document.getElementById("HDParameter").innerHTML = listParametersOptions;
//-----------------------------
// createParallel
async function createParallel(myid,formId, myFormData) {
cl("form data:: "+myFormData);
// cl("form data:: "+myFormData);
// API Request
// Static query paramenters:
const myForm = document.getElementById(formId);
@ -941,9 +941,11 @@ function do_grid_yearly(myid, year, myData) {
//--------------------------------
// HORIZON d3 diagram
function do_horizon_row(data, myid, title, myDates) {
var horizonChart = d3.horizonChart()
.height(50)
@ -962,16 +964,18 @@ function do_horizon_row(data, myid, title, myDates) {
.each(function (d, i) {
var canvas = d3.select(this).select('canvas');
canvas.on('mouseover', function () {
canvas.on('mouseover', function (dd, i) {
// Get the mouse position relative to the canvas
var [x, y] = d3.mouse(this);
// Calculate the y-value based on the mouse position
var chartHeight = horizonChart.height();
var yValue = (y / chartHeight) * (d[0][0].max - d[0][0].min) + d[0][0].min;
// var yValue = horizonChart.y().invert(y);
// Retrieve the corresponding date
var dateIndex = Math.floor(x / (canvas.node().width / myDates.length));
//var date = myDates[dateIndex];
var date = myDates[dateIndex];
// Create a tooltip element
@ -985,7 +989,8 @@ function do_horizon_row(data, myid, title, myDates) {
.style('font-size', '12px');
// Position the tooltip next to the mouse
tooltip.style('right', (x + 2) + 'px')
tooltip
.style('right', (x + 2) + 'px')
.style('top', (y + 10) + 'px')
.style('position', 'relative');
@ -1132,9 +1137,9 @@ document.querySelectorAll('button[type="submit"]').forEach(button => {
var div = doc.querySelector('div[data-lt-tmp-id^="lt-"]');
var textData = div ? div.innerHTML : 'No div found';
writeInTXT(formId, textData);
cl("Addtext:");
cl(fromEditor);
cl(textData);
// cl("Addtext:");
// cl(fromEditor);
// cl(textData);
} else {
writeIn(formId, formData);
}
@ -1446,10 +1451,7 @@ function makeApiRequest(formId, apiUrl, myid, myTitle, ...args) {
// Make an AJAX request to your Flask API
var apiRequest = `http://localhost:5000/${apiUrl}`; ///parallel/daily?family=${family}&type=${type}&day=${day}`;
cl(apiRequest);
var myCol = getName(formId[0]).split("-")[1];
// cl("myCol");
// cl(myCol);
document.getElementById(myid).setAttribute("apiurl", apiUrl);
fetch(apiRequest)

Loading…
Cancel
Save