Loading Data, Large Datasets, and Formatting Fields

Hello,
I am trialing Flexmonster for my client who needs a rich pivot table. So far I have been impressed with performance and functionality. I did have a few questions.

1. I would like to format fields to include a caption and format; however, I do not want to show them initially in the grid. In the code below, I am showing Age and Gender in the rows array; however, I also have id, g_id, state, etc fields. I would like to specify caption for those other fields but not show them initially. The user could select the fields if needed. With a measure, I can set active to false. It does not look like rows/columns has that capability? Is this possible?
2. I will be retrieving content from an API and loading into Redux in the React application. For my testing, I am using Axios to retrieve content from a json file in my public folder. It works the majority of the time; however, for very quick requests, although I am loading a report and defaulting an empty dataset, the grid sometimes displays one row field and 1 measure (see attached) rather than 2 rows and 10 measures. Usually the problem happens when I update my code when I am on a separate browser tab and then switch back. Refreshing the page solves the issue or updating the code when the app is in the current browser tab generally always renders correctly.
3. The loading dialog uses spaces for thousand separator instead of comma. How do I change it to use the user's location's preference?
4. The application could be using tens of millions of rows. What recommendations do you have for handling large datasets? Loading a smaller amount of records and appending data? Is there a way to specify a contract based on the current report layout that can be passed to the api, loaded, and retrieved? Any other hints?
5. Is there a way to turn off row sorting indicators?

 
import React, { Component } from 'react';
import * as FlexmonsterReact from 'react-flexmonster';
import axios from 'axios';

interface IGridFlexProps {}

interface IGridFlexState {
quickFilterText: string;
sideBar: boolean;
}

