LUMEN

Versions

Product Name

Statistic cards

Statistic cards

Statistics are built on cards, but use custom JS to create the circular graph. There are currently three sizes for statistic cards, large, medium and small. The small card does not require a small class.

Large Stats Cards

Clicked
19%
SENT 3.965
SENT 3.965
Clicked
20%
SENT 3.965
SENT 3.965
Clicked
14%
SENT 3.965
SENT 3.965
Show Code 
<div class="ui cards">
  <div class="ui statistic round card">
    <div class="title">
      <i class="hand point up outline icon"></i> 
      Clicked
    </div>

    <div class="content">
      <div class="progress round centered first"></div>
    </div>

    <div class="extra content">
      <div class="stats">
        <div class="stat">
          SENT
          <span class="ui text green">3.965</span>
        </div>
        <div class="stat">
          SENT
          <span class="ui text yellow">3.965</span>
        </div>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
  $('.progress.round').cfCircleProgress({
    theme: "statistic",
    postfix: "%",
    prefix: '',
    sideSize: 100, //this is default value; optional
    lineWidth: 10, //this is default value; optional
    bars: [
      { 
        value: 89, 
        bgColor: '#eeeeee', 
        color: '#ffb90e' 
      }
    ]
  });
</script>

Disabled/unavailable stats

None
0%
NONE 0
Show Code 
<div class="ui cards">
  <div class="ui statistic round card unavailable">
    <div class="title">
      None
    </div>

    <div class="content">
      <div class="progress round centered fourth"></div>
    </div>

    <div class="extra content">
      <div class="stats">
        <div class="stat">
          NONE
          <span class="ui text yellow">0</span>
        </div>
      </div>
    </div>
  </div>
</div>

Large Stats with tool tips (pop-ups)

Clicked
20%
SENT 89
FAILED 11
Show Code 
<div class="ui cards">
  <div class="ui statistic round card">
    <div class="title">
      <i class="hand point up outline icon"></i> 
      Clicked
    </div>
    <div class="content">
      <div class="progress round centered first"  data-tooltip="89 out of 100 emails sucessfully sent"></div>
    </div>
    <div class="extra content">
      <div class="stats">
        <div class="stat" data-tooltip="89 emails were sent successfully">
          SENT
          <span class="ui text green">89</span>
        </div>
        <div class="stat" data-tooltip="11 emails failed to send">
          FAILED
          <span class="ui text yellow">11</span>
        </div>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
  $('.progress.round').cfCircleProgress({
    theme: "statistic",
    postfix: "%",
    prefix: '',
    bars: [
      { 
        value: 89, 
        bgColor: '#eeeeee', 
        color: '#ffb90e' 
      }
    ]
  });
</script>

Large Stats In Grid

Clicked
20%
SENT 3.965
SENT 3.965
Clicked
19%
SENT 3.965
SENT 3.965
Clicked
14%
SENT 3.965
SENT 3.965
None
0%
NONE 0
Show Code 
<div class="ui four column cards grid">
  <div class="column">
    <div class="ui statistic round card">
      <div class="title">
        <i class="hand point up outline icon"></i> 
        Clicked
      </div>
      <div class="content">
        <div class="progress round centered first"></div>
      </div>
      <div class="extra content">
        <div class="stats">
          <div class="stat">
            SENT
            <span class="ui text green">3.965</span>
          </div>
          <div class="stat">
            SENT
            <span class="ui text yellow">3.965</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="column">
    <div class="ui statistic round card">
      <div class="title">
        <i class="hand point up outline icon"></i> 
        Clicked
      </div>
      <div class="content">
        <div class="progress round centered second"></div>
      </div>
      <div class="extra content">
        <div class="stats">
          <div class="stat">
            SENT
            <span class="ui text green">3.965</span>
          </div>
          <div class="stat">
            SENT
            <span class="ui text yellow">3.965</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="column">
    <div class="ui statistic round card">
      <div class="title">
        <i class="hand point up outline icon"></i> 
        Clicked
      </div>
      <div class="content">
        <div class="progress round centered third"></div>
      </div>
      <div class="extra content">
        <div class="stats">
          <div class="stat">
            SENT
            <span class="ui text green">3.965</span>
          </div>
          <div class="stat">
            SENT
            <span class="ui text yellow">3.965</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="column">
    <div class="ui statistic round card unavailable">
      <div class="title">
        None
      </div>
      <div class="content">
        <div class="progress round centered fourth"></div>
      </div>
      <div class="extra content">
        <div class="stats">
          <div class="stat">
            NONE
            <span class="ui text yellow">0</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
  $('.progress.round').cfCircleProgress({
    theme: "statistic",
    postfix: "%",
    prefix: '',
    bars: [
      { 
        value: 89, 
        bgColor: '#eeeeee', 
        color: '#ffb90e' 
      }
    ]
  });
  //repeat for each card
