jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(ui) - widget drilldown on table nad pie chart

Browse source
This commit is contained in:
Shekar Siri 2022-04-15 13:32:38 +02:00
parent b4dd8923de
commit 8756fd16da
3 changed files with 26 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTable/CustomMetricTable.tsx
View file

@ -33,6 +33,7 @@ function CustomMetriTable(props: Props) {
const rows = List(data.values);
const onClickHandler = (event, data) => {
console.log('onClickHandler', data);
const filters = Array<any>();
let filter = { ...filtersMap[metric.metricOf] }
filter.value = [data.name]

42
frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
View file

@ -28,26 +28,28 @@ function WidgetChart(props: Props) {
const prevMetricRef = useRef<any>();
const [data, setData] = useState<any>(metric.data);
const isTableWidget = metric.metricType === 'table' && metric.viewType === 'table';
const isPieChart = metric.metricType === 'table' && metric.viewType === 'pieChart';
const onChartClick = (event: any) => {
if (event) {
const payload = event.activePayload[0].payload;
const timestamp = payload.timestamp;
const periodTimestamps = metric.metricType === 'timeseries' ?
getStartAndEndTimestampsByDensity(timestamp, period.start, period.end, params.density) :
period.toTimestamps();
if (isTableWidget || isPieChart) {
const periodTimestamps = period.toTimestamps()
drillDownFilter.merge({
filters: event,
startTimestamp: periodTimestamps.startTimestamp,
endTimestamp: periodTimestamps.endTimestamp,
});
} else {
const payload = event.activePayload[0].payload;
const timestamp = payload.timestamp;
const periodTimestamps = getStartAndEndTimestampsByDensity(timestamp, period.start, period.end, params.density);
drillDownFilter.merge({
startTimestamp: periodTimestamps.startTimestamp,
endTimestamp: periodTimestamps.endTimestamp,
});
// const activeWidget = {
// widget: metric,
// period: period,
// ...periodTimestamps,
// timestamp: payload.timestamp,
// index,
// }
drillDownFilter.merge({
startTimestamp: periodTimestamps.startTimestamp,
endTimestamp: periodTimestamps.endTimestamp,
});
}
}
}
@ -100,7 +102,10 @@ function WidgetChart(props: Props) {
if (metricType === 'table') {
if (viewType === 'table') {
return <CustomMetricTable metric={metric} data={data[0]} />;
return <CustomMetricTable
metric={metric} data={data[0]}
onClick={onChartClick}
/>;
} else if (viewType === 'pieChart') {
return (
<CustomMetricPieChart
@ -108,6 +113,7 @@ function WidgetChart(props: Props) {
data={data[0]}
colors={colors}
params={params}
onClick={onChartClick}
/>
)
}

2
frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx
View file

@ -42,7 +42,7 @@ function WidgetSessions(props: Props) {
console.log('res', res)
setData(res);
});
}, [filter.startTimestamp, filter.endTimestamp, widget.filter]);
}, [filter.startTimestamp, filter.endTimestamp, filter.filters]);
return useObserver(() => (
<div className={cn(className)}>