class GridFlex extends Component<IGridFlexProps, IGridFlexState> {
private pivot: any;

constructor(props: IGridFlexProps) {
super(props);

this.state = {
quickFilterText: '',
sideBar: true,
};

this.pivot = React.createRef();
}

public componentDidMount() {
const requestUrl = '/data/100k.json';
const request = {
url: requestUrl,
timeout: 200000,
method: 'get',
headers: {
accept: 'application/json;odata=verbose',
'content-type': 'application/json;odata=verbose',
},
};

axios(request)
.then(response => {
const { data } = response;
const formattedData = this.getData(data);
this.pivot.current.flexmonster.updateData({ data: formattedData });
// this.pivot.current.flexmonster.setReport(this.reportJson);
})
.catch(error => {});
}

private getDefaultData = () => {
return [
{
id: 0,
g_id: 0,
gen: '',
eth: '',
race: '',
age: '',
state: '',
etg: 0,
a1c: 0,
met: 0,
inf: 0,
onc: 0,
etgCalc: 0,
a1cCalc: 0,
metCalc: 0,
infCalc: 0,
oncCalc: 0,
},
];
};

private getData = (data: any) => {
if (data instanceof Array) {
// const concatData = data
// .concat(data)
// .concat(data)
// .concat(data)
// .concat(data)
// .concat(data)
// .concat(data)
// .concat(data)
// .concat(data)
// .concat(data);
const concatData = data.splice(0, 1000);
return concatData.map(item => {
return {
...item,
etgCalc: item.etg > 0 ? 1 : 0,
a1cCalc: item.a1c > 0 ? 1 : 0,
metCalc: item.met > 0 ? 1 : 0,
infCalc: item.inf > 0 ? 1 : 0,
oncCalc: item.onc > 0 ? 1 : 0,
};
});
}
return [];
};

private reportJson = {
dataSource: {
dataSourceType: 'json',
data: this.getDefaultData(),
},
slice: {
rows: [
{
caption: 'Age',
uniqueName: 'age',
sort: 'asc',
},
{
caption: 'Gender',
uniqueName: 'gen',
sort: 'asc',
},
],
columns: [],
measures: [
{
uniqueName: 'etgCalc',
caption: 'etg #',
aggregation: 'sum',
active: true,
format: 'count',
},
{
uniqueName: 'etgPercent',
formula: 'percentofcolumn("etgCalc")',
individual: false,
caption: 'etg %',
active: true,
},
{
uniqueName: 'a1cCalc',
caption: 'a1c #',
aggregation: 'sum',
active: true,
format: 'count',
},
{
uniqueName: 'a1cPercent',
formula: 'percentofcolumn("a1cCalc")',
individual: false,
caption: 'a1c %',
active: true,
},
{
uniqueName: 'metCalc',
caption: 'metformin #',
aggregation: 'sum',
active: true,
format: 'count',
},
{
uniqueName: 'metPercent',
formula: 'percentofcolumn("metCalc")',
individual: false,
caption: 'met %',
active: true,
},
],
drillThrough: [
'id',
'g_id',
'age',
'gen',
'race',
'eth',
'etg',
'a1c',
'met',
'inf',
'onc',
],
},
options: {
viewType: 'grid',
grid: {
type: 'compact',
title: '',
showFilter: true,
showHeaders: true,
fitGridlines: false,
showTotals: true,
showGrandTotals: 'on',
showExtraTotalLabels: false,
showHierarchies: true,
showHierarchyCaptions: true,
showReportFiltersArea: true,
pagesFilterLayout: 'horizontal',
},
chart: {
type: 'line',
title: '',
showFilter: true,
labelsHierarchy: '',
multipleMeasures: false,
oneLevel: false,
autoRange: false,
reversedAxes: false,
showLegendButton: false,
showAllLabels: false,
showMeasures: true,
showOneMeasureSelection: true,
showWarning: true,
activeMeasure: '',
},
configuratorActive: false,
configuratorButton: false,
configuratorMatchHeight: false,
showAggregations: true,
showAggregationLabels: false,
showCalculatedValuesButton: true,
editing: false,
drillThrough: true,
showDrillThroughConfigurator: true,
sorting: 'on',
datePattern: 'MM/dd/yyyy',
dateTimePattern: 'MM/dd/yyyy HH:mm:ss',
saveAllFormats: false,
showDefaultSlice: true,
showEmptyData: true,
defaultHierarchySortName: 'asc',
selectEmptyCells: true,
showOutdatedDataAlert: false,
},
formats: [
{
name: '',
thousandsSeparator: ',',
decimalSeparator: '.',
decimalPlaces: 0,
maxSymbols: 20,
currencySymbol: '',
currencySymbolAlign: 'left',
nullValue: ' ',
infinityValue: 'Infinity',
divideByZeroValue: 'Infinity',
},
{
name: 'count',
thousandsSeparator: ',',
decimalSeparator: '.',
decimalPlaces: 0,
},
],
};

private onCustomizeToolbar = (toolbar: any) => {
const tabs = toolbar.getTabs();
toolbar.getTabs = () => {
delete tabs[0];
delete tabs[1];
delete tabs[2];
delete tabs[3];
delete tabs[4];
delete tabs[4];
delete tabs[7];
return tabs;
};
};

private onCustomizeCellFunction = (cell: any, data: any) => {
if (data.hierarchy && data.hierarchy.uniqueName === 'id' && data.member) {
const el = document.createElement('div');
el.innerHTML = cell.text;
const parts = cell.text.split(el.innerText);
if (parts.length === 2) {
cell.text =
parts[0] +
"<a href='https://codepen.io/spietrek-the-animator/pen/exjwdw' " +
"target='_blank' class='link' onclick='preventExpand(event)'>" +
el.innerText +
'</a>' +
parts[1];
} else {
cell.text =
"<a href='https://codepen.io/spietrek-the-animator/pen/exjwdw' " +
"target='_blank' class='link' onclick='preventExpand(event)'>" +
el.innerText +
'</a>';
}
} else if (
data.isDrillThrough &&
data.type !== 'header' &&
data.hierarchy &&
data.hierarchy.uniqueName === 'id'
) {
cell.text =
"<a href='https://codepen.io/spietrek-the-animator/pen/exjwdw' " +
"target='_blank' class='link' onclick='preventExpand(event)'>" +
data.label +
'</a>';
}
};

public render() {
return (
<div>
<FlexmonsterReact.Pivot
ref={this.pivot}
toolbar={true}
beforetoolbarcreated={this.onCustomizeToolbar}
componentFolder="https://cdn.flexmonster.com/"
width="100%"
report={this.reportJson}
customizeCell={this.onCustomizeCellFunction}
/>
</div>
);
}
}

export default GridFlex;