sean/manja_ui_dev
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

refactor(charts): add CustomTooltips, add chartId prop

Browse Source
This commit is contained in:
xidedix
2018-05-25 17:47:07 +02:00
parent 4aa02846e3
commit c4d5ff886c
16 changed files with 371 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/Dashboard.vue
+13 -13
View File
@@ -16,7 +16,7 @@
<h4 class="mb-0">9.823</h4>
<p>Members online</p>
</b-card-body>
<card-line1-chart-example class="chart-wrapper px-3" style="height:70px;" height="70"/>
<card-line1-chart-example chartId="card-chart-01" class="chart-wrapper px-3" style="height:70px;" height="70"/>
</b-card>
</b-col>
<b-col sm="6" lg="3">
@@ -34,7 +34,7 @@
<h4 class="mb-0">9.823</h4>
<p>Members online</p>
</b-card-body>
<card-line2-chart-example class="chart-wrapper px-3" style="height:70px;" height="70"/>
<card-line2-chart-example chartId="card-chart-02" class="chart-wrapper px-3" style="height:70px;" height="70"/>
</b-card>
</b-col>
<b-col sm="6" lg="3">
@@ -52,7 +52,7 @@
<h4 class="mb-0">9.823</h4>
<p>Members online</p>
</b-card-body>
<card-line3-chart-example class="chart-wrapper" style="height:70px;" height="70"/>
<card-line3-chart-example chartId="card-chart-03" class="chart-wrapper" style="height:70px;" height="70"/>
</b-card>
</b-col>
<b-col sm="6" lg="3">
@@ -70,7 +70,7 @@
<h4 class="mb-0">9.823</h4>
<p>Members online</p>
</b-card-body>
<card-bar-chart-example class="chart-wrapper px-3" style="height:70px;" height="70"/>
<card-bar-chart-example chartId="card-chart-04" class="chart-wrapper px-3" style="height:70px;" height="70"/>
</b-card>
</b-col>
</b-row>
@@ -92,7 +92,7 @@
</b-button-toolbar>
</b-col>
</b-row>
<main-chart-example class="chart-wrapper" style="height:300px;margin-top:40px;" height="300"></main-chart-example>
<main-chart-example chartId="main-chart-01" class="chart-wrapper" style="height:300px;margin-top:40px;" height="300"></main-chart-example>
<div slot="footer">
<b-row class="text-center">
<b-col class="mb-sm-2 mb-0">
@@ -129,7 +129,7 @@
<div class="brand-card-header bg-facebook">
<i class="fa fa-facebook"></i>
<div class="chart-wrapper">
<social-box-chart-example :data="[65, 59, 84, 84, 51, 55, 40]" height="90"/>
<social-box-chart-example chartId="box-chart-01" :data="[65, 59, 84, 84, 51, 55, 40]" height="90"/>
</div>
</div>
<div class="brand-card-body">
@@ -149,7 +149,7 @@
<div class="brand-card-header bg-twitter">
<i class="fa fa-twitter"></i>
<div class="chart-wrapper">
<social-box-chart-example :data="[1, 13, 9, 17, 34, 41, 38]" height="90"/>
<social-box-chart-example chartId="box-chart-02" :data="[1, 13, 9, 17, 34, 41, 38]" height="90"/>
</div>
</div>
<div class="brand-card-body">
@@ -169,7 +169,7 @@
<div class="brand-card-header bg-linkedin">
<i class="fa fa-linkedin"></i>
<div class="chart-wrapper">
<social-box-chart-example :data="[78, 81, 80, 45, 34, 12, 40]" height="90"/>
<social-box-chart-example chartId="box-chart-03" :data="[78, 81, 80, 45, 34, 12, 40]" height="90"/>
</div>
</div>
<div class="brand-card-body">
@@ -189,7 +189,7 @@
<div class="brand-card-header bg-google-plus">
<i class="fa fa-google-plus"></i>
<div class="chart-wrapper">
<social-box-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" height="90"/>
<social-box-chart-example chartId="box-chart-04" :data="[35, 23, 56, 22, 97, 23, 64]" height="90"/>
</div>
</div>
<div class="brand-card-body">
@@ -217,7 +217,7 @@
<strong class="h4">9,123</strong>
<div class="chart-wrapper" :style="{ top: '-10px'}">
<!--<callout-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" variant="#20a8d8" width="80" height="30" />-->
<callout-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" variant="info" width="80" height="30" />
<callout-chart-example chartId="callout-chart-01" :data="[35, 23, 56, 22, 97, 23, 64]" variant="info" width="80" height="30" />
</div>
</Callout>
</b-col>
@@ -226,7 +226,7 @@
<small class="text-muted">Recurring Clients</small><br>
<strong class="h4">22,643</strong>
<div class="chart-wrapper" :style="{ top: '-10px'}">
<callout-chart-example :data="[65, 59, 84, 84, 51, 55, 40]" variant="danger" width="80" height="30" />
<callout-chart-example chartId="callout-chart-02" :data="[65, 59, 84, 84, 51, 55, 40]" variant="danger" width="80" height="30" />
</div>
</Callout>
</b-col>
@@ -326,7 +326,7 @@
<small class="text-muted">Pageviews</small><br>
<strong class="h4">78,623</strong>
<div class="chart-wrapper" :style="{ top: '-10px'}">
<callout-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" variant="#f8cb00" width="80" height="30"/>
<callout-chart-example chartId="callout-chart-03" :data="[35, 23, 56, 22, 97, 23, 64]" variant="#f8cb00" width="80" height="30"/>
</div>
</Callout>
</b-col>
@@ -335,7 +335,7 @@
<small class="text-muted">Organic</small><br>
<strong class="h4">49,123</strong>
<div class="chart-wrapper" :style="{ top: '-10px'}">
<callout-chart-example :data="[65, 59, 84, 84, 51, 55, 40]" variant="#4dbd74" width="80" height="30" />
<callout-chart-example chartId="callout-chart-04" :data="[65, 59, 84, 84, 51, 55, 40]" variant="#4dbd74" width="80" height="30" />
</div>
</Callout>
</b-col>