Félix Malfait
a51b5ed589
## Summary
- **Fix settings/usage page crash**: The `GraphWidgetLineChart`
component used on `settings/usage` was crashing with "Instance id is not
provided and cannot be found in context" because it requires
`WidgetComponentInstanceContext` (for tooltip/crosshair component
states) which is only provided inside the widget system. Wraps the
standalone chart usages with the required context provider.
- **Avoid mounting `GraphWidgetLegend` when hidden**: The legend
component calls `useIsPageLayoutInEditMode()` which requires
`PageLayoutEditModeProviderContext` — another context only available
inside the widget system. Since the settings page passes
`showLegend={false}`, the fix conditionally unmounts the legend instead
of always mounting it with a `show` prop. Applied consistently across
all four chart types (line, bar, pie, gauge).
- **Add ClickHouse usage event seeds**: Generates ~400 realistic
`usageEvent` rows spanning the past 35 days with weighted user activity,
weekday/weekend patterns, and gradual ramp-up. Enables developers to see
the usage analytics page with data locally.
## Test plan
- [ ] Navigate to `settings/usage` — page should render without errors
- [ ] Verify the daily usage line chart displays correctly
- [ ] Navigate to a user detail page from the usage list
- [ ] Verify the user detail chart renders without errors
- [ ] Run `npx nx clickhouse:seed twenty-server` and confirm usage
events are seeded
- [ ] Verify chart legend still works correctly on dashboard widgets (no
regression)
Made with [Cursor](https://cursor.com)
28 lines
705 B
TypeScript
28 lines
705 B
TypeScript
import { useContext } from 'react';
|
|
|
|
import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
|
|
import { Section } from 'twenty-ui/layout';
|
|
import { ThemeContext } from 'twenty-ui/theme-constants';
|
|
|
|
export const UsageSectionSkeleton = () => {
|
|
const { theme } = useContext(ThemeContext);
|
|
|
|
return (
|
|
<SkeletonTheme
|
|
baseColor={theme.background.tertiary}
|
|
highlightColor={theme.background.transparent.lighter}
|
|
borderRadius={4}
|
|
>
|
|
<Section>
|
|
<Skeleton width={160} height={16} />
|
|
<Skeleton
|
|
width="100%"
|
|
height={200}
|
|
borderRadius={8}
|
|
style={{ marginTop: 16 }}
|
|
/>
|
|
</Section>
|
|
</SkeletonTheme>
|
|
);
|
|
};
|