jprdonnelly/PLSmartPivot
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

init converted components in paint

Browse Source
This commit is contained in:
Kristoffer Lind
2019-01-29 17:28:34 +01:00
parent 9cfbb148fb
commit 08cba41e18
18 changed files with 651 additions and 1276 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
.eslintrc.js
View File

@@ -57,10 +57,82 @@ module.exports = {
"no-implied-eval": ["error"],
"no-debugger": ["warn"],
"no-unreachable": ["warn"],
"quotes": ["warn", "single", { "avoidEscape": true }]
"quotes": ["warn", "single", { "avoidEscape": true }],
"sort-imports": ["off"],
"max-lines-per-function": ["off"], // marks the entire functions, a bit too noisy
"complexity": ["warn"],
"camelcase": ["warn"],
"max-statements": ["off"], // marks the entire functions, a bit too noisy
"sort-vars": ["warn"],
"init-declarations": ["off"],
"capitalized-comments": ["off"],
"one-var": ["off"],
"no-var": ["warn"],
"no-plusplus": ["warn"],
"vars-on-top": ["off"],
"no-magic-numbers": ["off"], // useful, but also complains for reasonable checks with actual numbers
"new-cap": ["warn"],
"block-scoped-var": ["warn"],
"require-unicode-regexp": ["off"],
"no-negated-condition": ["warn"],
"operator-assignment": ["off"],
"no-extra-parens": ["off"],
"quote-props": ["off"],
"prefer-template": ["warn"],
"no-lonely-if": ["warn"],
"sort-keys": ["warn"],
"no-implicit-coercion": ["warn"],
"no-inline-comments": ["warn"],
"spaced-comment": ["warn"],
"require-jsdoc": ["off"],
"func-style": ["off"],
"func-names": ["off"],
"id-length": ["warn"],
"prefer-arrow-callback": ["warn"],
"dot-location": ["off"],
"line-comment-position": ["off"],
"no-warning-comments": ["warn"],
"multiline-comment-style": ["off"],
"consistent-return": ["warn"],
"no-else-return": ["warn"],
"array-bracket-newline": ["warn"],
"array-element-newline": ["warn"],
"object-shorthand": ["warn"],
"eqeqeq": ["warn"],
"no-empty-function": ["warn"],
"function-paren-newline": ["warn"],
"no-invalid-this": ["warn"],
"newline-per-chained-call": ["warn"],
"no-unused-expressions": ["warn"],
"strict": ["warn"],
"no-ternary": ["off"],
"multiline-ternary": ["off"],
"no-param-reassign": ["warn"],
"prefer-destructuring": ["warn"],
"arrow-parens": ["off"],
"no-array-constructor": ["warn"],
"default-case": ["warn"],
"no-alert": ["warn"],
"max-params": ["warn"],
"brace-style": ["warn", "1tbs", { "allowSingleLine": true }],
"prefer-const": ["warn"],
// plugin:react
"react/jsx-indent": ["warn", 2],
"react/jsx-indent-props": ["warn", 2],
"react/forbid-prop-types": ["warn"],
"react/no-array-index-key": ["warn"],
"react/jsx-sort-props": ["warn"],
"react/require-default-props": ["warn"],
"react/sort-prop-types": ["warn"],
"react/jsx-max-props-per-line": ["warn"],
"react/jsx-no-literals": ["off"],
"react/jsx-max-depth": ["off"], // rule throws exception in single-dimension-measure
"react/jsx-filename-extension": ["warn"],
"react/prefer-stateless-function": ["warn"]
},
extends: [
"eslint:recommended",
"plugin:react/recommended"
"eslint:all",
"plugin:react/all"
]
}

19
src/else-dimension-measures.jsx
View File

