Hugging Face's logo

Spaces:
CYV28
/
RetinAI
Sleeping

App Files Community
Akira-Kurusu commited on
Commit
42fa7da
·
verified ·
1 Parent(s): 60b260e

Update web/index.html

Browse files
Files changed (1) hide show
  1. web/index.html +43 -146
web/index.html CHANGED
@@ -3,10 +3,8 @@
3
  <head>
4
  <meta charset="utf-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6
-
7
  <meta name="description" content="">
8
  <meta name="author" content="">
9
-
10
  <link rel="icon" href="favicon.ico">
11
  <title>Dashboard</title>
12
  <link rel="stylesheet" href="css/simplebar.css">
@@ -19,19 +17,8 @@
19
  <link rel="stylesheet" href="css/jquery.timepicker.css">
20
  <link rel="stylesheet" href="css/quill.snow.css">
21
  <link rel="stylesheet" href="css/daterangepicker.css">
22
- <style id="themeBlock">html{visibility:hidden}</style>
23
- <script>
24
- (function(){
25
- var dark = localStorage.getItem('theme') === 'dark';
26
- document.write(
27
- '<link rel="stylesheet" href="css/app-' + (dark?'dark':'light') + '.css" id="' + (dark?'dark':'light') + 'Theme">' +
28
- '<link rel="stylesheet" href="css/app-' + (dark?'light':'dark') + '.css" id="' + (dark?'light':'dark') + 'Theme" disabled>'
29
- );
30
- if(dark) document.documentElement.style.backgroundColor = '#1a1a2e';
31
- })();
32
- </script>
33
- <style>html{visibility:visible}</style>
34
-
35
  </head>
36
  <body class="vertical light ">
37
  <div class="wrapper">
@@ -41,12 +28,6 @@
41
  </button>
42
 
43
  <ul class="nav">
44
- <li class="nav-item">
45
- <a class="nav-link text-muted my-2" href="#" id="modeSwitcher" data-mode="light">
46
- <i data-feather="sun"></i>
47
- </a>
48
- </li>
49
-
50
 
51
 
52
  <li class="nav-item dropdown">
@@ -618,11 +599,6 @@
618
  </script>
619
  <script src="js/apps.js"></script>
620
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-56159088-1"></script>
621
- <script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.29.1/feather.min.js"></script>
622
-
623
- <script>
624
- feather.replace();
625
- </script>
626
  <script>
627
  window.dataLayer = window.dataLayer || [];
628
 
@@ -1058,8 +1034,22 @@
1058
 
1059
  chartElement.innerHTML = '';
