-
Notifications
You must be signed in to change notification settings - Fork 11.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Table: Highlight row on shared crosshair #78392
Changes from 7 commits
ba93b8f
9b5fef0
3ada8a1
7192b2a
ce60e42
42c0fc6
aba84bc
d6cb27c
edd63c4
219f551
ec59125
8cc0587
fbea285
8620cf5
619fee1
e3a5008
820a103
ef3529e
e9df5f3
c2d53ae
797c8f4
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -94,6 +94,10 @@ export interface Props { | |
cellHeight?: schema.TableCellHeight; | ||
/** @alpha Used by SparklineCell when provided */ | ||
timeRange?: TimeRange; | ||
onRowHover?: (idx: number, frame: DataFrame) => void; | ||
onRowLeave?: () => void; | ||
/** Used to highlight rows with the given time value. Used with DataHoverEvent */ | ||
rowHighlightIndex?: number; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This can be used standalone to highlight a row in some other scenarios. If set it overwrites the one received through the data hover event. Not sure if could be useful or if it's too much. |
||
} | ||
|
||
/** | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -533,3 +533,37 @@ export function getAlignmentFactor( | |
return alignmentFactor; | ||
} | ||
} | ||
|
||
export function hasTimeField(data: DataFrame): boolean { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think this should probably be in |
||
return data.fields.some((field) => field.type === FieldType.time); | ||
} | ||
|
||
// since the conversion from timeseries panel crosshair to time is pixel based, we need | ||
// to set a threshold where the table row highlights when the crosshair is hovered over a certain point | ||
// because multiple pixels (converted to times) may represent the same point/row in table | ||
export function isPointTimeValAroundTableTimeVal(pointTime: number, rowTime: number, threshold: number) { | ||
return Math.abs(Math.floor(pointTime) - rowTime) < threshold; | ||
} | ||
|
||
// calculate the threshold for which we consider a point in a chart | ||
// to match a row in a table based on a time value | ||
export function calculateAroundPointThreshold(timeField: Field): number { | ||
let max = -Number.MAX_VALUE; | ||
let min = Number.MAX_VALUE; | ||
|
||
if (timeField.values.length < 2) { | ||
return 0; | ||
} | ||
|
||
for (let i = 0; i < timeField.values.length; i++) { | ||
const value = timeField.values[i]; | ||
if (value > max) { | ||
max = value; | ||
} | ||
if (value < min) { | ||
min = value; | ||
} | ||
} | ||
|
||
return (max - min) / timeField.values.length; | ||
} | ||
Comment on lines
+546
to
+565
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This works a lot better! 🥇 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I know findIndex returns the first instance of the match, but for the sake of curiosity, would there ever be more then 1 unique time value in a table?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There could be, but I don't think there are many use-cases for such a scenario. I've also thought about it and decided it's better to return just one match.