Gantt Chart components with proper prop types in separate file

packages/component-list-layer/src/utils/manifests.ts

@@ -5,6 +5,7 @@ import ButtonManifests from "@atrilabs/react-component-manifests/src/manifests/B
 import AccordianManifests from "@atrilabs/react-component-manifests/src/manifests/Accordion/Accordion";
 import CarouselManifests from "@atrilabs/react-component-manifests/src/manifests/Carousel/Carousel";
 import CountdownManifests from "@atrilabs/react-component-manifests/src/manifests/Countdown/Countdown";
+import CountupManifests from "@atrilabs/react-component-manifests/src/manifests/CountUp/CountUp";
 import FlexManifests from "@atrilabs/react-component-manifests/src/manifests/Flex/Flex";
 import ImageManifests from "@atrilabs/react-component-manifests/src/manifests/Image/Image";
 import InputManifests from "@atrilabs/react-component-manifests/src/manifests/Input/Input";
@@ -24,6 +25,8 @@ import PieChartManifests from "@atrilabs/react-component-manifests/src/manifests
 import HistogramChartManifests from "@atrilabs/react-component-manifests/src/manifests/charts/HistogramChart/HistogramChart";
 import CandleStickManifests from "@atrilabs/react-component-manifests/src/manifests/charts/CandleStick/CandleStick";
 import RadialbarChartManifests from "@atrilabs/react-component-manifests/src/manifests/charts/RadialbarChart/RadiadbarChart";
+import GranttChartManifest from "@atrilabs/react-component-manifests/src/manifests/charts/GanttChart/GranttChart";
+import TreemapChartManifest from "@atrilabs/react-component-manifests/src/manifests/charts/TreemapChart/TreemapChart";
 import CheckboxManifests from "@atrilabs/react-component-manifests/src/manifests/Checkbox/Checkbox";
 import DropdownManifests from "@atrilabs/react-component-manifests/src/manifests/Dropdown/Dropdown";
 import TableManifests from "@atrilabs/react-component-manifests/src/manifests/Table/Table";