1060
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1061
  setTimeout(() => {
1062
  try {
 
1063
  const options = {
1064
  chart: {
1065
  type: 'area',
@@ -1086,36 +1076,19 @@
1086
  },
1087
  colors: ['#2E93fA', '#FF9800', '#66DA26'],
1088
  series: [
1089
- {
1090
- name: 'Total Consultas',
1091
- data: totalConsultations
1092
- },
1093
- {
1094
- name: 'Con Retinopatía',
1095
- data: positiveCases
1096
- },
1097
- {
1098
- name: 'Sin Retinopatía',
1099
- data: negativeCases
1100
- }
1101
  ],
1102
  xaxis: {
1103
- categories: dates,
1104
- type: 'category',
1105
  labels: {
1106
- formatter: function(value) {
1107
- if (value) {
1108
- try {
1109
- const date = new Date(value);
1110
- return date.toLocaleDateString('es-ES', {
1111
- day: '2-digit',
1112
- month: '2-digit'
1113
- });
1114
- } catch (e) {
1115
- return value;
1116
- }
1117
- }
1118
- return value;
1119
  },
1120
  style: {
1121
  fontSize: '12px',
@@ -1139,7 +1112,9 @@
1139
  }
1140
  },
1141
  min: 0,
 
1142
  labels: {
 
1143
  style: {
1144
  fontSize: '12px',
1145
  fontFamily: 'inherit'
@@ -1151,20 +1126,13 @@
1151
  intersect: false,
1152
  x: {
1153
  formatter: function(value) {
1154
- if (value) {
1155
- try {
1156
- const date = new Date(value);
1157
- return date.toLocaleDateString('es-ES', {
1158
- weekday: 'long',
1159
- year: 'numeric',
1160
- month: 'long',
1161
- day: 'numeric'
1162
- });
1163
- } catch (e) {
1164
- return value;
1165
- }
1166
- }
1167
- return value;
1168
  }
1169
  },
1170
  y: {
@@ -1900,6 +1868,7 @@
1900
  }
1901
 
1902
  window.addEventListener('load', centerWindow);
 
1903
  })();
1904
  </script>
1905
 
@@ -1987,88 +1956,16 @@
1987
  });
1988
  </script>
1989
  <script>
1990
- (function () {
1991
- // Feather: reemplazar SOLO íconos que aún son <i>, nunca tocar SVGs ya renderizados
1992
- function _initFeather() {
1993
- if (typeof feather === 'undefined') return;
1994
- // Solo actuar si hay elementos <i data-feather> sin reemplazar todavía
1995
- var pending = document.querySelectorAll('i[data-feather]');
1996
- if (pending.length > 0) {
1997
- feather.replace({ 'stroke-width': 1.8 });
1998
  }
1999
- }
2000
-
2001
- document.addEventListener('DOMContentLoaded', _initFeather);
2002
-
2003
- var _fObserverActive = false;
2004
- document.addEventListener('DOMContentLoaded', function () {
2005
- var observer = new MutationObserver(function (mutations) {
2006
- if (_fObserverActive) return; // evitar loops
2007
- var hasPendingFeather = mutations.some(function (m) {
2008
- return Array.from(m.addedNodes).some(function (n) {
2009
- if (n.nodeType !== 1) return false;
2010
- // Solo disparar si el nodo agregado tiene <i data-feather> dentro
2011
- return n.matches('i[data-feather]') || n.querySelector('i[data-feather]');
2012
- });
2013
- });
2014
- if (hasPendingFeather) {
2015
- _fObserverActive = true;
2016
- _initFeather();
2017
- setTimeout(function () { _fObserverActive = false; }, 50);
2018
- }
2019
  });
2020
- observer.observe(document.body, { childList: true, subtree: true });
2021
- });
2022
- })();
2023
- </script>
2024
-
2025
- <script>
2026
- (function () {
2027
- function applyTheme(theme) {
2028
- var lightTheme = document.getElementById('lightTheme');
2029
- var darkTheme = document.getElementById('darkTheme');
2030
- if (!lightTheme || !darkTheme) return;
2031
- if (theme === 'dark') {
2032
- lightTheme.disabled = true;
2033
- darkTheme.disabled = false;
2034
- document.documentElement.style.backgroundColor = '#1a1a2e';
2035
- } else {
2036
- lightTheme.disabled = false;
2037
- darkTheme.disabled = true;
2038
- document.documentElement.style.backgroundColor = '';
2039
- }
2040
- // ✅ NO tocar visibility aquí — solo el script del <head> debe hacerlo al cargar
2041
- }
2042
-
2043
- // Aplicar tema guardado (sin tocar visibility)
2044
- applyTheme(localStorage.getItem('theme') || 'light');
2045
-
2046
- // Sincronizar entre pestañas
2047
- window.addEventListener('storage', function (e) {
2048
- if (e.key === 'theme') applyTheme(e.newValue);
2049
- });
2050
-
2051
- function switchTheme() {
2052
- var darkTheme = document.getElementById('darkTheme');
2053
- if (!darkTheme) return;
2054
- var newTheme = darkTheme.disabled ? 'dark' : 'light';
2055
- applyTheme(newTheme);
2056
- localStorage.setItem('theme', newTheme);
2057
- }
2058
-
2059
- document.addEventListener('DOMContentLoaded', function () {
2060
- var btn = document.getElementById('modeSwitcher');
2061
- if (!btn) return;
2062
- var newBtn = btn.cloneNode(true);
2063
- btn.parentNode.replaceChild(newBtn, btn);
2064
- newBtn.addEventListener('click', function (e) {
2065
- e.preventDefault();
2066
- e.stopPropagation();
2067
- switchTheme();
2068
  });
2069
- });
2070
- })();
2071
  </script>
2072
-
2073
  </body>
2074
  </html>
 
3
  <head>
4
  <meta charset="utf-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
6
  <meta name="description" content="">
7
  <meta name="author" content="">
 
8
  <link rel="icon" href="favicon.ico">
9
  <title>Dashboard</title>
10
  <link rel="stylesheet" href="css/simplebar.css">
 
17
  <link rel="stylesheet" href="css/jquery.timepicker.css">
18
  <link rel="stylesheet" href="css/quill.snow.css">
19
  <link rel="stylesheet" href="css/daterangepicker.css">
20
+ <link rel="stylesheet" href="css/app-light.css" id="lightTheme">
21
+ <link rel="stylesheet" href="css/app-dark.css" id="darkTheme" disabled>
 
 
 
 
 
 
 
 
 
 
 
22
  </head>
23
  <body class="vertical light ">
24
  <div class="wrapper">
 
28
  </button>
29
 
30
  <ul class="nav">
 
 
 
 
 
 
31
 
32
 
33
  <li class="nav-item dropdown">
 
599
  </script>
600
  <script src="js/apps.js"></script>
601
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-56159088-1"></script>
 
 
 
 
 
602
  <script>
603
  window.dataLayer = window.dataLayer || [];
604
 
 
1034
 
1035
  chartElement.innerHTML = '';
1036
 
1037
+ // Convertir "YYYY-MM-DD" a timestamp UTC mediodia para evitar
1038
+ // desfases de zona horaria que desplazan el dia al anterior
1039
+ function dateStrToTs(d) {
1040
+ var parts = d.split('-').map(Number);
1041
+ return Date.UTC(parts[0], parts[1] - 1, parts[2], 12, 0, 0);
1042
+ }
1043
+
1044
+ // Series con objetos {x: timestamp, y: valor}
1045
+ // ApexCharts maneja las fechas nativamente con type:'datetime'
1046
+ function toSeries(values) {
1047
+ return dates.map(function(d, i) { return { x: dateStrToTs(d), y: values[i] }; });
1048
+ }
1049
+
1050
  setTimeout(() => {
1051
  try {
1052
+ var maxVal = Math.max.apply(null, totalConsultations) || 1;
1053
  const options = {
1054
  chart: {
1055
  type: 'area',
 
1076
  },
1077
  colors: ['#2E93fA', '#FF9800', '#66DA26'],
1078
  series: [
1079
+ { name: 'Total Consultas', data: toSeries(totalConsultations) },
1080
+ { name: 'Con Retinopatía', data: toSeries(positiveCases) },
1081
+ { name: 'Sin Retinopatía', data: toSeries(negativeCases) }
 
 
 
 
 
 
 
 
 
1082
  ],
1083
  xaxis: {
1084
+ type: 'datetime',
 
1085
  labels: {
1086
+ datetimeUTC: false,
1087
+ datetimeFormatter: {
1088
+ year: 'yyyy',
1089
+ month: "MMM 'yy",
1090
+ day: 'dd/MM',
1091
+ hour: 'HH:mm'
 
 
 
 
 
 
 
1092
  },
1093
  style: {
1094
  fontSize: '12px',
 
1112
  }
1113
  },
1114
  min: 0,
1115
+ tickAmount: maxVal,
1116
  labels: {
1117
+ formatter: function(val) { return Math.floor(val); },
1118
  style: {
1119
  fontSize: '12px',
1120
  fontFamily: 'inherit'
 
1126
  intersect: false,
1127
  x: {
1128
  formatter: function(value) {
1129
+ var d = new Date(value);
1130
+ return d.toLocaleDateString('es-ES', {
1131
+ weekday: 'long',
1132
+ year: 'numeric',
1133
+ month: 'long',
1134
+ day: 'numeric'
1135
+ });
 
 
 
 
 
 
 
1136
  }
1137
  },
1138
  y: {
 
1868
  }
1869
 
1870
  window.addEventListener('load', centerWindow);
1871
+ window.addEventListener('focus', centerWindow);
1872
  })();
1873
  </script>
1874
 
 
1956
  });
1957
  </script>
1958
  <script>
1959
+ function _initFeather() {
1960
+ if (typeof feather !== 'undefined') feather.replace({ 'stroke-width': 1.8 });
 
 
 
 
 
 
1961
  }
1962
+ document.addEventListener('DOMContentLoaded', _initFeather);
1963
+ var _fObserver = new MutationObserver(function(mutations) {
1964
+ if (mutations.some(function(m){ return m.addedNodes.length > 0; })) _initFeather();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1965
  });
1966
+ document.addEventListener('DOMContentLoaded', function() {
1967
+ _fObserver.observe(document.body, { childList: true, subtree: true });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1968
  });
 
 
1969
  </script>
 
1970
  </body>
1971
  </html>