@coreui/ajax/Aurelia_Full_Esnext_Webpack/src/modules/dashboard/social-box.html

Open Source Bootstrap Admin Template

<template>
  <div class="col-sm-6 col-lg-3">
    <div class="social-box facebook">
      <i class="fa fa-facebook"></i>
      <div class="chart-wrapper">
        <canvas class="chart chart-line"
                chart="type: line; should-update: false; data.bind: chartDataFacebook; native-options.bind:options"></canvas>
      </div>
      <ul>
        <li>
          <strong>89k</strong>
          <span>friends</span>
        </li>
        <li>
          <strong>459</strong>
          <span>feeds</span>
        </li>
      </ul>
    </div>
    <!--/.social-box-->
  </div>
  <!--/.col-->

  <div class="col-sm-6 col-lg-3">
    <div class="social-box twitter">
      <i class="fa fa-twitter"></i>
      <div class="chart-wrapper">
        <canvas class="chart chart-line"
                chart="type: line; should-update: false; data.bind: chartDataTwitter; native-options.bind:options"></canvas>

      </div>
      <ul>
        <li>
          <strong>973k</strong>
          <span>followers</span>
        </li>
        <li>
          <strong>1.792</strong>
          <span>tweets</span>
        </li>
      </ul>
    </div>
    <!--/.social-box-->
  </div>
  <!--/.col-->

  <div class="col-sm-6 col-lg-3">

    <div class="social-box linkedin">
      <i class="fa fa-linkedin"></i>
      <div class="chart-wrapper">
        <canvas class="chart chart-line"
                chart="type: line; should-update: false; data.bind: chartDataLinkedin; native-options.bind:options"></canvas>

      </div>
      <ul>
        <li>
          <strong>500+</strong>
          <span>contacts</span>
        </li>
        <li>
          <strong>292</strong>
          <span>feeds</span>
        </li>
      </ul>
    </div>
    <!--/.social-box-->
  </div>
  <!--/.col-->

  <div class="col-sm-6 col-lg-3">
    <div class="social-box google-plus">
      <i class="fa fa-google-plus"></i>
      <div class="chart-wrapper">
        <canvas class="chart chart-line"
                chart="type: line; should-update: false; data.bind: chartDataGoogle; native-options.bind:options"></canvas>

      </div>
      <ul>
        <li>
          <strong>894</strong>
          <span>followers</span>
        </li>
        <li>
          <strong>92</strong>
          <span>circles</span>
        </li>
      </ul>
    </div>
    <!--/.social-box-->
  </div>

  <!--/.col-->
</template>