Commit Graph

44 Commits

Author SHA1 Message Date
nitin fddac24e7f connect line chart to backend (#15657)
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
2025-11-13 11:35:08 +00:00
Balaji Krishnamurthy ec7e49c8bb fix: minor color changes (#15616)
Closes #15597

The `color` of `OnBoardingModalCircularIcon` was set to `gray`. Now it
is set to `inverted` and it is displayed properly. I couldn't figure out
how to reach the onboarding screen, so I created a temporary path and
rendered the element there to verify the changes. Attaching screenshots
of the same.
<img width="398" height="393" alt="Screenshot from 2025-11-05 00-11-05"
src="https://github.com/user-attachments/assets/25efc790-92a3-42b5-8298-5128a3f1a466"
/>

<img width="398" height="418" alt="Screenshot from 2025-11-05 00-10-32"
src="https://github.com/user-attachments/assets/af52c695-4b01-40e9-a873-39d491c633cc"
/>

Additionally, a border has been added to the color picker icons.
<img width="573" height="383" alt="Screenshot from 2025-11-05 00-12-23"
src="https://github.com/user-attachments/assets/03d967aa-8c6f-4dfd-be3d-a2e16fe12b9a"
/>

I noticed that the dropdown after clicking on the icon also renders a
bunch of colors. Do let me know if these need the same border as well.
<img width="571" height="366" alt="Screenshot from 2025-11-05 00-12-37"
src="https://github.com/user-attachments/assets/a13bf253-6765-4d7a-9f0f-17cb7375a515"
/>

---------

Co-authored-by: bosiraphael <raphael.bosi@gmail.com>
2025-11-13 10:00:28 +00:00
nitin b5064e88f6 Fix groupMode toggle (#15585)
groupMode should be undefined if no groupby is set on the secondary
axis!
This default value is also the reason -- all the logic -- where
groupMode was checked for conditional rendering -- for eg
, negative data labels when there is no groupby -- the labels should
appear below wasn't happening -- since there was always a default to
groupMode!
changes - 
- getting rid of the default value on the bar chart DTO for groupMode
- on front -- make sure groupMode is only set when the secondary axis
gets groupBy id and proper cleanup
2025-11-04 18:28:20 +01:00
Raphaël Bosi 05a28a8ec2 Create a feature flag for dashboards v2 (#15601)
Prevent users from creating v2 chart types via the api.
Only created unit tests and not integration tests (since it's not that
important, and the v2 will be released soon), but tested via the api
playground.
2025-11-04 16:29:08 +01:00
nitin 5bc876e4b4 IFrame widget improvements (#15483)
changes - 
- make iframe side panel to match others -- ie use SidePanelHeader for
title
- make url optional in configuration to match that of the other widgets
(allow partial saves) - render No data status when error or no url
- split widget sizes into two -- graph widget sizes and widget sizes
(graph widgets are a subset of chart widgets)
2025-11-03 17:30:06 +00:00
nitin 902eb2c5d2 Instant widget placeholder placement on drag end (#15496)
closes -
https://discord.com/channels/1130383047699738754/1430596561137700957

fixed a bug - where on chart type change in side panel -- wont update
the widgets minimum size

---------

Co-authored-by: Raphaël Bosi <71827178+bosiraphael@users.noreply.github.com>
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
2025-11-03 17:08:13 +00:00
Raphaël Bosi 4a87706d0b Fix chart filter settings back button behavior (#15573)
Before:


https://github.com/user-attachments/assets/23881978-3234-4a0b-95ec-15470d26026d


After:


https://github.com/user-attachments/assets/80d222f6-585a-4fff-8476-dae327e34699
2025-11-03 16:25:59 +00:00
Raphaël Bosi 1739ee0595 Add date granularity and timezone and first day of the week to graphs (#15543)
- Allow users to choose the date granularity of the x axis and the group
by of the y axis on a bar chart
- Display those options conditionally
- Store timezones in graphs: each graph has its own timezone, defaults
to the user timezone. There will be a picker in the v2 to choose the
timezone. For now the timezone is not used by the backend, but it will
be used in filters and in group by queries.
- Store first day of the week



https://github.com/user-attachments/assets/66a5d156-dd93-4ebe-8c8f-d172f93e25be
2025-11-03 15:27:47 +01:00
Raphaël Bosi cf382ccdd9 Fix maximum number of bars for stacked bars (#15481)
The maximum number of bars feature has been implemented before the
stacked bar one, so it didn't support it.
Now, the same number of bars is displayed with and without group by when
we are in stacked mode.
2025-10-31 17:25:47 +05:30
nitin ab0cb67686 Render depends on menu items conditionally in chart settings + fix min max values (#15391)
closes
https://discord.com/channels/1130383047699738754/1430894689317294152

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
Co-authored-by: Raphaël Bosi <71827178+bosiraphael@users.noreply.github.com>
2025-10-30 20:56:37 +05:30
nitin 369b1b19af Tabs sidepanel settings on dashboards (#15454)
question -- should we have confirmation modal on delete -- if yes --
should it appear on save -- or on delete?
figma -
https://www.figma.com/design/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=79469-817497&t=5gFTRiI5f8nPyzc6-0
Note - Figma has a new side panel header, which is unavailable for now,
so I used the existing one

In a follow-up, we could even have icons for tabs -- would be cool --
and an icon picker for the icons?

followups which could be addressed in separate PRs - 
- ~~tabs being edited state (select state?) -- this would have blue
border around tab~~ done
- add icons on tabs -- need to update the entity to add icon -- and set
a default (dashboard) -- at least
- icon picker in the sidepanel header

closes -
https://discord.com/channels/1130383047699738754/1430204556884836532

video QA





https://github.com/user-attachments/assets/a4ad4b93-911d-46ce-9b68-347fd48fe933
2025-10-30 18:45:31 +05:30
Raphaël Bosi 198bf5a333 Complete color refactoring (#15414)
# Complete color refactoring

Closes https://github.com/twentyhq/core-team-issues/issues/1779

- Updated all colors to use Radix colors with P3 color space allowing
for brighter colors
- Created our own gray scale interpolated on Radix's scale to have the
same values for grays as the old ones in the app
- Introduced dark and light colors as well as there transparent versions
- Added many new colors from radix that can be used in the tags or in
the graphs
- Updated multiple color utilities to match new behaviors
- Changed the computation of Avatar colors to return only colors from
the theme (before it was random hsl)

These changes allow the user to use new colors in tags or charts, the
colors are brighter and with better contrast. We have a full range of
color variations from 1 to 12 where before we only had 4 adaptative
colors.
All these changes will allow us to develop custom themes for the user
soon, where users can choose their accent colors, background colors and
there contrast.
2025-10-29 18:08:51 +00:00
Raphaël Bosi 01d8b99c38 Update bar chart design (#15372)
- Implement new dynamic color palettes
- Create custom bar component with rounded edges



https://github.com/user-attachments/assets/8246f16d-0239-4807-bb4a-9647367575f2
2025-10-27 16:46:06 +00:00
Raphaël Bosi f301f07e43 Convert number chart to aggregate chart allowing date aggregates (#15294)
- Convert number chart to aggregate chart 
- Allow date aggregates on all charts
- Only allow `EARLIEST` and `LATEST` on Aggregate chart and Gauge chart
- Various design fixes


https://github.com/user-attachments/assets/b5a2239d-7b11-48b5-93e6-98ceffae5cab
2025-10-24 05:48:42 +13:00
Raphaël Bosi 95b405edac Add a banner in the side panel to alert if the bar chart has too many bars (#15267)
Closes https://github.com/twentyhq/core-team-issues/issues/1714

- Created `SidePanelInformationBanner` component
- Created a component state `hasWidgetTooManyGroupsComponentState`
- Displayed the banner in the side panel if the state is true



https://github.com/user-attachments/assets/343a4053-f0d5-4e9b-935d-ead191d70eb2
2025-10-22 18:03:00 +02:00
Raphaël Bosi 1c27206b41 Use aggregate operations in the widget configuration instead of extended aggregate operations (#15248)
- Use aggregate operations in the widget configuration instead of
extended aggregate operations
- Use aggregate operation from generated graphql in the frontend
2025-10-22 14:19:02 +02:00
nitin 226cc9eb74 [Dashboards] - Min Max range on secondary axis bar charts (#15118)
video QA


https://github.com/user-attachments/assets/70c37188-2398-43de-bbf6-5882bb79940a

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
2025-10-22 10:51:01 +02:00
Raphaël Bosi ea09987e80 Number chart editor (#15222)
Closes https://github.com/twentyhq/core-team-issues/issues/1620

<img width="1002" height="682" alt="CleanShot 2025-10-21 at 11 49 48@2x"
src="https://github.com/user-attachments/assets/ff06ef0e-ccba-486d-b295-2e5f497f050c"
/>
2025-10-21 10:17:12 +00:00
Lucas Bordeau 59004306c9 Connect chart filters to backend (#15133)
This PR connects the chart filters settings page to the backend.

Both for persisting the filters in the chart's configuration and also
for querying with those filters.

I made sure that the filters configuration is reset in the draft if we
change the data source object.
2025-10-16 15:17:01 +00:00
nitin 246543912d [Dashboards] - Omit zero values (#15112)
video QA


https://github.com/user-attachments/assets/6391afdd-0714-4202-8db0-f67388fb7582

---------

Co-authored-by: Marie <51697796+ijreilly@users.noreply.github.com>
2025-10-16 15:00:28 +05:30
Lucas Bordeau 7f8ec35b5d Added dashboard chart advanced filter components (#15095)
This PR adds the components for advanced filters on chart settings.

It also refactors what's in common between this new command menu page
and the workflow advanced filters.
2025-10-15 16:06:15 +02:00
nitin 436084f8f4 Split bar graph into two distinct horizontal and vertical bars (#15061)
### Summary

Split BAR into VERTICAL_BAR and HORIZONTAL_BAR as separate chart types.

### The Problem

Initially wanted a simple vertical/horizontal toggle for bar charts, but
ran into a GraphQL union type
constraint: union types can't have the same field name with different
nullability.

- Vertical bars need groupByFieldMetadataIdX as required (categories on
X)
- Horizontal bars need groupByFieldMetadataIdY as required (categories
on Y)
  - GraphQL schema generation fails with this setup

### The Solution

Use semantic primaryAxis and secondaryAxis naming that's
orientation-agnostic:

- primaryAxisGroupByFieldMetadataId = main grouping field (e.g.,
"Company Name")
- secondaryAxisGroupByFieldMetadataId = optional secondary grouping
(e.g., "Stage")

These fields have consistent meaning regardless of orientation. The
visual mapping happens at the UI layer:
  - Vertical bars: primary data renders on X-axis, secondary on Y-axis
  - Horizontal bars: primary data renders on Y-axis, secondary on X-axis

Both chart types share the same DTO structure with consistent
nullability.

### What Changed

  - Split GraphType.BAR → VERTICAL_BAR | HORIZONTAL_BAR
- Renamed fields: primaryAxisGroupByFieldMetadataId,
secondaryAxisGroupByFieldMetadataId (+ subfield
  variants)
- useChartSettingsValues(): Maps semantic fields to setting values (no
swapping)
- getBarChartSettings(): Dynamically arranges settings panel based on
orientation
- transformGroupByDataToBarChartData(): Maps semantic fields to Nivo's
layout prop
  
  video QA
  

https://github.com/user-attachments/assets/479061b5-712e-4ca6-9858-95273d1f16c1
2025-10-15 11:38:48 +02:00
nitin 5fec6a9afc Fix group by y axis "stacked" behaviour (#15081)
also improved seeds
2025-10-14 15:06:50 +02:00
Raphaël Bosi 168e7b16ec Design adjustments on Bar chart (#15028)
- Make the ticks dynamic when we resize the graph
- Fix formatting
- Fix gradient color not working when the index have a space in it
- Fix the maximum number of groups for a grouped by graph
- Update the tooltip design and display the group

Video:


https://github.com/user-attachments/assets/9f304b6c-3dec-4ce2-9127-41d27f393d90

---------

Co-authored-by: Marie Stoppa <marie.stoppa@essec.edu>
2025-10-13 09:43:06 +00:00
nitin 720e93a68a Connect the graph title editor (#15039)
closes https://github.com/twentyhq/core-team-issues/issues/1608
2025-10-11 07:56:20 +00:00
Raphaël Bosi b567c6551a Improve and fix source selection in charts (#15033)
- Improvements: Hide advanced objects in a subMenu and order objects
alphabetically

<img width="420" height="944" alt="CleanShot 2025-10-10 at 17 32 59@2x"
src="https://github.com/user-attachments/assets/52d70a97-b037-4ac1-9237-ef3262cac099"
/>

<img width="426" height="1140" alt="CleanShot 2025-10-10 at 17 33 24@2x"
src="https://github.com/user-attachments/assets/932501be-3c5a-45d9-b2fd-938c7f6b2ef9"
/>


- Fix: reset all fields when changing object
2025-10-10 15:49:30 +00:00
Raphaël Bosi da165effb7 Improvements on group by option in graph editor (#15014)
- Display sort by for the Y axis only if a group by is selected
- Add the possibility to remove a group by Y
2025-10-10 10:04:18 +02:00
nitin 44f97058ac Tidy up validation for configuration (#14939)
closes https://github.com/twentyhq/core-team-issues/issues/1605

TODO:  
~~- add stories~~
~~- add base graph on companies when creating a new graph widget~~
2025-10-09 20:34:51 +00:00
Raphaël Bosi 875dc1a6b8 Connect the bar chart to the group by resolver (#14885)
Closes https://github.com/twentyhq/core-team-issues/issues/1535

Video QA:


https://github.com/user-attachments/assets/153fa3f1-08d9-4952-9456-635c602e1f57



https://github.com/user-attachments/assets/d3111afb-4c84-4f57-8a56-5cf666748c86

There are still some formatting and design issues (the labels which are
on top of each other and the values which should be formatted) that will
be fixed in a future PR

---------

Co-authored-by: ehconitin <nitinkoche03@gmail.com>
2025-10-09 14:54:33 +02:00
Raphaël Bosi 94546d7c09 Add composites subfield selection in the graph editor (#14931)
Closes https://github.com/twentyhq/core-team-issues/issues/1638
Closes https://github.com/twentyhq/core-team-issues/issues/1623



https://github.com/user-attachments/assets/2dddadaa-781b-497d-b454-0066d599bda3

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
2025-10-07 18:33:07 +02:00
Raphaël Bosi 22db1bb97d Updates on chart selection (#14943)
- Updated the disabled design
- Disabled the 3 charts which won't be released this sprint
- Updated the icon of the number chart
- Added labels

Before:
<img width="1004" height="388" alt="CleanShot 2025-10-07 at 15 40 31@2x"
src="https://github.com/user-attachments/assets/d2cf86a4-faca-4333-a03b-cc95afbd07ad"
/>

After:
<img width="1002" height="412" alt="CleanShot 2025-10-07 at 15 46 21@2x"
src="https://github.com/user-attachments/assets/780e9bcb-32d7-41dc-b281-f7b2248b8f5d"
/>
2025-10-07 13:55:52 +00:00
Raphaël Bosi d10ab5f67c Chart editor - Part 1 (#14820)
This PR is the first part of the creation of the Chart editor.


https://github.com/user-attachments/assets/8b0af8ea-be41-4506-84cb-e40f5521cbf0

Done:
- Bar chart settings (except filters)
- Line chart settings (except filters)

In progress:
- Pie chart settings
- Number chart settings
- Gauge chart settings

Left to do:
- Loosen the backend validation to allow the user to save a partial
configuration, validate the graph configuration in the frontend and
display a error friendly message in the graph if the config is not
completed yet
- Implement the filter edition
- Finish the other graph types settings
2025-10-03 10:25:45 +02:00
nitin ea144c434b Add configuration types for widgets (#14717)
closes https://github.com/twentyhq/core-team-issues/issues/1532
2025-09-29 11:41:26 +00:00
Raphaël Bosi 1fdfac4f0d Update menu items across the app (#14724)
Closes https://github.com/twentyhq/core-team-issues/issues/1568


https://github.com/user-attachments/assets/a0fe6538-8405-4b52-a6ce-7afa846ee5f3
2025-09-25 18:14:32 +02:00
Raphaël Bosi 66a6190e3c Create save dashboard record action (#14665)
Closes https://github.com/twentyhq/core-team-issues/issues/1502

- Created the save action
- Removed the temporary data attribute from the page layout widget since
we will connect widgets to real data soon



https://github.com/user-attachments/assets/2b46b511-f2c2-4e11-873c-a76fd31704e5
2025-09-24 12:03:27 +00:00
Raphaël Bosi 3b868c3d2a Page layout refactoring (#14535)
In this PR:
- Refactored the page layout renderer
- Converted all the states to component states
- Removed the page layout edition in settings

TODOs in next PRs:
- Fix bug with the drag selector not taking the scroll into account to
display the dragged area
- Readd the tab edition in edit mode
2025-09-16 15:42:51 +00:00
Raphaël Bosi e80c552ae7 Create the Dashboard record show page (#14423)
Closes https://github.com/twentyhq/core-team-issues/issues/1438

- Reorganized PageLayout module
- Created `DashboardRenderer` and `PageLayoutRenderer`
- Created stories for the `PageLayoutRenderer`
- Refactored the Widget components


https://github.com/user-attachments/assets/27e9ac8f-b237-4c21-8494-3fab6d65af3a
2025-09-11 18:26:26 +02:00
nitin ceffc82b9c [Dashboard]- Add GraphWidgetLineChart (#14386)
closes https://github.com/twentyhq/core-team-issues/issues/1371
2025-09-11 08:39:17 +00:00
Félix Malfait f7cde28dd6 🔧 Restore PRs #14348 and #14352 that were reverted by PR #14347 (#14359)
## Problem

**CRITICAL:** Two PRs were accidentally reverted when PR #14347 "Prevent
csv export injections" was merged:

1. **PR #14348** "[Page Layout] - Review Refactor" -  **RESTORED**
2. **PR #14352** "Fix wrong path used by backend" -  **RESTORED**

## Root Cause Analysis

During the merge of PR #14347, there was a complex merge conflict with
PR #14352 "Fix wrong path used by backend". The merge commit
`324d7204bb` in the PR #14347 branch brought in changes from PR #14352,
but during the conflict resolution, **BOTH PR #14348 and PR #14352's
changes were accidentally overwritten**.

## What This PR Restores

This PR restores **BOTH** PRs by cherry-picking their commits:

###  PR #14348 Changes Restored:
- `GraphWidgetRenderer.tsx` - was deleted, now restored
- `WidgetRenderer.tsx` - was missing, now restored  
- `SettingsPageLayoutTabsInstanceId.ts` - was deleted, now restored
- `useUpdatePageLayoutWidget.ts` - was renamed back, now restored with
correct name
- Multiple test files that were deleted
- Several hook files that were renamed/reverted
- File renames: `usePageLayoutWidgetUpdate.ts` →
`useUpdatePageLayoutWidget.ts`
- Hook refactoring and test file organization
- Page layout component improvements

###  PR #14352 Changes Restored:
- **Types moved to twenty-shared:**
  - `packages/twenty-shared/src/types/AppBasePath.ts`  RESTORED
  - `packages/twenty-shared/src/types/AppPath.ts`  RESTORED
  - `packages/twenty-shared/src/types/SettingsPath.ts`  RESTORED
- **Navigation utilities moved to twenty-shared:**
- `packages/twenty-shared/src/utils/navigation/getAppPath.ts`  RESTORED
- `packages/twenty-shared/src/utils/navigation/getSettingsPath.ts` 
RESTORED
- **200+ import statements updated** across the codebase to use
twenty-shared
- **Old type files deleted** from twenty-front/src/modules/types/

## Evidence of Complete Restoration

**Before (reverted state):**
-  Types were in `packages/twenty-front/src/modules/types/`
-  Page layout files missing
-  Hook files incorrectly named

**After (this PR):**
-  Types correctly in `packages/twenty-shared/src/types/`
-  All page layout files restored
-  Hook files correctly named
-  All import statements updated

## Verification

**Total changes:**
- PR #14348: 36 files changed, 863 insertions(+), 442 deletions(-)
- PR #14352: 243 files changed, 492 insertions(+), 461 deletions(-)
- **Combined: 279 files changed, 1355 insertions(+), 903 deletions(-)**

## Impact

This completely restores both PRs that were accidentally lost, ensuring:
1. Page layout refactoring work is back
2. Type organization and path utilities are correctly in twenty-shared
3. Backend email paths work correctly again
4. No functionality is lost

Fixes the reversion caused by the merge conflict in PR #14347.

---------

Co-authored-by: nitin <142569587+ehconitin@users.noreply.github.com>
2025-09-08 21:48:13 +02:00
Félix Malfait cebcf4f1f5 Prevent csv export injections (#14347)
**Small Security Issue:** CSV exports were vulnerable to formula
injection attacks when users entered values starting with =, +, -, or @.
(only happens if a logged-in user injects corrupted data)

Solution:
- Added ZWJ (Zero-Width Joiner) protection that prefixes dangerous
values with invisible Unicode character
- This is the best way to preserve original data while preventing Excel
from executing formulas
- Added import cleanup to restore original values when re-importing
 
Changes:
- New sanitizeValueForCSVExport() function for security
- Updated all CSV export paths to use both security + formatting
functions
- Added comprehensive tests covering attack vectors and international
characters
- Also added cursor rules for better code consistency

---------

Co-authored-by: Charles Bochet <charlesBochet@users.noreply.github.com>
2025-09-08 17:57:46 +02:00
nitin 894db2645a [Page Layout] - Review Refactor (#14348)
addressing the review on
https://github.com/twentyhq/twenty/pull/14318#pullrequestreview-3191930203
2025-09-08 12:20:43 +00:00
nitin ab9b5ca4c5 [Page Layouts] - Add tabs (#14318) 2025-09-06 11:27:37 +02:00
nitin 0a6d5479c9 [Dashboards] - add iframe widget (#14251)
closes https://github.com/twentyhq/core-team-issues/issues/1415
2025-09-03 17:31:38 +02:00
nitin 1b2f079359 Page Layout - Addition of widgets (#14184)
https://github.com/user-attachments/assets/130f12d7-5cef-4b83-912f-a9d42241f69f

~~This could be considered a POC 😅~~

addressing - 
https://github.com/twentyhq/core-team-issues/issues/1400
https://github.com/twentyhq/core-team-issues/issues/1403
2025-09-02 10:20:28 +00:00