Create an informative dashboard view for your Vue application using a pivot grid and charts.
You can embed a powerful pivot grid into your BI tool built with Vue.js.
The dashboard can contain several instances of Flexmonster Pivot (using different report configurations) and various charts. That gives you the flexibility to create a custom interactive Vue report with the needed visualization type.
<template>
<div class="demo-box">
<div class="demo-title">Treatment Costs by Departments</div>
<Pivot
componentFolder="https://cdn.flexmonster.com/"
height="385"
licenseFilePath="https://cdn.flexmonster.com/jsfiddle.charts.key"
v-bind:report="pivot_1_report"
/>
</div>
<div class="demo-box">
<div class="row">
<div class="col-6">
<div class="demo-title">Overall Customer Satisfaction</div>
<Pivot
componentFolder="https://cdn.flexmonster.com/"
height="390"
licenseFilePath="https://cdn.flexmonster.com/jsfiddle.charts.key"
v-bind:report="pie_chart_report"
/>
</div>
<div class="col-6">
<div class="demo-title right-text">Customer Satisfaction by Patient Status</div>
<Pivot
id="column-chart"
componentFolder="https://cdn.flexmonster.com/"
height="390"
licenseFilePath="https://cdn.flexmonster.com/jsfiddle.charts.key"
v-bind:report="column_chart_report"
/>
</div>
</div>
</div>
<div class="demo-box">
<div class="demo-title">Overall Customer Satisfaction</div>
<div class="row">
<div class="col-6">
<Pivot
componentFolder="https://cdn.flexmonster.com/"
height="300"
licenseFilePath="https://cdn.flexmonster.com/jsfiddle.charts.key"
v-bind:report="pivot_2_report"
v-bind:customizeCell="customizeCell"
/>
</div>
<div class="col-6">
<Pivot
componentFolder="https://cdn.flexmonster.com/"
height="300"
licenseFilePath="https://cdn.flexmonster.com/jsfiddle.charts.key"
v-bind:report="bar_chart_report"
/>
</div>
</div>
</div>
</template>
<script>
import Pivot from "vue-flexmonster/vue3";
import "flexmonster/flexmonster.css";
export default {
name: "FlexmonsterDashboard",
components: {
Pivot,
},
data() {
return {
pivot_1_report: {
dataSource: {
type: "json",
filename: "https://cdn.flexmonster.com/data/dashboad-demo-data.json",
},
slice: {
rows: [
{
uniqueName: "Division",
},
],
columns: [
{
uniqueName: "Patient Status",
},
{
uniqueName: "[Measures]",
},
],
measures: [
{
uniqueName: "Treatment Cost",
aggregation: "sum",
format: "currency",
},
],
},
conditions: [
{
formula: "#value < 6000",
measure: "Treatment Cost",
aggregation: "sum",
format: {
backgroundColor: "#00A45A",
color: "#fff",
fontFamily: "Arial",
fontSize: "12px",
},
isTotal: false,
},
{
formula: "#value > 12000",
measure: "Treatment Cost",
aggregation: "sum",
format: {
backgroundColor: "#df3800",
color: "#fff",
fontFamily: "Arial",
fontSize: "12px",
},
isTotal: false,
},
],
options: {
configuratorButton: false,
drillThrough: false,
timePattern: "m'h' ss'min'",
},
formats: [
{
name: "",
thousandsSeparator: ",",
decimalSeparator: ".",
decimalPlaces: 2,
},
{
name: "currency",
currencySymbol: "$",
},
],
tableSizes: {
columns: [
{
tuple: [],
measure: {
uniqueName: "Treatment Cost",
aggregation: "sum",
},
width: 180,
},
{
tuple: ["patient status.[inpatient]"],
measure: {
uniqueName: "Treatment Cost",
aggregation: "sum",
},
width: 180,
},
{
tuple: ["patient status.[outpatient]"],
measure: {
uniqueName: "Treatment Cost",
aggregation: "sum",
},
width: 180,
},
],
},
},
pie_chart_report: {
dataSource: {
type: "json",
filename: "https://cdn.flexmonster.com/data/dashboad-demo-data.json",
},
slice: {
rows: [
{
uniqueName: "Satisfaction",
},
],
columns: [
{
uniqueName: "[Measures]",
},
],
measures: [
{
uniqueName: "Satisfaction Percentage",
formula: 'count("Patient Status") / 200',
caption: "Satisfaction Percentage",
format: "satisfaction_perc",
},
],
},
options: {
viewType: "charts",
configuratorButton: false,
drillThrough: false,
chart: {
type: "pie",
showFilter: false,
showLegend: false,
showMeasures: false,
},
},
formats: [
{
name: "currency",
currencySymbol: "$",
},
{
name: "",
decimalPlaces: 2,
},
{
name: "satisfaction_perc",
isPercent: true,
},
],
},
column_chart_report: {
dataSource: {
type: "json",
filename: "https://cdn.flexmonster.com/data/dashboad-demo-data.json",
},
slice: {
rows: [
{
uniqueName: "Satisfaction",
},
],
columns: [
{
uniqueName: "Patient Status",
},
{
uniqueName: "[Measures]",
},
],
measures: [
{
uniqueName: "Satisfaction Percentage",
formula: 'count("Patient Status") / 200',
caption: "Satisfaction Percentage",
format: "satisfaction_perc",
},
],
},
options: {
viewType: "charts",
configuratorButton: false,
drillThrough: false,
chart: {
type: "stacked_column",
showFilter: false,
showMeasures: false,
},
},
formats: [
{
name: "",
decimalPlaces: 2,
},
{
name: "satisfaction_perc",
isPercent: true,
},
],
},
pivot_2_report: {
dataSource: {
type: "json",
filename: "https://cdn.flexmonster.com/data/dashboad-demo-data.json",
},
slice: {
rows: [
{
uniqueName: "Satisfaction",
},
],
columns: [
{
uniqueName: "Patient Status",
},
{
uniqueName: "[Measures]",
},
],
measures: [
{
uniqueName: "Average Waiting Time",
formula: 'average("Waiting Time")',
caption: "Waiting Time",
format: "time_format",
},
{
uniqueName: "Treatment Cost",
aggregation: "sum",
active: false,
format: "currency",
},
],
sorting: {
column: {
type: "asc",
tuple: [],
measure: {
uniqueName: "Average Waiting Time",
},
},
},
},
conditions: [
{
formula: "#value < 50",
measure: "Average Waiting Time",
isTotal: true,
format: {
backgroundColor: "#00A45A",
color: "#FFFFFF",
fontFamily: "Arial",
fontSize: "12px",
},
},
{
formula: "#value > 102",
measure: "Average Waiting Time",
isTotal: true,
format: {
backgroundColor: "#df3800",
color: "#FFFFFF",
fontFamily: "Arial",
fontSize: "12px",
},
},
],
options: {
configuratorButton: false,
drillThrough: false,
grid: {
showHeaders: false,
showFilter: false,
dragging: false,
},
},
formats: [
{
name: "",
thousandsSeparator: ",",
decimalSeparator: ".",
decimalPlaces: 2,
},
{
name: "currency",
currencySymbol: "$",
},
{
name: "time_format",
thousandsSeparator: ",",
decimalSeparator: ":",
decimalPlaces: 0,
nullValue: "",
currencySymbol: "min",
positiveCurrencyFormat: "1min",
textAlign: "right",
isPercent: false,
},
],
},
bar_chart_report: {
dataSource: {
type: "json",
filename: "https://cdn.flexmonster.com/data/dashboad-demo-data.json",
},
slice: {
rows: [
{
uniqueName: "Division",
},
],
columns: [
{
uniqueName: "[Measures]",
},
],
measures: [
{
uniqueName: "Waiting Time",
aggregation: "average",
},
{
uniqueName: "Treatment Cost",
aggregation: "sum",
active: false,
format: "currency",
},
],
sorting: {
column: {
type: "desc",
tuple: [],
measure: {
uniqueName: "Waiting Time",
aggregation: "average",
},
},
},
},
options: {
viewType: "charts",
configuratorButton: false,
drillThrough: false,
chart: {
type: "bar_h",
showFilter: false,
showMeasures: false,
},
},
formats: [
{
name: "currency",
currencySymbol: "$",
},
{
name: "",
decimalPlaces: 2,
},
],
},
};
},
methods: {
customizeCell(cell, data) {
if (data.type === "header" && data.hierarchy?.caption === "Satisfaction" && data.member) {
let name = data.member.caption;
let face = `<img class="flag" style="width:23px; height:23px;"
src="https://www.flexmonster.com/base/assets/img/demos/${name}Emoji.png">`;
cell.text = `<div style="display:flex; align-items:center;
font-size:12px; position:relative; bottom: 3px; left:2px;">${face}${data.member.caption}</div>`;
}
},
},
};
</script>
/* Chart styles */
#fm-pivot-view .fm-axis > .fm-refLine {
stroke-dasharray: 4px;
}
#fm-pivot-view .fm-axis-dividers > .fm-refLine {
stroke: none;
}
#fm-pivot-view .fm-arc path {
stroke-width: 1.5px !important;
}
#fm-pivot-view .fm-barStack path {
stroke-width: 1px !important;
}
/* General colors (e.g., in pie chart) */
.fm-charts-color-1 {
fill: #00a45a !important;
}
.fm-charts-color-2 {
fill: #7e41ff !important;
}
.fm-charts-color-3 {
fill: #df3800 !important;
}
.fm-charts-color-4 {
fill: #ffb800 !important;
}
.fm-charts-color-5 {
fill: #00a45a !important;
}
.fm-charts-color-6 {
fill: #6F5674 !important;
}
.fm-charts-color-7 {
fill: #64343F !important;
}
/* Changing colors of columns in a stacked column chart */
#column-chart .fm-charts-color-1 {
fill: #00a45a !important;
}
#column-chart .fm-charts-color-2 {
fill: #df3800 !important;
}
#column-chart .fm-charts-color-3 {
fill: none;
}
div #fm-chart-legend div table tr td #lst1 li span#fm-icon-display.fm-ui-element {
background-color: #df3800 !important;
}
/* Header styles */
#fm-pivot-view .fm-x.fm-axis.fm-title {
font-size: 14px;
}
/* Hiding text labels from charts */
text#fm-yAxis-label {
visibility: hidden !important;
}
text#fm-xAxis-label {
visibility: hidden !important;
}
text.fm-x.fm-axis.fm-title {
visibility: hidden !important;
}
/* Other */
.demo-box {
background-color: #fafafa;
position: relative;
padding: 30px;
margin-bottom: 20px;
border: 1px solid #e9e9e9;
}
.demo-title {
font-size: 18px;
margin-bottom: 20px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.right-text {
text-align: right;
}
.description-blocks {
margin: 30px 0 30px 0;
}
.col-6 {
float: left;
width: calc(50% - 10px);
margin-right: 20px;
}
.col-6:last-child {
margin: 0;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
@media only screen and (max-width:800px) {
.col-6 {
width: 100%;
margin: 0;
margin-bottom: 20px;
}
.demo-title.right-text {
text-align: left;
}
}
For the dashboard, you can use not only our pivot charts but also embed other 3rd party charting libraries.
Flexmonster Vue pivot table smoothly integrates with Highcharts, FusionCharts, Google Charts, amCharts, or all of them.