<!-- INICIO: Tendencia financiera -->
<section id="grafica-evolucion" class="panel demo-card" data-component="grafica-evolucion">
  <div class="panel-heading"><h2>Tendencia financiera</h2></div>
  <div class="demo-row demo-toolbar">
    <label class="demo-label-block"
      >Período<select id="chart-period" class="demo-input">
        <option value="month">Últimos seis meses</option>
        <option value="year">Comparativa anual de ejemplo</option>
      </select></label
    ><a class="btn outline" id="download-chart" download="kc-grafica.png" href="#">Descargar PNG</a>
  </div>
  <div class="canvas-container">
    <canvas id="line-chart" role="img" aria-label="Comparación de ingresos y gastos"
      ><p>Consulta la tabla de datos debajo de la gráfica.</p></canvas
    >
  </div>
  <details class="demo-accordion">
    <summary>Ver datos en tabla</summary>
    <div class="table-scroll">
      <table>
        <thead>
          <tr>
            <th>Mes</th>
            <th>Ingresos</th>
            <th>Gastos</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td data-label="Mes">May</td>
            <td data-label="Ingresos" data-chart-income>5000</td>
            <td data-label="Gastos" data-chart-expense>3200</td>
          </tr>
          <tr>
            <td data-label="Mes">Jun</td>
            <td data-label="Ingresos" data-chart-income>6400</td>
            <td data-label="Gastos" data-chart-expense>4200</td>
          </tr>
          <tr>
            <td data-label="Mes">Jul</td>
            <td data-label="Ingresos" data-chart-income>5800</td>
            <td data-label="Gastos" data-chart-expense>3500</td>
          </tr>
          <tr>
            <td data-label="Mes">Ago</td>
            <td data-label="Ingresos" data-chart-income>7600</td>
            <td data-label="Gastos" data-chart-expense>4800</td>
          </tr>
          <tr>
            <td data-label="Mes">Sep</td>
            <td data-label="Ingresos" data-chart-income>7200</td>
            <td data-label="Gastos" data-chart-expense>4500</td>
          </tr>
          <tr>
            <td data-label="Mes">Oct</td>
            <td data-label="Ingresos" data-chart-income>8500</td>
            <td data-label="Gastos" data-chart-expense>4900</td>
          </tr>
        </tbody>
      </table>
    </div>
  </details>
</section>
<!-- FIN: Tendencia financiera -->

<!-- INICIO: Distribución por categoría -->
<section id="grafica-distribucion" class="panel demo-card" data-component="grafica-distribucion">
  <div class="panel-heading"><h2>Distribución por categoría</h2></div>
  <div class="canvas-container compact">
    <canvas
      id="donut-chart"
      role="img"
      aria-label="Gastos: comida 50%, servicios 30%, entretenimiento 20%"
      ><p>Comida 50%, servicios 30%, entretenimiento 20%.</p></canvas
    >
  </div>
  <ul class="demo-list">
    <li>Comida: $2,450 · 50%</li>
    <li>Servicios: $1,470 · 30%</li>
    <li>Entretenimiento: $980 · 20%</li>
  </ul>
</section>
<!-- FIN: Distribución por categoría -->