Adding Remote Gantt Chart

client/packages/lowcoder-design/src/icons/index.ts

@@ -350,6 +350,7 @@ export { ReactComponent as GeoMapLayersCompIconSmall } from "./v2/geomap-layers-
 export { ReactComponent as HillchartCompIconSmall } from "./v2/hillchart-s.svg"; // new
 export { ReactComponent as PivotTableCompIconSmall } from "./v2/pivot-table-s.svg"; // new
 export { ReactComponent as TurnstileCaptchaCompIconSmall } from "./v2/turnstile-captcha-s.svg"; // new
+export { ReactComponent as GanttCompIconSmall } from "./v2/gantt-chart-s.svg"; // new
 
 
 // medium
@@ -435,6 +436,7 @@ export { ReactComponent as VideoCameraStreamCompIcon } from "./v2/camera-stream-
 export { ReactComponent as VideoScreenshareCompIcon } from "./v2/screen-share-stream-m.svg";
 export { ReactComponent as StepCompIcon } from "./v2/steps-m.svg";
 export { ReactComponent as SignatureCompIcon } from "./v2/signature-m.svg";
+export { ReactComponent as GanttCompIcon } from "./v2/gantt-chart-m.svg";
 
 export { ReactComponent as CandlestickChartCompIcon } from "./v2/candlestick-chart-m.svg";
 export { ReactComponent as FunnelChartCompIcon } from "./v2/funnel-chart-m.svg";

client/packages/lowcoder/src/comps/index.tsx

@@ -108,7 +108,8 @@ import {
   HillchartCompIcon,
   TurnstileCaptchaCompIcon,
   PivotTableCompIcon,
-  GraphChartCompIcon
+  GraphChartCompIcon,
+  GanttCompIcon,
 
 } from "lowcoder-design";
 
@@ -1225,6 +1226,25 @@ export var uiCompMap: Registry = {
 
   // Project Management
 
+  ganttChart: {
+    name: trans("uiComp.ganttChartCompName"),
+    enName: "ganttChart",
+    description: trans("uiComp.ganttChartCompDesc"),
+    categories: ["projectmanagement"],
+    icon: GanttCompIcon,
+    keywords: trans("uiComp.ganttChartCompKeywords"),
+    comp: remoteComp({
+      compName: "ganttchart",
+      packageName: "lowcoder-comp-gantt-chart",
+      source: "npm",
+      isRemote: true,
+    }),
+    layoutInfo: {
+      w: 20,
+      h: 60,
+    },
+  },
+
   hillchart: {
     name: trans("uiComp.hillchartCompName"),
     enName: "Hillchart",

client/packages/lowcoder/src/comps/uiCompRegistry.ts

@@ -161,6 +161,7 @@ export type UICompType =
   | "themeriverChart" 
   | "basicChart"
   | "columnLayout"
+  | "ganttChart"
   ;
 
 

client/packages/lowcoder/src/i18n/locales/en.ts

@@ -1222,6 +1222,10 @@ export const en = {
     "shapeCompDesc": "A collection of geometric shapes for use with diagrams, illustrations, and visualizations.",
     "shapeCompKeywords": "shapes, geometric, diagrams, illustrations",
 
+    "ganttChartCompName" : "Gantt Chart",
+    "ganttChartCompDesc" : "A chart that illustrates a project schedule, showing the start and finish dates of elements and dependencies.",
+    "ganttChartCompKeywords" : "gantt chart, project management, schedule",
+
     // by mousheng
 
     "colorPickerCompName": "Color Picker",

client/packages/lowcoder/src/pages/editor/editorConstants.tsx

@@ -82,6 +82,7 @@ import {
   ColorPickerCompIconSmall,
   TransferCompIconSmall,
   ShapesCompIconSmall,
+  GanttCompIconSmall,
 
   CandlestickChartCompIconSmall,
   FunnelChartCompIconSmall,
@@ -182,8 +183,9 @@ export const CompStateIcon: {
   treeSelect: <TreeSelectCompIconSmall />,
   video: <VideoCompIconSmall />,
   videocomponent: <VideoCameraStreamCompIconSmall />,
-  
+
   hillchart: <HillchartCompIconSmall/>,  
+  ganttChart: <GanttCompIconSmall/>,
   openLayersGeoMap: <GeoMapLayersCompIconSmall/>,  
   chartsGeoMap: <GeoMapChartsCompIconSmall/>,  
   bpmnEditor: <BPMNEditorCompIconSmall/>,