mirror of
https://github.com/Unleash/unleash.git
synced 2025-09-24 17:51:14 +02:00
show more appropriate placeholder data
This commit is contained in:
parent
26c2a2bf4f
commit
b921b729ba
@ -21,11 +21,11 @@ import type { TooltipState } from 'component/insights/components/LineChart/Chart
|
||||
import type { WeekData, RawWeekData } from './types.ts';
|
||||
import { createTooltip } from 'component/insights/components/LineChart/createTooltip.ts';
|
||||
import { CreationArchiveRatioTooltip } from './CreationArchiveRatioTooltip.tsx';
|
||||
import { Chart } from 'react-chartjs-2';
|
||||
import { getDateFnsLocale } from '../../getDateFnsLocale.ts';
|
||||
import { customHighlightPlugin } from 'component/common/Chart/customHighlightPlugin.ts';
|
||||
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(
|
||||
CategoryScale,
|
||||
@ -74,7 +74,6 @@ export const CreationArchiveChart: FC<ICreationArchiveChartProps> = ({
|
||||
}) => {
|
||||
const creationVsArchivedChart = useProjectChartData(creationArchiveTrends);
|
||||
const theme = useTheme();
|
||||
const placeholderData = usePlaceholderData();
|
||||
const { locationSettings } = useLocationSettings();
|
||||
const [tooltip, setTooltip] = useState<null | TooltipState>(null);
|
||||
|
||||
@ -213,7 +212,7 @@ export const CreationArchiveChart: FC<ICreationArchiveChartProps> = ({
|
||||
display: false,
|
||||
},
|
||||
ticks: {
|
||||
source: 'data',
|
||||
source: 'data' as const,
|
||||
display: !useGraphCover,
|
||||
},
|
||||
},
|
||||
@ -237,8 +236,7 @@ export const CreationArchiveChart: FC<ICreationArchiveChartProps> = ({
|
||||
|
||||
return (
|
||||
<>
|
||||
<Chart
|
||||
type='bar'
|
||||
<Bar
|
||||
data={data}
|
||||
options={options}
|
||||
height={100}
|
||||
|
@ -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,
|
||||
},
|
||||
],
|
||||
};
|
Loading…
Reference in New Issue
Block a user