blur-admin/src/app/pages/dashboard/trafficChart/trafficChart.html

72 lines
2.5 KiB
HTML

<div class="channels-block" track-width="smallContainerWidth" min-width="640"
ng-class="{'small-container': smallContainerWidth}">
<div class="chart-bg"></div>
<div class="traffic-chart" id="trafficChart">
<div class="canvas-holder">
<canvas id="chart-area" width="300" height="300"></canvas>
<div class="traffic-text">
1,900,128
<span>Views Total</span>
</div>
</div>
<div class="traffic-legend"></div>
</div>
<div class="channels-info">
<div>
<div class="channels-info-item">
<div class="legend-color successLight"></div>
<p>Direct Traffic<span class="channel-number">+70%</span></p>
<div class="progress progress-sm channel-progress">
<div class="progress-bar " role="progressbar"
aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%">
</div>
</div>
</div>
<div class="channels-info-item">
<div class="legend-color danger"></div>
<p>Search engines<span class="channel-number">+22%</span></p>
<div class="progress progress-sm channel-progress">
<div class="progress-bar " role="progressbar"
aria-valuenow="22" aria-valuemin="0" aria-valuemax="100" style="width: 42%">
</div>
</div>
</div>
<div class="channels-info-item">
<div class="legend-color primary"></div>
<p>Ad Campaigns<span class="channel-number">+87%</span></p>
<div class="progress progress-sm channel-progress">
<div class="progress-bar " role="progressbar"
aria-valuenow="87" aria-valuemin="0" aria-valuemax="100" style="width: 87%">
</div>
</div>
</div>
<div class="channels-info-item">
<div class="legend-color successDark"></div>
<p>Referral<span class="channel-number">+38%</span></p>
<div class="progress progress-sm channel-progress">
<div class="progress-bar " role="progressbar"
aria-valuenow="38" aria-valuemin="0" aria-valuemax="100" style="width: 38%">
</div>
</div>
</div>
<div class="channels-info-item">
<div class="legend-color warning"></div>
<p>Ohter<span class="channel-number">+17%</span></p>
<div class="progress progress-sm channel-progress">
<div class="progress-bar " role="progressbar"
aria-valuenow="17" aria-valuemin="0" aria-valuemax="100" style="width: 17%">
</div>
</div>
</div>
</div>
</div>
</div>