From 08cba41e18a3169e7b4ab9cbb21f155262a9c840 Mon Sep 17 00:00:00 2001 From: Kristoffer Lind Date: Tue, 29 Jan 2019 17:28:34 +0100 Subject: [PATCH] init converted components in paint --- .eslintrc.js | 78 ++- src/else-dimension-measures.jsx | 19 +- src/else-dimension-row-list.jsx | 87 --- src/excel-export.js | 24 +- src/{export-button.js => export-button.jsx} | 13 +- src/header-wrapper.jsx | 121 ++-- src/index.js | 315 ++++++---- src/main.less | 10 +- src/masking.js | 38 +- src/paint.js | 182 +++--- src/row-list.jsx | 33 +- src/row-wrapper.js | 636 -------------------- src/row-wrapper.jsx | 80 ++- src/single-dimension-measures.jsx | 4 +- src/single-dimension-row-list.jsx | 88 --- src/store.js | 161 +++-- src/style-builder.js | 24 +- src/utilities.js | 14 +- 18 files changed, 651 insertions(+), 1276 deletions(-) delete mode 100644 src/else-dimension-row-list.jsx rename src/{export-button.js => export-button.jsx} (53%) delete mode 100644 src/row-wrapper.js delete mode 100644 src/single-dimension-row-list.jsx diff --git a/.eslintrc.js b/.eslintrc.js index a98aff5..ff0eb8e 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -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" ] } diff --git a/src/else-dimension-measures.jsx b/src/else-dimension-measures.jsx index 6fe8c0d..f06c7dd 100644 --- a/src/else-dimension-measures.jsx +++ b/src/else-dimension-measures.jsx @@ -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 = ( - * + + * + ); 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 = ( {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 = ( {columnNumber} diff --git a/src/else-dimension-row-list.jsx b/src/else-dimension-row-list.jsx deleted file mode 100644 index 7efcdc4..0000000 --- a/src/else-dimension-row-list.jsx +++ /dev/null @@ -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 ( - - ); - } 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 = ( - - - {paddingTextElement}{columnText} - - - - ); - - rows.push(rowElement); - } - - return rows; - } - } - - render () { - return ( - - {this.generateRows()} - - ); - } -} - -ElseDimensionRowList.propTypes = {}; - -export default ElseDimensionRowList; diff --git a/src/excel-export.js b/src/excel-export.js index d4d8723..9734e8c 100644 --- a/src/excel-export.js +++ b/src/excel-export.js @@ -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 += '

