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

Dashboard chart fill (#6167)

Browse Source
This commit is contained in:
Tymoteusz Czech 2024-02-12 15:30:17 +01:00 committed by GitHub
parent 5a75093cbc
commit 3e7c2bb30e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 26 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/component/executiveDashboard/FlagsChart/FlagsChart.tsx
View File

@ -19,14 +19,12 @@ export const FlagsChart: VFC<IFlagsChartProps> = ({ flagTrends }) => {
data: flagTrends.map((item) => item.total),
borderColor: theme.palette.primary.light,
backgroundColor: theme.palette.primary.light,
fill: true,
},
{
label: 'Stale',
data: flagTrends.map((item) => item.stale),
borderColor: theme.palette.warning.border,
backgroundColor: theme.palette.warning.border,
fill: true,
},
],
}),

7
frontend/src/component/executiveDashboard/LineChart/LineChartComponent.tsx
View File

@ -8,6 +8,7 @@ import {
Legend,
TimeScale,
Chart,
Filler,
type ChartData,
type ScatterDataPoint,
} from 'chart.js';
@ -162,7 +163,8 @@ const customHighlightPlugin = {
const LineChartComponent: VFC<{
data: ChartData<'line', (number | ScatterDataPoint | null)[], unknown>;
}> = ({ data }) => {
aspectRatio?: number;
}> = ({ data, aspectRatio }) => {
const theme = useTheme();
const { locationSettings } = useLocationSettings();
@ -178,6 +180,8 @@ const LineChartComponent: VFC<{
options={options}
data={data}
plugins={[customHighlightPlugin]}
height={aspectRatio ? 100 : undefined}
width={aspectRatio ? 100 * aspectRatio : undefined}
/>
<ChartTooltip tooltip={tooltip} />
</>
@ -192,6 +196,7 @@ Chart.register(
TimeScale,
Tooltip,
Legend,
Filler,
);
// for lazy-loading

21
frontend/src/component/executiveDashboard/UsersChart/UsersChart.tsx
View File

@ -3,6 +3,7 @@ import 'chartjs-adapter-date-fns';
import { useTheme } from '@mui/material';
import { ExecutiveSummarySchema } from 'openapi';
import { LineChart } from '../LineChart/LineChart';
import { type ScriptableContext } from 'chart.js';
interface IUsersChartProps {
userTrends: ExecutiveSummarySchema['userTrends'];
@ -18,20 +19,38 @@ export const UsersChart: VFC<IUsersChartProps> = ({ userTrends }) => {
label: 'Total users',
data: userTrends.map((item) => item.total),
borderColor: theme.palette.primary.light,
backgroundColor: theme.palette.primary.light,
backgroundColor: (context: ScriptableContext<'line'>) => {
const chart = context.chart;
const { ctx, chartArea } = chart;
if (!chartArea) {
return;
}
const gradient = ctx.createLinearGradient(
0,
chartArea.bottom,
0,
chartArea.top,
);
gradient.addColorStop(0, 'rgba(129, 122, 254, 0)');
gradient.addColorStop(1, 'rgba(129, 122, 254, 0.12)');
return gradient;
},
fill: true,
order: 3,
},
{
label: 'Active users',
data: userTrends.map((item) => item.active),
borderColor: theme.palette.success.border,
backgroundColor: theme.palette.success.border,
order: 2,
},
{
label: 'Inactive users',
data: userTrends.map((item) => item.inactive),
borderColor: theme.palette.warning.border,
backgroundColor: theme.palette.warning.border,
order: 1,
},
],
}),