Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-25 00:07:47 +01:00
Code Issues Projects Releases Wiki Activity

feat: highlighting flags chart (#8237)

Browse Source
This commit is contained in:
Mateusz Kwasniewski 2024-09-25 08:36:30 +02:00 committed by GitHub
parent 4fe80ffc3f
commit e33f71a8f4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 16 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/component/admin/network/NetworkTrafficUsage/NetworkTrafficUsage.tsx
View File

@ -292,7 +292,7 @@ export const NetworkTrafficUsage: VFC = () => {
<Grid item xs={12} md={2}> <Grid item xs={12} md={2}>
<Bar <Bar
data={data} data={data}
plugins={[customHighlightPlugin]} plugins={[customHighlightPlugin()]}
options={options} options={options}
aria-label='An instance metrics line chart with two lines: requests per second for admin API and requests per second for client API' aria-label='An instance metrics line chart with two lines: requests per second for admin API and requests per second for client API'
/> />

7
frontend/src/component/common/Chart/customHighlightPlugin.ts
View File

@ -1,9 +1,8 @@
import type { Chart } from 'chart.js'; import type { Chart } from 'chart.js';
export const customHighlightPlugin = { export const customHighlightPlugin = (width = 46, bottomOverflow = 34) => ({
id: 'customLine', id: 'customLine',
beforeDraw: (chart: Chart) => { beforeDraw: (chart: Chart) => {
const width = 46;
if (chart.tooltip?.opacity && chart.tooltip.x) { if (chart.tooltip?.opacity && chart.tooltip.x) {
const x = chart.tooltip.caretX; const x = chart.tooltip.caretX;
const yAxis = chart.scales.y; const yAxis = chart.scales.y;
@ -22,11 +21,11 @@ export const customHighlightPlugin = {
x - width / 2, x - width / 2,
yAxis.top, yAxis.top,
width, width,
yAxis.bottom - yAxis.top + 34, yAxis.bottom - yAxis.top + bottomOverflow,
5, 5,
); );
ctx.fill(); ctx.fill();
ctx.restore(); ctx.restore();
} }
}, },
}; });

9
frontend/src/component/personalDashboard/FlagMetricsChart.tsx
View File

@ -23,6 +23,7 @@ import {
createPlaceholderBarChartOptions, createPlaceholderBarChartOptions,
} from './createChartOptions'; } from './createChartOptions';
import { useFeature } from 'hooks/api/getters/useFeature/useFeature'; import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
import { customHighlightPlugin } from '../common/Chart/customHighlightPlugin';
const defaultYes = [ const defaultYes = [
45_000_000, 28_000_000, 28_000_000, 25_000_000, 50_000_000, 27_000_000, 45_000_000, 28_000_000, 28_000_000, 25_000_000, 50_000_000, 27_000_000,
@ -79,7 +80,10 @@ export const PlaceholderFlagMetricsChart = () => {
const useMetricsEnvironments = (project: string, flagName: string) => { const useMetricsEnvironments = (project: string, flagName: string) => {
const [environment, setEnvironment] = useState<string | null>(null); const [environment, setEnvironment] = useState<string | null>(null);
const { feature } = useFeature(project, flagName); const { feature } = useFeature(project, flagName);
const activeEnvironments = feature.environments; const activeEnvironments = feature.environments.map((env) => ({
name: env.name,
type: env.type,
}));
const firstProductionEnvironment = activeEnvironments.find( const firstProductionEnvironment = activeEnvironments.find(
(env) => env.type === 'production', (env) => env.type === 'production',
); );
@ -90,7 +94,7 @@ const useMetricsEnvironments = (project: string, flagName: string) => {
} else if (activeEnvironments.length > 0) { } else if (activeEnvironments.length > 0) {
setEnvironment(activeEnvironments[0].name); setEnvironment(activeEnvironments[0].name);
} }
}, [flagName]); }, [flagName, JSON.stringify(activeEnvironments)]);
return { environment, setEnvironment, activeEnvironments }; return { environment, setEnvironment, activeEnvironments };
}; };
@ -188,6 +192,7 @@ export const FlagMetricsChart: FC<{
<Bar <Bar
data={data} data={data}
plugins={[customHighlightPlugin(30, 0)]}
options={options} options={options}
aria-label='A bar chart with a single feature flag exposure metrics' aria-label='A bar chart with a single feature flag exposure metrics'
/> />

5
frontend/src/component/personalDashboard/createChartOptions.ts
View File

@ -82,6 +82,11 @@ export const createBarChartOptions = (
return { return {
plugins: { plugins: {
legend: plugins?.legend, legend: plugins?.legend,
// required to avoid the highlight plugin highlighting empty annotation
annotation: {
clip: false,
annotations: {},
},
tooltip: { tooltip: {
backgroundColor: theme.palette.background.paper, backgroundColor: theme.palette.background.paper,
titleColor: theme.palette.text.primary, titleColor: theme.palette.text.primary,