houseassassin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dashboards fast follows: tabs border changed to outline and legends factorization (#16049)

Browse Source 
closes
https://discord.com/channels/1130383047699738754/1440633019042889828
https://discord.com/channels/1130383047699738754/1442819106880356363
This commit is contained in:
nitin
2025-11-25 18:08:09 +05:30
committed by GitHub
parent 53509360ff
commit ab3d48383b
5 changed files with 36 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/page-layout/widgets/graph/components/GraphWidgetLegend.tsx
+11 -1
View File
@@ -1,3 +1,4 @@
import { CHART_LEGEND_ITEM_THRESHOLD } from '@/page-layout/widgets/graph/constants/ChartLegendItemThreshold';
import styled from '@emotion/styled';
export type GraphWidgetLegendItem = {
@@ -42,7 +43,16 @@ export const GraphWidgetLegend = ({
items,
show = true,
}: GraphWidgetLegendProps) => {
if (!show || items.length === 0) {
const areThereTooManyItems = items.length > CHART_LEGEND_ITEM_THRESHOLD;
const isItASingleItem = items.length === 1;
const thereAreNoItems = items.length === 0;
const shouldShowLegend =
show && !areThereTooManyItems && !isItASingleItem && !thereAreNoItems;
if (!shouldShowLegend) {
return null;
}
packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/components/GraphWidgetBarChart.tsx
+1 -6
View File
@@ -33,7 +33,6 @@ import { useCallback, useMemo, useRef, useState, type MouseEvent } from 'react';
import { isDefined } from 'twenty-shared/utils';
import { useDebouncedCallback } from 'use-debounce';
import { CHART_LEGEND_ITEM_THRESHOLD } from '@/page-layout/widgets/graph/constants/ChartLegendItemThreshold';
import { graphWidgetBarTooltipComponentState } from '@/page-layout/widgets/graph/graphWidgetBarChart/states/graphWidgetBarTooltipComponentState';
import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
@@ -150,10 +149,6 @@ export const GraphWidgetBarChart = ({
debouncedHideTooltip();
}, [debouncedHideTooltip]);
const areThereTooManyKeys = keys.length > CHART_LEGEND_ITEM_THRESHOLD;
const shouldShowLegend = showLegend && !areThereTooManyKeys;
const { axisBottom: axisBottomConfig, axisLeft: axisLeftConfig } =
getBarChartAxisConfigs({
width: chartWidth,
@@ -296,7 +291,7 @@ export const GraphWidgetBarChart = ({
onMouseLeave={handleTooltipMouseLeave}
/>
<GraphWidgetLegend
show={shouldShowLegend}
show={showLegend}
items={enrichedKeys.map((item) => {
return {
id: item.key,
packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetLineChart/components/GraphWidgetLineChart.tsx
+1 -5
View File
@@ -1,6 +1,5 @@
import { GraphWidgetChartContainer } from '@/page-layout/widgets/graph/components/GraphWidgetChartContainer';
import { GraphWidgetLegend } from '@/page-layout/widgets/graph/components/GraphWidgetLegend';
import { CHART_LEGEND_ITEM_THRESHOLD } from '@/page-layout/widgets/graph/constants/ChartLegendItemThreshold';
import {
CustomCrosshairLayer,
type SliceHoverData,
@@ -202,9 +201,6 @@ export const GraphWidgetLineChart = ({
);
const axisLeftConfig = getLineChartAxisLeftConfig(yAxisLabel, formatOptions);
const areThereTooManySeries = data.length > CHART_LEGEND_ITEM_THRESHOLD;
const shouldShowLegend = showLegend && !areThereTooManySeries;
return (
<StyledContainer id={id}>
<GraphWidgetChartContainer
@@ -279,7 +275,7 @@ export const GraphWidgetLineChart = ({
onMouseEnter={handleTooltipMouseEnter}
onMouseLeave={handleTooltipMouseLeave}
/>
<GraphWidgetLegend show={shouldShowLegend} items={legendItems} />
<GraphWidgetLegend show={showLegend} items={legendItems} />
</StyledContainer>
);
};