Implement AreaChartWidget

sampleDurationTimeSeries.json

@@ -0,0 +1,112 @@
+[
+  {
+    "field": "avg(span.duration)",
+    "data": [
+      [1733781600, [{"count": 194.32090152293875}]],
+      [1733783400, [{"count": 147.62552997973896}]],
+      [1733785200, [{"count": 167.3125896486525}]],
+      [1733787000, [{"count": 154.9546418433016}]],
+      [1733788800, [{"count": 177.75841778182115}]],
+      [1733790600, [{"count": 149.62071539059102}]],
+      [1733792400, [{"count": 148.37426947953236}]],
+      [1733794200, [{"count": 151.02028675214447}]],
+      [1733796000, [{"count": 143.50677477334426}]],
+      [1733797800, [{"count": 142.88535217056204}]],
+      [1733799600, [{"count": 146.46517983479544}]],
+      [1733801400, [{"count": 147.25420642999308}]],
+      [1733803200, [{"count": 146.49359730424217}]],
+      [1733805000, [{"count": 142.00870233797465}]],
+      [1733806800, [{"count": 157.48923328095663}]],
+      [1733808600, [{"count": 144.61466487144975}]],
+      [1733810400, [{"count": 156.85201565358486}]],
+      [1733812200, [{"count": 148.59436417696972}]],
+      [1733814000, [{"count": 155.72779310291295}]],
+      [1733815800, [{"count": 148.23792988918535}]],
+      [1733817600, [{"count": 155.66213671702405}]],
+      [1733819400, [{"count": 161.74766100502546}]],
+      [1733821200, [{"count": 171.07824116698762}]],
+      [1733823000, [{"count": 164.33299771174853}]],
+      [1733824800, [{"count": 192.93421512847078}]],
+      [1733826600, [{"count": 180.4593461868112}]],
+      [1733828400, [{"count": 172.99345240577236}]],
+      [1733830200, [{"count": 163.5327323114427}]],
+      [1733832000, [{"count": 182.60959861686507}]],
+      [1733833800, [{"count": 173.0523860965734}]],
+      [1733835600, [{"count": 177.17056856145237}]],
+      [1733837400, [{"count": 169.14652081980321}]],
+      [1733839200, [{"count": 164.87272365787706}]],
+      [1733841000, [{"count": 180.67025513785254}]],
+      [1733842800, [{"count": 206.55308274312813}]],
+      [1733844600, [{"count": 254.2190236395339}]],
+      [1733846400, [{"count": 191.45799652669942}]],
+      [1733848200, [{"count": 168.08625846646902}]],
+      [1733850000, [{"count": 171.19012303216394}]],
+      [1733851800, [{"count": 165.4369895365753}]],
+      [1733853600, [{"count": 179.14458584719685}]],
+      [1733855400, [{"count": 162.45116280726685}]],
+      [1733857200, [{"count": 173.7653410018822}]],
+      [1733859000, [{"count": 158.8766740686512}]],
+      [1733860800, [{"count": 165.27304423302115}]],
+      [1733862600, [{"count": 155.74659761848613}]],
+      [1733864400, [{"count": 164.0378545765358}]],
+      [1733866200, [{"count": 160.07243369487554}]],
+      [1733868000, [{"count": 161.39470890181587}]],
+      [1733869800, [{"count": 0}]]
+    ]
+  },
+  {
+    "field": "avg(messaging.message.receive.latency)",
+    "data": [
+      [1733781600, [{"count": 15.797387473297285}]],
+      [1733783400, [{"count": 6.098785205112891}]],
+      [1733785200, [{"count": 10.023521061981072}]],
+      [1733787000, [{"count": 6.303244308149576}]],
+      [1733788800, [{"count": 11.352363343199878}]],
+      [1733790600, [{"count": 4.845476325747717}]],
+      [1733792400, [{"count": 11.251521855070287}]],
+      [1733794200, [{"count": 4.425860645618586}]],
+      [1733796000, [{"count": 9.989218687466126}]],
+      [1733797800, [{"count": 4.025772756170272}]],
+      [1733799600, [{"count": 9.17541579241641}]],
+      [1733801400, [{"count": 4.2380217489924865}]],
+      [1733803200, [{"count": 8.027566877217474}]],
+      [1733805000, [{"count": 5.295137636393576}]],
+      [1733806800, [{"count": 8.656494836655359}]],
+      [1733808600, [{"count": 5.475662654003712}]],
+      [1733810400, [{"count": 9.793632841698757}]],
+      [1733812200, [{"count": 5.591866790430932}]],
+      [1733814000, [{"count": 9.187478698931766}]],
+      [1733815800, [{"count": 3.779925204205954}]],
+      [1733817600, [{"count": 10.315176397597504}]],
+      [1733819400, [{"count": 5.101678176894567}]],
+      [1733821200, [{"count": 10.405819741300553}]],
+      [1733823000, [{"count": 5.157673142672812}]],
+      [1733824800, [{"count": 13.454678120116997}]],
+      [1733826600, [{"count": 5.633257152519796}]],
+      [1733828400, [{"count": 12.38331484233643}]],
+      [1733830200, [{"count": 6.7168414807525245}]],
+      [1733832000, [{"count": 10.82394699109634}]],
+      [1733833800, [{"count": 6.649313439563898}]],
+      [1733835600, [{"count": 10.957238674362912}]],
+      [1733837400, [{"count": 7.891612896606848}]],
+      [1733839200, [{"count": 9.83684972309017}]],
+      [1733841000, [{"count": 4.472633330313572}]],
+      [1733842800, [{"count": 13.886404361521333}]],
+      [1733844600, [{"count": 9.212753388080626}]],
+      [1733846400, [{"count": 12.213060522650725}]],
+      [1733848200, [{"count": 5.308362659314872}]],
+      [1733850000, [{"count": 12.167955277129803}]],
+      [1733851800, [{"count": 5.95843470061378}]],
+      [1733853600, [{"count": 11.623431372484815}]],
+      [1733855400, [{"count": 7.133246343117738}]],
+      [1733857200, [{"count": 9.91670999332601}]],
+      [1733859000, [{"count": 8.220551566043556}]],
+      [1733860800, [{"count": 10.644324473372116}]],
+      [1733862600, [{"count": 6.380262999155083}]],
+      [1733864400, [{"count": 11.611059631291011}]],
+      [1733866200, [{"count": 4.830427051517974}]],
+      [1733868000, [{"count": 14.018863061817425}]],
+      [1733869800, [{"count": 0}]]
+    ]
+  }
+]