@@ -38,8 +38,7 @@ class ElseDimensionMeasures extends React.PureComponent {
vMaskNum,
vColorSemaphore,
vColorSemaphoreText,
vDivide
;
vDivide;
const measurementCells = [];
@@ -50,7 +49,7 @@ class ElseDimensionMeasures extends React.PureComponent {
for (var nMeasures22 = 1; nMeasures22 <= vNumMeasures2; nMeasures22++) {
nMeasure7++;
nMeasure72++;
if (columnText.substring(0, 1) == '%') {
if (columnText.substring(0, 1) === '%') {
columnNumber = ApplyPreMask('0,00%', ConceptMatrixPivot[rowNumber][nMeasures22]);
var vSpecialF = '0,00%';
} else {
@@ -78,7 +77,7 @@ class ElseDimensionMeasures extends React.PureComponent {
var vSpecialF = MeasuresFormat[nMeasure72].replace(/k|K|m|M/gi, '');
if (!isNaN(ConceptMatrixPivot[rowNumber][nMeasures22])) {
vMaskNum = ConceptMatrixPivot[rowNumber][nMeasures22];
if (vSpecialF.substring(vSpecialF.length - 1) == '%') {
if (vSpecialF.substring(vSpecialF.length - 1) === '%') {
vMaskNum = vMaskNum * 100;
}
@@ -98,19 +97,21 @@ class ElseDimensionMeasures extends React.PureComponent {
}
}
if (vSeparatorCols && nMeasure7 == (measure_count + 1)) {
if (vSeparatorCols && nMeasure7 === (measure_count + 1)) {
const seperatorStyle = {
color: 'white',
fontFamily: vFontFamily,
fontSize: (12 + vLetterSize) + 'px'
};
const seperatorElement = (
<th key={nMeasures22} className="empty" style={seperatorStyle}>*</th>
<th key={`${nMeasures22}-header`} className="empty" style={seperatorStyle}>
*
</th>
);
measurementCells.push(seperatorElement);
nMeasure7 = 1;
}
if (nMeasure72 == (measure_count - 1)) {
if (nMeasure72 === (measure_count - 1)) {
nMeasure72 = -1;
nMeasure72Semaphore = measure_count;
} else {
@@ -145,7 +146,7 @@ class ElseDimensionMeasures extends React.PureComponent {
textAlign: 'right',
paddingLeft: '4px'
};
if (vSpecialF.substring(vSpecialF.length - 1) == '%' && vNumMeasures > 1) {
if (vSpecialF.substring(vSpecialF.length - 1) === '%' && vNumMeasures > 1) {
cellElement = (
<td key={nMeasures22} className={'grid-cells-small' + sufixCells} style={cellStyle}>
{columnNumber}
@@ -165,7 +166,7 @@ class ElseDimensionMeasures extends React.PureComponent {
textAlign: 'right',
paddingRight: '4px'
};
if (vSpecialF.substring(vSpecialF.length - 1) == '%' && vNumMeasures > 1) {
if (vSpecialF.substring(vSpecialF.length - 1) === '%' && vNumMeasures > 1) {
cellElement = (
<td key={nMeasures22} className={'grid-cells-small' + sufixCells} style={cellStyle}>
{columnNumber}

87
src/else-dimension-row-list.jsx
View File

@@ -1,87 +0,0 @@
/*
DO NOT USE
should use row-list component instead, this is just left in here until testing conversion
*/
import React from 'react';
import PropTypes from 'prop-types';
import StyleBuilder from './style-builder';
import ElseDimensionMeasures from './single-dimension-measures';
class ElseDimensionRowList extends React.PureComponent {
generatePaddingTextElement (hasCustomFileStyle) {
const { vPadding, vFontFamily } = this.props;
if (vPadding && !hasCustomFileStyle) {
const paddingStyle = {
marginLeft: '15px',
fontFamily: vFontFamily
};
return (
<span style={paddingStyle}></span>
);
} else {
return null;
}
}
generateRows () {
const {
vLetterSize,
vCustomFileBool,
vFontFamily,
ConceptMatrixFirstClean,
ConceptMatrixPivot,
} = this.props;
const rows = [];
let columnText;
var nPivotRows = ConceptMatrixFirstClean.length;
for (var rowNumber = 0; rowNumber < nPivotRows; rowNumber++) {
columnText = ConceptMatrixPivot[rowNumber][0];// the descriptive account text
if (columnText != '-') {
const styleBuilder = new StyleBuilder(this.props);
if (vCustomFileBool) {
styleBuilder.parseCustomFileStyle(columnText);
} else {
styleBuilder.applyStandardAttributes(rowNumber);
styleBuilder.applyCustomStyle({ fontSize: (14 + vLetterSize) + 'px' });
}
const rowStyle = {
fontFamily: vFontFamily,
width: '230px',
...styleBuilder.getStyle()
};
const paddingTextElement = this.generatePaddingTextElement(styleBuilder.hasCustomFileStyle());
const measurementsProps = { rowNumber, columnText, styleBuilder };
const rowElement = (
<tr>
<td className="fdim-cells" style={rowStyle}>
{paddingTextElement}{columnText}
</td>
<ElseDimensionMeasures
{...this.props}
{...measurementsProps}
/>
</tr>
);
rows.push(rowElement);
}
return rows;
}
}
render () {
return (
<React.Fragment>
{this.generateRows()}
</React.Fragment>
);
}
}
ElseDimensionRowList.propTypes = {};
export default ElseDimensionRowList;

24
src/excel-export.js
View File

@@ -1,7 +1,7 @@
import $ from 'jquery';
const isIE = /*@cc_on!@*/false || !!document.documentMode;
const isChrome = !!window.chrome && !!window.chrome.webstore;
const isIE = /* @cc_on!@*/false || Boolean(document.documentMode);
const isChrome = Boolean(window.chrome) && Boolean(window.chrome.webstore);
const isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
const isFirefox = typeof InstallTrigger !== 'undefined';
@@ -25,19 +25,21 @@ export function enableExcelExport (layout, f) {
myFootNote += '</p>';
}
$('.icon-xls').on('click', function () {
$('.header-wrapper th').children('.tooltip').remove();// remove some popup effects when exporting
$('.header-wrapper th').children('.icon-xls').remove();// remove the xls icon when exporting
$('.icon-xls').on('click', () => {
$('.header-wrapper th').children('.tooltip')
.remove(); // remove some popup effects when exporting
$('.header-wrapper th').children('.icon-xls')
.remove(); // remove the xls icon when exporting
if (isChrome || isSafari) {
const $clonedDiv = $('.data-table').clone(true);//.kpi-table a secas exporta la 1ªcol
const $clonedDiv = $('.data-table').clone(true); // .kpi-table a secas exporta la 1ªcol
let vEncodeHead = '<html><head><meta charset="UTF-8"></head>';
vEncodeHead += myTitle + mySubTitle + myFootNote;
const vEncode = encodeURIComponent($clonedDiv.html());
let vDecode = vEncodeHead + vEncode + '</html>';
let vDecode = `${vEncodeHead + vEncode}</html>`;
$clonedDiv.find('tr.header');
vDecode = vDecode.split('%3E.%3C').join('%3E%3C');
window.open('data:application/vnd.ms-excel,' + vDecode);
window.open(`data:application/vnd.ms-excel,${vDecode}`);
$.preventDefault();
}
if (isIE) {
@@ -56,15 +58,15 @@ export function enableExcelExport (layout, f) {
}
if (isFirefox) {
const $clonedDiv = $('.data-table').clone(true);//.kpi-table a secas exporta la 1ªcol
const $clonedDiv = $('.data-table').clone(true);// .kpi-table a secas exporta la 1ªcol
let vEncodeHead = '<html><head><meta charset="UTF-8"></head>';
vEncodeHead += myTitle + mySubTitle + myFootNote;
const vEncode = encodeURIComponent($clonedDiv.html());
let vDecode = vEncodeHead + vEncode + '</html>';
let vDecode = `${vEncodeHead + vEncode}</html>`;
$clonedDiv.find('tr.header');
vDecode = vDecode.split('>.<').join('><');
window.open('data:application/vnd.ms-excel,' + vDecode);
window.open(`data:application/vnd.ms-excel,${vDecode}`);
$.preventDefault();
}
});

13
src/export-button.js → src/export-button.jsx
View File

@@ -4,12 +4,21 @@ import PropTypes from 'prop-types';
// TODO: move interaction logic in here from excel-export.js
class ExportButton extends React.PureComponent {
render () {
return this.props.excelExport === true && (
<input className="icon-xls" type="image" src="/Extensions/PLSmartPivot/Excel.png" />
const { excelExport } = this.props;
return excelExport === true && (
<input
className="icon-xls"
src="/Extensions/PLSmartPivot/Excel.png"
type="image"
/>
);
}
}
ExportButton.defaultProps = {
excelExport: false
};
ExportButton.propTypes = {
excelExport: PropTypes.bool
};

121
src/header-wrapper.jsx
View File

@@ -1,9 +1,10 @@
import React, { PureComponent, Fragment } from 'react';
import PropTypes from 'prop-types';
import { renderToStaticMarkup } from 'react-dom/server';
import ExportButton from './export-button';
import ExportButton from './export-button.jsx';
// TODO: the different render methods are very similar, maybe a new component?
/* TODO: the different render methods are very similar, split it into a few components
and try to get rid of some duplication */
class HeaderWrapper extends PureComponent {
getBaseCSS () {
const {
@@ -21,6 +22,7 @@ class HeaderWrapper extends PureComponent {
};
return baseCSS;
}
renderSecondDimensionTitles () {
const {
vFontFamily,
@@ -34,10 +36,10 @@ class HeaderWrapper extends PureComponent {
vSeparatorCols,
nSecond,
vLetterSize,
ExtraLabelsArray,
ExtraLabelsArray
} = this.props;
if (vNumDims == 2) {
if (vNumDims === 2) {
if (measure_count > 1) {
const thStyle = {
...this.getBaseCSS(),
@@ -48,7 +50,7 @@ class HeaderWrapper extends PureComponent {
verticalAlign: 'middle'
};
return (
<Fragment key='second-dimension-titles'>
<Fragment key="second-dimension-titles">
<th
className="fdim-cells"
rowSpan="2"
@@ -68,14 +70,18 @@ class HeaderWrapper extends PureComponent {
...this.getBaseCSS(),
fontSize: (14 + vLetterSizeHeader) + 'px',
height: '45px',
verticalAlign: 'middle',
verticalAlign: 'middle'
};
return (
<Fragment key={index}>
{vSeparatorCols && index > 0 && (
<th className="empty" style={emptyStyle}>*</th>
<th className="empty" style={emptyStyle}>
*
</th>
)}
<th className={'grid-cells2' + sufixCells} colSpan={measure_count} style={style}>{header}</th>
<th className={'grid-cells2' + sufixCells} colSpan={measure_count} style={style}>
{header}
</th>
</Fragment>
);
})}
@@ -105,10 +111,12 @@ class HeaderWrapper extends PureComponent {
fontSize: (12 + vLetterSize) + 'px'
};
const seperatorElement = (
<th className="empty" style={seperatorStyle}>*</th>
<th className="empty" style={seperatorStyle}>
*
</th>
);
let sufixWrap = '';
if ((entry.length > 11 && vLetterSizeHeader == 0) || (entry.length > 12 && vLetterSizeHeader == -2)) {
if ((entry.length > 11 && vLetterSizeHeader === 0) || (entry.length > 12 && vLetterSizeHeader === -2)) {
sufixWrap = '70';
} else {
sufixWrap = 'Empty';
@@ -126,7 +134,9 @@ class HeaderWrapper extends PureComponent {
<Fragment key={entryIndex}>
{hasSeperator && seperatorElement}
<th className={'grid-cells2' + sufixCells} style={gridCells2Style}>
<span className={'wrapclass' + sufixWrap} style={wrapStyle}>{entry}</span>
<span className={'wrapclass' + sufixWrap} style={wrapStyle}>
{entry}
</span>
</th>
</Fragment>
);
@@ -136,6 +146,7 @@ class HeaderWrapper extends PureComponent {
}
}
}
renderSecondDimensionSubTitles () {
const {
vFontFamily,
@@ -146,7 +157,7 @@ class HeaderWrapper extends PureComponent {
vSeparatorCols,
vLetterSize,
MeasuresFormat,
ExtraLabelsArray,
ExtraLabelsArray
} = this.props;
return SecondHeader.map((header, index) => {
@@ -158,10 +169,12 @@ class HeaderWrapper extends PureComponent {
return (
<Fragment key={index}>
{vSeparatorCols && index > 0 && (
<th className="empty" style={emptyStyle}>*</th>
<th className="empty" style={emptyStyle}>
*
</th>
)}
{MeasuresFormat.map((measureFormat, measureFormatIndex) => {
if (measureFormat.substring(measureFormat.length - 1) == '%') {
if (measureFormat.substring(measureFormat.length - 1) === '%') {
const cells2SmallStyle = {
...this.getBaseCSS(),
cursor: 'default',
@@ -172,45 +185,48 @@ class HeaderWrapper extends PureComponent {
return (
<th key={measureFormatIndex} className={'grid-cells2-small' + sufixCells} style={cells2SmallStyle}>
<span className="wrapclass25">
{LabelsArray[measureFormatIndex + 1]} {ExtraLabelsArray[measureFormatIndex]}
</span>
</th>
);
} else {
const cells2Style = {
...this.getBaseCSS(),
cursor: 'default',
fontSize: (14 + vLetterSizeHeader) + 'px',
height: '25px',
verticalAlign: 'middle'
};
return (
<th key={measureFormatIndex} className={'grid-cells2' + sufixCells} style={cells2Style}>
<span className="wrapclass25">
{LabelsArray[measureFormatIndex + 1]} {ExtraLabelsArray[measureFormatIndex]}
{LabelsArray[measureFormatIndex + 1]}
{ExtraLabelsArray[measureFormatIndex]}
</span>
</th>
);
}
const cells2Style = {
...this.getBaseCSS(),
cursor: 'default',
fontSize: (14 + vLetterSizeHeader) + 'px',
height: '25px',
verticalAlign: 'middle'
};
return (
<th key={measureFormatIndex} className={'grid-cells2' + sufixCells} style={cells2Style}>
<span className="wrapclass25">
{LabelsArray[measureFormatIndex + 1]}
{ExtraLabelsArray[measureFormatIndex]}
</span>
</th>
);
})}
</Fragment>
);
});
}
renderMeasureInfos () {
const {
vFontFamily,
vLetterSizeHeader,
dim_count,
vExtraLabel,
sufixCells
sufixCells,
measureInfos
} = this.props;
if (dim_count == 1) {
return this.props.measureInfos.map((measureInfo, measureInfoIndex) => {
if (dim_count === 1) {
return measureInfos.map((measureInfo, measureInfoIndex) => {
let sufixWrap = '';
if (((measureInfo.qFallbackTitle + vExtraLabel).length > 11 && vLetterSizeHeader == 0)
|| ((measureInfo.qFallbackTitle + vExtraLabel).length > 12 && vLetterSizeHeader == -2)) {
if (((measureInfo.qFallbackTitle + vExtraLabel).length > 11 && vLetterSizeHeader === 0)
|| ((measureInfo.qFallbackTitle + vExtraLabel).length > 12 && vLetterSizeHeader === -2)) {
sufixWrap = '70';
} else {
sufixWrap = 'Empty';
@@ -234,6 +250,7 @@ class HeaderWrapper extends PureComponent {
return null;
}
}
renderDimensionInfos () {
const {
dimensionInfos,
@@ -263,21 +280,24 @@ class HeaderWrapper extends PureComponent {
);
});
}
render () {
const { vNumDims, measure_count } = this.props;
return (
<div className="header-wrapper">
<table className="header">
<tr>
{this.renderDimensionInfos()}
{this.renderMeasureInfos()}
{this.renderSecondDimensionTitles()}
</tr>
{ vNumDims == 2 && measure_count > 1 && (
<tbody>
<tr>
{this.renderSecondDimensionSubTitles()}
{this.renderDimensionInfos()}
{this.renderMeasureInfos()}
{this.renderSecondDimensionTitles()}
</tr>
)}
{ vNumDims === 2 && measure_count > 1 && (
<tr>
{this.renderSecondDimensionSubTitles()}
</tr>
)}
</tbody>
</table>
</div>
);
@@ -291,19 +311,16 @@ HeaderWrapper.propTypes = {
vHeaderColorSchema: PropTypes.any,
vExportToExcel: PropTypes.any,
vNumDims: PropTypes.any,
nMeas: PropTypes.any,
dimensionInfos: PropTypes.any,
vLetterSizeHeader: PropTypes.any,
vHeaderAlignText: PropTypes.any,
MeasuresFormat: PropTypes.any,
measure_count: PropTypes.any,
vExcelButtonCode: PropTypes.any,
sufixCells: PropTypes.any,
LabelsArray: PropTypes.any,
SecondHeader: PropTypes.any,
vSeparatorCols: PropTypes.any,
nSecond: PropTypes.any,
nSecond2: PropTypes.any,
vLetterSize: PropTypes.any,
ExtraLabelsArray: PropTypes.any,
dim_count: PropTypes.any,
@@ -311,16 +328,4 @@ HeaderWrapper.propTypes = {
measureInfos: PropTypes.any
};
export async function generateHeaderWrapper ({ state }) {
const html = renderToStaticMarkup(
<HeaderWrapper
dimensionInfos={state.dimensionInfos}
measureInfos={state.measureInfos}
{...state.properties}
/>
);
return html;
}
export default HeaderWrapper;

315
src/index.js
View File

@@ -8,11 +8,13 @@ export default {
qHyperCubeDef: {
qDimensions: [],
qMeasures: [],
qInitialDataFetch: [{
qWidth: 10,
qHeight: 1000
}]
},
qInitialDataFetch: [
{
qWidth: 10,
qHeight: 1000
}
]
}
},
// TODO: make definition folder where root of this is index.js and each settings item is a seperate file
definition: {
@@ -48,44 +50,53 @@ export default {
{
value: 1,
label: '10k cells'
}, {
},
{
value: 2,
label: '20k cells'
}, {
},
{
value: 3,
label: '30k cells'
}, {
},
{
value: 4,
label: '40k cells'
}, {
},
{
value: 5,
label: '50k cells'
}, {
},
{
value: 6,
label: '60k cells'
}, {
},
{
value: 7,
label: '70k cells'
}, {
},
{
value: 8,
label: '80k cells'
}, {
},
{
value: 9,
label: '90k cells'
}, {
},
{
value: 10,
label: '100k cells'
}
],
defaultValue: 2,
defaultValue: 2
},
ErrorMessage: {
ref: 'errormessage',
label: 'Default error message',
type: 'string',
defaultValue: 'Ups! It seems you asked for too many data. Please filter more to see the whole picture.',
},
},
defaultValue: 'Ups! It seems you asked for too many data. Please filter more to see the whole picture.'
}
}
},
Header: {
type: 'items',
@@ -96,17 +107,21 @@ export default {
translation: 'Header Alignment',
type: 'number',
component: 'buttongroup',
options: [{
value: 1,
label: 'Left'
}, {
value: 2,
label: 'Center'
}, {
value: 3,
label: 'Right'
}],
defaultValue: 2,
options: [
{
value: 1,
label: 'Left'
},
{
value: 2,
label: 'Center'
},
{
value: 3,
label: 'Right'
}
],
defaultValue: 2
},
headercolors: {
ref: 'HeaderColorSchema',
@@ -117,36 +132,45 @@ export default {
{
value: 'Clean',
label: 'Clean'
}, {
},
{
value: 'Soft',
label: 'Soft'
}, {
},
{
value: 'Dark',
label: 'Dark'
}, {
},
{
value: 'Night',
label: 'Night'
}, {
},
{
value: 'Blue',
label: 'Blue'
}, {
},
{
value: 'Orange',
label: 'Orange'
}, {
},
{
value: 'Red',
label: 'Red'
}, {
},
{
value: 'Green',
label: 'Green'
}, {
},
{
value: 'Violete',
label: 'Violete'
}, {
},
{
value: 'Custom',
label: 'Custom'
}
],
defaultValue: 'Night',
defaultValue: 'Night'
},
HeaderTextColor: {
ref: 'HeaderTextColorSchema',
@@ -157,36 +181,45 @@ export default {
{
value: 'Black',
label: 'Black'
}, {
},
{
value: 'DimGray',
label: 'DimGray'
}, {
},
{
value: 'ForestGreen',
label: 'ForestGreen'
}, {
},
{
value: 'Gainsboro',
label: 'Gainsboro'
}, {
},
{
value: 'Indigo',
label: 'Indigo'
}, {
},
{
value: 'Navy',
label: 'Navy'
}, {
},
{
value: 'Purple',
label: 'Purple'
}, {
},
{
value: 'WhiteSmoke',
label: 'WhiteSmoke'
}, {
},
{
value: 'White',
label: 'White'
}, {
},
{
value: 'YellowGreen',
label: 'YellowGreen'
}
],
defaultValue: 'WhiteSmoke',
defaultValue: 'WhiteSmoke'
},
HeaderFontSize: {
ref: 'lettersizeheader',
@@ -197,13 +230,14 @@ export default {
{
value: 1,
label: 'Small'
}, {
},
{
value: 2,
label: 'Medium'
}
],
defaultValue: 2
},
}
}
},
Formatted: {
@@ -233,7 +267,7 @@ export default {
label: 'Name of CSV file (; separated)',
type: 'string',
defaultValue: '',
show: function (data) {
show (data) {
return data.customfilebool;
}
},
@@ -246,37 +280,46 @@ export default {
{
value: 'Clean',
label: 'Clean'
}, {
},
{
value: 'Soft',
label: 'Soft'
}, {
},
{
value: 'Dark',
label: 'Dark'
}, {
},
{
value: 'Night',
label: 'Night'
}, {
},
{
value: 'Blue',
label: 'Blue'
}, {
},
{
value: 'Orange',
label: 'Orange'
}, {
},
{
value: 'Red',
label: 'Red'
}, {
},
{
value: 'Green',
label: 'Green'
}, {
},
{
value: 'Violete',
label: 'Violete'
}, {
},
{
value: 'Custom',
label: 'Custom'
}
],
defaultValue: 'Clean',
show: function (data) {
show (data) {
return data.customfilebool == false;
}
},
@@ -289,37 +332,46 @@ export default {
{
value: 'Black',
label: 'Black'
}, {
},
{
value: 'DimGray',
label: 'DimGray'
}, {
},
{
value: 'ForestGreen',
label: 'ForestGreen'
}, {
},
{
value: 'Gainsboro',
label: 'Gainsboro'
}, {
},
{
value: 'Indigo',
label: 'Indigo'
}, {
},
{
value: 'Navy',
label: 'Navy'
}, {
},
{
value: 'Purple',
label: 'Purple'
}, {
},
{
value: 'WhiteSmoke',
label: 'WhiteSmoke'
}, {
},
{
value: 'White',
label: 'White'
}, {
},
{
value: 'YellowGreen',
label: 'YellowGreen'
}
],
defaultValue: 'Black',
show: function (data) {
show (data) {
return data.customfilebool == false;
}
},
@@ -332,19 +384,24 @@ export default {
{
value: 'Arial',
label: 'Arial'
}, {
},
{
value: 'Calibri',
label: 'Calibri'
}, {
},
{
value: 'Comic Sans MS',
label: 'Comic Sans MS'
}, {
},
{
value: 'MS Sans Serif',
label: 'MS Sans Serif'
}, {
},
{
value: 'Tahoma',
label: 'Tahoma'
}, {
},
{
value: 'Verdana',
label: 'Verdana'
}
@@ -360,7 +417,8 @@ export default {
{
value: 1,
label: 'Small'
}, {
},
{
value: 2,
label: 'Medium'
}
@@ -388,13 +446,16 @@ export default {
type: 'boolean',
component: 'switch',
label: 'Allow export to Excel',
options: [{
value: true,
label: 'On'
}, {
value: false,
label: 'Off'
}],
options: [
{
value: true,
label: 'On'
},
{
value: false,
label: 'Off'
}
],
defaultValue: true
},
FilterOnCellClick: {
@@ -406,7 +467,8 @@ export default {
{
value: true,
label: 'On'
}, {
},
{
value: false,
label: 'Off'
}
@@ -428,7 +490,8 @@ export default {
{
value: true,
label: 'On'
}, {
},
{
value: false,
label: 'Off'
}
@@ -440,7 +503,7 @@ export default {
translation: 'Concept 1',
type: 'string',
defaultValue: '',
show: function (data) {
show (data) {
return data.allsemaphores == false;
}
},
@@ -449,7 +512,7 @@ export default {
translation: 'Concept 2',
type: 'string',
defaultValue: '',
show: function (data) {
show (data) {
return data.allsemaphores == false;
}
},
@@ -458,7 +521,7 @@ export default {
translation: 'Concept 3',
type: 'string',
defaultValue: '',
show: function (data) {
show (data) {
return data.allsemaphores == false;
}
},
@@ -467,7 +530,7 @@ export default {
translation: 'Concept 4',
type: 'string',
defaultValue: '',
show: function (data) {
show (data) {
return data.allsemaphores == false;
}
},
@@ -476,7 +539,7 @@ export default {
translation: 'Concept 5',
type: 'string',
defaultValue: '',
show: function (data) {
show (data) {
return data.allsemaphores == false;
}
},
@@ -485,7 +548,7 @@ export default {
translation: 'Concept 6',
type: 'string',
defaultValue: '',
show: function (data) {
show (data) {
return data.allsemaphores == false;
}
},
@@ -494,7 +557,7 @@ export default {
translation: 'Concept 7',
type: 'string',
defaultValue: '',
show: function (data) {
show (data) {
return data.allsemaphores == false;
}
},
@@ -503,7 +566,7 @@ export default {
translation: 'Concept 8',
type: 'string',
defaultValue: '',
show: function (data) {
show (data) {
return data.allsemaphores == false;
}
},
@@ -512,7 +575,7 @@ export default {
translation: 'Concept 9',
type: 'string',
defaultValue: '',
show: function (data) {
show (data) {
return data.allsemaphores == false;
}
},
@@ -521,10 +584,10 @@ export default {
translation: 'Concept 10',
type: 'string',
defaultValue: '',
show: function (data) {
show (data) {
return data.allsemaphores == false;
}
},
}
}
},
MetricSemaphores: {
@@ -540,7 +603,8 @@ export default {
{
value: true,
label: 'On'
}, {
},
{
value: false,
label: 'Off'
}
@@ -552,7 +616,7 @@ export default {
translation: 'Metrics affected (1,2,4,...)',
type: 'string',
defaultValue: '0',
show: function (data) {
show (data) {
return data.allmetrics == false;
}
},
@@ -627,7 +691,7 @@ export default {
index: 10,
color: '#ffffff'
}
},
}
}
},
ColorLibrary: {
@@ -638,62 +702,62 @@ export default {
ref: 'collibclean',
translation: 'Clean',
type: 'string',
defaultValue: '#ffffff',
defaultValue: '#ffffff'
},
ColLibSoft: {
ref: 'collibsoft',
translation: 'Soft',
type: 'string',
defaultValue: '#efefef',
defaultValue: '#efefef'
},
ColLibDark: {
ref: 'collibdark',
translation: 'Dark',
type: 'string',
defaultValue: '#c4c4c4',
defaultValue: '#c4c4c4'
},
ColLibNight: {
ref: 'collibnight',
translation: 'Night',
type: 'string',
defaultValue: '#808080',
defaultValue: '#808080'
},
ColLibRed: {
ref: 'collibred',
translation: 'Red',
type: 'string',
defaultValue: '#d58b94',
defaultValue: '#d58b94'
},
ColLibOrange: {
ref: 'colliborange',
translation: 'Orange',
type: 'string',
defaultValue: '#fd6600',
defaultValue: '#fd6600'
},
ColLibViolete: {
ref: 'collibviolete',
translation: 'Violete',
type: 'string',
defaultValue: '#ccc0ff',
defaultValue: '#ccc0ff'
},
ColLibBlue: {
ref: 'collibblue',
translation: 'Blue',
type: 'string',
defaultValue: '#4575b4',
defaultValue: '#4575b4'
},
ColLibGreen: {
ref: 'collibgreen',
translation: 'Green',
type: 'string',
defaultValue: '#7bb51c',
defaultValue: '#7bb51c'
},
ColLibCustom: {
ref: 'collibcustom',
label: 'Custom',
type: 'string',
defaultValue: '#ffcccc',
},
defaultValue: '#ffcccc'
}
}
},
PijamaColorLibrary: {
@@ -704,62 +768,62 @@ export default {
ref: 'collibcleanp',
translation: 'Clean',
type: 'string',
defaultValue: '#ffffff',
defaultValue: '#ffffff'
},
ColLibSoftP: {
ref: 'collibsoftp',
translation: 'Soft',
type: 'string',
defaultValue: '#ffffff',
defaultValue: '#ffffff'
},
ColLibDarkP: {
ref: 'collibdarkp',
translation: 'Dark',
type: 'string',
defaultValue: '#efefef',
defaultValue: '#efefef'
},
ColLibNightP: {
ref: 'collibnightp',
translation: 'Night',
type: 'string',
defaultValue: '#c4c4c4',
defaultValue: '#c4c4c4'
},
ColLibRedP: {
ref: 'collibredp',
translation: 'Red',
type: 'string',
defaultValue: '#ffcccc',
defaultValue: '#ffcccc'
},
ColLibOrangeP: {
ref: 'colliborangep',
translation: 'Orange',
type: 'string',
defaultValue: '#ffcc66',
defaultValue: '#ffcc66'
},
ColLibVioleteP: {
ref: 'collibvioletep',
translation: 'Violete',
type: 'string',
defaultValue: '#e6e6ff',
defaultValue: '#e6e6ff'
},
ColLibBlueP: {
ref: 'collibbluep',
translation: 'Blue',
type: 'string',
defaultValue: '#b3d9ff',
defaultValue: '#b3d9ff'
},
ColLibGreenP: {
ref: 'collibgreenp',
translation: 'Green',
type: 'string',
defaultValue: '#98fb98',
defaultValue: '#98fb98'
},
ColLibCustomP: {
ref: 'collibcustomp',
label: 'Custom',
type: 'string',
defaultValue: '#ffffff',
},
defaultValue: '#ffffff'
}
}
}
}
@@ -774,11 +838,10 @@ export default {
'$timeout',
function () { }
],
paint: function ($element, layout) {
paint ($element, layout) {
try {
paint($element, layout, this);
}
catch (e) {
} catch (e) {
console.error(e); // eslint-disable-line no-console
throw e;
}

10
src/main.less
View File

@@ -9,10 +9,6 @@
line-height: 1em!important;
}
* {
box-sizing: border-box;
}
div.qv-object-content-container {
overflow-x: scroll;
overflow-y: hidden;
@@ -172,14 +168,14 @@
.row-wrapper {
position: absolute;
top: 97px;
height: 100% !Important;
height: calc(~"100% - 97px");
overflow-x: hidden;
overflow-y: scroll;
padding: 0;
margin-top: 0;
}
.kpi-table .fdim-cells {
.kpi-table .fdim-cells, .data-table td {
line-height: 1em!important;
}
@@ -194,7 +190,7 @@
height: 100%;
margin: 0;
padding: 0;
z-index: 999;
z-index: 100;
position: absolute;
top: 0;
left: 0;

38
src/masking.js
View File

@@ -1,6 +1,6 @@
import { addSeparators } from './utilities';
export function ApplyPreMask(mask, value) {//aqui
export function ApplyPreMask (mask, value) { // aqui
if (mask.indexOf(';') >= 0) {
if (value >= 0) {
switch (mask.substring(0, mask.indexOf(';'))) {
@@ -16,21 +16,21 @@ export function ApplyPreMask(mask, value) {//aqui
return (ApplyMask(mask.substring(0, mask.indexOf(';')), value));
}
} else {
var vMyValue = value * -1;
var vMyMask = mask.substring(mask.indexOf(';') + 1, mask.length);
const vMyValue = value * -1;
let vMyMask = mask.substring(mask.indexOf(';') + 1, mask.length);
vMyMask = vMyMask.replace('(', '');
vMyMask = vMyMask.replace(')', '');
switch (vMyMask) {
case '#.##0':
return ('(' + addSeparators(vMyValue, '.', ',', 0) + ')');
return (`(${addSeparators(vMyValue, '.', ',', 0)})`);
case '#,##0':
return ('(' + addSeparators(vMyValue, ',', '.', 0) + ')');
return (`(${addSeparators(vMyValue, ',', '.', 0)})`);
case '-#.##0':
return ('(' + addSeparators(vMyValue, '.', ',', 0) + ')');
return (`(${addSeparators(vMyValue, '.', ',', 0)})`);
case '-#,##0':
return ('(' + addSeparators(vMyValue, ',', '.', 0) + ')');
return (`(${addSeparators(vMyValue, ',', '.', 0)})`);
default:
return ('(' + ApplyMask(vMyMask, vMyValue) + ')');
return (`(${ApplyMask(vMyMask, vMyValue)})`);
}
}
} else {
@@ -38,13 +38,12 @@ export function ApplyPreMask(mask, value) {//aqui
}
}
function ApplyMask(mask, value) {
'use strict';
if (!mask || isNaN(+value)) {
function ApplyMask (mask, value) {
if (!mask || isNaN(Number(value))) {
return value; // return as it is.
}
var isNegative, result, decimal, group, posLeadZero, posTrailZero, posSeparator,
let isNegative, result, decimal, group, posLeadZero, posTrailZero, posSeparator,
part, szSep, integer,
// find prefix/suffix
@@ -52,7 +51,8 @@ function ApplyMask(mask, value) {
start = mask.search(/[0-9\-\+#]/),
prefix = start > 0 ? mask.substring(0, start) : '',
// reverse string: not an ideal method if there are surrogate pairs
str = mask.split('').reverse().join(''),
str = mask.split('').reverse()
.join(''),
end = str.search(/[0-9\-\+#]/),
offset = len - end,
substr = mask.substring(offset, offset + 1),
@@ -63,7 +63,7 @@ function ApplyMask(mask, value) {
mask = mask.substring(start, indx);
// convert any string to number according to formation sign.
value = mask.charAt(0) === '-' ? -value : +value;
value = mask.charAt(0) === '-' ? -value : Number(value);
isNegative = value < 0 ? value = -value : 0; // process only abs(), and turn on flag.
// search for separator for grp & decimal, anything not digit, not +/- sign, not #.
@@ -75,14 +75,14 @@ function ApplyMask(mask, value) {
mask = mask.split(decimal);
// Fix the decimal first, toFixed will auto fill trailing zero.
value = value.toFixed(mask[1] && mask[1].length);
value = +(value) + ''; // convert number to string to trim off *all* trailing decimal zero(es)
value = String(Number(value)); // convert number to string to trim off *all* trailing decimal zero(es)
// fill back any trailing zero according to format
posTrailZero = mask[1] && mask[1].lastIndexOf('0'); // look for last zero in format
part = value.split('.');
// integer will get !part[1]
if (!part[1] || (part[1] && part[1].length <= posTrailZero)) {
value = (+value).toFixed(posTrailZero + 1);
value = (Number(value)).toFixed(posTrailZero + 1);
}
szSep = mask[0].split(group); // look for separator
mask[0] = szSep.join(''); // join back without separator for counting the pos of any leading 0.
@@ -90,9 +90,9 @@ function ApplyMask(mask, value) {
posLeadZero = mask[0] && mask[0].indexOf('0');
if (posLeadZero > -1) {
while (part[0].length < (mask[0].length - posLeadZero)) {
part[0] = '0' + part[0];
part[0] = `0${part[0]}`;
}
} else if (+part[0] === 0) {
} else if (Number(part[0]) === 0) {
part[0] = '';
}
@@ -110,7 +110,7 @@ function ApplyMask(mask, value) {
for (indx = 0; indx < len; indx++) {
str += integer.charAt(indx); // ie6 only support charAt for sz.
// -posSeparator so that won't trail separator on full length
//jshint -W018
// jshint -W018
if (!((indx - offset + 1) % posSeparator) && indx < len - posSeparator) {
str += group;
}

182
src/paint.js
View File

@@ -1,86 +1,120 @@
import $ from 'jquery';
import { enableExcelExport } from './excel-export';
import { generateHeaderWrapper } from './header-wrapper.jsx';
import { generateRowWrapper } from './row-wrapper.jsx';
import HeaderWrapper from './header-wrapper.jsx';
import RowWrapper, { prepareProps } from './row-wrapper.jsx';
import initializeStore from './store';
import React from 'react';
// import ReactDOM from 'react-dom';
import { renderToStaticMarkup } from 'react-dom/server';
export default async function paint($element, layout, component) {
const state = initializeStore({ $element, layout, component });
export default async function paint ($element, layout, component) {
const state = initializeStore({
$element,
layout,
component
});
const {
ArrayGetSelectedCount,
vNumDims,
ConceptMatrixColElem,
ConceptMatrixColElemTable,
ConceptMatrixRowElem,
vSeparatorCols,
vSeparatorCols
} = state.properties;
let html = await generateHeaderWrapper({ state });
const rowWrapperHTML = await generateRowWrapper({
layout,
colors: state.colors,
...state.properties
const rowWrapperProps = await prepareProps({
state: {
layout,
colors: state.colors,
...state.properties
}
});
html += rowWrapperHTML;
const jsx = (
<React.Fragment>
<div className="kpi-table">
<HeaderWrapper
dimensionInfos={state.dimensionInfos}
measureInfos={state.measureInfos}
{...state.properties}
/>
<RowWrapper
colors={state.colors}
layout={layout}
{...state.properties}
{...rowWrapperProps}
/>
</div>
<div className="data-table">
<HeaderWrapper
dimensionInfos={state.dimensionInfos}
measureInfos={state.measureInfos}
{...state.properties}
/>
<RowWrapper
colors={state.colors}
layout={layout}
{...state.properties}
{...rowWrapperProps}
/>
</div>
</React.Fragment>
);
// TODO: switch to render when jquery interaction stuff in renderData is gone
// ReactDOM.render(jsx, $element[0]);
const html = renderToStaticMarkup(jsx);
$element.html(html);
RenderData();
//render data
function RenderData() {
// freeze header and first column
// TODO: Note that the full table is mounted twice here, there's then some jquery down below that removes data from kpi-table and headers from data-table
var x = "<div class='kpi-table'>";
x += html;
x += '</div>';
x += "<div class='data-table'>";
x += html;
x += '</div>';
$element.html(x);
// TODO: move jquery interactions into their respective components
// TODO: move jquery interactions into their respective components
// Hook up interactions and some html mangling
function RenderData () {
$('.data-table .row-wrapper').on('scroll', function () {
$('.kpi-table .row-wrapper').scrollTop($(this).scrollTop()),
$(this).scrollTop() > 50 ? (
angular.element(document.querySelector('.data-table .row-wrapper')).css('top', '0'),
angular.element(document.querySelector('.kpi-table .row-wrapper')).css('top', '0')
) : (
angular.element(document.querySelector('.data-table .row-wrapper')).css('top', '97px'),//97px
angular.element(document.querySelector('.kpi-table .row-wrapper')).css('top', '97px')//97px
);
$(`[tid="${layout.qInfo.qId}"] .kpi-table .row-wrapper`).scrollTop($(this).scrollTop());
});
//on hover popup with cell value, only in headers
// on hover popup with cell value, only in headers
$('.header-wrapper th').hover(function () {
$('.tooltip').delay(500).show(0);
$('.header-wrapper th').children('.tooltip').remove();
$('.tooltip').delay(500)
.show(0);
$('.header-wrapper th').children('.tooltip')
.remove();
var element = $(this);
var offset = element.offset();
var toolTip = $("<div class='tooltip'></div>");
const element = $(this);
const offset = element.offset();
const toolTip = $("<div class='tooltip'></div>");
toolTip.css(
{
top: offset.top,
left: offset.left
});
toolTip.css({
top: offset.top,
left: offset.left
});
toolTip.text(element.text());
$('.header-wrapper th').append(toolTip);
}, function () {
$('.tooltip').delay(0).hide(0);
}, () => {
$('.tooltip').delay(0)
.hide(0);
});
//allow making selections inside the table
// allow making selections inside the table
$('.data-table td').on('click', function () {
if (layout.filteroncellclick == false)
if (layout.filteroncellclick == false) {
return;
var indextr = $(this).parent().parent().children().index($(this).parent()); //identifica la row
var indextd = $(this).parent().children().index($(this)); //identifica la col
}
const indextr = $(this).parent()
.parent()
.children()
.index($(this).parent()); // identifica la row
const indextd = $(this).parent()
.children()
.index($(this)); // identifica la col
var SelectRow = 0;
var SelectCol = 0;
let SelectRow = 0;
let SelectCol = 0;
SelectRow = ConceptMatrixRowElem[(indextr)];
@@ -92,7 +126,7 @@ export default async function paint($element, layout, component) {
// and the check allow null values is active
if (vNumDims > 1 && indextd > 0) {
if (ArrayGetSelectedCount[1] > 0) {
var SelectB = JSON.parse(JSON.stringify(ConceptMatrixColElemTable));
const SelectB = JSON.parse(JSON.stringify(ConceptMatrixColElemTable));
component.backendApi.selectValues(1, SelectB, true);
$(this).toggleClass('selected');
}
@@ -103,7 +137,7 @@ export default async function paint($element, layout, component) {
}
if (indextd > 0 && ArrayGetSelectedCount[0] > 0) {
var SelectA = JSON.parse(JSON.stringify(ConceptMatrixRowElem));
const SelectA = JSON.parse(JSON.stringify(ConceptMatrixRowElem));
component.backendApi.selectValues(0, SelectA, true);
$(this).toggleClass('selected');
}
@@ -112,16 +146,18 @@ export default async function paint($element, layout, component) {
component.backendApi.selectValues(0, [SelectRow], true);
$(this).toggleClass('selected');
}
}),
//allow selections through the header of the second dimension
});
// allow selections through the header of the second dimension
$('.header-wrapper th').on('click', function () {
var indextd = $(this).parent().children().index($(this)); //identifica la col
const indextd = $(this).parent()
.children()
.index($(this)); // identifica la col
var SelectCol = 0;
let SelectCol = 0;
if (vNumDims > 1 && indextd > 0) {
if (ArrayGetSelectedCount[1] > 0) {
var SelectB = JSON.parse(JSON.stringify(ConceptMatrixColElem));
const SelectB = JSON.parse(JSON.stringify(ConceptMatrixColElem));
component.backendApi.selectValues(1, SelectB, true);
$(this).toggleClass('selected');
}
@@ -134,15 +170,18 @@ export default async function paint($element, layout, component) {
component.backendApi.selectValues(1, [SelectCol], true);
$(this).toggleClass('selected');
}
}),
//allow selections in desc dimension cells
});
// allow selections in desc dimension cells
$('.kpi-table td').on('click', function () {
var indextr = $(this).parent().parent().children().index($(this).parent()); //identifica la row
var SelectRow = 0;
const indextr = $(this).parent()
.parent()
.children()
.index($(this).parent()); // identifica la row
let SelectRow = 0;
SelectRow = ConceptMatrixRowElem[(indextr)];
if (ArrayGetSelectedCount[0] > 0) {
var SelectA = JSON.parse(JSON.stringify(ConceptMatrixRowElem));
const SelectA = JSON.parse(JSON.stringify(ConceptMatrixRowElem));
component.backendApi.selectValues(0, SelectA, true);
$(this).toggleClass('selected');
}
@@ -154,15 +193,18 @@ export default async function paint($element, layout, component) {
enableExcelExport(layout, html);
// freeze first column
$('.qv-object-content-container').on('scroll', function (t) {
$('.kpi-table').css('left', Math.round(t.target.scrollLeft) + 'px');
$('.qv-object-content-container').on('scroll', (t) => {
$('.kpi-table').css('left', `${Math.round(t.target.scrollLeft)}px`);
});
$('.kpi-table .row-wrapper tr').each(function () {
$(this).find('th:not(.fdim-cells)').remove(),
$(this).find('td:not(.fdim-cells)').remove();
$(this).find('th:not(.fdim-cells)')
.remove();
$(this).find('td:not(.fdim-cells)')
.remove();
});
$('.kpi-table .header-wrapper tr').each(function () {
$(this).find('th:not(.fdim-cells)').remove();
$(this).find('th:not(.fdim-cells)')
.remove();
});
}
}

33
src/row-list.jsx
View File

@@ -2,33 +2,32 @@ import React from 'react';
import PropTypes from 'prop-types';
import StyleBuilder from './style-builder';
// TODO: everything except cell rendering is pretty much identical to ElseDimensionRowList
class RowList extends React.PureComponent {
generatePaddingTextElement (hasCustomFileStyle) {
const { vPadding, vFontFamily } = this.props;
if (vPadding && !hasCustomFileStyle) {
const paddingStyle = {
marginLeft: '15px',
fontFamily: vFontFamily
fontFamily: vFontFamily,
marginLeft: '15px'
};
return (
<span style={paddingStyle}></span>
<span style={paddingStyle} />
);
} else {
return null;
}
return null;
}
render () {
const {
vLetterSize,
vCustomFileBool,
vFontFamily,
tableData, //ConceptMatrix,
tableData,
MeasurementsComponent
} = this.props;
return (
<React.Fragment>
<tbody>
{tableData.map((row, rowNumber) => {
const rowHeaderText = row[0] || '';
if (rowHeaderText === '-') {
@@ -36,7 +35,7 @@ class RowList extends React.PureComponent {
}
const styleBuilder = new StyleBuilder(this.props);
if (vCustomFileBool) {
styleBuilder.parseCustomFileStyle(rowHeaderText); // TODO: parseCSVStyle?
styleBuilder.parseCustomFileStyle(rowHeaderText);
} else {
styleBuilder.applyStandardAttributes(rowNumber);
styleBuilder.applyCustomStyle({ fontSize: (14 + vLetterSize) + 'px' });
@@ -48,11 +47,19 @@ class RowList extends React.PureComponent {
...styleBuilder.getStyle()
};
const paddingTextElement = this.generatePaddingTextElement(styleBuilder.hasCustomFileStyle());
const measurementsProps = { rowNumber, rowHeaderText, styleBuilder };
const measurementsProps = {
rowHeaderText,
rowNumber,
styleBuilder
};
return (
<tr key={rowNumber}>
<td className="fdim-cells" style={rowStyle}>
{paddingTextElement}{rowHeaderText}
<td
className="fdim-cells"
style={rowStyle}
>
{paddingTextElement}
{rowHeaderText}
</td>
<MeasurementsComponent
columnText={rowHeaderText}
@@ -62,7 +69,7 @@ class RowList extends React.PureComponent {
</tr>
);
})}
</React.Fragment>
</tbody>
);
}
}

636
src/row-wrapper.js
View File

@@ -1,636 +0,0 @@
import $ from 'jquery';
import { addSeparators, Deferred } from './utilities';
import { ApplyPreMask } from './masking';
export function generateRowWrapper ({
layout,
colors,
nMeasAux,
vNumDims,
measure_count,
MeasuresFormat,
vNumMeasures,
vNumMeasures2,
sufixCells,
vFontFamily,
vSeparatorCols,
lastrow,
ConceptMatrix,
ConceptMatrixFirstClean,
vLetterSize,
ConceptMatrixPivot
}) {
var vCustomFileBool = layout.customfilebool;
var vCustomFile = layout.customfile;
var vPadding = layout.indentbool;
var vPaddingText = '';
var vGlobalComas = 0;
var vGlobalComas2 = 0;
var vGlobalComment = 0;
var vGlobalCommentColor = '';
var vGlobalFontSize = 0;
var vComas = 0;
var vMedium = false;
var vFontSize = '';
var vColorText = layout.BodyTextColorSchema;
var vDivide = 1;
var vSymbolForNulls = layout.symbolfornulls;
var vDynamicColorBody = 'vColLib' + layout.ColorSchema;
var vDynamicColorBodyP = 'vColLib' + layout.ColorSchema + 'P';
var vAllMetrics = layout.allmetrics;
var MetricsAffectedMatrix = JSON.parse('[' + layout.metricssemaphore + ']');
var vColorMetric1 = layout.colorstatus1.color;
var vColorMetric2 = layout.colorstatus2.color;
var vColorMetric3 = layout.colorstatus3.color;
var vColorMetric1Text = layout.colorstatus1text.color;
var vColorMetric2Text = layout.colorstatus2text.color;
var vColorMetric3Text = layout.colorstatus3text.color;
var vColorSemaphore = '';
var vColorSemaphoreText = '';
var vCritic = layout.metricsstatus1;
var vMMedium = layout.metricsstatus2;
var CustomArray = new Array();
var CustomArrayBasic = new Array();
var vNumCustomHeaders = 0;
var vColumnText = '';
var vColumnNum = '';
var vMaskNum = 0;
var StyleTags = '';
var vColorSchema = colors[vDynamicColorBody];
var vColorSchemaP = colors[vDynamicColorBodyP];
var vAllSemaphores = layout.allsemaphores;
var ConceptsAffectedMatrix = new Array(10);
if (vAllSemaphores == false) {
ConceptsAffectedMatrix[0] = layout.conceptsemaphore1;
ConceptsAffectedMatrix[1] = layout.conceptsemaphore2;
ConceptsAffectedMatrix[2] = layout.conceptsemaphore3;
ConceptsAffectedMatrix[3] = layout.conceptsemaphore4;
ConceptsAffectedMatrix[4] = layout.conceptsemaphore5;
ConceptsAffectedMatrix[5] = layout.conceptsemaphore6;
ConceptsAffectedMatrix[6] = layout.conceptsemaphore7;
ConceptsAffectedMatrix[7] = layout.conceptsemaphore8;
ConceptsAffectedMatrix[8] = layout.conceptsemaphore9;
ConceptsAffectedMatrix[9] = layout.conceptsemaphore10;
}
//This function opens a csv file that contains the parameters for the custom mode
//this will prevent consuming to many dimensions, as there allowed only 10 columns between
//dimensions and metrics
function ReadCustomSchema() {
var Url = '/Extensions/PLSmartPivot/' + vCustomFile;
var Items = $.get(Url).then(function (response) {
var allTextLines = response.split(/\r\n|\n/);
var headers = allTextLines[0].split(';');
vNumCustomHeaders = headers.length;
for (var i = 0; i < allTextLines.length; i++) {
CustomArray[i] = new Array(headers.length);
var data = allTextLines[i].split(';');
if (data.length == headers.length) {
for (var j = 0; j < headers.length; j++) {
CustomArrayBasic[i] = data[0];
CustomArray[i][j] = data[j];
}
}
}
});
return Items;
}
//Paint the numbers
function PaintTheNumbers() {
if (vNumDims == 1) {
//apply the custom style
for (var nmrows = 0; nmrows <= lastrow; nmrows++) {
vColumnText = ConceptMatrix[nmrows][0];
vGlobalComment = 0;
vGlobalCommentColor = '';
if (vColumnText != '-') {
StyleTags = '';
if (vCustomFileBool) {
vComas = 0;
vMedium = false;
vGlobalComas = 0;
vGlobalComas2 = 0;
vGlobalFontSize = 0;
var aach = 0;
var vCustomAttribute = '';
StyleTags = '';
for (aach = 1; aach < vNumCustomHeaders; aach++) { // for each custom attribute allocated in the external csv
if (CustomArrayBasic.indexOf(vColumnText) < 0) {
vCustomAttribute == 'none';
} else {
vCustomAttribute = CustomArray[CustomArrayBasic.indexOf(vColumnText)][aach]; //CustomArrayBasic se ha rellenado con los atributos de look al principio de la ejecución del código
}
ApplyBold(vCustomAttribute, vComas);
vComas += vGlobalComas;
ApplyComment(vCustomAttribute, vComas);
vComas += vGlobalComas;
ApplyFontStyle(vCustomAttribute, vComas);
vComas += vGlobalComas;
ApplyBackgroundColor(vCustomAttribute, vComas);
vComas += vGlobalComas;
ApplyFontColor(vCustomAttribute, vComas);
vComas += vGlobalComas;
ApplyFontSize(vCustomAttribute, vComas);
vComas += vGlobalComas;
ApplyAlignment(vCustomAttribute, vComas);
vComas += vGlobalComas;
}
if (vGlobalFontSize == 0) {
if (vComas > 0) {
StyleTags += ';font-size:' + (14 + vLetterSize) + 'px';
} else {
StyleTags += 'font-size:' + (14 + vLetterSize) + 'px';
}
vFontSize = ';font-size:' + (14 + vLetterSize) + 'px';
vGlobalFontSize = 1;
}
// after this the row styles are configured
} else {
ApplyStandardAttributes(nmrows);
vFontSize = ';font-size:' + (14 + vLetterSize) + 'px';
}
if (vPadding && vGlobalComas2 == 0) {
vPaddingText = '<span style="margin-left:15px;font-family:' + vFontFamily + '"></span>';
} else {
vPaddingText = '';
}
html += '<tr><td class="fdim-cells" style ="font-family:' + vFontFamily + ';' + StyleTags + ';width:230px">' + vPaddingText + vColumnText + '</td>';//';' + StyleTags + ;width:230px
if (vGlobalComment == 1) {
if (vGlobalCommentColor == '') {
vGlobalCommentColor = 'white';
}
if (vComas > 0) {
StyleTags += ';color:' + vGlobalCommentColor;
} else {
StyleTags += 'color:' + vGlobalCommentColor;
}
}
for (var nMeasures2 = 1; nMeasures2 <= vNumMeasures; nMeasures2++) {
if (vColumnText.substring(0, 1) == '%') {
vColumnNum = ApplyPreMask('0,00%', ConceptMatrix[nmrows][nMeasures2]);
vSpecialF = '0,00%';
} else {
switch (MeasuresFormat[nMeasures2 - 1].substr(MeasuresFormat[nMeasures2 - 1].length - 1)) {
case 'k':
vDivide = 1000;
break;
case 'K':
vDivide = 1000;
break;
case 'm':
vDivide = 1000000;
break;
case 'M':
vDivide = 1000000;
break;
default:
vDivide = 1;
break;
}
var vSpecialF = MeasuresFormat[nMeasures2 - 1].replace(/k|K|m|M/gi, '');
if (!isNaN(ConceptMatrix[nmrows][nMeasures2])) {
vMaskNum = ConceptMatrix[nmrows][nMeasures2];
if (vSpecialF.substring(vSpecialF.length - 1) == '%') {
vMaskNum = vMaskNum * 100;
}
switch (vSpecialF) {
case '#.##0':
vColumnNum = addSeparators((vMaskNum / vDivide), '.', ',', 0);
break;
case '#,##0':
vColumnNum = addSeparators((vMaskNum / vDivide), ',', '.', 0);
break;
default:
vColumnNum = ApplyPreMask(vSpecialF, (vMaskNum / vDivide));
break;
}
} else {
vColumnNum = vSymbolForNulls;
}
}
if (vGlobalComment == 1) {
vColumnNum = '.';
}
// apply the semaphore styles where needed
if ((vAllSemaphores || ConceptsAffectedMatrix.indexOf(vColumnText) >= 0) && (vAllMetrics || MetricsAffectedMatrix.indexOf(nMeasures2) >= 0) && !isNaN(ConceptMatrix[nmrows][nMeasures2]) && vGlobalComment == 0) {
if (ConceptMatrix[nmrows][nMeasures2] < vCritic) {
vColorSemaphore = vColorMetric1;
vColorSemaphoreText = vColorMetric1Text;
} else {
if (ConceptMatrix[nmrows][nMeasures2] < vMMedium) {
vColorSemaphore = vColorMetric2;
vColorSemaphoreText = vColorMetric2Text;
} else {
vColorSemaphore = vColorMetric3;
vColorSemaphoreText = vColorMetric3Text;
}
}
html += '<td class="grid-cells' + sufixCells + '" style ="font-family:' + vFontFamily + vFontSize + ';color:' + vColorSemaphoreText + ';background-color:' + vColorSemaphore + ';text-align:right;padding-left:4px">' + vColumnNum + '</td>';
} else {
html += '<td class="grid-cells' + sufixCells + '" style ="font-family:' + vFontFamily + vFontSize + ';' + StyleTags + ';text-align:right;padding-left:4px">' + vColumnNum + '</td>';
}
}
}
html += '</tr>';
}
} else {
var nPivotRows = ConceptMatrixFirstClean.length;
for (var nmrows2 = 0; nmrows2 < nPivotRows; nmrows2++) {
vColumnText = ConceptMatrixPivot[nmrows2][0];// the descriptive account text
vGlobalComment = 0;
vGlobalCommentColor = '';
if (vColumnText != '-') {
StyleTags = '';
if (vCustomFileBool) {
vComas = 0;
vMedium = false;
vGlobalComas = 0;
vGlobalComas2 = 0;
vGlobalFontSize = 0;
var aach2 = 0;
var vCustomAttribute2 = '';
StyleTags = '';
for (aach2 = 1; aach2 < vNumCustomHeaders; aach2++) { // for each attribute allocated in the external csv
if (CustomArrayBasic.indexOf(vColumnText) < 0) {
vCustomAttribute2 == 'none';
} else {
vCustomAttribute2 = CustomArray[CustomArrayBasic.indexOf(vColumnText)][aach2]; //CustomArrayBasic has been filled with the custom attribute at the begining of the code
}
ApplyBold(vCustomAttribute2, vComas);
vComas += vGlobalComas;
ApplyComment(vCustomAttribute2, vComas);
vComas += vGlobalComas;
ApplyFontStyle(vCustomAttribute2, vComas);
vComas += vGlobalComas;
ApplyBackgroundColor(vCustomAttribute2, vComas);
vComas += vGlobalComas;
ApplyFontColor(vCustomAttribute2, vComas);
vComas += vGlobalComas;
ApplyFontSize(vCustomAttribute2, vComas);
vComas += vGlobalComas;
ApplyAlignment(vCustomAttribute2, vComas);
vComas += vGlobalComas;
}
if (vGlobalFontSize == 0) {
if (vComas > 0) {
StyleTags += ';font-size:' + (14 + vLetterSize) + 'px';
} else {
StyleTags += 'font-size:' + (14 + vLetterSize) + 'px';
}
vFontSize = ';font-size:' + (14 + vLetterSize) + 'px';
vGlobalFontSize = 1;
}
// custom styles configured
} else {
ApplyStandardAttributes(nmrows2);
vFontSize = ';font-size:' + (14 + vLetterSize) + 'px';
}
if (vPadding && vGlobalComas2 == 0) {
vPaddingText = '<span style="margin-left:15px;font-family:' + vFontFamily + '"></span>';
} else {
vPaddingText = '';
}
html += '<tr><td class="fdim-cells" style ="font-family:' + vFontFamily + ';' + StyleTags + ';width:230px">' + vPaddingText + vColumnText + '</td>';
if (vGlobalComment == 1) {
if (vGlobalCommentColor == '') {
vGlobalCommentColor = 'white';
}
if (vComas > 0) {
StyleTags += ';color:' + vGlobalCommentColor;
} else {
StyleTags += 'color:' + vGlobalCommentColor;
}
}
var nMeasure7 = 0;
var nMeasure72 = -1;
var nMeasure72Semaphore = 0;
for (var nMeasures22 = 1; nMeasures22 <= vNumMeasures2; nMeasures22++) {
nMeasAux = nMeasure72Semaphore;
nMeasure7++;
nMeasure72++;
if (vColumnText.substring(0, 1) == '%') {
vColumnNum = ApplyPreMask('0,00%', ConceptMatrixPivot[nmrows2][nMeasures22]);
var vSpecialF = '0,00%';
} else {
switch (MeasuresFormat[nMeasure72].substr(MeasuresFormat[nMeasure72].length - 1)) {
case 'k':
vDivide = 1000;
break;
case 'K':
vDivide = 1000;
break;
case 'm':
vDivide = 1000000;
break;
case 'M':
vDivide = 1000000;
break;
default:
vDivide = 1;
break;
}
var vSpecialF = MeasuresFormat[nMeasure72].replace(/k|K|m|M/gi, '');
if (!isNaN(ConceptMatrixPivot[nmrows2][nMeasures22])) {
vMaskNum = ConceptMatrixPivot[nmrows2][nMeasures22];
if (vSpecialF.substring(vSpecialF.length - 1) == '%') {
vMaskNum = vMaskNum * 100;
}
switch (vSpecialF) {
case '#.##0':
vColumnNum = addSeparators((vMaskNum / vDivide), '.', ',', 0);
break;
case '#,##0':
vColumnNum = addSeparators((vMaskNum / vDivide), ',', '.', 0);
break;
default:
vColumnNum = ApplyPreMask(vSpecialF, (vMaskNum / vDivide));
break;
}
} else {
vColumnNum = vSymbolForNulls;
}
}
if (vSeparatorCols && nMeasure7 == (measure_count + 1)) {
html += '<th class = "empty" style="color:white' + ';font-family:' + vFontFamily + ';font-size:' + (12 + vLetterSize) + 'px">' + '*' + '</th>';
nMeasure7 = 1;
}
if (nMeasure72 == (measure_count - 1)) {
nMeasure72 = -1;
nMeasure72Semaphore = measure_count;
} else {
nMeasure72Semaphore = nMeasure72 + 1;
}
// apply the semaphores where needed
if (vGlobalComment == 1) {
vColumnNum = '.';
}
if ((vAllSemaphores || ConceptsAffectedMatrix.indexOf(vColumnText) >= 0) && (vAllMetrics || MetricsAffectedMatrix.indexOf(nMeasure72Semaphore) >= 0) && !isNaN(ConceptMatrixPivot[nmrows2][nMeasures22]) && vGlobalComment == 0) {
if (ConceptMatrixPivot[nmrows2][nMeasures22] < vCritic) {
vColorSemaphore = vColorMetric1;
vColorSemaphoreText = vColorMetric1Text;
} else {
if (ConceptMatrixPivot[nmrows2][nMeasures22] < vMMedium) {
vColorSemaphore = vColorMetric2;
vColorSemaphoreText = vColorMetric2Text;
} else {
vColorSemaphore = vColorMetric3;
vColorSemaphoreText = vColorMetric3Text;
}
}
if (vSpecialF.substring(vSpecialF.length - 1) == '%' && vNumMeasures > 1) {
html += '<td class="grid-cells-small' + sufixCells + '" style ="font-family:' + vFontFamily + vFontSize + ';color:' + vColorSemaphoreText + ';background-color:' + vColorSemaphore + ';text-align:right;padding-left:4px">' + vColumnNum + '</td>';
} else {
html += '<td class="grid-cells' + sufixCells + '" style ="font-family:' + vFontFamily + vFontSize + ';color:' + vColorSemaphoreText + ';background-color:' + vColorSemaphore + ';text-align:right;padding-left:4px">' + vColumnNum + '</td>';
}
} else {
if (vSpecialF.substring(vSpecialF.length - 1) == '%' && vNumMeasures > 1) {
html += '<td class="grid-cells-small' + sufixCells + '" style ="font-family:' + vFontFamily + ';' + StyleTags + ';text-align:right;padding-right:4px">' + vColumnNum + '</td>';
} else {
html += '<td class="grid-cells' + sufixCells + '" style ="font-family:' + vFontFamily + ';' + StyleTags + ';text-align:right;padding-right:4px">' + vColumnNum + '</td>';
}
}
}
html += '</tr>';
}
}
}
}
// PYJAMAS
function ApplyStandardAttributes(strow) {
if (strow / 2 == Math.round(strow / 2)) {
StyleTags += 'background-color:' + vColorSchema + ';color:' + vColorText;
} else {
StyleTags += 'background-color:' + vColorSchemaP + ';color:' + vColorText;
}
StyleTags += ';font-size:' + (14 + vLetterSize) + 'px';
}
// transform the custom styles in html code
function ApplyBold(vCustomAttributes, vCustomComas) {
var vPuntoComa = '';
if (vCustomComas > 0) {
vPuntoComa = ';';
}
switch (vCustomAttributes) {
case '<bold>':
StyleTags += vPuntoComa + 'font-weight:bold';
vGlobalComas = 1;
vGlobalComas2 = 1;
break;
default:
StyleTags += '';
break;
}
}
function ApplyComment(vCustomAttributes) {
switch (vCustomAttributes) {
case '<comment>':
vGlobalComment = 1;
break;
default:
StyleTags += '';
break;
}
}
function ApplyFontStyle(vCustomAttributes, vCustomComas) {
var vPuntoComa = '';
if (vCustomComas > 0) {
vPuntoComa = ';';
}
switch (vCustomAttributes) {
case '<italic>':
StyleTags += vPuntoComa + 'font-style:italic';
vGlobalComas = 1;
vGlobalComas2 = 1;
break;
case '<oblique>':
StyleTags += vPuntoComa + 'font-style:oblique';
vGlobalComas = 1;
vGlobalComas2 = 1;
break;
default:
StyleTags += '';
break;
}
}
function ApplyBackgroundColor(vCustomAttributes, vCustomComas) {
var vPuntoComa = '';
if (vCustomComas > 0) {
vPuntoComa = ';';
}
switch (vCustomAttributes) {
case '<dark>':
StyleTags += vPuntoComa + 'background-color:' + colors.vColLibDark;
vGlobalComas = 1;
vGlobalComas2 = 1;
vGlobalCommentColor = colors.vColLibDark;
break;
case '<night>':
StyleTags += vPuntoComa + 'background-color:' + colors.vColLibNight;
vGlobalComas = 1;
vGlobalComas2 = 1;
vGlobalCommentColor = colors.vColLibNight;
break;
case '<soft>':
StyleTags += vPuntoComa + 'background-color:' + colors.vColLibSoft;
vGlobalComas = 1;
vGlobalComas2 = 1;
vGlobalCommentColor = colors.vColLibSoft;
break;
case '<red>':
StyleTags += vPuntoComa + 'background-color:' + colors.vColLibRed;
vGlobalComas = 1;
vGlobalComas2 = 1;
vGlobalCommentColor = colors.vColLibRed;
break;
case '<orange>':
StyleTags += vPuntoComa + 'background-color:' + colors.vColLibOrange;
vGlobalComas = 1;
vGlobalComas2 = 1;
vGlobalCommentColor = colors.vColLibOrange;
break;
case '<violete>':
StyleTags += vPuntoComa + 'background-color:' + colors.vColLibViolete;
vGlobalComas = 1;
vGlobalComas2 = 1;
vGlobalCommentColor = colors.vColLibViolete;
break;
case '<blue>':
StyleTags += vPuntoComa + 'background-color:' + colors.vColLibBlue;
vGlobalComas = 1;
vGlobalComas2 = 1;
vGlobalCommentColor = colors.vColLibBlue;
break;
case '<green>':
StyleTags += vPuntoComa + 'background-color:' + colors.vColLibGreen;
vGlobalComas = 1;
vGlobalComas2 = 1;
vGlobalCommentColor = colors.vColLibGreen;
break;
default:
if (vCustomAttributes.substring(0, 1) == '#' || vCustomAttributes.substring(0, 3).toUpperCase() == 'RGB') {
StyleTags += vPuntoComa + 'background-color:' + vCustomAttributes;
vGlobalComas = 1;
vGlobalComas2 = 1;
vGlobalCommentColor = vCustomAttributes;
}
break;
}
}
function ApplyFontColor(vCustomAttributes, vCustomComas) {
var vPuntoComa = '';
if (vCustomComas > 0) {
vPuntoComa = ';';
}
if (vCustomAttributes === '<white>' && vGlobalComment == 0) {
StyleTags += vPuntoComa + 'color:white';
vGlobalComas = 1;
vGlobalComas2 = 1;
}
}
function ApplyFontSize(vCustomAttributes, vCustomComas) {
var vPuntoComa = '';
if (vCustomComas > 0) {
vPuntoComa = ';';
}
switch (vCustomAttributes) {
case '<large>':
StyleTags += vPuntoComa + 'font-size:' + (15 + vLetterSize) + 'px';
vFontSize = ';font-size:' + (15 + vLetterSize) + 'px';
vGlobalComas = 1;
vGlobalComas2 = 1;
vGlobalFontSize = 1;
break;
case '<medium>':
StyleTags += vPuntoComa + 'font-size:' + (14 + vLetterSize) + 'px';
vFontSize = ';font-size:' + (14 + vLetterSize) + 'px';
vGlobalComas = 1;
vMedium == true;
vGlobalFontSize = 1;
break;
case '<small>':
StyleTags += vPuntoComa + 'font-size:' + (13 + vLetterSize) + 'px';
vFontSize = ';font-size:' + (13 + vLetterSize) + 'px';
vGlobalComas = 1;
vGlobalComas2 = 1;
vGlobalFontSize = 1;
break;
default:
StyleTags += '';
break;
}
}
function ApplyAlignment(vCustomAttributes, vCustomComas) {
var vPuntoComa = '';
if (vCustomComas > 0) {
vPuntoComa = ';';
}
switch (vCustomAttributes) {
case '<center>':
StyleTags += vPuntoComa + 'text-align:center';
vGlobalComas = 1;
vGlobalComas2 = 1;
break;
default:
StyleTags += '';
break;
}
}
const deferred = new Deferred();
let html = " <div class='row-wrapper'><table >";
const schemaPromise = (vCustomFileBool && vCustomFile.length > 4) ? ReadCustomSchema() : Promise.resolve();
schemaPromise.then(() => {
PaintTheNumbers();
html += '</table>';
html += '</div>';
deferred.resolve(html);
});
return deferred.promise; // should be promise
}

80
src/row-wrapper.jsx
View File

@@ -1,47 +1,48 @@
import React from 'react';
import PropTypes from 'prop-types';
import { renderToStaticMarkup } from 'react-dom/server';
import $ from 'jquery';
import PropTypes from 'prop-types';
import React from 'react';
import ElseDimensionMeasures from './else-dimension-measures.jsx';
import RowList from './row-list.jsx';
import SingleDimensionMeasures from './single-dimension-measures.jsx';
import ElseDimensionMeasures from './else-dimension-measures.jsx';
// TableBody?
class RowWrapper extends React.PureComponent {
render () {
const {
ConceptMatrix,
ConceptMatrixPivot
} = this.props;
let tableData, MeasurementsComponent;
if (this.props.vNumDims === 1) {
tableData = ConceptMatrix;
MeasurementsComponent = SingleDimensionMeasures;
} else {
tableData = ConceptMatrixPivot.filter(array => array.length);
MeasurementsComponent = ElseDimensionMeasures;
}
return (
<div className='row-wrapper'>
<table>
<RowList
tableData={tableData}
MeasurementsComponent={MeasurementsComponent}
{...this.props}
/>
</table>
</div>
);
const RowWrapper = props => {
const {
ConceptMatrix,
ConceptMatrixPivot,
vNumDims
} = props;
let MeasurementsComponent,
tableData;
if (vNumDims === 1) {
tableData = ConceptMatrix;
MeasurementsComponent = SingleDimensionMeasures;
} else {
tableData = ConceptMatrixPivot.filter(array => array.length);
MeasurementsComponent = ElseDimensionMeasures;
}
}
return (
<div className="row-wrapper">
<table>
<RowList
MeasurementsComponent={MeasurementsComponent}
tableData={tableData}
{...props}
/>
</table>
</div>
);
};
RowWrapper.propTypes = {
ConceptMatrix: PropTypes.array.isRequired,
ConceptMatrixPivot: PropTypes.array.isRequired
};
async function prepareProps ({ state }) {
export default RowWrapper;
export async function prepareProps ({ state }) {
const { colors, layout, vAllSemaphores, vDynamicColorBody, vDynamicColorBodyP } = state;
const props = {
colors,
@@ -99,7 +100,7 @@ async function prepareProps ({ state }) {
props.ConceptsAffectedMatrix[9] = layout.conceptsemaphore10;
}
function ReadCustomSchema() {
function ReadCustomSchema () {
var Url = '/Extensions/PLSmartPivot/' + props.vCustomFile;
return $.get(Url).then(function (response) {
var allTextLines = response.split(/\r\n|\n/);
@@ -126,14 +127,3 @@ async function prepareProps ({ state }) {
return props;
}
export async function generateRowWrapper (state) {
const preparedProps = await prepareProps({ state });
const html = renderToStaticMarkup(
<RowWrapper
{...state}
{...preparedProps}
/>
);
return html;
}

4
src/single-dimension-measures.jsx
View File

@@ -112,12 +112,12 @@ class SingleDimensionMeasures extends React.PureComponent {
fontFamily: vFontFamily,
textAlign: 'right',
paddingLeft: '4px',
...styleBuilder.getStyle() // TODO: this will explode since styletags are currently a string
...styleBuilder.getStyle()
};
}
const measurementCell = (
<td className="grid-cells' + sufixCells + '" style={cellStyle}>
<td key={nMeasures2} className="grid-cells' + sufixCells + '" style={cellStyle}>
{vColumnNum}
</td>
);

88
src/single-dimension-row-list.jsx
View File

@@ -1,88 +0,0 @@
/*
DO NOT USE
should use row-list component instead, this is just left in here until testing conversion
*/
import React from 'react';
import PropTypes from 'prop-types';
import StyleBuilder from './style-builder';
import SingleDimensionMeasures from './single-dimension-measures';
// TODO: everything except cell rendering is pretty much identical to ElseDimensionRowList
// extract cells into subcomponents and merge to generic rowlist
class SingleDimensionRowList extends React.PureComponent {
generatePaddingTextElement (hasCustomFileStyle) {
const { vPadding, vFontFamily } = this.props;
if (vPadding && !hasCustomFileStyle) {
const paddingStyle = {
marginLeft: '15px',
fontFamily: vFontFamily
};
return (
<span style={paddingStyle}></span>
);
} else {
return null;
}
}
generateRows () {
const {
vLetterSize,
vCustomFileBool,
vFontFamily,
ConceptMatrix,
lastrow
} = this.props;
const rows = [];
let columnText;
//apply the custom style
for (var rowNumber = 0; rowNumber <= lastrow; rowNumber++) {
columnText = ConceptMatrix[rowNumber][0];
if (columnText != '-') {
const styleBuilder = new StyleBuilder(this.props);
if (vCustomFileBool) {
styleBuilder.parseCustomFileStyle(columnText); // TODO: parseCSVStyle?
} else {
styleBuilder.applyStandardAttributes(rowNumber);
styleBuilder.applyCustomStyle({ fontSize: (14 + vLetterSize) + 'px' });
}
const rowStyle = {
fontFamily: vFontFamily,
width: '230px',
...styleBuilder.getStyle()
};
const paddingTextElement = this.generatePaddingTextElement(styleBuilder.hasCustomFileStyle());
const measurementsProps = { rowNumber, columnText, styleBuilder };
const rowElement = (
<tr>
<td className="fdim-cells" style={rowStyle}>
{paddingTextElement}{columnText}
</td>
<SingleDimensionMeasures
{...this.props}
{...measurementsProps}
/>
</tr>
);
rows.push(rowElement);
}
}
return rows;
}
render () {
return (
<React.Fragment>
{this.generateRows()}
</React.Fragment>
);
}
}
SingleDimensionRowList.propTypes = {};
export default SingleDimensionRowList;

161
src/store.js
View File

@@ -24,15 +24,15 @@ function initialize ({ $element, layout, component }) {
vColLibCustomP: layout.collibcustomp
};
var nMeasAux = 0;
var vMaxLoops = layout.maxloops;
var vErrorMessage = layout.errormessage;
var vDynamicColorHeader = 'vColLib' + layout.HeaderColorSchema;
var vHeaderColorSchema = colors[vDynamicColorHeader];
var vExportToExcel = layout.allowexportxls;
var vHeaderColorText = layout.HeaderTextColorSchema;
var vHeaderAlign = layout.HeaderAlign;
var vHeaderAlignText = '';
const nMeasAux = 0;
const vMaxLoops = layout.maxloops;
const vErrorMessage = layout.errormessage;
const vDynamicColorHeader = `vColLib${layout.HeaderColorSchema}`;
const vHeaderColorSchema = colors[vDynamicColorHeader];
const vExportToExcel = layout.allowexportxls;
const vHeaderColorText = layout.HeaderTextColorSchema;
const vHeaderAlign = layout.HeaderAlign;
let vHeaderAlignText = '';
switch (vHeaderAlign) {
case 1:
vHeaderAlignText = 'left';
@@ -44,7 +44,7 @@ function initialize ({ $element, layout, component }) {
vHeaderAlignText = 'right';
break;
}
var vLetterSizeHeader = 0;
let vLetterSizeHeader = 0;
switch (layout.lettersizeheader) {
case 1:
vLetterSizeHeader = -2;
@@ -56,49 +56,49 @@ function initialize ({ $element, layout, component }) {
vLetterSizeHeader = 2;
break;
}
var vDimName = '';
var ConceptMatrixFirst = new Array();
var ConceptMatrixSecond = new Array();
var SecondHeaderLength = 0;
var LabelsArray = new Array();
var ExtraLabelsArray = new Array();
var vExtraLabel = '';
var vExcelButtonCode = '';
var ArrayGetSelectedCount = new Array();
var vNumDims = 0;
var vNumMeasures = 0;
var vNumMeasures2 = 0;
var MeasuresFormat = new Array();
var sufixCells = '';
let vDimName = '';
const ConceptMatrixFirst = new Array();
const ConceptMatrixSecond = new Array();
let SecondHeaderLength = 0;
const LabelsArray = new Array();
const ExtraLabelsArray = new Array();
let vExtraLabel = '';
const vExcelButtonCode = '';
const ArrayGetSelectedCount = new Array();
let vNumDims = 0;
let vNumMeasures = 0;
let vNumMeasures2 = 0;
const MeasuresFormat = new Array();
let sufixCells = '';
switch (layout.columnwidthslider) {
case 1:
sufixCells += '-s';
break;
case 2:
sufixCells += '';
sufixCells = String(sufixCells);
break;
case 3:
sufixCells += '-l';
break;
default:
sufixCells += '';
sufixCells = String(sufixCells);
break;
}
var dim_count = layout.qHyperCube.qDimensionInfo.length;
var measure_count = layout.qHyperCube.qMeasureInfo.length;
var vSeparatorCols = layout.separatorcols;
const dim_count = layout.qHyperCube.qDimensionInfo.length;
const measure_count = layout.qHyperCube.qMeasureInfo.length;
let vSeparatorCols = layout.separatorcols;
if (dim_count == 1) {
vSeparatorCols = false;
}
var vFontFamily = layout.FontFamily;
var lastrow = 0;
var ConceptMatrix = new Array();
var ConceptMatrixRowElem = new Array();
var ConceptMatrixColElem = new Array();
var ConceptMatrixColElemTable = new Array();
var ConceptMatrixPivot = new Array();
var ConceptMatrixFirstClean = new Array();
var vLetterSize = 0;
const vFontFamily = layout.FontFamily;
let lastrow = 0;
const ConceptMatrix = new Array();
let ConceptMatrixRowElem = new Array();
let ConceptMatrixColElem = new Array();
const ConceptMatrixColElemTable = new Array();
const ConceptMatrixPivot = new Array();
let ConceptMatrixFirstClean = new Array();
let vLetterSize = 0;
switch (layout.lettersize) {
case 1:
vLetterSize = -2;
@@ -121,17 +121,15 @@ function initialize ({ $element, layout, component }) {
measureInfos.forEach(measureInfo => {
vDimName = measureInfo.qFallbackTitle;
LabelsArray.push(vDimName);
var mfor = '';
let mfor = '';
if (measureInfo.qNumFormat.qType == 'U' || measureInfo.qNumFormat.qFmt == '##############') {
mfor = '#.##0'; //in case of undefined
mfor = '#.##0'; // in case of undefined
} else if (measureInfo.qNumFormat.qType == 'R') {
mfor = measureInfo.qNumFormat.qFmt;
mfor = mfor.replace(/(|)/gi, '');
} else {
if (measureInfo.qNumFormat.qType == 'R') {
mfor = measureInfo.qNumFormat.qFmt;
mfor = mfor.replace(/(|)/gi, '');
} else {
mfor = measureInfo.qNumFormat.qFmt;
}
mfor = measureInfo.qNumFormat.qFmt;
}
MeasuresFormat.push(mfor);
@@ -153,17 +151,17 @@ function initialize ({ $element, layout, component }) {
vNumMeasures++;
});
component.backendApi.eachDataRow(function (t, a) {
component.backendApi.eachDataRow((t, a) => {
lastrow = t;
var vNumMeasuresPlus = vNumMeasures + 1;
const vNumMeasuresPlus = vNumMeasures + 1;
ConceptMatrix[t] = new Array();
ConceptMatrix[t][0] = a[0].qText;
ConceptMatrixFirst[t] = a[0].qText;
ConceptMatrixRowElem[t] = a[0].qElemNumber;
var nMeasures = 0;
let nMeasures = 0;
if (vNumDims == 1) {
for (nMeasures = 1; nMeasures <= vNumMeasures; nMeasures++) {
ConceptMatrix[t][nMeasures] = a[nMeasures].qNum;
@@ -179,62 +177,63 @@ function initialize ({ $element, layout, component }) {
}
});
ConceptMatrixFirstClean = ConceptMatrixFirst.filter(onlyUnique);
if (nRows >= (vMaxLoops * 1000)) {
alert(vErrorMessage);
}
if (vNumDims == 2) {
//new array with unique values for 2nd dim
var SecondHeader = ConceptMatrixSecond.filter(onlyUnique);//second dimension concepts
ConceptMatrixRowElem = ConceptMatrixRowElem.filter(onlyUnique);//first dimension concepts
ConceptMatrixColElem = ConceptMatrixColElem.filter(onlyUnique);//dimension code for further selections
var eo = ConceptMatrixColElem.length;
var vLoopColsMeasures = 1;
// new array with unique values for 2nd dim
var SecondHeader = ConceptMatrixSecond.filter(onlyUnique);// second dimension concepts
ConceptMatrixRowElem = ConceptMatrixRowElem.filter(onlyUnique);// first dimension concepts
ConceptMatrixColElem = ConceptMatrixColElem.filter(onlyUnique);// dimension code for further selections
const eo = ConceptMatrixColElem.length;
let vLoopColsMeasures = 1;
ConceptMatrixColElemTable[0] = ConceptMatrixColElem[0];
for (var xx = 0; xx < eo; xx++) {
for (let xx = 0; xx < eo; xx++) {
if (vSeparatorCols && xx > 0) {
ConceptMatrixColElemTable[vLoopColsMeasures] = ConceptMatrixColElem[xx];
vLoopColsMeasures++;
}
for (var xxx = 0; xxx < vNumMeasures; xxx++) {
for (let xxx = 0; xxx < vNumMeasures; xxx++) {
ConceptMatrixColElemTable[vLoopColsMeasures] = ConceptMatrixColElem[xx];
vLoopColsMeasures++;
}
}
ConceptMatrixFirstClean = ConceptMatrixFirst.filter(onlyUnique);
SecondHeaderLength = SecondHeader.length;
vNumMeasures2 = vNumMeasures * SecondHeaderLength;
}
var ConceptPos = 0;
var nMeas3 = 0;
var vHeaderIndex = 0;
var MeasurePos = 0;
for (var nPivotElems = 0; nPivotElems <= lastrow; nPivotElems++) {
ConceptMatrixPivot[nPivotElems] = new Array();
// TODO: ConceptMatrixFirstClean is empty at this point when building new application
ConceptPos = ConceptMatrixFirstClean.indexOf(ConceptMatrix[nPivotElems][0]);
ConceptMatrixPivot[ConceptPos][0] = ConceptMatrix[nPivotElems][0];
let ConceptPos = 0;
let nMeas3 = 0;
let vHeaderIndex = 0;
let MeasurePos = 0;
for (let nPivotElems = 0; nPivotElems <= lastrow; nPivotElems++) {
ConceptMatrixPivot[nPivotElems] = new Array();
ConceptPos = ConceptMatrixFirstClean.indexOf(ConceptMatrix[nPivotElems][0]);
ConceptMatrixPivot[ConceptPos][0] = ConceptMatrix[nPivotElems][0];
for (var nMeas2 = 1; nMeas2 <= measure_count; nMeas2++) {
nMeas3 = nMeas2 + 1;
// TODO: SecondHeader is undefined at this point when building new application
vHeaderIndex = (SecondHeader.indexOf(ConceptMatrix[nPivotElems][1]) + 1);
MeasurePos = (vHeaderIndex * measure_count) + (nMeas2 - measure_count);
ConceptMatrixPivot[ConceptPos][MeasurePos] = ConceptMatrix[nPivotElems][nMeas3];
for (let nMeas2 = 1; nMeas2 <= measure_count; nMeas2++) {
nMeas3 = nMeas2 + 1;
vHeaderIndex = (SecondHeader.indexOf(ConceptMatrix[nPivotElems][1]) + 1);
MeasurePos = (vHeaderIndex * measure_count) + (nMeas2 - measure_count);
ConceptMatrixPivot[ConceptPos][MeasurePos] = ConceptMatrix[nPivotElems][nMeas3];
}
}
}
if (nRows > (lastrow + 1) && nRows <= (vMaxLoops * 1000)) {
var requestPage = [{
qTop: lastrow + 1,
qLeft: 0,
qWidth: 10, //should be # of columns
qHeight: Math.min(1000, nRows - lastrow)
}];
component.backendApi.getData(requestPage).then(function () {
const requestPage = [
{
qTop: lastrow + 1,
qLeft: 0,
qWidth: 10, // should be # of columns
qHeight: Math.min(1000, nRows - lastrow)
}
];
component.backendApi.getData(requestPage).then(() => {
component.paint($element);
});
}

24
src/style-builder.js
View File

@@ -10,17 +10,17 @@ function StyleBuilder (state) {
colors
} = state;
let style = {
fontSize: (14 + vLetterSize) + 'px'
fontSize: `${14 + vLetterSize}px`
};
let hasComments = false; // vGlobalComment
let commentColor; // vGlobalCommentColor
let hasCustomFileStyle = false; // vGlobalComas, vGlobalComas2
let hasComments = false;
let commentColor;
let hasCustomFileStyle = false;
function applyStandardAttributes (rowNumber) {
const isEven = rowNumber % 2 === 0;
style.backgroundColor = isEven ? vColorSchema : vColorSchemaP;
style.color = vColorText;
style.fontSize = (14 + vLetterSize) + 'px';
style.fontSize = `${14 + vLetterSize}px`;
}
function applyColor (color) {
@@ -46,9 +46,9 @@ function StyleBuilder (state) {
// font color TODO: this is a color just like the others, but it applies to text instead.. any way to make it less weird?
'<white>': () => { style.color = 'white'; },
// font size
'<large>': () => { style.fontSize = (15 + vLetterSize) + 'px'; },
'<medium>': () => { style.fontSize = (14 + vLetterSize) + 'px'; },
'<small>': () => { style.fontSize = (13 + vLetterSize) + 'px'; },
'<large>': () => { style.fontSize = `${15 + vLetterSize}px`; },
'<medium>': () => { style.fontSize = `${14 + vLetterSize}px`; },
'<small>': () => { style.fontSize = `${13 + vLetterSize}px`; },
// text alignment
'<center>': () => { style.textAlign = 'center'; }
};
@@ -76,7 +76,7 @@ function StyleBuilder (state) {
}
}
function applyCustomStyle(customStyle) {
function applyCustomStyle (customStyle) {
style = {
...style,
...customStyle
@@ -88,7 +88,7 @@ function StyleBuilder (state) {
for (let csvAttribute = 1; csvAttribute < vNumCustomHeaders; csvAttribute += 1) {
let customAttribute = '';
if (CustomArrayBasic.indexOf(columnText) < 0) {
customAttribute = 'none'; // TODO: is this used anywhere?
customAttribute = 'none';
} else {
customAttribute = CustomArray[CustomArrayBasic.indexOf(columnText)][csvAttribute];
}
@@ -99,8 +99,8 @@ function StyleBuilder (state) {
return {
getCommentColor: () => commentColor,
getStyle: () => style,
hasCustomFileStyle: () => hasCustomFileStyle, // to replace vGlobalComas and vGlobalComas2
hasFontSize: () => !!style.fontSize, // to vGlobalFontSize (vFontSize should just grab from style object or something)
hasCustomFileStyle: () => hasCustomFileStyle,
hasFontSize: () => Boolean(style.fontSize),
hasComments: () => hasComments,
applyStandardAttributes,
applyProperty,

14
src/utilities.js
View File

@@ -1,16 +1,16 @@
export function onlyUnique(value, index, self) {
export function onlyUnique (value, index, self) {
return self.indexOf(value) === index;
}
export function addSeparators(nStr, thousandsSep, decimalSep, numDecimals) {
var rgx, x, x1, x2;
export function addSeparators (nStr, thousandsSep, decimalSep, numDecimals) {
let x1;
nStr = nStr.toFixed(numDecimals);
x = nStr.split('.');
const x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? decimalSep + x[1] : '';
rgx = /(\d+)(\d{3})/;
const x2 = x.length > 1 ? decimalSep + x[1] : '';
const rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + thousandsSep + '$2');
x1 = x1.replace(rgx, `$1${thousandsSep}$2`);
}
return x1 + x2;
}