</script>

Medium Stats

Clicked
20%

SENT

35,100 / 71,502
Show Code 
<div class="ui cards">
  <div class="ui statistic round card">
    <div class="ui middle aligned two column grid">
      <div class="left aligned column title">
        <i class="hand point up outline icon"></i> 
        Clicked
      </div>
      <div class="right aligned column">
        <!--  Note: the classes 'small one' are not necessary and are simply there for js selecting purposes -->
        <div class="progress round right aligned small one"></div>
      </div>
    </div>
    <div class="stats content">
      <div class="stat">
        <p class="small grey bold text">SENT</p>
        <span class="large green bold text">35,100</span>
        <span class="large text"> / </span>
        <span class="large grey bold text">71,502</span></h4>
      </div>
    </div>
  </div>
</div>


<script>
  //Note: the classes 'small one' are not necessary and are simply there for js selecting purposes
  $('.progress.round.small.one').each(function(){
    $(this).cfCircleProgress({
      theme: "statistic",
      postfix: "%",
      sideSize: 50,
      lineWidth: 4,
      bars: [
        { 
          value: 49, 
          bgColor: '#eeeeee', 
          color: '#06ae78' 
        }
      ]
    });
  })
</script>

Medium disabled/unavailable

Sent
0%

SENT

-- / --
Show Code 
<div class="ui cards">
  <div class="ui statistic round card unavailable">
    <div class="ui middle aligned two column grid">
      <div class="left aligned column title">
        <i class="hand point up outline icon"></i> 
        Sent
      </div>
      <div class="right aligned column">
        <div class="progress round right aligned small four"></div>
      </div>
    </div>
    <div class="stats content">
      <div class="stat">
        <p class="small grey bold text">SENT</p>
        <span class="large green bold text">--</span>
        <span class="large text"> / </span>
        <span class="large grey bold text">--</span></h4>
      </div>
    </div>
  </div>
</div>

<script>
  //Note: the classes 'small one' are not necessary and are simply there for js selecting purposes. Could be 'pickle feather'
  $('.progress.round.small.one').each(function(){
    $(this).cfCircleProgress({
      theme: "statistic",
      postfix: "%",
      sideSize: 50,
      lineWidth: 4,
      bars: [
        { 
          value: 49, 
          bgColor: '#eeeeee', 
          color: '#06ae78' 
        }
      ]
    });
  })
</script>

Medium Stats In Grid

Clicked
20%

SENT

35,100 / 71,502
Clicked
20%

SENT

35,100 / 71,502
Clicked
14%

SENT

35,100 / 71,502
Sent
0%

SENT

