Merge pull request #1833 from carbon-design-system/fix-cardeditor-sho…

…wlegend

fix(cardEditor): the showLegend was in the incorrect place for TimeSeriesCards

src/components/CardEditor/CardEditForm/CardEditFormContent.jsx

@@ -39,14 +39,14 @@ const propTypes = {
         includeZeroOnXaxis: PropTypes.bool,
         includeZeroOnYaxis: PropTypes.bool,
         timeDataSourceId: PropTypes.string,
+        showLegend: PropTypes.bool,
       }),
       PropTypes.shape({
         id: PropTypes.string,
         src: PropTypes.string,
         zoomMax: PropTypes.number,
       }),
     ]),
-    showLegend: PropTypes.bool,
   }),
   /** Callback function when form data changes */
   onChange: PropTypes.func.isRequired,

src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItems/DataSeriesFormContent.jsx

@@ -50,9 +50,9 @@ const propTypes = {
       includeZeroOnXaxis: PropTypes.bool,
       includeZeroOnYaxis: PropTypes.bool,
       timeDataSourceId: PropTypes.string,
+      showLegend: PropTypes.bool,
     }),
     interval: PropTypes.string,
-    showLegend: PropTypes.bool,
   }),
   /* callback when image input value changes (File object) */
   onChange: PropTypes.func.isRequired,

src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItems/DataSeriesFormSettings.jsx

@@ -27,9 +27,9 @@ const propTypes = {
       includeZeroOnXaxis: PropTypes.bool,
       includeZeroOnYaxis: PropTypes.bool,
       timeDataSourceId: PropTypes.string,
+      showLegend: PropTypes.bool,
     }),
     interval: PropTypes.string,
-    showLegend: PropTypes.bool,
   }),
   /** Callback function when form data changes */
   onChange: PropTypes.func.isRequired,

src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormContent.jsx

@@ -20,7 +20,6 @@ const propTypes = {
       zoomMax: PropTypes.number,
     }),
     interval: PropTypes.string,
-    showLegend: PropTypes.bool,
   }),
   /* callback when image input value changes (File object) */
   // onChange: PropTypes.func.isRequired,

src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormSettings.jsx

@@ -29,7 +29,6 @@ const propTypes = {
       background: PropTypes.string,
     }),
     interval: PropTypes.string,
-    showLegend: PropTypes.bool,
   }),
   /** Callback function when form data changes */
   onChange: PropTypes.func.isRequired,

src/components/CardEditor/CardEditForm/CardEditFormSettings.jsx

@@ -27,9 +27,9 @@ const propTypes = {
       includeZeroOnXaxis: PropTypes.bool,
       includeZeroOnYaxis: PropTypes.bool,
       timeDataSourceId: PropTypes.string,
+      showLegend: PropTypes.bool,
     }),
     interval: PropTypes.string,
-    showLegend: PropTypes.bool,
   }),
   /** Callback function when form data changes */
   onChange: PropTypes.func.isRequired,

src/components/CardEditor/CardEditor.jsx

@@ -33,9 +33,9 @@ const propTypes = {
       includeZeroOnXaxis: PropTypes.bool,
       includeZeroOnYaxis: PropTypes.bool,
       timeDataSourceId: PropTypes.string,
+      showLegend: PropTypes.bool,
     }),
     interval: PropTypes.string,
-    showLegend: PropTypes.bool,
   }),
   /** Callback function when user clicks Show Gallery */
   onShowGallery: PropTypes.func.isRequired,

src/components/DashboardEditor/editorUtils.jsx

@@ -73,9 +73,9 @@ export const getDefaultCard = (type, i18n) => {
           includeZeroOnXaxis: true,
           includeZeroOnYaxis: true,
           timeDataSourceId: 'timestamp',
+          showLegend: true,
         },
         interval: 'day',
