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