fix(chartArea,graphCard): use dash instead of threshold

* convert dash legend symbol, match graph strokeWidth
RedHatInsights · Jan 14, 2020 · d4d3466 · d4d3466
1 parent 4616959
commit d4d3466
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 4 deletions.
diff --git a/src/components/chartArea/__tests__/__snapshots__/chartArea.test.js.snap b/src/components/chartArea/__tests__/__snapshots__/chartArea.test.js.snap
@@ -1101,6 +1101,38 @@ Object {
 }
 `;
 
+exports[`ChartArea Component should handle variation in passed properties with specific methods: getChartLegend: custom legend symbol 1`] = `
+Object {
+  "legendComponent": <ChartLegend
+    borderPadding={
+      Object {
+        "top": 20,
+      }
+    }
+  />,
+  "legendData": Array [
+    Object {
+      "name": "Arma virumque cano",
+      "symbol": Object {},
+    },
+    Object {
+      "name": "Arma virumque cano",
+      "symbol": Object {
+        "type": "threshold",
+      },
+    },
+    Object {
+      "name": "Hello world",
+      "symbol": Object {
+        "type": "dash",
+      },
+    },
+  ],
+  "legendOrientation": "horizontal",
+  "legendPosition": "bottom-left",
+}
+`;
+
 exports[`ChartArea Component should handle variation in passed properties with specific methods: getChartTicks 1`] = `
 Object {
   "isXAxisTicks": true,

diff --git a/src/components/chartArea/__tests__/chartArea.test.js b/src/components/chartArea/__tests__/chartArea.test.js
@@ -250,12 +250,14 @@ describe('ChartArea Component', () => {
           }
         ],
         legendLabel: 'Hello world',
+        legendSymbolType: 'dash',
         xAxisLabelUseDataSet: true
       }
     ];
     component.setProps({
       dataSets: [...props.dataSets, ...additionalDataSet]
     });
+    expect(component.instance().getChartLegend()).toMatchSnapshot('getChartLegend: custom legend symbol');
     expect(component.instance().setChartTicks()).toMatchSnapshot('setChartTicks: xAxisLabelUseDataSet');
 
     // check getContainerComponent

diff --git a/src/components/chartArea/chartArea.js b/src/components/chartArea/chartArea.js
@@ -209,8 +209,10 @@ class ChartArea extends React.Component {
       if (dataSet.legendLabel) {
         const legendDataSettings = { symbol: {}, name: dataSet.legendLabel };
 
-        if (dataSet.isThreshold) {
-          legendDataSettings.symbol = { type: 'threshold' };
+        if (dataSet.legendSymbolType) {
+          legendDataSettings.symbol.type = dataSet.legendSymbolType;
+        } else if (dataSet.isThreshold) {
+          legendDataSettings.symbol.type = 'threshold';
         }
 
         if (dataSet.themeColor) {
@@ -273,6 +275,14 @@ class ChartArea extends React.Component {
         dataColorStroke.data.stroke = dataSet.stroke;
       }
 
+      if (dataSet.strokeWidth) {
+        dataColorStroke.data.strokeWidth = dataSet.strokeWidth;
+      }
+
+      if (dataSet.strokeDasharray) {
+        dataColorStroke.data.strokeDasharray = dataSet.strokeDasharray;
+      }
+
       return (
         <ChartThreshold
           animate={dataSet.animate || false}
@@ -375,11 +385,14 @@ ChartArea.propTypes = {
       animate: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
       fill: PropTypes.string,
       stroke: PropTypes.string,
+      strokeWidth: PropTypes.number,
+      strokeDasharray: PropTypes.string,
       themeColor: PropTypes.string,
       themeVariant: PropTypes.string,
       id: PropTypes.string,
       interpolation: PropTypes.string,
       legendLabel: PropTypes.string,
+      legendSymbolType: PropTypes.string,
       style: PropTypes.object,
       isStacked: PropTypes.bool,
       isThreshold: PropTypes.bool,

diff --git a/src/components/graphCard/graphCard.js b/src/components/graphCard/graphCard.js
@@ -50,6 +50,10 @@ class GraphCard extends React.Component {
     }
   };
 
+  /**
+   * FixMe: custom use of dash over threshold vs updating PF Charts legend threshold symbol
+   * @patternfly/react-tokens chart_threshold_stroke_dash_array and chart_threshold_stroke_Width
+   */
   renderChart() {
     const { filterGraphData, graphData, graphGranularity, t, translateProduct } = this.props;
 
@@ -95,7 +99,10 @@ class GraphCard extends React.Component {
             duration: 100,
             onLoad: { duration: 100 }
           };
+          tempFiltered.legendSymbolType = 'dash';
           tempFiltered.stroke = chartColorGreenDark.value;
+          tempFiltered.strokeDasharray = '4,3';
+          tempFiltered.strokeWidth = 2.5;
         }
 
         return tempFiltered;

diff --git a/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap b/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap
@@ -30,8 +30,8 @@ msgstr \\"\\"
 msgid \\"curiosity-graph.dropdownMonthly\\"
 msgstr \\"\\"
 
-#: src/components/graphCard/graphCard.js:125
-#: src/components/graphCard/graphCard.js:129
+#: src/components/graphCard/graphCard.js:132
+#: src/components/graphCard/graphCard.js:136
 msgid \\"curiosity-graph.dropdownPlaceholder\\"
 msgstr \\"\\"