-        showLegend: true,
       };
     case DASHBOARD_EDITOR_CARD_TYPES.SIMPLE_BAR:
       return {
@@ -280,7 +280,6 @@ const renderTimeSeriesCard = (cardConfig, commonProps) => (
   <TimeSeriesCard
     isEditable
     values={[]}
-    showLegend
     timeRange={cardConfig?.dataSource?.range}
     {...cardConfig}
     {...commonProps}

src/components/TimeSeriesCard/TimeSeriesCard.jsx

@@ -82,6 +82,10 @@ const TimeSeriesCardPropTypes = {
     zoomBar: ZoomBarPropTypes,
     /** Number of grid-line spaces to the left and right of the chart to add white space to. Defaults to 1 */
     addSpaceOnEdges: PropTypes.number,
+    /** whether or not to show a legend at the bottom of the card
+     * if not explicitly stated, the card will show based on the length of the series
+     */
+    showLegend: PropTypes.bool,
   }).isRequired,
   i18n: PropTypes.shape({
     alertDetected: PropTypes.string,
@@ -127,10 +131,6 @@ const TimeSeriesCardPropTypes = {
   showTimeInGMT: PropTypes.bool,
   /** tooltip format pattern that follows the moment formatting patterns */
   tooltipDateFormatPattern: PropTypes.string,
-  /** whether or not to show a legend at the bottom of the card
-   * if not explicitly stated, the card will show based on the length of the series
-   */
-  showLegend: PropTypes.bool,
 };
 
 /**
@@ -291,7 +291,7 @@ const TimeSeriesCard = ({
   isLazyLoading,
   isLoading,
   domainRange,
-  showLegend,
+
   ...others
 }) => {
   const {
@@ -308,6 +308,7 @@ const TimeSeriesCard = ({
       chartType,
       zoomBar,
       showTimeInGMT,
+      showLegend,
       tooltipDateFormatPattern,
       addSpaceOnEdges,
     },
@@ -658,11 +659,11 @@ TimeSeriesCard.defaultProps = {
   content: {
     includeZeroOnXaxis: false,
     includeZeroOnYaxis: false,
+    showLegend: true,
   },
   showTimeInGMT: false,
   domainRange: null,
   tooltipDateFormatPattern: 'L HH:mm:ss',
-  showLegend: null,
 };
 
 export default TimeSeriesCard;

src/components/TimeSeriesCard/TimeSeriesCard.story.jsx

@@ -53,6 +53,7 @@ export const SinglePoint = () => {
           includeZeroOnYaxis: true,
           timeDataSourceId: 'timestamp',
           addSpaceOnEdges: 1,
+          showLegend: true,
         })}
         values={getIntervalChartData(interval, 1, { min: 10, max: 100 }, 100)}
         interval={interval}

src/utils/__tests__/__snapshots__/publicAPI.test.js.snap

@@ -8405,6 +8405,9 @@ Map {
                     ],
                     "type": "arrayOf",
                   },
+                  "showLegend": Object {
+                    "type": "bool",
+                  },
                   "timeDataSourceId": Object {
                     "type": "string",
                   },
@@ -8427,9 +8430,6 @@ Map {
             "interval": Object {
               "type": "string",
             },
-            "showLegend": Object {
-              "type": "bool",
-            },
             "size": Object {
               "type": "string",
             },
@@ -11441,14 +11441,14 @@ Map {
       "content": Object {
         "includeZeroOnXaxis": false,
         "includeZeroOnYaxis": false,
+        "showLegend": true,
       },
       "domainRange": null,
       "i18n": Object {
         "alertDetected": "Alert detected:",
         "noDataLabel": "No data is available for this time range.",
       },
       "locale": "en",
-      "showLegend": null,
       "showTimeInGMT": false,
       "size": "MEDIUM",
       "tooltipDateFormatPattern": "L HH:mm:ss",
@@ -12012,6 +12012,9 @@ Map {
               "isRequired": true,
               "type": "oneOfType",
             },
+            "showLegend": Object {
+              "type": "bool",
+            },
             "timeDataSourceId": Object {
               "type": "string",
             },
@@ -12249,9 +12252,6 @@ Map {
         ],
         "type": "shape",
       },
-      "showLegend": Object {
-        "type": "bool",
-      },
       "showOverflow": [Function],
       "showTimeInGMT": Object {
         "type": "bool",