feat(barchartcard): add maximum data points field

packages/react/src/components/CardEditor/CardEditForm/CardEditFormItems/BarChartCardFormItems/BarChartCardFormSettings.jsx

@@ -33,6 +33,7 @@ const propTypes = {
       includeZeroOnYaxis: PropTypes.bool,
       timeDataSourceId: PropTypes.string,
       showLegend: PropTypes.bool,
+      maximumDataPoints: PropTypes.number,
     }),
     interval: PropTypes.string,
   }),
@@ -50,6 +51,7 @@ const propTypes = {
     autoLabel: PropTypes.string,
     horizontal: PropTypes.string,
     vertical: PropTypes.string,
+    maximumDataPoints: PropTypes.string,
   }),
 };
 
@@ -67,6 +69,7 @@ const defaultProps = {
     autoLabel: 'Auto',
     horizontal: 'Horizontal',
     vertical: 'Vertical',
+    maximumDataPoints: 'Maximum data points',
   },
 };
 
@@ -153,6 +156,23 @@ const BarChartCardFormSettings = ({ cardConfig, onChange, i18n }) => {
           value={content?.precision}
         />
       </div>
+      <div className={`${baseClassName}--input`}>
+        <TextInput
+          id={`${id}_maximum_data_points`}
+          labelText={mergedI18n.maximumDataPoints}
+          light
+          type="number"
+          onChange={(evt) => {
+            const maximumDataPointsString = evt.target.value;
+            const maximumDataPoints = Number.parseInt(maximumDataPointsString, 10);
+            onChange({
+              ...cardConfig,
+              content: { ...cardConfig.content, maximumDataPoints },
+            });
+          }}
+          value={content?.maximumDataPoints}
+        />
+      </div>
     </>
   );
 };

packages/react/src/components/CardEditor/CardEditForm/CardEditFormItems/BarChartCardFormItems/BarChartCardFormSettings.test.jsx

@@ -85,4 +85,23 @@ describe('BarChartCardFormSettings', () => {
       type: 'BAR',
     });
   });
+  it('handles maximum data points onChange', async () => {
+    render(<BarChartCardFormSettings cardConfig={{ ...barChartConfig }} onChange={mockOnChange} />);
+
+    await userEvent.type(screen.getByText('Maximum data points'), '200');
+
+    expect(mockOnChange).toHaveBeenCalledWith({
+      content: {
+        series: [{ color: 'red', dataSourceId: 'temperature', label: 'Temperature' }],
+        type: 'SIMPLE',
+        xLabel: 'Time',
+        yLabel: 'Temperature (˚F)',
+        maximumDataPoints: 200,
+      },
+      id: 'BarChart',
+      size: 'MEDIUM',
+      title: 'BarChartCard',
+      type: 'BAR',
+    });
+  });
 });

packages/react/src/components/CardEditor/CardEditor.story.jsx

@@ -589,3 +589,49 @@ export const ForV2TimeSeries = () => (
 ForV2TimeSeries.storyName = 'for V2 TimeSeries';
 
 ForV2TimeSeries.storyName = 'for V2 TimeSeries';
+
+export const ForBarChart = () => (
+  <div style={{ position: 'absolute', right: 0, height: 'calc(100vh - 6rem)' }}>
+    <CardEditor
+      cardConfig={object('cardConfig', {
+        id: 'bar-chart',
+        title: 'bar-chart-card',
+        size: 'MEDIUMWIDE',
+        type: 'BAR',
+        content: {
+          series: [
+            {
+              dataSourceId: 'torque max',
+              label: 'Torque Max',
+              color: '#6929c4',
+            },
+            {
+              dataSourceId: 'torque mean',
+              label: 'Torque Mean',
+              color: '#1192e8',
+            },
+          ],
+          layout: 'VERTICAL',
+          xLabel: 'Time',
+          yLabel: 'Temperature',
+          timeDataSourceId: 'timestamp',
+        },
+        interval: 'day',
+      })}
+      errors={{}}
+      onShowGallery={action('onShowGallery')}
+      onChange={action('onChange')}
+      actions={commonActions}
+      dataItems={[
+        { dataItemId: 'torque', dataSourceId: 'torque_max', label: 'Torque Max' },
+        { dataItemId: 'torque', dataSourceId: 'torque_min', label: 'Torque Min' },
+        { dataItemId: 'torque', dataSourceId: 'torque_mean', label: 'Torque Mean' },
+        { dataItemId: 'temperature', dataSourceId: 'temperature', label: 'Temperature' },
+        { dataItemId: 'pressure', dataSourceId: 'pressure', label: 'Pressure' },
+      ]}
+      onAddCard={action('onAddCard')}
+    />
+  </div>
+);
+
+ForBarChart.storyName = 'for BarChart';