MiniDocs/wiki/es/minidocs-calendarios--d7pnm.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{&#39;id&#39;:&#39;Xm67vx2hDQCQfNiIAFQ03w==&#39;,&#39;parent&#39;:&#39;d7pnmr5dy8j995l5sbpmijayp&#39;,&#39;created&#39;:&#39;26 July 2022 4:31:48.539936 pm&#39;,&#39;modified&#39;:&#39;26 July 2022 4:40:56.082426 pm&#39;,&#39;creator&#39;:&#39;&lt;unknown&gt;&#39;,&#39;modifier&#39;:&#39;&lt;unknown&gt;&#39;,&#39;tags&#39;: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{&#39;id&#39;:&#39;bzCP5B2hDQCQg0xUAFQ03w==&#39;,&#39;parent&#39;:&#39;d7pnmr5dy8j995l5sbpmijayp&#39;,&#39;created&#39;:&#39;26 July 2022 4:40:59.04872 pm&#39;,&#39;modified&#39;:&#39;26 July 2022 4:41:20.148041 pm&#39;,&#39;creator&#39;:&#39;&lt;unknown&gt;&#39;,&#39;modifier&#39;:&#39;&lt;unknown&gt;&#39;,&#39;tags&#39;:Set[]}">
<p>Empecemos por definir un conjunto de eventos:</p>
</div>
<div data-st-class="LePharoSnippet"
data-st-data="OrderedDictionary{&#39;id&#39;:&#39;NTIYxh2hDQCQfyBKAFQ03w==&#39;,&#39;parent&#39;:&#39;d7pnmr5dy8j995l5sbpmijayp&#39;,&#39;created&#39;:&#39;26 July 2022 4:32:26.836369 pm&#39;,&#39;modified&#39;:&#39;26 July 2022 4:43:42.246158 pm&#39;,&#39;creator&#39;:&#39;&lt;unknown&gt;&#39;,&#39;modifier&#39;:&#39;&lt;unknown&gt;&#39;,&#39;tags&#39;:Set[]}">
<pre class="smalltalk"><code>citasOftalmologia := EcEvent new
name: &#39;Cita en Oftalmología&#39;;
dates: #(&#39;2022-01-25&#39; &#39;2022-03-19&#39;);
color: Color orange &quot;asHexString&quot;;
type: &#39;graph&#39;</code></pre>
</div>
<div data-st-class="LePharoSnippet"
data-st-data="OrderedDictionary{&#39;id&#39;:&#39;EwkO5h2hDQCQhXS9AFQ03w==&#39;,&#39;parent&#39;:&#39;d7pnmr5dy8j995l5sbpmijayp&#39;,&#39;created&#39;:&#39;26 July 2022 4:41:23.041501 pm&#39;,&#39;modified&#39;:&#39;26 July 2022 4:43:11.646316 pm&#39;,&#39;creator&#39;:&#39;&lt;unknown&gt;&#39;,&#39;modifier&#39;:&#39;&lt;unknown&gt;&#39;,&#39;tags&#39;:Set[]}">
<pre class="smalltalk"><code>quejasSupersalud := EcEvent new
name: &#39;Queja en Supersalud&#39;;
dates: #(&#39;2022-02-16&#39; &#39;2022-03-26&#39; &#39;2022-06-21&#39;);
color: Color green ;
type: &#39;graph&#39;</code></pre>
</div>
<div data-st-class="LeTextSnippet"
data-st-data="OrderedDictionary{&#39;id&#39;:&#39;bLcz6B2hDQCQioViAFQ03w==&#39;,&#39;parent&#39;:&#39;d7pnmr5dy8j995l5sbpmijayp&#39;,&#39;created&#39;:&#39;26 July 2022 4:42:00.944331 pm&#39;,&#39;modified&#39;:&#39;26 July 2022 4:42:17.147409 pm&#39;,&#39;creator&#39;:&#39;&lt;unknown&gt;&#39;,&#39;modifier&#39;:&#39;&lt;unknown&gt;&#39;,&#39;tags&#39;:Set[]}">
<p>Ahora agreguemos los eventos a un calendario:</p>
</div>
<div data-st-class="LePharoSnippet"
data-st-data="OrderedDictionary{&#39;id&#39;:&#39;ujN/6R2hDQCQjFIuAFQ03w==&#39;,&#39;parent&#39;:&#39;d7pnmr5dy8j995l5sbpmijayp&#39;,&#39;created&#39;:&#39;26 July 2022 4:42:20.7895 pm&#39;,&#39;modified&#39;:&#39;26 July 2022 4:44:14.709865 pm&#39;,&#39;creator&#39;:&#39;&lt;unknown&gt;&#39;,&#39;modifier&#39;:&#39;&lt;unknown&gt;&#39;,&#39;tags&#39;: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{&#39;id&#39;:&#39;GbIS8h2hDQCQkK2MAFQ03w==&#39;,&#39;parent&#39;:&#39;d7pnmr5dy8j995l5sbpmijayp&#39;,&#39;created&#39;:&#39;26 July 2022 4:44:45.962014 pm&#39;,&#39;modified&#39;:&#39;26 July 2022 4:45:03.976602 pm&#39;,&#39;creator&#39;:&#39;&lt;unknown&gt;&#39;,&#39;modifier&#39;:&#39;&lt;unknown&gt;&#39;,&#39;tags&#39;:Set[]}">
<p>Y exportémoslo como una vista interactiva en HTML:</p>
</div>
<div data-st-class="LePharoSnippet"
data-st-data="OrderedDictionary{&#39;id&#39;:&#39;DENh4CqhDQCy/PQ7D7m3Tw==&#39;,&#39;parent&#39;:&#39;d7pnmr5dy8j995l5sbpmijayp&#39;,&#39;created&#39;:&#39;27 July 2022 8:10:22.407306 am&#39;,&#39;modified&#39;:&#39;27 July 2022 8:11:02.87578 am&#39;,&#39;creator&#39;:&#39;&lt;unknown&gt;&#39;,&#39;modifier&#39;:&#39;&lt;unknown&gt;&#39;,&#39;tags&#39;:Set[&#39;output&#39;]}">
<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>