static/app/views/dashboards/widgets/areaChartWidget/areaChartWidget.spec.tsx

@@ -0,0 +1,87 @@
+import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
+
+import {AreaChartWidget} from './areaChartWidget';
+import sampleDurationTimeSeries from './sampleDurationTimeSeries.json';
+
+describe('AreaChartWidget', () => {
+  describe('Layout', () => {
+    it('Renders', () => {
+      render(
+        <AreaChartWidget
+          title="eps()"
+          description="Number of events per second"
+          timeseries={[sampleDurationTimeSeries]}
+          meta={{
+            fields: {
+              'eps()': 'rate',
+            },
+            units: {
+              'eps()': '1/second',
+            },
+          }}
+        />
+      );
+    });
+  });
+
+  describe('Visualization', () => {
+    it('Explains missing data', () => {
+      render(<AreaChartWidget />);
+
+      expect(screen.getByText('No Data')).toBeInTheDocument();
+    });
+  });
+
+  describe('State', () => {
+    it('Shows a loading placeholder', () => {
+      render(<AreaChartWidget isLoading />);
+
+      expect(screen.getByTestId('loading-indicator')).toBeInTheDocument();
+    });
+
+    it('Loading state takes precedence over error state', () => {
+      render(
+        <AreaChartWidget isLoading error={new Error('Parsing error of old value')} />
+      );
+
+      expect(screen.getByTestId('loading-indicator')).toBeInTheDocument();
+    });
+
+    it('Shows an error message', () => {
+      render(<AreaChartWidget error={new Error('Uh oh')} />);
+
+      expect(screen.getByText('Error: Uh oh')).toBeInTheDocument();
+    });
+
+    it('Shows a retry button', async () => {
+      const onRetry = jest.fn();
+
+      render(<AreaChartWidget error={new Error('Oh no!')} onRetry={onRetry} />);
+
+      await userEvent.click(screen.getByRole('button', {name: 'Retry'}));
+      expect(onRetry).toHaveBeenCalledTimes(1);
+    });
+
+    it('Hides other actions if there is an error and a retry handler', () => {
+      const onRetry = jest.fn();
+
+      render(
+        <AreaChartWidget
+          error={new Error('Oh no!')}
+          onRetry={onRetry}
+          actions={[
+            {
+              key: 'Open in Discover',
+              to: '/discover',
+            },
+          ]}
+        />
+      );
+
+      expect(screen.getByRole('button', {name: 'Retry'})).toBeInTheDocument();
+      expect(
+        screen.queryByRole('link', {name: 'Open in Discover'})
+      ).not.toBeInTheDocument();
+    });
+  });
+});