[Dashboard]- Add GraphWidgetLineChart (#14386)

closes https://github.com/twentyhq/core-team-issues/issues/1371

packages/twenty-front/src/modules/settings/page-layout/components/GraphWidgetRenderer.tsx

@@ -1,5 +1,6 @@
 import { GraphWidgetBarChart } from '@/dashboards/widgets/graph/components/GraphWidgetBarChart';
 import { GraphWidgetGaugeChart } from '@/dashboards/widgets/graph/components/GraphWidgetGaugeChart';
+import { GraphWidgetLineChart } from '@/dashboards/widgets/graph/components/GraphWidgetLineChart';
 import { GraphWidgetNumberChart } from '@/dashboards/widgets/graph/components/GraphWidgetNumberChart';
 import { GraphWidgetPieChart } from '@/dashboards/widgets/graph/components/GraphWidgetPieChart';
 import { GraphType } from '../mocks/mockWidgets';
@@ -69,6 +70,28 @@ export const GraphWidgetRenderer = ({ widget }: GraphWidgetRendererProps) => {
         />
       );
 
+    case GraphType.LINE:
+      return (
+        <GraphWidgetLineChart
+          id={`line-chart-${widget.id}`}
+          data={widget.data.series}
+          enableArea={widget.data.enableArea}
+          showLegend={widget.data.showLegend}
+          showGrid={widget.data.showGrid}
+          enablePoints={widget.data.enablePoints}
+          xAxisLabel={widget.data.xAxisLabel}
+          yAxisLabel={widget.data.yAxisLabel}
+          displayType={widget.data.displayType}
+          prefix={widget.data.prefix}
+          suffix={widget.data.suffix}
+          xScale={widget.data.xScale}
+          yScale={widget.data.yScale}
+          curve={widget.data.curve}
+          stackedArea={widget.data.stackedArea}
+          enableSlices={widget.data.enableSlices}
+        />
+      );
+
     default:
       return null;
   }

packages/twenty-front/src/modules/settings/page-layout/mocks/mockWidgets.ts

@@ -13,6 +13,7 @@ export enum GraphType {
   GAUGE = 'GAUGE',
   PIE = 'PIE',
   BAR = 'BAR',
+  LINE = 'LINE',
 }
 
 export const mockPageLayoutWidgets: PageLayoutWidget[] = [

packages/twenty-front/src/modules/settings/page-layout/utils/getDefaultWidgetData.ts

@@ -41,6 +41,67 @@ export const getDefaultWidgetData = (graphType: GraphType) => {
         layout: 'vertical' as const,
       };
 
+    case GraphType.LINE:
+      return {
+        series: [
+          {
+            id: 'revenue',
+            label: 'Revenue',
+            color: 'blue',
+            data: [
+              { x: 0, y: 30 },
+              { x: 1, y: 50 },
+              { x: 2, y: 45 },
+              { x: 3, y: 70 },
+              { x: 4, y: 65 },
+              { x: 5, y: 80 },
+              { x: 6, y: 75 },
+              { x: 7, y: 85 },
+            ],
+            enableArea: true,
+          },
+          {
+            id: 'costs',
+            label: 'Costs',
+            color: 'red',
+            data: [
+              { x: 0, y: 60 },
+              { x: 1, y: 45 },
+              { x: 2, y: 55 },
+              { x: 3, y: 40 },
+              { x: 4, y: 60 },
+              { x: 5, y: 50 },
+              { x: 6, y: 70 },
+              { x: 7, y: 65 },
+            ],
+            enableArea: true,
+          },
+          {
+            id: 'profit',
+            label: 'Profit',
+            color: 'turquoise',
+            data: [
+              { x: 0, y: 45 },
+              { x: 1, y: 60 },
+              { x: 2, y: 35 },
+              { x: 3, y: 55 },
+              { x: 4, y: 50 },
+              { x: 5, y: 65 },
+              { x: 6, y: 40 },
+              { x: 7, y: 75 },
+            ],
+            enableArea: true,
+          },
+        ],
+        enableArea: true,
+        showLegend: true,
+        showGrid: true,
+        enablePoints: false,
+        curve: 'monotoneX',
+        displayType: 'shortNumber',
+        prefix: '$',
+      };
+
     default:
       return {};
   }
@@ -52,6 +113,7 @@ export const getWidgetTitle = (graphType: GraphType, index: number): string => {
     [GraphType.GAUGE]: 'Gauge',
     [GraphType.PIE]: 'Pie Chart',
     [GraphType.BAR]: 'Bar Chart',
+    [GraphType.LINE]: 'Line Chart',
   };
 
   return `${baseNames[graphType] || 'Widget'} ${index + 1}`;
@@ -67,6 +129,8 @@ export const getWidgetSize = (graphType: GraphType) => {
       return { w: 4, h: 4 };
     case GraphType.BAR:
       return { w: 6, h: 4 };
+    case GraphType.LINE:
+      return { w: 6, h: 10 };
     default:
       return { w: 4, h: 4 };
   }