Dashboard in Vue

Create an informative dashboard view for your Vue application using a pivot grid and charts.

Treatment Costs by Departments

You can embed a powerful pivot grid into your BI tool built with Vue.js.

Overall Customer Satisfaction

Customer Satisfaction by Patient Status

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.

Customer Satisfaction by Average Waiting Time

Edit in JSfiddle Get Free Trial

.vue
.css

<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.

Pivot charts Classic view

Changes to Flexmonster Software License Agreement

Dashboard in Vue

See our live examples