-- / --
Show Code 
<div class="ui four column cards grid">
  <div class="column">
    <div class="ui statistic round card">
      <div class="ui middle aligned two column grid">
        <div class="left aligned column title">
          <i class="hand point up outline icon"></i> 
          Clicked
        </div>
        <div class="right aligned column">
          <div class="progress round right aligned small one"></div>
        </div>
      </div>
      <div class="stats content">
        <div class="stat">
          <p class="small grey bold text">SENT</p>
          <span class="large green bold text">35,100</span>
          <span class="large text"> / </span>
          <span class="large grey bold text">71,502</span></h4>
        </div>
      </div>
    </div>
  </div>
  <div class="column">
    <div class="ui statistic round card">
      <div class="ui middle aligned two column grid">
        <div class="left aligned column title">
          <i class="hand point up outline icon"></i> 
          Clicked
        </div>
        <div class="right aligned column">
          <div class="progress round right aligned small two"></div>
        </div>
      </div>
      <div class="stats content">
        <div class="stat">
          <p class="small grey bold text">SENT</p>
          <span class="large green bold text">35,100</span>
          <span class="large text"> / </span>
          <span class="large grey bold text">71,502</span></h4>
        </div>
      </div>
    </div>
  </div>
  <div class="column">
    <div class="ui statistic round card">
      <div class="ui middle aligned two column grid">
        <div class="left aligned column title">
          <i class="hand point up outline icon"></i> 
          Clicked
        </div>
        <div class="right aligned column">
          <div class="progress round right aligned small three"></div>
        </div>
      </div>
      <div class="stats content">
        <div class="stat">
          <p class="small grey bold text">SENT</p>
          <span class="large green bold text">35,100</span>
          <span class="large text"> / </span>
          <span class="large grey bold text">71,502</span></h4>
        </div>
      </div>
    </div>
  </div>
  <div class="column">
    <div class="ui statistic round card unavailable">
      <div class="ui middle aligned two column grid">
        <div class="left aligned column title">
          <i class="hand point up outline icon"></i> 
          Sent
        </div>
        <div class="right aligned column">
          <div class="progress round right aligned small four"></div>
        </div>
      </div>
      <div class="stats content">
        <div class="stat">
          <p class="small grey bold text">SENT</p>
          <span class="large green bold text">--</span>
          <span class="large text"> / </span>
          <span class="large grey bold text">--</span></h4>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  //Note: the classes 'small one' are not necessary and are simply there for js selecting purposes. Could be 'pickle feather'
  $('.progress.round.small.one').cfCircleProgress({
    theme: "statistic",
    postfix: "%",
    sideSize: 50,
    lineWidth: 4,
    bars: [
      { 
        value: 49, 
        bgColor: '#eeeeee', 
        color: '#06ae78' 
      }
    ]
  });
  //repeat for each
</script>

Small Stats

AVERAGE CART VALUE
$997
GROSS
$45,862
EARNINGS PER CLICK
$6,551.71
Show Code 
<div class="ui cards">
  <div class="ui statistic card">
    <div class="content">
      <div class="ui items">
        <div class="item">
          <div class="ui image">
            <i class="large icons">
              <i class="big thin green circle icon"></i>
              <i class="chart line inverted icon"></i>
            </i>
          </div>
          <div class="content">
            <div class="description" title="Earnings Per click">
              AVERAGE CART VALUE
            </div>
            <div class="header" title="$454">$997</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Disabled/Unavailable

EARNINGS PER CLICK
$6,551.71
Show Code 
<div class="ui cards">
  <div class="ui statistic card unavailable">
    <div class="content">
      <div class="ui items">
        <div class="item">
          <div class="ui image">
            <i class="large icons">
              <i class="big thin orange circle icon"></i>
              <i class="home inverted icon"></i>
            </i>
          </div>
          <div class="content">
            <div class="description" title="Earnings Per click">
              EARNINGS PER CLICK
            </div>
            <div class="header" title="$454">$6,551.71</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

With Link

AVERAGE CART VALUE
$997
Show Code 
<div class="ui cards">
  <a href="#" class="ui statistic card">
    <div class="content">
      <div class="ui items">
        <div class="item">
          <div class="ui image">
            <i class="large icons">
              <i class="big thin green circle icon"></i>
              <i class="chart line inverted icon"></i>
            </i>
          </div>
          <div class="content">
            <div class="description" title="Earnings Per click">
              AVERAGE CART VALUE
            </div>
            <div class="header" title="$454">$997</div>
          </div>
        </div>
      </div>
    </div>
  </a>
</div>

Small Stats In Grid

