diff --git a/frontend/app/components/Charts/BarChart.tsx b/frontend/app/components/Charts/BarChart.tsx index 386770505..2d23dd834 100644 --- a/frontend/app/components/Charts/BarChart.tsx +++ b/frontend/app/components/Charts/BarChart.tsx @@ -13,6 +13,7 @@ echarts.use([BarChart]); interface BarChartProps extends DataProps { label?: string; onClick?: (event: any) => void; + onSeriesFocus?: (event: any) => void; } function ORBarChart(props: BarChartProps) { @@ -81,6 +82,9 @@ function ORBarChart(props: BarChartProps) { const index = event.dataIndex; const timestamp = (window as any).__timestampMap?.[chartUuid.current]?.[index]; props.onClick?.({ activePayload: [{ payload: { timestamp }}]}) + setTimeout(() => { + props.onSeriesFocus?.(event.seriesName) + }, 0) }) return () => { diff --git a/frontend/app/components/Charts/LineChart.tsx b/frontend/app/components/Charts/LineChart.tsx index 0c2d1ead9..9155ed92c 100644 --- a/frontend/app/components/Charts/LineChart.tsx +++ b/frontend/app/components/Charts/LineChart.tsx @@ -12,6 +12,7 @@ interface Props extends DataProps { isArea?: boolean; chartName?: string; onClick?: (event: any) => void; + onSeriesFocus?: (event: any) => void; } function ORLineChart(props: Props) { @@ -73,7 +74,8 @@ function ORLineChart(props: Props) { // nameGap: 40, nameTextStyle: { padding: [0, 0, 0, 15], - } + }, + minInterval: 1 }, tooltip: { ...defaultOptions.tooltip, @@ -91,6 +93,9 @@ function ORLineChart(props: Props) { const index = event.dataIndex; const timestamp = (window as any).__timestampMap?.[chartUuid.current]?.[index]; props.onClick?.({ activePayload: [{ payload: { timestamp }}]}) + setTimeout(() => { + props.onSeriesFocus?.(event.seriesName) + }, 0) }) return () => { diff --git a/frontend/app/components/Charts/init.ts b/frontend/app/components/Charts/init.ts index 5fd5b8ec6..6544dece3 100644 --- a/frontend/app/components/Charts/init.ts +++ b/frontend/app/components/Charts/init.ts @@ -36,6 +36,7 @@ const defaultOptions = { extraCssText: 'box-shadow: none; pointer-events: auto;', axisPointer: { type: 'cross', + snap: true, label: { backgroundColor: '#6a7985' }, diff --git a/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx b/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx index da8d9e790..6d282096c 100644 --- a/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx +++ b/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx @@ -65,7 +65,7 @@ function WidgetChart(props: Props) { const prevMetricRef = useRef(); const isMounted = useIsMounted(); const [compData, setCompData] = useState(null); - const [enabledRows, setEnabledRows] = useState([]); + const [enabledRows, setEnabledRows] = useState(_metric.series.map(s => s.name)); const isTableWidget = _metric.metricType === 'table' && _metric.viewType === 'table'; const isPieChart = @@ -78,6 +78,17 @@ function WidgetChart(props: Props) { }; }, []); + useEffect(() => { + if (enabledRows.length !== _metric.series.length) { + const excluded = _metric.series + .filter((s) => !enabledRows.includes(s.name)) + .map((s) => s.name); + metricStore.setDisabledSeries(excluded); + } else { + metricStore.setDisabledSeries([]); + } + }, [enabledRows]) + useEffect(() => { if (!data.chart) return; const series = data.chart[0] @@ -227,7 +238,7 @@ function WidgetChart(props: Props) { ]); useEffect(loadPage, [_metric.page]); - const onFocus = (seriesName: string)=> { + const onFocus = (seriesName: string) => { metricStore.setFocusedSeriesName(seriesName); metricStore.setDrillDown(true) } @@ -318,6 +329,7 @@ function WidgetChart(props: Props) { inGrid={!props.isPreview} data={chartData} compData={compDataCopy} + onSeriesFocus={onFocus} onClick={onChartClick} label={ _metric.metricOf === 'sessionCount' @@ -335,6 +347,7 @@ function WidgetChart(props: Props) { data={chartData} inGrid={!props.isPreview} onClick={onChartClick} + onSeriesFocus={onFocus} label={ _metric.metricOf === 'sessionCount' ? 'Number of Sessions' @@ -351,6 +364,7 @@ function WidgetChart(props: Props) { compData={compDataCopy} params={params} colors={colors} + onSeriesFocus={onFocus} onClick={onChartClick} label={ _metric.metricOf === 'sessionCount' diff --git a/frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx b/frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx index 73621e383..9600f5c97 100644 --- a/frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx +++ b/frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx @@ -108,7 +108,12 @@ function WidgetSessions(props: Props) { debounceClickMapSearch(customFilter); } else { const hasStartPoint = !!widget.startPoint && widget.metricType === USER_PATH - const activeSeries = focusedSeries ? widget.series.filter((s) => s.name === focusedSeries) : widget.series + const onlyFocused = focusedSeries + ? widget.series.filter((s) => s.name === focusedSeries) + : widget.series + const activeSeries = metricStore.disabledSeries.length + ? onlyFocused.filter((s) => !metricStore.disabledSeries.includes(s.name)) + : onlyFocused const seriesJson = activeSeries.map((s) => s.toJson()); if (hasStartPoint) { seriesJson[0].filter.filters.push(widget.startPoint.toJson()); @@ -132,6 +137,7 @@ function WidgetSessions(props: Props) { metricStore.clickMapSearch, focusedSeries, widget.startPoint, + metricStore.disabledSeries.length ]); useEffect(loadData, [metricStore.sessionsPage]); useEffect(() => { diff --git a/frontend/app/mstore/metricStore.ts b/frontend/app/mstore/metricStore.ts index 694e5d94a..28d57fa0c 100644 --- a/frontend/app/mstore/metricStore.ts +++ b/frontend/app/mstore/metricStore.ts @@ -102,6 +102,7 @@ export default class MetricStore { cardCategory: string | null = CATEGORIES.product_analytics; focusedSeriesName: string | null = null; + disabledSeries: string[] = []; drillDown = false; constructor() { @@ -151,6 +152,10 @@ export default class MetricStore { } } + setDisabledSeries(series: string[]) { + this.disabledSeries = series; + } + setCardCategory(category: string) { this.cardCategory = category; }