We have updated Flexmonster Software License Agreement, effective as of September 30, 2024. Learn more about what’s changed.
List of all demos

Dashboard in React

This dashboard example for healthcare data analysis explains how the pivot table for React can be used can be used to create a dashboard view.

Treatment Costs by Departments

To create a dashboard on your web page, add multiple instances of Flexmonster, fill them with data, and create custom reports. With both tables and charts, you'll receive a robust yet lightweight dashboard.

Overall Customer Satisfaction
Customer Satisfaction by Patient Status

You can improve the dashboard for your React application even more with online data visualizations: use 3rd party charting libraries and add a little bit of eccentricity.

Customer Satisfaction by Average Waiting Time

    import React from "react";
    import * as FlexmonsterReact from "react-flexmonster";
    
    class PivotTableDemo extends React.Component {
      render() {
        return (
          <>
            <div className="demo-box">
              <div className="demo-title">Treatment Costs by Departments</div>
              <FlexmonsterReact.Pivot
                componentFolder="https://cdn.flexmonster.com/"
                height={385}
                licenseFilePath="https://cdn.flexmonster.com/jsfiddle.charts.key"
                report={{
                  dataSource: {
                    type: "json",
                    filename: "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,
                      },
                    ],
                  },
                }}
              />
            </div>
    
            <div className="demo-box">
              <div className="row">
                <div className="col-6">
                  <div className="demo-title">Overall Customer Satisfaction</div>
                  <FlexmonsterReact.Pivot
                    componentFolder="https://cdn.flexmonster.com/"
                    height={390}
                    licenseFilePath="https://cdn.flexmonster.com/jsfiddle.charts.key"
                    report={{
                      dataSource: {
                        type: "json",
                        filename: "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,
                        },
                      ],
                    }}
                  />
                </div>
                <div className="col-6">
                  <div className="demo-title right-text">
                    Customer Satisfaction by Patient Status
                  </div>
                  <div id="column-chart">
                    <FlexmonsterReact.Pivot
                      componentFolder="https://cdn.flexmonster.com/"
                      height={390}
                      licenseFilePath="https://cdn.flexmonster.com/jsfiddle.charts.key"
                      report={{
                        dataSource: {
                          type: "json",
                          filename: "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,
                          },
                        ],
                      }}
                    />
                  </div>
                </div>
              </div>
            </div>
    
            <div className="demo-box">
              <div className="demo-title">Overall Customer Satisfaction</div>
              <div className="row">
                <div className="col-6">
                  <FlexmonsterReact.Pivot
                    componentFolder="https://cdn.flexmonster.com/"
                    height={300}
                    licenseFilePath="https://cdn.flexmonster.com/jsfiddle.charts.key"
                    report={{
                      dataSource: {
                        type: "json",
                        filename: "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,
                        },
                      ],
                    }}
                    customizeCell={this.customizeCellFunction}
                  />
                </div>
                <div className="col-6">
                  <FlexmonsterReact.Pivot
                    componentFolder="https://cdn.flexmonster.com/"
                    height={300}
                    licenseFilePath="https://cdn.flexmonster.com/jsfiddle.charts.key"
                    report={{
                      dataSource: {
                        type: "json",
                        filename: "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,
                        },
                      ],
                    }}
                  />
                </div>
              </div>
            </div>
          </>
        );
      }
    
      customizeCellFunction = (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>`;
        }
      };
    }
    
    export default PivotTableDemo;
    
    /* 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-container .fm-charts-color-1 {
      fill: #00a45a !important;
    }
    
    #column-chart-container .fm-charts-color-2 {
      fill: #df3800 !important;
    }
    
    #column-chart-container .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;
      }
    }
    

    Flexmonster can aggregate raw data and display it on the grid and a special connector will pass your processed data further to Highcharts, FusionCharts, Google Charts, amCharts or all of them.