From 8e100f286b6d42cdd56b00bdb6ba65c3db2634c5 Mon Sep 17 00:00:00 2001 From: Balazs Gobel Date: Fri, 8 Feb 2019 13:07:33 +0100 Subject: [PATCH 01/41] Fix alternating colours --- src/initialize-transformed.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/initialize-transformed.js b/src/initialize-transformed.js index b58f7ca..1ed7a02 100644 --- a/src/initialize-transformed.js +++ b/src/initialize-transformed.js @@ -251,7 +251,7 @@ async function initializeTransformed ({ $element, layout, component }) { }, options: { backgroundColor: colors[`vColLib${layout.ColorSchema}`], - backgroundColorOdd: colors[`vColLib${layout.ColorSchemaP}`], + backgroundColorOdd: colors[`vColLib${layout.ColorSchema}P`], color: layout.BodyTextColorSchema, fontFamily: layout.FontFamily, fontSizeAdjustment: getFontSizeAdjustment(layout.lettersize) From 68dccf85753b1af30c846aebfcd829ec0128f9bd Mon Sep 17 00:00:00 2001 From: Balazs Gobel Date: Fri, 8 Feb 2019 13:08:06 +0100 Subject: [PATCH 02/41] Fix pixel misalignment between table header and body --- src/main.less | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/main.less b/src/main.less index 9f96728..3af446a 100644 --- a/src/main.less +++ b/src/main.less @@ -2,6 +2,12 @@ @TableBorder: 1px solid #d3d3d3; @KpiTableWidth: 230px; + *, + *:before, + *:after { + box-sizing: border-box; + } + ._cell(@Width: 50px) { min-width: @Width!important; max-width: @Width!important; From e3b7a7640e4dce9675b6c4e6202dc6e3445f7822 Mon Sep 17 00:00:00 2001 From: Balazs Gobel Date: Fri, 8 Feb 2019 13:08:52 +0100 Subject: [PATCH 03/41] Fixed misalignment when it's only one dimension --- src/data-table/data-cell.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/data-table/data-cell.jsx b/src/data-table/data-cell.jsx index 7178553..0dd2138 100644 --- a/src/data-table/data-cell.jsx +++ b/src/data-table/data-cell.jsx @@ -92,7 +92,8 @@ const DataCell = ({ data, general, measurement, styleBuilder, styling }) => { } let cellClass = 'grid-cells'; - const shouldUseSmallCells = isColumnPercentageBased && data.headers.measurements.length > 1; + const hasTwoDimensions = data.headers.dimension2 && data.headers.dimension2.length > 0; + const shouldUseSmallCells = isColumnPercentageBased && data.headers.measurements.length > 1 && hasTwoDimensions; if (shouldUseSmallCells) { cellClass = 'grid-cells-small'; } From ce1e196b78600f505c0966f234dee5ce62d7aea4 Mon Sep 17 00:00:00 2001 From: Balazs Gobel Date: Fri, 8 Feb 2019 13:18:15 +0100 Subject: [PATCH 04/41] Follow the same principle as the old application - Restyle table cells only when metric semaphore is enabled --- src/data-table/data-cell.jsx | 4 ++-- src/initialize-transformed.js | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/data-table/data-cell.jsx b/src/data-table/data-cell.jsx index 0dd2138..babee8b 100644 --- a/src/data-table/data-cell.jsx +++ b/src/data-table/data-cell.jsx @@ -76,9 +76,9 @@ const DataCell = ({ data, general, measurement, styleBuilder, styling }) => { textAlign: 'right' }; - const { semaphoreColors } = styling; + const { semaphoreColors, semaphoreColors: { fieldsToApplyTo } } = styling; const isValidSemaphoreValue = !styleBuilder.hasComments() && !isNaN(measurement.value); - const shouldHaveSemaphoreColors = semaphoreColors.fieldsToApplyTo.applyToAll || semaphoreColors.fieldsToApplyTo.specificFields.indexOf(measurement.name) !== -1; + const shouldHaveSemaphoreColors = fieldsToApplyTo.applyToMetric && (fieldsToApplyTo.applyToAll || fieldsToApplyTo.specificFields.indexOf(measurement.name) !== -1); if (isValidSemaphoreValue && shouldHaveSemaphoreColors) { const { backgroundColor, color } = getSemaphoreColors(measurement, semaphoreColors); cellStyle = { diff --git a/src/initialize-transformed.js b/src/initialize-transformed.js index 1ed7a02..b8aaff4 100644 --- a/src/initialize-transformed.js +++ b/src/initialize-transformed.js @@ -259,6 +259,7 @@ async function initializeTransformed ({ $element, layout, component }) { semaphoreColors: { fieldsToApplyTo: { applyToAll: layout.allsemaphores, + applyToMetric: layout.allmetrics, specificFields: [ layout.conceptsemaphore1, layout.conceptsemaphore2, From 8984affe875ab7507b210c07a69f20677bd54cc9 Mon Sep 17 00:00:00 2001 From: Balazs Gobel Date: Fri, 8 Feb 2019 13:18:23 +0100 Subject: [PATCH 05/41] minor cleanup --- src/definition/metric-semaphores.js | 2 +- src/main.less | 4 +--- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/definition/metric-semaphores.js b/src/definition/metric-semaphores.js index 73bbc61..fbd1c38 100644 --- a/src/definition/metric-semaphores.js +++ b/src/definition/metric-semaphores.js @@ -25,7 +25,7 @@ const metricSemaphores = { type: 'string', defaultValue: '0', show (data) { - return data.allmetrics == false; + return !data.allmetrics; } }, MetricStatus1: { diff --git a/src/main.less b/src/main.less index 3af446a..b80d001 100644 --- a/src/main.less +++ b/src/main.less @@ -50,10 +50,8 @@ } .empty { - width: 3%; background: #ffffff; - min-width: 4px !important; - max-width: 4px !important; + max-width: 4px; } th.main-kpi { From 377d642fe2ade619d383a90b3abb5db14bdea2d9 Mon Sep 17 00:00:00 2001 From: ahmed-Bazzara Date: Thu, 14 Feb 2019 13:02:59 +0100 Subject: [PATCH 06/41] tooltip added --- .eslintrc.js | 3 ++- src/data-table/data-cell.jsx | 50 ++++++++++++++++++++++++++++++++---- src/main.less | 30 ++++++++++++++++++++++ src/tooltip/index.jsx | 27 +++++++++++++++++++ 4 files changed, 104 insertions(+), 6 deletions(-) create mode 100644 src/tooltip/index.jsx diff --git a/.eslintrc.js b/.eslintrc.js index 2328397..ec3a53b 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -129,7 +129,8 @@ module.exports = { "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"] + "react/prefer-stateless-function": ["warn"], + "react/no-set-state": ["warn"] }, extends: [ "eslint:all", diff --git a/src/data-table/data-cell.jsx b/src/data-table/data-cell.jsx index adde657..c82b5f4 100644 --- a/src/data-table/data-cell.jsx +++ b/src/data-table/data-cell.jsx @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { ApplyPreMask } from '../masking'; import { addSeparators } from '../utilities'; - +import Tooltip from '../tooltip/index.jsx'; function formatMeasurementValue (measurement, styling) { // TODO: measurement.name is a horrible propertyname, it's actually the column header const isColumnPercentageBased = measurement.parents.measurement.header.substring(0, 1) === '%'; @@ -61,14 +61,27 @@ function getSemaphoreColors (measurement, semaphoreColors) { } return semaphoreColors.statusColors.normal; } - -class DataCell extends React.PureComponent { +class DataCell extends React.Component { constructor (props) { super(props); - + this.state = { + bool: false, + mouseXPosition: 0, + mouseYPosition: 0 + }; + this.handleEnter = this.handleEnter.bind(this); + this.handleLeave = this.handleLeave.bind(this); this.handleSelect = this.handleSelect.bind(this); } + shouldComponentUpdate (nextProps, nextState) { + const { bool } = this.state; + if (bool === nextState.bool) { + return false; + } + return true; + } + handleSelect () { const { data: { meta: { dimensionCount } }, general: { allowFilteringByClick }, measurement, qlik } = this.props; const hasSecondDimension = dimensionCount > 1; @@ -83,8 +96,26 @@ class DataCell extends React.PureComponent { } } + handleEnter (event) { + this.setState({ bool: true, + mouseXPosition: event.clientX, + mouseYPosition: event.clientY }); + } + + handleLeave () { + this.setState({ bool: false }); + } + render () { - const { data, general, measurement, styleBuilder, styling } = this.props; + const { bool, mouseXPosition, mouseYPosition } = this.state; + const { + data, + general, + measurement, + styleBuilder, + styling + } = this.props; + const isColumnPercentageBased = measurement.name.substring(0, 1) === '%'; let formattedMeasurementValue = formatMeasurementValue(measurement, styling); if (styleBuilder.hasComments()) { @@ -123,9 +154,18 @@ class DataCell extends React.PureComponent { {formattedMeasurementValue} + {bool + ? + : null} ); } diff --git a/src/main.less b/src/main.less index 9f96728..87ea25e 100644 --- a/src/main.less +++ b/src/main.less @@ -2,6 +2,36 @@ @TableBorder: 1px solid #d3d3d3; @KpiTableWidth: 230px; + .edit-mode{ + pointer-events: none; + } + .tooltip-wrapper{ + position: fixed; + padding: 5px; + padding-top: 10px; + background-color: #404040; + z-index: 10; + pointer-events: none; + border-radius: 5px; + height: 30px; + width: auto; + opacity: .9; + >p{ + color: #fff; + } + } + + .tooltip-wrapper::after { + content: ""; + position: absolute; + bottom: -10px; + left: 50%; + border-width: 10px 10px 0; + border-style: solid; + border-color: #404040 transparent; + margin-left: -10px; + pointer-events: none; + } ._cell(@Width: 50px) { min-width: @Width!important; max-width: @Width!important; diff --git a/src/tooltip/index.jsx b/src/tooltip/index.jsx new file mode 100644 index 0000000..61751c5 --- /dev/null +++ b/src/tooltip/index.jsx @@ -0,0 +1,27 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +const getPos = () => { + console.log(window.pageXOffset); + return { + left: window.pageXOffset, + top: window.pageYOffset + }; + +}; + +const Tooltip = ({ data, xPosition, yPosition }) => ( +
+

+ {data} +

+
+); +Tooltip.propTypes = { + data: PropTypes.string.isRequired, + xPosition: PropTypes.number, + yPosition: PropTypes.number +}; +export default Tooltip; From dfac9ad5e913636d01bd210322fdd9ebd6bb0229 Mon Sep 17 00:00:00 2001 From: ahmed-Bazzara Date: Thu, 14 Feb 2019 14:04:15 +0100 Subject: [PATCH 07/41] tooltip disabled in edit state --- src/data-table/data-cell.jsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/data-table/data-cell.jsx b/src/data-table/data-cell.jsx index c82b5f4..a74f0d4 100644 --- a/src/data-table/data-cell.jsx +++ b/src/data-table/data-cell.jsx @@ -113,9 +113,11 @@ class DataCell extends React.Component { general, measurement, styleBuilder, - styling + styling, + qlik } = this.props; + const inEditState = qlik.inEditState(); const isColumnPercentageBased = measurement.name.substring(0, 1) === '%'; let formattedMeasurementValue = formatMeasurementValue(measurement, styling); if (styleBuilder.hasComments()) { @@ -159,7 +161,7 @@ class DataCell extends React.Component { style={cellStyle} > {formattedMeasurementValue} - {bool + {bool && !inEditState ? Date: Fri, 15 Feb 2019 08:53:35 +0100 Subject: [PATCH 08/41] mind width set to tooltip text inside it is center aligned --- src/main.less | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/main.less b/src/main.less index 87ea25e..1da5609 100644 --- a/src/main.less +++ b/src/main.less @@ -6,9 +6,10 @@ pointer-events: none; } .tooltip-wrapper{ + min-width: 25px; position: fixed; padding: 5px; - padding-top: 10px; + padding-top: 15px; background-color: #404040; z-index: 10; pointer-events: none; @@ -16,6 +17,7 @@ height: 30px; width: auto; opacity: .9; + text-align: center; >p{ color: #fff; } From f730dc28272663b188ef0bc71dc0ae0345eccb46 Mon Sep 17 00:00:00 2001 From: ahmed-Bazzara Date: Fri, 15 Feb 2019 08:54:11 +0100 Subject: [PATCH 09/41] commented jqeury from paint.js for tooltip --- src/paint.jsx | 36 ++++++++++++++++++------------------ 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/src/paint.jsx b/src/paint.jsx index f16a912..fd5683c 100644 --- a/src/paint.jsx +++ b/src/paint.jsx @@ -61,27 +61,27 @@ export default async function paint ($element, layout, component) { }); // TODO: fixing tooltips has a seperate issue, make sure to remove this as part of that issue - $(`[tid="${layout.qInfo.qId}"] .header-wrapper th`).hover(function () { - $(`[tid="${layout.qInfo.qId}"] .tooltip`).delay(500) - .show(0); - $(`[tid="${layout.qInfo.qId}"] .header-wrapper th`).children(`[tid="${layout.qInfo.qId}"] .tooltip`) - .remove(); + // $(`[tid="${layout.qInfo.qId}"] .header-wrapper th`).hover(function () { + // $(`[tid="${layout.qInfo.qId}"] .tooltip`).delay(500) + // .show(0); + // $(`[tid="${layout.qInfo.qId}"] .header-wrapper th`).children(`[tid="${layout.qInfo.qId}"] .tooltip`) + // .remove(); - const element = $(this); - const offset = element.offset(); - const toolTip = $('
'); + // const element = $(this); + // const offset = element.offset(); + // const toolTip = $('
'); - toolTip.css({ - left: offset.left, - top: offset.top - }); + // toolTip.css({ + // left: offset.left, + // top: offset.top + // }); - toolTip.text(element.text()); - $(`[tid="${layout.qInfo.qId}"] .header-wrapper th`).append(toolTip); - }, () => { - $(`[tid="${layout.qInfo.qId}"] .tooltip`).delay(0) - .hide(0); - }); + // toolTip.text(element.text()); + // $(`[tid="${layout.qInfo.qId}"] .header-wrapper th`).append(toolTip); + // }, () => { + // $(`[tid="${layout.qInfo.qId}"] .tooltip`).delay(0) + // .hide(0); + // }); // TODO: excel export is broken in most browsers, fixing it has an issue of it's own (leaving it disabled for now) // import { enableExcelExport } from './excel-export'; From d130ca266d34ac28c66cbdc44400bc63e675f418 Mon Sep 17 00:00:00 2001 From: ahmed-Bazzara Date: Fri, 15 Feb 2019 08:55:13 +0100 Subject: [PATCH 10/41] showTooltip boolean changed name skipping values that are header rows --- src/data-table/data-cell.jsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/data-table/data-cell.jsx b/src/data-table/data-cell.jsx index a74f0d4..fc55cf2 100644 --- a/src/data-table/data-cell.jsx +++ b/src/data-table/data-cell.jsx @@ -65,7 +65,7 @@ class DataCell extends React.Component { constructor (props) { super(props); this.state = { - bool: false, + showTooltip: false, mouseXPosition: 0, mouseYPosition: 0 }; @@ -75,8 +75,8 @@ class DataCell extends React.Component { } shouldComponentUpdate (nextProps, nextState) { - const { bool } = this.state; - if (bool === nextState.bool) { + const { showTooltip } = this.state; + if (showTooltip === nextState.showTooltip) { return false; } return true; @@ -97,17 +97,17 @@ class DataCell extends React.Component { } handleEnter (event) { - this.setState({ bool: true, + this.setState({ showTooltip: true, mouseXPosition: event.clientX, mouseYPosition: event.clientY }); } handleLeave () { - this.setState({ bool: false }); + this.setState({ showTooltip: false }); } render () { - const { bool, mouseXPosition, mouseYPosition } = this.state; + const { showTooltip, mouseXPosition, mouseYPosition } = this.state; const { data, general, @@ -161,7 +161,7 @@ class DataCell extends React.Component { style={cellStyle} > {formattedMeasurementValue} - {bool && !inEditState + {showTooltip && !inEditState && formattedMeasurementValue !== '.' ? Date: Fri, 15 Feb 2019 08:56:02 +0100 Subject: [PATCH 11/41] tooltip added to column header comopnent changed to normal component to hold state in it --- src/headers-table/column-header.jsx | 44 +++++++++++++++++++++++++++-- 1 file changed, 41 insertions(+), 3 deletions(-) diff --git a/src/headers-table/column-header.jsx b/src/headers-table/column-header.jsx index d50d666..73f0fdd 100644 --- a/src/headers-table/column-header.jsx +++ b/src/headers-table/column-header.jsx @@ -1,20 +1,49 @@ import React from 'react'; import PropTypes from 'prop-types'; +import Tooltip from '../tooltip/index.jsx'; -class ColumnHeader extends React.PureComponent { +class ColumnHeader extends React.Component { constructor (props) { super(props); - + this.state = { + showTooltip: false, + mouseXPosition: 0, + mouseYPosition: 0 + }; + this.handleEnter = this.handleEnter.bind(this); + this.handleLeave = this.handleLeave.bind(this); this.handleSelect = this.handleSelect.bind(this); } + shouldComponentUpdate (nextProps, nextState) { + const { showTooltip } = this.state; + if (showTooltip === nextState.showTooltip) { + return false; + } + return true; + } + handleSelect () { const { entry, qlik } = this.props; qlik.backendApi.selectValues(1, [entry.elementNumber], true); } + handleEnter (event) { + console.log(event.clientX); + this.setState({ showTooltip: true, + mouseXPosition: event.clientX, + mouseYPosition: event.clientY }); + } + + handleLeave () { + this.setState({ showTooltip: false }); + } + render () { - const { baseCSS, cellSuffix, colSpan, entry, styling } = this.props; + const { baseCSS, cellSuffix, colSpan, entry, styling, qlik } = this.props; + const { showTooltip, mouseXPosition, mouseYPosition } = this.state; + const inEditState = qlik.inEditState(); + const style = { ...baseCSS, fontSize: `${14 + styling.headerOptions.fontSizeAdjustment} px`, @@ -27,9 +56,18 @@ class ColumnHeader extends React.PureComponent { className={`grid-cells2${cellSuffix}`} colSpan={colSpan} onClick={this.handleSelect} + onMouseOut={this.handleLeave} + onMouseOver={this.handleEnter} style={style} > {entry.displayValue} + {showTooltip && !inEditState + ? + : null} ); } From 09d90556436aaae553ea6cb6299a1298cc5853fb Mon Sep 17 00:00:00 2001 From: ahmed-Bazzara Date: Fri, 15 Feb 2019 08:56:26 +0100 Subject: [PATCH 12/41] tooltip component cleaned --- src/tooltip/index.jsx | 13 +++---------- 1 file changed, 3 insertions(+), 10 deletions(-) diff --git a/src/tooltip/index.jsx b/src/tooltip/index.jsx index 61751c5..53e004d 100644 --- a/src/tooltip/index.jsx +++ b/src/tooltip/index.jsx @@ -1,18 +1,11 @@ import React from 'react'; import PropTypes from 'prop-types'; -const getPos = () => { - console.log(window.pageXOffset); - return { - left: window.pageXOffset, - top: window.pageYOffset - }; - -}; const Tooltip = ({ data, xPosition, yPosition }) => (

{data} From 9c66c09899ccf8a2603d6398f5027433cfec2f67 Mon Sep 17 00:00:00 2001 From: ahmed-Bazzara Date: Fri, 15 Feb 2019 09:26:16 +0100 Subject: [PATCH 13/41] console log removed --- src/headers-table/column-header.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/headers-table/column-header.jsx b/src/headers-table/column-header.jsx index 73f0fdd..d3bdbbb 100644 --- a/src/headers-table/column-header.jsx +++ b/src/headers-table/column-header.jsx @@ -29,7 +29,6 @@ class ColumnHeader extends React.Component { } handleEnter (event) { - console.log(event.clientX); this.setState({ showTooltip: true, mouseXPosition: event.clientX, mouseYPosition: event.clientY }); From 8b41022ddcbc3395b3eec2eb6b8822caaef188c8 Mon Sep 17 00:00:00 2001 From: ahmed-Bazzara Date: Fri, 15 Feb 2019 09:32:55 +0100 Subject: [PATCH 14/41] jQuery commented code deleted --- src/paint.jsx | 23 ----------------------- 1 file changed, 23 deletions(-) diff --git a/src/paint.jsx b/src/paint.jsx index fd5683c..c58a12b 100644 --- a/src/paint.jsx +++ b/src/paint.jsx @@ -60,29 +60,6 @@ export default async function paint ($element, layout, component) { $(`[tid="${layout.qInfo.qId}"] .kpi-table`).css('left', `${Math.round(t.target.scrollLeft)}px`); }); - // TODO: fixing tooltips has a seperate issue, make sure to remove this as part of that issue - // $(`[tid="${layout.qInfo.qId}"] .header-wrapper th`).hover(function () { - // $(`[tid="${layout.qInfo.qId}"] .tooltip`).delay(500) - // .show(0); - // $(`[tid="${layout.qInfo.qId}"] .header-wrapper th`).children(`[tid="${layout.qInfo.qId}"] .tooltip`) - // .remove(); - - // const element = $(this); - // const offset = element.offset(); - // const toolTip = $('

'); - - // toolTip.css({ - // left: offset.left, - // top: offset.top - // }); - - // toolTip.text(element.text()); - // $(`[tid="${layout.qInfo.qId}"] .header-wrapper th`).append(toolTip); - // }, () => { - // $(`[tid="${layout.qInfo.qId}"] .tooltip`).delay(0) - // .hide(0); - // }); - // TODO: excel export is broken in most browsers, fixing it has an issue of it's own (leaving it disabled for now) // import { enableExcelExport } from './excel-export'; // enableExcelExport(layout, html); From fe4b5a72ec37f13b84abae7eb9888357470e262e Mon Sep 17 00:00:00 2001 From: ahmed-Bazzara Date: Fri, 15 Feb 2019 09:56:32 +0100 Subject: [PATCH 15/41] handling tooltip logic within it --- src/data-table/data-cell.jsx | 20 +++++++------------ src/headers-table/column-header.jsx | 20 +++++++------------ src/tooltip/index.jsx | 30 +++++++++++++++-------------- 3 files changed, 30 insertions(+), 40 deletions(-) diff --git a/src/data-table/data-cell.jsx b/src/data-table/data-cell.jsx index fc55cf2..6b2f5d3 100644 --- a/src/data-table/data-cell.jsx +++ b/src/data-table/data-cell.jsx @@ -65,9 +65,7 @@ class DataCell extends React.Component { constructor (props) { super(props); this.state = { - showTooltip: false, - mouseXPosition: 0, - mouseYPosition: 0 + showTooltip: false }; this.handleEnter = this.handleEnter.bind(this); this.handleLeave = this.handleLeave.bind(this); @@ -96,10 +94,8 @@ class DataCell extends React.Component { } } - handleEnter (event) { - this.setState({ showTooltip: true, - mouseXPosition: event.clientX, - mouseYPosition: event.clientY }); + handleEnter () { + this.setState({ showTooltip: true }); } handleLeave () { @@ -107,7 +103,7 @@ class DataCell extends React.Component { } render () { - const { showTooltip, mouseXPosition, mouseYPosition } = this.state; + const { showTooltip } = this.state; const { data, general, @@ -163,11 +159,9 @@ class DataCell extends React.Component { {formattedMeasurementValue} {showTooltip && !inEditState && formattedMeasurementValue !== '.' ? - : null} + + {formattedMeasurementValue} + : null} ); } diff --git a/src/headers-table/column-header.jsx b/src/headers-table/column-header.jsx index d3bdbbb..da9120c 100644 --- a/src/headers-table/column-header.jsx +++ b/src/headers-table/column-header.jsx @@ -6,9 +6,7 @@ class ColumnHeader extends React.Component { constructor (props) { super(props); this.state = { - showTooltip: false, - mouseXPosition: 0, - mouseYPosition: 0 + showTooltip: false }; this.handleEnter = this.handleEnter.bind(this); this.handleLeave = this.handleLeave.bind(this); @@ -28,10 +26,8 @@ class ColumnHeader extends React.Component { qlik.backendApi.selectValues(1, [entry.elementNumber], true); } - handleEnter (event) { - this.setState({ showTooltip: true, - mouseXPosition: event.clientX, - mouseYPosition: event.clientY }); + handleEnter () { + this.setState({ showTooltip: true }); } handleLeave () { @@ -40,7 +36,7 @@ class ColumnHeader extends React.Component { render () { const { baseCSS, cellSuffix, colSpan, entry, styling, qlik } = this.props; - const { showTooltip, mouseXPosition, mouseYPosition } = this.state; + const { showTooltip } = this.state; const inEditState = qlik.inEditState(); const style = { @@ -62,11 +58,9 @@ class ColumnHeader extends React.Component { {entry.displayValue} {showTooltip && !inEditState ? - : null} + + {entry.displayValue} + : null} ); } diff --git a/src/tooltip/index.jsx b/src/tooltip/index.jsx index 53e004d..1d920e5 100644 --- a/src/tooltip/index.jsx +++ b/src/tooltip/index.jsx @@ -1,20 +1,22 @@ import React from 'react'; import PropTypes from 'prop-types'; -const Tooltip = ({ data, xPosition, yPosition }) => ( -
-

- {data} -

-
-); +const Tooltip = ({ children }) => { + const xPosition = event.clientX; + const yPosition = event.clientY; + return ( +
+

+ {children} +

+
+ ); +}; Tooltip.propTypes = { - data: PropTypes.string.isRequired, - xPosition: PropTypes.number, - yPosition: PropTypes.number + children: PropTypes.string.isRequired }; export default Tooltip; From 48970cb4f46b755e91e461fb88e70b97491b8593 Mon Sep 17 00:00:00 2001 From: ahmed-Bazzara Date: Fri, 15 Feb 2019 11:33:43 +0100 Subject: [PATCH 16/41] all logic for tooltip has been moved to it's component data-cell & column-header components reseted to pure ones --- src/data-table/data-cell.jsx | 38 +++------------ src/headers-table/column-header.jsx | 38 +++------------ src/tooltip/index.jsx | 74 +++++++++++++++++++++++------ 3 files changed, 73 insertions(+), 77 deletions(-) diff --git a/src/data-table/data-cell.jsx b/src/data-table/data-cell.jsx index 6b2f5d3..74f6046 100644 --- a/src/data-table/data-cell.jsx +++ b/src/data-table/data-cell.jsx @@ -61,25 +61,12 @@ function getSemaphoreColors (measurement, semaphoreColors) { } return semaphoreColors.statusColors.normal; } -class DataCell extends React.Component { +class DataCell extends React.PureComponent { constructor (props) { super(props); - this.state = { - showTooltip: false - }; - this.handleEnter = this.handleEnter.bind(this); - this.handleLeave = this.handleLeave.bind(this); this.handleSelect = this.handleSelect.bind(this); } - shouldComponentUpdate (nextProps, nextState) { - const { showTooltip } = this.state; - if (showTooltip === nextState.showTooltip) { - return false; - } - return true; - } - handleSelect () { const { data: { meta: { dimensionCount } }, general: { allowFilteringByClick }, measurement, qlik } = this.props; const hasSecondDimension = dimensionCount > 1; @@ -94,16 +81,7 @@ class DataCell extends React.Component { } } - handleEnter () { - this.setState({ showTooltip: true }); - } - - handleLeave () { - this.setState({ showTooltip: false }); - } - render () { - const { showTooltip } = this.state; const { data, general, @@ -152,16 +130,14 @@ class DataCell extends React.Component { - {formattedMeasurementValue} - {showTooltip && !inEditState && formattedMeasurementValue !== '.' - ? - - {formattedMeasurementValue} - : null} + + {formattedMeasurementValue} + ); } diff --git a/src/headers-table/column-header.jsx b/src/headers-table/column-header.jsx index da9120c..e698a82 100644 --- a/src/headers-table/column-header.jsx +++ b/src/headers-table/column-header.jsx @@ -2,41 +2,19 @@ import React from 'react'; import PropTypes from 'prop-types'; import Tooltip from '../tooltip/index.jsx'; -class ColumnHeader extends React.Component { +class ColumnHeader extends React.PureComponent { constructor (props) { super(props); - this.state = { - showTooltip: false - }; - this.handleEnter = this.handleEnter.bind(this); - this.handleLeave = this.handleLeave.bind(this); this.handleSelect = this.handleSelect.bind(this); } - shouldComponentUpdate (nextProps, nextState) { - const { showTooltip } = this.state; - if (showTooltip === nextState.showTooltip) { - return false; - } - return true; - } - handleSelect () { const { entry, qlik } = this.props; qlik.backendApi.selectValues(1, [entry.elementNumber], true); } - handleEnter () { - this.setState({ showTooltip: true }); - } - - handleLeave () { - this.setState({ showTooltip: false }); - } - render () { const { baseCSS, cellSuffix, colSpan, entry, styling, qlik } = this.props; - const { showTooltip } = this.state; const inEditState = qlik.inEditState(); const style = { @@ -51,16 +29,14 @@ class ColumnHeader extends React.Component { className={`grid-cells2${cellSuffix}`} colSpan={colSpan} onClick={this.handleSelect} - onMouseOut={this.handleLeave} - onMouseOver={this.handleEnter} style={style} > - {entry.displayValue} - {showTooltip && !inEditState - ? - - {entry.displayValue} - : null} + + {entry.displayValue} + ); } diff --git a/src/tooltip/index.jsx b/src/tooltip/index.jsx index 1d920e5..060cabe 100644 --- a/src/tooltip/index.jsx +++ b/src/tooltip/index.jsx @@ -1,22 +1,66 @@ import React from 'react'; import PropTypes from 'prop-types'; +class Tooltip extends React.Component { + constructor (props) { + super(props); + this.state = { + showTooltip: false, + xPosition: 0, + yPosition: 0 + }; + this.handleRenderTooltip = this.handleRenderTooltip.bind(this); + } -const Tooltip = ({ children }) => { - const xPosition = event.clientX; - const yPosition = event.clientY; - return ( -
-

+ shouldComponentUpdate (nextProps, nextState) { + const { showTooltip } = this.state; + if (nextState.showTooltip === showTooltip) { + return false; + } + return true; + } + + handleRenderTooltip (event) { + const { showTooltip } = this.state; + const xPosition = event.clientX; + const yPosition = event.clientY; + this.setState({ showTooltip: !showTooltip, + xPosition, + yPosition }); + } + + render () { + const { children, tooltipText, isTooltipActive } = this.props; + const { showTooltip, xPosition, yPosition } = this.state; + + const xPositionOffset = 20; + const yPositionOffset = 75; + return ( +

{children} -

-
- ); -}; + + {showTooltip && isTooltipActive + ? ( +
+

+ {tooltipText} +

+
+ ) : null} +
+ ); + } +} + Tooltip.propTypes = { - children: PropTypes.string.isRequired + children: PropTypes.string.isRequired, + isTooltipActive: PropTypes.bool.isRequired, + tooltipText: PropTypes.string.isRequired }; export default Tooltip; From 9efe580d1838b2849848c1b02c6ab0a75705d955 Mon Sep 17 00:00:00 2001 From: ahmed-Bazzara Date: Tue, 19 Feb 2019 15:41:30 +0100 Subject: [PATCH 17/41] tooltip positioning tweaked --- src/main.less | 13 ++++++++++--- src/tooltip/index.jsx | 18 ++++-------------- 2 files changed, 14 insertions(+), 17 deletions(-) diff --git a/src/main.less b/src/main.less index 1da5609..ec82ceb 100644 --- a/src/main.less +++ b/src/main.less @@ -7,17 +7,21 @@ } .tooltip-wrapper{ min-width: 25px; - position: fixed; + position: absolute; padding: 5px; padding-top: 15px; background-color: #404040; - z-index: 10; + z-index: 100; pointer-events: none; border-radius: 5px; height: 30px; width: auto; opacity: .9; text-align: center; + bottom: 0; + left: 0; + right: 0; + transform: translate(0,-70%); >p{ color: #fff; } @@ -163,7 +167,10 @@ background-color: #808080 !important; color: #ffffff; } - + .grid-cells{ + position: relative; + overflow: visible; + } .grid-cells-header { padding: 0px; } diff --git a/src/tooltip/index.jsx b/src/tooltip/index.jsx index 060cabe..a131a31 100644 --- a/src/tooltip/index.jsx +++ b/src/tooltip/index.jsx @@ -4,9 +4,7 @@ class Tooltip extends React.Component { constructor (props) { super(props); this.state = { - showTooltip: false, - xPosition: 0, - yPosition: 0 + showTooltip: false }; this.handleRenderTooltip = this.handleRenderTooltip.bind(this); } @@ -19,21 +17,15 @@ class Tooltip extends React.Component { return true; } - handleRenderTooltip (event) { + handleRenderTooltip () { const { showTooltip } = this.state; - const xPosition = event.clientX; - const yPosition = event.clientY; - this.setState({ showTooltip: !showTooltip, - xPosition, - yPosition }); + this.setState({ showTooltip: !showTooltip }); } render () { const { children, tooltipText, isTooltipActive } = this.props; - const { showTooltip, xPosition, yPosition } = this.state; + const { showTooltip } = this.state; - const xPositionOffset = 20; - const yPositionOffset = 75; return (

{tooltipText} From a804c3165827dcd03c459d5859572a17e39492ff Mon Sep 17 00:00:00 2001 From: ahmed-Bazzara Date: Tue, 19 Feb 2019 16:58:39 +0100 Subject: [PATCH 18/41] tooltip position now follow the mouse --- .eslintrc.js | 2 +- src/main.less | 6 +----- src/tooltip/index.jsx | 12 ++++++++++++ 3 files changed, 14 insertions(+), 6 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index ec3a53b..1af18c4 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -116,7 +116,7 @@ module.exports = { "max-params": ["warn"], "brace-style": ["warn", "1tbs", { "allowSingleLine": true }], "prefer-const": ["warn"], - + "class-methods-use-this":["warn"], // plugin:react "react/jsx-indent": ["warn", 2], "react/jsx-indent-props": ["warn", 2], diff --git a/src/main.less b/src/main.less index ec82ceb..1cfca0f 100644 --- a/src/main.less +++ b/src/main.less @@ -7,7 +7,7 @@ } .tooltip-wrapper{ min-width: 25px; - position: absolute; + position: fixed; padding: 5px; padding-top: 15px; background-color: #404040; @@ -18,10 +18,6 @@ width: auto; opacity: .9; text-align: center; - bottom: 0; - left: 0; - right: 0; - transform: translate(0,-70%); >p{ color: #fff; } diff --git a/src/tooltip/index.jsx b/src/tooltip/index.jsx index a131a31..c156c80 100644 --- a/src/tooltip/index.jsx +++ b/src/tooltip/index.jsx @@ -7,6 +7,7 @@ class Tooltip extends React.Component { showTooltip: false }; this.handleRenderTooltip = this.handleRenderTooltip.bind(this); + this.handleCalculateTooltipPosition = this.handleCalculateTooltipPosition.bind(this); } shouldComponentUpdate (nextProps, nextState) { @@ -22,12 +23,23 @@ class Tooltip extends React.Component { this.setState({ showTooltip: !showTooltip }); } + handleCalculateTooltipPosition (event) { + const tooltipClassName = 'tooltip-wrapper'; + let tooltip = document.getElementsByClassName(tooltipClassName); + const xPositionOffset = 25; + const yPositionOffset = 65; + + tooltip[0].style.left = event.clientX - xPositionOffset + 'px'; + tooltip[0].style.top = event.clientY - yPositionOffset + 'px'; + } + render () { const { children, tooltipText, isTooltipActive } = this.props; const { showTooltip } = this.state; return (

From 27b84c562322a8f14e01ac3b95e237024c4e3f25 Mon Sep 17 00:00:00 2001 From: ahmed-Bazzara Date: Thu, 21 Feb 2019 12:29:16 +0100 Subject: [PATCH 19/41] code enhancements --- src/data-table/data-cell.jsx | 5 +---- src/main.less | 1 + src/tooltip/index.jsx | 25 +++++++++++-------------- 3 files changed, 13 insertions(+), 18 deletions(-) diff --git a/src/data-table/data-cell.jsx b/src/data-table/data-cell.jsx index 74f6046..272f813 100644 --- a/src/data-table/data-cell.jsx +++ b/src/data-table/data-cell.jsx @@ -87,11 +87,9 @@ class DataCell extends React.PureComponent { general, measurement, styleBuilder, - styling, - qlik + styling } = this.props; - const inEditState = qlik.inEditState(); const isColumnPercentageBased = measurement.name.substring(0, 1) === '%'; let formattedMeasurementValue = formatMeasurementValue(measurement, styling); if (styleBuilder.hasComments()) { @@ -133,7 +131,6 @@ class DataCell extends React.PureComponent { style={cellStyle} > {formattedMeasurementValue} diff --git a/src/main.less b/src/main.less index 1cfca0f..54cb114 100644 --- a/src/main.less +++ b/src/main.less @@ -18,6 +18,7 @@ width: auto; opacity: .9; text-align: center; + transform: translate(-50%,-110%); >p{ color: #fff; } diff --git a/src/tooltip/index.jsx b/src/tooltip/index.jsx index c156c80..336c6a1 100644 --- a/src/tooltip/index.jsx +++ b/src/tooltip/index.jsx @@ -1,5 +1,13 @@ import React from 'react'; import PropTypes from 'prop-types'; + +const handleCalculateTooltipPosition = (event) => { + const tooltipClassName = 'tooltip-wrapper'; + const tooltip = document.getElementsByClassName(tooltipClassName); + + tooltip[0].style.left = event.clientX + 'px'; + tooltip[0].style.top = event.clientY + 'px'; +}; class Tooltip extends React.Component { constructor (props) { super(props); @@ -7,7 +15,6 @@ class Tooltip extends React.Component { showTooltip: false }; this.handleRenderTooltip = this.handleRenderTooltip.bind(this); - this.handleCalculateTooltipPosition = this.handleCalculateTooltipPosition.bind(this); } shouldComponentUpdate (nextProps, nextState) { @@ -23,29 +30,20 @@ class Tooltip extends React.Component { this.setState({ showTooltip: !showTooltip }); } - handleCalculateTooltipPosition (event) { - const tooltipClassName = 'tooltip-wrapper'; - let tooltip = document.getElementsByClassName(tooltipClassName); - const xPositionOffset = 25; - const yPositionOffset = 65; - - tooltip[0].style.left = event.clientX - xPositionOffset + 'px'; - tooltip[0].style.top = event.clientY - yPositionOffset + 'px'; - } render () { - const { children, tooltipText, isTooltipActive } = this.props; + const { children, tooltipText } = this.props; const { showTooltip } = this.state; return (
{children} - {showTooltip && isTooltipActive + {showTooltip ? (
Date: Thu, 14 Feb 2019 13:02:59 +0100 Subject: [PATCH 20/41] tooltip added --- .eslintrc.js | 3 ++- src/data-table/data-cell.jsx | 50 ++++++++++++++++++++++++++++++++---- src/main.less | 30 ++++++++++++++++++++++ src/tooltip/index.jsx | 27 +++++++++++++++++++ 4 files changed, 104 insertions(+), 6 deletions(-) create mode 100644 src/tooltip/index.jsx diff --git a/.eslintrc.js b/.eslintrc.js index 2328397..ec3a53b 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -129,7 +129,8 @@ module.exports = { "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"] + "react/prefer-stateless-function": ["warn"], + "react/no-set-state": ["warn"] }, extends: [ "eslint:all", diff --git a/src/data-table/data-cell.jsx b/src/data-table/data-cell.jsx index d176fc8..a9967a5 100644 --- a/src/data-table/data-cell.jsx +++ b/src/data-table/data-cell.jsx @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { ApplyPreMask } from '../masking'; import { addSeparators } from '../utilities'; - +import Tooltip from '../tooltip/index.jsx'; function formatMeasurementValue (measurement, styling) { // TODO: measurement.name is a horrible propertyname, it's actually the column header const isColumnPercentageBased = measurement.parents.measurement.header.substring(0, 1) === '%'; @@ -61,14 +61,27 @@ function getSemaphoreColors (measurement, semaphoreColors) { } return semaphoreColors.statusColors.normal; } - -class DataCell extends React.PureComponent { +class DataCell extends React.Component { constructor (props) { super(props); - + this.state = { + bool: false, + mouseXPosition: 0, + mouseYPosition: 0 + }; + this.handleEnter = this.handleEnter.bind(this); + this.handleLeave = this.handleLeave.bind(this); this.handleSelect = this.handleSelect.bind(this); } + shouldComponentUpdate (nextProps, nextState) { + const { bool } = this.state; + if (bool === nextState.bool) { + return false; + } + return true; + } + handleSelect () { const { data: { meta: { dimensionCount } }, general: { allowFilteringByClick }, measurement, qlik } = this.props; const hasSecondDimension = dimensionCount > 1; @@ -83,8 +96,26 @@ class DataCell extends React.PureComponent { } } + handleEnter (event) { + this.setState({ bool: true, + mouseXPosition: event.clientX, + mouseYPosition: event.clientY }); + } + + handleLeave () { + this.setState({ bool: false }); + } + render () { - const { data, general, measurement, styleBuilder, styling } = this.props; + const { bool, mouseXPosition, mouseYPosition } = this.state; + const { + data, + general, + measurement, + styleBuilder, + styling + } = this.props; + const isColumnPercentageBased = measurement.name.substring(0, 1) === '%'; let formattedMeasurementValue = formatMeasurementValue(measurement, styling); if (styleBuilder.hasComments()) { @@ -128,9 +159,18 @@ class DataCell extends React.PureComponent { {formattedMeasurementValue} + {bool + ? + : null} ); } diff --git a/src/main.less b/src/main.less index 9f96728..87ea25e 100644 --- a/src/main.less +++ b/src/main.less @@ -2,6 +2,36 @@ @TableBorder: 1px solid #d3d3d3; @KpiTableWidth: 230px; + .edit-mode{ + pointer-events: none; + } + .tooltip-wrapper{ + position: fixed; + padding: 5px; + padding-top: 10px; + background-color: #404040; + z-index: 10; + pointer-events: none; + border-radius: 5px; + height: 30px; + width: auto; + opacity: .9; + >p{ + color: #fff; + } + } + + .tooltip-wrapper::after { + content: ""; + position: absolute; + bottom: -10px; + left: 50%; + border-width: 10px 10px 0; + border-style: solid; + border-color: #404040 transparent; + margin-left: -10px; + pointer-events: none; + } ._cell(@Width: 50px) { min-width: @Width!important; max-width: @Width!important; diff --git a/src/tooltip/index.jsx b/src/tooltip/index.jsx new file mode 100644 index 0000000..61751c5 --- /dev/null +++ b/src/tooltip/index.jsx @@ -0,0 +1,27 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +const getPos = () => { + console.log(window.pageXOffset); + return { + left: window.pageXOffset, + top: window.pageYOffset + }; + +}; + +const Tooltip = ({ data, xPosition, yPosition }) => ( +
+

+ {data} +

+
+); +Tooltip.propTypes = { + data: PropTypes.string.isRequired, + xPosition: PropTypes.number, + yPosition: PropTypes.number +}; +export default Tooltip; From aeccbf5d17fc044205f7f29986b916e87006e1c9 Mon Sep 17 00:00:00 2001 From: ahmed-Bazzara Date: Thu, 14 Feb 2019 14:04:15 +0100 Subject: [PATCH 21/41] tooltip disabled in edit state --- src/data-table/data-cell.jsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/data-table/data-cell.jsx b/src/data-table/data-cell.jsx index a9967a5..f4d0f15 100644 --- a/src/data-table/data-cell.jsx +++ b/src/data-table/data-cell.jsx @@ -113,9 +113,11 @@ class DataCell extends React.Component { general, measurement, styleBuilder, - styling + styling, + qlik } = this.props; + const inEditState = qlik.inEditState(); const isColumnPercentageBased = measurement.name.substring(0, 1) === '%'; let formattedMeasurementValue = formatMeasurementValue(measurement, styling); if (styleBuilder.hasComments()) { @@ -164,7 +166,7 @@ class DataCell extends React.Component { style={cellStyle} > {formattedMeasurementValue} - {bool + {bool && !inEditState ? Date: Fri, 15 Feb 2019 08:53:35 +0100 Subject: [PATCH 22/41] mind width set to tooltip text inside it is center aligned --- src/main.less | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/main.less b/src/main.less index 87ea25e..1da5609 100644 --- a/src/main.less +++ b/src/main.less @@ -6,9 +6,10 @@ pointer-events: none; } .tooltip-wrapper{ + min-width: 25px; position: fixed; padding: 5px; - padding-top: 10px; + padding-top: 15px; background-color: #404040; z-index: 10; pointer-events: none; @@ -16,6 +17,7 @@ height: 30px; width: auto; opacity: .9; + text-align: center; >p{ color: #fff; } From 521d5086043774a40a681c0a214e13378576193b Mon Sep 17 00:00:00 2001 From: ahmed-Bazzara Date: Fri, 15 Feb 2019 08:54:11 +0100 Subject: [PATCH 23/41] commented jqeury from paint.js for tooltip --- src/paint.jsx | 40 ++++++++++++++++++++++------------------ 1 file changed, 22 insertions(+), 18 deletions(-) diff --git a/src/paint.jsx b/src/paint.jsx index e2bef20..620218f 100644 --- a/src/paint.jsx +++ b/src/paint.jsx @@ -60,25 +60,29 @@ export default async function paint ($element, layout, component) { }); // TODO: fixing tooltips has a seperate issue, make sure to remove this as part of that issue - $(`[tid="${layout.qInfo.qId}"] .header-wrapper th`).hover(function () { - $(`[tid="${layout.qInfo.qId}"] .tooltip`).delay(500) - .show(0); - $(`[tid="${layout.qInfo.qId}"] .header-wrapper th`).children(`[tid="${layout.qInfo.qId}"] .tooltip`) - .remove(); + // $(`[tid="${layout.qInfo.qId}"] .header-wrapper th`).hover(function () { + // $(`[tid="${layout.qInfo.qId}"] .tooltip`).delay(500) + // .show(0); + // $(`[tid="${layout.qInfo.qId}"] .header-wrapper th`).children(`[tid="${layout.qInfo.qId}"] .tooltip`) + // .remove(); - const element = $(this); - const offset = element.offset(); - const toolTip = $('
'); + // const element = $(this); + // const offset = element.offset(); + // const toolTip = $('
'); - toolTip.css({ - left: offset.left, - top: offset.top - }); + // toolTip.css({ + // left: offset.left, + // top: offset.top + // }); - toolTip.text(element.text()); - $(`[tid="${layout.qInfo.qId}"] .header-wrapper th`).append(toolTip); - }, () => { - $(`[tid="${layout.qInfo.qId}"] .tooltip`).delay(0) - .hide(0); - }); + // toolTip.text(element.text()); + // $(`[tid="${layout.qInfo.qId}"] .header-wrapper th`).append(toolTip); + // }, () => { + // $(`[tid="${layout.qInfo.qId}"] .tooltip`).delay(0) + // .hide(0); + // }); + + // TODO: excel export is broken in most browsers, fixing it has an issue of it's own (leaving it disabled for now) + // import { enableExcelExport } from './excel-export'; + // enableExcelExport(layout, html); } From 6994bf51a3725c60d09ffaf8055701c926a94275 Mon Sep 17 00:00:00 2001 From: ahmed-Bazzara Date: Fri, 15 Feb 2019 08:55:13 +0100 Subject: [PATCH 24/41] showTooltip boolean changed name skipping values that are header rows --- src/data-table/data-cell.jsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/data-table/data-cell.jsx b/src/data-table/data-cell.jsx index f4d0f15..e39c1ac 100644 --- a/src/data-table/data-cell.jsx +++ b/src/data-table/data-cell.jsx @@ -65,7 +65,7 @@ class DataCell extends React.Component { constructor (props) { super(props); this.state = { - bool: false, + showTooltip: false, mouseXPosition: 0, mouseYPosition: 0 }; @@ -75,8 +75,8 @@ class DataCell extends React.Component { } shouldComponentUpdate (nextProps, nextState) { - const { bool } = this.state; - if (bool === nextState.bool) { + const { showTooltip } = this.state; + if (showTooltip === nextState.showTooltip) { return false; } return true; @@ -97,17 +97,17 @@ class DataCell extends React.Component { } handleEnter (event) { - this.setState({ bool: true, + this.setState({ showTooltip: true, mouseXPosition: event.clientX, mouseYPosition: event.clientY }); } handleLeave () { - this.setState({ bool: false }); + this.setState({ showTooltip: false }); } render () { - const { bool, mouseXPosition, mouseYPosition } = this.state; + const { showTooltip, mouseXPosition, mouseYPosition } = this.state; const { data, general, @@ -166,7 +166,7 @@ class DataCell extends React.Component { style={cellStyle} > {formattedMeasurementValue} - {bool && !inEditState + {showTooltip && !inEditState && formattedMeasurementValue !== '.' ? Date: Fri, 15 Feb 2019 08:56:02 +0100 Subject: [PATCH 25/41] tooltip added to column header comopnent changed to normal component to hold state in it --- src/headers-table/column-header.jsx | 44 +++++++++++++++++++++++++++-- 1 file changed, 41 insertions(+), 3 deletions(-) diff --git a/src/headers-table/column-header.jsx b/src/headers-table/column-header.jsx index d50d666..73f0fdd 100644 --- a/src/headers-table/column-header.jsx +++ b/src/headers-table/column-header.jsx @@ -1,20 +1,49 @@ import React from 'react'; import PropTypes from 'prop-types'; +import Tooltip from '../tooltip/index.jsx'; -class ColumnHeader extends React.PureComponent { +class ColumnHeader extends React.Component { constructor (props) { super(props); - + this.state = { + showTooltip: false, + mouseXPosition: 0, + mouseYPosition: 0 + }; + this.handleEnter = this.handleEnter.bind(this); + this.handleLeave = this.handleLeave.bind(this); this.handleSelect = this.handleSelect.bind(this); } + shouldComponentUpdate (nextProps, nextState) { + const { showTooltip } = this.state; + if (showTooltip === nextState.showTooltip) { + return false; + } + return true; + } + handleSelect () { const { entry, qlik } = this.props; qlik.backendApi.selectValues(1, [entry.elementNumber], true); } + handleEnter (event) { + console.log(event.clientX); + this.setState({ showTooltip: true, + mouseXPosition: event.clientX, + mouseYPosition: event.clientY }); + } + + handleLeave () { + this.setState({ showTooltip: false }); + } + render () { - const { baseCSS, cellSuffix, colSpan, entry, styling } = this.props; + const { baseCSS, cellSuffix, colSpan, entry, styling, qlik } = this.props; + const { showTooltip, mouseXPosition, mouseYPosition } = this.state; + const inEditState = qlik.inEditState(); + const style = { ...baseCSS, fontSize: `${14 + styling.headerOptions.fontSizeAdjustment} px`, @@ -27,9 +56,18 @@ class ColumnHeader extends React.PureComponent { className={`grid-cells2${cellSuffix}`} colSpan={colSpan} onClick={this.handleSelect} + onMouseOut={this.handleLeave} + onMouseOver={this.handleEnter} style={style} > {entry.displayValue} + {showTooltip && !inEditState + ? + : null} ); } From 906a11c6b4c75baa108101875602c53a72c3dbe1 Mon Sep 17 00:00:00 2001 From: ahmed-Bazzara Date: Fri, 15 Feb 2019 08:56:26 +0100 Subject: [PATCH 26/41] tooltip component cleaned --- src/tooltip/index.jsx | 13 +++---------- 1 file changed, 3 insertions(+), 10 deletions(-) diff --git a/src/tooltip/index.jsx b/src/tooltip/index.jsx index 61751c5..53e004d 100644 --- a/src/tooltip/index.jsx +++ b/src/tooltip/index.jsx @@ -1,18 +1,11 @@ import React from 'react'; import PropTypes from 'prop-types'; -const getPos = () => { - console.log(window.pageXOffset); - return { - left: window.pageXOffset, - top: window.pageYOffset - }; - -}; const Tooltip = ({ data, xPosition, yPosition }) => (

{data} From da57204c413c207ddd98b27dea5efe64092e4446 Mon Sep 17 00:00:00 2001 From: ahmed-Bazzara Date: Fri, 15 Feb 2019 09:26:16 +0100 Subject: [PATCH 27/41] console log removed --- src/headers-table/column-header.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/headers-table/column-header.jsx b/src/headers-table/column-header.jsx index 73f0fdd..d3bdbbb 100644 --- a/src/headers-table/column-header.jsx +++ b/src/headers-table/column-header.jsx @@ -29,7 +29,6 @@ class ColumnHeader extends React.Component { } handleEnter (event) { - console.log(event.clientX); this.setState({ showTooltip: true, mouseXPosition: event.clientX, mouseYPosition: event.clientY }); From 98678d4a138c7d20f597f7d3c7cb876d71bca5c8 Mon Sep 17 00:00:00 2001 From: ahmed-Bazzara Date: Fri, 15 Feb 2019 09:32:55 +0100 Subject: [PATCH 28/41] jQuery commented code deleted --- src/paint.jsx | 23 ----------------------- 1 file changed, 23 deletions(-) diff --git a/src/paint.jsx b/src/paint.jsx index 620218f..5428149 100644 --- a/src/paint.jsx +++ b/src/paint.jsx @@ -59,29 +59,6 @@ export default async function paint ($element, layout, component) { $(`[tid="${layout.qInfo.qId}"] .kpi-table`).css('left', `${Math.round(t.target.scrollLeft)}px`); }); - // TODO: fixing tooltips has a seperate issue, make sure to remove this as part of that issue - // $(`[tid="${layout.qInfo.qId}"] .header-wrapper th`).hover(function () { - // $(`[tid="${layout.qInfo.qId}"] .tooltip`).delay(500) - // .show(0); - // $(`[tid="${layout.qInfo.qId}"] .header-wrapper th`).children(`[tid="${layout.qInfo.qId}"] .tooltip`) - // .remove(); - - // const element = $(this); - // const offset = element.offset(); - // const toolTip = $('

'); - - // toolTip.css({ - // left: offset.left, - // top: offset.top - // }); - - // toolTip.text(element.text()); - // $(`[tid="${layout.qInfo.qId}"] .header-wrapper th`).append(toolTip); - // }, () => { - // $(`[tid="${layout.qInfo.qId}"] .tooltip`).delay(0) - // .hide(0); - // }); - // TODO: excel export is broken in most browsers, fixing it has an issue of it's own (leaving it disabled for now) // import { enableExcelExport } from './excel-export'; // enableExcelExport(layout, html); From 4520d6a48ae1aba65705a163e0503feb5cb495ee Mon Sep 17 00:00:00 2001 From: ahmed-Bazzara Date: Fri, 15 Feb 2019 09:56:32 +0100 Subject: [PATCH 29/41] handling tooltip logic within it --- src/data-table/data-cell.jsx | 20 +++++++------------ src/headers-table/column-header.jsx | 20 +++++++------------ src/tooltip/index.jsx | 30 +++++++++++++++-------------- 3 files changed, 30 insertions(+), 40 deletions(-) diff --git a/src/data-table/data-cell.jsx b/src/data-table/data-cell.jsx index e39c1ac..571a299 100644 --- a/src/data-table/data-cell.jsx +++ b/src/data-table/data-cell.jsx @@ -65,9 +65,7 @@ class DataCell extends React.Component { constructor (props) { super(props); this.state = { - showTooltip: false, - mouseXPosition: 0, - mouseYPosition: 0 + showTooltip: false }; this.handleEnter = this.handleEnter.bind(this); this.handleLeave = this.handleLeave.bind(this); @@ -96,10 +94,8 @@ class DataCell extends React.Component { } } - handleEnter (event) { - this.setState({ showTooltip: true, - mouseXPosition: event.clientX, - mouseYPosition: event.clientY }); + handleEnter () { + this.setState({ showTooltip: true }); } handleLeave () { @@ -107,7 +103,7 @@ class DataCell extends React.Component { } render () { - const { showTooltip, mouseXPosition, mouseYPosition } = this.state; + const { showTooltip } = this.state; const { data, general, @@ -168,11 +164,9 @@ class DataCell extends React.Component { {formattedMeasurementValue} {showTooltip && !inEditState && formattedMeasurementValue !== '.' ? - : null} + + {formattedMeasurementValue} + : null} ); } diff --git a/src/headers-table/column-header.jsx b/src/headers-table/column-header.jsx index d3bdbbb..da9120c 100644 --- a/src/headers-table/column-header.jsx +++ b/src/headers-table/column-header.jsx @@ -6,9 +6,7 @@ class ColumnHeader extends React.Component { constructor (props) { super(props); this.state = { - showTooltip: false, - mouseXPosition: 0, - mouseYPosition: 0 + showTooltip: false }; this.handleEnter = this.handleEnter.bind(this); this.handleLeave = this.handleLeave.bind(this); @@ -28,10 +26,8 @@ class ColumnHeader extends React.Component { qlik.backendApi.selectValues(1, [entry.elementNumber], true); } - handleEnter (event) { - this.setState({ showTooltip: true, - mouseXPosition: event.clientX, - mouseYPosition: event.clientY }); + handleEnter () { + this.setState({ showTooltip: true }); } handleLeave () { @@ -40,7 +36,7 @@ class ColumnHeader extends React.Component { render () { const { baseCSS, cellSuffix, colSpan, entry, styling, qlik } = this.props; - const { showTooltip, mouseXPosition, mouseYPosition } = this.state; + const { showTooltip } = this.state; const inEditState = qlik.inEditState(); const style = { @@ -62,11 +58,9 @@ class ColumnHeader extends React.Component { {entry.displayValue} {showTooltip && !inEditState ? - : null} + + {entry.displayValue} + : null} ); } diff --git a/src/tooltip/index.jsx b/src/tooltip/index.jsx index 53e004d..1d920e5 100644 --- a/src/tooltip/index.jsx +++ b/src/tooltip/index.jsx @@ -1,20 +1,22 @@ import React from 'react'; import PropTypes from 'prop-types'; -const Tooltip = ({ data, xPosition, yPosition }) => ( -
-

- {data} -

-
-); +const Tooltip = ({ children }) => { + const xPosition = event.clientX; + const yPosition = event.clientY; + return ( +
+

+ {children} +

+
+ ); +}; Tooltip.propTypes = { - data: PropTypes.string.isRequired, - xPosition: PropTypes.number, - yPosition: PropTypes.number + children: PropTypes.string.isRequired }; export default Tooltip; From 79b89a3b2557ff0aca9c62cd480b4e4a18bb8cf1 Mon Sep 17 00:00:00 2001 From: ahmed-Bazzara Date: Fri, 15 Feb 2019 11:33:43 +0100 Subject: [PATCH 30/41] all logic for tooltip has been moved to it's component data-cell & column-header components reseted to pure ones --- src/data-table/data-cell.jsx | 38 +++------------ src/headers-table/column-header.jsx | 38 +++------------ src/tooltip/index.jsx | 74 +++++++++++++++++++++++------ 3 files changed, 73 insertions(+), 77 deletions(-) diff --git a/src/data-table/data-cell.jsx b/src/data-table/data-cell.jsx index 571a299..4266827 100644 --- a/src/data-table/data-cell.jsx +++ b/src/data-table/data-cell.jsx @@ -61,25 +61,12 @@ function getSemaphoreColors (measurement, semaphoreColors) { } return semaphoreColors.statusColors.normal; } -class DataCell extends React.Component { +class DataCell extends React.PureComponent { constructor (props) { super(props); - this.state = { - showTooltip: false - }; - this.handleEnter = this.handleEnter.bind(this); - this.handleLeave = this.handleLeave.bind(this); this.handleSelect = this.handleSelect.bind(this); } - shouldComponentUpdate (nextProps, nextState) { - const { showTooltip } = this.state; - if (showTooltip === nextState.showTooltip) { - return false; - } - return true; - } - handleSelect () { const { data: { meta: { dimensionCount } }, general: { allowFilteringByClick }, measurement, qlik } = this.props; const hasSecondDimension = dimensionCount > 1; @@ -94,16 +81,7 @@ class DataCell extends React.Component { } } - handleEnter () { - this.setState({ showTooltip: true }); - } - - handleLeave () { - this.setState({ showTooltip: false }); - } - render () { - const { showTooltip } = this.state; const { data, general, @@ -157,16 +135,14 @@ class DataCell extends React.Component { - {formattedMeasurementValue} - {showTooltip && !inEditState && formattedMeasurementValue !== '.' - ? - - {formattedMeasurementValue} - : null} + + {formattedMeasurementValue} + ); } diff --git a/src/headers-table/column-header.jsx b/src/headers-table/column-header.jsx index da9120c..e698a82 100644 --- a/src/headers-table/column-header.jsx +++ b/src/headers-table/column-header.jsx @@ -2,41 +2,19 @@ import React from 'react'; import PropTypes from 'prop-types'; import Tooltip from '../tooltip/index.jsx'; -class ColumnHeader extends React.Component { +class ColumnHeader extends React.PureComponent { constructor (props) { super(props); - this.state = { - showTooltip: false - }; - this.handleEnter = this.handleEnter.bind(this); - this.handleLeave = this.handleLeave.bind(this); this.handleSelect = this.handleSelect.bind(this); } - shouldComponentUpdate (nextProps, nextState) { - const { showTooltip } = this.state; - if (showTooltip === nextState.showTooltip) { - return false; - } - return true; - } - handleSelect () { const { entry, qlik } = this.props; qlik.backendApi.selectValues(1, [entry.elementNumber], true); } - handleEnter () { - this.setState({ showTooltip: true }); - } - - handleLeave () { - this.setState({ showTooltip: false }); - } - render () { const { baseCSS, cellSuffix, colSpan, entry, styling, qlik } = this.props; - const { showTooltip } = this.state; const inEditState = qlik.inEditState(); const style = { @@ -51,16 +29,14 @@ class ColumnHeader extends React.Component { className={`grid-cells2${cellSuffix}`} colSpan={colSpan} onClick={this.handleSelect} - onMouseOut={this.handleLeave} - onMouseOver={this.handleEnter} style={style} > - {entry.displayValue} - {showTooltip && !inEditState - ? - - {entry.displayValue} - : null} + + {entry.displayValue} + ); } diff --git a/src/tooltip/index.jsx b/src/tooltip/index.jsx index 1d920e5..060cabe 100644 --- a/src/tooltip/index.jsx +++ b/src/tooltip/index.jsx @@ -1,22 +1,66 @@ import React from 'react'; import PropTypes from 'prop-types'; +class Tooltip extends React.Component { + constructor (props) { + super(props); + this.state = { + showTooltip: false, + xPosition: 0, + yPosition: 0 + }; + this.handleRenderTooltip = this.handleRenderTooltip.bind(this); + } -const Tooltip = ({ children }) => { - const xPosition = event.clientX; - const yPosition = event.clientY; - return ( -
-

+ shouldComponentUpdate (nextProps, nextState) { + const { showTooltip } = this.state; + if (nextState.showTooltip === showTooltip) { + return false; + } + return true; + } + + handleRenderTooltip (event) { + const { showTooltip } = this.state; + const xPosition = event.clientX; + const yPosition = event.clientY; + this.setState({ showTooltip: !showTooltip, + xPosition, + yPosition }); + } + + render () { + const { children, tooltipText, isTooltipActive } = this.props; + const { showTooltip, xPosition, yPosition } = this.state; + + const xPositionOffset = 20; + const yPositionOffset = 75; + return ( +

{children} -

-
- ); -}; + + {showTooltip && isTooltipActive + ? ( +
+

+ {tooltipText} +

+
+ ) : null} +
+ ); + } +} + Tooltip.propTypes = { - children: PropTypes.string.isRequired + children: PropTypes.string.isRequired, + isTooltipActive: PropTypes.bool.isRequired, + tooltipText: PropTypes.string.isRequired }; export default Tooltip; From 530f0919f13ac27cab7b439d54d8fd8b971d7d18 Mon Sep 17 00:00:00 2001 From: ahmed-Bazzara Date: Tue, 19 Feb 2019 15:41:30 +0100 Subject: [PATCH 31/41] tooltip positioning tweaked --- src/main.less | 13 ++++++++++--- src/tooltip/index.jsx | 18 ++++-------------- 2 files changed, 14 insertions(+), 17 deletions(-) diff --git a/src/main.less b/src/main.less index 1da5609..ec82ceb 100644 --- a/src/main.less +++ b/src/main.less @@ -7,17 +7,21 @@ } .tooltip-wrapper{ min-width: 25px; - position: fixed; + position: absolute; padding: 5px; padding-top: 15px; background-color: #404040; - z-index: 10; + z-index: 100; pointer-events: none; border-radius: 5px; height: 30px; width: auto; opacity: .9; text-align: center; + bottom: 0; + left: 0; + right: 0; + transform: translate(0,-70%); >p{ color: #fff; } @@ -163,7 +167,10 @@ background-color: #808080 !important; color: #ffffff; } - + .grid-cells{ + position: relative; + overflow: visible; + } .grid-cells-header { padding: 0px; } diff --git a/src/tooltip/index.jsx b/src/tooltip/index.jsx index 060cabe..a131a31 100644 --- a/src/tooltip/index.jsx +++ b/src/tooltip/index.jsx @@ -4,9 +4,7 @@ class Tooltip extends React.Component { constructor (props) { super(props); this.state = { - showTooltip: false, - xPosition: 0, - yPosition: 0 + showTooltip: false }; this.handleRenderTooltip = this.handleRenderTooltip.bind(this); } @@ -19,21 +17,15 @@ class Tooltip extends React.Component { return true; } - handleRenderTooltip (event) { + handleRenderTooltip () { const { showTooltip } = this.state; - const xPosition = event.clientX; - const yPosition = event.clientY; - this.setState({ showTooltip: !showTooltip, - xPosition, - yPosition }); + this.setState({ showTooltip: !showTooltip }); } render () { const { children, tooltipText, isTooltipActive } = this.props; - const { showTooltip, xPosition, yPosition } = this.state; + const { showTooltip } = this.state; - const xPositionOffset = 20; - const yPositionOffset = 75; return (

{tooltipText} From 88ad73bd412ebbbd628f85454dadfc551d74e0c7 Mon Sep 17 00:00:00 2001 From: ahmed-Bazzara Date: Tue, 19 Feb 2019 16:58:39 +0100 Subject: [PATCH 32/41] tooltip position now follow the mouse --- .eslintrc.js | 2 +- src/main.less | 6 +----- src/tooltip/index.jsx | 12 ++++++++++++ 3 files changed, 14 insertions(+), 6 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index ec3a53b..1af18c4 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -116,7 +116,7 @@ module.exports = { "max-params": ["warn"], "brace-style": ["warn", "1tbs", { "allowSingleLine": true }], "prefer-const": ["warn"], - + "class-methods-use-this":["warn"], // plugin:react "react/jsx-indent": ["warn", 2], "react/jsx-indent-props": ["warn", 2], diff --git a/src/main.less b/src/main.less index ec82ceb..1cfca0f 100644 --- a/src/main.less +++ b/src/main.less @@ -7,7 +7,7 @@ } .tooltip-wrapper{ min-width: 25px; - position: absolute; + position: fixed; padding: 5px; padding-top: 15px; background-color: #404040; @@ -18,10 +18,6 @@ width: auto; opacity: .9; text-align: center; - bottom: 0; - left: 0; - right: 0; - transform: translate(0,-70%); >p{ color: #fff; } diff --git a/src/tooltip/index.jsx b/src/tooltip/index.jsx index a131a31..c156c80 100644 --- a/src/tooltip/index.jsx +++ b/src/tooltip/index.jsx @@ -7,6 +7,7 @@ class Tooltip extends React.Component { showTooltip: false }; this.handleRenderTooltip = this.handleRenderTooltip.bind(this); + this.handleCalculateTooltipPosition = this.handleCalculateTooltipPosition.bind(this); } shouldComponentUpdate (nextProps, nextState) { @@ -22,12 +23,23 @@ class Tooltip extends React.Component { this.setState({ showTooltip: !showTooltip }); } + handleCalculateTooltipPosition (event) { + const tooltipClassName = 'tooltip-wrapper'; + let tooltip = document.getElementsByClassName(tooltipClassName); + const xPositionOffset = 25; + const yPositionOffset = 65; + + tooltip[0].style.left = event.clientX - xPositionOffset + 'px'; + tooltip[0].style.top = event.clientY - yPositionOffset + 'px'; + } + render () { const { children, tooltipText, isTooltipActive } = this.props; const { showTooltip } = this.state; return (

From bdf231f88d114ad0756ca4a1567d44c99aea2f8a Mon Sep 17 00:00:00 2001 From: ahmed-Bazzara Date: Thu, 21 Feb 2019 12:29:16 +0100 Subject: [PATCH 33/41] code enhancements --- src/data-table/data-cell.jsx | 5 +---- src/main.less | 1 + src/tooltip/index.jsx | 25 +++++++++++-------------- 3 files changed, 13 insertions(+), 18 deletions(-) diff --git a/src/data-table/data-cell.jsx b/src/data-table/data-cell.jsx index 4266827..3a50bc0 100644 --- a/src/data-table/data-cell.jsx +++ b/src/data-table/data-cell.jsx @@ -87,11 +87,9 @@ class DataCell extends React.PureComponent { general, measurement, styleBuilder, - styling, - qlik + styling } = this.props; - const inEditState = qlik.inEditState(); const isColumnPercentageBased = measurement.name.substring(0, 1) === '%'; let formattedMeasurementValue = formatMeasurementValue(measurement, styling); if (styleBuilder.hasComments()) { @@ -138,7 +136,6 @@ class DataCell extends React.PureComponent { style={cellStyle} > {formattedMeasurementValue} diff --git a/src/main.less b/src/main.less index 1cfca0f..54cb114 100644 --- a/src/main.less +++ b/src/main.less @@ -18,6 +18,7 @@ width: auto; opacity: .9; text-align: center; + transform: translate(-50%,-110%); >p{ color: #fff; } diff --git a/src/tooltip/index.jsx b/src/tooltip/index.jsx index c156c80..336c6a1 100644 --- a/src/tooltip/index.jsx +++ b/src/tooltip/index.jsx @@ -1,5 +1,13 @@ import React from 'react'; import PropTypes from 'prop-types'; + +const handleCalculateTooltipPosition = (event) => { + const tooltipClassName = 'tooltip-wrapper'; + const tooltip = document.getElementsByClassName(tooltipClassName); + + tooltip[0].style.left = event.clientX + 'px'; + tooltip[0].style.top = event.clientY + 'px'; +}; class Tooltip extends React.Component { constructor (props) { super(props); @@ -7,7 +15,6 @@ class Tooltip extends React.Component { showTooltip: false }; this.handleRenderTooltip = this.handleRenderTooltip.bind(this); - this.handleCalculateTooltipPosition = this.handleCalculateTooltipPosition.bind(this); } shouldComponentUpdate (nextProps, nextState) { @@ -23,29 +30,20 @@ class Tooltip extends React.Component { this.setState({ showTooltip: !showTooltip }); } - handleCalculateTooltipPosition (event) { - const tooltipClassName = 'tooltip-wrapper'; - let tooltip = document.getElementsByClassName(tooltipClassName); - const xPositionOffset = 25; - const yPositionOffset = 65; - - tooltip[0].style.left = event.clientX - xPositionOffset + 'px'; - tooltip[0].style.top = event.clientY - yPositionOffset + 'px'; - } render () { - const { children, tooltipText, isTooltipActive } = this.props; + const { children, tooltipText } = this.props; const { showTooltip } = this.state; return (
{children} - {showTooltip && isTooltipActive + {showTooltip ? (
Date: Fri, 22 Feb 2019 11:26:17 +0100 Subject: [PATCH 34/41] fixing alignment between cells and row-headers --- src/main.less | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/main.less b/src/main.less index 54cb114..3a3d458 100644 --- a/src/main.less +++ b/src/main.less @@ -166,7 +166,6 @@ } .grid-cells{ position: relative; - overflow: visible; } .grid-cells-header { padding: 0px; @@ -176,10 +175,6 @@ min-width: 522px; } - .grid-cells:before { - content: "\00a0"; - } - .grid { height: 50px; width: 350px; From 979c036b49b90ce4cdbb0675126b4bc20f7c3b0e Mon Sep 17 00:00:00 2001 From: ahmed-Bazzara Date: Fri, 22 Feb 2019 12:44:44 +0100 Subject: [PATCH 35/41] settings file reverted --- settings.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/settings.js b/settings.js index 0b1583d..842ebc1 100644 --- a/settings.js +++ b/settings.js @@ -4,10 +4,10 @@ const packageJSON = require('./package.json'); const defaultBuildDestination = path.resolve("./build"); module.exports = { - buildDestination: "C:\\Users\\Ahmed\\Documents\\Qlik\\Sense\\Extensions\\qlik-smart-pivot", + buildDestination: process.env.BUILD_PATH || defaultBuildDestination, mode: process.env.NODE_ENV || 'development', name: packageJSON.name, version: process.env.VERSION || 'local-dev', url: process.env.BUILD_URL || defaultBuildDestination, - port: process.env.PORT || 8090 + port: process.env.PORT || 8085 }; From 557cd1aeb6752ddca0733ed127c9b039cc71acb8 Mon Sep 17 00:00:00 2001 From: Kristoffer Lind Date: Fri, 22 Feb 2019 14:46:43 +0100 Subject: [PATCH 36/41] remove some duplicated css --- src/data-table/data-cell.jsx | 2 +- src/main.less | 13 ------------- 2 files changed, 1 insertion(+), 14 deletions(-) diff --git a/src/data-table/data-cell.jsx b/src/data-table/data-cell.jsx index cae3f2f..c4af9b2 100644 --- a/src/data-table/data-cell.jsx +++ b/src/data-table/data-cell.jsx @@ -98,7 +98,7 @@ class DataCell extends React.PureComponent { const { semaphoreColors, semaphoreColors: { fieldsToApplyTo } } = styling; const isValidSemaphoreValue = !styleBuilder.hasComments() && !isNaN(measurement.value); - const shouldHaveSemaphoreColors = fieldsToApplyTo.applyToMetric && (fieldsToApplyTo.applyToAll || fieldsToApplyTo.specificFields.indexOf(measurement.name) !== -1); + const shouldHaveSemaphoreColors = (fieldsToApplyTo.applyToMetric || fieldsToApplyTo.specificFields.indexOf(measurement.parents.dimension1.header) !== -1); let cellStyle; if (isValidSemaphoreValue && shouldHaveSemaphoreColors) { const { backgroundColor, color } = getSemaphoreColors(measurement, semaphoreColors); diff --git a/src/main.less b/src/main.less index 4aff974..8d47fac 100644 --- a/src/main.less +++ b/src/main.less @@ -204,13 +204,6 @@ width: 350px; } - /* popups for headers */ - .header-wrapper { - position: absolute; - top: 0; - z-index: 1; - } - .tooltip { position: fixed !important; color: rgb(70, 70, 70); @@ -219,12 +212,6 @@ border: groove; } - .row-wrapper { - height: calc(~"100% - 97px"); - padding: 0; - margin-top: 0; - } - .kpi-table .fdim-cells, .data-table td { line-height: 1em !important; From f99281ff4783be84c2db93c9c3e8f774f6e6a222 Mon Sep 17 00:00:00 2001 From: Kristoffer Lind Date: Fri, 22 Feb 2019 15:10:07 +0100 Subject: [PATCH 37/41] hide scrollbars in firefox --- src/main.less | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/main.less b/src/main.less index 8d47fac..31425c1 100644 --- a/src/main.less +++ b/src/main.less @@ -267,6 +267,8 @@ .kpi-table .row-wrapper, .data-table .header-wrapper, .data-table .row-wrapper { + /* stylelint-disable-next-line property-no-unknown */ + scrollbar-width: none; -ms-overflow-style: none; // IE 10+ -moz-overflow: -moz-scrollbars-none; // Firefox From 730517504992651756bf290aaf09485bffde182a Mon Sep 17 00:00:00 2001 From: Kristoffer Lind Date: Fri, 22 Feb 2019 15:26:59 +0100 Subject: [PATCH 38/41] fix semaphore alignment --- src/data-table/data-cell.jsx | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/src/data-table/data-cell.jsx b/src/data-table/data-cell.jsx index c4af9b2..adf59de 100644 --- a/src/data-table/data-cell.jsx +++ b/src/data-table/data-cell.jsx @@ -96,18 +96,25 @@ class DataCell extends React.PureComponent { textAlignment = textAlignmentProp; } + let cellStyle = { + fontFamily: styling.options.fontFamily, + ...styleBuilder.getStyle(), + paddingLeft: '5px', + textAlign: textAlignment + + }; + const { semaphoreColors, semaphoreColors: { fieldsToApplyTo } } = styling; const isValidSemaphoreValue = !styleBuilder.hasComments() && !isNaN(measurement.value); const shouldHaveSemaphoreColors = (fieldsToApplyTo.applyToMetric || fieldsToApplyTo.specificFields.indexOf(measurement.parents.dimension1.header) !== -1); - let cellStyle; if (isValidSemaphoreValue && shouldHaveSemaphoreColors) { const { backgroundColor, color } = getSemaphoreColors(measurement, semaphoreColors); cellStyle = { + ...styleBuilder.getStyle(), backgroundColor, color, fontFamily: styling.options.fontFamily, - ...styleBuilder.getStyle(), - paddingLeft: '4px', + paddingLeft: '5px', textAlign: textAlignment }; } From 7107f485be1c2ab6f3c779f8fd5de8a91d7372e5 Mon Sep 17 00:00:00 2001 From: Balazs Gobel Date: Mon, 25 Feb 2019 12:55:48 +0100 Subject: [PATCH 39/41] resolve additional merge conflict: removed obsolete code --- src/paint.jsx | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/src/paint.jsx b/src/paint.jsx index 61b88f8..deb50b1 100644 --- a/src/paint.jsx +++ b/src/paint.jsx @@ -20,20 +20,4 @@ export default async function paint ($element, layout, component) { ); ReactDOM.render(jsx, $element[0]); - - // TODO: skipped the following as they weren't blockers for letting react handle rendering, - // they are however the only reason we still depend on jQuery and should be removed as part of unnecessary dependencies issue - $(`[tid="${layout.qInfo.qId}"] .data-table .row-wrapper`).on('scroll', function () { - $(`[tid="${layout.qInfo.qId}"] .kpi-table .row-wrapper`).scrollTop($(this).scrollTop()); - }); - - // freeze first column - $(`[tid="${layout.qInfo.qId}"] .qv-object-content-container`).on('scroll', (t) => { - $(`[tid="${layout.qInfo.qId}"] .kpi-table`).css('left', `${Math.round(t.target.scrollLeft)}px`); - }); - - // TODO: excel export is broken in most browsers, fixing it has an issue of it's own (leaving it disabled for now) - // import { enableExcelExport } from './excel-export'; - // enableExcelExport(layout, html); - } From ebb5a7cf16560eb1c259ea604e82f29a3f784707 Mon Sep 17 00:00:00 2001 From: Balazs Gobel Date: Mon, 25 Feb 2019 12:59:02 +0100 Subject: [PATCH 40/41] Additional merge conflict fixes --- src/main.less | 4 ++++ src/paint.jsx | 1 - 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/main.less b/src/main.less index 13db120..ac01c42 100644 --- a/src/main.less +++ b/src/main.less @@ -20,6 +20,10 @@ line-height: 1em !important; } + div.qv-object-content-container { + z-index: 110; + } + .tooltip-wrapper { min-width: 25px; position: fixed; diff --git a/src/paint.jsx b/src/paint.jsx index deb50b1..50586f4 100644 --- a/src/paint.jsx +++ b/src/paint.jsx @@ -1,4 +1,3 @@ -import $ from 'jquery'; // eslint-disable-line id-length import initializeStore from './store'; import React from 'react'; import ReactDOM from 'react-dom'; From 710d4a88426a45c6e49847cf2c0dbb5ee5ff79a9 Mon Sep 17 00:00:00 2001 From: Balazs Gobel Date: Mon, 25 Feb 2019 13:41:11 +0100 Subject: [PATCH 41/41] Fix tests --- src/headers-table/index.spec.js | 3 ++- src/root.spec.js | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/headers-table/index.spec.js b/src/headers-table/index.spec.js index 9c7cb27..c2458a5 100644 --- a/src/headers-table/index.spec.js +++ b/src/headers-table/index.spec.js @@ -13,7 +13,8 @@ describe('', () => { qlik: { backendApi: { selectValues: () => {} - } + }, + inEditState: () => {} }, styling }; diff --git a/src/root.spec.js b/src/root.spec.js index 42214c9..6cf20e9 100644 --- a/src/root.spec.js +++ b/src/root.spec.js @@ -10,7 +10,8 @@ describe('', () => { qlik: { backendApi: { selectValues: () => {} - } + }, + inEditState: () => {} }, state };