diff --git a/static/app/views/dashboards/widgetCard/chart.tsx b/static/app/views/dashboards/widgetCard/chart.tsx index 97fc7b35ed0fea..92d75212ee4ea2 100644 --- a/static/app/views/dashboards/widgetCard/chart.tsx +++ b/static/app/views/dashboards/widgetCard/chart.tsx @@ -307,7 +307,7 @@ class WidgetCardChart extends Component { return ( - + {this.bigNumberComponent({tableResults, loading})} @@ -579,10 +579,12 @@ const LoadingPlaceholder = styled(({className}: PlaceholderProps) => ( background-color: ${p => p.theme.surface300}; `; -const BigNumberResizeWrapper = styled('div')` +const BigNumberResizeWrapper = styled('div')<{noPadding?: boolean}>` flex-grow: 1; overflow: hidden; position: relative; + padding: ${p => + p.noPadding ? `0` : `0${space(1)} ${space(3)} ${space(3)} ${space(3)}`}; `; const BigNumber = styled('div')` @@ -593,7 +595,6 @@ const BigNumber = styled('div')` min-height: 0; font-size: 32px; color: ${p => p.theme.headingColor}; - padding: ${space(1)} ${space(3)} ${space(3)} ${space(3)}; * { text-align: left !important; diff --git a/static/app/views/dashboards/widgetCard/index.tsx b/static/app/views/dashboards/widgetCard/index.tsx index 8634d0e1d41d3c..f4bca4a68582d8 100644 --- a/static/app/views/dashboards/widgetCard/index.tsx +++ b/static/app/views/dashboards/widgetCard/index.tsx @@ -14,7 +14,6 @@ import type {PageFilters} from 'sentry/types/core'; import type {Series} from 'sentry/types/echarts'; import type {WithRouterProps} from 'sentry/types/legacyReactRouter'; import type {Confidence, Organization} from 'sentry/types/organization'; -import {defined} from 'sentry/utils'; import {getFormattedDate} from 'sentry/utils/dates'; import type {TableDataWithTitle} from 'sentry/utils/discover/discoverQuery'; import type {AggregationOutputType} from 'sentry/utils/discover/fields'; @@ -37,14 +36,11 @@ import type {DashboardFilters, Widget} from '../types'; import {DisplayType, OnDemandExtractionState, WidgetType} from '../types'; import {DEFAULT_RESULTS_LIMIT} from '../widgetBuilder/utils'; import type WidgetLegendSelectionState from '../widgetLegendSelectionState'; -import {BigNumberWidget} from '../widgets/bigNumberWidget/bigNumberWidget'; -import type {Meta} from '../widgets/common/types'; import {WidgetFrame} from '../widgets/common/widgetFrame'; import {WidgetViewerContext} from '../widgetViewer/widgetViewerContext'; import {useDashboardsMEPContext} from './dashboardsMEPContext'; import {getMenuOptions, useIndexedEventsWarning} from './widgetCardContextMenu'; -import {WidgetCardDataLoader} from './widgetCardDataLoader'; const SESSION_DURATION_INGESTION_STOP_DATE = new Date('2023-01-12'); @@ -239,97 +235,42 @@ function WidgetCard(props: Props) { } disabled={Number(props.index) !== 0} > - {widget.displayType === DisplayType.BIG_NUMBER ? ( - + - {({loading, errorMessage, tableResults}) => { - // Big Number widgets only support one query, so we take the first query's results and meta - const tableData = tableResults?.[0]?.data; - const tableMeta = tableResults?.[0]?.meta as Meta | undefined; - const fields = Object.keys(tableMeta?.fields ?? {}); - - let field = fields[0]!; - let selectedField = field; - - if (defined(widget.queries[0]!.selectedAggregate)) { - const index = widget.queries[0]!.selectedAggregate; - selectedField = widget.queries[0]!.aggregates[index]!; - if (fields.includes(selectedField)) { - field = selectedField; - } - } - - const value = tableData?.[0]?.[selectedField]; - - return ( - - ); - }} - - ) : ( - - - - )} + shouldResize={shouldResize} + onLegendSelectChanged={onLegendSelectChanged} + legendOptions={legendOptions} + widgetLegendState={widgetLegendState} + showConfidenceWarning={showConfidenceWarning} + minTableColumnWidth={minTableColumnWidth} + /> + );