Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-08-18 13:48:58 +02:00
Code Issues Projects Releases Wiki Activity

add search with highilght

Browse Source
This commit is contained in:
Tymoteusz Czech 2025-06-23 19:36:38 +02:00
parent 73ac8fad8e
commit b07d013d50
No known key found for this signature in database
GPG Key ID: 133555230D88D75F
3 changed files with 43 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/component/insights/impact-metrics/ImpactMetrics.tsx
View File

@ -46,6 +46,16 @@ export const ImpactMetrics: FC = () => {
type: 'constant',
});
const metricSeries = useMemo(() => {
if (!metadata?.series) {
return [];
}
return Object.entries(metadata.series).map(([name, rest]) => ({
name,
...rest,
}));
}, [metadata]);
const data = useMemo(() => {
if (!timeSeriesData.length) {
return {
@ -119,7 +129,7 @@ export const ImpactMetrics: FC = () => {
onRangeChange={setSelectedRange}
beginAtZero={beginAtZero}
onBeginAtZeroChange={setBeginAtZero}
metricSeries={metadata.series}
metricSeries={metricSeries}
loading={metadataLoading}
/>

28
frontend/src/component/insights/impact-metrics/ImpactMetricsControls.tsx
View File

@ -11,6 +11,8 @@ import {
TextField,
Typography,
} from '@mui/material';
import type { ImpactMetricsSeries } from 'hooks/api/getters/useImpactMetricsMetadata/useImpactMetricsMetadata';
import { Highlighter } from 'component/common/Highlighter/Highlighter';
export interface ImpactMetricsControlsProps {
selectedSeries: string;
@ -19,7 +21,7 @@ export interface ImpactMetricsControlsProps {
onRangeChange: (range: 'hour' | 'day' | 'week' | 'month') => void;
beginAtZero: boolean;
onBeginAtZeroChange: (beginAtZero: boolean) => void;
metricSeries: string[];
metricSeries: (ImpactMetricsSeries & { name: string })[];
loading?: boolean;
}
@ -49,9 +51,29 @@ export const ImpactMetricsControls: FC<ImpactMetricsControlsProps> = ({
<Autocomplete
options={metricSeries}
value={selectedSeries || null}
onChange={(_, newValue) => onSeriesChange(newValue || '')}
getOptionLabel={(option) => option.name}
value={
metricSeries.find((option) => option.name === selectedSeries) ||
null
}
onChange={(_, newValue) => onSeriesChange(newValue?.name || '')}
disabled={loading}
renderOption={(props, option, { inputValue }) => (
<Box component='li' {...props}>
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
<Typography variant='body2'>
<Highlighter search={inputValue}>
{option.name}
</Highlighter>
</Typography>
<Typography variant='caption' color='text.secondary'>
<Highlighter search={inputValue}>
{option.help}
</Highlighter>
</Typography>
</Box>
</Box>
)}
renderInput={(params) => (
<TextField
{...params}

10
frontend/src/hooks/api/getters/useImpactMetricsMetadata/useImpactMetricsMetadata.ts
View File

@ -1,9 +1,13 @@
import { fetcher, useApiGetter } from '../useApiGetter/useApiGetter.js';
import { formatApiPath } from 'utils/formatPath';
export type ImpactMetricsSeries = {
type: string;
help: string;
};
export type ImpactMetricsMetadata = {
series: string[];
labels: string[];
series: Record<string, ImpactMetricsSeries>;
};
export const useImpactMetricsMetadata = () => {
@ -14,7 +18,7 @@ export const useImpactMetricsMetadata = () => {
);
return {
metadata: data || { series: [], labels: [] },
metadata: data,
refetch,
loading,
error,