194 lines
12 KiB
HTML
194 lines
12 KiB
HTML
|
<!doctype html>
|
||
|
|
<html >
|
||
|
|
<head>
|
||
|
|
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
|
|
<!--[if lt IE 9]>
|
||
|
|
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
|
||
|
|
<![endif]-->
|
||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||
|
|
<meta http-equiv="Content-Style-Type" content="text/css" />
|
||
|
|
|
||
|
|
<link href="https://fonts.googleapis.com/css?family=Domine|Montserrat" rel="stylesheet">
|
||
|
|
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
|
||
|
|
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
|
||
|
|
<!-- <link rel="stylesheet" type="text/css" href="template.css" /> -->
|
||
|
|
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/diversen/pandoc-bootstrap-adaptive-template/959c3622/template.css" />
|
||
|
|
|
||
|
|
<link href="https://vjs.zencdn.net/5.4.4/video-js.css" rel="stylesheet" />
|
||
|
|
|
||
|
|
<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
|
||
|
|
<!-- <script type='text/javascript' src='menu/js/jquery.cookie.js'></script> -->
|
||
|
|
<!-- <script type='text/javascript' src='menu/js/jquery.hoverIntent.minified.js'></script> -->
|
||
|
|
<!-- <script type='text/javascript' src='menu/js/jquery.dcjqaccordion.2.7.min.js'></script> -->
|
||
|
|
<!-- <link href="menu/css/skins/blue.css" rel="stylesheet" type="text/css" /> -->
|
||
|
|
<!-- <link href="menu/css/skins/graphite.css" rel="stylesheet" type="text/css" /> -->
|
||
|
|
<!-- <link href="menu/css/skins/grey.css" rel="stylesheet" type="text/css" /> -->
|
||
|
|
<!-- <script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script> -->
|
||
|
|
<!-- <script src="script.js"></script> -->
|
||
|
|
<!-- <script src="jquery.sticky-kit.js "></script> -->
|
||
|
|
<script type='text/javascript' src='https://cdn.rawgit.com/diversen/pandoc-bootstrap-adaptive-template/959c3622/menu/js/jquery.cookie.js'></script>
|
||
|
|
<script type='text/javascript' src='https://cdn.rawgit.com/diversen/pandoc-bootstrap-adaptive-template/959c3622/menu/js/jquery.hoverIntent.minified.js'></script>
|
||
|
|
<script type='text/javascript' src='https://cdn.rawgit.com/diversen/pandoc-bootstrap-adaptive-template/959c3622/menu/js/jquery.dcjqaccordion.2.7.min.js'></script>
|
||
|
|
|
||
|
|
<link href="https://cdn.rawgit.com/diversen/pandoc-bootstrap-adaptive-template/959c3622/menu/css/skins/blue.css" rel="stylesheet" type="text/css" />
|
||
|
|
<link href="https://cdn.rawgit.com/diversen/pandoc-bootstrap-adaptive-template/959c3622/menu/css/skins/graphite.css" rel="stylesheet" type="text/css" />
|
||
|
|
<link href="https://cdn.rawgit.com/diversen/pandoc-bootstrap-adaptive-template/959c3622/menu/css/skins/grey.css" rel="stylesheet" type="text/css" />
|
||
|
|
<link href="https://cdn.rawgit.com/ryangrose/easy-pandoc-templates/948e28e5/css/elegant_bootstrap.css" rel="stylesheet" type="text/css" />
|
||
|
|
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
|
||
|
|
|
||
|
|
<script src="https://cdn.rawgit.com/diversen/pandoc-bootstrap-adaptive-template/959c3622/script.js"></script>
|
||
|
|
|
||
|
|
<script src="https://cdn.rawgit.com/diversen/pandoc-bootstrap-adaptive-template/959c3622/jquery.sticky-kit.js"></script>
|
||
|
|
<!-- ECharts enabling -->
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js" integrity="sha256-oZEaXgWqxLmr12VzCK9eGOuHIi3XPZ/KsJXXFjtyvZA=" crossorigin="anonymous"></script>
|
||
|
|
<meta name="generator" content="pandoc" />
|
||
|
|
<title>MiniDocs: Calendarios</title>
|
||
|
|
<style type="text/css">code{white-space: pre;}</style>
|
||
|
|
<style type="text/css">body { font-family: Domine, Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif} h1, h2, h3, h4, h5, h6 { font-family: Montserrat, sans }</style>
|
||
|
|
<style type="text/css">.info {
|
||
|
|
-moz-border-radius: 6px;
|
||
|
|
-webkit-border-radius: 6px;
|
||
|
|
background-color: #f0f7fb;
|
||
|
|
border: solid 1px #3498db;
|
||
|
|
border-radius: 6px;
|
||
|
|
line-height: 18px;
|
||
|
|
overflow: hidden;
|
||
|
|
padding: 9px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="navbar navbar-static-top navbar-expand-sm px-0 pt-0">
|
||
|
|
<div class="navbar-inner container-fluid">
|
||
|
|
<div class="container">
|
||
|
|
<span class="doc-title">MiniDocs: Calendarios</span>
|
||
|
|
<ul class="nav pull-right doc-info">
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="container">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-12">
|
||
|
|
<div data-st-class="LeTextSnippet"
|
||
|
|
data-st-data="OrderedDictionary{'id':'Xm67vx2hDQCQfNiIAFQ03w==','parent':'d7pnmr5dy8j995l5sbpmijayp','created':'26 July 2022 4:31:48.539936 pm','modified':'26 July 2022 4:40:56.082426 pm','creator':'<unknown>','modifier':'<unknown>','tags':Set[]}">
|
||
|
|
<p>MiniDocs también permite exportar documentos con vistas
|
||
|
|
interactivas HTML, siempre y cuando los objetos en una
|
||
|
|
narrativa de datos tengan métodos que permiten producir
|
||
|
|
vistas. Por ejemplo, es posible usar <a
|
||
|
|
href="https://code.tupale.co/mutabiT/EchartsPharo">EchartsPharo</a>
|
||
|
|
para producir una vista de un calendario interactivo, dado
|
||
|
|
un conjunto de datos.</p>
|
||
|
|
</div>
|
||
|
|
<div data-st-class="LeTextSnippet"
|
||
|
|
data-st-data="OrderedDictionary{'id':'bzCP5B2hDQCQg0xUAFQ03w==','parent':'d7pnmr5dy8j995l5sbpmijayp','created':'26 July 2022 4:40:59.04872 pm','modified':'26 July 2022 4:41:20.148041 pm','creator':'<unknown>','modifier':'<unknown>','tags':Set[]}">
|
||
|
|
<p>Empecemos por definir un conjunto de eventos:</p>
|
||
|
|
</div>
|
||
|
|
<div data-st-class="LePharoSnippet"
|
||
|
|
data-st-data="OrderedDictionary{'id':'NTIYxh2hDQCQfyBKAFQ03w==','parent':'d7pnmr5dy8j995l5sbpmijayp','created':'26 July 2022 4:32:26.836369 pm','modified':'26 July 2022 4:43:42.246158 pm','creator':'<unknown>','modifier':'<unknown>','tags':Set[]}">
|
||
|
|
<pre class="smalltalk"><code>citasOftalmologia := EcEvent new
|
||
|
|
name: 'Cita en Oftalmología';
|
||
|
|
dates: #('2022-01-25' '2022-03-19');
|
||
|
|
color: Color orange "asHexString";
|
||
|
|
type: 'graph'</code></pre>
|
||
|
|
</div>
|
||
|
|
<div data-st-class="LePharoSnippet"
|
||
|
|
data-st-data="OrderedDictionary{'id':'EwkO5h2hDQCQhXS9AFQ03w==','parent':'d7pnmr5dy8j995l5sbpmijayp','created':'26 July 2022 4:41:23.041501 pm','modified':'26 July 2022 4:43:11.646316 pm','creator':'<unknown>','modifier':'<unknown>','tags':Set[]}">
|
||
|
|
<pre class="smalltalk"><code>quejasSupersalud := EcEvent new
|
||
|
|
name: 'Queja en Supersalud';
|
||
|
|
dates: #('2022-02-16' '2022-03-26' '2022-06-21');
|
||
|
|
color: Color green ;
|
||
|
|
type: 'graph'</code></pre>
|
||
|
|
</div>
|
||
|
|
<div data-st-class="LeTextSnippet"
|
||
|
|
data-st-data="OrderedDictionary{'id':'bLcz6B2hDQCQioViAFQ03w==','parent':'d7pnmr5dy8j995l5sbpmijayp','created':'26 July 2022 4:42:00.944331 pm','modified':'26 July 2022 4:42:17.147409 pm','creator':'<unknown>','modifier':'<unknown>','tags':Set[]}">
|
||
|
|
<p>Ahora agreguemos los eventos a un calendario:</p>
|
||
|
|
</div>
|
||
|
|
<div data-st-class="LePharoSnippet"
|
||
|
|
data-st-data="OrderedDictionary{'id':'ujN/6R2hDQCQjFIuAFQ03w==','parent':'d7pnmr5dy8j995l5sbpmijayp','created':'26 July 2022 4:42:20.7895 pm','modified':'26 July 2022 4:44:14.709865 pm','creator':'<unknown>','modifier':'<unknown>','tags':Set[]}">
|
||
|
|
<pre class="smalltalk"><code>calendario := EcCalendar new.
|
||
|
|
calendario events
|
||
|
|
add: citasOftalmologia;
|
||
|
|
add: quejasSupersalud.
|
||
|
|
calendario</code></pre>
|
||
|
|
</div>
|
||
|
|
<div data-st-class="LeTextSnippet"
|
||
|
|
data-st-data="OrderedDictionary{'id':'GbIS8h2hDQCQkK2MAFQ03w==','parent':'d7pnmr5dy8j995l5sbpmijayp','created':'26 July 2022 4:44:45.962014 pm','modified':'26 July 2022 4:45:03.976602 pm','creator':'<unknown>','modifier':'<unknown>','tags':Set[]}">
|
||
|
|
<p>Y exportémoslo como una vista interactiva en HTML:</p>
|
||
|
|
</div>
|
||
|
|
<div data-st-class="LePharoSnippet"
|
||
|
|
data-st-data="OrderedDictionary{'id':'DENh4CqhDQCy/PQ7D7m3Tw==','parent':'d7pnmr5dy8j995l5sbpmijayp','created':'27 July 2022 8:10:22.407306 am','modified':'27 July 2022 8:11:02.87578 am','creator':'<unknown>','modifier':'<unknown>','tags':Set['output']}">
|
||
|
|
<div id="calendar" style="width:90vw;height:400px;">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<script type="text/javascript">
|
||
|
|
var myCalendar = echarts.init(document.getElementById('calendar'));
|
||
|
|
var option = {
|
||
|
|
tooltip: {},
|
||
|
|
animation: true,
|
||
|
|
animationDuration: 500,
|
||
|
|
|
||
|
|
legend: {
|
||
|
|
data:['Cita en Oftalmología','Queja en Supersalud'],left:'0'},
|
||
|
|
|
||
|
|
calendar: {
|
||
|
|
top:'middle',left:'0',orient:'horizontal',cellSize: 40,
|
||
|
|
yearLabel: {
|
||
|
|
margin: 50,
|
||
|
|
fontSize: 30,
|
||
|
|
color:'#999'},
|
||
|
|
dayLabel: {
|
||
|
|
firstDay: 1,
|
||
|
|
nameMap:'cn'},
|
||
|
|
monthLabel: {
|
||
|
|
nameMap:'cn',margin: 15,
|
||
|
|
fontSize: 20,
|
||
|
|
color:'#999'},
|
||
|
|
range:['2022-01-15','2022-07-01']},
|
||
|
|
|
||
|
|
series: [
|
||
|
|
{ type:'graph',
|
||
|
|
name:'Cita en Oftalmología',
|
||
|
|
edgeSymbol: ['none','arrow'],
|
||
|
|
coordinateSystem:'calendar',
|
||
|
|
symbolSize: 15,
|
||
|
|
itemStyle: {
|
||
|
|
color:'#FF9900',
|
||
|
|
shadowBlur: 9,
|
||
|
|
shadowOffsetX: 1.5,
|
||
|
|
shadowOffsetY: 3,
|
||
|
|
shadowColor:'#555'},
|
||
|
|
data:[['2022-01-25',1],['2022-03-19',2]],
|
||
|
|
z: 3
|
||
|
|
},
|
||
|
|
{ type:'graph',
|
||
|
|
name:'Queja en Supersalud',
|
||
|
|
edgeSymbol: ['none','arrow'],
|
||
|
|
coordinateSystem:'calendar',
|
||
|
|
symbolSize: 15,
|
||
|
|
itemStyle: {
|
||
|
|
color:'#00FF00',
|
||
|
|
shadowBlur: 9,
|
||
|
|
shadowOffsetX: 1.5,
|
||
|
|
shadowOffsetY: 3,
|
||
|
|
shadowColor:'#555'},
|
||
|
|
data:[['2022-02-16',1],['2022-03-26',2],['2022-06-21',3]],
|
||
|
|
z: 3
|
||
|
|
},]
|
||
|
|
};
|
||
|
|
myCalendar.setOption(option);
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script src="https://vjs.zencdn.net/5.4.4/video.js"></script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|