@@ -84,6 +87,7 @@ const defaultImports = [
   AccordianManifests,
   CarouselManifests,
   CountdownManifests,
+  CountupManifests,
   FlexManifests,
   ImageManifests,
   InputManifests,
@@ -103,6 +107,8 @@ const defaultImports = [
   HistogramChartManifests,
   CandleStickManifests,
   RadialbarChartManifests,
+  GranttChartManifest,
+  TreemapChartManifest,
   CheckboxManifests,
   DropdownManifests,
   TableManifests,

packages/react-component-manifests/src/manifest.config.js

@@ -41,6 +41,10 @@ module.exports = {
       modulePath: "./src/manifests/Countdown/Countdown.tsx",
       exportedVarName: "Countdown",
     },
+    Countup: {
+      modulePath: "./src/manifests/CountUp/CountUp.tsx",
+      exportedVarName: "Countup",
+    },
     Link: {
       modulePath: "./src/manifests/Link/Link.tsx",
       exportedVarName: "Link",
@@ -101,6 +105,14 @@ module.exports = {
       modulePath: "./src/manifests/charts/RadialbarChart/RadialbarChart.tsx",
       exportedVarName: "RadialbarChart",
     },
+    GanttChart: {
+      modulePath: "./src/manifests/charts/GranttChart/GanttChart.tsx",
+      exportedVarName: "GanttChart",
+    },
+    TreemapChart: {
+      modulePath: "./src/manifests/charts/TreemapChart/TreemapChart.tsx",
+      exportedVarName: "TreemapChart",
+    },
     Checkbox: {
       modulePath: "./src/manifests/Checkbox/Checkbox.tsx",
       exportedVarName: "Checkbox",

packages/react-component-manifests/src/manifests/CountUp/CountUp.tsx

@@ -0,0 +1,121 @@
+import React, { forwardRef } from "react";
+import reactSchemaId from "@atrilabs/react-component-manifest-schema?id";
+import type { ReactComponentManifestSchema } from "@atrilabs/react-component-manifest-schema/lib/types";
+import iconSchemaId from "@atrilabs/component-icon-manifest-schema?id";
+import { CommonIcon } from "../CommonIcon";
+import CSSTreeId from "@atrilabs/app-design-forest/lib/cssTree?id";
+import { CSSTreeOptions } from "@atrilabs/app-design-forest/lib/cssTree";
+import { CustomPropsTreeOptions } from "@atrilabs/app-design-forest/lib/customPropsTree";
+import CustomTreeId from "@atrilabs/app-design-forest/lib/customPropsTree?id";
+import "./Countup.css";
+import { ReactComponent as Icon } from "./icon.svg";
+import { CountUpAnimation } from "./CountUpAnimation";
+export type DateTimeDisplayComponentTypes = {
+  value: number;
+  type: string;
+};
+export type ShowCounterComponentTypes = {
+  className?: string;
+};
+export const ShowCounter: React.FC<ShowCounterComponentTypes> = ({
+  className,
+}) => {
+  return <div style={{ display: "inline-flex", padding: "1rem" }}></div>;
+};
+export type CountupProps = {
+  styles: React.CSSProperties;
+  custom: {
+    itemCount: number;
+    duration: number;
+    items: {
+      coutUpTo: string;
+      itemTitle: string;
+    }[];
+  };
+  className?: string;
+};
+export const Countup = forwardRef<HTMLDivElement, CountupProps>(
+  (props, ref) => {
+    return (
+      <div ref={ref} style={{ display: "inline-flex", ...props.styles }}>
+        <CountUpAnimation
+          value={props.custom.itemCount}
+          duration={props.custom.duration}
+        />
+      </div>
+    );
+  }
+);
+export const DevCountup = forwardRef<HTMLDivElement, CountupProps>(
+  (props, ref) => {
+    return <Countup ref={ref} {...props} />;
+  }
+);
+const cssTreeOptions: CSSTreeOptions = {
+  flexContainerOptions: false,
+  flexChildOptions: true,
+  positionOptions: true,
+  typographyOptions: true,
+  spacingOptions: true,
+  sizeOptions: true,
+  borderOptions: true,
+  outlineOptions: true,
+  backgroundOptions: true,
+  miscellaneousOptions: true,
+};
+const customTreeOptions: CustomPropsTreeOptions = {
+  dataTypes: {
+    itemCount: { type: "number" },
+    duration: { type: "number" },
+  },
+};
+const compManifest: ReactComponentManifestSchema = {
+  meta: { key: "Countup", category: "Basics" },
+  render: {
+    comp: Countup,
+  },
+  dev: {
+    comp: DevCountup,
+    decorators: [],
+    attachProps: {
+      styles: {
+        treeId: CSSTreeId,
+        initialValue: {},
+        treeOptions: cssTreeOptions,
+        canvasOptions: { groupByBreakpoint: true },
+      },
+      custom: {
+        treeId: CustomTreeId,
+        initialValue: {
+          itemCount: 50,
+          duration: 2000,
+          items: [],
+        },
+        treeOptions: customTreeOptions,
+        canvasOptions: { groupByBreakpoint: false },
+      },
+    },
+    attachCallbacks: {},
+    defaultCallbackHandlers: {},
+  },
+};
+
+const iconManifest = {
+  panel: { comp: CommonIcon, props: { name: "Countup", svg: Icon } },
+  drag: {
+    comp: CommonIcon,
+    props: {
+      name: "Countup",
+      containerStyle: { padding: "1rem" },
+      svg: Icon,
+    },
+  },
+  renderSchema: compManifest,
+};
+
+export default {
+  manifests: {
+    [reactSchemaId]: [compManifest],
+    [iconSchemaId]: [iconManifest],
+  },
+};

packages/react-component-manifests/src/manifests/CountUp/CountUpAnimation.tsx

@@ -0,0 +1,28 @@
+import React, { useEffect, useState } from "react";
+const easeOutQuad = (t: number) => t * (2 - t);
+const frameDuration = 1000 / 60;
+export const CountUpAnimation: React.FC<CountUpAnimationProp> = ({
+  value,
+  duration = 2000,
+}) => {
+  const [count, setCount] = useState(0);
+  useEffect(() => {
+    let frame = 0;
+    const totalFrames = Math.round(duration / frameDuration);
+    const counter = setInterval(() => {
+      frame++;
+      const progress = easeOutQuad(frame / totalFrames);
+      setCount(value * progress);
+
+      if (frame === totalFrames) {
+        clearInterval(counter);
+      }
+    }, frameDuration);
+  }, [value, duration]);
+  return <>{Math.floor(count)}</>;
+};
+interface CountUpAnimationProp {
+  value: number;
+  duration?: number;
+}
+//Reference : https://jshakespeare.com/simple-count-up-number-animation-javascript-react/

packages/react-component-manifests/src/manifests/Countdown/useCountdown.tsx

@@ -1,5 +1,4 @@
 import { useEffect, useState } from "react";
-
 export type useCountdownHookType = {
   targetDate: number;
   countDown: number;