forked from gane5hvarma/panther
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Extend TimeSeriesChart to displays bars & Tooltip based on metadata (…
…#2079) * Extend TimeseriesData to display bar series * Updated tooltip axisPointer * Added tooltip components in different files * Updated TimeSeriesChart to accept metadata & color and render tooltips * Removed multiseriesTooltip * mage gen fmt * Added show label * Added prop to control display of series label * Rename options to useChartOptions & other fixes * Renamed seriesType to chartType * Fixes for tooltip * Updated props * ***TO REVERT THIS*** * Revert "***TO REVERT THIS***" This reverts commit fa7884e. * Added default tooltip for charts * Updated types Co-authored-by: panther-bot <[email protected]>
- Loading branch information
1 parent
561d56e
commit 7eef8e5
Showing
3 changed files
with
196 additions
and
74 deletions.
There are no files selected for viewing
55 changes: 55 additions & 0 deletions
55
web/src/components/charts/TimeSeriesChart/ChartTooltip.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| /** | ||
| * Panther is a Cloud-Native SIEM for the Modern Security Team. | ||
| * Copyright (C) 2020 Panther Labs Inc | ||
| * | ||
| * This program is free software: you can redistribute it and/or modify | ||
| * it under the terms of the GNU Affero General Public License as | ||
| * published by the Free Software Foundation, either version 3 of the | ||
| * License, or (at your option) any later version. | ||
| * | ||
| * This program is distributed in the hope that it will be useful, | ||
| * but WITHOUT ANY WARRANTY; without even the implied warranty of | ||
| * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the | ||
| * GNU Affero General Public License for more details. | ||
| * | ||
| * You should have received a copy of the GNU Affero General Public License | ||
| * along with this program. If not, see <https://www.gnu.org/licenses/>. | ||
| */ | ||
| import React from 'react'; | ||
| import { Box, Flex, Text } from 'pouncejs'; | ||
| import { formatDatetime } from 'Helpers/utils'; | ||
|
|
||
| export interface ChartTooltipProps { | ||
| params: any[]; | ||
| units: string; | ||
| } | ||
|
|
||
| const ChartTooltip: React.FC<ChartTooltipProps> = ({ params, units }) => { | ||
| return ( | ||
| <Box font="primary" minWidth={200} boxShadow="dark250" p={2} borderRadius="medium"> | ||
| <Text fontSize="small-medium" mb={3}> | ||
| {formatDatetime(params[0].value[0], true)} | ||
| </Text> | ||
| <Flex direction="column" spacing={2} fontSize="x-small"> | ||
| {params.map((seriesInfo, i) => { | ||
| return ( | ||
| <Flex key={`chart-tooltip ${i}`} direction="column" spacing={2} fontSize="x-small"> | ||
| <Flex key={seriesInfo.seriesName} justify="space-between"> | ||
| <Box as="dt"> | ||
| <span dangerouslySetInnerHTML={{ __html: seriesInfo.marker }} /> | ||
| {seriesInfo.seriesName} | ||
| </Box> | ||
| <Box as="dd" font="mono" fontWeight="bold"> | ||
| {seriesInfo.value[1].toLocaleString('en')} | ||
| {units ? ` ${units}` : ''} | ||
| </Box> | ||
| </Flex> | ||
| </Flex> | ||
| ); | ||
| })} | ||
| </Flex> | ||
| </Box> | ||
| ); | ||
| }; | ||
|
|
||
| export default ChartTooltip; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
77 changes: 77 additions & 0 deletions
77
web/src/components/charts/TimeSeriesChart/useChartOptions.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| /** | ||
| * Panther is a Cloud-Native SIEM for the Modern Security Team. | ||
| * Copyright (C) 2020 Panther Labs Inc | ||
| * | ||
| * This program is free software: you can redistribute it and/or modify | ||
| * it under the terms of the GNU Affero General Public License as | ||
| * published by the Free Software Foundation, either version 3 of the | ||
| * License, or (at your option) any later version. | ||
| * | ||
| * This program is distributed in the hope that it will be useful, | ||
| * but WITHOUT ANY WARRANTY; without even the implied warranty of | ||
| * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the | ||
| * GNU Affero General Public License for more details. | ||
| * | ||
| * You should have received a copy of the GNU Affero General Public License | ||
| * along with this program. If not, see <https://www.gnu.org/licenses/>. | ||
| */ | ||
|
|
||
| import React from 'react'; | ||
| import { remToPx } from 'Helpers/utils'; | ||
| import { FloatSeries, LongSeries } from 'Generated/schema'; | ||
| import { useTheme } from 'pouncejs'; | ||
|
|
||
| type GetLegendProps = { | ||
| series: (LongSeries | FloatSeries)[]; | ||
| title?: string; | ||
| }; | ||
|
|
||
| type GetLegendFunc = (props: GetLegendProps) => any; | ||
|
|
||
| const useChartOptions = () => { | ||
| const theme = useTheme(); | ||
| const getLegend: GetLegendFunc = React.useCallback( | ||
| ({ series, title }) => { | ||
| /* | ||
| * 'legendData' must be an array of values that matches 'series.name' in order | ||
| * to display them in correct order and color | ||
| * e.g. [AWS.ALB, AWS.S3, ...etc] | ||
| */ | ||
| const legendData = series.map(({ label }) => label); | ||
| return { | ||
| type: 'scroll' as const, | ||
| orient: 'vertical' as const, | ||
| left: 'auto', | ||
| right: 'auto', | ||
| // Pushing down legend to fit title | ||
| top: title ? 30 : 'auto', | ||
| icon: 'circle', | ||
| data: legendData, | ||
| inactiveColor: theme.colors['gray-400'], | ||
| textStyle: { | ||
| color: theme.colors['gray-50'], | ||
| fontFamily: theme.fonts.primary, | ||
| fontSize: remToPx(theme.fontSizes['x-small']), | ||
| }, | ||
| pageIcons: { | ||
| vertical: ['M7 10L12 15L17 10H7Z', 'M7 14L12 9L17 14H7Z'], | ||
| }, | ||
| pageIconColor: theme.colors['gray-50'], | ||
| pageIconInactiveColor: theme.colors['navyblue-300'], | ||
| pageIconSize: 12, | ||
| pageTextStyle: { | ||
| fontFamily: theme.fonts.primary, | ||
| color: theme.colors['gray-50'], | ||
| fontWeight: theme.fontWeights.bold as any, | ||
| fontSize: remToPx(theme.fontSizes['x-small']), | ||
| }, | ||
| pageButtonGap: theme.space[3] as number, | ||
| }; | ||
| }, | ||
| [theme] | ||
| ); | ||
|
|
||
| return React.useMemo(() => ({ getLegend }), [getLegend]); | ||
| }; | ||
|
|
||
| export default useChartOptions; |