<template>
<div>
<div>
<div class="row">
<div class="col-md-4">
<div id="chart-spark1">
<apexchart
type="area"
height="160"
:options="chartOptions"
:series="series"
></apexchart>
</div>
</div>
<div class="col-md-4">
<div id="chart-spark2">
<apexchart
type="area"
height="160"
:options="chartOptionsSpark2"
:series="seriesSpark2"
></apexchart>
</div>
</div>
<div class="col-md-4">
<div id="chart-spark3">
<apexchart
type="area"
height="160"
:options="chartOptionsSpark3"
:series="seriesSpark3"
></apexchart>
</div>
</div>
</div>
<div class="row">
<table>
<thead>
<th>Total Value</th>
<th>Percentage of Portfolio</th>
<th>Last 10 days</th>
<th>Volume</th>
</thead>
<tbody>
<tr>
<td>$32,554</td>
<td>15%</td>
<td>
<div id="chart-1">
<apexchart
type="line"
height="35"
width="100"
:options="chartOptions1"
:series="series1"
></apexchart>
</div>
</td>
<td>
<div id="chart-5">
<apexchart
type="bar"
height="35"
width="100"
:options="chartOptions5"
:series="series5"
></apexchart>
</div>
</td>
</tr>
<tr>
<td>$23,533</td>
<td>7%</td>
<td>
<div id="chart-2">
<apexchart
type="line"
height="35"
width="100"
:options="chartOptions2"
:series="series2"
></apexchart>
</div>
</td>
<td>
<div id="chart-6">
<apexchart
type="bar"
height="35"
width="100"
:options="chartOptions6"
:series="series6"
></apexchart>
</div>
</td>
</tr>
<tr>
<td>$54,276</td>
<td>9%</td>
<td>
<div id="chart-3">
<apexchart
type="pie"
height="40"
width="40"
:options="chartOptions3"
:series="series3"
></apexchart>
</div>
</td>
<td>
<div id="chart-7">
<apexchart
type="radialBar"
height="50"
width="50"
:options="chartOptions7"
:series="series7"
></apexchart>
</div>
</td>
</tr>
<tr>
<td>$11,533</td>
<td>2%</td>
<td>
<div id="chart-4">
<apexchart
type="donut"
height="40"
width="40"
:options="chartOptions4"
:series="series4"
></apexchart>
</div>
</td>
<td>
<div id="chart-8">
<apexchart
type="radialBar"
height="40"
width="40"
:options="chartOptions8"
:series="series8"
></apexchart>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>
<script>
import VueApexCharts from 'vue-apexcharts'
window.Apex = {
stroke: {
width: 3,
},
markers: {
size: 0,
},
tooltip: {
fixed: {
enabled: true,
},
},
}
// Fixed, deterministic series so the header sparklines are stable and tell a
// coherent story: Profit is the gap between Sales and Expenses, point by point.
var salesSpark = [
31, 40, 33, 52, 46, 58, 49, 61, 55, 70, 64, 78, 72, 85, 79, 92, 88, 101, 96,
108, 104, 118, 112, 126,
]
var expensesSpark = [
28, 34, 30, 41, 37, 33, 45, 40, 52, 47, 43, 55, 50, 46, 58, 53, 49, 61, 56,
52, 64, 59, 55, 67,
]
var profitSpark = salesSpark.map(function (v, i) {
return v - expensesSpark[i]
})
export default {
components: {
apexchart: VueApexCharts,
},
data: function () {
return {
series: [
{
data: salesSpark,
},
],
chartOptions: {
chart: {
type: 'area',
height: 160,
sparkline: {
enabled: true,
},
},
stroke: {
curve: 'straight',
},
fill: {
opacity: 0.3,
},
yaxis: {
min: 0,
},
colors: ['#00E396'],
title: {
text: '$424,652',
offsetX: 0,
style: {
fontSize: '24px',
},
},
subtitle: {
text: 'Sales',
offsetX: 0,
style: {
fontSize: '14px',
},
},
},
seriesSpark2: [
{
data: expensesSpark,
},
],
chartOptionsSpark2: {
chart: {
type: 'area',
height: 160,
sparkline: {
enabled: true,
},
},
stroke: {
curve: 'straight',
},
fill: {
opacity: 0.3,
},
yaxis: {
min: 0,
},
colors: ['#FF4560'],
title: {
text: '$235,312',
offsetX: 0,
style: {
fontSize: '24px',
},
},
subtitle: {
text: 'Expenses',
offsetX: 0,
style: {
fontSize: '14px',
},
},
},
seriesSpark3: [
{
data: profitSpark,
},
],
chartOptionsSpark3: {
chart: {
type: 'area',
height: 160,
sparkline: {
enabled: true,
},
},
stroke: {
curve: 'straight',
},
fill: {
opacity: 0.3,
},
xaxis: {
crosshairs: {
width: 1,
},
},
yaxis: {
min: 0,
},
colors: ['#008FFB'],
title: {
text: '$189,340',
offsetX: 0,
style: {
fontSize: '24px',
},
},
subtitle: {
text: 'Profits',
offsetX: 0,
style: {
fontSize: '14px',
},
},
},
series1: [
{
data: [25, 66, 41, 89, 63, 25, 44, 12, 36, 9, 54],
},
],
chartOptions1: {
chart: {
type: 'line',
width: 100,
height: 35,
sparkline: {
enabled: true,
},
},
tooltip: {
fixed: {
enabled: false,
},
x: {
show: false,
},
y: {
title: {
formatter: function (seriesName) {
return ''
},
},
},
marker: {
show: false,
},
},
},
series2: [
{
data: [12, 14, 2, 47, 42, 15, 47, 75, 65, 19, 14],
},
],
chartOptions2: {
chart: {
type: 'line',
width: 100,
height: 35,
sparkline: {
enabled: true,
},
},
tooltip: {
fixed: {
enabled: false,
},
x: {
show: false,
},
y: {
title: {
formatter: function (seriesName) {
return ''
},
},
},
marker: {
show: false,
},
},
},
series3: [43, 32, 12, 9],
chartOptions3: {
chart: {
type: 'pie',
width: 40,
height: 40,
sparkline: {
enabled: true,
},
},
stroke: {
width: 1,
},
tooltip: {
fixed: {
enabled: false,
},
},
},
series4: [43, 32, 12, 9],
chartOptions4: {
chart: {
type: 'donut',
width: 40,
height: 40,
sparkline: {
enabled: true,
},
},
stroke: {
width: 1,
},
tooltip: {
fixed: {
enabled: false,
},
},
},
series5: [
{
data: [25, 66, 41, 89, 63, 25, 44, 12, 36, 9, 54],
},
],
chartOptions5: {
chart: {
type: 'bar',
width: 100,
height: 35,
sparkline: {
enabled: true,
},
},
plotOptions: {
bar: {
columnWidth: '80%',
},
},
labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
xaxis: {
crosshairs: {
width: 1,
},
},
tooltip: {
fixed: {
enabled: false,
},
x: {
show: false,
},
y: {
title: {
formatter: function (seriesName) {
return ''
},
},
},
marker: {
show: false,
},
},
},
series6: [
{
data: [12, 14, 2, 47, 42, 15, 47, 75, 65, 19, 14],
},
],
chartOptions6: {
chart: {
type: 'bar',
width: 100,
height: 35,
sparkline: {
enabled: true,
},
},
plotOptions: {
bar: {
columnWidth: '80%',
},
},
labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
xaxis: {
crosshairs: {
width: 1,
},
},
tooltip: {
fixed: {
enabled: false,
},
x: {
show: false,
},
y: {
title: {
formatter: function (seriesName) {
return ''
},
},
},
marker: {
show: false,
},
},
},
series7: [45],
chartOptions7: {
chart: {
type: 'radialBar',
width: 50,
height: 50,
sparkline: {
enabled: true,
},
},
dataLabels: {
enabled: false,
},
plotOptions: {
radialBar: {
hollow: {
margin: 0,
size: '50%',
},
track: {
margin: 0,
},
dataLabels: {
show: false,
},
},
},
},
series8: [53, 67],
chartOptions8: {
chart: {
type: 'radialBar',
width: 40,
height: 40,
sparkline: {
enabled: true,
},
},
dataLabels: {
enabled: false,
},
plotOptions: {
radialBar: {
hollow: {
margin: 0,
size: '50%',
},
track: {
margin: 1,
},
dataLabels: {
show: false,
},
},
},
},
}
},
}
</script>
<style>
.row {
overflow: hidden;
max-width: 890px;
margin: 30px auto;
display: flex;
}
.col-md-4 {
width: 33.33%;
padding: 0 25px;
box-sizing: border-box;
}
table {
width: 100%;
}
tbody tr {
border-top: 1px solid #e7e7e7;
}
th {
font-weight: bold;
font-family: Helvetica;
padding-bottom: 20px;
}
td,
th {
width: 25%;
text-align: center;
height: 65px;
}
td div {
margin: 0 auto;
}
.left {
float: left;
}
.right {
float: right;
}
@media only screen and (max-width: 480px) {
th:first-child,
td:first-child {
display: none;
}
.row {
display: block;
}
.col-md-4 {
padding: 0;
width: 100%;
}
}
</style>