<!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>