Packages

exq_ui

0.15.0
0.19.0 0.18.0 0.17.0 0.16.0 0.15.0 0.14.0 0.13.0 0.12.3 0.12.2 0.12.1 0.12.0 0.11.1 0.11.0 0.10.0 0.9.0 0.8.6 0.8.5 0.8.4 0.8.3 0.8.2 0.8.1 0.8.0 0.7.1 0.7.0 0.6.5 0.6.4 0.6.3 0.6.0 0.5.0 0.1.0

Exq UI is the UI component for Exq, a job processing library. Exq UI provides the UI dashboard to display stats on job processing.

HexDocs

Current section

Files

Jump to
Readme
30 Versions
7 Dependencies
0 Dependants
Files
Activity
exq_ui lib exq_ui_web live components realtime_stats_component.html.heex
Raw

lib/exq_ui_web/live/components/realtime_stats_component.html.heex 

<div>

  <div class="row align-items-center">

    <div class="col-12">

      <div class="d-flex align-items-center">

        <h6 class="mb-0 me-2 text-muted">Realtime</h6>

        <span class="legend me-2">

          <svg

            class="rounded me-1"

            width="16"

            height="16"

            xmlns="http://www.w3.org/2000/svg"

            aria-hidden="true"

            preserveAspectRatio="xMidYMid slice"

            focusable="false"

          >

            <rect width="100%" height="100%" fill="#007200"></rect>

          </svg>

          <span>Processed</span>

        </span>

        <span class="legend me-2">

          <svg

            class="rounded me-1"

            width="16"

            height="16"

            xmlns="http://www.w3.org/2000/svg"

            aria-hidden="true"

            preserveAspectRatio="xMidYMid slice"

            focusable="false"

          >

            <rect width="100%" height="100%" fill="#dc3545"></rect>

          </svg>

          <span>Failed</span>

        </span>

      </div>

    </div>

  </div>

  <div class="row">

    <div

      id="realtime-chart"

      class="col-12"

      phx-hook="RealtimePlot"

      phx-update="ignore"

      data-tick={@tick_interval}

    >

    </div>

  </div>

</div>