Elgato_dark/hyperdx
1
0
Fork 0
mirror of https://github.com/hyperdxio/hyperdx synced 2026-04-21 13:37:15 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

feat: Update Line Chart tooltip styling (#175)

Browse source
This commit is contained in:
Shorpo 2024-01-02 19:00:24 -07:00 committed by GitHub
parent df7cfdf711
commit ea20a79825
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 87 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/nasty-islands-shave.md Normal file
View file

@ -0,0 +1,5 @@
---
'@hyperdx/app': patch
---
Update Line Chart tooltip styling

70
packages/app/src/HDXLineChart.tsx
View file

@ -94,6 +94,7 @@ export const LegendRenderer = memo<{
);
});
const HARD_LINES_LIMIT = 60;
const MemoChart = memo(function MemoChart({
graphResults,
setIsClickActive,
@ -120,25 +121,27 @@ const MemoChart = memo(function MemoChart({
const ChartComponent = displayType === 'stacked_bar' ? BarChart : LineChart;
const lines = useMemo(() => {
return groupKeys.map(key =>
displayType === 'stacked_bar' ? (
<Bar
key={key}
type="monotone"
dataKey={key}
fill={semanticKeyedColor(key)}
stackId="1"
/>
) : (
<Line
key={key}
type="monotone"
dataKey={key}
stroke={semanticKeyedColor(key)}
dot={false}
/>
),
);
return groupKeys
.slice(0, HARD_LINES_LIMIT)
.map(key =>
displayType === 'stacked_bar' ? (
<Bar
key={key}
type="monotone"
dataKey={key}
fill={semanticKeyedColor(key)}
stackId="1"
/>
) : (
<Line
key={key}
type="monotone"
dataKey={key}
stroke={semanticKeyedColor(key)}
dot={false}
/>
),
);
}, [groupKeys, displayType]);
const sizeRef = useRef<[number, number]>([0, 0]);
@ -270,27 +273,32 @@ const MemoChart = memo(function MemoChart({
);
});
const HDXLineChartTooltip = (props: any) => {
export const HDXLineChartTooltip = memo((props: any) => {
const timeFormat: TimeFormat = useUserPreferences().timeFormat;
const tsFormat = TIME_TOKENS[timeFormat];
const { active, payload, label, numberFormat } = props;
if (active && payload && payload.length) {
return (
<div className="bg-grey px-3 py-2 rounded fs-8">
<div className="mb-2">{format(new Date(label * 1000), tsFormat)}</div>
{payload
.sort((a: any, b: any) => b.value - a.value)
.map((p: any) => (
<div key={p.name} style={{ color: p.color }}>
{p.dataKey}:{' '}
{numberFormat ? formatNumber(p.value, numberFormat) : p.value}
</div>
))}
<div className={styles.chartTooltip}>
<div className={styles.chartTooltipHeader}>
{format(new Date(label * 1000), tsFormat)}
</div>
<div className={styles.chartTooltipContent}>
{payload
.sort((a: any, b: any) => b.value - a.value)
.map((p: any) => (
<div key={p.dataKey} style={{ color: p.color }}>
{truncateMiddle(p.name ?? p.dataKey, 50)}:{' '}
{numberFormat ? formatNumber(p.value, numberFormat) : p.value}
</div>
))}
</div>
</div>
);
}
return null;
};
});
const HDXLineChart = memo(
({
config: {

69
packages/app/src/HDXMultiSeriesTimeChart.tsx
View file

@ -25,11 +25,13 @@ import {
seriesToUrlSearchQueryParam,
} from './ChartUtils';
import { LegendRenderer } from './HDXLineChart';
import { HDXLineChartTooltip } from './HDXLineChart';
import type { ChartSeries, NumberFormat } from './types';
import useUserPreferences, { TimeFormat } from './useUserPreferences';
import { formatNumber } from './utils';
import { semanticKeyedColor, TIME_TOKENS } from './utils';
const HARD_LINES_LIMIT = 60;
const MemoChart = memo(function MemoChart({
graphResults,
setIsClickActive,
@ -56,27 +58,29 @@ const MemoChart = memo(function MemoChart({
const ChartComponent = displayType === 'stacked_bar' ? BarChart : LineChart;
const lines = useMemo(() => {
return groupKeys.map((key, i) =>
displayType === 'stacked_bar' ? (
<Bar
key={key}
type="monotone"
dataKey={key}
name={lineNames[i] ?? key}
fill={semanticKeyedColor(key)}
stackId="1"
/>
) : (
<Line
key={key}
type="monotone"
dataKey={key}
name={lineNames[i] ?? key}
stroke={semanticKeyedColor(key)}
dot={false}
/>
),
);
return groupKeys
.slice(0, HARD_LINES_LIMIT)
.map((key, i) =>
displayType === 'stacked_bar' ? (
<Bar
key={key}
type="monotone"
dataKey={key}
name={lineNames[i] ?? key}
fill={semanticKeyedColor(key)}
stackId="1"
/>
) : (
<Line
key={key}
type="monotone"
dataKey={key}
name={lineNames[i] ?? key}
stroke={semanticKeyedColor(key)}
dot={false}
/>
),
);
}, [groupKeys, displayType, lineNames]);
const sizeRef = useRef<[number, number]>([0, 0]);
@ -190,6 +194,7 @@ const MemoChart = memo(function MemoChart({
iconSize={10}
verticalAlign="bottom"
content={<LegendRenderer />}
offset={-100}
/>
{/** Needs to be at the bottom to prevent re-rendering */}
{isClickActive != null ? (
@ -200,28 +205,6 @@ const MemoChart = memo(function MemoChart({
);
});
const HDXLineChartTooltip = (props: any) => {
const timeFormat: TimeFormat = useUserPreferences().timeFormat;
const tsFormat = TIME_TOKENS[timeFormat];
const { active, payload, label, numberFormat } = props;
if (active && payload && payload.length) {
return (
<div className="bg-grey px-3 py-2 rounded fs-8">
<div className="mb-2">{format(new Date(label * 1000), tsFormat)}</div>
{payload
.sort((a: any, b: any) => b.value - a.value)
.map((p: any) => (
<div key={p.dataKey} style={{ color: p.color }}>
{p.name ?? p.dataKey}:{' '}
{numberFormat ? formatNumber(p.value, numberFormat) : p.value}
</div>
))}
</div>
);
}
return null;
};
const HDXMultiSeriesLineChart = memo(
({
config: { series, granularity, dateRange, seriesReturnType = 'column' },

17
packages/app/styles/HDXLineChart.module.scss
View file

@ -31,3 +31,20 @@
max-width: 40vw;
overflow: hidden;
}
.chartTooltip {
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(1px);
border-radius: 4px;
font-size: 11px;
}
.chartTooltipHeader {
padding: 2px 12px;
color: $slate-400;
border-bottom: 1px solid $slate-700;
}
.chartTooltipContent {
padding: 6px 12px;
}