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