hisptz · nnkogift · May 11, 2022 · May 10, 2022 · May 10, 2022
diff --git a/apps/app/package.json b/apps/app/package.json
@@ -39,7 +39,7 @@
     "cucumber": "^7.0.0-rc.0",
     "cypress": "9.5.0",
     "cypress-cucumber-preprocessor": "^4.3.0",
-    "cypress-multi-reporters": "^1.5.0",
+    "cypress-multi-reporters": "^1.6.0",
     "cz-conventional-changelog": "3.3.0",
     "eslint-plugin-cypress": "^2.11.3",
     "eslint-plugin-react-hooks": "^4.3.0",
@@ -65,6 +65,7 @@
     "@material-ui/core": "^4.11.4",
     "@material-ui/icons": "^4.11.2",
     "async": "^3.2.0",
+    "cypress-multi-reporters": "^1.6.0",
     "file-saver": "^2.0.5",
     "highcharts": "^9.3.1",
     "immer": "^9.0.5",

diff --git a/package.json b/package.json
@@ -4,14 +4,21 @@
   "description": "Interactive Scorecard Application",
   "license": "BSD-3-Clause",
   "private": true,
-  "workspaces": [
-    "apps/*",
-    "shared/*"
-  ],
+  "workspaces": {
+    "packages": [
+      "apps/*",
+      "shared/*"
+    ],
+    "nohoist": [
+      "**/cypress-multi-reporters/**"
+    ]
+  },
   "scripts": {
     "start:app": "concurrently \"yarn start:libs\"  \"yarn workspace app start\"",
     "deploy:app": "yarn workspace app deploy",
     "test:open:app": "yarn workspace app cy:open",
+    "test:capture:app": "yarn workspace app cy:capture",
+    "test:stub:app": "yarn workspace app cy:stub",
     "start:widget": "yarn workspace widget start",
     "build:utils": "yarn workspace @hisptz/scorecard-utils build",
     "build:constants": "yarn workspace @hisptz/scorecard-constants build",

diff --git a/shared/components/src/ScorecardCell/Components/LinkedCellSvg.js b/shared/components/src/ScorecardCell/Components/LinkedCellSvg.js
@@ -10,9 +10,10 @@ export default function LinkedCellSvg({
                                           bottomColor,
                                           topStatus,
                                           bottomStatus,
+                                          cellRef
                                       }) {
-    const width = 100;
-    const height = 47;
+    const width = cellRef?.offsetWidth - 1 || 100;
+    const height = cellRef?.offsetHeight - 1 || 47;
     const fontSize = 12;
     const topFontSize = 12;
     const bottomFontSize = 12;
@@ -73,7 +74,7 @@ export default function LinkedCellSvg({
                 lengthAdjust="spacingAndGlyphs"
                 textLength={bottomValue?.length > 4 ? 28 : null}
                 fontSize={bottomFontSize}
-                x={width / 2 + padding / 4}
+                x={width / 2 + padding}
                 y={height - padding}
             >
                 {bottomValue}

diff --git a/shared/components/src/ScorecardCell/Components/SingleCellSvg.js b/shared/components/src/ScorecardCell/Components/SingleCellSvg.js
@@ -1,50 +1,49 @@
 import PropTypes from "prop-types";
 import React from "react";
-import { DecreasingArrows, IncreasingArrows } from "./Arrows";
+import {DecreasingArrows, IncreasingArrows} from "./Arrows";
 
-export default function SingleCellSvg({ color, value, status, bold }) {
-  const width = 100;
-  const height = 47;
-  const fontSize = 12;
-  const arrowFontSize = 10;
+export default function SingleCellSvg({cellRef, color, value, status, bold}) {
+    const width = cellRef?.offsetWidth - 1 || 100; //1px for the border
+    const height = cellRef?.offsetHeight - 1 || 47; //1px for the border
+    const fontSize = 12;
+    const arrowFontSize = 10;
 
-  return (
-    <svg width={width} height={height} style={{ display: "block" }}>
-      <polygon
-        points={`0 0 0 ${height} ${width} ${height} ${width} 0`}
-        style={{ fill: color ?? "#FFFFFF" }}
-      />
-      {status &&
-        (status === "increasing" ? (
-          <IncreasingArrows
-            fontSize={arrowFontSize}
-            y={height - arrowFontSize * 2}
-            x={width / 2 - fontSize * 2}
-          />
-        ) : (
-          <DecreasingArrows
-            fontSize={arrowFontSize}
-            y={height - fontSize}
-            x={width / 2 - fontSize * 2}
-          />
-        ))}
-      <text
-        id={"test-average-column"}
-        style={{ fontWeight: bold && "bold" }}
-        lengthAdjust="spacingAndGlyphs"
-        fontSize={fontSize}
-        x={width / 2 - fontSize}
-        y={height - fontSize}
-      >
-        {value}
-      </text>
-    </svg>
-  );
+    const decreasing = status === "decreasing";
+
+    return (
+        <svg width={width} height={height} style={{display: "block"}}>
+            <polygon
+                points={`0 0 0 ${height} ${width} ${height} ${width} 0`}
+                style={{fill: color ?? "#FFFFFF"}}
+            />
+            {status &&
+                (
+                    decreasing ?
+                        <DecreasingArrows x={width / 2 - fontSize * 2} y={(height - arrowFontSize) / 2 + arrowFontSize}
+                                          fontSize={arrowFontSize}/> :
+                        <IncreasingArrows
+                            fontSize={arrowFontSize}
+                            y={(height - arrowFontSize) / 2}
+                            x={width / 2 - fontSize * 2}
+                        />
+                )}
+            <text
+                id={"test-average-column"}
+                style={{fontWeight: bold && "bold"}}
+                lengthAdjust="spacingAndGlyphs"
+                fontSize={fontSize}
+                x={width / 2 - fontSize}
+                y={(height - fontSize) / 2 + fontSize}
+            >
+                {value}
+            </text>
+        </svg>
+    );
 }
 
 SingleCellSvg.propTypes = {
-  value: PropTypes.string.isRequired,
-  bold: PropTypes.bool,
-  color: PropTypes.string,
-  status: PropTypes.oneOf(["increasing", "decreasing"]),
+    value: PropTypes.string.isRequired,
+    bold: PropTypes.bool,
+    color: PropTypes.string,
+    status: PropTypes.oneOf(["increasing", "decreasing"]),
 };
diff --git a/...rc/ScorecardView/components/ScorecardTable/Components/TableBody/Components/AverageCell.js b/...rc/ScorecardView/components/ScorecardTable/Components/TableBody/Components/AverageCell.js
@@ -1,13 +1,13 @@
 import {head, last, round} from "lodash";
 import PropTypes from "prop-types";
-import React from "react";
+import React, {useRef, useState} from "react";
 import {useRecoilValue} from "recoil";
 import {OrgUnitLevels, ScorecardLegendDefinitionSelector, ScorecardViewState} from "@hisptz/scorecard-state";
 import {getLegend} from "@hisptz/scorecard-utils";
 import {LinkedCellSvg, SingleCellSvg} from "../../../../../../index";
 
 
-function SingleAverageCell({dataSources, values, bold, period, orgUnit}) {
+function SingleAverageCell({cellRef, dataSources, values, bold, period, orgUnit}) {
 
     const [dataSource] = dataSources ?? [];
     const defaultLegendDefinitions = useRecoilValue(
@@ -35,13 +35,14 @@ function SingleAverageCell({dataSources, values, bold, period, orgUnit}) {
     }
 
     return <SingleCellSvg
+        cellRef={cellRef}
         color={cellColor}
         bold={bold}
         value={head(values) !== undefined ? round(head(values), 2) : ""}
     />
 }
 
-function LinkedAverageCell({dataSources, values, bold, period, orgUnit}) {
+function LinkedAverageCell({cellRef, dataSources, values, bold, period, orgUnit}) {
     const defaultLegendDefinitions = useRecoilValue(
         ScorecardLegendDefinitionSelector(true)
     );
@@ -77,6 +78,7 @@ function LinkedAverageCell({dataSources, values, bold, period, orgUnit}) {
 
     return (
         <LinkedCellSvg
+            cellRef={cellRef}
             topColor={topCellColor}
             bottomColor={bottomCellColor}
             bold={bold}
@@ -106,12 +108,17 @@ LinkedAverageCell.propTypes = {
 
 function ComplexAverageCell({value, bold, dataSources, period, orgUnit}) {
     const values = Object.values(value);
+
+    const [tableCellRef, setTableCellRef] = useState();
+
     return (
-        <td className="data-cell" align="center">
+        <td ref={setTableCellRef} className="data-cell" align="center">
             {values.length > 1 ? (
-                <LinkedAverageCell period={period} orgUnit bold={bold} dataSources={dataSources} values={values}/>
+                <LinkedAverageCell cellRef={tableCellRef} period={period} orgUnit bold={bold} dataSources={dataSources}
+                                   values={values}/>
             ) : (
-                <SingleAverageCell period={period} orgUnit={orgUnit} bold={bold} dataSources={dataSources}
+                <SingleAverageCell cellRef={tableCellRef} period={period} orgUnit={orgUnit} bold={bold}
+                                   dataSources={dataSources}
                                    values={values}/>
             )}
         </td>
@@ -128,14 +135,18 @@ ComplexAverageCell.propTypes = {
 
 
 export default function AverageCell({value, bold, dataSources, orgUnit, period}) {
+
+    const [singleCellRef, setSingleCellRef] = useState();
+
     if (value === undefined) {
         return null;
     }
 
     if (typeof value === "number") {
+
         return (
-            <td className="data-cell" align="center">
-                <SingleCellSvg bold={bold} value={value ? round(value, 2) : ""}/>
+            <td ref={setSingleCellRef} className="data-cell" align="center">
+                <SingleCellSvg cellRef={singleCellRef} bold={bold} value={value ? round(value, 2) : ""}/>
             </td>
         );
     }

diff --git a/...ecardView/components/ScorecardTable/Components/TableDataContainer/Components/DataCells.js b/...ecardView/components/ScorecardTable/Components/TableDataContainer/Components/DataCells.js
@@ -8,7 +8,7 @@ import {ScorecardViewState} from "@hisptz/scorecard-state";
 import {LinkedCellSvg, SingleCellSvg} from "../../../../../../index";
 
 
-export function SingleDataCell({data, color, indicator}) {
+export function SingleDataCell({cellRef, data, color, indicator}) {
     const {arrows} = useRecoilValue(ScorecardViewState("options")) ?? {};
     const {current, previous} = data ?? {};
     const increasing = useMemo(() => {
@@ -23,6 +23,7 @@ export function SingleDataCell({data, color, indicator}) {
     ;
     return current ? (
         <SingleCellSvg
+            cellRef={cellRef}
             status={increasing}
             value={`${current ?? ""}`}
             color={color}
@@ -39,7 +40,7 @@ SingleDataCell.propTypes = {
 };
 
 
-export function LinkedDataCell({topData, bottomData, topColor, bottomColor, topIndicator, bottomIndicator}) {
+export function LinkedDataCell({cellRef, topData, bottomData, topColor, bottomColor, topIndicator, bottomIndicator}) {
     const {current: topCurrent, previous: topPrevious} = topData ?? {};
     const {current: bottomCurrent, previous: bottomPrevious} = bottomData ?? {};
     const {arrows} = useRecoilValue(ScorecardViewState("options")) ?? {};
@@ -61,6 +62,7 @@ export function LinkedDataCell({topData, bottomData, topColor, bottomColor, topI
 
     return topCurrent || bottomCurrent ? (
         <LinkedCellSvg
+            cellRef={cellRef}
             topValue={topCurrent}
             topColor={topColor}
             bottomValue={bottomCurrent}

diff --git a/...onents/src/ScorecardView/components/ScorecardTable/Components/TableDataContainer/index.js b/...onents/src/ScorecardView/components/ScorecardTable/Components/TableDataContainer/index.js
@@ -26,11 +26,11 @@ function DataContainer({
     const [analysisOpen, setAnalysisOpen] = useState(false);
     const [topData, setTopData] = useState();
     const [bottomData, setBottomData] = useState();
-    const ref = useRef(null);
     const [stateActionRef, setStateActionRef] = useState(null);
     const resetPeriodsOptionSelection = useResetRecoilState(cellPeriodOptionAtom);
     const resetOrgUnitOptionSelection = useResetRecoilState(orgUnitOptionOnCell);
 
+    const [tableCellRef, setTableRef] = useState();
 
     const [top, bottom] = dataSources ?? [];
     const {color: topColor} =
@@ -75,44 +75,41 @@ function DataContainer({
 
     return (
         <td
+            ref={setTableRef}
             className="data-cell"
             align="center"
-            style={{
-                background: topColor,
+            data-test={"data-cell"}
+            onClick={(event) => {
+                event.stopPropagation();
+                setAnalysisOpen(true);
+            }}
+            onContextMenu={(e) => {
+                e.preventDefault();
+                setStateActionRef(e.target);
             }}
         >
-            <div
-                data-test={"data-cell"}
-                onClick={() => {
-                    setAnalysisOpen(true);
-                }}
-                onContextMenu={(e) => {
-                    e.preventDefault();
-                    setStateActionRef(e.target);
-                }}
-                ref={ref}
-            >
-                {loading ? (
-                    <LoadingCell/>
-                ) : dataSources?.length > 1 ? (
-                    <LinkedDataCell
-                        topIndicator={top}
-                        bottomIndicator={bottom}
-                        bottomData={bottomData}
-                        topData={topData}
-                        bottomColor={bottomColor}
-                        topColor={topColor}
-                    />
-                ) : (
-                    <SingleDataCell indicator={top} data={topData} color={topColor}/>
-                )}
-            </div>
+            {loading ? (
+                <LoadingCell/>
+            ) : dataSources?.length > 1 ? (
+                <LinkedDataCell
+                    cellRef={tableCellRef}
+                    topIndicator={top}
+                    bottomIndicator={bottom}
+                    bottomData={bottomData}
+                    topData={topData}
+                    bottomColor={bottomColor}
+                    topColor={topColor}
+                />
+            ) : (
+                <SingleDataCell cellRef={tableCellRef} indicator={top} data={topData} color={topColor}/>
+            )}
             {analysisOpen && (
                 <TableCellAnalysis
                     orgUnit={orgUnit}
                     period={period}
                     dataHolder={{dataSources}}
-                    onClose={() => {
+                    onClose={(_, event) => {
+                        event.stopPropagation();
                         setAnalysisOpen(false);
                     }}
                 />
@@ -127,7 +124,7 @@ function DataContainer({
 }
 
 
-export default memo(DataContainer)
+export default DataContainer;
 
 DataContainer.propTypes = {
     dataEngine: PropTypes.instanceOf(ScorecardDataEngine).isRequired,

diff --git a/yarn.lock b/yarn.lock
@@ -8194,10 +8194,10 @@ cypress-cucumber-preprocessor@^4.3.0:
     minimist "^1.2.5"
     through "^2.3.8"
 
-cypress-multi-reporters@^1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/cypress-multi-reporters/-/cypress-multi-reporters-1.5.0.tgz#fff2758c082b49e8b91fed39f9650c70bc06de0d"
-  integrity sha512-6rJ1rk1RpjZwTeydCDc8r3iOmWj2ZEYo++oDTJHNEu7eetb3W1cYDNo5CdxF/r0bo7TLQsOEpBHOCYBZfPVt/g==
+cypress-multi-reporters@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/cypress-multi-reporters/-/cypress-multi-reporters-1.6.0.tgz#2c6833b92e3df412c233657c55009e2d5e1cc7c1"
+  integrity sha512-JN9yMzDmPwwirzi95N2FC8VJZ0qp+uUJ1ixYHpJFaAtGgIx15LjVmASqQaxnDh8q57jIIJ6C0o7imiLU6N1YNQ==
   dependencies:
     debug "^4.1.1"
     lodash "^4.17.15"
@@ -20695,8 +20695,10 @@ watchpack@^1.6.0, watchpack@^1.7.4:
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.7.5.tgz#1267e6c55e0b9b5be44c2023aed5437a2c26c453"
   integrity sha512-9P3MWk6SrKjHsGkLT2KHXdQ/9SNkyoJbabxnKOoJepsvJjJG8uYTR3yTPxPQvNDI3w4Nz1xnE0TLHK4RIVe/MQ==
   dependencies:
+    chokidar "^3.4.1"
     graceful-fs "^4.1.2"
     neo-async "^2.5.0"
+    watchpack-chokidar2 "^2.0.1"
   optionalDependencies:
     chokidar "^3.4.1"
     watchpack-chokidar2 "^2.0.1"