AVERAGE CART VALUE
$997
GROSS
$45,862
EARNINGS PER CLICK
$6,551.71
EARNINGS PER CLICK
$6,551.71
Show Code 
<div class="ui four column cards grid">
  <div class="column">
    <div class="ui statistic card fluid">
      <div class="content">
        <div class="ui items">
          <div class="item">
            <div class="ui image">
              <i class="large icons">
                <i class="big thin green circle icon"></i>
                <i class="chart line inverted icon"></i>
              </i>
            </div>
            <div class="content">
              <div class="description" title="Earnings Per click">
                AVERAGE CART VALUE
              </div>
              <div class="header" title="$454">$997</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="column">
    <div class="ui statistic card fluid">
      <div class="content">
        <div class="ui items">
          <div class="item">
            <div class="ui image">
              <i class="large icons">
                <i class="big thin yellow circle icon"></i>
                <i class="chart bar inverted icon"></i>
              </i>
            </div>
            <div class="content">
              <div class="description" title="Earnings Per click">
                GROSS
              </div>
              <div class="header" title="$454">$45,862</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="column">
    <div class="ui statistic card fluid">
      <div class="content">
        <div class="ui items">
          <div class="item">
            <div class="ui image">
              <i class="large icons">
                <i class="big thin orange circle icon"></i>
                <i class="home inverted icon"></i>
              </i>
            </div>
            <div class="content">
              <div class="description" title="Earnings Per click">
                EARNINGS PER CLICK
              </div>
              <div class="header" title="$454">$6,551.71</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="column">
    <div class="ui statistic card unavailable">
      <div class="content">
        <div class="ui items">
          <div class="item">
            <div class="ui image">
              <i class="large icons">
                <i class="big thin orange circle icon"></i>
                <i class="home inverted icon"></i>
              </i>
            </div>
            <div class="content">
              <div class="description" title="Earnings Per click">
                EARNINGS PER CLICK
              </div>
              <div class="header" title="$454">$6,551.71</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Nested stats cards

Currently only used in Contact Profile header

26

ACTION
SCORE
Show Code 
<div class="ui cards">
  <div class="ui statistic nested card">
    <div class="progress round centered">
      <canvas class="bar centered" data-color="#E4E35D" data-bg="#0a5185" data-percent='0.25'></canvas>
    </div>
    <div class="progress round centered">
      <canvas class="bar centered" data-color="#2ccf70" data-bg="#156399" data-percent='0.14'></canvas>
    </div>
    <div class="progress round centered">
      <canvas class="bar centered" data-color="#9f58b6" data-bg="#1f71ab" data-percent='0.21'></canvas>
    </div>
    <div class="progress round centered">
      <canvas class="bar centered" data-color="#3398d8" data-bg="#2a80bf" data-percent='0.36'></canvas>
    </div>
    <div class="progress round centered">
      <canvas class="bar centered" data-color="#10be9a" data-bg="#3892d0" data-percent='0.35'></canvas>
    </div>
    <div class="score centered">
      <p>1</p>
      <span>ACTION<br>SCORE</span>
    </div>
  </div>
</div>

<script type="text/javascript">
  $('.nested.statistic .progress.round').cfCircleProgress({
    theme: 'nested',
    content: "<p>26</p><span>ACTION<br>SCORE</span>",
    sideSize: 150, //size is customizable
    lineWidth: 5, //so is line width (thickness)
    bars: [
      { value: 15, bgColor: '#0a5185', color: '#e4e35d' },
      { value: 88, bgColor: '#156399', color: '#2ccf70' },
      { value: 41, bgColor: '#1f71ab', color: '#9f58b6' },
      { value: 55, bgColor: '#3892d0', color: '#1ebd6e' },
    ]
  });
</script>

To Send Count stat

10,000
Total contact List
-5,000
Filtered
-2,000
Passed Step
3,000
To send count

Future Send List (disabled row)

10,000
Total contact List
-2,000
Filtered
--
Passed Step
3,000
To send count
10,000
Total contact List
-5,000
Filtered
-2,000
Passed Step
3,000
To send count