Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-09-24 17:51:14 +02:00
Code Issues Projects Releases Wiki Activity

show more appropriate placeholder data

Browse Source
This commit is contained in:
Thomas Heartman 2025-09-02 15:44:35 +02:00
parent 26c2a2bf4f
commit b921b729ba
No known key found for this signature in database
GPG Key ID: BD1F880DAED1EE78
2 changed files with 67 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/component/insights/componentsChart/CreationArchiveChart/CreationArchiveChart.tsx
View File

@ -21,11 +21,11 @@ import type { TooltipState } from 'component/insights/components/LineChart/Chart
import type { WeekData, RawWeekData } from './types.ts'; import type { WeekData, RawWeekData } from './types.ts';
import { createTooltip } from 'component/insights/components/LineChart/createTooltip.ts'; import { createTooltip } from 'component/insights/components/LineChart/createTooltip.ts';
import { CreationArchiveRatioTooltip } from './CreationArchiveRatioTooltip.tsx'; import { CreationArchiveRatioTooltip } from './CreationArchiveRatioTooltip.tsx';
import { Chart } from 'react-chartjs-2';
import { getDateFnsLocale } from '../../getDateFnsLocale.ts'; import { getDateFnsLocale } from '../../getDateFnsLocale.ts';
import { customHighlightPlugin } from 'component/common/Chart/customHighlightPlugin.ts'; import { customHighlightPlugin } from 'component/common/Chart/customHighlightPlugin.ts';
import { NotEnoughData } from 'component/insights/components/LineChart/LineChart.tsx'; import { NotEnoughData } from 'component/insights/components/LineChart/LineChart.tsx';
import { usePlaceholderData } from 'component/insights/hooks/usePlaceholderData.ts'; import { placeholderData } from './placeholderData.ts';
import { Bar } from 'react-chartjs-2';
ChartJS.register( ChartJS.register(
CategoryScale, CategoryScale,
@ -74,7 +74,6 @@ export const CreationArchiveChart: FC<ICreationArchiveChartProps> = ({
}) => { }) => {
const creationVsArchivedChart = useProjectChartData(creationArchiveTrends); const creationVsArchivedChart = useProjectChartData(creationArchiveTrends);
const theme = useTheme(); const theme = useTheme();
const placeholderData = usePlaceholderData();
const { locationSettings } = useLocationSettings(); const { locationSettings } = useLocationSettings();
const [tooltip, setTooltip] = useState<null | TooltipState>(null); const [tooltip, setTooltip] = useState<null | TooltipState>(null);
@ -213,7 +212,7 @@ export const CreationArchiveChart: FC<ICreationArchiveChartProps> = ({
display: false, display: false,
}, },
ticks: { ticks: {
source: 'data', source: 'data' as const,
display: !useGraphCover, display: !useGraphCover,
}, },
}, },
@ -237,8 +236,7 @@ export const CreationArchiveChart: FC<ICreationArchiveChartProps> = ({
return ( return (
<> <>
<Chart <Bar
type='bar'
data={data} data={data}
options={options} options={options}
height={100} height={100}

63
frontend/src/component/insights/componentsChart/CreationArchiveChart/placeholderData.ts Normal file
View File

@ -0,0 +1,63 @@
import type { ChartData } from 'chart.js';
import type { WeekData } from './types.ts';
const data = [
{
archivedFlags: 3,
totalCreatedFlags: 4,
archivePercentage: 75,
week: '2025-30',
date: '2025-07-27T01:00:00.000Z',
},
{
archivedFlags: 7,
totalCreatedFlags: 3,
archivePercentage: 140,
week: '2025-31',
date: '2025-08-03T01:00:00.000Z',
},
{
archivedFlags: 2,
totalCreatedFlags: 3,
archivePercentage: 50,
week: '2025-32',
date: '2025-08-10T01:00:00.000Z',
},
{
archivedFlags: 2,
totalCreatedFlags: 6,
archivePercentage: 25,
week: '2025-33',
date: '2025-08-17T00:40:40.606Z',
},
{
archivedFlags: 4,
totalCreatedFlags: 9,
archivePercentage: 66.66666666666666,
week: '2025-34',
date: '2025-08-24T00:29:19.583Z',
},
];
export const placeholderData: ChartData<any, WeekData[]> = {
datasets: [
{
label: 'Flags archived',
data,
parsing: {
yAxisKey: 'archivedFlags',
xAxisKey: 'date',
},
order: 1,
},
{
label: 'Flags created',
data,
parsing: {
yAxisKey: 'totalCreatedFlags',
xAxisKey: 'date',
},
order: 2,
},
],
};