12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091 |
- import {useState} from 'react';
- import {useTheme} from '@emotion/react';
- import styled from '@emotion/styled';
- import type {Location} from 'history';
- import {PerformanceLayoutBodyRow} from 'sentry/components/performance/layouts';
- import {space} from 'sentry/styles/space';
- import type EventView from 'sentry/utils/discover/eventView';
- import {usePerformanceDisplayType} from 'sentry/utils/performance/contexts/performanceDisplayContext';
- import type {ProjectPerformanceType} from 'sentry/views/performance/utils';
- import {getChartSetting} from '../utils';
- import type {PerformanceWidgetSetting} from '../widgetDefinitions';
- import WidgetContainer from './widgetContainer';
- export interface ChartRowProps {
- allowedCharts: PerformanceWidgetSetting[];
- chartCount: number;
- chartHeight: number;
- eventView: EventView;
- location: Location;
- withStaticFilters: boolean;
- }
- function getInitialChartSettings(
- chartCount: number,
- chartHeight: number,
- performanceType: ProjectPerformanceType,
- allowedCharts: PerformanceWidgetSetting[]
- ) {
- return new Array(chartCount)
- .fill(0)
- .map((_, index) =>
- getChartSetting(index, chartHeight, performanceType, allowedCharts[index])
- );
- }
- function ChartRow(props: ChartRowProps) {
- const {chartCount, chartHeight, allowedCharts} = props;
- const theme = useTheme();
- const performanceType = usePerformanceDisplayType();
- const palette = theme.charts.getColorPalette(chartCount);
- const [chartSettings, setChartSettings] = useState(
- getInitialChartSettings(chartCount, chartHeight, performanceType, allowedCharts)
- );
- if (props.allowedCharts.length < chartCount) {
- throw new Error('Not enough allowed chart types to show row.');
- }
- return (
- <StyledRow minSize={200}>
- {new Array(chartCount).fill(0).map((_, index) => (
- <WidgetContainer
- {...props}
- key={index}
- index={index}
- chartHeight={chartHeight}
- chartColor={palette[index]}
- defaultChartSetting={allowedCharts[index]}
- rowChartSettings={chartSettings}
- setRowChartSettings={setChartSettings}
- />
- ))}
- </StyledRow>
- );
- }
- export function TripleChartRow(props: ChartRowProps) {
- return <ChartRow {...props} />;
- }
- TripleChartRow.defaultProps = {
- chartCount: 3,
- chartHeight: 100,
- };
- export function DoubleChartRow(props: ChartRowProps) {
- return <ChartRow {...props} />;
- }
- DoubleChartRow.defaultProps = {
- chartCount: 2,
- chartHeight: 150,
- };
- const StyledRow = styled(PerformanceLayoutBodyRow)`
- margin-bottom: ${space(2)};
- `;
|