Fix: Removed shape in y-axis when showShapes is set to false(fixes #2…

…73) (#297)
cerner · Sep 11, 2020 · a6b2e6c · a6b2e6c
1 parent 0ba5527
commit a6b2e6c
Show file tree

Hide file tree

Showing 19 changed files with 606 additions and 133 deletions.
diff --git a/build/iconography/shapesDictionary.js b/build/iconography/shapesDictionary.js
@@ -22,6 +22,8 @@ const CARBON_SHAPES = {
     "S_0010_triangleDown_light.svg": "TRIANGLE_DOWN_LIGHT",
     "S_0011_x_light.svg": "X_LIGHT",
     "S_0012_circleLines.svg": "CIRCLE_HASHED",
+    "S_0013_line.svg": "LINE",
+    "S_0014_dashed_line.svg": "LINE_DASHED",
     "0026_chevronLeft_a.svg": "LEFT_CHEVRON",
     "0026_chevronRight_a.svg": "RIGHT_CHEVRON"
 };

diff --git a/dev/app.js b/dev/app.js
@@ -633,7 +633,8 @@ renderSiteApp(
                             title: "Dynamic Data"
                         },
                         {
-                            pathname: "/panning/line/dynamic-data/updated-legend",
+                            pathname:
+                                "/panning/line/dynamic-data/updated-legend",
                             content: renderLinePanningWithUpdatedLegend,
                             title: "Legend Updated"
                         }

diff --git a/src/main/js/controls/Bar/Bar.js b/src/main/js/controls/Bar/Bar.js
@@ -237,7 +237,8 @@ class Bar extends GraphContent {
         }
         reflowLegend(
             graph.legendSVG,
-            graph.content.filter((bar) => bar.config.key === graphData.key)[0].config,
+            graph.content.filter((bar) => bar.config.key === graphData.key)[0]
+                .config,
             graph,
             eventHandlers
         );

diff --git a/src/main/js/controls/Bubble/Bubble.js b/src/main/js/controls/Bubble/Bubble.js
@@ -198,7 +198,9 @@ class Bubble extends GraphContent {
         }
         reflowLegend(
             graph.legendSVG,
-            graph.content.filter((bubble) => bubble.config.key === graphData.key)[0].config,
+            graph.content.filter(
+                (bubble) => bubble.config.key === graphData.key
+            )[0].config,
             graph,
             eventHandlers
         );

diff --git a/src/main/js/controls/Line/Line.js b/src/main/js/controls/Line/Line.js
@@ -221,7 +221,8 @@ class Line extends GraphContent {
         }
         reflowLegend(
             graph.legendSVG,
-            graph.content.filter((line) => line.config.key === graphData.key)[0].config,
+            graph.content.filter((line) => line.config.key === graphData.key)[0]
+                .config,
             graph,
             eventHandlers
         );

diff --git a/src/main/js/controls/Line/helpers/helpers.js b/src/main/js/controls/Line/helpers/helpers.js
@@ -346,11 +346,11 @@ const processDataPoints = (graphConfig, dataTarget) => {
     dataTarget.style = {
         strokeDashArray: getStrokeDashArray(dataTarget.style)
     };
-    dataTarget.legendOptions = getDefaultLegendOptions(graphConfig, dataTarget);
     dataTarget.showShapes = getDefaultValue(
         dataTarget.showShapes,
         graphConfig.showShapes
     );
+    dataTarget.legendOptions = getDefaultLegendOptions(graphConfig, dataTarget);
 
     graphConfig.shownTargets.push(dataTarget.key);
     dataTarget.internalValuesSubset = dataTarget.values.map((value) => ({

diff --git a/src/main/js/controls/PairedResult/PairedResult.js b/src/main/js/controls/PairedResult/PairedResult.js
@@ -168,7 +168,8 @@ class PairedResult extends GraphContent {
                         key: `${this.dataTarget.key}_${type}`,
                         label: getValue(this.dataTarget.label, type),
                         color: getValue(this.dataTarget.color, type),
-                        shape: getValue(this.dataTarget.shape, type)
+                        shape: getValue(this.dataTarget.shape, type),
+                        values: this.dataTarget.values
                     },
                     graph.axesLabelShapeGroup[this.config.yAxis]
                 );
@@ -289,7 +290,12 @@ class PairedResult extends GraphContent {
             if (label && label.display) {
                 reflowLegend(
                     graph.legendSVG,
-                    constructLegendLabels(graph.contentConfig.filter((pairedResult) => pairedResult.key === graphData.key)[0], type),
+                    constructLegendLabels(
+                        graph.contentConfig.filter(
+                            (pairedResult) => pairedResult.key === graphData.key
+                        )[0],
+                        type
+                    ),
                     graph,
                     eventHandlers
                 );

diff --git a/src/main/js/controls/Scatter/Scatter.js b/src/main/js/controls/Scatter/Scatter.js
@@ -199,7 +199,9 @@ class Scatter extends GraphContent {
         }
         reflowLegend(
             graph.legendSVG,
-            graph.content.filter((scatter) => scatter.config.key === graphData.key)[0].config,
+            graph.content.filter(
+                (scatter) => scatter.config.key === graphData.key
+            )[0].config,
             graph,
             eventHandlers
         );

diff --git a/src/main/js/controls/Scatter/helpers/helpers.js b/src/main/js/controls/Scatter/helpers/helpers.js
@@ -209,7 +209,7 @@ const processDataPoints = (graphConfig, dataTarget) => {
     };
     // Update the interpolation type
     dataTarget.interpolationType = getInterpolationType(dataTarget.type);
-
+    dataTarget.showShapes = true;
     graphConfig.shownTargets.push(dataTarget.key);
     dataTarget.internalValuesSubset = dataTarget.values.map((value) => ({
         onClick: dataTarget.onClick,

diff --git a/src/main/js/core/Shape/shapeDefinitions.js b/src/main/js/core/Shape/shapeDefinitions.js
@@ -327,4 +327,34 @@ export const RIGHT_CHEVRON = {
     path: { d: "M37.7 24L14.2 48l-3.9-3.8L30 24 10.3 3.8 14.2 0z" },
     options: { x: -6, y: -6, scale: 0.25 }
 };
+
+/**
+ * The S_0013_line.svg SVG file as an object.
+ *
+ * @type {{path: {d: string}, options: {x: number, y: number, scale: number}}}
+ */
+export const LINE = {
+    path: { d: "M15 0h48v5H10V0" },
+    options: { x: -1, y: -1, scale: 0.25 }
+};
+
+/**
+ * The S_0014_dashed_line.svg SVG file as an object.
+ *
+ * @type {{path: {d: string}, options: {x: number, y: number, scale: number}}}
+ */
+export const LINE_DASHED = {
+    path: [
+        {
+            d: "M-22 0h48v7H8V0"
+        },
+        {
+            d: "M-28 0h80v7H35V0"
+        },
+        {
+            d: "M-18 0h80v7H80V0"
+        }
+    ],
+    options: { x: -1, y: -1, scale: 0.2 }
+};
 /* eslint-enable max-len */
diff --git a/src/main/js/helpers/label.js b/src/main/js/helpers/label.js
@@ -24,6 +24,7 @@ import {
 import constants, { SHAPES } from "./constants";
 import styles from "./styles";
 import utils from "./utils";
+import { LINE, LINE_DASHED } from "../core/Shape/shapeDefinitions";
 
 /**
  * Informs if a label needs truncation or otherwise
@@ -120,18 +121,44 @@ const renderPopup = (axisType) => {
  * @param {Array} dataTarget - Data points
  * @returns {Selection} d3 path for label shape container
  */
-const loadLabelShape = (shapeContainerPath, dataTarget) =>
-    shapeContainerPath.append(() =>
-        new Shape(dataTarget.shape || SHAPES.CIRCLE).getShapeElement(
-            getDefaultSVGProps({
-                svgStyles: `fill: ${getColorForTarget(dataTarget)};`,
-                transformFn: (scale) => `scale(${scale})`,
-                a11yAttributes: {
-                    "aria-describedby": dataTarget.key
-                }
-            })
-        )
-    );
+const loadLabelShape = (shapeContainerPath, dataTarget) => {
+    if (dataTarget.values.length > 0) {
+        if (dataTarget.showShapes || dataTarget.showShapes === undefined) {
+            return shapeContainerPath.append(() =>
+                new Shape(dataTarget.shape || SHAPES.CIRCLE).getShapeElement(
+                    getDefaultSVGProps({
+                        svgStyles: `fill: ${getColorForTarget(dataTarget)};`,
+                        transformFn: (scale) => `scale(${scale})`,
+                        a11yAttributes: {
+                            "aria-describedby": dataTarget.key
+                        }
+                    })
+                )
+            );
+        } else {
+            shapeContainerPath.append(() =>
+                new Shape(
+                    dataTarget.style.strokeDashArray === "0"
+                        ? LINE
+                        : LINE_DASHED
+                ).getShapeElement(
+                    getDefaultSVGProps({
+                        svgStyles: `fill: ${getColorForTarget(
+                            dataTarget
+                        )}; stroke-dasharray: "${
+                            dataTarget.style.strokeDashArray
+                        }"`,
+                        transformFn: (scale) => `scale(${scale})`,
+                        a11yAttributes: {
+                            "aria-describedby": dataTarget.key
+                        }
+                    })
+                )
+            );
+            return shapeContainerPath;
+        }
+    }
+};
 /**
  * Returns the amount of shapes within a shape container
  *

diff --git a/src/main/js/helpers/legend.js b/src/main/js/helpers/legend.js
@@ -139,8 +139,10 @@ const loadLegendItem = (legendSVG, t, config, eventHandlers) => {
 const processLegendOptions = (buttonPath, input) => {
     if (input.legendOptions) {
         // Create a legend icon only if the showShape is true
-        if (input.legendOptions.showShape) {
-            createLegendIcon(buttonPath, input);
+        if (input.showShapes || input.showShapes === undefined) {
+            if (input.legendOptions.showShape) {
+                createLegendIcon(buttonPath, input);
+            }
         }
         if (input.legendOptions.showLine) {
             createLegendLine(buttonPath, input);
@@ -392,19 +394,34 @@ const loadPieLegendItem = (legendSVG, dataTarget, { hoverHandler }, config) => {
 const getDefaultLegendOptions = (graphConfig, dataTarget) => {
     const legendOptions = getDefaultValue(dataTarget.legendOptions, {
         showShape: true,
-        showLine: false,
+        showLine: dataTarget.showShapes === false,
         showElement: true
     });
-    legendOptions.showShape = getDefaultValue(legendOptions.showShape, true);
+    legendOptions.showShape =
+        dataTarget.showShapes !== false
+            ? getDefaultValue(legendOptions.showShape, true)
+            : false;
     legendOptions.showLine = getDefaultValue(legendOptions.showLine, false);
     legendOptions.showElement = getDefaultValue(
         legendOptions.showElement,
         true
     );
     legendOptions.style = getDefaultValue(legendOptions.style, {});
-    legendOptions.style = {
-        strokeDashArray: getStrokeDashArray(legendOptions.style)
-    };
+
+
+    if (legendOptions.style.strokeDashArray) {
+        legendOptions.style = {
+            strokeDashArray: getStrokeDashArray(legendOptions.style)
+        };
+    } else {
+        if (dataTarget.showShapes === false) {
+            legendOptions.style.strokeDashArray = dataTarget.style.strokeDashArray;
+        } else {
+            legendOptions.style = {
+                strokeDashArray: getStrokeDashArray(legendOptions.style)
+            };
+        }
+    }
 
     return legendOptions;
 };
@@ -476,10 +493,16 @@ const reflowLegend = (legendSVG, legend, graph, eventHandlers) => {
                 return eventHandlers.clickHandler(this, legend);
             })
             .on("mouseenter", () =>
-                eventHandlers.hoverHandler(legend, constants.HOVER_EVENT.MOUSE_ENTER)
+                eventHandlers.hoverHandler(
+                    legend,
+                    constants.HOVER_EVENT.MOUSE_ENTER
+                )
             )
             .on("mouseleave", () =>
-                eventHandlers.hoverHandler(legend, constants.HOVER_EVENT.MOUSE_EXIT)
+                eventHandlers.hoverHandler(
+                    legend,
+                    constants.HOVER_EVENT.MOUSE_EXIT
+                )
             );
     } else {
         // set the click and hover handler to null, when legend doesnot have any value

diff --git a/src/test/unit/controls/Bar/BarPanning-spec.js b/src/test/unit/controls/Bar/BarPanning-spec.js
@@ -75,7 +75,7 @@ describe("Bar - Panning", () => {
         });
         describe("when key matches", () => {
             describe("label is not passed", () => {
-                 it("should update dynamic data and retain label", () => {
+                it("should update dynamic data and retain label", () => {
                     const panData = {
                         key: "uid_1",
                         values: [
@@ -95,17 +95,35 @@ describe("Bar - Panning", () => {
                     );
                     expect(barContent.length).toEqual(3);
                     graphDefault.reflow(panData);
-                    barContent = fetchAllElementsByClass(barGraphContainer, styles.bar);
+                    barContent = fetchAllElementsByClass(
+                        barGraphContainer,
+                        styles.bar
+                    );
                     expect(barContent.length).toEqual(2);
-                    const axisLabelX = fetchElementByClass(barGraphContainer, styles.axisLabelX);
-                    const axisLabelY = fetchElementByClass(barGraphContainer, styles.axisLabelY);
-                    const axisLabelY2 = fetchElementByClass(barGraphContainer, styles.axisLabelY2);
-                    expect(axisLabelX.querySelector("text").textContent).toBe("X Label");
-                    expect(axisLabelY.querySelector("text").textContent).toBe("Y Label");
-                    expect(axisLabelY2.querySelector("text").textContent).toBe("Y2 Label");
-                 });
-             });
-             describe("when label is passed", () => {
+                    const axisLabelX = fetchElementByClass(
+                        barGraphContainer,
+                        styles.axisLabelX
+                    );
+                    const axisLabelY = fetchElementByClass(
+                        barGraphContainer,
+                        styles.axisLabelY
+                    );
+                    const axisLabelY2 = fetchElementByClass(
+                        barGraphContainer,
+                        styles.axisLabelY2
+                    );
+                    expect(axisLabelX.querySelector("text").textContent).toBe(
+                        "X Label"
+                    );
+                    expect(axisLabelY.querySelector("text").textContent).toBe(
+                        "Y Label"
+                    );
+                    expect(axisLabelY2.querySelector("text").textContent).toBe(
+                        "Y2 Label"
+                    );
+                });
+            });
+            describe("when label is passed", () => {
                 it("should update the label during reflow", () => {
                     const panData = {
                         key: "uid_1",
@@ -124,14 +142,29 @@ describe("Bar - Panning", () => {
                         y2Label: "updated y2Label"
                     };
                     graphDefault.reflow(panData);
-                    const axisLabelX = fetchElementByClass(barGraphContainer, styles.axisLabelX);
-                    const axisLabelY = fetchElementByClass(barGraphContainer, styles.axisLabelY);
-                    const axisLabelY2 = fetchElementByClass(barGraphContainer, styles.axisLabelY2);
-                    expect(axisLabelX.querySelector("text").textContent).toBe("updated xLabel");
-                    expect(axisLabelY.querySelector("text").textContent).toBe("updated yLabel");
-                    expect(axisLabelY2.querySelector("text").textContent).toBe("updated y2Label");
+                    const axisLabelX = fetchElementByClass(
+                        barGraphContainer,
+                        styles.axisLabelX
+                    );
+                    const axisLabelY = fetchElementByClass(
+                        barGraphContainer,
+                        styles.axisLabelY
+                    );
+                    const axisLabelY2 = fetchElementByClass(
+                        barGraphContainer,
+                        styles.axisLabelY2
+                    );
+                    expect(axisLabelX.querySelector("text").textContent).toBe(
+                        "updated xLabel"
+                    );
+                    expect(axisLabelY.querySelector("text").textContent).toBe(
+                        "updated yLabel"
+                    );
+                    expect(axisLabelY2.querySelector("text").textContent).toBe(
+                        "updated y2Label"
+                    );
                 });
-             })
+            });
         });
         it("Dynamic Data is not updated when key does not match", () => {
             const panData = {
@@ -238,7 +271,10 @@ describe("Bar - Panning", () => {
                 expect(legendItem.getAttribute("aria-current")).toBe("true");
                 expect(barContent.length).toEqual(0);
                 graphDefault.reflow(panData);
-                barContent = fetchAllElementsByClass(barGraphContainer, styles.bar);
+                barContent = fetchAllElementsByClass(
+                    barGraphContainer,
+                    styles.bar
+                );
                 expect(barContent.length).toEqual(2);
                 expect(legendItem.getAttribute("aria-disabled")).toBe("false");
                 expect(legendItem.getAttribute("aria-current")).toBe("true");