fix(build,chartArea): npm update for victory charts (#314)

* chartArea, label attribute fix, note
RedHatInsights · Jun 16, 2020 · 60dd30b · 60dd30b
1 parent 8ab0608
commit 60dd30b
Show file tree

Hide file tree

Showing 5 changed files with 439 additions and 215 deletions.
diff --git a/package.json b/package.json
@@ -109,9 +109,9 @@
     "redux-promise-middleware": "^6.1.2",
     "redux-thunk": "^2.3.0",
     "reselect": "^4.0.0",
-    "victory": "^34.2.0",
-    "victory-core": "^34.2.0",
-    "victory-legend": "^34.2.0"
+    "victory": "^34.3.11",
+    "victory-core": "^34.3.8",
+    "victory-legend": "^34.3.8"
   },
   "devDependencies": {
     "apidoc-mock": "^3.0.2",

diff --git a/src/components/chartArea/__tests__/__snapshots__/chartArea.test.js.snap b/src/components/chartArea/__tests__/__snapshots__/chartArea.test.js.snap
@@ -765,6 +765,194 @@ Object {
 }
 `;
 
+exports[`ChartArea Component should handle custom chart tooltips: componentTooltip 1`] = `
+<ContextProvider
+  value={
+    Object {
+      "portalDeregister": [Function],
+      "portalRegister": [Function],
+      "portalUpdate": [Function],
+    }
+  }
+>
+  <div
+    className="VictoryContainer"
+    style={
+      Object {
+        "height": "auto",
+        "pointerEvents": "none",
+        "position": "relative",
+        "touchAction": "none",
+        "width": "100%",
+      }
+    }
+  >
+    <svg
+      role="img"
+      style={
+        Object {
+          "height": "auto",
+          "pointerEvents": "all",
+          "width": "100%",
+        }
+      }
+      viewBox="0 0 undefined undefined"
+    />
+    <div
+      style={
+        Object {
+          "height": "auto",
+          "left": 0,
+          "position": "absolute",
+          "top": 0,
+          "width": "100%",
+          "zIndex": 99,
+        }
+      }
+    >
+      <Portal
+        style={
+          Object {
+            "height": "auto",
+            "overflow": "visible",
+            "width": "100%",
+          }
+        }
+        viewBox="0 0 undefined undefined"
+      />
+    </div>
+  </div>
+</ContextProvider>
+`;
+
+exports[`ChartArea Component should handle custom chart tooltips: custom tooltip, post-props chart 1`] = `
+<div
+  className="uxui-curiosity__modal uxui-curiosity__modal--loading"
+  id="curiosity-chartarea"
+>
+  <Chart
+    animate={
+      Object {
+        "duration": 0,
+      }
+    }
+    containerComponent={
+      <VictoryVoronoiCursorContainer
+        activateData={true}
+        activateLabels={true}
+        className="VictoryContainer"
+        cursorComponent={
+          <LineSegment
+            lineComponent={<Line />}
+            role="presentation"
+            shapeRendering="auto"
+          />
+        }
+        cursorDimension="x"
+        cursorLabelComponent={
+          <VictoryLabel
+            capHeight={0.71}
+            direction="inherit"
+            lineHeight={1}
+            textComponent={<Text />}
+            tspanComponent={<TSpan />}
+          />
+        }
+        cursorLabelOffset={
+          Object {
+            "x": 5,
+            "y": -10,
+          }
+        }
+        labelComponent={<FlyoutComponent />}
+        labels={[Function]}
+        portalComponent={<Portal />}
+        portalZIndex={99}
+        responsive={true}
+        voronoiDimension="x"
+        voronoiPadding={60}
+      />
+    }
+    domain={
+      Object {
+        "y": Array [
+          0,
+          20,
+        ],
+      }
+    }
+    padding={
+      Object {
+        "bottom": 75,
+        "left": 50,
+        "right": 50,
+        "top": 50,
+      }
+    }
+    themeColor="blue"
+    width={0}
+  >
+    <ChartAxis
+      animate={false}
+      fixLabelOverlap={false}
+      tickFormat={[Function]}
+      tickValues={
+        Array [
+          1,
+        ]
+      }
+    />
+    <ChartAxis
+      animate={false}
+      dependentAxis={true}
+      showGrid={true}
+    />
+    <ChartThreshold
+      animate={false}
+      data={
+        Array [
+          Object {
+            "x": 1,
+            "xAxisLabel": "1 x axis label",
+            "y": 10,
+          },
+        ]
+      }
+      interpolation="step"
+      key="generatedid-"
+      name="chartArea-1-threshold"
+      style={
+        Object {
+          "data": Object {},
+        }
+      }
+    />
+    <ChartStack>
+      <ChartArea
+        animate={false}
+        data={
+          Array [
+            Object {
+              "x": 1,
+              "xAxisLabel": "1 x axis label",
+              "y": 0,
+            },
+          ]
+        }
+        interpolation="natural"
+        key="generatedid-"
+        name="chartArea-0-area"
+        style={
+          Object {
+            "data": Object {},
+          }
+        }
+      />
+    </ChartStack>
+  </Chart>
+</div>
+`;
+
 exports[`ChartArea Component should handle custom chart tooltips: getTooltipData:after function 1`] = `
 Array [
   Object {
@@ -814,54 +1002,58 @@ Array [
         },
       },
     },
-    "tooltip": Object {
-      "dataSets": Array [
-        Object {
-          "data": Array [
-            Object {
+    "tooltip": <div
+      id="custom-tooltip"
+    >
+      Object {
+        "dataSets": Array [
+          Object {
+            "data": Array [
+              Object {
+                "x": 1,
+                "xAxisLabel": "1 x axis label",
+                "y": 0,
+              },
+            ],
+            "id": "loremGraph",
+            "interpolation": "natural",
+            "isStacked": true,
+          },
+          Object {
+            "data": Array [
+              Object {
+                "x": 1,
+                "xAxisLabel": "1 x axis label",
+                "y": 10,
+              },
+            ],
+            "id": "ipsumGraph",
+            "isThreshold": true,
+          },
+        ],
+        "index": 0,
+        "itemsByKey": Object {
+          "ipsumGraph": Object {
+            "color": "",
+            "data": Object {
               "x": 1,
               "xAxisLabel": "1 x axis label",
-              "y": 0,
+              "y": 10,
             },
-          ],
-          "id": "loremGraph",
-          "interpolation": "natural",
-          "isStacked": true,
-        },
-        Object {
-          "data": Array [
-            Object {
+          },
+          "loremGraph": Object {
+            "color": "",
+            "data": Object {
               "x": 1,
               "xAxisLabel": "1 x axis label",
-              "y": 10,
+              "y": 0,
             },
-          ],
-          "id": "ipsumGraph",
-          "isThreshold": true,
-        },
-      ],
-      "index": 0,
-      "itemsByKey": Object {
-        "ipsumGraph": Object {
-          "color": "",
-          "data": Object {
-            "x": 1,
-            "xAxisLabel": "1 x axis label",
-            "y": 10,
-          },
-        },
-        "loremGraph": Object {
-          "color": "",
-          "data": Object {
-            "x": 1,
-            "xAxisLabel": "1 x axis label",
-            "y": 0,
           },
         },
-      },
-      "x": 1,
-      "y": 0,
-    },
+        "x": 1,
+        "y": 0,
+      }
+    </div>,
     "x": 1,
     "y": null,
   },

diff --git a/src/components/chartArea/__tests__/chartArea.test.js b/src/components/chartArea/__tests__/chartArea.test.js
@@ -296,15 +296,19 @@ describe('ChartArea Component', () => {
     expect(component.instance().getTooltipData()).toMatchSnapshot('getTooltipData:after function');
 
     component.setProps({
-      chartTooltip: propsObj => propsObj.datum
+      chartTooltip: propsObj => <div id="custom-tooltip">{propsObj.datum}</div>
     });
     expect(component.instance().getTooltipData()).toMatchSnapshot('getTooltipData:after node');
 
     // check renderTooltip
-    component.setProps({
-      chartTooltip: propsObj => propsObj.datum
-    });
-    expect(component.instance().renderTooltip()).toMatchSnapshot('renderTooltip: should return a custom tooltip');
+    const renderTooltip = component.instance().renderTooltip();
+    expect(renderTooltip).toMatchSnapshot('renderTooltip: should return a custom tooltip');
+
+    const componentTooltip = shallow(renderTooltip);
+    expect(componentTooltip).toMatchSnapshot('componentTooltip');
+
+    // confirm chart output
+    expect(component).toMatchSnapshot('custom tooltip, post-props chart');
   });
 
   it('should handle custom chart legends', () => {

diff --git a/src/components/chartArea/chartArea.js b/src/components/chartArea/chartArea.js
@@ -286,7 +286,16 @@ class ChartArea extends React.Component {
   }
 
   /**
-   * Return a chart/graph tooltip Victory container component to allow custom tooltips.
+   * ToDo: monitor Victory charts release version increment around Voronoi container attributes.
+   * Future updates could lead to additional unexpected behavior. Victory charts released a patch/fix
+   * around attribute behavior for Voronoi containers. The behavior was already "unexpected" in that there appears
+   * to be a need to provide the "label" attribute when using the "labelComponent" attribute, even if "label" is
+   * just a pass-through. Providing `label={() => ''}` was a work-around, that is now `label={obj => obj}`. See
+   * - https://github.com/FormidableLabs/victory/blob/master/CHANGELOG.md#3436-2020-05-18
+   * - https://github.com/FormidableLabs/victory/pull/1581
+   */
+  /**
+   * Return a chart/graph tooltip Victory container component to allow custom HTML tooltips.
    *
    * @returns {Node}
    */
@@ -351,7 +360,7 @@ class ChartArea extends React.Component {
     return (
       <VictoryVoronoiCursorContainer
         cursorDimension="x"
-        labels={() => ''}
+        labels={obj => obj}
         labelComponent={<FlyoutComponent />}
         voronoiDimension="x"
         voronoiPadding={60}