feat(dashboards): Basic BarChartWidget (#83427)

A barebones `BarChartWidget`, just enough to start working with it in an
Explore context. Much more later, this just sets up some basic files.

Author: gggritso

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

@@ -2,6 +2,11 @@ import LineSeries from 'sentry/components/charts/series/lineSeries';
 
 import type {TimeseriesData} from '../common/types';
 
+/**
+ *
+ * @param timeserie
+ * @param complete Whether this series is fully ingested and processed data, or it's still behind the ingestion delay
+ */
 export function AreaChartWidgetSeries(timeserie: TimeseriesData, complete?: boolean) {
   return complete
     ? LineSeries({

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

@@ -0,0 +1,80 @@
+import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
+
+import {BarChartWidget} from './barChartWidget';
+import sampleLatencyTimeSeries from './sampleLatencyTimeSeries.json';
+import sampleSpanDurationTimeSeries from './sampleSpanDurationTimeSeries.json';
+
+describe('BarChartWidget', () => {
+  describe('Layout', () => {
+    it('Renders', () => {
+      render(
+        <BarChartWidget
+          title="eps()"
+          description="Number of events per second"
+          timeseries={[sampleLatencyTimeSeries, sampleSpanDurationTimeSeries]}
+        />
+      );
+    });
+  });
+
+  describe('Visualization', () => {
+    it('Explains missing data', () => {
+      render(<BarChartWidget />);
+
+      expect(screen.getByText('No Data')).toBeInTheDocument();
+    });
+  });
+
+  describe('State', () => {
+    it('Shows a loading placeholder', () => {
+      render(<BarChartWidget isLoading />);
+
+      expect(screen.getByTestId('loading-indicator')).toBeInTheDocument();
+    });
+
+    it('Loading state takes precedence over error state', () => {
+      render(
+        <BarChartWidget isLoading error={new Error('Parsing error of old value')} />
+      );
+
+      expect(screen.getByTestId('loading-indicator')).toBeInTheDocument();
+    });
+
+    it('Shows an error message', () => {
+      render(<BarChartWidget error={new Error('Uh oh')} />);
+
+      expect(screen.getByText('Error: Uh oh')).toBeInTheDocument();
+    });
+
+    it('Shows a retry button', async () => {
+      const onRetry = jest.fn();
+
+      render(<BarChartWidget 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(
+        <BarChartWidget
+          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();
+    });
+  });
+});

static/app/views/dashboards/widgets/barChartWidget/barChartWidget.stories.tsx

@@ -0,0 +1,96 @@
+import {Fragment} from 'react';
+import styled from '@emotion/styled';
+import moment from 'moment-timezone';
+
+import JSXNode from 'sentry/components/stories/jsxNode';
+import SizingWindow from 'sentry/components/stories/sizingWindow';
+import storyBook from 'sentry/stories/storyBook';
+import type {DateString} from 'sentry/types/core';
+import usePageFilters from 'sentry/utils/usePageFilters';
+
+import type {TimeseriesData} from '../common/types';
+
+import {BarChartWidget} from './barChartWidget';
+import sampleLatencyTimeSeries from './sampleLatencyTimeSeries.json';
+import sampleSpanDurationTimeSeries from './sampleSpanDurationTimeSeries.json';
+
+export default storyBook(BarChartWidget, story => {
+  story('Getting Started', () => {
+    return (
+      <Fragment>
+        <p>
+          <JSXNode name="BarChartWidget" /> is a Dashboard Widget Component. It displays a
+          timeseries chart with multiple timeseries, and the timeseries are stacked and
+          discontinuous. In all other ways, it behaves like{' '}
+          <JSXNode name="AreaChartWidget" />
+        </p>
+        <p>
+          <em>NOTE:</em> Prefer <JSXNode name="LineChartWidget" /> and{' '}
+          <JSXNode name="AreaChartWidget" /> for timeseries visualizations! This should be
+          used for discontinuous categorized data.
+        </p>
+      </Fragment>
+    );
+  });
+
+  story('Visualization', () => {
+    const {selection} = usePageFilters();
+    const {datetime} = selection;
+    const {start, end} = datetime;
+
+    const latencyTimeSeries = toTimeSeriesSelection(
+      sampleLatencyTimeSeries as unknown as TimeseriesData,
+      start,
+      end
+    );
+
+    const spanDurationTimeSeries = toTimeSeriesSelection(
+      sampleSpanDurationTimeSeries as unknown as TimeseriesData,
+      start,
+      end
+    );
+
+    return (
+      <Fragment>
+        <p>
+          The visualization of <JSXNode name="BarChartWidget" /> is a stacked bar chart.
+          It has some bells and whistles including automatic axes labels, and a hover
+          tooltip. Like other widgets, it automatically fills the parent element.
+        </p>
+        <SmallSizingWindow>
+          <BarChartWidget
+            title="Duration Breakdown"
+            description="Explains what proportion of total duration is taken up by latency vs. span duration"
+            timeseries={[latencyTimeSeries, spanDurationTimeSeries]}
+          />
+        </SmallSizingWindow>
+      </Fragment>
+    );
+  });
+});
+
+const SmallSizingWindow = styled(SizingWindow)`
+  width: 50%;
+  height: 300px;
+`;
+
+function toTimeSeriesSelection(
+  timeSeries: TimeseriesData,
+  start: DateString | null,
+  end: DateString | null
+): TimeseriesData {
+  return {
+    ...timeSeries,
+    data: timeSeries.data.filter(datum => {
+      if (start && moment(datum.timestamp).isBefore(moment.utc(start))) {
+        return false;
+      }
+
+      if (end && moment(datum.timestamp).isAfter(moment.utc(end))) {
+        return false;
+      }
+
+      return true;
+    }),
+  };
+}

static/app/views/dashboards/widgets/barChartWidget/barChartWidget.tsx

@@ -0,0 +1,13 @@
+import {
+  TimeSeriesWidget,
+  type TimeSeriesWidgetProps,
+} from '../timeSeriesWidget/timeSeriesWidget';
+
+import {BarChartWidgetSeries} from './barChartWidgetSeries';
+
+export interface BarChartWidgetProps
+  extends Omit<TimeSeriesWidgetProps, 'SeriesConstructor'> {}
+
+export function BarChartWidget(props: BarChartWidgetProps) {
+  return <TimeSeriesWidget {...props} SeriesConstructor={BarChartWidgetSeries} />;
+}

static/app/views/dashboards/widgets/barChartWidget/barChartWidgetSeries.tsx

@@ -0,0 +1,39 @@
+import BarSeries from 'sentry/components/charts/series/barSeries';
+
+import type {TimeseriesData} from '../common/types';
+
+/**
+ *
+ * @param timeserie
+ * @param complete Whether this series is fully ingested and processed data, or it's still behind the ingestion delay
+ */
+export function BarChartWidgetSeries(timeserie: TimeseriesData, complete?: boolean) {
+  return complete
+    ? BarSeries({
+        name: timeserie.field,
+        color: timeserie.color,
+        stack: 'complete',
+        animation: false,
+        itemStyle: {
+          color: timeserie.color,
+          opacity: 1.0,
+        },
+        data: timeserie.data.map(datum => {
+          return [datum.timestamp, datum.value];
+        }),
+      })
+    : BarSeries({
+        name: timeserie.field,
+        color: timeserie.color,
+        stack: 'incomplete',
+        animation: false,
+        data: timeserie.data.map(datum => {
+          return [datum.timestamp, datum.value];
+        }),
+        itemStyle: {
+          color: timeserie.color,
+          opacity: 0.8,
+        },
+        silent: true,
+      });
+}