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

connect line chart to backend (#15657)

Browse Source 
https://github.com/user-attachments/assets/b797c5a8-32a8-4d3e-9fb1-7541d107a19f

optimizations:
before: 


https://github.com/user-attachments/assets/bf45a3f1-5f89-40c1-9ce4-c2d912b77d63


after:


https://github.com/user-attachments/assets/61bfd603-7b63-4695-8ae8-68fe7d3bfea0
This commit is contained in:
nitin
2025-11-13 17:05:08 +05:30
committed by GitHub
parent eee35e5e25
commit fddac24e7f
71 changed files with 2375 additions and 790 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/command-menu/pages/page-layout/components/ChartSettings.tsx
+8 -2
View File
@@ -18,6 +18,7 @@ import { shouldHideChartSetting } from '@/command-menu/pages/page-layout/utils/s
import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
import { BAR_CHART_MAXIMUM_NUMBER_OF_BARS } from '@/page-layout/widgets/graph/graphWidgetBarChart/constants/BarChartMaximumNumberOfBars.constant';
import { LINE_CHART_MAXIMUM_NUMBER_OF_DATA_POINTS } from '@/page-layout/widgets/graph/graphWidgetLineChart/constants/LineChartMaximumNumberOfDataPoints.constant';
import { hasWidgetTooManyGroupsComponentState } from '@/page-layout/widgets/graph/states/hasWidgetTooManyGroupsComponentState';
import { useOpenDropdown } from '@/ui/layout/dropdown/hooks/useOpenDropdown';
import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
@@ -89,7 +90,8 @@ export const ChartSettings = ({ widget }: { widget: PageLayoutWidget }) => {
if (
graphType !== GraphType.VERTICAL_BAR &&
graphType !== GraphType.HORIZONTAL_BAR
graphType !== GraphType.HORIZONTAL_BAR &&
graphType !== GraphType.LINE
) {
setHasWidgetTooManyGroups(false);
}
@@ -124,7 +126,11 @@ export const ChartSettings = ({ widget }: { widget: PageLayoutWidget }) => {
/>
{hasWidgetTooManyGroups && (
<StyledSidePanelInformationBanner
message={t`Max ${BAR_CHART_MAXIMUM_NUMBER_OF_BARS} bars per chart. Consider adding a filter`}
message={
currentGraphType === GraphType.LINE
? t`Max ${LINE_CHART_MAXIMUM_NUMBER_OF_DATA_POINTS} data points per chart. Consider adding a filter`
: t`Max ${BAR_CHART_MAXIMUM_NUMBER_OF_BARS} bars per chart. Consider adding a filter`
}
/>
)}
{chartSettings.map((group) => {
packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartGroupByFieldSelectionDropdownContentBase.tsx
+20 -10
View File
@@ -104,19 +104,29 @@ export const ChartGroupByFieldSelectionDropdownContentBase = <
[subFieldNameKey]: subFieldName,
};
if (
!isSecondaryAxis ||
configuration.__typename !== 'BarChartConfiguration'
) {
if (!isSecondaryAxis) {
return baseConfig;
}
return {
...baseConfig,
groupMode: isDefined(fieldId)
? (configuration.groupMode ?? BarChartGroupMode.STACKED)
: null,
};
if (configuration.__typename === 'BarChartConfiguration') {
return {
...baseConfig,
groupMode: isDefined(fieldId)
? (configuration.groupMode ?? BarChartGroupMode.STACKED)
: null,
};
}
if (configuration.__typename === 'LineChartConfiguration') {
return {
...baseConfig,
isStacked: isDefined(fieldId)
? (configuration.isStacked ?? true)
: null,
};
}
return baseConfig;
};
const handleSelectField = (fieldMetadataItem: FieldMetadataItem) => {
packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartXAxisSortBySelectionDropdownContent.tsx
+10 -2
View File
@@ -56,14 +56,22 @@ export const ChartXAxisSortBySelectionDropdownContent = () => {
closeDropdown();
};
const isLineChart = configuration.__typename === 'LineChartConfiguration';
const availableOptions = X_SORT_BY_OPTIONS.filter((option) => {
if (isLineChart) {
return option.value !== 'VALUE_ASC' && option.value !== 'VALUE_DESC';
}
return true;
});
return (
<DropdownMenuItemsContainer>
<SelectableList
selectableListInstanceId={dropdownId}
focusId={dropdownId}
selectableItemIdArray={X_SORT_BY_OPTIONS.map((option) => option.value)}
selectableItemIdArray={availableOptions.map((option) => option.value)}
>
{X_SORT_BY_OPTIONS.map((sortOption) => (
{availableOptions.map((sortOption) => (
<SelectableListItem
key={sortOption.value}
itemId={sortOption.value}