Commit Graph

98 Commits

Author SHA1 Message Date
Raphaël Bosi fdb4e4ef10 [DASHBOARDS] Use a time scale when the primary axis is a date on the Bar Chart (#15932)
Closes https://github.com/twentyhq/core-team-issues/issues/1891

Create empty buckets according to the date granularity

Video QA:


https://github.com/user-attachments/assets/86c0f817-35b3-4bab-b093-d11491684b82

Note: We would also need to create empty buckets for cyclic
granularities (DAY_OF_THE_WEEK, MONTH_OF_THE_YEAR, QUARTER_OF_THE_YEAR).
TODO:
- Always order the cyclic granularities Monday -> Sunday (take
firstDayOfTheWeek into account), January -> December, Q1 -> Q4. For now
they are returned by the backend in alphabetical order, which doesn't
make much sense
- Remove the translation into the user's locale of these granularities
from the backend because otherwise we can't reconstruct the missing days
or month in the frontend since they will be translated

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
2025-11-21 10:24:19 +01:00
Raphaël Bosi 3c3d837cb7 Introduce primary actions (#15826)
- These actions are displayed in the accent color
- Added new context store state
`contextStoreIsPageInEditModeComponentState`
- Reverted the order in which the actions are displayed (the first
action should appear to the right of the top bar action menu)



https://github.com/user-attachments/assets/3a0769cf-61ed-4619-8c4d-e3a01765b63c
2025-11-20 10:57:33 +01:00
nitin eab123f999 Custom data point labels for line chart (#15793)
https://github.com/user-attachments/assets/a3074292-acc7-4117-add4-8b3f8d00673e
2025-11-19 11:00:30 +01:00
Raphaël Bosi 5b52ac992e [DASHBOARDS] Tab duplication (#15906)
Closes https://github.com/twentyhq/core-team-issues/issues/1878

- Allow tab duplication
- Add autofocus on the tiltle input upon the creation and duplication of
tabs and the creation of widgets
- Fix a bug where cancelling the edition while on a new tab, by
resetting the active tab id if it's not in the persisted tabs


https://github.com/user-attachments/assets/a4dc2f0b-1a56-406a-bde7-cca17f9cdbc1
2025-11-19 10:57:37 +01:00
Marie 5bb4abc23d Add optional limit variable to groupBy queries (#15885)
Closes https://github.com/twentyhq/core-team-issues/issues/1600.

Two remarks 
- This `limit` variable does not reduce postgre's work at it still needs
to scan the whole table. It did not seem possible to me to optimize this
as we cannot foresee which dimensions will be used by the user, and an
optimization could only result from an index on the dimension(s) (e.g.:
group companies by addressCity limit 50 can be optimized if we have an
index on companies.addressCity + we had a default orderBy on
adressCity). But this will still optimize the FE which at the moment
receives all groups and truncates the result.
- I have not done the work on the FE as the addition of limit is a
breaking change, and will break until the workspaces' schema is rebuilt,
so we need to flush the cache. I think this could be acceptable as the
feature is in the lab but I preferred not doing it yet as it would have
no impact since in the BE I added a default limit to 50 groups, and I
expect more FE work will be done to allow the user to choose their own
limit
2025-11-18 17:25:33 +01:00
Baptiste Devessier 6209ba539b Add icons to Record Page Layout tabs (#15871)
## Demo


https://github.com/user-attachments/assets/71ce776a-8d59-4b2c-8579-185fdd749f8f

Closes https://github.com/twentyhq/core-team-issues/issues/1812
2025-11-18 12:25:18 +01:00
Baptiste Devessier e0d1f74648 Page layout conditional display (#15802)
- Allow widgets to be hidden based on device's type conditions: desktop
or mobile
- Create two widgets for rich text fields on tasks and notes. One widget
is displayed below fields on mobile (and in the right drawer); the other
is displayed on a separate tab on desktop
- In read mode, hide tabs if they contain no visible widgets. If there
is no tab left to display, display at least the first one with no
widgets.
- In edit mode, display all tabs and all widgets.

## Demo


https://github.com/user-attachments/assets/65ef1261-3902-4432-a420-48983b763b2c

Closes https://github.com/twentyhq/core-team-issues/issues/1811
2025-11-18 10:35:38 +01:00
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
Raphaël Bosi ea56586766 Fix horizontal bar chart spacing between ticks (#15702)
This PR fixes a bug where the spacing between ticks on the Y axis was
adjusted according to the width of the widget where it should have been
adjusted according to the height. Same for the X axis.

**Before**:
Works for the vertical layout but not for the horizontal layout


https://github.com/user-attachments/assets/f0b94103-1ba6-4dbe-bbc6-c47541c1b5fa


**After**:
Works for both


https://github.com/user-attachments/assets/165faada-2943-4e05-92d6-a31def569500
2025-11-12 10:19:32 +00:00
nitin 561297436e Anchored tooltip (#15568)
Issue - 
- tooltip gets too long when groupby has too much data points
- we need max height on tooltips
- we need to be able to scroll inside the tooltip
- not possible if the tooltip is following the cursor (which library
enforces)
- its not easy to customize Nivo's own tooltip to make it work how we
want it

what we want - 
- let the tooltip anchor to the bar in such a way -- that the top of the
bar aligns with the vertical middle of the tooltip
- add max height to the tooltip

what I did - 
- use floating portal from floating-ui/react
- get the hover datum (ie hovered bars) dimensions on mouse enter to
render the tooltip
- anchor the tooltip at the calculated position
- floating-ui handles the basic things like flipping/offset/shift
- clear the states as required

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
2025-11-11 16:47:41 +01:00
Raphaël Bosi 44d6ec2594 Widget: Allow resizing from all corners and sides (#15680)
https://github.com/user-attachments/assets/3e4e1da2-87e6-440e-8371-835ef6eccf59
2025-11-07 15:28:39 +01:00
Baptiste Devessier bfe1f47065 Create old fields design widget (#15645)
In this PR:

- Pass `layoutMode` and `tabId` via PageLayoutContentContext provider
- Getting `pageLayoutType` from the current page layout
- Getting isInPinnedTab through `useIsInPinnedTab` hook

## Before

<img width="3456" height="2160" alt="CleanShot 2025-11-06 at 14 22
44@2x"
src="https://github.com/user-attachments/assets/763bb413-5739-45ef-85ed-82a72415886f"
/>

## After

<img width="3456" height="2162" alt="CleanShot 2025-11-06 at 14 20
38@2x"
src="https://github.com/user-attachments/assets/eee6cccd-9d36-426e-a22f-400e8f7f9413"
/>

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
2025-11-06 18:16:42 +01:00
Raphaël Bosi 931d12c77b Add animations on widget buttons and on action buttons (#15631)
Animated:
- Grip
- Trash can
- Action buttons


https://github.com/user-attachments/assets/1cac7a5e-2036-4308-9622-3b4809ae90a3
2025-11-06 17:38:05 +01:00
nitin 3f52102e18 fix groupMode regression caused due to default value flip (#15627) 2025-11-05 16:04:09 +05:30
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
nitin 186dbb8aca fast-follows: fix placeholder not appearing when no widgets in a tab (#15599)
closes -
https://discord.com/channels/1130383047699738754/1435261256251605053

before:


https://github.com/user-attachments/assets/fbbfd6b0-6c25-48c3-9367-efbf47efd34a

after:


https://github.com/user-attachments/assets/87105c4e-cf79-43c0-83bb-ebb4c32a64fc
2025-11-04 14:05:02 +00:00
Raphaël Bosi 7256abad3a Dashboard: Deactivate delete and navigation actions in edit mode (#15590)
https://github.com/user-attachments/assets/74256232-dfb1-4cb5-9fd8-854e0b3b7c09
2025-11-04 18:43:36 +05:30
Raphaël Bosi 98180c263d Filter out null values in tooltip (#15588)
Before:
<img width="356" height="330" alt="CleanShot 2025-11-04 at 11 44 14@2x"
src="https://github.com/user-attachments/assets/924f8623-3961-411c-9763-800fd9491224"
/>

After:
<img width="418" height="242" alt="CleanShot 2025-11-04 at 11 43 49@2x"
src="https://github.com/user-attachments/assets/54cf5fa4-1146-43b4-8cff-59817bcbe6a4"
/>
2025-11-04 11:09:12 +00:00
nitin 106c33abec fix inconsistent widget placeholder placement (#15580)
fixes -
https://github.com/twentyhq/twenty/pull/15496#issuecomment-3481636780

and https://discord.com/channels/1130383047699738754/1434971632539009055

- make the pending placeholder to be non-static -- so that it behaves
similarly to compact behavior like other widgets do
- make sure users can't set dashboards to be opened in the side panel --
similar to workflows

before- 


https://github.com/user-attachments/assets/d991db56-1388-4e4b-b743-a63f56b6187a

after- 


https://github.com/user-attachments/assets/9031f2c6-1e3b-4604-a5a0-3124d14484ce
2025-11-04 11:07:57 +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 711cf819e9 Fix date granularity saving issue (#15579)
The date granularities were missing in the fragment
2025-11-03 16:53:44 +00:00
nitin bafc0496b1 add inner padding on bar chart (#15577)
before:

<img width="602" height="407" alt="CleanShot 2025-11-03 at 22 06 45"
src="https://github.com/user-attachments/assets/3553d3a0-2626-4f88-9adc-7d472fde2b26"
/>

after:

<img width="628" height="392" alt="CleanShot 2025-11-03 at 22 06 08"
src="https://github.com/user-attachments/assets/d5cf2b68-c5eb-4ce7-be27-c685ccd81109"
/>
2025-11-03 17:48:57 +01:00
Raphaël Bosi a64d4dbe71 Various font styling fixes on chart (#15572)
- Fix axis legends styling
- Fix legends styling
- Fix tooltip legends

---------

Co-authored-by: ehconitin <nitinkoche03@gmail.com>
2025-11-03 16:43:28 +00:00
nitin c2d8fd495a fix: trash button centering + gap between forbidden display and trashbutton (#15571)
<img width="247" height="73" alt="CleanShot 2025-11-03 at 21 24 18"
src="https://github.com/user-attachments/assets/c0287919-be18-4dfa-96b8-5bbdeaab6693"
/>

---------

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>
2025-11-03 16:21:17 +00:00
Marie d72aae86cb Graph margins vary depending on presence of labels (#15559)
https://github.com/user-attachments/assets/3c27fa7b-78a3-49eb-9795-53571662cf12

---------

Co-authored-by: Raphaël Bosi <71827178+bosiraphael@users.noreply.github.com>
2025-11-03 17:06:41 +01: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
Baptiste Devessier 5f0d24798a Support workflows in record page layouts (#15471)
https://github.com/user-attachments/assets/275a02a3-7054-45d1-9423-75bb5223a8ba
2025-10-31 18:45:58 +01:00
Raphaël Bosi bb471cb8a5 Bar chart: Prevent left tick labels to overlap on label (#15499)
Prevent left tick labels to overlap on label by truncating the tick
label
2025-10-31 22:50:22 +05:30
Raphaël Bosi 2d1a89c4c2 Update minimum chart sizes (#15500)
Update minimum chart sizes
2025-10-31 21:29:04 +05:30
nitin 809791a4a8 fix: Orderby secondary dimension sum (#15493)
before:


https://github.com/user-attachments/assets/6919c45b-1435-408f-87e3-0452dd70fbdb

after:


https://github.com/user-attachments/assets/efa60d28-ac04-4219-831a-92aada13fa9c
2025-10-31 13:54:13 +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 1b02bc7cc4 remove values/formatted values from chart legends (#15490)
before:

<img width="639" height="385" alt="Screenshot 2025-10-31 at 15 29 01"
src="https://github.com/user-attachments/assets/5769a160-205d-4a03-ab7b-e037c65dd743"
/>


after:

<img width="667" height="371" alt="Screenshot 2025-10-31 at 15 27 51"
src="https://github.com/user-attachments/assets/12a4e034-6262-43a9-b257-894d74462d73"
/>
2025-10-31 17:18:55 +05:30
nitin d6bfbcc5ab add max widths on bars (#15487)
closes
https://discord.com/channels/1130383047699738754/1433444230176440560
before:


https://github.com/user-attachments/assets/db93c705-7c0a-407b-99d8-ecf8fd9eac1b


after:


https://github.com/user-attachments/assets/cb2a5e74-ea41-4381-9fbc-04efee12a50e
2025-10-31 11:15:53 +01:00
nitin 5211d6ac7e fix: make $groupBy parameter required in group-by queries (#15485)
before:

<img width="953" height="692" alt="Screenshot 2025-10-31 at 12 16 22"
src="https://github.com/user-attachments/assets/d2ec2a49-256d-4f17-baa7-6fb541e6e691"
/>

after:

<img width="960" height="718" alt="Screenshot 2025-10-31 at 12 16 34"
src="https://github.com/user-attachments/assets/39843363-8f77-40cc-8203-ed9895efa57e"
/>
2025-10-31 14:10:01 +05:30
Raphaël Bosi 769ce95cde Data labels improvements (#15475)
Create custom total component and display the total instead of each
group separately



https://github.com/user-attachments/assets/4e3edde8-9675-4bb1-834a-98dbff016063



https://github.com/user-attachments/assets/294555cc-a64b-4148-b1b9-f1dc0f0322ae

---------

Co-authored-by: ehconitin <nitinkoche03@gmail.com>
2025-10-30 23:47:37 +05:30
nitin 4c35cf305f Add support for negative bars on bar chart (#15418)
in app:

<img width="580" height="591" alt="Screenshot 2025-10-29 at 01 47 51"
src="https://github.com/user-attachments/assets/9e16a597-6367-454d-a726-668beac90e04"
/>

<img width="747" height="582" alt="Screenshot 2025-10-29 at 02 30 15"
src="https://github.com/user-attachments/assets/d06eb443-16ac-4394-bf4f-e6063f1ac12f"
/>

new stories: 

<img width="569" height="359" alt="Screenshot 2025-10-29 at 01 46 50"
src="https://github.com/user-attachments/assets/a4cd33e2-3f15-4b8d-8849-c2d990246dec"
/>
<img width="564" height="360" alt="Screenshot 2025-10-29 at 01 46 45"
src="https://github.com/user-attachments/assets/014a2110-53e4-4f99-afda-1d8c5412a815"
/>
<img width="604" height="372" alt="Screenshot 2025-10-29 at 01 46 40"
src="https://github.com/user-attachments/assets/bf7a73b4-fe29-40b7-b1a0-2894d5cbeccf"
/>
<img width="635" height="395" alt="Screenshot 2025-10-29 at 01 46 34"
src="https://github.com/user-attachments/assets/3cdfd3b9-dc76-4cf2-98e5-8e2a74e02ac6"
/>
<img width="652" height="408" alt="Screenshot 2025-10-29 at 01 46 30"
src="https://github.com/user-attachments/assets/c2837d8d-371f-44ac-b66b-8f41ba69245e"
/>
2025-10-30 17:40:34 +01:00
Ranjeet Baraik 0cbd1e8ec5 fix: login redirection to active objects (#15366)
Fixes - https://github.com/twentyhq/twenty/issues/15364

- Removed `activeNonSystemObjectMetadataItems` from the hook as it was
not necessary. Hook use `alphaSortedActiveNonSystemObjectMetadataItems`
now.
- Correctly check for read permissions.

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
2025-10-30 17:31:26 +01:00
nitin 2510cbf614 Add lock on dashboard restricted charts (#15476)
closes
https://discord.com/channels/1130383047699738754/1433452994132840478
2025-10-30 14:59:34 +00:00
nitin 33eaa4f2a2 Fix bar chart X-axis labels when groupBy matches aggregate field (#15473)
closes -
https://discord.com/channels/1130383047699738754/1430899754728030309
2025-10-30 15:53:17 +01:00
nitin abcc891aed overflown tabs should be selected upon clicking edit right button (#15469)
as per title
2025-10-30 19:23:00 +05:30
nitin 28333815d5 update chart tooltip designs (#15426)
closes
https://discord.com/channels/1130383047699738754/1430845815634657320

~~TODO: add truncation~~
2025-10-30 19:07:59 +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 65a329e900 Fix grip size on widgets (#15460)
Fix grip size on widgets

---------

Co-authored-by: ehconitin <nitinkoche03@gmail.com>
2025-10-30 11:38:02 +01:00
Raphaël Bosi 19ea9fff97 Set default graph axis display to NONE (#15459)
Set default graph axis display to NONE
2025-10-30 10:14:25 +00:00
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
nitin 0fdf76560d Widget cards (#15387)
figma -
https://www.figma.com/design/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=79795-372071&t=0Rg3h23G8F7v80cs-0

for the pinned tab column or the left column -- there is only one state
change! -- which, after talks with @Bonapara -- we should try to keep
the same if possible! -- right now, there is no way to test it -- so I
did not add the same

closes -
https://discord.com/channels/1130383047699738754/1430825706643918942 and
https://discord.com/channels/1130383047699738754/1430599763807436870

story QA - 
<img width="1535" height="1239" alt="Screenshot 2025-10-28 at 00 46 23"
src="https://github.com/user-attachments/assets/9293983e-2d08-427b-971f-731e6f1517aa"
/>
2025-10-28 20:25:52 +05:30
Baptiste Devessier b9bdb12b3c Hide page layout tab bar when there are less than two tabs to display (#15385)
- DIsplay the tab bar only if more than 1 tabs can be displayed
- Remove the selfDisplayMode feature: the first tab is now considered to
be the pinned tab on record pages


https://github.com/user-attachments/assets/3f61931d-fde4-4065-b646-5b3a7bdebcc0
2025-10-28 17:20:32 +05:30
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
Baptiste Devessier 24349cb729 Enable records layouts for all records except workflows (#15378)
https://github.com/user-attachments/assets/3cb30486-3409-459e-9d60-7f6f31ebe00c
2025-10-27 17:34:21 +01:00