'; } - $('.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 = ''; vEncodeHead += myTitle + mySubTitle + myFootNote; const vEncode = encodeURIComponent($clonedDiv.html()); - let vDecode = vEncodeHead + vEncode + ''; + let vDecode = `${vEncodeHead + vEncode}`; $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 = ''; vEncodeHead += myTitle + mySubTitle + myFootNote; const vEncode = encodeURIComponent($clonedDiv.html()); - let vDecode = vEncodeHead + vEncode + ''; + let vDecode = `${vEncodeHead + vEncode}`; $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(); } }); diff --git a/src/export-button.js b/src/export-button.jsx similarity index 53% rename from src/export-button.js rename to src/export-button.jsx index c62d682..4bd67ca 100644 --- a/src/export-button.js +++ b/src/export-button.jsx @@ -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 && ( - + const { excelExport } = this.props; + return excelExport === true && ( + ); } } +ExportButton.defaultProps = { + excelExport: false +}; + ExportButton.propTypes = { excelExport: PropTypes.bool }; diff --git a/src/header-wrapper.jsx b/src/header-wrapper.jsx index 912d912..deecae5 100644 --- a/src/header-wrapper.jsx +++ b/src/header-wrapper.jsx @@ -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 ( - + {vSeparatorCols && index > 0 && ( - * + + * + )} - {header} + + {header} + ); })} @@ -105,10 +111,12 @@ class HeaderWrapper extends PureComponent { fontSize: (12 + vLetterSize) + 'px' }; const seperatorElement = ( - * + + * + ); 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 { {hasSeperator && seperatorElement} - {entry} + + {entry} + ); @@ -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 ( {vSeparatorCols && index > 0 && ( - * + + * + )} {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 ( - {LabelsArray[measureFormatIndex + 1]} {ExtraLabelsArray[measureFormatIndex]} - - - ); - } else { - const cells2Style = { - ...this.getBaseCSS(), - cursor: 'default', - fontSize: (14 + vLetterSizeHeader) + 'px', - height: '25px', - verticalAlign: 'middle' - }; - return ( - - - {LabelsArray[measureFormatIndex + 1]} {ExtraLabelsArray[measureFormatIndex]} + {LabelsArray[measureFormatIndex + 1]} + {ExtraLabelsArray[measureFormatIndex]} ); } + const cells2Style = { + ...this.getBaseCSS(), + cursor: 'default', + fontSize: (14 + vLetterSizeHeader) + 'px', + height: '25px', + verticalAlign: 'middle' + }; + return ( + + + {LabelsArray[measureFormatIndex + 1]} + {ExtraLabelsArray[measureFormatIndex]} + + + ); })} ); }); } + 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 (
- - {this.renderDimensionInfos()} - {this.renderMeasureInfos()} - {this.renderSecondDimensionTitles()} - - { vNumDims == 2 && measure_count > 1 && ( + - {this.renderSecondDimensionSubTitles()} + {this.renderDimensionInfos()} + {this.renderMeasureInfos()} + {this.renderSecondDimensionTitles()} - )} + { vNumDims === 2 && measure_count > 1 && ( + + {this.renderSecondDimensionSubTitles()} + + )} +
); @@ -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( - - ); - - return html; -} - export default HeaderWrapper; diff --git a/src/index.js b/src/index.js index cf6299c..e2b1c35 100644 --- a/src/index.js +++ b/src/index.js @@ -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; } diff --git a/src/main.less b/src/main.less index 8a64888..9f96728 100644 --- a/src/main.less +++ b/src/main.less @@ -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; diff --git a/src/masking.js b/src/masking.js index 37dd423..5d10373 100644 --- a/src/masking.js +++ b/src/masking.js @@ -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; } diff --git a/src/paint.js b/src/paint.js index 4816b6d..e26c71f 100644 --- a/src/paint.js +++ b/src/paint.js @@ -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 = ( + +
+ + +
+
+ + +
+ + ); + + // 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 = "
"; - x += html; - x += '
'; - x += "
"; - x += html; - x += '
'; - - $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 = $("
"); + const element = $(this); + const offset = element.offset(); + const toolTip = $("
"); - 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(); }); } } diff --git a/src/row-list.jsx b/src/row-list.jsx index d2b288b..742fac1 100644 --- a/src/row-list.jsx +++ b/src/row-list.jsx @@ -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 ( - + ); - } else { - return null; } + return null; } + render () { const { vLetterSize, vCustomFileBool, vFontFamily, - tableData, //ConceptMatrix, + tableData, MeasurementsComponent } = this.props; return ( - + {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 ( - - {paddingTextElement}{rowHeaderText} + + {paddingTextElement} + {rowHeaderText} ); })} - + ); } } diff --git a/src/row-wrapper.js b/src/row-wrapper.js deleted file mode 100644 index 250913e..0000000 --- a/src/row-wrapper.js +++ /dev/null @@ -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 = ''; - } else { - vPaddingText = ''; - } - - html += '' + vPaddingText + vColumnText + '';//';' + 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 += '' + vColumnNum + ''; - } else { - html += '' + vColumnNum + ''; - } - } - } - html += ''; - } - } 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 = ''; - } else { - vPaddingText = ''; - } - html += '' + vPaddingText + vColumnText + ''; - 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 += '' + '*' + ''; - 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 += '' + vColumnNum + ''; - } else { - html += '' + vColumnNum + ''; - } - } else { - if (vSpecialF.substring(vSpecialF.length - 1) == '%' && vNumMeasures > 1) { - html += '' + vColumnNum + ''; - } else { - html += '' + vColumnNum + ''; - } - } - } - html += ''; - } - } - } - } - - // 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 '': - StyleTags += vPuntoComa + 'font-weight:bold'; - vGlobalComas = 1; - vGlobalComas2 = 1; - break; - - default: - StyleTags += ''; - break; - } - } - function ApplyComment(vCustomAttributes) { - switch (vCustomAttributes) { - case '': - vGlobalComment = 1; - break; - - default: - StyleTags += ''; - break; - } - } - function ApplyFontStyle(vCustomAttributes, vCustomComas) { - var vPuntoComa = ''; - if (vCustomComas > 0) { - vPuntoComa = ';'; - } - switch (vCustomAttributes) { - case '': - StyleTags += vPuntoComa + 'font-style:italic'; - vGlobalComas = 1; - vGlobalComas2 = 1; - break; - - case '': - 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 '': - StyleTags += vPuntoComa + 'background-color:' + colors.vColLibDark; - vGlobalComas = 1; - vGlobalComas2 = 1; - vGlobalCommentColor = colors.vColLibDark; - break; - - case '': - StyleTags += vPuntoComa + 'background-color:' + colors.vColLibNight; - vGlobalComas = 1; - vGlobalComas2 = 1; - vGlobalCommentColor = colors.vColLibNight; - break; - - case '': - StyleTags += vPuntoComa + 'background-color:' + colors.vColLibSoft; - vGlobalComas = 1; - vGlobalComas2 = 1; - vGlobalCommentColor = colors.vColLibSoft; - break; - - case '': - StyleTags += vPuntoComa + 'background-color:' + colors.vColLibRed; - vGlobalComas = 1; - vGlobalComas2 = 1; - vGlobalCommentColor = colors.vColLibRed; - break; - - case '': - StyleTags += vPuntoComa + 'background-color:' + colors.vColLibOrange; - vGlobalComas = 1; - vGlobalComas2 = 1; - vGlobalCommentColor = colors.vColLibOrange; - break; - - case '': - StyleTags += vPuntoComa + 'background-color:' + colors.vColLibViolete; - vGlobalComas = 1; - vGlobalComas2 = 1; - vGlobalCommentColor = colors.vColLibViolete; - break; - - case '': - StyleTags += vPuntoComa + 'background-color:' + colors.vColLibBlue; - vGlobalComas = 1; - vGlobalComas2 = 1; - vGlobalCommentColor = colors.vColLibBlue; - break; - - case '': - 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 === '' && vGlobalComment == 0) { - StyleTags += vPuntoComa + 'color:white'; - vGlobalComas = 1; - vGlobalComas2 = 1; - } - } - function ApplyFontSize(vCustomAttributes, vCustomComas) { - var vPuntoComa = ''; - if (vCustomComas > 0) { - vPuntoComa = ';'; - } - switch (vCustomAttributes) { - case '': - StyleTags += vPuntoComa + 'font-size:' + (15 + vLetterSize) + 'px'; - vFontSize = ';font-size:' + (15 + vLetterSize) + 'px'; - vGlobalComas = 1; - vGlobalComas2 = 1; - vGlobalFontSize = 1; - break; - - case '': - StyleTags += vPuntoComa + 'font-size:' + (14 + vLetterSize) + 'px'; - vFontSize = ';font-size:' + (14 + vLetterSize) + 'px'; - vGlobalComas = 1; - vMedium == true; - vGlobalFontSize = 1; - break; - - case '': - 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 '
': - StyleTags += vPuntoComa + 'text-align:center'; - vGlobalComas = 1; - vGlobalComas2 = 1; - break; - - default: - StyleTags += ''; - break; - } - } - - const deferred = new Deferred(); - let html = "
"; - - const schemaPromise = (vCustomFileBool && vCustomFile.length > 4) ? ReadCustomSchema() : Promise.resolve(); - schemaPromise.then(() => { - PaintTheNumbers(); - html += '
'; - html += '
'; - deferred.resolve(html); - }); - - return deferred.promise; // should be promise -} diff --git a/src/row-wrapper.jsx b/src/row-wrapper.jsx index d7a46a4..bba7960 100644 --- a/src/row-wrapper.jsx +++ b/src/row-wrapper.jsx @@ -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 ( -
- - -
-
- ); +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 ( +
+ + +
+
+ ); +}; 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( - - ); - return html; -} diff --git a/src/single-dimension-measures.jsx b/src/single-dimension-measures.jsx index d8358b2..f50eb47 100644 --- a/src/single-dimension-measures.jsx +++ b/src/single-dimension-measures.jsx @@ -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 = ( - + {vColumnNum} ); diff --git a/src/single-dimension-row-list.jsx b/src/single-dimension-row-list.jsx deleted file mode 100644 index 122d21d..0000000 --- a/src/single-dimension-row-list.jsx +++ /dev/null @@ -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 ( - - ); - } 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 = ( - - - {paddingTextElement}{columnText} - - - - ); - - rows.push(rowElement); - } - } - - return rows; - } - render () { - return ( - - {this.generateRows()} - - ); - } -} - -SingleDimensionRowList.propTypes = {}; - -export default SingleDimensionRowList; diff --git a/src/store.js b/src/store.js index 45de680..602df3d 100644 --- a/src/store.js +++ b/src/store.js @@ -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); }); } diff --git a/src/style-builder.js b/src/style-builder.js index 1f3a390..391d5d0 100644 --- a/src/style-builder.js +++ b/src/style-builder.js @@ -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? '': () => { style.color = 'white'; }, // font size - '': () => { style.fontSize = (15 + vLetterSize) + 'px'; }, - '': () => { style.fontSize = (14 + vLetterSize) + 'px'; }, - '': () => { style.fontSize = (13 + vLetterSize) + 'px'; }, + '': () => { style.fontSize = `${15 + vLetterSize}px`; }, + '': () => { style.fontSize = `${14 + vLetterSize}px`; }, + '': () => { style.fontSize = `${13 + vLetterSize}px`; }, // text alignment '
': () => { 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, diff --git a/src/utilities.js b/src/utilities.js index 81c97e5..0e47a6d 100644 --- a/src/utilities.js +++ b/src/utilities.js @@ -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; }