From 8114ed012ad914c644d7efd9ea843c1fad21003d Mon Sep 17 00:00:00 2001
From: Justin <justin.eiletz@outlook.com>
Date: Mon, 7 Apr 2025 22:11:48 +0200
Subject: [PATCH 01/35] Feature Request:  - TechCarousel.tsx  -
 TechCarousel.module.scss

 Display different Tech/Specs including icons through icons.ts

 usage example:

 	const techStack= ["Java", "React", "Java", "Spring", "Hibernate", "Vue", "MySQL", "Docker", "Git", "Angular", "Javascript"]

 				<TechCarousel
 					items={techStack}
 					center
 					gap="xs"
 				/>
---
 src/once-ui/components/Badge.tsx              |  2 +-
 .../components/TechCarousel.module.scss       |  8 ++
 src/once-ui/components/TechCarousel.tsx       | 89 +++++++++++++++++++
 src/once-ui/icons.ts                          | 35 +++++++-
 4 files changed, 131 insertions(+), 3 deletions(-)
 create mode 100644 src/once-ui/components/TechCarousel.module.scss
 create mode 100644 src/once-ui/components/TechCarousel.tsx

diff --git a/src/once-ui/components/Badge.tsx b/src/once-ui/components/Badge.tsx
index 804dc2cb..7370628e 100644
--- a/src/once-ui/components/Badge.tsx
+++ b/src/once-ui/components/Badge.tsx
@@ -6,7 +6,7 @@ import { Arrow, Flex, Icon, SmartLink, Text } from ".";
 import styles from "./Badge.module.scss";
 import { IconName } from "../icons";
 
-interface BadgeProps extends React.ComponentProps<typeof Flex> {
+export interface BadgeProps extends React.ComponentProps<typeof Flex> {
   title?: string;
   icon?: IconName;
   arrow?: boolean;
diff --git a/src/once-ui/components/TechCarousel.module.scss b/src/once-ui/components/TechCarousel.module.scss
new file mode 100644
index 00000000..59641851
--- /dev/null
+++ b/src/once-ui/components/TechCarousel.module.scss
@@ -0,0 +1,8 @@
+.marqueeContent {
+  animation: marquee 20s linear infinite;
+}
+
+@keyframes marquee {
+  0% { transform: translateX(0%); }
+  100% { transform: translateX(-50%); }
+}
\ No newline at end of file
diff --git a/src/once-ui/components/TechCarousel.tsx b/src/once-ui/components/TechCarousel.tsx
new file mode 100644
index 00000000..28212b50
--- /dev/null
+++ b/src/once-ui/components/TechCarousel.tsx
@@ -0,0 +1,89 @@
+import { Row, RevealFx, Flex, Badge, BadgeProps } from "@/once-ui/components";
+import styles from "./TechCarousel.module.scss";
+import { IconName } from "@/once-ui/icons";
+import React from "react";
+import {SpacingToken} from "@/once-ui/types";
+
+const defaultIconMap: Record<string, IconName> = {
+	java: 'java',
+	typescript: 'typescript',
+	javascript: 'js',
+	
+	spring: 'spring',
+	hibernate: 'hibernate',
+	react: 'react',
+	angular: 'angular',
+	vue: 'vue',
+	nodejs: 'node',
+	
+	postgresql: 'postgres',
+	mysql: 'mysql',
+	mongodb: 'mongo',
+	
+	docker: 'docker',
+	kubernetes: 'kubernetes',
+	aws: 'aws',
+	gcp: 'gcp',
+	git: 'git',
+	
+	graphql: 'graphql',
+	redis: 'redis',
+	nginx: 'nginx'
+};
+
+type TechItem = string | {
+	name: string;
+	icon?: IconName;
+};
+
+type TechCarouselProps = {
+	items: TechItem[];
+	textVariant?: BadgeProps["textVariant"];
+	spacing?: SpacingToken | "-1" | undefined;
+	iconMap?: Record<string, IconName>;
+} & Partial<BadgeProps>;
+
+const TechCarousel = ({
+	                      items,
+	                      textVariant = "body-default-s",
+	                      spacing = "s",
+	                      iconMap = {},
+	                      ...badgeProps
+                      }: TechCarouselProps) => {
+	
+	const mergedIconMap = { ...defaultIconMap, ...iconMap };
+	
+	const normalizedItems = items.map(item =>
+		typeof item === 'string' ? { name: item } : item
+	);
+	
+	return (
+		<Row position="relative" overflow="hidden" fillWidth padding="l">
+			<Flex gap={spacing} className={styles.marqueeContent}>
+				{[...normalizedItems, ...normalizedItems].map((item, i) => {
+					const iconName = item.icon || mergedIconMap[item.name.toLowerCase()];
+					
+					return (
+						<RevealFx
+							key={`${item.name}-${i}`}
+							delay={0.7 + (i % items.length) * 0.1}
+							translateY={5}
+						>
+							<Badge
+								background="transparent"
+								border="transparent"
+								shadow="xs"
+								textVariant={textVariant}
+								icon={iconName}
+								title={item.name}
+								{...badgeProps}
+							/>
+						</RevealFx>
+					);
+				})}
+			</Flex>
+		</Row>
+	);
+};
+
+export { TechCarousel, defaultIconMap };
\ No newline at end of file
diff --git a/src/once-ui/icons.ts b/src/once-ui/icons.ts
index 8a1e6f38..d8d511f0 100644
--- a/src/once-ui/icons.ts
+++ b/src/once-ui/icons.ts
@@ -33,9 +33,21 @@ import {
 
 import { RiVisaLine } from "react-icons/ri";
 
-import { FaDiscord, FaGithub, FaGoogle } from "react-icons/fa6";
+import {FaAmazon, FaDiscord, FaGitAlt, FaGithub, FaGoogle} from "react-icons/fa6";
 
 import { LuChevronsLeftRight } from "react-icons/lu";
+import {FaJava} from "react-icons/fa";
+import {
+  SiAngular,
+  SiDocker, SiGooglecloud, SiGraphql,
+  SiHibernate,
+  SiKubernetes,
+  SiMongodb,
+  SiMysql, SiNginx, SiNodedotjs,
+  SiPostgresql, SiReact, SiRedis,
+  SiSpring,
+  SiTypescript, SiVuedotjs
+} from "react-icons/si";
 
 export const iconLibrary: Record<string, IconType> = {
   chevronUp: HiChevronUp,
@@ -70,7 +82,26 @@ export const iconLibrary: Record<string, IconType> = {
   visa: RiVisaLine,
   security: HiOutlineShieldCheck,
   sparkle: HiOutlineSparkles,
-  computer: HiOutlineComputerDesktop
+  computer: HiOutlineComputerDesktop,
+  java: FaJava,
+  spring: SiSpring,
+  hibernate: SiHibernate,
+  typescript: SiTypescript,
+  postgres: SiPostgresql,
+  mysql: SiMysql,
+  mongo: SiMongodb,
+  docker: SiDocker,
+  kubernetes: SiKubernetes,
+  aws: FaAmazon,
+  gcp: SiGooglecloud,
+  react: SiReact,
+  angular: SiAngular,
+  vue: SiVuedotjs,
+  node: SiNodedotjs,
+  graphql: SiGraphql,
+  redis: SiRedis,
+  nginx: SiNginx,
+  git: FaGitAlt
 };
 
 export type IconLibrary = typeof iconLibrary;

From 3bc3a7026ad717fd1f8c53ba02fb26fa1621c666 Mon Sep 17 00:00:00 2001
From: Justin <justin.eiletz@outlook.com>
Date: Thu, 15 May 2025 17:24:54 +0200
Subject: [PATCH 02/35] feat(components): add customizable ProgressRing
 component

- Implement SVG-based circular progress indicator with dynamic rendering
- Add size variants (s/m/l) and tone options (primary/warning/success)
- Include optional text label display with responsive positioning
- Support accessibility through ARIA attribute calculations
- Add smooth transition animations for value changes
- Create CSS module styles for maintainable theming
- Export component with TypeScript interface for type safety
---
 .../components/ProgressRing.module.scss       | 47 +++++++++++
 src/once-ui/components/ProgressRing.tsx       | 71 +++++++++++++++++
 src/once-ui/components/SVG.tsx                | 77 +++++++++++++++++++
 3 files changed, 195 insertions(+)
 create mode 100644 src/once-ui/components/ProgressRing.module.scss
 create mode 100644 src/once-ui/components/ProgressRing.tsx
 create mode 100644 src/once-ui/components/SVG.tsx

diff --git a/src/once-ui/components/ProgressRing.module.scss b/src/once-ui/components/ProgressRing.module.scss
new file mode 100644
index 00000000..2e782f0b
--- /dev/null
+++ b/src/once-ui/components/ProgressRing.module.scss
@@ -0,0 +1,47 @@
+.container {
+  --progress-color: var(--accent-alpha-strong);
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  &.size {
+    &-s { width: 6rem; height: 6rem; }
+    &-m { width: 8rem; height: 8rem; }
+    &-l { width: 10rem; height: 10rem; }
+  }
+
+  &.tone {
+    &-warning { --progress-color: var(--warning-alpha-strong); }
+    &-success { --progress-color: var(--success-alpha-strong); }
+  }
+}
+
+.svg {
+  width: 100%;
+  height: 100%;
+  transform: rotate(-90deg);
+}
+
+.background {
+  fill: none;
+  stroke: var(--progress-color);
+  opacity: 0.4;
+}
+
+.progress {
+  fill: var(--surface-background);
+  stroke: var(--progress-color);
+  stroke-linecap: round;
+  transition: stroke-dashoffset 1.3s cubic-bezier(0.65, 0, 0.35, 1);
+}
+
+.label {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: var(--foreground-strong);
+  font-weight: 600;
+}
\ No newline at end of file
diff --git a/src/once-ui/components/ProgressRing.tsx b/src/once-ui/components/ProgressRing.tsx
new file mode 100644
index 00000000..0270b316
--- /dev/null
+++ b/src/once-ui/components/ProgressRing.tsx
@@ -0,0 +1,71 @@
+"use client";
+
+import styles from "./ProgressRing.module.scss";
+import { Column, Text } from "@/once-ui/components";
+import {SVG} from "@/once-ui/components/SVG";
+
+interface ProgressRingProps {
+    value: number;
+    size?: "s" | "m" | "l";
+    tone?: "primary" | "warning" | "success";
+    label?: string;
+}
+
+export const ProgressRing = ({
+                                 value,
+                                 size = "s",
+                                 tone = "primary",
+                                 label
+                             }: ProgressRingProps) => {
+    const strokeWidth = 4;
+    const radius = {
+        s: 30,
+        m: 45,
+        l: 60
+    }[size];
+
+    const normalizedRadius = radius - strokeWidth;
+    const circumference = normalizedRadius * 2 * Math.PI;
+    const strokeDashoffset = circumference - (value / 100) * circumference;
+
+    return (
+        <Column
+            className={`
+        ${styles.container}
+        ${styles[`size-${size}`]}
+        ${styles[`tone-${tone}`]}
+      `}
+        >
+            <SVG
+                className={styles.svg}
+                viewBox={`0 0 ${radius * 2} ${radius * 2}`}
+            >
+                <circle
+                    className={styles.background}
+                    cx={radius}
+                    cy={radius}
+                    r={normalizedRadius}
+                    strokeWidth={strokeWidth}
+                />
+                <circle
+                    className={styles.progress}
+                    cx={radius}
+                    cy={radius}
+                    r={normalizedRadius}
+                    strokeWidth={strokeWidth}
+                    strokeDasharray={`${circumference} ${circumference}`}
+                    style={{ strokeDashoffset }}
+                />
+            </SVG>
+
+            {label && (
+                <Text
+                    variant="body-strong-m"
+                    className={styles.label}
+                >
+                    {label}
+                </Text>
+            )}
+        </Column>
+    );
+};
\ No newline at end of file
diff --git a/src/once-ui/components/SVG.tsx b/src/once-ui/components/SVG.tsx
new file mode 100644
index 00000000..0dc7cae4
--- /dev/null
+++ b/src/once-ui/components/SVG.tsx
@@ -0,0 +1,77 @@
+"use client";
+
+import React, { ElementType, ComponentPropsWithoutRef } from "react";
+import classNames from "classnames";
+import {CommonProps, SpacingProps} from "@/once-ui/interfaces";
+import {ColorScheme, ColorWeight, SpacingToken} from "@/once-ui/types";
+
+type SVGProps<T extends ElementType> =
+    ComponentPropsWithoutRef<"svg"> &
+    CommonProps &
+    SpacingProps & {
+    as?: T;
+    colorScheme?: ColorScheme;
+    colorWeight?: ColorWeight;
+    strokeScheme?: ColorScheme;
+    strokeWeight?: ColorWeight;
+    interactive?: boolean;
+    size?: "x" | "s" | "m" | "l" | "xl";
+};
+
+export const SVG = <T extends ElementType = "svg">({
+                                                as,
+                                                colorScheme = "neutral",
+                                                colorWeight = "weak",
+                                                strokeScheme,
+                                                strokeWeight = "weak",
+                                                interactive = false,
+                                                size = "m",
+                                                padding,
+                                                margin,
+                                                className,
+                                                style,
+                                                children,
+                                                ...props
+                                            }: SVGProps<T>) => {
+    const Component = as || "svg";
+
+    const generateColorClass = (
+        type: "fill" | "stroke",
+        scheme?: ColorScheme,
+        weight?: ColorWeight
+    ) => {
+        if (!scheme) return "";
+        return `${type}-${scheme}-${weight}`;
+    };
+
+    const generateSpacingClass = (prefix: string, token?: SpacingToken) => {
+        return token ? `${prefix}-${token}` : "";
+    };
+
+    const classes = classNames(
+        "transition-colors",
+        generateColorClass("fill", colorScheme, colorWeight),
+        generateColorClass("stroke", strokeScheme, strokeWeight),
+        generateSpacingClass("p", padding),
+        generateSpacingClass("m", margin),
+        {
+            "cursor-pointer hover:scale-105": interactive,
+            "opacity-hoverable": interactive
+        },
+        className
+    );
+
+    return (
+        <Component
+            className={classes}
+            style={{
+                width: size,
+                height: size,
+                ...style
+            }}
+            {...props}
+        >
+            {children}
+        </Component>
+    );
+};
\ No newline at end of file

From 6c84e140ee169578418f8453fd894410452330f6 Mon Sep 17 00:00:00 2001
From: Adhitya Nadooli <127269031+lightyfr@users.noreply.github.com>
Date: Thu, 27 Mar 2025 15:14:10 -0400
Subject: [PATCH 03/35] Add data-viz modules, add components to index, add
 recharts to package.json (#39)

# Conflicts:
#	src/once-ui/components/index.ts
---
 package-lock.json                             | 359 +++++++++++++++++-
 package.json                                  |   1 +
 src/once-ui/components/BarGraph.module.scss   |  56 +++
 src/once-ui/components/BarGraph.tsx           | 241 ++++++++++++
 .../components/LineBarGraph.module.scss       |  53 +++
 src/once-ui/components/LineBarGraph.tsx       | 315 +++++++++++++++
 src/once-ui/components/LineGraph.module.scss  |  62 +++
 src/once-ui/components/LineGraph.tsx          | 261 +++++++++++++
 src/once-ui/components/MultiBarGraph.tsx      | 249 ++++++++++++
 src/once-ui/components/index.ts               |   4 +
 10 files changed, 1600 insertions(+), 1 deletion(-)
 create mode 100644 src/once-ui/components/BarGraph.module.scss
 create mode 100644 src/once-ui/components/BarGraph.tsx
 create mode 100644 src/once-ui/components/LineBarGraph.module.scss
 create mode 100644 src/once-ui/components/LineBarGraph.tsx
 create mode 100644 src/once-ui/components/LineGraph.module.scss
 create mode 100644 src/once-ui/components/LineGraph.tsx
 create mode 100644 src/once-ui/components/MultiBarGraph.tsx

diff --git a/package-lock.json b/package-lock.json
index 539710c2..9eb5d298 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,7 @@
         "react": "19.0.0",
         "react-dom": "19.0.0",
         "react-icons": "^5.2.1",
+        "recharts": "^2.15.1",
         "sass": "^1.77.6",
         "sharp": "^0.33.4"
       },
@@ -32,6 +33,17 @@
         "typescript": "5.8.2"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.27.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.0.tgz",
+      "integrity": "sha512-VtPOkrdPHZsKc/clNqyi9WUA8TINkZ4cGk63UUE3u4pmB2k+ZMQRDuIOagv8UVd6j7k0T3+RRIb7beKTebNbcw==",
+      "dependencies": {
+        "regenerator-runtime": "^0.14.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@biomejs/biome": {
       "version": "1.9.4",
       "resolved": "https://registry.npmjs.org/@biomejs/biome/-/biome-1.9.4.tgz",
@@ -2081,6 +2093,60 @@
         "tslib": "^2.8.0"
       }
     },
+    "node_modules/@types/d3-array": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.1.tgz",
+      "integrity": "sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg=="
+    },
+    "node_modules/@types/d3-color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A=="
+    },
+    "node_modules/@types/d3-ease": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA=="
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@types/d3-path": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
+      "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg=="
+    },
+    "node_modules/@types/d3-scale": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
+      "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
+      "dependencies": {
+        "@types/d3-time": "*"
+      }
+    },
+    "node_modules/@types/d3-shape": {
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.7.tgz",
+      "integrity": "sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg==",
+      "dependencies": {
+        "@types/d3-path": "*"
+      }
+    },
+    "node_modules/@types/d3-time": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
+      "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g=="
+    },
+    "node_modules/@types/d3-timer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
+      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw=="
+    },
     "node_modules/@types/node": {
       "version": "20.17.23",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.17.23.tgz",
@@ -2257,6 +2323,14 @@
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
       "license": "MIT"
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
@@ -2414,9 +2488,123 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true,
       "license": "MIT"
     },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
+      "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/decimal.js-light": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
+      "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg=="
+    },
     "node_modules/detect-libc": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
@@ -2430,6 +2618,15 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.112",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.112.tgz",
@@ -2445,6 +2642,19 @@
         "node": ">=6"
       }
     },
+    "node_modules/eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
+    },
+    "node_modules/fast-equals": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-5.2.2.tgz",
+      "integrity": "sha512-V7/RktU11J3I36Nwq2JnZEM7tNm17eBJz+u25qdxBZeCKiX6BkVSZQjwWIr+IobgnZy+ag73tTZgZi7tr0LrBw==",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/fill-range": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
@@ -2477,6 +2687,14 @@
       "integrity": "sha512-P8IdPQHq3lA1xVeBRi5VPqUm5HDgKnx0Ru51wZz5mjxHr5n3RWhjIpOFU7ybkUxfB+5IToy+OLaHYDBIWsv+uw==",
       "license": "MIT"
     },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/is-arrayish": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
@@ -2528,6 +2746,27 @@
         "node": ">=0.12.0"
       }
     },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+    },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
     "node_modules/micromatch": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
@@ -2664,6 +2903,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -3420,6 +3667,21 @@
         "node": ">=6"
       }
     },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "node_modules/prop-types/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/react": {
       "version": "19.0.0",
       "resolved": "https://registry.npmjs.org/react/-/react-19.0.0.tgz",
@@ -3450,6 +3712,40 @@
         "react": "*"
       }
     },
+    "node_modules/react-is": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="
+    },
+    "node_modules/react-smooth": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-4.0.4.tgz",
+      "integrity": "sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q==",
+      "dependencies": {
+        "fast-equals": "^5.0.1",
+        "prop-types": "^15.8.1",
+        "react-transition-group": "^4.4.5"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
     "node_modules/readdirp": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
@@ -3463,6 +3759,41 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
+    "node_modules/recharts": {
+      "version": "2.15.1",
+      "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.15.1.tgz",
+      "integrity": "sha512-v8PUTUlyiDe56qUj82w/EDVuzEFXwEHp9/xOowGAZwfLjB9uAy3GllQVIYMWF6nU+qibx85WF75zD7AjqoT54Q==",
+      "dependencies": {
+        "clsx": "^2.0.0",
+        "eventemitter3": "^4.0.1",
+        "lodash": "^4.17.21",
+        "react-is": "^18.3.1",
+        "react-smooth": "^4.0.4",
+        "recharts-scale": "^0.4.4",
+        "tiny-invariant": "^1.3.1",
+        "victory-vendor": "^36.6.8"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/recharts-scale": {
+      "version": "0.4.5",
+      "resolved": "https://registry.npmjs.org/recharts-scale/-/recharts-scale-0.4.5.tgz",
+      "integrity": "sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==",
+      "dependencies": {
+        "decimal.js-light": "^2.4.1"
+      }
+    },
+    "node_modules/regenerator-runtime": {
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
+    },
     "node_modules/sass": {
       "version": "1.85.1",
       "resolved": "https://registry.npmjs.org/sass/-/sass-1.85.1.tgz",
@@ -3598,6 +3929,11 @@
         }
       }
     },
+    "node_modules/tiny-invariant": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg=="
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -3673,6 +4009,27 @@
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "license": "MIT"
+    },
+    "node_modules/victory-vendor": {
+      "version": "36.9.2",
+      "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-36.9.2.tgz",
+      "integrity": "sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==",
+      "dependencies": {
+        "@types/d3-array": "^3.0.3",
+        "@types/d3-ease": "^3.0.0",
+        "@types/d3-interpolate": "^3.0.1",
+        "@types/d3-scale": "^4.0.2",
+        "@types/d3-shape": "^3.1.0",
+        "@types/d3-time": "^3.0.0",
+        "@types/d3-timer": "^3.0.0",
+        "d3-array": "^3.1.6",
+        "d3-ease": "^3.0.1",
+        "d3-interpolate": "^3.0.1",
+        "d3-scale": "^4.0.2",
+        "d3-shape": "^3.1.0",
+        "d3-time": "^3.0.0",
+        "d3-timer": "^3.0.1"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 95887803..e9ede82c 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "react-icons": "^5.2.1",
+    "recharts": "^2.15.1",
     "sass": "^1.77.6",
     "sharp": "^0.33.4"
   },
diff --git a/src/once-ui/components/BarGraph.module.scss b/src/once-ui/components/BarGraph.module.scss
new file mode 100644
index 00000000..ec2f0669
--- /dev/null
+++ b/src/once-ui/components/BarGraph.module.scss
@@ -0,0 +1,56 @@
+.graphContainer {
+    width: 100%;
+    height: 200px;
+    border-radius: 12px;
+    padding: 24px;
+  
+    :global(.recharts-bar-rectangle) {
+      filter: drop-shadow(0 0 8px rgba(4, 78, 120, 0.3));
+    }
+  }
+  
+  .blur {
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+  }
+  
+  .blur::backdrop {
+    backdrop-filter: blur(12px);
+  }
+  
+  .blur::before {
+    backdrop-filter: blur(12px);
+  }
+  
+  .tooltip {
+    backdrop-filter: blur(12px);
+    border: 1px solid var(--neutral-alpha-medium);
+    border-radius: var(--radius-m);
+    text-align: center;
+    justify-content: center;
+    align-items: center;
+  
+    .label {
+      text-align: center;
+      margin: 0 0 10px;
+      font-size: 15px;
+      font-weight: 600;
+      color: var(--neutral-on-background-strong);
+    }
+  
+    .value {
+      font-weight: 500;
+      text-align: center;
+      margin: 4px 0;
+      display: flex;
+      align-items: center;
+    }
+  }
+  
+  .tooltipWrapper {
+    background-color: var(--neutral-background-strong);
+    border: 1px solid var(--neutral-border-medium);
+    border-radius: var(--radius-s);
+    color: var(--neutral-on-background-medium);
+  }
+  
\ No newline at end of file
diff --git a/src/once-ui/components/BarGraph.tsx b/src/once-ui/components/BarGraph.tsx
new file mode 100644
index 00000000..64f8356c
--- /dev/null
+++ b/src/once-ui/components/BarGraph.tsx
@@ -0,0 +1,241 @@
+import React from "react";
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  ResponsiveContainer,
+  CartesianGrid,
+  Tooltip,
+} from "recharts";
+
+import {
+  GridProps,
+  SpacingProps,
+  SizeProps,
+  StyleProps,
+  CommonProps,
+  DisplayProps,
+  ConditionalProps,
+} from "../interfaces";
+
+import { SpacingToken, ColorScheme, ColorWeight } from "../types";
+
+import styles from "./BarGraph.module.scss";
+import { Text, Flex, Heading, Line } from "."; // Import Text component from OnceUI
+import classNames from "classnames"; // Import classNames for conditional styling
+
+interface DataPoint {
+  name: string;
+  value: number;
+  startDate: string;
+  endDate: string;
+  color?: string; // Optional color prop, if needed
+}
+
+type BarColor = "success" | "danger" | "purple";
+
+type BarRadius = "xs" | "s" | "m" | "l" | "xl";
+
+interface BarGraphProps extends React.ComponentProps<typeof Flex> {
+  data: DataPoint[];
+  xAxisKey?: string; // Allows customization of the x-axis data key
+  yAxisKey?: string; // Allows customization of the y-axis data key
+  barColor?: BarColor; // Prop for bar color
+  /**
+   * Size of the bar graph.
+   * @default "m"
+   */
+  size?: "xs" | "s" | "m" | "l" | "xl";
+  blur?: boolean; // Controls backdrop blur effect
+  title?: string; // Title for the bar graph
+  tooltipTitle?: string; // Title for the tooltip
+  /** Hide X-axis labels */
+  hideXAxisLabels?: boolean;
+  /** Hide Y-axis labels */
+  hideYAxisLabels?: boolean;
+  /** Hide both X and Y axis labels */
+  hideLabels?: boolean;
+  /** Title for X-axis */
+  xAxisTitle?: string;
+  /** Title for Y-axis */
+  yAxisTitle?: string;
+  /** Hide X-axis title */
+  hideXAxisTitle?: boolean;
+  /** Hide Y-axis title */
+  hideYAxisTitle?: boolean;
+  /** Hide both X and Y axis titles */
+  hideAxisTitles?: boolean;
+}
+
+const CustomTooltip = ({ active, payload, tooltipTitle }: any) => {
+  if (active && payload && payload.length) {
+    const data = payload[0].payload;
+    return (
+      <Flex className={styles.tooltip} direction="column">
+        <Flex
+          borderBottom="neutral-alpha-medium"
+          fillWidth
+          vertical="center"
+          padding="8"
+        >
+          <Text
+            variant="body-default-s"
+            style={{ fontWeight: "600" }}
+            onBackground="neutral-strong"
+          >{`${data.startDate} - ${data.endDate}`}</Text>
+        </Flex>
+        <Flex padding="s">
+          <Text variant="body-default-s" onBackground="neutral-strong">
+            {`${tooltipTitle}: ${data.value}`}
+          </Text>
+        </Flex>
+      </Flex>
+    );
+  }
+  return null;
+};
+
+export const BarGraph: React.FC<BarGraphProps> = ({
+  data,
+  xAxisKey = "name",
+  yAxisKey = "value",
+  barColor = "success",
+  size = "m",
+  blur = false,
+  border,
+  title,
+  radius,
+  tooltipTitle,
+  background,
+  hideXAxisLabels = false,
+  hideYAxisLabels = false,
+  hideLabels = false,
+  xAxisTitle,
+  yAxisTitle,
+  hideXAxisTitle = false,
+  hideYAxisTitle = false,
+  hideAxisTitles = false,
+}) => {
+  const height = {
+    xs: 100,
+    s: 150,
+    m: 200,
+    l: 250,
+    xl: 300,
+  }[size];
+
+  const barSize = {
+    xs: 16,
+    s: 24,
+    m: 32,
+    l: 40,
+    xl: 48,
+  }[size];
+
+  const barColorMap = {
+    success: "var(--success-solid-strong)",
+    danger: "var(--danger-solid-strong)",
+    purple: "#8a63d2",
+  };
+
+  const barSolidColor = barColorMap[barColor];
+
+  return (
+    <Flex
+      fillWidth
+      radius={radius}
+      border={border}
+      align="center"
+      direction="column"
+      vertical="center"
+      background={background}
+      className={blur ? styles.blur : undefined}
+    >
+      <Flex
+        borderBottom={border}
+        fillWidth
+        align="center"
+        vertical="center"
+        horizontal="center"
+      >
+        <Heading padding="s">{title}</Heading>
+      </Flex>
+      <Flex padding="m" fill>
+        <ResponsiveContainer width="100%" height={height}>
+          <BarChart
+            data={data}
+            margin={{ top: 10, right: 10, left: 10, bottom: 10 }}
+            barGap={4}
+          >
+            <CartesianGrid
+              strokeDasharray="2 2"
+              horizontal={true}
+              vertical={false}
+              stroke="var(--neutral-border-medium)" // Use neutral border color
+            />
+            <XAxis
+              dataKey={xAxisKey}
+              axisLine={false}
+              tickLine={false}
+              tick={hideXAxisLabels || hideLabels ? false : {
+                fill: "var(--neutral-on-background-medium)",
+                fontSize: 12,
+              }}
+              label={
+                xAxisTitle && !hideXAxisTitle && !hideAxisTitles
+                  ? { value: xAxisTitle, position: 'bottom', offset: -2, fill: "var(--neutral-on-background-medium)" }
+                  : undefined
+              }
+            />
+            <YAxis
+              axisLine={false}
+              tickLine={false}
+              tick={hideYAxisLabels || hideLabels ? false : {
+                fill: "var(--neutral-on-background-medium)",
+                fontSize: 12,
+              }}
+              width={hideYAxisLabels || hideLabels ? 0 : 30}
+              label={
+                yAxisTitle && !hideYAxisTitle && !hideAxisTitles
+                  ? { value: yAxisTitle, angle: -90, position: 'left', offset: -10, fill: "var(--neutral-on-background-medium)" }
+                  : undefined
+              }
+            />
+            <Tooltip
+              content={<CustomTooltip tooltipTitle={tooltipTitle} />}
+              cursor={{ fill: "rgba(255,255,255,0.05)" }}
+              wrapperClassName={styles.tooltipWrapper} // Apply styles to the tooltip wrapper
+            />
+            <defs>
+              <linearGradient id="barGradient" x1="0" y1="0" x2="0" y2="1">
+                {[
+                  { offset: "0%", opacity: 0.8 },
+                  { offset: "35%", opacity: 0.6 },
+                  { offset: "70%", opacity: 0.3 },
+                  { offset: "95%", opacity: 0.1 },
+                  { offset: "100%", opacity: 0 },
+                ].map(({ offset, opacity }) => (
+                  <stop
+                    key={offset}
+                    offset={offset}
+                    stopColor={barSolidColor}
+                    stopOpacity={opacity}
+                  />
+                ))}
+              </linearGradient>
+            </defs>
+            <Bar
+              dataKey={yAxisKey}
+              fill="url(#barGradient)"
+              stroke={barSolidColor}
+              strokeWidth={1}
+              radius={[6, 6, 0, 0]} // Replace with appropriate numerical values
+              barSize={barSize}
+            />
+          </BarChart>
+        </ResponsiveContainer>
+      </Flex>
+    </Flex>
+  );
+};
diff --git a/src/once-ui/components/LineBarGraph.module.scss b/src/once-ui/components/LineBarGraph.module.scss
new file mode 100644
index 00000000..d8dcd119
--- /dev/null
+++ b/src/once-ui/components/LineBarGraph.module.scss
@@ -0,0 +1,53 @@
+.graphContainer {
+    width: 100%;
+    height: 100%;
+    min-height: 200px;
+    border-radius: 12px;
+    padding: 24px;
+  
+    :global(.recharts-bar-rectangle) {
+      filter: drop-shadow(0 0 8px rgba(4, 78, 120, 0.3));
+    }
+    
+    :global(.recharts-dot) {
+      filter: drop-shadow(0 0 4px rgba(78, 114, 238, 0.6));
+    }
+  }
+  
+  .blur {
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+  }
+  
+  .tooltip {
+    backdrop-filter: blur(12px);
+    border: 1px solid var(--neutral-alpha-medium);
+    border-radius: var(--radius-m);
+    text-align: center;
+    justify-content: center;
+    align-items: center;
+    backdrop-filter: blur(12px);
+  
+    .label {
+      text-align: center;
+      font-size: 15px;
+      font-weight: 600;
+      color: var(--neutral-on-background-strong);
+    }
+  
+    .value {
+      font-weight: 500;
+      text-align: center;
+      margin: 4px 0;
+      display: flex;
+      align-items: center;
+    }
+  }
+  
+  .tooltipWrapper {
+    background-color: var(--neutral-background-strong);
+    border: 1px solid var(--neutral-border-medium);
+    border-radius: var(--radius-s);
+    color: var(--neutral-on-background-medium);
+    padding: 8px;
+  }
\ No newline at end of file
diff --git a/src/once-ui/components/LineBarGraph.tsx b/src/once-ui/components/LineBarGraph.tsx
new file mode 100644
index 00000000..030e8c2d
--- /dev/null
+++ b/src/once-ui/components/LineBarGraph.tsx
@@ -0,0 +1,315 @@
+import React from "react";
+import {
+  ComposedChart,
+  Line,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  Legend,
+  Area,
+} from "recharts";
+import styles from "./LineBarGraph.module.scss";
+import { Flex, Heading } from ".";
+
+interface DataPoint {
+  name: string;
+  lineValue: number;
+  barValue: number;
+  [key: string]: any; // Allow for additional properties
+}
+
+interface LineBarGraphProps extends React.ComponentProps<typeof Flex> {
+  data: DataPoint[];
+  xAxisKey?: string;
+  lineDataKey?: string;
+  barDataKey?: string;
+  lineName?: string;
+  barName?: string;
+  /**
+   * Size of the graph.
+   * @default "m"
+   */
+  size?: "xs" | "s" | "m" | "l" | "xl";
+  blur?: boolean;
+  title?: string;
+  lineColor?: string;
+  lineColorVariant?: "info" | "success" | "danger" | "purple"; // Add color variant prop
+  barColor?: string;
+  /**
+   * Show area under the line
+   * @default true
+   */
+  showArea?: boolean;
+  /**
+   * Hide X-axis labels when true
+   * @default false
+   */
+  hideXAxisLabels?: boolean;
+  /**
+   * Hide Y-axis labels when true
+   * @default false
+   */
+  hideYAxisLabels?: boolean;
+  /**
+   * Hide both X and Y axis labels when true
+   * @default false
+   */
+  hideLabels?: boolean;
+  /**
+   * Title for X-axis
+   */
+  xAxisTitle?: string;
+  /**
+   * Title for Y-axis
+   */
+  yAxisTitle?: string;
+  /**
+   * Hide X-axis title
+   * @default false
+   */
+  hideXAxisTitle?: boolean;
+  /**
+   * Hide Y-axis title
+   * @default false
+   */
+  hideYAxisTitle?: boolean;
+  /**
+   * Hide both X and Y axis titles
+   * @default false
+   */
+  hideAxisTitles?: boolean;
+  /**
+   * Hide legend
+   * @default false
+   */
+  showLegend?: boolean;
+}
+
+const CustomTooltip = ({ active, payload, label }: any) => {
+  if (active && payload && payload.length) {
+    return (
+      <Flex className={styles.tooltip} direction="column">
+        <Flex
+          borderBottom="neutral-alpha-medium"
+          fillWidth
+          horizontal="center"
+          padding="8"
+        >
+          <p className={styles.label}>{label}</p>
+        </Flex>
+        <Flex padding="s" direction="column">
+          {payload.map((entry: any, index: number) => (
+            <p
+              key={`item-${index}`}
+              className={styles.value}
+              style={{ color: entry.color }}
+            >
+              {`${entry.name}: ${entry.value}`}
+            </p>
+          ))}
+        </Flex>
+      </Flex>
+    );
+  }
+  return null;
+};
+
+export const LineBarGraph: React.FC<LineBarGraphProps> = ({
+  data,
+  xAxisKey = "name",
+  lineDataKey = "lineValue",
+  barDataKey = "barValue",
+  lineName = "Line",
+  barName = "Bar",
+  size = "m",
+  blur = false,
+  border,
+  title,
+  lineColorVariant = "info", // Options: "info", "success", "danger", "purple"
+  barColor = "var(--success-solid-strong)",
+  radius,
+  background,
+  showArea = true,
+  hideXAxisLabels = false,
+  hideYAxisLabels = false,
+  hideLabels = false,
+  xAxisTitle,
+  yAxisTitle,
+  hideXAxisTitle = false,
+  hideYAxisTitle = false,
+  hideAxisTitles = false,
+  showLegend = false,
+  ...flexProps
+}) => {
+  const height = {
+    xs: 100,
+    s: 150,
+    m: 200,
+    l: 250,
+    xl: 300,
+  }[size];
+
+  const barSize = {
+    xs: 16,
+    s: 24,
+    m: 32,
+    l: 40,
+    xl: 48,
+  }[size];
+
+  // Generate a unique ID for each gradient
+  const lineGradientId = `colorLine-${Math.random().toString(36).substring(2, 9)}`;
+  const barGradientId = `barGradient-${Math.random().toString(36).substring(2, 9)}`;
+
+  const colorMap = {
+    info: "var(--info-solid-strong)",
+    success: "var(--success-solid-strong)",
+    danger: "var(--danger-solid-strong)",
+    purple: "#6c5ce7"
+  };
+
+  // Use the variant to determine the color
+  const finalLineColor = lineColorVariant ? colorMap[lineColorVariant] : "var(--info-solid-strong)";
+
+  return (
+    <Flex
+      fillWidth
+      radius={radius}
+      border={border}
+      align="center"
+      direction="column"
+      horizontal="center"
+      background={background}
+      className={blur ? styles.blur : undefined}
+      {...flexProps}
+    >
+      {title && (
+        <Flex
+          borderBottom={border}
+          fillWidth
+          align="center"
+          vertical="center"
+          horizontal="center"
+        >
+          <Heading padding="s">{title}</Heading>
+        </Flex>
+      )}
+      <Flex padding="m" fill>
+        <ResponsiveContainer width="100%" height={height}>
+          <ComposedChart
+            data={data}
+            margin={{ top: 20, right: 20, left: 20, bottom: 20 }}
+          >
+            <defs>
+              {/* Bar gradient */}
+              <linearGradient id={barGradientId} x1="0" y1="0" x2="0" y2="1">
+                {[
+                  { offset: "0%", opacity: 0.8 },
+                  { offset: "35%", opacity: 0.6 },
+                  { offset: "70%", opacity: 0.3 },
+                  { offset: "95%", opacity: 0.1 },
+                  { offset: "100%", opacity: 0 },
+                ].map(({ offset, opacity }) => (
+                  <stop
+                    key={offset}
+                    offset={offset}
+                    stopColor={barColor}
+                    stopOpacity={opacity}
+                  />
+                ))}
+              </linearGradient>
+              
+              {/* Line gradient - similar to LineGraph component */}
+              <linearGradient id={lineGradientId} x1="0" y1="0" x2="0" y2="1">
+                <stop offset="25%" stopColor={finalLineColor} stopOpacity={0.5} />
+                <stop offset="40%" stopColor={finalLineColor} stopOpacity={0.4} />
+                <stop offset="95%" stopColor={finalLineColor} stopOpacity={0.05} />
+              </linearGradient>
+            </defs>
+            <CartesianGrid
+              strokeDasharray="2 2"
+              horizontal={true}
+              vertical={false}
+              stroke="var(--neutral-border-medium)"
+            />
+            <XAxis
+              dataKey={xAxisKey}
+              axisLine={false}
+              tickLine={false}
+              tick={hideXAxisLabels || hideLabels ? false : {
+                fill: "var(--neutral-on-background-medium)",
+                fontSize: 12,
+              }}
+              label={
+                xAxisTitle && !hideXAxisTitle && !hideAxisTitles
+                  ? { value: xAxisTitle, position: 'bottom', offset: 0, fill: "var(--neutral-on-background-medium)" }
+                  : undefined
+              }
+              // Make sure to always show the grid even if labels are hidden
+              hide={false}
+            />
+            <YAxis
+              axisLine={false}
+              tickLine={false}
+              width={hideYAxisLabels || hideLabels ? 0 : 30}
+              label={
+                yAxisTitle && !hideYAxisTitle && !hideAxisTitles
+                  ? { value: yAxisTitle, angle: -90, position: 'left', offset: -5, fill: "var(--neutral-on-background-medium)" }
+                  : undefined
+              }
+              // Make sure to always show the grid even if labels are hidden
+              hide={false}
+            />
+            <Tooltip
+              content={<CustomTooltip />}
+              cursor={{ fill: "rgba(255,255,255,0.05)" }}
+              wrapperClassName={styles.tooltipWrapper}
+            />
+            {showLegend && (
+              <Legend
+                verticalAlign="top"
+                wrapperStyle={{ paddingBottom: 10 }}
+              />
+            )}
+            <Bar
+              dataKey={barDataKey}
+              name={barName}
+              fill={`url(#${barGradientId})`}
+              stroke={barColor}
+              strokeWidth={1}
+              radius={[4, 4, 0, 0]}
+              barSize={barSize}
+            />
+            
+            {showArea ? (
+              <Area
+                type="monotone"
+                dataKey={lineDataKey}
+                name={lineName}
+                stroke={finalLineColor}
+                strokeWidth={2}
+                fillOpacity={1}
+                fill={`url(#${lineGradientId})`}
+                dot={{ r: 4, fill: finalLineColor }}
+                activeDot={{ r: 6, fill: finalLineColor }}
+              />
+            ) : (
+              <Line
+                type="monotone"
+                dataKey={lineDataKey}
+                name={lineName}
+                stroke={finalLineColor}
+                strokeWidth={2}
+                dot={{ r: 4, fill: finalLineColor }}
+                activeDot={{ r: 6, fill: finalLineColor }}
+              />
+            )}
+          </ComposedChart>
+        </ResponsiveContainer>
+      </Flex>
+    </Flex>
+  );
+};
\ No newline at end of file
diff --git a/src/once-ui/components/LineGraph.module.scss b/src/once-ui/components/LineGraph.module.scss
new file mode 100644
index 00000000..9ba50274
--- /dev/null
+++ b/src/once-ui/components/LineGraph.module.scss
@@ -0,0 +1,62 @@
+.graphContainer {
+    border-radius: 12px;
+    padding: 24px;
+    width: 100%;
+    height: 100%;
+    min-height: 300px;
+    border: 1px solid rgba(255, 255, 255, 0.05);
+  
+    :global(.recharts-cartesian-grid-horizontal line),
+    :global(.recharts-cartesian-grid-vertical line) {
+      stroke: var(--neutral-background-strong);
+    }
+  
+    :global(.recharts-tooltip-cursor) {
+      fill: rgba(255, 255, 255, 0.02);
+    }
+  
+    :global(.recharts-default-tooltip) {
+      background-color: #0f0f13 !important;
+      border: 1px solid rgba(255, 255, 255, 0.05) !important;
+      border-radius: 4px;
+      padding: 8px !important;
+      box-shadow:
+        0 4px 6px -1px rgba(0, 0, 0, 0.2),
+        0 2px 4px -1px rgba(0, 0, 0, 0.1);
+    }
+  
+    :global(.recharts-surface) {
+      overflow: visible;
+    }
+  
+    :global(.recharts-bar-rectangle) {
+      filter: drop-shadow(0 0 8px rgba(4, 78, 120, 0.3));
+    }
+  }
+  
+  .tooltip {
+    backdrop-filter: blur(12px);
+    border: 1px solid var(--neutral-alpha-medium);
+    border-radius: var(--radius-m);
+    text-align: center;
+    justify-content: center;
+    background-color: none;
+    background: none;
+    align-items: center;
+  
+    .label {
+      text-align: center;
+      padding: 5px;
+      font-size: 15px;
+      font-weight: 600;
+      color: var(--neutral-on-background-strong);
+    }
+  
+    .value {
+      font-weight: 500;
+      text-align: center;
+      display: flex;
+      align-items: center;
+    }
+  }
+  
\ No newline at end of file
diff --git a/src/once-ui/components/LineGraph.tsx b/src/once-ui/components/LineGraph.tsx
new file mode 100644
index 00000000..3bca76cf
--- /dev/null
+++ b/src/once-ui/components/LineGraph.tsx
@@ -0,0 +1,261 @@
+import React from "react";
+import {
+  AreaChart,
+  Area,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  TooltipProps,
+} from "recharts";
+import styles from "./LineGraph.module.scss";
+import { Flex, Heading } from ".";
+
+interface DataPoint {
+  name: string;
+  value1: number;
+  value2: number;
+  value3: number;
+}
+
+interface LineGraphProps extends React.ComponentProps<typeof Flex> {
+  data: DataPoint[];
+  xAxisKey?: string;
+  yAxisKey1?: string;
+  yAxisKey2?: string;
+  yAxisKey3?: string;
+  /**
+   * Size of the line graph.
+   * @default "m"
+   */
+  size?: "xs" | "s" | "m" | "l" | "xl";
+  blur?: boolean;
+  title?: string;
+  tooltipTitle?: string;
+  value1?: string;
+  value2?: string;
+  value3?: string;
+  /**
+   * Hide X-axis labels when true
+   * @default false
+   */
+  hideXAxisLabels?: boolean;
+  /**
+   * Hide Y-axis labels when true
+   * @default false
+   */
+  hideYAxisLabels?: boolean;
+  /**
+   * Hide both X and Y axis labels when true
+   * @default false
+   */
+  hideLabels?: boolean;
+}
+
+interface CustomTooltipProps extends TooltipProps<number, string> {
+  tooltipTitle?: string;
+  key1?: string;
+  key2?: string;
+  key3?: string;
+  yAxisKey1?: string;
+  yAxisKey2?: string;
+  yAxisKey3?: string;
+}
+
+const CustomTooltip = ({
+  active,
+  payload,
+  tooltipTitle,
+  label,
+  key1,
+  key2,
+  key3,
+  yAxisKey1 = "value1",
+  yAxisKey2 = "value2",
+  yAxisKey3 = "value3",
+}: CustomTooltipProps) => {
+  if (active && payload && payload.length) {
+    return (
+      <Flex className={styles.tooltip} direction="column">
+        <Flex
+          borderBottom="neutral-alpha-medium"
+          fillWidth
+          vertical="center"
+          horizontal="center"
+          padding="4"
+        >
+          <p className={styles.label}>{`${tooltipTitle}`}</p>
+        </Flex>
+        <Flex padding="xs" direction="column" vertical="center">
+          <p className={styles.value} style={{ color: "#047857" }}>
+            {`${key1}: ${payload[0].value}`}
+          </p>
+          <p className={styles.value} style={{ color: "#991b1b" }}>
+            {`${key2}: ${payload[1].value}`}
+          </p>
+          <p className={styles.value} style={{ color: "#6c5ce7" }}>
+            {`${key3}: ${payload[2].value}`}
+          </p>
+        </Flex>
+      </Flex>
+    );
+  }
+  return null;
+};
+
+export const LineGraph: React.FC<LineGraphProps> = ({
+  data,
+  xAxisKey = "name",
+  yAxisKey1 = "value1",
+  yAxisKey2 = "value2",
+  yAxisKey3 = "value3",
+  size = "m",
+  blur = false,
+  border,
+  title,
+  value1,
+  value2,
+  value3,
+  tooltipTitle,
+  radius,
+  background,
+  hideXAxisLabels = false,
+  hideYAxisLabels = false,
+  hideLabels = false,
+  ...flexProps
+}) => {
+  const height = {
+    xs: 100,
+    s: 150,
+    m: 200,
+    l: 250,
+    xl: 300,
+  }[size];
+
+  return (
+    <Flex
+      fill
+      radius={radius}
+      border={border}
+      align="center"
+      direction="column"
+      vertical="center"
+      background={background}
+      className={blur ? styles.blur : undefined}
+      {...flexProps}
+    >
+      <Flex
+        borderBottom={border}
+        fillWidth
+        align="center"
+        vertical="center"
+        horizontal="center"
+      >
+        <Heading padding="s">{title}</Heading>
+      </Flex>
+      <Flex fill padding="m">
+        <ResponsiveContainer width="100%" height={height}>
+          <AreaChart
+            data={data}
+            margin={{
+              top: 10,
+              right: 30,
+              left: 0,
+              bottom: 0,
+            }}
+          >
+            <defs>
+              <linearGradient id="colorValue1" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="25%" stopColor="var(--success-solid-strong)" stopOpacity={0.5} />
+                <stop offset="40%" stopColor="var(--success-solid-strong)" stopOpacity={0.4} />
+                <stop offset="95%" stopColor="var(--success-solid-strong)" stopOpacity={0.05} />
+              </linearGradient>
+              <linearGradient id="colorValue2" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="25%" stopColor="var(--danger-solid-strong)" stopOpacity={0.5} />
+                <stop offset="40%" stopColor="var(--danger-solid-strong)" stopOpacity={0.4} />
+                <stop offset="95%" stopColor="var(--danger-solid-strong)" stopOpacity={0.05} />
+              </linearGradient>
+              <linearGradient id="colorValue3" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="25%" stopColor="#6c5ce7" stopOpacity={0.5} />
+                <stop offset="40%" stopColor="#6c5ce7" stopOpacity={0.4} />
+                <stop offset="95%" stopColor="#6c5ce7" stopOpacity={0.05} />
+              </linearGradient>
+            </defs>
+            <CartesianGrid
+              strokeDasharray="2 2"
+              vertical={true}
+              stroke="var(--neutral-background-strong)"
+              horizontal={true}
+            />
+            <XAxis
+              dataKey={xAxisKey}
+              stroke="var(--neutral-background-medium)"
+              tick={{
+                fill: "var(--neutral-on-background-medium)",
+                fontSize: 11,
+                fontWeight: "bold",
+              }}
+              axisLine={false}
+              tickLine={false}
+              hide={hideXAxisLabels || hideLabels}
+            />
+            <YAxis
+              stroke="var(--neutral-background-strong)"
+              tick={{
+                fill: "var(--neutral-on-background-medium)",
+                fontSize: 11,
+              }}
+              axisLine={false}
+              tickLine={false}
+              hide={hideYAxisLabels || hideLabels}
+            />
+            <Tooltip
+              content={
+                <CustomTooltip
+                  tooltipTitle={tooltipTitle}
+                  key1={value1}
+                  key2={value2}
+                  key3={value3}
+                  yAxisKey1={yAxisKey1}
+                  yAxisKey2={yAxisKey2}
+                  yAxisKey3={yAxisKey3}
+                />
+              }
+              contentStyle={{
+                backgroundColor: "#0f0f13",
+                border: "1px solid rgba(255,255,255,0.05)",
+                borderRadius: "4px",
+                color: "rgba(255,255,255,0.7)",
+              }}
+            />
+            <Area
+              type="linear"
+              dataKey={yAxisKey1}
+              stroke="#047857"
+              strokeWidth={1.5}
+              fillOpacity={1}
+              fill="url(#colorValue1)"
+            />
+            <Area
+              type="linear"
+              dataKey={yAxisKey2}
+              stroke="#991b1b"
+              strokeWidth={1.5}
+              fillOpacity={1}
+              fill="url(#colorValue2)"
+            />
+            <Area
+              type="linear"
+              dataKey={yAxisKey3}
+              stroke="#6c5ce7"
+              strokeWidth={1.5}
+              fillOpacity={1}
+              fill="url(#colorValue3)"
+            />
+          </AreaChart>
+        </ResponsiveContainer>
+      </Flex>
+    </Flex>
+  );
+};
diff --git a/src/once-ui/components/MultiBarGraph.tsx b/src/once-ui/components/MultiBarGraph.tsx
new file mode 100644
index 00000000..89f1dcd4
--- /dev/null
+++ b/src/once-ui/components/MultiBarGraph.tsx
@@ -0,0 +1,249 @@
+import React from "react";
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  ResponsiveContainer,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+} from "recharts";
+
+import {
+  GridProps,
+  SpacingProps,
+  SizeProps,
+  StyleProps,
+  CommonProps,
+  DisplayProps,
+  ConditionalProps,
+} from "../interfaces";
+
+import styles from "./BarGraph.module.scss";
+import { Text, Flex, Heading } from ".";
+
+// Data structure supporting multiple values
+interface MultiBarDataPoint {
+  name: string;
+  value1?: number;
+  value2?: number;
+  value3?: number;
+  startDate?: string;
+  endDate?: string;
+}
+
+interface MultiBarGraphProps extends React.ComponentProps<typeof Flex> {
+  data: MultiBarDataPoint[];
+  xAxisKey?: string;
+  yAxisKeys?: string[]; // Keys for multiple bars
+  barLabels?: string[]; // Labels for each bar series
+  /**
+   * Size of the bar graph.
+   * @default "m"
+   */
+  size?: "xs" | "s" | "m" | "l" | "xl";
+  blur?: boolean;
+  title?: string;
+  tooltipTitle?: string;
+  /**
+   * When true, hides labels on the X axis
+   * @default false
+   */
+  hideXAxisLabels?: boolean;
+  /**
+   * When true, hides labels on the Y axis
+   * @default false
+   */
+  hideYAxisLabels?: boolean;
+  /**
+   * When true, hides all axis labels
+   * @default false
+   */
+  hideLabels?: boolean;
+}
+
+const CustomTooltip = ({ active, payload, tooltipTitle, barLabels }: any) => {
+  if (active && payload && payload.length) {
+    const data = payload[0].payload;
+    return (
+      <Flex className={styles.tooltip} direction="column">
+        <Flex
+          borderBottom="neutral-alpha-medium"
+          fillWidth
+          horizontal="center"
+          padding="8"
+        >
+          <Text
+            variant="body-default-s"
+            style={{ fontWeight: "600" }}
+            onBackground="neutral-strong"
+          >
+            {data.startDate && data.endDate
+              ? `${data.startDate} - ${data.endDate}`
+              : data.name}
+          </Text>
+        </Flex>
+        <Flex padding="s" direction="column">
+          {payload.map((entry: any, index: number) => (
+            <Text
+              key={`value-${index}`}
+              variant="body-default-s"
+              onBackground="neutral-strong"
+              style={{ color: entry.color }}
+            >
+              {`${barLabels?.[index] || entry.dataKey}: ${entry.value}`}
+            </Text>
+          ))}
+        </Flex>
+      </Flex>
+    );
+  }
+  return null;
+};
+
+export const MultiBarGraph: React.FC<MultiBarGraphProps> = ({
+  data,
+  xAxisKey = "name",
+  yAxisKeys = ["value1", "value2", "value3"],
+  size = "m",
+  blur = false,
+  border,
+  title,
+  radius,
+  tooltipTitle,
+  barLabels,
+  background,
+  hideXAxisLabels = false,
+  hideYAxisLabels = false,
+  hideLabels = false,
+  ...flexProps
+}) => {
+  const height = {
+    xs: 100,
+    s: 150,
+    m: 250,
+    l: 275,
+    xl: 300,
+  }[size];
+
+  const barSize = {
+    xs: 32,
+    s: 32,
+    m: 32,
+    l: 32,
+    xl: 32,
+  }[size];
+
+  // Using the same colors from LineGraph
+  const barColors = ["var(--success-solid-strong)", "var(--danger-solid-strong)", "#6c5ce7"]; // green, red, purple
+
+  return (
+    <Flex
+      fillWidth
+      radius={radius}
+      border={border}
+      align="center"
+      direction="column"
+      vertical="center"
+      background={background}
+      className={blur ? styles.blur : undefined}
+      {...flexProps}
+    >
+      {title && (
+        <Flex
+          borderBottom={border}
+          fillWidth
+          align="center"
+          horizontal="center"
+        >
+          <Heading padding="s">{title}</Heading>
+        </Flex>
+      )}
+      <Flex padding="m" fill>
+        <ResponsiveContainer width="100%" height={height}>
+          <BarChart
+            data={data}
+            margin={{ top: 10, right: 10, left: 10, bottom: 10 }}
+            barGap={4} // Small gap between bars in the same group
+            barCategoryGap={1} // Control spacing between different groups (x-axis categories)
+          >
+            <CartesianGrid
+              strokeDasharray="2 2"
+              horizontal={true}
+              vertical={false}
+              stroke="var(--neutral-border-medium)"
+            />
+            <XAxis
+              dataKey={xAxisKey}
+              axisLine={false}
+              tickLine={false}
+              tick={{
+                fill: "var(--neutral-on-background-medium)",
+                fontSize: 12,
+              }}
+              hide={hideLabels || hideXAxisLabels}
+            />
+            <YAxis
+              axisLine={false}
+              tickLine={false}
+              tick={{
+                fill: "var(--neutral-on-background-medium)",
+                fontSize: 12,
+              }}
+              width={30}
+              domain={[0, "auto"]} // Start from 0, auto-scale the upper bound
+              allowDataOverflow={false} // Prevent data from exceeding the domain
+              hide={hideLabels || hideYAxisLabels}
+            />
+            <Tooltip
+              content={
+                <CustomTooltip
+                  tooltipTitle={tooltipTitle}
+                  barLabels={barLabels}
+                />
+              }
+              cursor={{ fill: "rgba(255,255,255,0.05)" }}
+              wrapperClassName={styles.tooltipWrapper}
+            />
+
+            {/* Define gradients for each bar color */}
+            <defs>
+              {barColors.map((color, index) => (
+                <linearGradient
+                  id={`barGradient${index}`}
+                  key={index}
+                  x1="0"
+                  y1="0"
+                  x2="0"
+                  y2="1"
+                >
+                  <stop offset="5%" stopColor={color} stopOpacity={0.8} />
+                  <stop offset="35%" stopColor={color} stopOpacity={0.6} />
+                  <stop offset="70%" stopColor={color} stopOpacity={0.3} />
+                  <stop offset="95%" stopColor={color} stopOpacity={0.1} />
+                  <stop offset="100%" stopColor={color} stopOpacity={0} />
+                </linearGradient>
+              ))}
+            </defs>
+
+            {/* Create a Bar component for each data key */}
+            {yAxisKeys.map((key, index) => (
+              <Bar
+                key={key}
+                dataKey={key}
+                name={barLabels?.[index] || key}
+                fill={`url(#barGradient${index})`}
+                stroke={barColors[index % barColors.length]}
+                strokeWidth={1}
+                radius={[6, 6, 0, 0]}
+                barSize={barSize}
+                isAnimationActive={false}
+              />
+            ))}
+          </BarChart>
+        </ResponsiveContainer>
+      </Flex>
+    </Flex>
+  );
+};
diff --git a/src/once-ui/components/index.ts b/src/once-ui/components/index.ts
index 66bdab42..3f71fa05 100644
--- a/src/once-ui/components/index.ts
+++ b/src/once-ui/components/index.ts
@@ -5,6 +5,7 @@ export * from "./Avatar";
 export * from "./AvatarGroup";
 export * from "./Badge";
 export * from "./Background";
+export * from "./BarGraph"
 export * from "./Button";
 export * from "./Carousel";
 export * from "./Card";
@@ -38,9 +39,12 @@ export * from "./Kbar";
 export * from "./Kbd";
 export * from "./LetterFx";
 export * from "./Line";
+export * from "./LineBarGraph"
+export * from "./LineGraph"
 export * from "./Logo";
 export * from "./LogoCloud";
 export * from "./MegaMenu";
+export * from "./MultiBarGraph"
 export * from "./NavIcon";
 export * from "./NumberInput";
 export * from "./Option";

From 529ecef447c6e69b05051f0742db520cb8481338 Mon Sep 17 00:00:00 2001
From: Adhitya Nadooli <127269031+lightyfr@users.noreply.github.com>
Date: Fri, 28 Mar 2025 15:29:44 +0000
Subject: [PATCH 04/35] Data-viz sizing changes (fill)

---
 src/once-ui/components/BarGraph.tsx      | 65 +++++++++---------------
 src/once-ui/components/LineBarGraph.tsx  | 48 +++++++++--------
 src/once-ui/components/LineGraph.tsx     | 16 ++----
 src/once-ui/components/MultiBarGraph.tsx | 49 ++++++++----------
 4 files changed, 78 insertions(+), 100 deletions(-)

diff --git a/src/once-ui/components/BarGraph.tsx b/src/once-ui/components/BarGraph.tsx
index 64f8356c..b90313c0 100644
--- a/src/once-ui/components/BarGraph.tsx
+++ b/src/once-ui/components/BarGraph.tsx
@@ -9,16 +9,6 @@ import {
   Tooltip,
 } from "recharts";
 
-import {
-  GridProps,
-  SpacingProps,
-  SizeProps,
-  StyleProps,
-  CommonProps,
-  DisplayProps,
-  ConditionalProps,
-} from "../interfaces";
-
 import { SpacingToken, ColorScheme, ColorWeight } from "../types";
 
 import styles from "./BarGraph.module.scss";
@@ -35,8 +25,6 @@ interface DataPoint {
 
 type BarColor = "success" | "danger" | "purple";
 
-type BarRadius = "xs" | "s" | "m" | "l" | "xl";
-
 interface BarGraphProps extends React.ComponentProps<typeof Flex> {
   data: DataPoint[];
   xAxisKey?: string; // Allows customization of the x-axis data key
@@ -46,7 +34,7 @@ interface BarGraphProps extends React.ComponentProps<typeof Flex> {
    * Size of the bar graph.
    * @default "m"
    */
-  size?: "xs" | "s" | "m" | "l" | "xl";
+  barWidth?: SpacingToken | "fill";
   blur?: boolean; // Controls backdrop blur effect
   title?: string; // Title for the bar graph
   tooltipTitle?: string; // Title for the tooltip
@@ -76,7 +64,7 @@ const CustomTooltip = ({ active, payload, tooltipTitle }: any) => {
         <Flex
           borderBottom="neutral-alpha-medium"
           fillWidth
-          vertical="center"
+          horizontal="center"
           padding="8"
         >
           <Text
@@ -101,7 +89,7 @@ export const BarGraph: React.FC<BarGraphProps> = ({
   xAxisKey = "name",
   yAxisKey = "value",
   barColor = "success",
-  size = "m",
+  barWidth = "fill",
   blur = false,
   border,
   title,
@@ -117,21 +105,7 @@ export const BarGraph: React.FC<BarGraphProps> = ({
   hideYAxisTitle = false,
   hideAxisTitles = false,
 }) => {
-  const height = {
-    xs: 100,
-    s: 150,
-    m: 200,
-    l: 250,
-    xl: 300,
-  }[size];
 
-  const barSize = {
-    xs: 16,
-    s: 24,
-    m: 32,
-    l: 40,
-    xl: 48,
-  }[size];
 
   const barColorMap = {
     success: "var(--success-solid-strong)",
@@ -143,7 +117,8 @@ export const BarGraph: React.FC<BarGraphProps> = ({
 
   return (
     <Flex
-      fillWidth
+      fill
+      style={{height: "100%"}}
       radius={radius}
       border={border}
       align="center"
@@ -162,7 +137,7 @@ export const BarGraph: React.FC<BarGraphProps> = ({
         <Heading padding="s">{title}</Heading>
       </Flex>
       <Flex padding="m" fill>
-        <ResponsiveContainer width="100%" height={height}>
+        <ResponsiveContainer width="100%" height="100%">
           <BarChart
             data={data}
             margin={{ top: 10, right: 10, left: 10, bottom: 10 }}
@@ -191,16 +166,12 @@ export const BarGraph: React.FC<BarGraphProps> = ({
             <YAxis
               axisLine={false}
               tickLine={false}
-              tick={hideYAxisLabels || hideLabels ? false : {
+              tick={{
                 fill: "var(--neutral-on-background-medium)",
                 fontSize: 12,
-              }}
+               }}
               width={hideYAxisLabels || hideLabels ? 0 : 30}
-              label={
-                yAxisTitle && !hideYAxisTitle && !hideAxisTitles
-                  ? { value: yAxisTitle, angle: -90, position: 'left', offset: -10, fill: "var(--neutral-on-background-medium)" }
-                  : undefined
-              }
+       
             />
             <Tooltip
               content={<CustomTooltip tooltipTitle={tooltipTitle} />}
@@ -230,8 +201,22 @@ export const BarGraph: React.FC<BarGraphProps> = ({
               fill="url(#barGradient)"
               stroke={barSolidColor}
               strokeWidth={1}
-              radius={[6, 6, 0, 0]} // Replace with appropriate numerical values
-              barSize={barSize}
+              barSize={
+              barWidth === "fill"
+                ? "100%"
+                : barWidth === "xs"
+                ? 6
+                : barWidth === "s"
+                ? 12
+                : barWidth === "m"
+                ? 20
+                : barWidth === "l"
+                ? 40
+                : barWidth === "xl"
+                ? 50
+                : barWidth
+              }
+              radius={[6, 6, 0, 0]}
             />
           </BarChart>
         </ResponsiveContainer>
diff --git a/src/once-ui/components/LineBarGraph.tsx b/src/once-ui/components/LineBarGraph.tsx
index 030e8c2d..d704927a 100644
--- a/src/once-ui/components/LineBarGraph.tsx
+++ b/src/once-ui/components/LineBarGraph.tsx
@@ -13,6 +13,8 @@ import {
 } from "recharts";
 import styles from "./LineBarGraph.module.scss";
 import { Flex, Heading } from ".";
+import { SpacingToken, ColorScheme, ColorWeight } from "../types";
+
 
 interface DataPoint {
   name: string;
@@ -32,7 +34,7 @@ interface LineBarGraphProps extends React.ComponentProps<typeof Flex> {
    * Size of the graph.
    * @default "m"
    */
-  size?: "xs" | "s" | "m" | "l" | "xl";
+  barWidth?: SpacingToken | "fill";
   blur?: boolean;
   title?: string;
   lineColor?: string;
@@ -124,7 +126,7 @@ export const LineBarGraph: React.FC<LineBarGraphProps> = ({
   barDataKey = "barValue",
   lineName = "Line",
   barName = "Bar",
-  size = "m",
+  barWidth = "fill",
   blur = false,
   border,
   title,
@@ -144,21 +146,7 @@ export const LineBarGraph: React.FC<LineBarGraphProps> = ({
   showLegend = false,
   ...flexProps
 }) => {
-  const height = {
-    xs: 100,
-    s: 150,
-    m: 200,
-    l: 250,
-    xl: 300,
-  }[size];
-
-  const barSize = {
-    xs: 16,
-    s: 24,
-    m: 32,
-    l: 40,
-    xl: 48,
-  }[size];
+ 
 
   // Generate a unique ID for each gradient
   const lineGradientId = `colorLine-${Math.random().toString(36).substring(2, 9)}`;
@@ -176,12 +164,12 @@ export const LineBarGraph: React.FC<LineBarGraphProps> = ({
 
   return (
     <Flex
-      fillWidth
+      fill
       radius={radius}
       border={border}
       align="center"
       direction="column"
-      horizontal="center"
+      vertical="center"
       background={background}
       className={blur ? styles.blur : undefined}
       {...flexProps}
@@ -198,7 +186,7 @@ export const LineBarGraph: React.FC<LineBarGraphProps> = ({
         </Flex>
       )}
       <Flex padding="m" fill>
-        <ResponsiveContainer width="100%" height={height}>
+        <ResponsiveContainer width="100%" height="100%">
           <ComposedChart
             data={data}
             margin={{ top: 20, right: 20, left: 20, bottom: 20 }}
@@ -252,6 +240,10 @@ export const LineBarGraph: React.FC<LineBarGraphProps> = ({
               hide={false}
             />
             <YAxis
+              tick={{
+                fill: "var(--neutral-on-background-medium)",
+                fontSize: 12,
+               }}
               axisLine={false}
               tickLine={false}
               width={hideYAxisLabels || hideLabels ? 0 : 30}
@@ -281,7 +273,21 @@ export const LineBarGraph: React.FC<LineBarGraphProps> = ({
               stroke={barColor}
               strokeWidth={1}
               radius={[4, 4, 0, 0]}
-              barSize={barSize}
+              barSize={
+                barWidth === "fill"
+                  ? "100%"
+                  : barWidth === "xs"
+                  ? 6
+                  : barWidth === "s"
+                  ? 12
+                  : barWidth === "m"
+                  ? 20
+                  : barWidth === "l"
+                  ? 40
+                  : barWidth === "xl"
+                  ? 50
+                  : barWidth
+                }
             />
             
             {showArea ? (
diff --git a/src/once-ui/components/LineGraph.tsx b/src/once-ui/components/LineGraph.tsx
index 3bca76cf..2558000d 100644
--- a/src/once-ui/components/LineGraph.tsx
+++ b/src/once-ui/components/LineGraph.tsx
@@ -29,7 +29,6 @@ interface LineGraphProps extends React.ComponentProps<typeof Flex> {
    * Size of the line graph.
    * @default "m"
    */
-  size?: "xs" | "s" | "m" | "l" | "xl";
   blur?: boolean;
   title?: string;
   tooltipTitle?: string;
@@ -110,7 +109,6 @@ export const LineGraph: React.FC<LineGraphProps> = ({
   yAxisKey1 = "value1",
   yAxisKey2 = "value2",
   yAxisKey3 = "value3",
-  size = "m",
   blur = false,
   border,
   title,
@@ -125,20 +123,16 @@ export const LineGraph: React.FC<LineGraphProps> = ({
   hideLabels = false,
   ...flexProps
 }) => {
-  const height = {
-    xs: 100,
-    s: 150,
-    m: 200,
-    l: 250,
-    xl: 300,
-  }[size];
+ 
 
   return (
     <Flex
       fill
+      fillHeight
       radius={radius}
       border={border}
       align="center"
+      horizontal="center"
       direction="column"
       vertical="center"
       background={background}
@@ -154,8 +148,8 @@ export const LineGraph: React.FC<LineGraphProps> = ({
       >
         <Heading padding="s">{title}</Heading>
       </Flex>
-      <Flex fill padding="m">
-        <ResponsiveContainer width="100%" height={height}>
+      <Flex fill fillHeight padding="m">
+        <ResponsiveContainer width="100%" height="100%">
           <AreaChart
             data={data}
             margin={{
diff --git a/src/once-ui/components/MultiBarGraph.tsx b/src/once-ui/components/MultiBarGraph.tsx
index 89f1dcd4..4ab69c51 100644
--- a/src/once-ui/components/MultiBarGraph.tsx
+++ b/src/once-ui/components/MultiBarGraph.tsx
@@ -10,15 +10,8 @@ import {
   Legend,
 } from "recharts";
 
-import {
-  GridProps,
-  SpacingProps,
-  SizeProps,
-  StyleProps,
-  CommonProps,
-  DisplayProps,
-  ConditionalProps,
-} from "../interfaces";
+import { SpacingToken, ColorScheme, ColorWeight } from "../types";
+
 
 import styles from "./BarGraph.module.scss";
 import { Text, Flex, Heading } from ".";
@@ -42,7 +35,7 @@ interface MultiBarGraphProps extends React.ComponentProps<typeof Flex> {
    * Size of the bar graph.
    * @default "m"
    */
-  size?: "xs" | "s" | "m" | "l" | "xl";
+  barWidth?: SpacingToken | "fill";
   blur?: boolean;
   title?: string;
   tooltipTitle?: string;
@@ -106,7 +99,7 @@ export const MultiBarGraph: React.FC<MultiBarGraphProps> = ({
   data,
   xAxisKey = "name",
   yAxisKeys = ["value1", "value2", "value3"],
-  size = "m",
+  barWidth = "fill",
   blur = false,
   border,
   title,
@@ -119,28 +112,14 @@ export const MultiBarGraph: React.FC<MultiBarGraphProps> = ({
   hideLabels = false,
   ...flexProps
 }) => {
-  const height = {
-    xs: 100,
-    s: 150,
-    m: 250,
-    l: 275,
-    xl: 300,
-  }[size];
 
-  const barSize = {
-    xs: 32,
-    s: 32,
-    m: 32,
-    l: 32,
-    xl: 32,
-  }[size];
 
   // Using the same colors from LineGraph
   const barColors = ["var(--success-solid-strong)", "var(--danger-solid-strong)", "#6c5ce7"]; // green, red, purple
 
   return (
     <Flex
-      fillWidth
+      fill
       radius={radius}
       border={border}
       align="center"
@@ -161,7 +140,7 @@ export const MultiBarGraph: React.FC<MultiBarGraphProps> = ({
         </Flex>
       )}
       <Flex padding="m" fill>
-        <ResponsiveContainer width="100%" height={height}>
+        <ResponsiveContainer width="100%" height="100%">
           <BarChart
             data={data}
             margin={{ top: 10, right: 10, left: 10, bottom: 10 }}
@@ -237,7 +216,21 @@ export const MultiBarGraph: React.FC<MultiBarGraphProps> = ({
                 stroke={barColors[index % barColors.length]}
                 strokeWidth={1}
                 radius={[6, 6, 0, 0]}
-                barSize={barSize}
+                barSize={
+                  barWidth === "fill"
+                    ? "98%"
+                    : barWidth === "xs"
+                    ? 6
+                    : barWidth === "s"
+                    ? 12
+                    : barWidth === "m"
+                    ? 20
+                    : barWidth === "l"
+                    ? 40
+                    : barWidth === "xl"
+                    ? 50
+                    : barWidth
+                  }
                 isAnimationActive={false}
               />
             ))}

From 70323ff82e31732fa6b2f9e689db64df4b4a0281 Mon Sep 17 00:00:00 2001
From: Adhitya Nadooli <127269031+lightyfr@users.noreply.github.com>
Date: Fri, 28 Mar 2025 17:02:14 +0000
Subject: [PATCH 05/35] feat: add axis title props and adjust padding/margins
 in graph components

---
 src/once-ui/components/BarGraph.tsx      | 22 +++++++---
 src/once-ui/components/LineBarGraph.tsx  | 15 +++++--
 src/once-ui/components/LineGraph.tsx     | 53 ++++++++++++++++++++----
 src/once-ui/components/MultiBarGraph.tsx | 53 +++++++++++++++++++++++-
 4 files changed, 125 insertions(+), 18 deletions(-)

diff --git a/src/once-ui/components/BarGraph.tsx b/src/once-ui/components/BarGraph.tsx
index b90313c0..d254c4f2 100644
--- a/src/once-ui/components/BarGraph.tsx
+++ b/src/once-ui/components/BarGraph.tsx
@@ -136,11 +136,11 @@ export const BarGraph: React.FC<BarGraphProps> = ({
       >
         <Heading padding="s">{title}</Heading>
       </Flex>
-      <Flex padding="m" fill>
+      <Flex padding={title ? "s" : "2"} fill>
         <ResponsiveContainer width="100%" height="100%">
           <BarChart
             data={data}
-            margin={{ top: 10, right: 10, left: 10, bottom: 10 }}
+            margin={{  left: 10, bottom: 15 }}
             barGap={4}
           >
             <CartesianGrid
@@ -157,9 +157,10 @@ export const BarGraph: React.FC<BarGraphProps> = ({
                 fill: "var(--neutral-on-background-medium)",
                 fontSize: 12,
               }}
+              
               label={
                 xAxisTitle && !hideXAxisTitle && !hideAxisTitles
-                  ? { value: xAxisTitle, position: 'bottom', offset: -2, fill: "var(--neutral-on-background-medium)" }
+                  ? { value: xAxisTitle, position: 'bottom', offset: 0, fill: "var(--neutral-on-background-medium)" }
                   : undefined
               }
             />
@@ -170,8 +171,19 @@ export const BarGraph: React.FC<BarGraphProps> = ({
                 fill: "var(--neutral-on-background-medium)",
                 fontSize: 12,
                }}
-              width={hideYAxisLabels || hideLabels ? 0 : 30}
-       
+               width={yAxisTitle ? 40 : 0}
+              label={
+                yAxisTitle && !hideYAxisTitle && !hideAxisTitles
+                  ? { 
+                      value: yAxisTitle, 
+                      angle: -90, // Rotate the label 90 degrees counter-clockwise
+                      position: 'left', 
+                      dx: 5, // Move label to the left
+                      dy: -20, // Adjust vertical position
+                      fill: "var(--neutral-on-background-medium)" 
+                    }
+                  : undefined
+              }
             />
             <Tooltip
               content={<CustomTooltip tooltipTitle={tooltipTitle} />}
diff --git a/src/once-ui/components/LineBarGraph.tsx b/src/once-ui/components/LineBarGraph.tsx
index d704927a..bbfb33fc 100644
--- a/src/once-ui/components/LineBarGraph.tsx
+++ b/src/once-ui/components/LineBarGraph.tsx
@@ -185,11 +185,11 @@ export const LineBarGraph: React.FC<LineBarGraphProps> = ({
           <Heading padding="s">{title}</Heading>
         </Flex>
       )}
-      <Flex padding="m" fill>
+      <Flex padding={title ? "s" : "2"} fill>
         <ResponsiveContainer width="100%" height="100%">
           <ComposedChart
             data={data}
-            margin={{ top: 20, right: 20, left: 20, bottom: 20 }}
+            margin={{ left: 10, bottom: 15 }}
           >
             <defs>
               {/* Bar gradient */}
@@ -246,10 +246,17 @@ export const LineBarGraph: React.FC<LineBarGraphProps> = ({
                }}
               axisLine={false}
               tickLine={false}
-              width={hideYAxisLabels || hideLabels ? 0 : 30}
+              width={yAxisTitle ? 50 : 0}
               label={
                 yAxisTitle && !hideYAxisTitle && !hideAxisTitles
-                  ? { value: yAxisTitle, angle: -90, position: 'left', offset: -5, fill: "var(--neutral-on-background-medium)" }
+                  ? { 
+                      value: yAxisTitle, 
+                      angle: -90, // Rotate the label 90 degrees counter-clockwise
+                      position: 'left', 
+                      dx: 0, // Move label to the left
+                      dy: -20, // Adjust vertical position
+                      fill: "var(--neutral-on-background-medium)" 
+                    }
                   : undefined
               }
               // Make sure to always show the grid even if labels are hidden
diff --git a/src/once-ui/components/LineGraph.tsx b/src/once-ui/components/LineGraph.tsx
index 2558000d..64a852bc 100644
--- a/src/once-ui/components/LineGraph.tsx
+++ b/src/once-ui/components/LineGraph.tsx
@@ -21,6 +21,8 @@ interface DataPoint {
 
 interface LineGraphProps extends React.ComponentProps<typeof Flex> {
   data: DataPoint[];
+  xAxisTitle?: string;
+  yAxisTitle?: string;
   xAxisKey?: string;
   yAxisKey1?: string;
   yAxisKey2?: string;
@@ -50,6 +52,24 @@ interface LineGraphProps extends React.ComponentProps<typeof Flex> {
    * @default false
    */
   hideLabels?: boolean;
+
+  /**
+   * Hide Y-axis title when true
+   * @default false
+   */
+  hideYAxisTitle?: boolean;
+  /**
+   * Hide X-axis title when true
+   * @default false
+   */
+  hideXAxisTitle?: boolean;
+  /**
+   * Hide both X and Y axis titles when true
+   * @default false
+   */
+  hideAxisTitles?: boolean;
+
+
 }
 
 interface CustomTooltipProps extends TooltipProps<number, string> {
@@ -109,6 +129,11 @@ export const LineGraph: React.FC<LineGraphProps> = ({
   yAxisKey1 = "value1",
   yAxisKey2 = "value2",
   yAxisKey3 = "value3",
+  hideYAxisTitle = false,
+  hideAxisTitles = false,
+  yAxisTitle,
+  xAxisTitle,
+  hideXAxisTitle = false,
   blur = false,
   border,
   title,
@@ -148,16 +173,11 @@ export const LineGraph: React.FC<LineGraphProps> = ({
       >
         <Heading padding="s">{title}</Heading>
       </Flex>
-      <Flex fill fillHeight padding="m">
+      <Flex fill padding={title ? "s" : "2"} className={styles.graph}>
         <ResponsiveContainer width="100%" height="100%">
           <AreaChart
             data={data}
-            margin={{
-              top: 10,
-              right: 30,
-              left: 0,
-              bottom: 0,
-            }}
+            margin={{  left: 10, bottom: 15 }}
           >
             <defs>
               <linearGradient id="colorValue1" x1="0" y1="0" x2="0" y2="1">
@@ -190,6 +210,11 @@ export const LineGraph: React.FC<LineGraphProps> = ({
                 fontSize: 11,
                 fontWeight: "bold",
               }}
+              label={
+                xAxisTitle && !hideXAxisTitle && !hideAxisTitles
+                  ? { value: xAxisTitle, position: 'bottom', offset: 0, fill: "var(--neutral-on-background-medium)" }
+                  : undefined
+              }
               axisLine={false}
               tickLine={false}
               hide={hideXAxisLabels || hideLabels}
@@ -200,6 +225,20 @@ export const LineGraph: React.FC<LineGraphProps> = ({
                 fill: "var(--neutral-on-background-medium)",
                 fontSize: 11,
               }}
+              width={yAxisTitle ? 40 : 0}
+              label={
+                yAxisTitle && !hideYAxisTitle && !hideAxisTitles
+                  ? { 
+                      value: yAxisTitle, 
+                      angle: -90, // Rotate the label 90 degrees counter-clockwise
+                      position: 'left', 
+                      dx: 5, // Move label to the left
+                      dy: -20, // Adjust vertical position
+                      fill: "var(--neutral-on-background-medium)" 
+                    }
+                  : undefined
+              }
+
               axisLine={false}
               tickLine={false}
               hide={hideYAxisLabels || hideLabels}
diff --git a/src/once-ui/components/MultiBarGraph.tsx b/src/once-ui/components/MultiBarGraph.tsx
index 4ab69c51..5b559f88 100644
--- a/src/once-ui/components/MultiBarGraph.tsx
+++ b/src/once-ui/components/MultiBarGraph.tsx
@@ -54,6 +54,33 @@ interface MultiBarGraphProps extends React.ComponentProps<typeof Flex> {
    * @default false
    */
   hideLabels?: boolean;
+  /**
+   * When true, hides the X axis title
+   * @default false
+   */
+  hideXAxisTitle?: boolean;
+  /**
+   * When true, hides the Y axis title
+   * @default false
+   */
+  hideYAxisTitle?: boolean;
+  /**
+   * When true, hides all axis titles
+   * @default false
+   */
+  hideAxisTitles?: boolean;
+  /**
+   * Title for X-axis
+   */
+  xAxisTitle?: string;
+  /**
+   * Title for Y-axis
+   */
+  yAxisTitle?: string;
+  /**
+   * When true, hides the Y axis  title
+   * @default false
+   */
 }
 
 const CustomTooltip = ({ active, payload, tooltipTitle, barLabels }: any) => {
@@ -108,7 +135,12 @@ export const MultiBarGraph: React.FC<MultiBarGraphProps> = ({
   barLabels,
   background,
   hideXAxisLabels = false,
+  xAxisTitle,
+  hideXAxisTitle = false,
   hideYAxisLabels = false,
+  yAxisTitle,
+  hideYAxisTitle = false,
+  hideAxisTitles = false,
   hideLabels = false,
   ...flexProps
 }) => {
@@ -139,7 +171,7 @@ export const MultiBarGraph: React.FC<MultiBarGraphProps> = ({
           <Heading padding="s">{title}</Heading>
         </Flex>
       )}
-      <Flex padding="m" fill>
+      <Flex padding={title ? "s" : "2"} fill>
         <ResponsiveContainer width="100%" height="100%">
           <BarChart
             data={data}
@@ -162,6 +194,11 @@ export const MultiBarGraph: React.FC<MultiBarGraphProps> = ({
                 fontSize: 12,
               }}
               hide={hideLabels || hideXAxisLabels}
+              label={
+                xAxisTitle && !hideXAxisTitle && !hideAxisTitles
+                  ? { value: xAxisTitle, position: 'bottom', offset: -2, fill: "var(--neutral-on-background-medium)" }
+                  : undefined
+              }
             />
             <YAxis
               axisLine={false}
@@ -170,7 +207,19 @@ export const MultiBarGraph: React.FC<MultiBarGraphProps> = ({
                 fill: "var(--neutral-on-background-medium)",
                 fontSize: 12,
               }}
-              width={30}
+              width={yAxisTitle ? 40 : 0} // Adjust width based on number of bars
+              label={
+                yAxisTitle && !hideYAxisTitle && !hideAxisTitles
+                  ? { 
+                      value: yAxisTitle, 
+                      angle: -90, // Rotate the label 90 degrees counter-clockwise
+                      position: 'left', 
+                      dx: 0, // Move label to the left
+                      dy: -20, // Adjust vertical position
+                      fill: "var(--neutral-on-background-medium)" 
+                    }
+                  : undefined
+              }
               domain={[0, "auto"]} // Start from 0, auto-scale the upper bound
               allowDataOverflow={false} // Prevent data from exceeding the domain
               hide={hideLabels || hideYAxisLabels}

From e2a3e9755b44ded8e51dfa16985261e87a5471e3 Mon Sep 17 00:00:00 2001
From: Adhitya Nadooli <127269031+lightyfr@users.noreply.github.com>
Date: Fri, 28 Mar 2025 17:19:14 +0000
Subject: [PATCH 06/35] feat: extend barWidth prop to accept number and string
 types in graph components

---
 src/once-ui/components/BarGraph.tsx      | 2 +-
 src/once-ui/components/LineBarGraph.tsx  | 2 +-
 src/once-ui/components/MultiBarGraph.tsx | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/once-ui/components/BarGraph.tsx b/src/once-ui/components/BarGraph.tsx
index d254c4f2..19306b0e 100644
--- a/src/once-ui/components/BarGraph.tsx
+++ b/src/once-ui/components/BarGraph.tsx
@@ -34,7 +34,7 @@ interface BarGraphProps extends React.ComponentProps<typeof Flex> {
    * Size of the bar graph.
    * @default "m"
    */
-  barWidth?: SpacingToken | "fill";
+  barWidth?: SpacingToken | "fill" | number | string;
   blur?: boolean; // Controls backdrop blur effect
   title?: string; // Title for the bar graph
   tooltipTitle?: string; // Title for the tooltip
diff --git a/src/once-ui/components/LineBarGraph.tsx b/src/once-ui/components/LineBarGraph.tsx
index bbfb33fc..8cbeabcb 100644
--- a/src/once-ui/components/LineBarGraph.tsx
+++ b/src/once-ui/components/LineBarGraph.tsx
@@ -34,7 +34,7 @@ interface LineBarGraphProps extends React.ComponentProps<typeof Flex> {
    * Size of the graph.
    * @default "m"
    */
-  barWidth?: SpacingToken | "fill";
+  barWidth?: SpacingToken | "fill" | number | string;
   blur?: boolean;
   title?: string;
   lineColor?: string;
diff --git a/src/once-ui/components/MultiBarGraph.tsx b/src/once-ui/components/MultiBarGraph.tsx
index 5b559f88..7f2f3372 100644
--- a/src/once-ui/components/MultiBarGraph.tsx
+++ b/src/once-ui/components/MultiBarGraph.tsx
@@ -35,7 +35,7 @@ interface MultiBarGraphProps extends React.ComponentProps<typeof Flex> {
    * Size of the bar graph.
    * @default "m"
    */
-  barWidth?: SpacingToken | "fill";
+  barWidth?: SpacingToken | "fill" | number | string;
   blur?: boolean;
   title?: string;
   tooltipTitle?: string;

From 646a9073b7a62a7104e42be4d8e99e9e4e44636f Mon Sep 17 00:00:00 2001
From: Adhitya Nadooli <127269031+lightyfr@users.noreply.github.com>
Date: Fri, 28 Mar 2025 19:00:29 +0000
Subject: [PATCH 07/35] feat: enhance tooltip styling and improve axis label
 visibility in graph components

---
 src/once-ui/components/BarGraph.module.scss  |  97 ++++++++---------
 src/once-ui/components/BarGraph.tsx          |  15 +--
 src/once-ui/components/LineBarGraph.tsx      |   9 +-
 src/once-ui/components/LineGraph.module.scss | 108 +++++++++----------
 src/once-ui/components/LineGraph.tsx         |  32 ++++--
 src/once-ui/components/MultiBarGraph.tsx     |  20 ++--
 6 files changed, 143 insertions(+), 138 deletions(-)

diff --git a/src/once-ui/components/BarGraph.module.scss b/src/once-ui/components/BarGraph.module.scss
index ec2f0669..cdf7d288 100644
--- a/src/once-ui/components/BarGraph.module.scss
+++ b/src/once-ui/components/BarGraph.module.scss
@@ -1,56 +1,53 @@
 .graphContainer {
-    width: 100%;
-    height: 200px;
-    border-radius: 12px;
-    padding: 24px;
-  
-    :global(.recharts-bar-rectangle) {
-      filter: drop-shadow(0 0 8px rgba(4, 78, 120, 0.3));
-    }
+  width: 100%;
+  height: 200px;
+  border-radius: 12px;
+  padding: 24px;
+
+  :global(.recharts-bar-rectangle) {
+    filter: drop-shadow(0 0 8px rgba(4, 78, 120, 0.3));
   }
-  
-  .blur {
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
-  }
-  
-  .blur::backdrop {
-    backdrop-filter: blur(12px);
-  }
-  
-  .blur::before {
-    backdrop-filter: blur(12px);
+}
+
+.blur {
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+}
+
+.blur::backdrop {
+  backdrop-filter: blur(12px);
+}
+
+.blur::before {
+  backdrop-filter: blur(12px);
+}
+
+.tooltip {
+  border-radius: var(--radius-m);
+  text-align: center;
+  justify-content: center;
+  align-items: center;
+
+  .label {
+    text-align: center;
+    margin: 0 0 10px;
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--neutral-on-background-strong);
   }
-  
-  .tooltip {
-    backdrop-filter: blur(12px);
-    border: 1px solid var(--neutral-alpha-medium);
-    border-radius: var(--radius-m);
+
+  .value {
+    font-weight: 500;
     text-align: center;
-    justify-content: center;
+    margin: 4px 0;
+    display: flex;
     align-items: center;
-  
-    .label {
-      text-align: center;
-      margin: 0 0 10px;
-      font-size: 15px;
-      font-weight: 600;
-      color: var(--neutral-on-background-strong);
-    }
-  
-    .value {
-      font-weight: 500;
-      text-align: center;
-      margin: 4px 0;
-      display: flex;
-      align-items: center;
-    }
-  }
-  
-  .tooltipWrapper {
-    background-color: var(--neutral-background-strong);
-    border: 1px solid var(--neutral-border-medium);
-    border-radius: var(--radius-s);
-    color: var(--neutral-on-background-medium);
   }
-  
\ No newline at end of file
+}
+
+.tooltipWrapper {
+  background-color: var(--neutral-background-strong);
+  border: 1px solid var(--neutral-border-medium);
+  border-radius: var(--radius-s);
+  color: var(--neutral-on-background-medium);
+}
diff --git a/src/once-ui/components/BarGraph.tsx b/src/once-ui/components/BarGraph.tsx
index 19306b0e..db50d251 100644
--- a/src/once-ui/components/BarGraph.tsx
+++ b/src/once-ui/components/BarGraph.tsx
@@ -56,11 +56,11 @@ interface BarGraphProps extends React.ComponentProps<typeof Flex> {
   hideAxisTitles?: boolean;
 }
 
-const CustomTooltip = ({ active, payload, tooltipTitle }: any) => {
+const CustomTooltip = ({ active, payload, tooltipTitle, xAxisTitle }: any) => {
   if (active && payload && payload.length) {
     const data = payload[0].payload;
     return (
-      <Flex className={styles.tooltip} direction="column">
+      <Flex className={styles.tooltip} background="surface" radius="l" border="neutral-alpha-medium" direction="column">
         <Flex
           borderBottom="neutral-alpha-medium"
           fillWidth
@@ -71,7 +71,7 @@ const CustomTooltip = ({ active, payload, tooltipTitle }: any) => {
             variant="body-default-s"
             style={{ fontWeight: "600" }}
             onBackground="neutral-strong"
-          >{`${data.startDate} - ${data.endDate}`}</Text>
+          >{`${xAxisTitle}: ${data.endDate}`}</Text>
         </Flex>
         <Flex padding="s">
           <Text variant="body-default-s" onBackground="neutral-strong">
@@ -154,13 +154,13 @@ export const BarGraph: React.FC<BarGraphProps> = ({
               axisLine={false}
               tickLine={false}
               tick={hideXAxisLabels || hideLabels ? false : {
-                fill: "var(--neutral-on-background-medium)",
+                fill: "var(--neutral-on-background-weak)",
                 fontSize: 12,
               }}
               
               label={
                 xAxisTitle && !hideXAxisTitle && !hideAxisTitles
-                  ? { value: xAxisTitle, position: 'bottom', offset: 0, fill: "var(--neutral-on-background-medium)" }
+                  ? { value: xAxisTitle, fontWeight: "500", position: 'bottom', offset: 0, fill: "var(--neutral-on-background-medium)" }
                   : undefined
               }
             />
@@ -168,7 +168,7 @@ export const BarGraph: React.FC<BarGraphProps> = ({
               axisLine={false}
               tickLine={false}
               tick={{
-                fill: "var(--neutral-on-background-medium)",
+                fill: "var(--neutral-on-background-weak)",
                 fontSize: 12,
                }}
                width={yAxisTitle ? 40 : 0}
@@ -178,6 +178,7 @@ export const BarGraph: React.FC<BarGraphProps> = ({
                       value: yAxisTitle, 
                       angle: -90, // Rotate the label 90 degrees counter-clockwise
                       position: 'left', 
+                      fontWeight: "500",
                       dx: 5, // Move label to the left
                       dy: -20, // Adjust vertical position
                       fill: "var(--neutral-on-background-medium)" 
@@ -186,7 +187,7 @@ export const BarGraph: React.FC<BarGraphProps> = ({
               }
             />
             <Tooltip
-              content={<CustomTooltip tooltipTitle={tooltipTitle} />}
+              content={<CustomTooltip tooltipTitle={tooltipTitle} xAxisTitle={xAxisTitle} />}
               cursor={{ fill: "rgba(255,255,255,0.05)" }}
               wrapperClassName={styles.tooltipWrapper} // Apply styles to the tooltip wrapper
             />
diff --git a/src/once-ui/components/LineBarGraph.tsx b/src/once-ui/components/LineBarGraph.tsx
index 8cbeabcb..a6280d27 100644
--- a/src/once-ui/components/LineBarGraph.tsx
+++ b/src/once-ui/components/LineBarGraph.tsx
@@ -93,7 +93,7 @@ interface LineBarGraphProps extends React.ComponentProps<typeof Flex> {
 const CustomTooltip = ({ active, payload, label }: any) => {
   if (active && payload && payload.length) {
     return (
-      <Flex className={styles.tooltip} direction="column">
+      <Flex className={styles.tooltip} background="surface" border="neutral-alpha-medium" direction="column">
         <Flex
           borderBottom="neutral-alpha-medium"
           fillWidth
@@ -228,12 +228,12 @@ export const LineBarGraph: React.FC<LineBarGraphProps> = ({
               axisLine={false}
               tickLine={false}
               tick={hideXAxisLabels || hideLabels ? false : {
-                fill: "var(--neutral-on-background-medium)",
+                fill: "var(--neutral-on-background-weak)",
                 fontSize: 12,
               }}
               label={
                 xAxisTitle && !hideXAxisTitle && !hideAxisTitles
-                  ? { value: xAxisTitle, position: 'bottom', offset: 0, fill: "var(--neutral-on-background-medium)" }
+                  ? { value: xAxisTitle,  fontWeight: "500", position: 'bottom', offset: 0, fill: "var(--neutral-on-background-medium)" }
                   : undefined
               }
               // Make sure to always show the grid even if labels are hidden
@@ -241,8 +241,8 @@ export const LineBarGraph: React.FC<LineBarGraphProps> = ({
             />
             <YAxis
               tick={{
-                fill: "var(--neutral-on-background-medium)",
                 fontSize: 12,
+                fill: "var(--neutral-on-background-weak)",
                }}
               axisLine={false}
               tickLine={false}
@@ -253,6 +253,7 @@ export const LineBarGraph: React.FC<LineBarGraphProps> = ({
                       value: yAxisTitle, 
                       angle: -90, // Rotate the label 90 degrees counter-clockwise
                       position: 'left', 
+                      fontWeight: "500",
                       dx: 0, // Move label to the left
                       dy: -20, // Adjust vertical position
                       fill: "var(--neutral-on-background-medium)" 
diff --git a/src/once-ui/components/LineGraph.module.scss b/src/once-ui/components/LineGraph.module.scss
index 9ba50274..3ba34fe5 100644
--- a/src/once-ui/components/LineGraph.module.scss
+++ b/src/once-ui/components/LineGraph.module.scss
@@ -1,62 +1,56 @@
 .graphContainer {
-    border-radius: 12px;
-    padding: 24px;
-    width: 100%;
-    height: 100%;
-    min-height: 300px;
-    border: 1px solid rgba(255, 255, 255, 0.05);
-  
-    :global(.recharts-cartesian-grid-horizontal line),
-    :global(.recharts-cartesian-grid-vertical line) {
-      stroke: var(--neutral-background-strong);
-    }
-  
-    :global(.recharts-tooltip-cursor) {
-      fill: rgba(255, 255, 255, 0.02);
-    }
-  
-    :global(.recharts-default-tooltip) {
-      background-color: #0f0f13 !important;
-      border: 1px solid rgba(255, 255, 255, 0.05) !important;
-      border-radius: 4px;
-      padding: 8px !important;
-      box-shadow:
-        0 4px 6px -1px rgba(0, 0, 0, 0.2),
-        0 2px 4px -1px rgba(0, 0, 0, 0.1);
-    }
-  
-    :global(.recharts-surface) {
-      overflow: visible;
-    }
-  
-    :global(.recharts-bar-rectangle) {
-      filter: drop-shadow(0 0 8px rgba(4, 78, 120, 0.3));
-    }
+  border-radius: 12px;
+  padding: 24px;
+  width: 100%;
+  height: 100%;
+  min-height: 300px;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+
+  :global(.recharts-cartesian-grid-horizontal line),
+  :global(.recharts-cartesian-grid-vertical line) {
+    stroke: var(--neutral-background-strong);
   }
-  
-  .tooltip {
-    backdrop-filter: blur(12px);
-    border: 1px solid var(--neutral-alpha-medium);
-    border-radius: var(--radius-m);
+
+  :global(.recharts-tooltip-cursor) {
+    fill: rgba(255, 255, 255, 0.02);
+  }
+
+  :global(.recharts-default-tooltip) {
+    background-color: #0f0f13 !important;
+    border: 1px solid rgba(255, 255, 255, 0.05) !important;
+    border-radius: 4px;
+    padding: 8px !important;
+    box-shadow:
+      0 4px 6px -1px rgba(0, 0, 0, 0.2),
+      0 2px 4px -1px rgba(0, 0, 0, 0.1);
+  }
+
+  :global(.recharts-surface) {
+    overflow: visible;
+  }
+
+  :global(.recharts-bar-rectangle) {
+    filter: drop-shadow(0 0 8px rgba(4, 78, 120, 0.3));
+  }
+}
+
+.tooltip {
+  border-radius: var(--radius-m);
+  text-align: center;
+  justify-content: center;
+
+  .label {
+    text-align: center;
+    padding: 5px;
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--neutral-on-background-strong);
+  }
+
+  .value {
+    font-weight: 500;
     text-align: center;
-    justify-content: center;
-    background-color: none;
-    background: none;
+    display: flex;
     align-items: center;
-  
-    .label {
-      text-align: center;
-      padding: 5px;
-      font-size: 15px;
-      font-weight: 600;
-      color: var(--neutral-on-background-strong);
-    }
-  
-    .value {
-      font-weight: 500;
-      text-align: center;
-      display: flex;
-      align-items: center;
-    }
   }
-  
\ No newline at end of file
+}
diff --git a/src/once-ui/components/LineGraph.tsx b/src/once-ui/components/LineGraph.tsx
index 64a852bc..83dcf9c5 100644
--- a/src/once-ui/components/LineGraph.tsx
+++ b/src/once-ui/components/LineGraph.tsx
@@ -68,8 +68,11 @@ interface LineGraphProps extends React.ComponentProps<typeof Flex> {
    * @default false
    */
   hideAxisTitles?: boolean;
-
-
+  fixedYRange?: [number, number]; // [min, max] for y-axis
+  /**
+   * Show tick lines on the X-axis when true
+   * @default false
+   */
 }
 
 interface CustomTooltipProps extends TooltipProps<number, string> {
@@ -80,6 +83,7 @@ interface CustomTooltipProps extends TooltipProps<number, string> {
   yAxisKey1?: string;
   yAxisKey2?: string;
   yAxisKey3?: string;
+  xAxisTitle?: string; // Add this property
 }
 
 const CustomTooltip = ({
@@ -93,10 +97,11 @@ const CustomTooltip = ({
   yAxisKey1 = "value1",
   yAxisKey2 = "value2",
   yAxisKey3 = "value3",
+  xAxisTitle = "", // Add default value
 }: CustomTooltipProps) => {
   if (active && payload && payload.length) {
     return (
-      <Flex className={styles.tooltip} direction="column">
+      <Flex className={styles.tooltip} background="surface" radius="l" border="neutral-alpha-medium" direction="column">
         <Flex
           borderBottom="neutral-alpha-medium"
           fillWidth
@@ -104,13 +109,15 @@ const CustomTooltip = ({
           horizontal="center"
           padding="4"
         >
-          <p className={styles.label}>{`${tooltipTitle}`}</p>
+            <p className={styles.label}>
+              {tooltipTitle ? tooltipTitle : `${xAxisTitle}: ${label}`}
+            </p>
         </Flex>
         <Flex padding="xs" direction="column" vertical="center">
-          <p className={styles.value} style={{ color: "#047857" }}>
+          <p className={styles.value} style={{ color: "var(--success-solid-strong)" }}>
             {`${key1}: ${payload[0].value}`}
           </p>
-          <p className={styles.value} style={{ color: "#991b1b" }}>
+          <p className={styles.value} style={{ color: "var(--danger-solid-strong)" }}>
             {`${key2}: ${payload[1].value}`}
           </p>
           <p className={styles.value} style={{ color: "#6c5ce7" }}>
@@ -146,6 +153,7 @@ export const LineGraph: React.FC<LineGraphProps> = ({
   hideXAxisLabels = false,
   hideYAxisLabels = false,
   hideLabels = false,
+  fixedYRange,
   ...flexProps
 }) => {
  
@@ -206,13 +214,12 @@ export const LineGraph: React.FC<LineGraphProps> = ({
               dataKey={xAxisKey}
               stroke="var(--neutral-background-medium)"
               tick={{
-                fill: "var(--neutral-on-background-medium)",
+                fill: "var(--neutral-on-background-weak)",
                 fontSize: 11,
-                fontWeight: "bold",
               }}
               label={
                 xAxisTitle && !hideXAxisTitle && !hideAxisTitles
-                  ? { value: xAxisTitle, position: 'bottom', offset: 0, fill: "var(--neutral-on-background-medium)" }
+                  ? { value: xAxisTitle,  fontWeight: "500", position: 'bottom', offset: 0, fill: "var(--neutral-on-background-medium)" }
                   : undefined
               }
               axisLine={false}
@@ -222,14 +229,16 @@ export const LineGraph: React.FC<LineGraphProps> = ({
             <YAxis
               stroke="var(--neutral-background-strong)"
               tick={{
-                fill: "var(--neutral-on-background-medium)",
+                fill: "var(--neutral-on-background-weak)",
                 fontSize: 11,
               }}
+              tickLine={false}
               width={yAxisTitle ? 40 : 0}
               label={
                 yAxisTitle && !hideYAxisTitle && !hideAxisTitles
                   ? { 
                       value: yAxisTitle, 
+                      fontWeight: "500",
                       angle: -90, // Rotate the label 90 degrees counter-clockwise
                       position: 'left', 
                       dx: 5, // Move label to the left
@@ -240,8 +249,8 @@ export const LineGraph: React.FC<LineGraphProps> = ({
               }
 
               axisLine={false}
-              tickLine={false}
               hide={hideYAxisLabels || hideLabels}
+              domain={fixedYRange ? fixedYRange : undefined}
             />
             <Tooltip
               content={
@@ -253,6 +262,7 @@ export const LineGraph: React.FC<LineGraphProps> = ({
                   yAxisKey1={yAxisKey1}
                   yAxisKey2={yAxisKey2}
                   yAxisKey3={yAxisKey3}
+                  xAxisTitle={xAxisTitle} // Add this prop
                 />
               }
               contentStyle={{
diff --git a/src/once-ui/components/MultiBarGraph.tsx b/src/once-ui/components/MultiBarGraph.tsx
index 7f2f3372..3f011621 100644
--- a/src/once-ui/components/MultiBarGraph.tsx
+++ b/src/once-ui/components/MultiBarGraph.tsx
@@ -87,7 +87,7 @@ const CustomTooltip = ({ active, payload, tooltipTitle, barLabels }: any) => {
   if (active && payload && payload.length) {
     const data = payload[0].payload;
     return (
-      <Flex className={styles.tooltip} direction="column">
+      <Flex className={styles.tooltip} background="surface" border="neutral-alpha-medium" direction="column">
         <Flex
           borderBottom="neutral-alpha-medium"
           fillWidth
@@ -178,7 +178,7 @@ export const MultiBarGraph: React.FC<MultiBarGraphProps> = ({
             margin={{ top: 10, right: 10, left: 10, bottom: 10 }}
             barGap={4} // Small gap between bars in the same group
             barCategoryGap={1} // Control spacing between different groups (x-axis categories)
-          >
+            >
             <CartesianGrid
               strokeDasharray="2 2"
               horizontal={true}
@@ -190,22 +190,23 @@ export const MultiBarGraph: React.FC<MultiBarGraphProps> = ({
               axisLine={false}
               tickLine={false}
               tick={{
-                fill: "var(--neutral-on-background-medium)",
-                fontSize: 12,
+                fill: "var(--neutral-on-background-weak)",
+              fontSize: 12,
               }}
               hide={hideLabels || hideXAxisLabels}
               label={
-                xAxisTitle && !hideXAxisTitle && !hideAxisTitles
-                  ? { value: xAxisTitle, position: 'bottom', offset: -2, fill: "var(--neutral-on-background-medium)" }
-                  : undefined
+              xAxisTitle && !hideXAxisTitle && !hideAxisTitles
+                ? { value: xAxisTitle,               fontWeight: "500",
+                  position: 'bottom', offset: -2, fill: "var(--neutral-on-background-medium)" }
+                : undefined
               }
             />
             <YAxis
               axisLine={false}
               tickLine={false}
               tick={{
-                fill: "var(--neutral-on-background-medium)",
-                fontSize: 12,
+                fill: "var(--neutral-on-background-weak)",
+              fontSize: 12,
               }}
               width={yAxisTitle ? 40 : 0} // Adjust width based on number of bars
               label={
@@ -214,6 +215,7 @@ export const MultiBarGraph: React.FC<MultiBarGraphProps> = ({
                       value: yAxisTitle, 
                       angle: -90, // Rotate the label 90 degrees counter-clockwise
                       position: 'left', 
+                      fontWeight: "500",
                       dx: 0, // Move label to the left
                       dy: -20, // Adjust vertical position
                       fill: "var(--neutral-on-background-medium)" 

From 4af50f98e41d012ed4866b36fe000fadde5d931a Mon Sep 17 00:00:00 2001
From: Adhitya Nadooli <127269031+lightyfr@users.noreply.github.com>
Date: Fri, 28 Mar 2025 19:12:15 +0000
Subject: [PATCH 08/35] fix: update tooltip text styling in MultiBarGraph
 component

---
 src/once-ui/components/MultiBarGraph.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/once-ui/components/MultiBarGraph.tsx b/src/once-ui/components/MultiBarGraph.tsx
index 3f011621..733d89b4 100644
--- a/src/once-ui/components/MultiBarGraph.tsx
+++ b/src/once-ui/components/MultiBarGraph.tsx
@@ -108,7 +108,7 @@ const CustomTooltip = ({ active, payload, tooltipTitle, barLabels }: any) => {
           {payload.map((entry: any, index: number) => (
             <Text
               key={`value-${index}`}
-              variant="body-default-s"
+              className={styles.value}
               onBackground="neutral-strong"
               style={{ color: entry.color }}
             >

From c06cce148faf7c97816bc4892c24a73d2df2fd1d Mon Sep 17 00:00:00 2001
From: Adhitya Nadooli <127269031+lightyfr@users.noreply.github.com>
Date: Fri, 28 Mar 2025 19:26:57 +0000
Subject: [PATCH 09/35] feat: enhance tooltip styling and add MultiBarGraph
 component styles

---
 src/once-ui/components/BarGraph.tsx           |  7 +-
 .../components/LineBarGraph.module.scss       | 92 +++++++++----------
 src/once-ui/components/LineBarGraph.tsx       |  2 +-
 src/once-ui/components/LineGraph.module.scss  |  1 +
 src/once-ui/components/LineGraph.tsx          |  3 +-
 .../components/MultiBarGraph.module.scss      | 56 +++++++++++
 src/once-ui/components/MultiBarGraph.tsx      |  5 +-
 7 files changed, 111 insertions(+), 55 deletions(-)
 create mode 100644 src/once-ui/components/MultiBarGraph.module.scss

diff --git a/src/once-ui/components/BarGraph.tsx b/src/once-ui/components/BarGraph.tsx
index db50d251..09d9ab23 100644
--- a/src/once-ui/components/BarGraph.tsx
+++ b/src/once-ui/components/BarGraph.tsx
@@ -60,7 +60,7 @@ const CustomTooltip = ({ active, payload, tooltipTitle, xAxisTitle }: any) => {
   if (active && payload && payload.length) {
     const data = payload[0].payload;
     return (
-      <Flex className={styles.tooltip} background="surface" radius="l" border="neutral-alpha-medium" direction="column">
+      <Flex className={styles.tooltip} minWidth={8} background="surface" radius="l" border="neutral-alpha-medium" direction="column">
         <Flex
           borderBottom="neutral-alpha-medium"
           fillWidth
@@ -68,13 +68,12 @@ const CustomTooltip = ({ active, payload, tooltipTitle, xAxisTitle }: any) => {
           padding="8"
         >
           <Text
-            variant="body-default-s"
-            style={{ fontWeight: "600" }}
+            style={{ fontWeight: "500" }}
             onBackground="neutral-strong"
           >{`${xAxisTitle}: ${data.endDate}`}</Text>
         </Flex>
         <Flex padding="s">
-          <Text variant="body-default-s" onBackground="neutral-strong">
+          <Text onBackground="neutral-strong">
             {`${tooltipTitle}: ${data.value}`}
           </Text>
         </Flex>
diff --git a/src/once-ui/components/LineBarGraph.module.scss b/src/once-ui/components/LineBarGraph.module.scss
index d8dcd119..29ff0a3e 100644
--- a/src/once-ui/components/LineBarGraph.module.scss
+++ b/src/once-ui/components/LineBarGraph.module.scss
@@ -1,53 +1,53 @@
 .graphContainer {
-    width: 100%;
-    height: 100%;
-    min-height: 200px;
-    border-radius: 12px;
-    padding: 24px;
-  
-    :global(.recharts-bar-rectangle) {
-      filter: drop-shadow(0 0 8px rgba(4, 78, 120, 0.3));
-    }
-    
-    :global(.recharts-dot) {
-      filter: drop-shadow(0 0 4px rgba(78, 114, 238, 0.6));
-    }
+  width: 100%;
+  height: 100%;
+  min-height: 200px;
+  border-radius: 12px;
+  padding: 24px;
+
+  :global(.recharts-bar-rectangle) {
+    filter: drop-shadow(0 0 8px rgba(4, 78, 120, 0.3));
   }
   
-  .blur {
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
+  :global(.recharts-dot) {
+    filter: drop-shadow(0 0 4px rgba(78, 114, 238, 0.6));
   }
-  
-  .tooltip {
-    backdrop-filter: blur(12px);
-    border: 1px solid var(--neutral-alpha-medium);
-    border-radius: var(--radius-m);
+}
+
+.blur {
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+}
+
+.tooltip {
+  backdrop-filter: blur(12px);
+  border: 1px solid var(--neutral-alpha-medium);
+  border-radius: var(--radius-m);
+  text-align: center;
+  justify-content: center;
+  align-items: center;
+  backdrop-filter: blur(12px);
+
+  .label {
+    text-align: center;
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--neutral-on-background-strong);
+  }
+
+  .value {
+    font-weight: 500;
     text-align: center;
-    justify-content: center;
+    margin: 4px 0;
+    display: flex;
     align-items: center;
-    backdrop-filter: blur(12px);
-  
-    .label {
-      text-align: center;
-      font-size: 15px;
-      font-weight: 600;
-      color: var(--neutral-on-background-strong);
-    }
-  
-    .value {
-      font-weight: 500;
-      text-align: center;
-      margin: 4px 0;
-      display: flex;
-      align-items: center;
-    }
   }
-  
-  .tooltipWrapper {
-    background-color: var(--neutral-background-strong);
-    border: 1px solid var(--neutral-border-medium);
-    border-radius: var(--radius-s);
-    color: var(--neutral-on-background-medium);
-    padding: 8px;
-  }
\ No newline at end of file
+}
+
+.tooltipWrapper {
+  background-color: var(--neutral-background-strong);
+  border: 1px solid var(--neutral-border-medium);
+  border-radius: var(--radius-s);
+  color: var(--neutral-on-background-medium);
+  padding: 8px;
+}
\ No newline at end of file
diff --git a/src/once-ui/components/LineBarGraph.tsx b/src/once-ui/components/LineBarGraph.tsx
index a6280d27..0c839f97 100644
--- a/src/once-ui/components/LineBarGraph.tsx
+++ b/src/once-ui/components/LineBarGraph.tsx
@@ -93,7 +93,7 @@ interface LineBarGraphProps extends React.ComponentProps<typeof Flex> {
 const CustomTooltip = ({ active, payload, label }: any) => {
   if (active && payload && payload.length) {
     return (
-      <Flex className={styles.tooltip} background="surface" border="neutral-alpha-medium" direction="column">
+      <Flex className={styles.tooltip} minWidth={8} background="surface" border="neutral-alpha-medium" direction="column">
         <Flex
           borderBottom="neutral-alpha-medium"
           fillWidth
diff --git a/src/once-ui/components/LineGraph.module.scss b/src/once-ui/components/LineGraph.module.scss
index 3ba34fe5..b6492999 100644
--- a/src/once-ui/components/LineGraph.module.scss
+++ b/src/once-ui/components/LineGraph.module.scss
@@ -50,6 +50,7 @@
   .value {
     font-weight: 500;
     text-align: center;
+    margin: 4px 0;
     display: flex;
     align-items: center;
   }
diff --git a/src/once-ui/components/LineGraph.tsx b/src/once-ui/components/LineGraph.tsx
index 83dcf9c5..2c9741ed 100644
--- a/src/once-ui/components/LineGraph.tsx
+++ b/src/once-ui/components/LineGraph.tsx
@@ -103,6 +103,7 @@ const CustomTooltip = ({
     return (
       <Flex className={styles.tooltip} background="surface" radius="l" border="neutral-alpha-medium" direction="column">
         <Flex
+          minWidth={8}
           borderBottom="neutral-alpha-medium"
           fillWidth
           vertical="center"
@@ -113,7 +114,7 @@ const CustomTooltip = ({
               {tooltipTitle ? tooltipTitle : `${xAxisTitle}: ${label}`}
             </p>
         </Flex>
-        <Flex padding="xs" direction="column" vertical="center">
+        <Flex padding="xs" direction="column" horizontal="center" vertical="center">
           <p className={styles.value} style={{ color: "var(--success-solid-strong)" }}>
             {`${key1}: ${payload[0].value}`}
           </p>
diff --git a/src/once-ui/components/MultiBarGraph.module.scss b/src/once-ui/components/MultiBarGraph.module.scss
new file mode 100644
index 00000000..b4e1f529
--- /dev/null
+++ b/src/once-ui/components/MultiBarGraph.module.scss
@@ -0,0 +1,56 @@
+.graphContainer {
+    border-radius: 12px;
+    padding: 24px;
+    width: 100%;
+    height: 100%;
+    min-height: 300px;
+    border: 1px solid rgba(255, 255, 255, 0.05);
+  
+    :global(.recharts-cartesian-grid-horizontal line),
+    :global(.recharts-cartesian-grid-vertical line) {
+      stroke: var(--neutral-background-strong);
+    }
+  
+    :global(.recharts-tooltip-cursor) {
+      fill: rgba(255, 255, 255, 0.02);
+    }
+  
+    :global(.recharts-default-tooltip) {
+      background-color: #0f0f13 !important;
+      border: 1px solid rgba(255, 255, 255, 0.05) !important;
+      border-radius: 4px;
+      padding: 8px !important;
+      box-shadow:
+        0 4px 6px -1px rgba(0, 0, 0, 0.2),
+        0 2px 4px -1px rgba(0, 0, 0, 0.1);
+    }
+  
+    :global(.recharts-surface) {
+      overflow: visible;
+    }
+  
+    :global(.recharts-bar-rectangle) {
+      filter: drop-shadow(0 0 8px rgba(4, 78, 120, 0.3));
+    }
+  }
+  
+  .tooltip {
+    border-radius: var(--radius-m);
+    text-align: center;
+    justify-content: center;
+  
+    .label {
+      text-align: center;
+      padding: 5px;
+      font-size: 15px;
+      color: var(--neutral-on-background-strong);
+    }
+  
+    .value {
+      text-align: center;
+      margin: 4px 0;
+      display: flex;
+      align-items: center;
+    }
+  }
+  
\ No newline at end of file
diff --git a/src/once-ui/components/MultiBarGraph.tsx b/src/once-ui/components/MultiBarGraph.tsx
index 733d89b4..bb2ac989 100644
--- a/src/once-ui/components/MultiBarGraph.tsx
+++ b/src/once-ui/components/MultiBarGraph.tsx
@@ -13,7 +13,7 @@ import {
 import { SpacingToken, ColorScheme, ColorWeight } from "../types";
 
 
-import styles from "./BarGraph.module.scss";
+import styles from "./MultiBarGraph.module.scss";
 import { Text, Flex, Heading } from ".";
 
 // Data structure supporting multiple values
@@ -87,7 +87,7 @@ const CustomTooltip = ({ active, payload, tooltipTitle, barLabels }: any) => {
   if (active && payload && payload.length) {
     const data = payload[0].payload;
     return (
-      <Flex className={styles.tooltip} background="surface" border="neutral-alpha-medium" direction="column">
+      <Flex className={styles.tooltip} minWidth={8} background="surface" border="neutral-alpha-medium" direction="column">
         <Flex
           borderBottom="neutral-alpha-medium"
           fillWidth
@@ -95,7 +95,6 @@ const CustomTooltip = ({ active, payload, tooltipTitle, barLabels }: any) => {
           padding="8"
         >
           <Text
-            variant="body-default-s"
             style={{ fontWeight: "600" }}
             onBackground="neutral-strong"
           >

From e6d0af14517823e276f6519f8eec8eef5841135f Mon Sep 17 00:00:00 2001
From: Adhitya Nadooli <127269031+lightyfr@users.noreply.github.com>
Date: Fri, 28 Mar 2025 20:15:01 +0000
Subject: [PATCH 10/35] feat: add dashed line support to LineBarGraph and
 LineGraph components

---
 src/once-ui/components/LineBarGraph.tsx |  4 ++++
 src/once-ui/components/LineGraph.tsx    | 15 +++++++++++++++
 2 files changed, 19 insertions(+)

diff --git a/src/once-ui/components/LineBarGraph.tsx b/src/once-ui/components/LineBarGraph.tsx
index 0c839f97..997e33a7 100644
--- a/src/once-ui/components/LineBarGraph.tsx
+++ b/src/once-ui/components/LineBarGraph.tsx
@@ -50,6 +50,8 @@ interface LineBarGraphProps extends React.ComponentProps<typeof Flex> {
    * @default false
    */
   hideXAxisLabels?: boolean;
+
+  dashedLine?: boolean;
   /**
    * Hide Y-axis labels when true
    * @default false
@@ -128,6 +130,7 @@ export const LineBarGraph: React.FC<LineBarGraphProps> = ({
   barName = "Bar",
   barWidth = "fill",
   blur = false,
+  dashedLine = false,
   border,
   title,
   lineColorVariant = "info", // Options: "info", "success", "danger", "purple"
@@ -304,6 +307,7 @@ export const LineBarGraph: React.FC<LineBarGraphProps> = ({
                 dataKey={lineDataKey}
                 name={lineName}
                 stroke={finalLineColor}
+                strokeDasharray={dashedLine ? "5 5" : "0"}
                 strokeWidth={2}
                 fillOpacity={1}
                 fill={`url(#${lineGradientId})`}
diff --git a/src/once-ui/components/LineGraph.tsx b/src/once-ui/components/LineGraph.tsx
index 2c9741ed..54ad2baf 100644
--- a/src/once-ui/components/LineGraph.tsx
+++ b/src/once-ui/components/LineGraph.tsx
@@ -68,6 +68,14 @@ interface LineGraphProps extends React.ComponentProps<typeof Flex> {
    * @default false
    */
   hideAxisTitles?: boolean;
+  firstDashed?: boolean,
+
+  secondDashed?: boolean,
+
+ thirdDashed?: boolean,
+
+  allDashed?: boolean,
+
   fixedYRange?: [number, number]; // [min, max] for y-axis
   /**
    * Show tick lines on the X-axis when true
@@ -151,6 +159,10 @@ export const LineGraph: React.FC<LineGraphProps> = ({
   tooltipTitle,
   radius,
   background,
+  firstDashed = false,
+  secondDashed = false,
+  thirdDashed = false,
+  allDashed = false,
   hideXAxisLabels = false,
   hideYAxisLabels = false,
   hideLabels = false,
@@ -278,12 +290,14 @@ export const LineGraph: React.FC<LineGraphProps> = ({
               dataKey={yAxisKey1}
               stroke="#047857"
               strokeWidth={1.5}
+              strokeDasharray={allDashed || firstDashed ? "5 5" : "0"}
               fillOpacity={1}
               fill="url(#colorValue1)"
             />
             <Area
               type="linear"
               dataKey={yAxisKey2}
+              strokeDasharray={allDashed || secondDashed ? "5 5" : "0"}
               stroke="#991b1b"
               strokeWidth={1.5}
               fillOpacity={1}
@@ -292,6 +306,7 @@ export const LineGraph: React.FC<LineGraphProps> = ({
             <Area
               type="linear"
               dataKey={yAxisKey3}
+              strokeDasharray={allDashed || thirdDashed ? "5 5" : "0"}
               stroke="#6c5ce7"
               strokeWidth={1.5}
               fillOpacity={1}

From a8544dd2e71d621a10cd2195a62acb59bd890fc9 Mon Sep 17 00:00:00 2001
From: Adhitya Nadooli <127269031+lightyfr@users.noreply.github.com>
Date: Sat, 29 Mar 2025 15:11:25 +0000
Subject: [PATCH 11/35] feat: update tooltip formatting to use locale string
 representation in graph components

---
 src/app/page.tsx                         | 161 ++++++++++++++++++++++-
 src/once-ui/components/BarGraph.tsx      |  13 +-
 src/once-ui/components/LineBarGraph.tsx  |  11 +-
 src/once-ui/components/LineGraph.tsx     |  23 ++--
 src/once-ui/components/MultiBarGraph.tsx |   9 +-
 src/once-ui/components/index.ts          |   4 +-
 6 files changed, 200 insertions(+), 21 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index a113b652..9bfbb5b8 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -38,10 +38,15 @@ import {
   Row,
   StyleOverlay,
   CompareImage,
+  ScrollToTop,
   ThemeSwitcher,
 } from "@/once-ui/components";
 import { CodeBlock, MediaUpload } from "@/once-ui/modules";
-import { ScrollToTop } from "@/once-ui/components/ScrollToTop";
+
+import { BarGraph } from "@/once-ui/components/BarGraph";
+import { LineGraph } from "@/once-ui/components/LineGraph";
+import { MultiBarGraph } from "@/once-ui/components/MultiBarGraph";
+import { LineBarGraph } from "@/once-ui/components/LineBarGraph";
 
 export default function Home() {
   const [selectedValue, setSelectedValue] = useState("");
@@ -915,6 +920,160 @@ export default function Home() {
           </Column>
         </TiltFx>
 
+        {/* DATA VISUALIZATION */}
+        <Row
+          position="relative"
+          fillWidth
+          paddingX="32"
+          paddingY="160"
+          horizontal="center"
+          vertical="center"
+        >
+          <Background
+            mask={{
+              x: 50,
+              y: 0,
+              radius: 100,
+            }}
+            position="absolute"
+            dots={{
+              display: true,
+              opacity: 50,
+              color: "neutral-solid-strong",
+              size: "48",
+            }}
+          />
+          <Column fillWidth gap="64">
+            <Column gap="16" horizontal="center">
+              <Heading as="h2" variant="display-default-m">
+                Data Visualization
+              </Heading>
+              <Text align="center" onBackground="neutral-weak">
+                Powerful, responsive charts with automatic theming support
+              </Text>
+            </Column>
+            
+            <Row fill gap="32" mobileDirection="column">
+              {/* Bar Graph */}
+              <Column fill>
+              <Column background="neutral-weak" fill direction="column" border="neutral-alpha-weak" radius="xl" padding="32" gap="24">
+                  <Heading as="h3" variant="heading-default-m">
+                    Revenue
+                  </Heading>
+                  <BarGraph
+                  hideAxisTitles
+                  hideLabels
+                  height={20}
+                    barColor="success"
+                    tooltipTitle="Revenue"
+                    xAxisTitle="Month"
+                    yAxisTitle="USD"
+                    hideYAxisLabels={false}
+                    data={[
+                      { name: "Jan", value: 4500, startDate: "Jan", endDate: "January" },
+                      { name: "Feb", value: 5200, startDate: "Feb", endDate: "February" },
+                      { name: "Mar", value: 4900, startDate: "Mar", endDate: "March" },
+                      { name: "Apr", value: 6300, startDate: "Apr", endDate: "April" },
+                      { name: "May", value: 5900, startDate: "May", endDate: "May" },
+                      { name: "Jun", value: 8200, startDate: "Jun", endDate: "June" },
+                    ]}
+                  />
+                </Column>
+              </Column>
+              
+              {/* Line Graph */}
+              <Column fillWidth>
+                <Column background="neutral-weak" fill direction="column" border="neutral-alpha-weak" radius="xl" padding="32" gap="24">
+                  <Heading as="h3" variant="heading-default-m">
+                    User Activity
+                  </Heading>
+                  <LineGraph
+                  hideAxisTitles
+                    height={20}
+                    xAxisTitle="Week"
+                    yAxisTitle="Users"
+                    value1="Desktop"
+                    value2="Mobile"
+                    value3="Tablet"
+                    data={[
+                      { name: "W1", value1: 2100, value2: 1400, value3: 5500 },
+                      { name: "W2", value1: 2200, value2: 4398, value3: 3200 },
+                      { name: "W3", value1: 2000, value2: 1200, value3: 6500 },
+                      { name: "W4", value1: 3780, value2: 1108, value3: 1700 },
+                      { name: "W5", value1: 5990, value2: 1800, value3: 2100 },
+                      { name: "W6", value1: 4000, value2: 2400, value3: 3000 },
+                      { name: "W7", value1: 5000, value2: 3000, value3: 4000 },
+                    ]}
+                  />
+                </Column>
+              </Column>
+            </Row>
+            
+            <Row fillWidth gap="32" mobileDirection="column">
+              {/* Multi Bar Graph */}
+              <Column fillWidth>
+                <Column background="neutral-weak" fill direction="column" border="neutral-alpha-weak" radius="xl" padding="32" gap="24">
+                  <Heading as="h3" variant="heading-default-m">
+                    Quarterly Comparison
+                  </Heading>
+                  <MultiBarGraph
+                  hideAxisTitles
+                    height={20}
+                    data={[
+                      { name: "Q1", value1: 35000, value2: 45000, value3: 30000 },
+                      { name: "Q2", value1: 42000, value2: 48000, value3: 36000 },
+                      { name: "Q3", value1: 55000, value2: 51000, value3: 40000 },
+                      { name: "Q4", value1: 75000, value2: 52000, value3: 48000 },
+                    ]}
+                    xAxisTitle="Quarter"
+                    yAxisTitle="USD"
+                    barLabels={["2023", "2024", "Projected"]}
+                  />
+                </Column>
+              </Column>
+              
+              {/* Line Bar Graph */}
+              <Column fillWidth>
+                <Column background="neutral-weak" fill direction="column" border="neutral-alpha-weak" radius="xl" padding="32" gap="24">
+                  <Heading as="h3" variant="heading-default-m">
+                    Conversions vs Traffic
+                  </Heading>
+                  <LineBarGraph
+                  hideAxisTitles
+                    height={20}
+                    lineColorVariant="info"
+                    showArea={true}
+                    xAxisTitle="Day"
+                    yAxisTitle="Count"
+                    lineName="Traffic"
+                    barName="Conversions"
+                    data={[
+                      { name: "Mon", lineValue: 4500, barValue: 2190 },
+                      { name: "Tue", lineValue: 5200, barValue: 4230 },
+                      { name: "Wed", lineValue: 4800, barValue: 3250 },
+                      { name: "Thu", lineValue: 5900, barValue: 3280 },
+                      { name: "Fri", lineValue: 6800, barValue: 4320 },
+                      { name: "Sat", lineValue: 4800, barValue: 3190 },
+                      { name: "Sun", lineValue: 3900, barValue: 3170 },
+                    ]}
+                  />
+                </Column>
+              </Column>
+            </Row>
+            
+            <Row horizontal="center" marginTop="32">
+              <Button
+                id="dataVizDocs" 
+                target="_blank"
+                label="Explore chart components"
+                href="https://once-ui.com/docs/charts"
+                variant="secondary"
+                arrowIcon
+              />
+            </Row>
+          </Column>
+        </Row>
+
         <Row
           position="relative"
           fillWidth
diff --git a/src/once-ui/components/BarGraph.tsx b/src/once-ui/components/BarGraph.tsx
index 09d9ab23..a0b8b657 100644
--- a/src/once-ui/components/BarGraph.tsx
+++ b/src/once-ui/components/BarGraph.tsx
@@ -74,7 +74,7 @@ const CustomTooltip = ({ active, payload, tooltipTitle, xAxisTitle }: any) => {
         </Flex>
         <Flex padding="s">
           <Text onBackground="neutral-strong">
-            {`${tooltipTitle}: ${data.value}`}
+            {`${tooltipTitle}: ${data.value.toLocaleString()}`}
           </Text>
         </Flex>
       </Flex>
@@ -83,7 +83,7 @@ const CustomTooltip = ({ active, payload, tooltipTitle, xAxisTitle }: any) => {
   return null;
 };
 
-export const BarGraph: React.FC<BarGraphProps> = ({
+const BarGraph: React.FC<BarGraphProps> = ({
   data,
   xAxisKey = "name",
   yAxisKey = "value",
@@ -103,6 +103,7 @@ export const BarGraph: React.FC<BarGraphProps> = ({
   hideXAxisTitle = false,
   hideYAxisTitle = false,
   hideAxisTitles = false,
+  ...flexProps
 }) => {
 
 
@@ -117,7 +118,7 @@ export const BarGraph: React.FC<BarGraphProps> = ({
   return (
     <Flex
       fill
-      style={{height: "100%"}}
+      fillHeight
       radius={radius}
       border={border}
       align="center"
@@ -125,6 +126,7 @@ export const BarGraph: React.FC<BarGraphProps> = ({
       vertical="center"
       background={background}
       className={blur ? styles.blur : undefined}
+      {...flexProps}
     >
       <Flex
         borderBottom={border}
@@ -236,3 +238,8 @@ export const BarGraph: React.FC<BarGraphProps> = ({
     </Flex>
   );
 };
+
+BarGraph.displayName = "BarGraph";
+
+export { BarGraph };
+export type { BarGraphProps };
diff --git a/src/once-ui/components/LineBarGraph.tsx b/src/once-ui/components/LineBarGraph.tsx
index 997e33a7..1d624661 100644
--- a/src/once-ui/components/LineBarGraph.tsx
+++ b/src/once-ui/components/LineBarGraph.tsx
@@ -111,7 +111,7 @@ const CustomTooltip = ({ active, payload, label }: any) => {
               className={styles.value}
               style={{ color: entry.color }}
             >
-              {`${entry.name}: ${entry.value}`}
+              {`${entry.name.toLocaleString()}: ${entry.value.toLocaleString()}`}
             </p>
           ))}
         </Flex>
@@ -121,7 +121,7 @@ const CustomTooltip = ({ active, payload, label }: any) => {
   return null;
 };
 
-export const LineBarGraph: React.FC<LineBarGraphProps> = ({
+const LineBarGraph: React.FC<LineBarGraphProps> = ({
   data,
   xAxisKey = "name",
   lineDataKey = "lineValue",
@@ -330,4 +330,9 @@ export const LineBarGraph: React.FC<LineBarGraphProps> = ({
       </Flex>
     </Flex>
   );
-};
\ No newline at end of file
+};
+
+LineBarGraph.displayName = "LineBarGraph";
+
+export { LineBarGraph };
+export type { LineBarGraphProps };
\ No newline at end of file
diff --git a/src/once-ui/components/LineGraph.tsx b/src/once-ui/components/LineGraph.tsx
index 54ad2baf..cb258d52 100644
--- a/src/once-ui/components/LineGraph.tsx
+++ b/src/once-ui/components/LineGraph.tsx
@@ -123,14 +123,14 @@ const CustomTooltip = ({
             </p>
         </Flex>
         <Flex padding="xs" direction="column" horizontal="center" vertical="center">
-          <p className={styles.value} style={{ color: "var(--success-solid-strong)" }}>
-            {`${key1}: ${payload[0].value}`}
-          </p>
-          <p className={styles.value} style={{ color: "var(--danger-solid-strong)" }}>
-            {`${key2}: ${payload[1].value}`}
-          </p>
-          <p className={styles.value} style={{ color: "#6c5ce7" }}>
-            {`${key3}: ${payload[2].value}`}
+            <p className={styles.value} style={{ color: "var(--success-solid-strong)" }}>
+            {`${key1}: ${Number(payload[0].value).toLocaleString()}`}
+            </p>
+            <p className={styles.value} style={{ color: "var(--danger-solid-strong)" }}>
+            {`${key2}: ${Number(payload[1].value).toLocaleString()}`}
+            </p>
+            <p className={styles.value} style={{ color: "#6c5ce7" }}>
+            {`${key3}: ${Number(payload[2].value).toLocaleString()}`}
           </p>
         </Flex>
       </Flex>
@@ -139,7 +139,7 @@ const CustomTooltip = ({
   return null;
 };
 
-export const LineGraph: React.FC<LineGraphProps> = ({
+const LineGraph: React.FC<LineGraphProps> = ({
   data,
   xAxisKey = "name",
   yAxisKey1 = "value1",
@@ -318,3 +318,8 @@ export const LineGraph: React.FC<LineGraphProps> = ({
     </Flex>
   );
 };
+
+LineGraph.displayName = "LineGraph";
+
+export { LineGraph };
+export type { LineGraphProps };
diff --git a/src/once-ui/components/MultiBarGraph.tsx b/src/once-ui/components/MultiBarGraph.tsx
index bb2ac989..ba37893e 100644
--- a/src/once-ui/components/MultiBarGraph.tsx
+++ b/src/once-ui/components/MultiBarGraph.tsx
@@ -111,7 +111,7 @@ const CustomTooltip = ({ active, payload, tooltipTitle, barLabels }: any) => {
               onBackground="neutral-strong"
               style={{ color: entry.color }}
             >
-              {`${barLabels?.[index] || entry.dataKey}: ${entry.value}`}
+              {`${barLabels?.[index] || entry.dataKey}: ${entry.value.toLocaleString()}`}
             </Text>
           ))}
         </Flex>
@@ -121,7 +121,7 @@ const CustomTooltip = ({ active, payload, tooltipTitle, barLabels }: any) => {
   return null;
 };
 
-export const MultiBarGraph: React.FC<MultiBarGraphProps> = ({
+const MultiBarGraph: React.FC<MultiBarGraphProps> = ({
   data,
   xAxisKey = "name",
   yAxisKeys = ["value1", "value2", "value3"],
@@ -290,3 +290,8 @@ export const MultiBarGraph: React.FC<MultiBarGraphProps> = ({
     </Flex>
   );
 };
+
+MultiBarGraph.displayName = "MultiBarGraph";
+
+export { MultiBarGraph };
+export type { MultiBarGraphProps };
\ No newline at end of file
diff --git a/src/once-ui/components/index.ts b/src/once-ui/components/index.ts
index 3f71fa05..7eccdb1c 100644
--- a/src/once-ui/components/index.ts
+++ b/src/once-ui/components/index.ts
@@ -5,7 +5,6 @@ export * from "./Avatar";
 export * from "./AvatarGroup";
 export * from "./Badge";
 export * from "./Background";
-export * from "./BarGraph"
 export * from "./Button";
 export * from "./Carousel";
 export * from "./Card";
@@ -39,8 +38,6 @@ export * from "./Kbar";
 export * from "./Kbd";
 export * from "./LetterFx";
 export * from "./Line";
-export * from "./LineBarGraph"
-export * from "./LineGraph"
 export * from "./Logo";
 export * from "./LogoCloud";
 export * from "./MegaMenu";
@@ -54,6 +51,7 @@ export * from "./RadioButton";
 export * from "./RevealFx";
 export * from "./Row";
 export * from "./Scroller";
+export * from "./ScrollToTop";
 export * from "./SegmentedControl";
 export * from "./Select";
 export * from "./Skeleton";

From ddd165a1eb7fe4e0b0fbc2f4a102e79c6d07d5a0 Mon Sep 17 00:00:00 2001
From: Adhitya Nadooli <127269031+lightyfr@users.noreply.github.com>
Date: Sat, 29 Mar 2025 20:21:28 +0000
Subject: [PATCH 12/35] feat: add PieChart component with customizable options
 and tooltip

---
 src/app/page.tsx                            |  44 ++++
 src/once-ui/components/PieChart.module.scss |  32 +++
 src/once-ui/components/PieChart.tsx         | 214 ++++++++++++++++++++
 src/once-ui/components/ScrollToTop.tsx      |   2 +
 4 files changed, 292 insertions(+)
 create mode 100644 src/once-ui/components/PieChart.module.scss
 create mode 100644 src/once-ui/components/PieChart.tsx

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 9bfbb5b8..c666d152 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -47,6 +47,7 @@ import { BarGraph } from "@/once-ui/components/BarGraph";
 import { LineGraph } from "@/once-ui/components/LineGraph";
 import { MultiBarGraph } from "@/once-ui/components/MultiBarGraph";
 import { LineBarGraph } from "@/once-ui/components/LineBarGraph";
+import { PieChart } from "@/once-ui/components/PieChart";
 
 export default function Home() {
   const [selectedValue, setSelectedValue] = useState("");
@@ -1060,6 +1061,49 @@ export default function Home() {
                 </Column>
               </Column>
             </Row>
+
+            <Row fill gap="32" mobileDirection="column">
+              {/* Bar Graph */}
+              <Column fill>
+              <Column background="neutral-weak" fill direction="column" border="neutral-alpha-weak" radius="xl" padding="32" gap="24">
+                  <Heading as="h3" variant="heading-default-m">
+                    Revenue
+                  </Heading>
+                  <PieChart
+                  fill
+                  height={20}
+                  showLegend={true}
+                  innerRadius="70%" 
+                  colorVariants={["info", "success", "danger", "purple"]} 
+                    data = {[
+                      { name: 'Category A', value: 400 },
+                      { name: 'Category B', value: 300 },
+                      { name: 'Category C', value: 300 },
+                      { name: 'Category D', value: 200 }
+                    ]}
+                  />
+                </Column>
+              </Column>
+              
+              {/* Line Graph */}
+              <Column fillWidth>
+                <Column background="neutral-weak" fill direction="column" border="neutral-alpha-weak" radius="xl" padding="32" gap="24">
+                  <Heading as="h3" variant="heading-default-m">
+                    User Activity
+                  </Heading>
+                  <PieChart
+                    fill
+                    showLegend={true}
+                    data = {[
+                      { name: 'Category A', value: 400 },
+                      { name: 'Category B', value: 300 },
+                      { name: 'Category C', value: 300 },
+                      { name: 'Category D', value: 200 }
+                    ]}
+                  />
+                </Column>
+              </Column>
+            </Row>
             
             <Row horizontal="center" marginTop="32">
               <Button
diff --git a/src/once-ui/components/PieChart.module.scss b/src/once-ui/components/PieChart.module.scss
new file mode 100644
index 00000000..7d97d415
--- /dev/null
+++ b/src/once-ui/components/PieChart.module.scss
@@ -0,0 +1,32 @@
+.tooltip {
+    border-radius: var(--radius-m);
+    text-align: center;
+    justify-content: center;
+    box-shadow:
+      0 4px 6px -1px rgba(0, 0, 0, 0.2),
+      0 2px 4px -1px rgba(0, 0, 0, 0.1);
+  
+    .label {
+      text-align: center;
+      padding: 5px;
+      font-size: 15px;
+      font-weight: 600;
+      color: var(--neutral-on-background-strong);
+    }
+  
+    .value {
+      font-weight: 500;
+      text-align: center;
+      margin: 4px 0;
+      display: flex;
+      align-items: center;
+    }
+  }
+  
+  .tooltipWrapper {
+    outline: none;
+  }
+  
+  .blur {
+    backdrop-filter: blur(8px);
+  }
\ No newline at end of file
diff --git a/src/once-ui/components/PieChart.tsx b/src/once-ui/components/PieChart.tsx
new file mode 100644
index 00000000..10296247
--- /dev/null
+++ b/src/once-ui/components/PieChart.tsx
@@ -0,0 +1,214 @@
+import React from "react";
+import {
+  PieChart as RechartsPieChart,
+  Pie,
+  Cell,
+  Tooltip,
+  ResponsiveContainer,
+  Legend,
+} from "recharts";
+import styles from "./PieChart.module.scss";
+import { Flex, Heading } from ".";
+
+interface DataPoint {
+  name: string;
+  value: number;
+  color?: string; // Optional custom color for this slice
+}
+
+interface PieChartProps extends React.ComponentProps<typeof Flex> {
+  data: DataPoint[];
+  /**
+   * Color variants for pie slices (will cycle through these)
+   * @default ["info", "success", "danger", "purple"]
+   */
+  colorVariants?: ("info" | "success" | "danger" | "purple")[];
+  /**
+   * Apply blur effect
+   * @default false
+   */
+  blur?: boolean;
+  /**
+   * Title for the pie chart
+   */
+  title?: string;
+  /**
+   * Show legend below the chart
+   * @default false
+   */
+  showLegend?: boolean;
+  /**
+   * Inner radius for creating donut chart (percentage or pixel value)
+   * Set to 0 for filled pie chart, or a value like "60%" for donut chart
+   * @default "0"
+   */
+  innerRadius?: number | string;
+  /**
+   * Outer radius for the pie chart (percentage or pixel value)
+   * @default "90%"
+   */
+  outerRadius?: number | string;
+  /**
+   * Data key for values
+   * @default "value"
+   */
+  dataKey?: string;
+  /**
+   * Name key for labels
+   * @default "name"
+   */
+  nameKey?: string;
+  /**
+   * Angle between slices
+   * @default 0
+   */
+  paddingAngle?: number;
+  /**
+   * Use gradient fills for pie slices
+   * @default true
+   */
+  useGradients?: boolean;
+}
+
+const CustomTooltip = ({ active, payload }: any) => {
+  if (active && payload && payload.length) {
+    return (
+      <Flex className={styles.tooltip} minWidth={8} background="surface" border="neutral-alpha-medium" direction="column">
+        <Flex
+          borderBottom="neutral-alpha-medium"
+          fillWidth
+          horizontal="center"
+          padding="8"
+        >
+          <p className={styles.label}>{payload[0].name}</p>
+        </Flex>
+        <Flex padding="s" direction="column">
+          <p
+            className={styles.value}
+            style={{ color: payload[0].fill }}
+          >
+            {`Value: ${payload[0].value}`}
+          </p>
+        </Flex>
+      </Flex>
+    );
+  }
+  return null;
+};
+
+export const PieChart: React.FC<PieChartProps> = ({
+  data,
+  colorVariants = ["info", "success", "danger", "purple"],
+  blur = false,
+  border,
+  title,
+  radius,
+  background,
+  showLegend = false,
+  innerRadius = "0",
+  outerRadius = "90%",
+  dataKey = "value",
+  nameKey = "name",
+  paddingAngle = 0,
+  useGradients = true,
+  ...flexProps
+}) => {
+  const colorMap = {
+    info: "var(--info-solid-strong)",
+    success: "var(--success-solid-strong)",
+    danger: "var(--danger-solid-strong)",
+    purple: "#6c5ce7"
+  };
+
+  // Generate unique IDs for each gradient
+  const gradientIds = data.map((_, index) => 
+    `pieGradient-${Math.random().toString(36).substring(2, 9)}-${index}`
+  );
+
+  return (
+    <Flex
+      fill
+      radius={radius}
+      border={border}
+      align="center"
+      direction="column"
+      vertical="center"
+      background={background}
+      className={blur ? styles.blur : undefined}
+      {...flexProps}
+    >
+      {title && (
+        <Flex
+          borderBottom={border}
+          fillWidth
+          align="center"
+          vertical="center"
+          horizontal="center"
+        >
+          <Heading padding="s">{title}</Heading>
+        </Flex>
+      )}
+      <Flex padding={title ? "s" : "2"} fill>
+        <ResponsiveContainer width="100%" height="100%">
+          <RechartsPieChart>
+            <defs>
+              {data.map((entry, index) => {
+                const baseColor = entry.color || colorMap[colorVariants[index % colorVariants.length]];
+                return (
+                  <radialGradient 
+                    key={`gradient-${index}`} 
+                    id={gradientIds[index]} 
+                    cx="50%" 
+                    cy="50%" 
+                    r="100%" 
+                    fx="50%" 
+                    fy="50%"
+                  >
+                     <stop offset="25%" stopColor={baseColor} stopOpacity={0.5} />
+                <stop offset="40%" stopColor={baseColor} stopOpacity={0.4} />
+                <stop offset="95%" stopColor={baseColor} stopOpacity={0.05} />
+                  </radialGradient>
+                );
+              })}
+            </defs>
+            <Pie
+              data={data}
+              cx="50%"
+              cy="50%"
+              labelLine={false}
+              innerRadius={innerRadius}
+              outerRadius={outerRadius}
+              paddingAngle={paddingAngle}
+              dataKey={dataKey}
+              nameKey={nameKey}
+              stroke="none"
+            >
+              {data.map((entry, index) => {
+                const baseColor = entry.color || colorMap[colorVariants[index % colorVariants.length]];
+                return (
+                  <Cell 
+                    key={`cell-${index}`} 
+                    fill={useGradients ? `url(#${gradientIds[index]})` : baseColor} 
+                    strokeWidth={1}
+                    stroke={baseColor}
+                  />
+                );
+              })}
+            </Pie>
+            <Tooltip 
+              content={<CustomTooltip />}
+              wrapperClassName={styles.tooltipWrapper}
+            />
+            {showLegend && (
+              <Legend
+                verticalAlign="bottom"
+                layout="horizontal"
+                wrapperStyle={{ paddingTop: 16 }}
+              />
+            )}
+          </RechartsPieChart>
+        </ResponsiveContainer>
+      </Flex>
+    </Flex>
+  );
+};
\ No newline at end of file
diff --git a/src/once-ui/components/ScrollToTop.tsx b/src/once-ui/components/ScrollToTop.tsx
index ff9767dc..5b847d84 100644
--- a/src/once-ui/components/ScrollToTop.tsx
+++ b/src/once-ui/components/ScrollToTop.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useState, useEffect } from "react";
 import { Flex } from "@/once-ui/components";
 import styles from "./ScrollToTop.module.scss";

From e2c5d558bf8c43c030939852c5755db3e3eb5345 Mon Sep 17 00:00:00 2001
From: Lorant <lorant@once-ui.com>
Date: Tue, 1 Apr 2025 19:51:35 +0200
Subject: [PATCH 13/35] migrate to 0.6 and remove data-viz imports from barrel

---
 src/once-ui/components/BarGraph.tsx.new | 245 ++++++++++++++++++++++++
 src/once-ui/components/index.ts         |   1 -
 2 files changed, 245 insertions(+), 1 deletion(-)
 create mode 100644 src/once-ui/components/BarGraph.tsx.new

diff --git a/src/once-ui/components/BarGraph.tsx.new b/src/once-ui/components/BarGraph.tsx.new
new file mode 100644
index 00000000..52f53853
--- /dev/null
+++ b/src/once-ui/components/BarGraph.tsx.new
@@ -0,0 +1,245 @@
+import React from "react";
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  ResponsiveContainer,
+  CartesianGrid,
+  Tooltip
+} from "recharts";
+
+import { SpacingToken, ColorScheme, ColorWeight } from "../types";
+
+import styles from "./BarGraph.module.scss";
+import { Text, Flex, Heading, Line } from "."; // Import Text component from OnceUI
+import classNames from "classnames"; // Import classNames for conditional styling
+
+interface DataPoint {
+  name: string;
+  value: number;
+  startDate: string;
+  endDate: string;
+  color?: string; // Optional color prop, if needed
+}
+
+type BarColor = "success" | "danger" | "purple";
+
+interface BarGraphProps extends React.ComponentProps<typeof Flex> {
+  data: DataPoint[];
+  xAxisKey?: string; // Allows customization of the x-axis data key
+  yAxisKey?: string; // Allows customization of the y-axis data key
+  barColor?: BarColor; // Prop for bar color
+  /**
+   * Size of the bar graph.
+   * @default "m"
+   */
+  barWidth?: SpacingToken | "fill" | number | string;
+  blur?: boolean; // Controls backdrop blur effect
+  title?: string; // Title for the bar graph
+  tooltipTitle?: string; // Title for the tooltip
+  /** Hide X-axis labels */
+  hideXAxisLabels?: boolean;
+  /** Hide Y-axis labels */
+  hideYAxisLabels?: boolean;
+  /** Hide both X and Y axis labels */
+  hideLabels?: boolean;
+  /** Title for X-axis */
+  xAxisTitle?: string;
+  /** Title for Y-axis */
+  yAxisTitle?: string;
+  /** Hide X-axis title */
+  hideXAxisTitle?: boolean;
+  /** Hide Y-axis title */
+  hideYAxisTitle?: boolean;
+  /** Hide both X and Y axis titles */
+  hideAxisTitles?: boolean;
+}
+
+const CustomTooltip = ({ active, payload, tooltipTitle, xAxisTitle }: any) => {
+  if (active && payload && payload.length) {
+    const data = payload[0].payload;
+    return (
+      <Flex className={styles.tooltip} minWidth={8} background="surface" radius="l" border="neutral-alpha-medium" direction="column">
+        <Flex
+          borderBottom="neutral-alpha-medium"
+          fillWidth
+          horizontal="center"
+          padding="8"
+        >
+          <Text
+            style={{ fontWeight: "500" }}
+            onBackground="neutral-strong"
+          >{`${xAxisTitle}: ${data.endDate}`}</Text>
+        </Flex>
+        <Flex padding="s">
+          <Text onBackground="neutral-strong">
+            {`${tooltipTitle}: ${data.value.toLocaleString()}`}
+          </Text>
+        </Flex>
+      </Flex>
+    );
+  }
+  return null;
+};
+
+const BarGraph: React.FC<BarGraphProps> = ({
+  data,
+  xAxisKey = "name",
+  yAxisKey = "value",
+  barColor = "success",
+  barWidth = "fill",
+  blur = false,
+  border,
+  title,
+  radius,
+  tooltipTitle,
+  background,
+  hideXAxisLabels = false,
+  hideYAxisLabels = false,
+  hideLabels = false,
+  xAxisTitle,
+  yAxisTitle,
+  hideXAxisTitle = false,
+  hideYAxisTitle = false,
+  hideAxisTitles = false,
+  ...flexProps
+}) => {
+
+
+  const barColorMap = {
+    success: "var(--success-solid-strong)",
+    danger: "var(--danger-solid-strong)",
+    purple: "#8a63d2",
+  };
+
+  const barSolidColor = barColorMap[barColor];
+
+  return (
+    <Flex
+      fill
+      fillHeight
+      radius={radius}
+      border={border}
+      align="center"
+      direction="column"
+      vertical="center"
+      background={background}
+      className={blur ? styles.blur : undefined}
+      {...flexProps}
+    >
+      <Flex
+        borderBottom={border}
+        fillWidth
+        align="center"
+        vertical="center"
+        horizontal="center"
+      >
+        <Heading padding="s">{title}</Heading>
+      </Flex>
+      <Flex padding={title ? "s" : "2"} fill>
+        <ResponsiveContainer width="100%" height="100%">
+          <BarChart
+            data={data}
+            margin={{  left: 10, bottom: 15 }}
+            barGap={4}
+          >
+            <CartesianGrid
+              strokeDasharray="2 2"
+              horizontal={true}
+              vertical={false}
+              stroke="var(--neutral-border-medium)" // Use neutral border color
+            />
+            <XAxis
+              dataKey={xAxisKey}
+              axisLine={false}
+              tickLine={false}
+              tick={hideXAxisLabels || hideLabels ? false : {
+                fill: "var(--neutral-on-background-weak)",
+                fontSize: 12,
+              }}
+              
+              label={
+                xAxisTitle && !hideXAxisTitle && !hideAxisTitles
+                  ? { value: xAxisTitle, fontWeight: "500", position: 'bottom', offset: 0, fill: "var(--neutral-on-background-medium)" }
+                  : undefined
+              }
+            />
+            <YAxis
+              axisLine={false}
+              tickLine={false}
+              tick={{
+                fill: "var(--neutral-on-background-weak)",
+                fontSize: 12,
+               }}
+               width={yAxisTitle ? 40 : 0}
+              label={
+                yAxisTitle && !hideYAxisTitle && !hideAxisTitles
+                  ? { 
+                      value: yAxisTitle, 
+                      angle: -90, // Rotate the label 90 degrees counter-clockwise
+                      position: 'left', 
+                      fontWeight: "500",
+                      dx: 5, // Move label to the left
+                      dy: -20, // Adjust vertical position
+                      fill: "var(--neutral-on-background-medium)" 
+                    }
+                  : undefined
+              }
+            />
+            <Tooltip
+              content={<CustomTooltip tooltipTitle={tooltipTitle} xAxisTitle={xAxisTitle} />}
+              cursor={{ fill: "rgba(255,255,255,0.05)" }}
+              wrapperClassName={styles.tooltipWrapper} // Apply styles to the tooltip wrapper
+            />
+            <defs>
+              <linearGradient id="barGradient" x1="0" y1="0" x2="0" y2="1">
+                {[
+                  { offset: "0%", opacity: 0.8 },
+                  { offset: "35%", opacity: 0.6 },
+                  { offset: "70%", opacity: 0.3 },
+                  { offset: "95%", opacity: 0.1 },
+                  { offset: "100%", opacity: 0 },
+                ].map(({ offset, opacity }) => (
+                  <stop
+                    key={offset}
+                    offset={offset}
+                    stopColor={barSolidColor}
+                    stopOpacity={opacity}
+                  />
+                ))}
+              </linearGradient>
+            </defs>
+            <Bar
+              dataKey={yAxisKey}
+              fill="url(#barGradient)"
+              stroke={barSolidColor}
+              strokeWidth={1}
+              barSize={
+              barWidth === "fill"
+                ? "100%"
+                : barWidth === "xs"
+                ? 6
+                : barWidth === "s"
+                ? 12
+                : barWidth === "m"
+                ? 20
+                : barWidth === "l"
+                ? 40
+                : barWidth === "xl"
+                ? 50
+                : barWidth
+              }
+              radius={[6, 6, 0, 0]}
+            />
+          </BarChart>
+        </ResponsiveContainer>
+      </Flex>
+    </Flex>
+  );
+};
+
+BarGraph.displayName = "BarGraph";
+
+export { BarGraph };
+export type { BarGraphProps };
diff --git a/src/once-ui/components/index.ts b/src/once-ui/components/index.ts
index 7eccdb1c..a87f8e1a 100644
--- a/src/once-ui/components/index.ts
+++ b/src/once-ui/components/index.ts
@@ -41,7 +41,6 @@ export * from "./Line";
 export * from "./Logo";
 export * from "./LogoCloud";
 export * from "./MegaMenu";
-export * from "./MultiBarGraph"
 export * from "./NavIcon";
 export * from "./NumberInput";
 export * from "./Option";

From 7af322173b387b29c817e0626cd8020f78a72f35 Mon Sep 17 00:00:00 2001
From: Lorant <lorant@once-ui.com>
Date: Tue, 1 Apr 2025 20:19:56 +0200
Subject: [PATCH 14/35] move data-viz components to new data module

---
 src/app/page.tsx                              |  16 +-
 src/once-ui/components/BarGraph.tsx.new       | 245 ------------------
 .../data}/BarGraph.module.scss                |   0
 .../{components => modules/data}/BarGraph.tsx |   8 +-
 .../data}/LineBarGraph.module.scss            |   0
 .../data}/LineBarGraph.tsx                    |   4 +-
 .../data}/LineGraph.module.scss               |   0
 .../data}/LineGraph.tsx                       |   2 +-
 .../data}/MultiBarGraph.module.scss           |   0
 .../data}/MultiBarGraph.tsx                   |   4 +-
 .../data}/PieChart.module.scss                |   0
 .../{components => modules/data}/PieChart.tsx |   2 +-
 12 files changed, 17 insertions(+), 264 deletions(-)
 delete mode 100644 src/once-ui/components/BarGraph.tsx.new
 rename src/once-ui/{components => modules/data}/BarGraph.module.scss (100%)
 rename src/once-ui/{components => modules/data}/BarGraph.tsx (96%)
 rename src/once-ui/{components => modules/data}/LineBarGraph.module.scss (100%)
 rename src/once-ui/{components => modules/data}/LineBarGraph.tsx (98%)
 rename src/once-ui/{components => modules/data}/LineGraph.module.scss (100%)
 rename src/once-ui/{components => modules/data}/LineGraph.tsx (99%)
 rename src/once-ui/{components => modules/data}/MultiBarGraph.module.scss (100%)
 rename src/once-ui/{components => modules/data}/MultiBarGraph.tsx (98%)
 rename src/once-ui/{components => modules/data}/PieChart.module.scss (100%)
 rename src/once-ui/{components => modules/data}/PieChart.tsx (99%)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index c666d152..10020590 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -43,11 +43,11 @@ import {
 } from "@/once-ui/components";
 import { CodeBlock, MediaUpload } from "@/once-ui/modules";
 
-import { BarGraph } from "@/once-ui/components/BarGraph";
-import { LineGraph } from "@/once-ui/components/LineGraph";
-import { MultiBarGraph } from "@/once-ui/components/MultiBarGraph";
-import { LineBarGraph } from "@/once-ui/components/LineBarGraph";
-import { PieChart } from "@/once-ui/components/PieChart";
+import { BarGraph } from "@/once-ui/modules/data/BarGraph";
+import { LineGraph } from "@/once-ui/modules/data/LineGraph";
+import { MultiBarGraph } from "@/once-ui/modules/data/MultiBarGraph";
+import { LineBarGraph } from "@/once-ui/modules/data/LineBarGraph";
+import { PieChart } from "@/once-ui/modules/data/PieChart";
 
 export default function Home() {
   const [selectedValue, setSelectedValue] = useState("");
@@ -989,8 +989,7 @@ export default function Home() {
                     User Activity
                   </Heading>
                   <LineGraph
-                  hideAxisTitles
-                    height={20}
+                    hideAxisTitles
                     xAxisTitle="Week"
                     yAxisTitle="Users"
                     value1="Desktop"
@@ -1040,8 +1039,7 @@ export default function Home() {
                     Conversions vs Traffic
                   </Heading>
                   <LineBarGraph
-                  hideAxisTitles
-                    height={20}
+                    hideAxisTitles
                     lineColorVariant="info"
                     showArea={true}
                     xAxisTitle="Day"
diff --git a/src/once-ui/components/BarGraph.tsx.new b/src/once-ui/components/BarGraph.tsx.new
deleted file mode 100644
index 52f53853..00000000
--- a/src/once-ui/components/BarGraph.tsx.new
+++ /dev/null
@@ -1,245 +0,0 @@
-import React from "react";
-import {
-  BarChart,
-  Bar,
-  XAxis,
-  YAxis,
-  ResponsiveContainer,
-  CartesianGrid,
-  Tooltip
-} from "recharts";
-
-import { SpacingToken, ColorScheme, ColorWeight } from "../types";
-
-import styles from "./BarGraph.module.scss";
-import { Text, Flex, Heading, Line } from "."; // Import Text component from OnceUI
-import classNames from "classnames"; // Import classNames for conditional styling
-
-interface DataPoint {
-  name: string;
-  value: number;
-  startDate: string;
-  endDate: string;
-  color?: string; // Optional color prop, if needed
-}
-
-type BarColor = "success" | "danger" | "purple";
-
-interface BarGraphProps extends React.ComponentProps<typeof Flex> {
-  data: DataPoint[];
-  xAxisKey?: string; // Allows customization of the x-axis data key
-  yAxisKey?: string; // Allows customization of the y-axis data key
-  barColor?: BarColor; // Prop for bar color
-  /**
-   * Size of the bar graph.
-   * @default "m"
-   */
-  barWidth?: SpacingToken | "fill" | number | string;
-  blur?: boolean; // Controls backdrop blur effect
-  title?: string; // Title for the bar graph
-  tooltipTitle?: string; // Title for the tooltip
-  /** Hide X-axis labels */
-  hideXAxisLabels?: boolean;
-  /** Hide Y-axis labels */
-  hideYAxisLabels?: boolean;
-  /** Hide both X and Y axis labels */
-  hideLabels?: boolean;
-  /** Title for X-axis */
-  xAxisTitle?: string;
-  /** Title for Y-axis */
-  yAxisTitle?: string;
-  /** Hide X-axis title */
-  hideXAxisTitle?: boolean;
-  /** Hide Y-axis title */
-  hideYAxisTitle?: boolean;
-  /** Hide both X and Y axis titles */
-  hideAxisTitles?: boolean;
-}
-
-const CustomTooltip = ({ active, payload, tooltipTitle, xAxisTitle }: any) => {
-  if (active && payload && payload.length) {
-    const data = payload[0].payload;
-    return (
-      <Flex className={styles.tooltip} minWidth={8} background="surface" radius="l" border="neutral-alpha-medium" direction="column">
-        <Flex
-          borderBottom="neutral-alpha-medium"
-          fillWidth
-          horizontal="center"
-          padding="8"
-        >
-          <Text
-            style={{ fontWeight: "500" }}
-            onBackground="neutral-strong"
-          >{`${xAxisTitle}: ${data.endDate}`}</Text>
-        </Flex>
-        <Flex padding="s">
-          <Text onBackground="neutral-strong">
-            {`${tooltipTitle}: ${data.value.toLocaleString()}`}
-          </Text>
-        </Flex>
-      </Flex>
-    );
-  }
-  return null;
-};
-
-const BarGraph: React.FC<BarGraphProps> = ({
-  data,
-  xAxisKey = "name",
-  yAxisKey = "value",
-  barColor = "success",
-  barWidth = "fill",
-  blur = false,
-  border,
-  title,
-  radius,
-  tooltipTitle,
-  background,
-  hideXAxisLabels = false,
-  hideYAxisLabels = false,
-  hideLabels = false,
-  xAxisTitle,
-  yAxisTitle,
-  hideXAxisTitle = false,
-  hideYAxisTitle = false,
-  hideAxisTitles = false,
-  ...flexProps
-}) => {
-
-
-  const barColorMap = {
-    success: "var(--success-solid-strong)",
-    danger: "var(--danger-solid-strong)",
-    purple: "#8a63d2",
-  };
-
-  const barSolidColor = barColorMap[barColor];
-
-  return (
-    <Flex
-      fill
-      fillHeight
-      radius={radius}
-      border={border}
-      align="center"
-      direction="column"
-      vertical="center"
-      background={background}
-      className={blur ? styles.blur : undefined}
-      {...flexProps}
-    >
-      <Flex
-        borderBottom={border}
-        fillWidth
-        align="center"
-        vertical="center"
-        horizontal="center"
-      >
-        <Heading padding="s">{title}</Heading>
-      </Flex>
-      <Flex padding={title ? "s" : "2"} fill>
-        <ResponsiveContainer width="100%" height="100%">
-          <BarChart
-            data={data}
-            margin={{  left: 10, bottom: 15 }}
-            barGap={4}
-          >
-            <CartesianGrid
-              strokeDasharray="2 2"
-              horizontal={true}
-              vertical={false}
-              stroke="var(--neutral-border-medium)" // Use neutral border color
-            />
-            <XAxis
-              dataKey={xAxisKey}
-              axisLine={false}
-              tickLine={false}
-              tick={hideXAxisLabels || hideLabels ? false : {
-                fill: "var(--neutral-on-background-weak)",
-                fontSize: 12,
-              }}
-              
-              label={
-                xAxisTitle && !hideXAxisTitle && !hideAxisTitles
-                  ? { value: xAxisTitle, fontWeight: "500", position: 'bottom', offset: 0, fill: "var(--neutral-on-background-medium)" }
-                  : undefined
-              }
-            />
-            <YAxis
-              axisLine={false}
-              tickLine={false}
-              tick={{
-                fill: "var(--neutral-on-background-weak)",
-                fontSize: 12,
-               }}
-               width={yAxisTitle ? 40 : 0}
-              label={
-                yAxisTitle && !hideYAxisTitle && !hideAxisTitles
-                  ? { 
-                      value: yAxisTitle, 
-                      angle: -90, // Rotate the label 90 degrees counter-clockwise
-                      position: 'left', 
-                      fontWeight: "500",
-                      dx: 5, // Move label to the left
-                      dy: -20, // Adjust vertical position
-                      fill: "var(--neutral-on-background-medium)" 
-                    }
-                  : undefined
-              }
-            />
-            <Tooltip
-              content={<CustomTooltip tooltipTitle={tooltipTitle} xAxisTitle={xAxisTitle} />}
-              cursor={{ fill: "rgba(255,255,255,0.05)" }}
-              wrapperClassName={styles.tooltipWrapper} // Apply styles to the tooltip wrapper
-            />
-            <defs>
-              <linearGradient id="barGradient" x1="0" y1="0" x2="0" y2="1">
-                {[
-                  { offset: "0%", opacity: 0.8 },
-                  { offset: "35%", opacity: 0.6 },
-                  { offset: "70%", opacity: 0.3 },
-                  { offset: "95%", opacity: 0.1 },
-                  { offset: "100%", opacity: 0 },
-                ].map(({ offset, opacity }) => (
-                  <stop
-                    key={offset}
-                    offset={offset}
-                    stopColor={barSolidColor}
-                    stopOpacity={opacity}
-                  />
-                ))}
-              </linearGradient>
-            </defs>
-            <Bar
-              dataKey={yAxisKey}
-              fill="url(#barGradient)"
-              stroke={barSolidColor}
-              strokeWidth={1}
-              barSize={
-              barWidth === "fill"
-                ? "100%"
-                : barWidth === "xs"
-                ? 6
-                : barWidth === "s"
-                ? 12
-                : barWidth === "m"
-                ? 20
-                : barWidth === "l"
-                ? 40
-                : barWidth === "xl"
-                ? 50
-                : barWidth
-              }
-              radius={[6, 6, 0, 0]}
-            />
-          </BarChart>
-        </ResponsiveContainer>
-      </Flex>
-    </Flex>
-  );
-};
-
-BarGraph.displayName = "BarGraph";
-
-export { BarGraph };
-export type { BarGraphProps };
diff --git a/src/once-ui/components/BarGraph.module.scss b/src/once-ui/modules/data/BarGraph.module.scss
similarity index 100%
rename from src/once-ui/components/BarGraph.module.scss
rename to src/once-ui/modules/data/BarGraph.module.scss
diff --git a/src/once-ui/components/BarGraph.tsx b/src/once-ui/modules/data/BarGraph.tsx
similarity index 96%
rename from src/once-ui/components/BarGraph.tsx
rename to src/once-ui/modules/data/BarGraph.tsx
index a0b8b657..9e950019 100644
--- a/src/once-ui/components/BarGraph.tsx
+++ b/src/once-ui/modules/data/BarGraph.tsx
@@ -9,18 +9,18 @@ import {
   Tooltip,
 } from "recharts";
 
-import { SpacingToken, ColorScheme, ColorWeight } from "../types";
+import { SpacingToken } from "../../types";
 
 import styles from "./BarGraph.module.scss";
-import { Text, Flex, Heading, Line } from "."; // Import Text component from OnceUI
-import classNames from "classnames"; // Import classNames for conditional styling
+import { Text, Flex, Heading } from "../../components";
+import classNames from "classnames";
 
 interface DataPoint {
   name: string;
   value: number;
   startDate: string;
   endDate: string;
-  color?: string; // Optional color prop, if needed
+  color?: string;
 }
 
 type BarColor = "success" | "danger" | "purple";
diff --git a/src/once-ui/components/LineBarGraph.module.scss b/src/once-ui/modules/data/LineBarGraph.module.scss
similarity index 100%
rename from src/once-ui/components/LineBarGraph.module.scss
rename to src/once-ui/modules/data/LineBarGraph.module.scss
diff --git a/src/once-ui/components/LineBarGraph.tsx b/src/once-ui/modules/data/LineBarGraph.tsx
similarity index 98%
rename from src/once-ui/components/LineBarGraph.tsx
rename to src/once-ui/modules/data/LineBarGraph.tsx
index 1d624661..b1c6b8b2 100644
--- a/src/once-ui/components/LineBarGraph.tsx
+++ b/src/once-ui/modules/data/LineBarGraph.tsx
@@ -12,8 +12,8 @@ import {
   Area,
 } from "recharts";
 import styles from "./LineBarGraph.module.scss";
-import { Flex, Heading } from ".";
-import { SpacingToken, ColorScheme, ColorWeight } from "../types";
+import { Flex, Heading } from "../../components";
+import { SpacingToken } from "../../types";
 
 
 interface DataPoint {
diff --git a/src/once-ui/components/LineGraph.module.scss b/src/once-ui/modules/data/LineGraph.module.scss
similarity index 100%
rename from src/once-ui/components/LineGraph.module.scss
rename to src/once-ui/modules/data/LineGraph.module.scss
diff --git a/src/once-ui/components/LineGraph.tsx b/src/once-ui/modules/data/LineGraph.tsx
similarity index 99%
rename from src/once-ui/components/LineGraph.tsx
rename to src/once-ui/modules/data/LineGraph.tsx
index cb258d52..84976dc2 100644
--- a/src/once-ui/components/LineGraph.tsx
+++ b/src/once-ui/modules/data/LineGraph.tsx
@@ -10,7 +10,7 @@ import {
   TooltipProps,
 } from "recharts";
 import styles from "./LineGraph.module.scss";
-import { Flex, Heading } from ".";
+import { Flex, Heading } from "../../components";
 
 interface DataPoint {
   name: string;
diff --git a/src/once-ui/components/MultiBarGraph.module.scss b/src/once-ui/modules/data/MultiBarGraph.module.scss
similarity index 100%
rename from src/once-ui/components/MultiBarGraph.module.scss
rename to src/once-ui/modules/data/MultiBarGraph.module.scss
diff --git a/src/once-ui/components/MultiBarGraph.tsx b/src/once-ui/modules/data/MultiBarGraph.tsx
similarity index 98%
rename from src/once-ui/components/MultiBarGraph.tsx
rename to src/once-ui/modules/data/MultiBarGraph.tsx
index ba37893e..ddc9ab17 100644
--- a/src/once-ui/components/MultiBarGraph.tsx
+++ b/src/once-ui/modules/data/MultiBarGraph.tsx
@@ -10,11 +10,11 @@ import {
   Legend,
 } from "recharts";
 
-import { SpacingToken, ColorScheme, ColorWeight } from "../types";
+import { SpacingToken } from "../../types";
 
 
 import styles from "./MultiBarGraph.module.scss";
-import { Text, Flex, Heading } from ".";
+import { Text, Flex, Heading } from "../../components";
 
 // Data structure supporting multiple values
 interface MultiBarDataPoint {
diff --git a/src/once-ui/components/PieChart.module.scss b/src/once-ui/modules/data/PieChart.module.scss
similarity index 100%
rename from src/once-ui/components/PieChart.module.scss
rename to src/once-ui/modules/data/PieChart.module.scss
diff --git a/src/once-ui/components/PieChart.tsx b/src/once-ui/modules/data/PieChart.tsx
similarity index 99%
rename from src/once-ui/components/PieChart.tsx
rename to src/once-ui/modules/data/PieChart.tsx
index 10296247..b39c2565 100644
--- a/src/once-ui/components/PieChart.tsx
+++ b/src/once-ui/modules/data/PieChart.tsx
@@ -8,7 +8,7 @@ import {
   Legend,
 } from "recharts";
 import styles from "./PieChart.module.scss";
-import { Flex, Heading } from ".";
+import { Flex, Heading } from "../../components";
 
 interface DataPoint {
   name: string;

From 5ec161dc3217a41b179540e870dbe0ae48f0ed45 Mon Sep 17 00:00:00 2001
From: Adhitya Nadooli <127269031+lightyfr@users.noreply.github.com>
Date: Tue, 1 Apr 2025 19:43:46 +0000
Subject: [PATCH 15/35] clutched up and saved time sequence + curve type
 commits

---
 package-lock.json                          | 103 ++++++++++-----------
 package.json                               |   1 +
 src/once-ui/modules/data/BarGraph.tsx      |  22 +++--
 src/once-ui/modules/data/LineBarGraph.tsx  |  23 ++++-
 src/once-ui/modules/data/LineGraph.tsx     |  60 +++++++++---
 src/once-ui/modules/data/MultiBarGraph.tsx |  30 ++++--
 6 files changed, 153 insertions(+), 86 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 9eb5d298..80f04499 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,17 +1,18 @@
 {
   "name": "@once-ui-system/nextjs-starter",
-  "version": "0.5",
+  "version": "0.6",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@once-ui-system/nextjs-starter",
-      "version": "0.5",
+      "version": "0.6",
       "dependencies": {
         "@floating-ui/react-dom": "^2.1.1",
         "classnames": "^2.5.1",
         "compressorjs": "^1.2.1",
-        "next": "15.1.4",
+        "moment": "^2.30.1",
+        "next": "15.2.3",
         "postcss": "^8.4.39",
         "postcss-preset-env": "^9.5.15",
         "prismjs": "^1.29.0",
@@ -1649,19 +1650,17 @@
       }
     },
     "node_modules/@next/env": {
-      "version": "15.1.4",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-15.1.4.tgz",
-      "integrity": "sha512-2fZ5YZjedi5AGaeoaC0B20zGntEHRhi2SdWcu61i48BllODcAmmtj8n7YarSPt4DaTsJaBFdxQAVEVzgmx2Zpw==",
-      "license": "MIT"
+      "version": "15.2.3",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-15.2.3.tgz",
+      "integrity": "sha512-a26KnbW9DFEUsSxAxKBORR/uD9THoYoKbkpFywMN/AFvboTt94b8+g/07T8J6ACsdLag8/PDU60ov4rPxRAixw=="
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "15.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.1.4.tgz",
-      "integrity": "sha512-wBEMBs+np+R5ozN1F8Y8d/Dycns2COhRnkxRc+rvnbXke5uZBHkUGFgWxfTXn5rx7OLijuUhyfB+gC/ap58dDw==",
+      "version": "15.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.2.3.tgz",
+      "integrity": "sha512-uaBhA8aLbXLqwjnsHSkxs353WrRgQgiFjduDpc7YXEU0B54IKx3vU+cxQlYwPCyC8uYEEX7THhtQQsfHnvv8dw==",
       "cpu": [
         "arm64"
       ],
-      "license": "MIT",
       "optional": true,
       "os": [
         "darwin"
@@ -1671,13 +1670,12 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "15.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.1.4.tgz",
-      "integrity": "sha512-7sgf5rM7Z81V9w48F02Zz6DgEJulavC0jadab4ZsJ+K2sxMNK0/BtF8J8J3CxnsJN3DGcIdC260wEKssKTukUw==",
+      "version": "15.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.2.3.tgz",
+      "integrity": "sha512-pVwKvJ4Zk7h+4hwhqOUuMx7Ib02u3gDX3HXPKIShBi9JlYllI0nU6TWLbPT94dt7FSi6mSBhfc2JrHViwqbOdw==",
       "cpu": [
         "x64"
       ],
-      "license": "MIT",
       "optional": true,
       "os": [
         "darwin"
@@ -1687,13 +1685,12 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "15.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.1.4.tgz",
-      "integrity": "sha512-JaZlIMNaJenfd55kjaLWMfok+vWBlcRxqnRoZrhFQrhM1uAehP3R0+Aoe+bZOogqlZvAz53nY/k3ZyuKDtT2zQ==",
+      "version": "15.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.2.3.tgz",
+      "integrity": "sha512-50ibWdn2RuFFkOEUmo9NCcQbbV9ViQOrUfG48zHBCONciHjaUKtHcYFiCwBVuzD08fzvzkWuuZkd4AqbvKO7UQ==",
       "cpu": [
         "arm64"
       ],
-      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -1703,13 +1700,12 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "15.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.1.4.tgz",
-      "integrity": "sha512-7EBBjNoyTO2ipMDgCiORpwwOf5tIueFntKjcN3NK+GAQD7OzFJe84p7a2eQUeWdpzZvhVXuAtIen8QcH71ZCOQ==",
+      "version": "15.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.2.3.tgz",
+      "integrity": "sha512-2gAPA7P652D3HzR4cLyAuVYwYqjG0mt/3pHSWTCyKZq/N/dJcUAEoNQMyUmwTZWCJRKofB+JPuDVP2aD8w2J6Q==",
       "cpu": [
         "arm64"
       ],
-      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -1719,13 +1715,12 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "15.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.1.4.tgz",
-      "integrity": "sha512-9TGEgOycqZFuADyFqwmK/9g6S0FYZ3tphR4ebcmCwhL8Y12FW8pIBKJvSwV+UBjMkokstGNH+9F8F031JZKpHw==",
+      "version": "15.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.2.3.tgz",
+      "integrity": "sha512-ODSKvrdMgAJOVU4qElflYy1KSZRM3M45JVbeZu42TINCMG3anp7YCBn80RkISV6bhzKwcUqLBAmOiWkaGtBA9w==",
       "cpu": [
         "x64"
       ],
-      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -1735,13 +1730,12 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "15.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.1.4.tgz",
-      "integrity": "sha512-0578bLRVDJOh+LdIoKvgNDz77+Bd85c5JrFgnlbI1SM3WmEQvsjxTA8ATu9Z9FCiIS/AliVAW2DV/BDwpXbtiQ==",
+      "version": "15.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.2.3.tgz",
+      "integrity": "sha512-ZR9kLwCWrlYxwEoytqPi1jhPd1TlsSJWAc+H/CJHmHkf2nD92MQpSRIURR1iNgA/kuFSdxB8xIPt4p/T78kwsg==",
       "cpu": [
         "x64"
       ],
-      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -1751,13 +1745,12 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "15.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.1.4.tgz",
-      "integrity": "sha512-JgFCiV4libQavwII+kncMCl30st0JVxpPOtzWcAI2jtum4HjYaclobKhj+JsRu5tFqMtA5CJIa0MvYyuu9xjjQ==",
+      "version": "15.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.2.3.tgz",
+      "integrity": "sha512-+G2FrDcfm2YDbhDiObDU/qPriWeiz/9cRR0yMWJeTLGGX6/x8oryO3tt7HhodA1vZ8r2ddJPCjtLcpaVl7TE2Q==",
       "cpu": [
         "arm64"
       ],
-      "license": "MIT",
       "optional": true,
       "os": [
         "win32"
@@ -1767,13 +1760,12 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "15.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.1.4.tgz",
-      "integrity": "sha512-xxsJy9wzq7FR5SqPCUqdgSXiNXrMuidgckBa8nH9HtjjxsilgcN6VgXF6tZ3uEWuVEadotQJI8/9EQ6guTC4Yw==",
+      "version": "15.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.2.3.tgz",
+      "integrity": "sha512-gHYS9tc+G2W0ZC8rBL+H6RdtXIyk40uLiaos0yj5US85FNhbFEndMA2nW3z47nzOWiSvXTZ5kBClc3rD0zJg0w==",
       "cpu": [
         "x64"
       ],
-      "license": "MIT",
       "optional": true,
       "os": [
         "win32"
@@ -2781,6 +2773,14 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/moment": {
+      "version": "2.30.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
+      "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.8",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
@@ -2800,12 +2800,11 @@
       }
     },
     "node_modules/next": {
-      "version": "15.1.4",
-      "resolved": "https://registry.npmjs.org/next/-/next-15.1.4.tgz",
-      "integrity": "sha512-mTaq9dwaSuwwOrcu3ebjDYObekkxRnXpuVL21zotM8qE2W0HBOdVIdg2Li9QjMEZrj73LN96LcWcz62V19FjAg==",
-      "license": "MIT",
+      "version": "15.2.3",
+      "resolved": "https://registry.npmjs.org/next/-/next-15.2.3.tgz",
+      "integrity": "sha512-x6eDkZxk2rPpu46E1ZVUWIBhYCLszmUY6fvHBFcbzJ9dD+qRX6vcHusaqqDlnY+VngKzKbAiG2iRCkPbmi8f7w==",
       "dependencies": {
-        "@next/env": "15.1.4",
+        "@next/env": "15.2.3",
         "@swc/counter": "0.1.3",
         "@swc/helpers": "0.5.15",
         "busboy": "1.6.0",
@@ -2820,14 +2819,14 @@
         "node": "^18.18.0 || ^19.8.0 || >= 20.0.0"
       },
       "optionalDependencies": {
-        "@next/swc-darwin-arm64": "15.1.4",
-        "@next/swc-darwin-x64": "15.1.4",
-        "@next/swc-linux-arm64-gnu": "15.1.4",
-        "@next/swc-linux-arm64-musl": "15.1.4",
-        "@next/swc-linux-x64-gnu": "15.1.4",
-        "@next/swc-linux-x64-musl": "15.1.4",
-        "@next/swc-win32-arm64-msvc": "15.1.4",
-        "@next/swc-win32-x64-msvc": "15.1.4",
+        "@next/swc-darwin-arm64": "15.2.3",
+        "@next/swc-darwin-x64": "15.2.3",
+        "@next/swc-linux-arm64-gnu": "15.2.3",
+        "@next/swc-linux-arm64-musl": "15.2.3",
+        "@next/swc-linux-x64-gnu": "15.2.3",
+        "@next/swc-linux-x64-musl": "15.2.3",
+        "@next/swc-win32-arm64-msvc": "15.2.3",
+        "@next/swc-win32-x64-msvc": "15.2.3",
         "sharp": "^0.33.5"
       },
       "peerDependencies": {
diff --git a/package.json b/package.json
index e9ede82c..a238301d 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "@floating-ui/react-dom": "^2.1.1",
     "classnames": "^2.5.1",
     "compressorjs": "^1.2.1",
+    "moment": "^2.30.1",
     "next": "15.2.3",
     "postcss": "^8.4.39",
     "postcss-preset-env": "^9.5.15",
diff --git a/src/once-ui/modules/data/BarGraph.tsx b/src/once-ui/modules/data/BarGraph.tsx
index 9e950019..9baa9a6a 100644
--- a/src/once-ui/modules/data/BarGraph.tsx
+++ b/src/once-ui/modules/data/BarGraph.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import moment from "moment";
 import {
   BarChart,
   Bar,
@@ -9,18 +10,17 @@ import {
   Tooltip,
 } from "recharts";
 
-import { SpacingToken } from "../../types";
+import { SpacingToken, ColorScheme, ColorWeight } from "../../types";
 
 import styles from "./BarGraph.module.scss";
-import { Text, Flex, Heading } from "../../components";
-import classNames from "classnames";
+import { Text, Flex, Heading, Line } from "../../components"; // Import Text component from OnceUI
 
 interface DataPoint {
   name: string;
   value: number;
   startDate: string;
   endDate: string;
-  color?: string;
+  color?: string; // Optional color prop, if needed
 }
 
 type BarColor = "success" | "danger" | "purple";
@@ -54,9 +54,12 @@ interface BarGraphProps extends React.ComponentProps<typeof Flex> {
   hideYAxisTitle?: boolean;
   /** Hide both X and Y axis titles */
   hideAxisTitles?: boolean;
+
+  timeFormat?: string; // Format for date display
+  isTimeSeries?: boolean; // Flag for time series data
 }
 
-const CustomTooltip = ({ active, payload, tooltipTitle, xAxisTitle }: any) => {
+const CustomTooltip = ({ active, payload, tooltipTitle, timeFormat, isTimeSeries }: any) => {
   if (active && payload && payload.length) {
     const data = payload[0].payload;
     return (
@@ -70,7 +73,7 @@ const CustomTooltip = ({ active, payload, tooltipTitle, xAxisTitle }: any) => {
           <Text
             style={{ fontWeight: "500" }}
             onBackground="neutral-strong"
-          >{`${xAxisTitle}: ${data.endDate}`}</Text>
+          >{isTimeSeries ? moment(data.name).format(timeFormat) : data.name}</Text>
         </Flex>
         <Flex padding="s">
           <Text onBackground="neutral-strong">
@@ -103,6 +106,8 @@ const BarGraph: React.FC<BarGraphProps> = ({
   hideXAxisTitle = false,
   hideYAxisTitle = false,
   hideAxisTitles = false,
+  timeFormat = "YYYY-MM-DD",
+  isTimeSeries = false,
   ...flexProps
 }) => {
 
@@ -154,6 +159,9 @@ const BarGraph: React.FC<BarGraphProps> = ({
               dataKey={xAxisKey}
               axisLine={false}
               tickLine={false}
+
+              tickFormatter = {format => isTimeSeries ? moment(format).format(timeFormat) : format}
+              domain = {['auto', 'auto']}
               tick={hideXAxisLabels || hideLabels ? false : {
                 fill: "var(--neutral-on-background-weak)",
                 fontSize: 12,
@@ -188,7 +196,7 @@ const BarGraph: React.FC<BarGraphProps> = ({
               }
             />
             <Tooltip
-              content={<CustomTooltip tooltipTitle={tooltipTitle} xAxisTitle={xAxisTitle} />}
+              content={<CustomTooltip tooltipTitle={tooltipTitle} xAxisTitle={xAxisTitle} timeFormat={timeFormat}  isTimeSeries={isTimeSeries}/>}
               cursor={{ fill: "rgba(255,255,255,0.05)" }}
               wrapperClassName={styles.tooltipWrapper} // Apply styles to the tooltip wrapper
             />
diff --git a/src/once-ui/modules/data/LineBarGraph.tsx b/src/once-ui/modules/data/LineBarGraph.tsx
index b1c6b8b2..e91297cd 100644
--- a/src/once-ui/modules/data/LineBarGraph.tsx
+++ b/src/once-ui/modules/data/LineBarGraph.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import moment from "moment";
 import {
   ComposedChart,
   Line,
@@ -13,7 +14,7 @@ import {
 } from "recharts";
 import styles from "./LineBarGraph.module.scss";
 import { Flex, Heading } from "../../components";
-import { SpacingToken } from "../../types";
+import { SpacingToken, ColorScheme, ColorWeight } from "../../types";
 
 
 interface DataPoint {
@@ -90,9 +91,16 @@ interface LineBarGraphProps extends React.ComponentProps<typeof Flex> {
    * @default false
    */
   showLegend?: boolean;
+
+  timeFormat?: string; // Format for date display
+
+  isTimeSeries?: boolean; // Whether the X axis contains date/time values
+
+  curveType?: "linear" | "monotone" | "monotoneX" | "step" | "natural" ; // Type of curve for the line
 }
 
-const CustomTooltip = ({ active, payload, label }: any) => {
+
+const CustomTooltip = ({ active, payload, label, isTimeSeries, timeFormat }: any) => {
   if (active && payload && payload.length) {
     return (
       <Flex className={styles.tooltip} minWidth={8} background="surface" border="neutral-alpha-medium" direction="column">
@@ -102,7 +110,7 @@ const CustomTooltip = ({ active, payload, label }: any) => {
           horizontal="center"
           padding="8"
         >
-          <p className={styles.label}>{label}</p>
+          <p className={styles.label}>{isTimeSeries ? moment(label).format(timeFormat) : label.toLocaleString()}</p>
         </Flex>
         <Flex padding="s" direction="column">
           {payload.map((entry: any, index: number) => (
@@ -146,7 +154,10 @@ const LineBarGraph: React.FC<LineBarGraphProps> = ({
   hideXAxisTitle = false,
   hideYAxisTitle = false,
   hideAxisTitles = false,
+  timeFormat = "YYYY-MM-DD",
+  isTimeSeries = false,
   showLegend = false,
+  curveType = "monotone", // Default curve type
   ...flexProps
 }) => {
  
@@ -230,6 +241,8 @@ const LineBarGraph: React.FC<LineBarGraphProps> = ({
               dataKey={xAxisKey}
               axisLine={false}
               tickLine={false}
+              tickFormatter = {format => isTimeSeries ? moment(format).format(timeFormat) : format}
+              domain={['auto', 'auto']}
               tick={hideXAxisLabels || hideLabels ? false : {
                 fill: "var(--neutral-on-background-weak)",
                 fontSize: 12,
@@ -267,7 +280,7 @@ const LineBarGraph: React.FC<LineBarGraphProps> = ({
               hide={false}
             />
             <Tooltip
-              content={<CustomTooltip />}
+              content={<CustomTooltip isTimeSeries={isTimeSeries} timeFormat={timeFormat} />}
               cursor={{ fill: "rgba(255,255,255,0.05)" }}
               wrapperClassName={styles.tooltipWrapper}
             />
@@ -303,7 +316,7 @@ const LineBarGraph: React.FC<LineBarGraphProps> = ({
             
             {showArea ? (
               <Area
-                type="monotone"
+                type={curveType}
                 dataKey={lineDataKey}
                 name={lineName}
                 stroke={finalLineColor}
diff --git a/src/once-ui/modules/data/LineGraph.tsx b/src/once-ui/modules/data/LineGraph.tsx
index 84976dc2..e413f7b0 100644
--- a/src/once-ui/modules/data/LineGraph.tsx
+++ b/src/once-ui/modules/data/LineGraph.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import moment from 'moment'
 import {
   AreaChart,
   Area,
@@ -13,10 +14,11 @@ import styles from "./LineGraph.module.scss";
 import { Flex, Heading } from "../../components";
 
 interface DataPoint {
-  name: string;
+  name: string | number | Date;
   value1: number;
   value2: number;
   value3: number;
+  [key: string]: any; // Allow for flexible data structure
 }
 
 interface LineGraphProps extends React.ComponentProps<typeof Flex> {
@@ -77,10 +79,24 @@ interface LineGraphProps extends React.ComponentProps<typeof Flex> {
   allDashed?: boolean,
 
   fixedYRange?: [number, number]; // [min, max] for y-axis
+  
   /**
-   * Show tick lines on the X-axis when true
+   * Whether the X axis contains date/time values
    * @default false
    */
+  isTimeAxis?: boolean;
+  
+  /**
+  
+  /**
+   * Format for displaying times in tooltip and axis (when time is present)
+   * @default "HH:mm"
+   */
+  timeFormat?: string;
+   
+  isTimeSeries?: boolean; // Whether the X axis contains date/time values
+
+  curveType?: "linear" | "monotone" | "monotoneX" | "step" | "natural" ; // Type of curve for the line
 }
 
 interface CustomTooltipProps extends TooltipProps<number, string> {
@@ -91,9 +107,13 @@ interface CustomTooltipProps extends TooltipProps<number, string> {
   yAxisKey1?: string;
   yAxisKey2?: string;
   yAxisKey3?: string;
-  xAxisTitle?: string; // Add this property
+  xAxisTitle?: string;
+  isTimeSeries?: boolean;
+  timeFormat?: string;
 }
 
+
+
 const CustomTooltip = ({
   active,
   payload,
@@ -105,9 +125,13 @@ const CustomTooltip = ({
   yAxisKey1 = "value1",
   yAxisKey2 = "value2",
   yAxisKey3 = "value3",
-  xAxisTitle = "", // Add default value
+  xAxisTitle = "",
+  isTimeSeries = false,
+  timeFormat = "MMM dd, yyyy",
 }: CustomTooltipProps) => {
   if (active && payload && payload.length) {
+
+      
     return (
       <Flex className={styles.tooltip} background="surface" radius="l" border="neutral-alpha-medium" direction="column">
         <Flex
@@ -119,7 +143,7 @@ const CustomTooltip = ({
           padding="4"
         >
             <p className={styles.label}>
-              {tooltipTitle ? tooltipTitle : `${xAxisTitle}: ${label}`}
+                {tooltipTitle ?? xAxisTitle}: {isTimeSeries ? moment(label).format(timeFormat) : label.toLocaleString()}
             </p>
         </Flex>
         <Flex padding="xs" direction="column" horizontal="center" vertical="center">
@@ -167,9 +191,15 @@ const LineGraph: React.FC<LineGraphProps> = ({
   hideYAxisLabels = false,
   hideLabels = false,
   fixedYRange,
+  isTimeAxis = false,
+  timeFormat = "MMM dd, yyyy",
+  isTimeSeries = false,
+  curveType = "linear",
   ...flexProps
 }) => {
- 
+  
+
+
 
   return (
     <Flex
@@ -198,7 +228,7 @@ const LineGraph: React.FC<LineGraphProps> = ({
         <ResponsiveContainer width="100%" height="100%">
           <AreaChart
             data={data}
-            margin={{  left: 10, bottom: 15 }}
+            margin={{ left: 10, bottom: 15 }}
           >
             <defs>
               <linearGradient id="colorValue1" x1="0" y1="0" x2="0" y2="1">
@@ -232,12 +262,15 @@ const LineGraph: React.FC<LineGraphProps> = ({
               }}
               label={
                 xAxisTitle && !hideXAxisTitle && !hideAxisTitles
-                  ? { value: xAxisTitle,  fontWeight: "500", position: 'bottom', offset: 0, fill: "var(--neutral-on-background-medium)" }
+                  ? { value: xAxisTitle, fontWeight: "500", position: 'bottom', offset: 0, fill: "var(--neutral-on-background-medium)" }
                   : undefined
               }
               axisLine={false}
               tickLine={false}
               hide={hideXAxisLabels || hideLabels}
+              tickFormatter = {format => isTimeSeries ? moment(format).format(timeFormat) : format}
+              domain = {['auto', 'auto']}
+              
             />
             <YAxis
               stroke="var(--neutral-background-strong)"
@@ -260,7 +293,6 @@ const LineGraph: React.FC<LineGraphProps> = ({
                     }
                   : undefined
               }
-
               axisLine={false}
               hide={hideYAxisLabels || hideLabels}
               domain={fixedYRange ? fixedYRange : undefined}
@@ -275,7 +307,9 @@ const LineGraph: React.FC<LineGraphProps> = ({
                   yAxisKey1={yAxisKey1}
                   yAxisKey2={yAxisKey2}
                   yAxisKey3={yAxisKey3}
-                  xAxisTitle={xAxisTitle} // Add this prop
+                  xAxisTitle={xAxisTitle}
+                  timeFormat={timeFormat}
+                  isTimeSeries={isTimeSeries}
                 />
               }
               contentStyle={{
@@ -286,7 +320,7 @@ const LineGraph: React.FC<LineGraphProps> = ({
               }}
             />
             <Area
-              type="linear"
+              type={curveType}
               dataKey={yAxisKey1}
               stroke="#047857"
               strokeWidth={1.5}
@@ -295,7 +329,7 @@ const LineGraph: React.FC<LineGraphProps> = ({
               fill="url(#colorValue1)"
             />
             <Area
-              type="linear"
+              type={curveType}
               dataKey={yAxisKey2}
               strokeDasharray={allDashed || secondDashed ? "5 5" : "0"}
               stroke="#991b1b"
@@ -304,7 +338,7 @@ const LineGraph: React.FC<LineGraphProps> = ({
               fill="url(#colorValue2)"
             />
             <Area
-              type="linear"
+              type={curveType}
               dataKey={yAxisKey3}
               strokeDasharray={allDashed || thirdDashed ? "5 5" : "0"}
               stroke="#6c5ce7"
diff --git a/src/once-ui/modules/data/MultiBarGraph.tsx b/src/once-ui/modules/data/MultiBarGraph.tsx
index ddc9ab17..c5256e84 100644
--- a/src/once-ui/modules/data/MultiBarGraph.tsx
+++ b/src/once-ui/modules/data/MultiBarGraph.tsx
@@ -10,7 +10,9 @@ import {
   Legend,
 } from "recharts";
 
-import { SpacingToken } from "../../types";
+import moment from "moment";
+
+import { SpacingToken, ColorScheme, ColorWeight } from "../../types";
 
 
 import styles from "./MultiBarGraph.module.scss";
@@ -81,9 +83,12 @@ interface MultiBarGraphProps extends React.ComponentProps<typeof Flex> {
    * When true, hides the Y axis  title
    * @default false
    */
+  timeFormat?: string;
+
+   isTimeSeries?: boolean;
 }
 
-const CustomTooltip = ({ active, payload, tooltipTitle, barLabels }: any) => {
+const CustomTooltip = ({ active, payload, tooltipTitle, barLabels, isTimeSeries, timeFormat }: any) => {
   if (active && payload && payload.length) {
     const data = payload[0].payload;
     return (
@@ -94,14 +99,12 @@ const CustomTooltip = ({ active, payload, tooltipTitle, barLabels }: any) => {
           horizontal="center"
           padding="8"
         >
-          <Text
+            <Text
             style={{ fontWeight: "600" }}
             onBackground="neutral-strong"
-          >
-            {data.startDate && data.endDate
-              ? `${data.startDate} - ${data.endDate}`
-              : data.name}
-          </Text>
+            >
+            {isTimeSeries ? moment(data.endDate || data.name).format(timeFormat) : (data.endDate?.toLocaleString() || data.name)}
+            </Text>
         </Flex>
         <Flex padding="s" direction="column">
           {payload.map((entry: any, index: number) => (
@@ -111,7 +114,10 @@ const CustomTooltip = ({ active, payload, tooltipTitle, barLabels }: any) => {
               onBackground="neutral-strong"
               style={{ color: entry.color }}
             >
-              {`${barLabels?.[index] || entry.dataKey}: ${entry.value.toLocaleString()}`}
+              {`${isTimeSeries 
+              ? (barLabels?.[index] || moment(entry.dataKey).format(timeFormat))
+              : (barLabels?.[index] || entry.dataKey)
+              }: ${isTimeSeries ? moment(entry.value).format(timeFormat) : entry.value.toLocaleString()}`}
             </Text>
           ))}
         </Flex>
@@ -141,6 +147,8 @@ const MultiBarGraph: React.FC<MultiBarGraphProps> = ({
   hideYAxisTitle = false,
   hideAxisTitles = false,
   hideLabels = false,
+  isTimeSeries = false,
+  timeFormat,
   ...flexProps
 }) => {
 
@@ -192,6 +200,8 @@ const MultiBarGraph: React.FC<MultiBarGraphProps> = ({
                 fill: "var(--neutral-on-background-weak)",
               fontSize: 12,
               }}
+              tickFormatter = {format => isTimeSeries ? moment(format).format(timeFormat) : format}
+              domain={['auto', 'auto']}
               hide={hideLabels || hideXAxisLabels}
               label={
               xAxisTitle && !hideXAxisTitle && !hideAxisTitles
@@ -230,6 +240,8 @@ const MultiBarGraph: React.FC<MultiBarGraphProps> = ({
                 <CustomTooltip
                   tooltipTitle={tooltipTitle}
                   barLabels={barLabels}
+                  isTimeSeries={isTimeSeries}
+                  timeFormat={timeFormat}
                 />
               }
               cursor={{ fill: "rgba(255,255,255,0.05)" }}

From 0c10943de1da4c500329ac565bb230343e39a1d6 Mon Sep 17 00:00:00 2001
From: Adhitya Nadooli <127269031+lightyfr@users.noreply.github.com>
Date: Tue, 1 Apr 2025 19:51:05 +0000
Subject: [PATCH 16/35] Remove Unused Imports

---
 src/once-ui/modules/data/BarGraph.tsx      | 4 ++--
 src/once-ui/modules/data/LineBarGraph.tsx  | 2 +-
 src/once-ui/modules/data/MultiBarGraph.tsx | 3 +--
 3 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/once-ui/modules/data/BarGraph.tsx b/src/once-ui/modules/data/BarGraph.tsx
index 9baa9a6a..f94ecfa2 100644
--- a/src/once-ui/modules/data/BarGraph.tsx
+++ b/src/once-ui/modules/data/BarGraph.tsx
@@ -10,10 +10,10 @@ import {
   Tooltip,
 } from "recharts";
 
-import { SpacingToken, ColorScheme, ColorWeight } from "../../types";
+import { SpacingToken } from "../../types";
 
 import styles from "./BarGraph.module.scss";
-import { Text, Flex, Heading, Line } from "../../components"; // Import Text component from OnceUI
+import { Text, Flex, Heading } from "../../components"; // Import Text component from OnceUI
 
 interface DataPoint {
   name: string;
diff --git a/src/once-ui/modules/data/LineBarGraph.tsx b/src/once-ui/modules/data/LineBarGraph.tsx
index e91297cd..94a8e08a 100644
--- a/src/once-ui/modules/data/LineBarGraph.tsx
+++ b/src/once-ui/modules/data/LineBarGraph.tsx
@@ -14,7 +14,7 @@ import {
 } from "recharts";
 import styles from "./LineBarGraph.module.scss";
 import { Flex, Heading } from "../../components";
-import { SpacingToken, ColorScheme, ColorWeight } from "../../types";
+import { SpacingToken } from "../../types";
 
 
 interface DataPoint {
diff --git a/src/once-ui/modules/data/MultiBarGraph.tsx b/src/once-ui/modules/data/MultiBarGraph.tsx
index c5256e84..ed5dec4d 100644
--- a/src/once-ui/modules/data/MultiBarGraph.tsx
+++ b/src/once-ui/modules/data/MultiBarGraph.tsx
@@ -7,12 +7,11 @@ import {
   ResponsiveContainer,
   CartesianGrid,
   Tooltip,
-  Legend,
 } from "recharts";
 
 import moment from "moment";
 
-import { SpacingToken, ColorScheme, ColorWeight } from "../../types";
+import { SpacingToken } from "../../types";
 
 
 import styles from "./MultiBarGraph.module.scss";

From eb61f1dcfdc3dc2467ca3a8b459937415d5f8d4b Mon Sep 17 00:00:00 2001
From: Lorant <lorant@once-ui.com>
Date: Tue, 1 Apr 2025 21:53:32 +0200
Subject: [PATCH 17/35] add color tokens for categorical charts, simplify
 BarGraph styling + refact UI

# Conflicts:
#	src/once-ui/modules/data/BarGraph.tsx
---
 src/app/page.tsx                              |  41 ++---
 src/once-ui/modules/data/BarGraph.module.scss |  53 ------
 src/once-ui/modules/data/BarGraph.tsx         | 171 ++++++++----------
 src/once-ui/tokens/data.scss                  |  54 ++++++
 src/once-ui/tokens/index.scss                 |   3 +-
 5 files changed, 148 insertions(+), 174 deletions(-)
 create mode 100644 src/once-ui/tokens/data.scss

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 10020590..9da8b922 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -956,31 +956,22 @@ export default function Home() {
             
             <Row fill gap="32" mobileDirection="column">
               {/* Bar Graph */}
-              <Column fill>
-              <Column background="neutral-weak" fill direction="column" border="neutral-alpha-weak" radius="xl" padding="32" gap="24">
-                  <Heading as="h3" variant="heading-default-m">
-                    Revenue
-                  </Heading>
-                  <BarGraph
-                  hideAxisTitles
-                  hideLabels
-                  height={20}
-                    barColor="success"
-                    tooltipTitle="Revenue"
-                    xAxisTitle="Month"
-                    yAxisTitle="USD"
-                    hideYAxisLabels={false}
-                    data={[
-                      { name: "Jan", value: 4500, startDate: "Jan", endDate: "January" },
-                      { name: "Feb", value: 5200, startDate: "Feb", endDate: "February" },
-                      { name: "Mar", value: 4900, startDate: "Mar", endDate: "March" },
-                      { name: "Apr", value: 6300, startDate: "Apr", endDate: "April" },
-                      { name: "May", value: 5900, startDate: "May", endDate: "May" },
-                      { name: "Jun", value: 8200, startDate: "Jun", endDate: "June" },
-                    ]}
-                  />
-                </Column>
-              </Column>
+              <BarGraph
+                title="Revenue"
+                description="How much dough we made"
+                hideLabels
+                tooltipTitle="Revenue"
+                xAxisTitle="Month"
+                yAxisTitle="USD"
+                data={[
+                  { name: "Jan", value: 4500, startDate: "Jan", endDate: "January" },
+                  { name: "Feb", value: 5200, startDate: "Feb", endDate: "February" },
+                  { name: "Mar", value: 4900, startDate: "Mar", endDate: "March" },
+                  { name: "Apr", value: 6300, startDate: "Apr", endDate: "April" },
+                  { name: "May", value: 5900, startDate: "May", endDate: "May" },
+                  { name: "Jun", value: 8200, startDate: "Jun", endDate: "June" },
+                ]}
+              />
               
               {/* Line Graph */}
               <Column fillWidth>
diff --git a/src/once-ui/modules/data/BarGraph.module.scss b/src/once-ui/modules/data/BarGraph.module.scss
index cdf7d288..e69de29b 100644
--- a/src/once-ui/modules/data/BarGraph.module.scss
+++ b/src/once-ui/modules/data/BarGraph.module.scss
@@ -1,53 +0,0 @@
-.graphContainer {
-  width: 100%;
-  height: 200px;
-  border-radius: 12px;
-  padding: 24px;
-
-  :global(.recharts-bar-rectangle) {
-    filter: drop-shadow(0 0 8px rgba(4, 78, 120, 0.3));
-  }
-}
-
-.blur {
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-}
-
-.blur::backdrop {
-  backdrop-filter: blur(12px);
-}
-
-.blur::before {
-  backdrop-filter: blur(12px);
-}
-
-.tooltip {
-  border-radius: var(--radius-m);
-  text-align: center;
-  justify-content: center;
-  align-items: center;
-
-  .label {
-    text-align: center;
-    margin: 0 0 10px;
-    font-size: 15px;
-    font-weight: 600;
-    color: var(--neutral-on-background-strong);
-  }
-
-  .value {
-    font-weight: 500;
-    text-align: center;
-    margin: 4px 0;
-    display: flex;
-    align-items: center;
-  }
-}
-
-.tooltipWrapper {
-  background-color: var(--neutral-background-strong);
-  border: 1px solid var(--neutral-border-medium);
-  border-radius: var(--radius-s);
-  color: var(--neutral-on-background-medium);
-}
diff --git a/src/once-ui/modules/data/BarGraph.tsx b/src/once-ui/modules/data/BarGraph.tsx
index f94ecfa2..efb89adf 100644
--- a/src/once-ui/modules/data/BarGraph.tsx
+++ b/src/once-ui/modules/data/BarGraph.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import moment from "moment";
 import {
   BarChart,
   Bar,
@@ -11,76 +10,68 @@ import {
 } from "recharts";
 
 import { SpacingToken } from "../../types";
-
-import styles from "./BarGraph.module.scss";
-import { Text, Flex, Heading } from "../../components"; // Import Text component from OnceUI
+import { Text, Flex, Column } from "../../components";
 
 interface DataPoint {
   name: string;
   value: number;
   startDate: string;
   endDate: string;
-  color?: string; // Optional color prop, if needed
+  color?: string;
 }
 
 type BarColor = "success" | "danger" | "purple";
 
 interface BarGraphProps extends React.ComponentProps<typeof Flex> {
   data: DataPoint[];
-  xAxisKey?: string; // Allows customization of the x-axis data key
-  yAxisKey?: string; // Allows customization of the y-axis data key
-  barColor?: BarColor; // Prop for bar color
-  /**
-   * Size of the bar graph.
-   * @default "m"
-   */
+  xAxisKey?: string;
+  yAxisKey?: string;
+  barColor?: BarColor;
   barWidth?: SpacingToken | "fill" | number | string;
-  blur?: boolean; // Controls backdrop blur effect
-  title?: string; // Title for the bar graph
-  tooltipTitle?: string; // Title for the tooltip
-  /** Hide X-axis labels */
+  blur?: boolean;
+  title?: string;
+  description?: string;
+  tooltipTitle?: string;
   hideXAxisLabels?: boolean;
-  /** Hide Y-axis labels */
   hideYAxisLabels?: boolean;
-  /** Hide both X and Y axis labels */
   hideLabels?: boolean;
-  /** Title for X-axis */
   xAxisTitle?: string;
-  /** Title for Y-axis */
   yAxisTitle?: string;
-  /** Hide X-axis title */
   hideXAxisTitle?: boolean;
-  /** Hide Y-axis title */
   hideYAxisTitle?: boolean;
-  /** Hide both X and Y axis titles */
   hideAxisTitles?: boolean;
-
-  timeFormat?: string; // Format for date display
-  isTimeSeries?: boolean; // Flag for time series data
 }
 
-const CustomTooltip = ({ active, payload, tooltipTitle, timeFormat, isTimeSeries }: any) => {
+const CustomTooltip = ({ active, payload, tooltipTitle, xAxisTitle }: any) => {
   if (active && payload && payload.length) {
     const data = payload[0].payload;
     return (
-      <Flex className={styles.tooltip} minWidth={8} background="surface" radius="l" border="neutral-alpha-medium" direction="column">
+      <Column
+        minWidth={8}
+        background="surface"
+        radius="m"
+        border="neutral-alpha-medium">
         <Flex
           borderBottom="neutral-alpha-medium"
           fillWidth
-          horizontal="center"
-          padding="8"
+          paddingY="8"
+          paddingX="12"
         >
           <Text
-            style={{ fontWeight: "500" }}
+            variant="label-strong-s"
             onBackground="neutral-strong"
-          >{isTimeSeries ? moment(data.name).format(timeFormat) : data.name}</Text>
+          >
+            {xAxisTitle && `${xAxisTitle}: `}{data.endDate}
+          </Text>
         </Flex>
-        <Flex padding="s">
-          <Text onBackground="neutral-strong">
-            {`${tooltipTitle}: ${data.value.toLocaleString()}`}
+        <Flex
+          paddingY="8"
+          paddingX="12">
+          <Text onBackground="neutral-strong" variant="label-default-s">
+            {tooltipTitle && `${tooltipTitle}: `}{data.value.toLocaleString()}
           </Text>
         </Flex>
-      </Flex>
+      </Column>
     );
   }
   return null;
@@ -95,7 +86,7 @@ const BarGraph: React.FC<BarGraphProps> = ({
   blur = false,
   border,
   title,
-  radius,
+  description,
   tooltipTitle,
   background,
   hideXAxisLabels = false,
@@ -106,62 +97,54 @@ const BarGraph: React.FC<BarGraphProps> = ({
   hideXAxisTitle = false,
   hideYAxisTitle = false,
   hideAxisTitles = false,
-  timeFormat = "YYYY-MM-DD",
-  isTimeSeries = false,
-  ...flexProps
+  ...flex
 }) => {
-
-
-  const barColorMap = {
-    success: "var(--success-solid-strong)",
-    danger: "var(--danger-solid-strong)",
-    purple: "#8a63d2",
-  };
-
-  const barSolidColor = barColorMap[barColor];
-
   return (
-    <Flex
-      fill
-      fillHeight
-      radius={radius}
-      border={border}
-      align="center"
-      direction="column"
-      vertical="center"
-      background={background}
-      className={blur ? styles.blur : undefined}
-      {...flexProps}
+    <Column
+      fillWidth
+      height={24}
+      radius="l"
+      background="surface"
+      border="neutral-alpha-medium"
+      data-viz="categorical"
+      {...flex}
     >
-      <Flex
-        borderBottom={border}
+      <Column
+        borderBottom="neutral-alpha-medium"
         fillWidth
-        align="center"
+        paddingX="20"
+        paddingY="12"
+        gap="4"
         vertical="center"
-        horizontal="center"
       >
-        <Heading padding="s">{title}</Heading>
-      </Flex>
-      <Flex padding={title ? "s" : "2"} fill>
+        {title && (
+          <Text variant="heading-strong-m">
+            {title}
+          </Text>
+        )}
+        {description && (
+          <Text variant="label-default-s" onBackground="neutral-weak">
+            {description}
+          </Text>
+        )}
+      </Column>
+      <Flex fill>
         <ResponsiveContainer width="100%" height="100%">
           <BarChart
             data={data}
-            margin={{  left: 10, bottom: 15 }}
+            margin={{ left: 0, bottom: 0 }}
             barGap={4}
           >
             <CartesianGrid
               strokeDasharray="2 2"
               horizontal={true}
               vertical={false}
-              stroke="var(--neutral-border-medium)" // Use neutral border color
+              stroke="var(--neutral-border-medium)"
             />
             <XAxis
               dataKey={xAxisKey}
               axisLine={false}
               tickLine={false}
-
-              tickFormatter = {format => isTimeSeries ? moment(format).format(timeFormat) : format}
-              domain = {['auto', 'auto']}
               tick={hideXAxisLabels || hideLabels ? false : {
                 fill: "var(--neutral-on-background-weak)",
                 fontSize: 12,
@@ -174,45 +157,43 @@ const BarGraph: React.FC<BarGraphProps> = ({
               }
             />
             <YAxis
-              axisLine={false}
+              allowDataOverflow
+              axisLine={{
+                stroke: "var(--neutral-alpha-medium)",
+              }}
               tickLine={false}
+              padding={{ top: 40 }}
               tick={{
                 fill: "var(--neutral-on-background-weak)",
                 fontSize: 12,
                }}
-               width={yAxisTitle ? 40 : 0}
+              width={yAxisTitle ? 64 : 0}
               label={
                 yAxisTitle && !hideYAxisTitle && !hideAxisTitles
                   ? { 
-                      value: yAxisTitle, 
-                      angle: -90, // Rotate the label 90 degrees counter-clockwise
-                      position: 'left', 
-                      fontWeight: "500",
-                      dx: 5, // Move label to the left
-                      dy: -20, // Adjust vertical position
+                      value: yAxisTitle,
+                      position: 'insideTop',
+                      offset: 10,
+                      fontSize: 12,
                       fill: "var(--neutral-on-background-medium)" 
                     }
                   : undefined
               }
             />
             <Tooltip
-              content={<CustomTooltip tooltipTitle={tooltipTitle} xAxisTitle={xAxisTitle} timeFormat={timeFormat}  isTimeSeries={isTimeSeries}/>}
+              content={<CustomTooltip tooltipTitle={tooltipTitle} xAxisTitle={xAxisTitle} />}
               cursor={{ fill: "rgba(255,255,255,0.05)" }}
-              wrapperClassName={styles.tooltipWrapper} // Apply styles to the tooltip wrapper
             />
             <defs>
               <linearGradient id="barGradient" x1="0" y1="0" x2="0" y2="1">
                 {[
-                  { offset: "0%", opacity: 0.8 },
-                  { offset: "35%", opacity: 0.6 },
-                  { offset: "70%", opacity: 0.3 },
-                  { offset: "95%", opacity: 0.1 },
+                  { offset: "0%", opacity: 0.6 },
                   { offset: "100%", opacity: 0 },
                 ].map(({ offset, opacity }) => (
                   <stop
                     key={offset}
                     offset={offset}
-                    stopColor={barSolidColor}
+                    stopColor="var(--data-solid-100)"
                     stopOpacity={opacity}
                   />
                 ))}
@@ -221,29 +202,29 @@ const BarGraph: React.FC<BarGraphProps> = ({
             <Bar
               dataKey={yAxisKey}
               fill="url(#barGradient)"
-              stroke={barSolidColor}
+              stroke="var(--data-solid-100)"
               strokeWidth={1}
               barSize={
               barWidth === "fill"
                 ? "100%"
                 : barWidth === "xs"
-                ? 6
-                : barWidth === "s"
                 ? 12
+                : barWidth === "s"
+                ? 16
                 : barWidth === "m"
-                ? 20
+                ? 24
                 : barWidth === "l"
                 ? 40
                 : barWidth === "xl"
-                ? 50
+                ? 64
                 : barWidth
               }
-              radius={[6, 6, 0, 0]}
+              radius={[4, 4, 4, 4]}
             />
           </BarChart>
         </ResponsiveContainer>
       </Flex>
-    </Flex>
+    </Column>
   );
 };
 
diff --git a/src/once-ui/tokens/data.scss b/src/once-ui/tokens/data.scss
new file mode 100644
index 00000000..29addc2f
--- /dev/null
+++ b/src/once-ui/tokens/data.scss
@@ -0,0 +1,54 @@
+[data-theme="dark"] [data-viz="categorical"] {
+  --data-solid-100: var(--scheme-green-600);
+  --data-alpha-100: var(--scheme-green-600-30);
+
+  --data-solid-200: var(--scheme-aqua-600);
+  --data-alpha-200: var(--scheme-aqua-600-30);
+
+  --data-solid-300: var(--scheme-violet-600);
+  --data-alpha-300: var(--scheme-violet-600-30);
+
+  --data-solid-400: var(--scheme-orange-600);
+  --data-alpha-400: var(--scheme-orange-600-30);
+
+  --data-solid-500: var(--scheme-red-600);
+  --data-alpha-500: var(--scheme-red-600-30);
+
+  --data-solid-600: var(--scheme-purple-600);
+  --data-alpha-600: var(--scheme-purple-600-30);
+
+  --data-solid-700: var(--scheme-blue-600);
+  --data-alpha-700: var(--scheme-blue-600-30);
+
+  --data-solid-800: var(--scheme-blue-600);
+  --data-alpha-800: var(--scheme-blue-600-30);
+
+  --data-solid-900: var(--scheme-blue-600);
+  --data-alpha-900: var(--scheme-blue-600-30);
+}
+
+[data-theme="light"] [data-viz="categorical"] {
+  --data-solid-200: var(--scheme-green-400);
+  --data-alpha-200: var(--scheme-green-400-30);
+
+  --data-solid-300: var(--scheme-aqua-400);
+  --data-alpha-300: var(--scheme-aqua-400-30);
+
+  --data-solid-400: var(--scheme-violet-400);
+  --data-alpha-400: var(--scheme-violet-400-30);
+
+  --data-solid-500: var(--scheme-orange-400);
+  --data-alpha-500: var(--scheme-orange-400-30);
+
+  --data-solid-600: var(--scheme-red-400);
+  --data-alpha-600: var(--scheme-red-400-30);
+
+  --data-solid-700: var(--scheme-purple-400);
+  --data-alpha-700: var(--scheme-purple-400-30);
+
+  --data-solid-800: var(--scheme-purple-400);
+  --data-alpha-800: var(--scheme-purple-400-30);
+
+  --data-solid-900: var(--scheme-purple-400);
+  --data-alpha-900: var(--scheme-purple-400-30);
+}
\ No newline at end of file
diff --git a/src/once-ui/tokens/index.scss b/src/once-ui/tokens/index.scss
index 80c23210..c850f9a8 100644
--- a/src/once-ui/tokens/index.scss
+++ b/src/once-ui/tokens/index.scss
@@ -4,4 +4,5 @@
 @use "@/once-ui/tokens/border.scss";
 @use "@/once-ui/tokens/shadow.scss";
 @use "@/once-ui/tokens/typography.scss";
-@use "@/once-ui/tokens/theme.scss";
\ No newline at end of file
+@use "@/once-ui/tokens/theme.scss";
+@use "@/once-ui/tokens/data.scss";
\ No newline at end of file

From ce4611870afca79ef62ec15b4895b491a4067ef9 Mon Sep 17 00:00:00 2001
From: Adhitya Nadooli <127269031+lightyfr@users.noreply.github.com>
Date: Thu, 3 Apr 2025 14:52:37 +0000
Subject: [PATCH 18/35] Alter MultiBarGraph and LineBarGraph to conform to
 BarGraph Styles

---
 src/app/page.tsx                              | 17 ++++----
 src/once-ui/modules/data/BarGraph.tsx         | 14 +++----
 src/once-ui/modules/data/LineBarGraph.tsx     | 42 +++++++++++--------
 .../modules/data/MultiBarGraph.module.scss    | 13 ------
 src/once-ui/modules/data/MultiBarGraph.tsx    | 36 ++++++++++------
 5 files changed, 64 insertions(+), 58 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 9da8b922..9a06b18e 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -960,6 +960,7 @@ export default function Home() {
                 title="Revenue"
                 description="How much dough we made"
                 hideLabels
+                border="neutral-alpha-medium"
                 tooltipTitle="Revenue"
                 xAxisTitle="Month"
                 yAxisTitle="USD"
@@ -1003,11 +1004,11 @@ export default function Home() {
             <Row fillWidth gap="32" mobileDirection="column">
               {/* Multi Bar Graph */}
               <Column fillWidth>
-                <Column background="neutral-weak" fill direction="column" border="neutral-alpha-weak" radius="xl" padding="32" gap="24">
-                  <Heading as="h3" variant="heading-default-m">
-                    Quarterly Comparison
-                  </Heading>
+                <Column background="neutral-weak" fill direction="column" border="neutral-alpha-weak" radius="xl" gap="24">
                   <MultiBarGraph
+                  border="neutral-alpha-medium"
+                  title="Revenue"
+                description="How much dough we made"
                   hideAxisTitles
                     height={20}
                     data={[
@@ -1025,12 +1026,12 @@ export default function Home() {
               
               {/* Line Bar Graph */}
               <Column fillWidth>
-                <Column background="neutral-weak" fill direction="column" border="neutral-alpha-weak" radius="xl" padding="32" gap="24">
-                  <Heading as="h3" variant="heading-default-m">
-                    Conversions vs Traffic
-                  </Heading>
+                <Column background="neutral-weak" fill direction="column" border="neutral-alpha-weak" radius="xl" gap="24">
                   <LineBarGraph
+                  title="Revenue"
+                description="How much dough we made"
                     hideAxisTitles
+                    border="neutral-alpha-medium"
                     lineColorVariant="info"
                     showArea={true}
                     xAxisTitle="Day"
diff --git a/src/once-ui/modules/data/BarGraph.tsx b/src/once-ui/modules/data/BarGraph.tsx
index efb89adf..e1148c6c 100644
--- a/src/once-ui/modules/data/BarGraph.tsx
+++ b/src/once-ui/modules/data/BarGraph.tsx
@@ -40,6 +40,7 @@ interface BarGraphProps extends React.ComponentProps<typeof Flex> {
   hideXAxisTitle?: boolean;
   hideYAxisTitle?: boolean;
   hideAxisTitles?: boolean;
+  xAxisHeight?: number;
 }
 
 const CustomTooltip = ({ active, payload, tooltipTitle, xAxisTitle }: any) => {
@@ -84,11 +85,10 @@ const BarGraph: React.FC<BarGraphProps> = ({
   barColor = "success",
   barWidth = "fill",
   blur = false,
-  border,
+  border = "neutral-alpha-weak",
   title,
   description,
   tooltipTitle,
-  background,
   hideXAxisLabels = false,
   hideYAxisLabels = false,
   hideLabels = false,
@@ -97,20 +97,20 @@ const BarGraph: React.FC<BarGraphProps> = ({
   hideXAxisTitle = false,
   hideYAxisTitle = false,
   hideAxisTitles = false,
+  xAxisHeight = 10,
   ...flex
 }) => {
   return (
     <Column
       fillWidth
       height={24}
+      border={border}
       radius="l"
-      background="surface"
-      border="neutral-alpha-medium"
       data-viz="categorical"
-      {...flex}
+      {...flex} 
     >
       <Column
-        borderBottom="neutral-alpha-medium"
+        borderBottom={border}
         fillWidth
         paddingX="20"
         paddingY="12"
@@ -152,7 +152,7 @@ const BarGraph: React.FC<BarGraphProps> = ({
               
               label={
                 xAxisTitle && !hideXAxisTitle && !hideAxisTitles
-                  ? { value: xAxisTitle, fontWeight: "500", position: 'bottom', offset: 0, fill: "var(--neutral-on-background-medium)" }
+                  ? { value: xAxisTitle, fontWeight: "500", position: 'bottom', offset: -20, fill: "var(--neutral-on-background-medium)" }
                   : undefined
               }
             />
diff --git a/src/once-ui/modules/data/LineBarGraph.tsx b/src/once-ui/modules/data/LineBarGraph.tsx
index 94a8e08a..ad852593 100644
--- a/src/once-ui/modules/data/LineBarGraph.tsx
+++ b/src/once-ui/modules/data/LineBarGraph.tsx
@@ -13,7 +13,7 @@ import {
   Area,
 } from "recharts";
 import styles from "./LineBarGraph.module.scss";
-import { Flex, Heading } from "../../components";
+import { Flex, Column, Text } from "../../components";
 import { SpacingToken } from "../../types";
 
 
@@ -97,6 +97,8 @@ interface LineBarGraphProps extends React.ComponentProps<typeof Flex> {
   isTimeSeries?: boolean; // Whether the X axis contains date/time values
 
   curveType?: "linear" | "monotone" | "monotoneX" | "step" | "natural" ; // Type of curve for the line
+
+  description?: string;
 }
 
 
@@ -110,17 +112,17 @@ const CustomTooltip = ({ active, payload, label, isTimeSeries, timeFormat }: any
           horizontal="center"
           padding="8"
         >
-          <p className={styles.label}>{isTimeSeries ? moment(label).format(timeFormat) : label.toLocaleString()}</p>
+          <Text>{isTimeSeries ? moment(label).format(timeFormat) : label.toLocaleString()}</Text>
         </Flex>
         <Flex padding="s" direction="column">
           {payload.map((entry: any, index: number) => (
-            <p
+            <Text
+             variant="label-strong-s"
               key={`item-${index}`}
-              className={styles.value}
               style={{ color: entry.color }}
             >
               {`${entry.name.toLocaleString()}: ${entry.value.toLocaleString()}`}
-            </p>
+            </Text>
           ))}
         </Flex>
       </Flex>
@@ -141,9 +143,9 @@ const LineBarGraph: React.FC<LineBarGraphProps> = ({
   dashedLine = false,
   border,
   title,
+  description,
   lineColorVariant = "info", // Options: "info", "success", "danger", "purple"
   barColor = "var(--success-solid-strong)",
-  radius,
   background,
   showArea = true,
   hideXAxisLabels = false,
@@ -179,7 +181,7 @@ const LineBarGraph: React.FC<LineBarGraphProps> = ({
   return (
     <Flex
       fill
-      radius={radius}
+      radius="l"
       border={border}
       align="center"
       direction="column"
@@ -189,16 +191,22 @@ const LineBarGraph: React.FC<LineBarGraphProps> = ({
       {...flexProps}
     >
       {title && (
-        <Flex
-          borderBottom={border}
-          fillWidth
-          align="center"
-          vertical="center"
-          horizontal="center"
-        >
-          <Heading padding="s">{title}</Heading>
-        </Flex>
-      )}
+  <Column fillWidth borderBottom={border} horizontal="start" paddingX="20"
+  paddingY="12"
+  gap="4"
+>
+      {title && (
+                <Text variant="heading-strong-m">
+                  {title}
+                </Text>
+              )}
+              {description && (
+                <Text variant="label-default-s" onBackground="neutral-weak">
+                  {description}
+                </Text>
+              )}
+              </Column>
+            )}
       <Flex padding={title ? "s" : "2"} fill>
         <ResponsiveContainer width="100%" height="100%">
           <ComposedChart
diff --git a/src/once-ui/modules/data/MultiBarGraph.module.scss b/src/once-ui/modules/data/MultiBarGraph.module.scss
index b4e1f529..0bb73fe6 100644
--- a/src/once-ui/modules/data/MultiBarGraph.module.scss
+++ b/src/once-ui/modules/data/MultiBarGraph.module.scss
@@ -39,18 +39,5 @@
     text-align: center;
     justify-content: center;
   
-    .label {
-      text-align: center;
-      padding: 5px;
-      font-size: 15px;
-      color: var(--neutral-on-background-strong);
-    }
-  
-    .value {
-      text-align: center;
-      margin: 4px 0;
-      display: flex;
-      align-items: center;
-    }
   }
   
\ No newline at end of file
diff --git a/src/once-ui/modules/data/MultiBarGraph.tsx b/src/once-ui/modules/data/MultiBarGraph.tsx
index ed5dec4d..9fd019d5 100644
--- a/src/once-ui/modules/data/MultiBarGraph.tsx
+++ b/src/once-ui/modules/data/MultiBarGraph.tsx
@@ -15,7 +15,7 @@ import { SpacingToken } from "../../types";
 
 
 import styles from "./MultiBarGraph.module.scss";
-import { Text, Flex, Heading } from "../../components";
+import { Text, Flex, Heading, Column } from "../../components";
 
 // Data structure supporting multiple values
 interface MultiBarDataPoint {
@@ -39,6 +39,7 @@ interface MultiBarGraphProps extends React.ComponentProps<typeof Flex> {
   barWidth?: SpacingToken | "fill" | number | string;
   blur?: boolean;
   title?: string;
+  description?: string;
   tooltipTitle?: string;
   /**
    * When true, hides labels on the X axis
@@ -99,6 +100,7 @@ const CustomTooltip = ({ active, payload, tooltipTitle, barLabels, isTimeSeries,
           padding="8"
         >
             <Text
+            variant="label-strong-s"
             style={{ fontWeight: "600" }}
             onBackground="neutral-strong"
             >
@@ -108,8 +110,8 @@ const CustomTooltip = ({ active, payload, tooltipTitle, barLabels, isTimeSeries,
         <Flex padding="s" direction="column">
           {payload.map((entry: any, index: number) => (
             <Text
+              variant="label-strong-s"
               key={`value-${index}`}
-              className={styles.value}
               onBackground="neutral-strong"
               style={{ color: entry.color }}
             >
@@ -134,7 +136,7 @@ const MultiBarGraph: React.FC<MultiBarGraphProps> = ({
   blur = false,
   border,
   title,
-  radius,
+  description,
   tooltipTitle,
   barLabels,
   background,
@@ -158,7 +160,7 @@ const MultiBarGraph: React.FC<MultiBarGraphProps> = ({
   return (
     <Flex
       fill
-      radius={radius}
+      radius="l"
       border={border}
       align="center"
       direction="column"
@@ -167,16 +169,24 @@ const MultiBarGraph: React.FC<MultiBarGraphProps> = ({
       className={blur ? styles.blur : undefined}
       {...flexProps}
     >
+
+{title && (
+  <Column fillWidth borderBottom={border} horizontal="start" paddingX="20"
+  paddingY="12"
+  gap="4"
+>
       {title && (
-        <Flex
-          borderBottom={border}
-          fillWidth
-          align="center"
-          horizontal="center"
-        >
-          <Heading padding="s">{title}</Heading>
-        </Flex>
-      )}
+                <Text variant="heading-strong-m">
+                  {title}
+                </Text>
+              )}
+              {description && (
+                <Text variant="label-default-s" onBackground="neutral-weak">
+                  {description}
+                </Text>
+              )}
+              </Column>
+            )}
       <Flex padding={title ? "s" : "2"} fill>
         <ResponsiveContainer width="100%" height="100%">
           <BarChart

From b56bf9779efd7af1ee03c09e145bee13b918bdb6 Mon Sep 17 00:00:00 2001
From: Adhitya Nadooli <127269031+lightyfr@users.noreply.github.com>
Date: Thu, 3 Apr 2025 16:19:06 +0000
Subject: [PATCH 19/35] Refactor LineBarGraph and MultiBarGraph for improved
 styling and layout consistency

---
 src/app/page.tsx                           |  3 -
 src/once-ui/modules/data/LineBarGraph.tsx  | 52 ++++++-------
 src/once-ui/modules/data/MultiBarGraph.tsx | 91 ++++++++++------------
 3 files changed, 68 insertions(+), 78 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 9a06b18e..8eb81ebf 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1009,8 +1009,6 @@ export default function Home() {
                   border="neutral-alpha-medium"
                   title="Revenue"
                 description="How much dough we made"
-                  hideAxisTitles
-                    height={20}
                     data={[
                       { name: "Q1", value1: 35000, value2: 45000, value3: 30000 },
                       { name: "Q2", value1: 42000, value2: 48000, value3: 36000 },
@@ -1030,7 +1028,6 @@ export default function Home() {
                   <LineBarGraph
                   title="Revenue"
                 description="How much dough we made"
-                    hideAxisTitles
                     border="neutral-alpha-medium"
                     lineColorVariant="info"
                     showArea={true}
diff --git a/src/once-ui/modules/data/LineBarGraph.tsx b/src/once-ui/modules/data/LineBarGraph.tsx
index ad852593..fb274ebb 100644
--- a/src/once-ui/modules/data/LineBarGraph.tsx
+++ b/src/once-ui/modules/data/LineBarGraph.tsx
@@ -180,14 +180,13 @@ const LineBarGraph: React.FC<LineBarGraphProps> = ({
 
   return (
     <Flex
-      fill
-      radius="l"
-      border={border}
-      align="center"
-      direction="column"
-      vertical="center"
-      background={background}
-      className={blur ? styles.blur : undefined}
+    direction="column"
+    fillHeight
+    fillWidth
+    height={24}
+    border={border}
+    radius="l"
+    data-viz="categorical"
       {...flexProps}
     >
       {title && (
@@ -207,11 +206,12 @@ const LineBarGraph: React.FC<LineBarGraphProps> = ({
               )}
               </Column>
             )}
-      <Flex padding={title ? "s" : "2"} fill>
+      <Flex fill>
         <ResponsiveContainer width="100%" height="100%">
           <ComposedChart
             data={data}
-            margin={{ left: 10, bottom: 15 }}
+            margin={{ left: 0, bottom: 0, top: 0, right: 0 }}
+            barGap={4}
           >
             <defs>
               {/* Bar gradient */}
@@ -249,43 +249,41 @@ const LineBarGraph: React.FC<LineBarGraphProps> = ({
               dataKey={xAxisKey}
               axisLine={false}
               tickLine={false}
-              tickFormatter = {format => isTimeSeries ? moment(format).format(timeFormat) : format}
-              domain={['auto', 'auto']}
+              height={hideXAxisLabels ? 0 : 50}
               tick={hideXAxisLabels || hideLabels ? false : {
                 fill: "var(--neutral-on-background-weak)",
                 fontSize: 12,
               }}
+              
               label={
                 xAxisTitle && !hideXAxisTitle && !hideAxisTitles
-                  ? { value: xAxisTitle,  fontWeight: "500", position: 'bottom', offset: 0, fill: "var(--neutral-on-background-medium)" }
+                  ? { value: xAxisTitle, fontWeight: "500", position: 'bottom', offset: -23, fill: "var(--neutral-on-background-medium)" }
                   : undefined
               }
-              // Make sure to always show the grid even if labels are hidden
-              hide={false}
             />
             <YAxis
+              allowDataOverflow
+              axisLine={{
+                stroke: "var(--neutral-alpha-medium)",
+              }}
+              tickLine={false}
+              padding={{ top: 40 }}
               tick={{
-                fontSize: 12,
                 fill: "var(--neutral-on-background-weak)",
+                fontSize: 12,
                }}
-              axisLine={false}
-              tickLine={false}
-              width={yAxisTitle ? 50 : 0}
+              width={yAxisTitle ? 54 : 0}
               label={
                 yAxisTitle && !hideYAxisTitle && !hideAxisTitles
                   ? { 
-                      value: yAxisTitle, 
-                      angle: -90, // Rotate the label 90 degrees counter-clockwise
-                      position: 'left', 
-                      fontWeight: "500",
-                      dx: 0, // Move label to the left
-                      dy: -20, // Adjust vertical position
+                      value: yAxisTitle,
+                      position: 'insideTop',
+                      offset: 10,
+                      fontSize: 12,
                       fill: "var(--neutral-on-background-medium)" 
                     }
                   : undefined
               }
-              // Make sure to always show the grid even if labels are hidden
-              hide={false}
             />
             <Tooltip
               content={<CustomTooltip isTimeSeries={isTimeSeries} timeFormat={timeFormat} />}
diff --git a/src/once-ui/modules/data/MultiBarGraph.tsx b/src/once-ui/modules/data/MultiBarGraph.tsx
index 9fd019d5..1f99ef8f 100644
--- a/src/once-ui/modules/data/MultiBarGraph.tsx
+++ b/src/once-ui/modules/data/MultiBarGraph.tsx
@@ -166,7 +166,6 @@ const MultiBarGraph: React.FC<MultiBarGraphProps> = ({
       direction="column"
       vertical="center"
       background={background}
-      className={blur ? styles.blur : undefined}
       {...flexProps}
     >
 
@@ -187,13 +186,12 @@ const MultiBarGraph: React.FC<MultiBarGraphProps> = ({
               )}
               </Column>
             )}
-      <Flex padding={title ? "s" : "2"} fill>
+      <Flex fill>
         <ResponsiveContainer width="100%" height="100%">
           <BarChart
             data={data}
-            margin={{ top: 10, right: 10, left: 10, bottom: 10 }}
-            barGap={4} // Small gap between bars in the same group
-            barCategoryGap={1} // Control spacing between different groups (x-axis categories)
+            margin={{ left: 0, bottom: 0, top: 0, right: 0 }}
+            barGap={4}
             >
             <CartesianGrid
               strokeDasharray="2 2"
@@ -201,49 +199,46 @@ const MultiBarGraph: React.FC<MultiBarGraphProps> = ({
               vertical={false}
               stroke="var(--neutral-border-medium)"
             />
-            <XAxis
-              dataKey={xAxisKey}
-              axisLine={false}
-              tickLine={false}
-              tick={{
-                fill: "var(--neutral-on-background-weak)",
-              fontSize: 12,
-              }}
-              tickFormatter = {format => isTimeSeries ? moment(format).format(timeFormat) : format}
-              domain={['auto', 'auto']}
-              hide={hideLabels || hideXAxisLabels}
-              label={
-              xAxisTitle && !hideXAxisTitle && !hideAxisTitles
-                ? { value: xAxisTitle,               fontWeight: "500",
-                  position: 'bottom', offset: -2, fill: "var(--neutral-on-background-medium)" }
-                : undefined
-              }
-            />
-            <YAxis
-              axisLine={false}
-              tickLine={false}
-              tick={{
-                fill: "var(--neutral-on-background-weak)",
-              fontSize: 12,
-              }}
-              width={yAxisTitle ? 40 : 0} // Adjust width based on number of bars
-              label={
-                yAxisTitle && !hideYAxisTitle && !hideAxisTitles
-                  ? { 
-                      value: yAxisTitle, 
-                      angle: -90, // Rotate the label 90 degrees counter-clockwise
-                      position: 'left', 
-                      fontWeight: "500",
-                      dx: 0, // Move label to the left
-                      dy: -20, // Adjust vertical position
-                      fill: "var(--neutral-on-background-medium)" 
-                    }
-                  : undefined
-              }
-              domain={[0, "auto"]} // Start from 0, auto-scale the upper bound
-              allowDataOverflow={false} // Prevent data from exceeding the domain
-              hide={hideLabels || hideYAxisLabels}
-            />
+                      <XAxis
+                        dataKey={xAxisKey}
+                        axisLine={false}
+                        tickLine={false}
+                        tick={hideXAxisLabels || hideLabels ? false : {
+                          fill: "var(--neutral-on-background-weak)",
+                          fontSize: 12,
+                        }}
+
+                        height={hideXAxisLabels || hideLabels ? 0 : 40}
+                        label={
+                          xAxisTitle && !hideXAxisTitle && !hideAxisTitles
+                            ? { value: xAxisTitle, fontWeight: "500", position: 'bottom', offset: -23, fill: "var(--neutral-on-background-medium)" }
+                            : undefined
+                        }
+                      />
+                      <YAxis
+                        allowDataOverflow
+                        axisLine={{
+                          stroke: "var(--neutral-alpha-medium)",
+                        }}
+                        tickLine={false}
+                        padding={{ top: 40 }}
+                        tick={{
+                          fill: "var(--neutral-on-background-weak)",
+                          fontSize: 12,
+                         }}
+                        width={yAxisTitle ? 54 : 0}
+                        label={
+                          yAxisTitle && !hideYAxisTitle && !hideAxisTitles
+                            ? { 
+                                value: yAxisTitle,
+                                position: 'insideTop',
+                                offset: 10,
+                                fontSize: 12,
+                                fill: "var(--neutral-on-background-medium)" 
+                              }
+                            : undefined
+                        }
+                      />
             <Tooltip
               content={
                 <CustomTooltip

From 381c37ee75ec40289f1be91eb4cda174f808e6eb Mon Sep 17 00:00:00 2001
From: Adhitya Nadooli <127269031+lightyfr@users.noreply.github.com>
Date: Thu, 3 Apr 2025 18:46:52 +0000
Subject: [PATCH 20/35] Enhance graph components with improved titles,
 descriptions, and layout adjustments

---
 src/app/page.tsx                           |  18 ++--
 src/once-ui/modules/data/BarGraph.tsx      |   3 +-
 src/once-ui/modules/data/LineBarGraph.tsx  |   2 +-
 src/once-ui/modules/data/LineGraph.tsx     | 119 +++++++++++----------
 src/once-ui/modules/data/MultiBarGraph.tsx |   6 +-
 5 files changed, 76 insertions(+), 72 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 8eb81ebf..828e8460 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -959,7 +959,6 @@ export default function Home() {
               <BarGraph
                 title="Revenue"
                 description="How much dough we made"
-                hideLabels
                 border="neutral-alpha-medium"
                 tooltipTitle="Revenue"
                 xAxisTitle="Month"
@@ -976,12 +975,11 @@ export default function Home() {
               
               {/* Line Graph */}
               <Column fillWidth>
-                <Column background="neutral-weak" fill direction="column" border="neutral-alpha-weak" radius="xl" padding="32" gap="24">
-                  <Heading as="h3" variant="heading-default-m">
-                    User Activity
-                  </Heading>
+                <Column background="neutral-weak" fill direction="column" border="neutral-alpha-weak" radius="xl" gap="24">
                   <LineGraph
-                    hideAxisTitles
+                    title="Page Visits Per Week"
+                    description="How many users visited our page"
+                    border="neutral-alpha-medium"
                     xAxisTitle="Week"
                     yAxisTitle="Users"
                     value1="Desktop"
@@ -1007,8 +1005,8 @@ export default function Home() {
                 <Column background="neutral-weak" fill direction="column" border="neutral-alpha-weak" radius="xl" gap="24">
                   <MultiBarGraph
                   border="neutral-alpha-medium"
-                  title="Revenue"
-                description="How much dough we made"
+                  title="Quarterly Revenue"
+                description="How much dough we made per quarter in 2023 and 2024"
                     data={[
                       { name: "Q1", value1: 35000, value2: 45000, value3: 30000 },
                       { name: "Q2", value1: 42000, value2: 48000, value3: 36000 },
@@ -1026,8 +1024,8 @@ export default function Home() {
               <Column fillWidth>
                 <Column background="neutral-weak" fill direction="column" border="neutral-alpha-weak" radius="xl" gap="24">
                   <LineBarGraph
-                  title="Revenue"
-                description="How much dough we made"
+                  title="Traffic Per Weekday"
+                description="How many users we had per weekday"
                     border="neutral-alpha-medium"
                     lineColorVariant="info"
                     showArea={true}
diff --git a/src/once-ui/modules/data/BarGraph.tsx b/src/once-ui/modules/data/BarGraph.tsx
index e1148c6c..020ab41f 100644
--- a/src/once-ui/modules/data/BarGraph.tsx
+++ b/src/once-ui/modules/data/BarGraph.tsx
@@ -145,6 +145,7 @@ const BarGraph: React.FC<BarGraphProps> = ({
               dataKey={xAxisKey}
               axisLine={false}
               tickLine={false}
+              height={hideXAxisLabels || hideLabels ? 0 : 50}
               tick={hideXAxisLabels || hideLabels ? false : {
                 fill: "var(--neutral-on-background-weak)",
                 fontSize: 12,
@@ -152,7 +153,7 @@ const BarGraph: React.FC<BarGraphProps> = ({
               
               label={
                 xAxisTitle && !hideXAxisTitle && !hideAxisTitles
-                  ? { value: xAxisTitle, fontWeight: "500", position: 'bottom', offset: -20, fill: "var(--neutral-on-background-medium)" }
+                  ? { value: xAxisTitle, fontWeight: "500", position: 'bottom', offset: -23, fill: "var(--neutral-on-background-medium)" }
                   : undefined
               }
             />
diff --git a/src/once-ui/modules/data/LineBarGraph.tsx b/src/once-ui/modules/data/LineBarGraph.tsx
index fb274ebb..ea26ca6c 100644
--- a/src/once-ui/modules/data/LineBarGraph.tsx
+++ b/src/once-ui/modules/data/LineBarGraph.tsx
@@ -249,7 +249,7 @@ const LineBarGraph: React.FC<LineBarGraphProps> = ({
               dataKey={xAxisKey}
               axisLine={false}
               tickLine={false}
-              height={hideXAxisLabels ? 0 : 50}
+              height={hideXAxisLabels || hideLabels ? 0 : 50}
               tick={hideXAxisLabels || hideLabels ? false : {
                 fill: "var(--neutral-on-background-weak)",
                 fontSize: 12,
diff --git a/src/once-ui/modules/data/LineGraph.tsx b/src/once-ui/modules/data/LineGraph.tsx
index e413f7b0..2b8beae6 100644
--- a/src/once-ui/modules/data/LineGraph.tsx
+++ b/src/once-ui/modules/data/LineGraph.tsx
@@ -11,7 +11,7 @@ import {
   TooltipProps,
 } from "recharts";
 import styles from "./LineGraph.module.scss";
-import { Flex, Heading } from "../../components";
+import { Flex, Column, Text } from "../../components";
 
 interface DataPoint {
   name: string | number | Date;
@@ -35,6 +35,7 @@ interface LineGraphProps extends React.ComponentProps<typeof Flex> {
    */
   blur?: boolean;
   title?: string;
+  description?: string;
   tooltipTitle?: string;
   value1?: string;
   value2?: string;
@@ -177,11 +178,11 @@ const LineGraph: React.FC<LineGraphProps> = ({
   blur = false,
   border,
   title,
+  description,
   value1,
   value2,
   value3,
   tooltipTitle,
-  radius,
   background,
   firstDashed = false,
   secondDashed = false,
@@ -205,7 +206,7 @@ const LineGraph: React.FC<LineGraphProps> = ({
     <Flex
       fill
       fillHeight
-      radius={radius}
+      radius="l"
       border={border}
       align="center"
       horizontal="center"
@@ -215,20 +216,28 @@ const LineGraph: React.FC<LineGraphProps> = ({
       className={blur ? styles.blur : undefined}
       {...flexProps}
     >
-      <Flex
-        borderBottom={border}
-        fillWidth
-        align="center"
-        vertical="center"
-        horizontal="center"
-      >
-        <Heading padding="s">{title}</Heading>
-      </Flex>
-      <Flex fill padding={title ? "s" : "2"} className={styles.graph}>
+      {title && (
+  <Column fillWidth borderBottom={border} horizontal="start" paddingX="20"
+  paddingY="12"
+  gap="4"
+>
+      {title && (
+                <Text variant="heading-strong-m">
+                  {title}
+                </Text>
+              )}
+              {description && (
+                <Text variant="label-default-s" onBackground="neutral-weak">
+                  {description}
+                </Text>
+              )}
+              </Column>
+            )}
+      <Flex fill className={styles.graph}>
         <ResponsiveContainer width="100%" height="100%">
           <AreaChart
             data={data}
-            margin={{ left: 10, bottom: 15 }}
+            margin={{ left: 0, bottom: 0, top: 0, right: 0 }}
           >
             <defs>
               <linearGradient id="colorValue1" x1="0" y1="0" x2="0" y2="1">
@@ -254,49 +263,45 @@ const LineGraph: React.FC<LineGraphProps> = ({
               horizontal={true}
             />
             <XAxis
-              dataKey={xAxisKey}
-              stroke="var(--neutral-background-medium)"
-              tick={{
-                fill: "var(--neutral-on-background-weak)",
-                fontSize: 11,
-              }}
-              label={
-                xAxisTitle && !hideXAxisTitle && !hideAxisTitles
-                  ? { value: xAxisTitle, fontWeight: "500", position: 'bottom', offset: 0, fill: "var(--neutral-on-background-medium)" }
-                  : undefined
-              }
-              axisLine={false}
-              tickLine={false}
-              hide={hideXAxisLabels || hideLabels}
-              tickFormatter = {format => isTimeSeries ? moment(format).format(timeFormat) : format}
-              domain = {['auto', 'auto']}
-              
-            />
-            <YAxis
-              stroke="var(--neutral-background-strong)"
-              tick={{
-                fill: "var(--neutral-on-background-weak)",
-                fontSize: 11,
-              }}
-              tickLine={false}
-              width={yAxisTitle ? 40 : 0}
-              label={
-                yAxisTitle && !hideYAxisTitle && !hideAxisTitles
-                  ? { 
-                      value: yAxisTitle, 
-                      fontWeight: "500",
-                      angle: -90, // Rotate the label 90 degrees counter-clockwise
-                      position: 'left', 
-                      dx: 5, // Move label to the left
-                      dy: -20, // Adjust vertical position
-                      fill: "var(--neutral-on-background-medium)" 
-                    }
-                  : undefined
-              }
-              axisLine={false}
-              hide={hideYAxisLabels || hideLabels}
-              domain={fixedYRange ? fixedYRange : undefined}
-            />
+                          dataKey={xAxisKey}
+                          axisLine={false}
+                          tickLine={false}
+                          height={hideXAxisLabels || hideLabels ? 0 : 50}
+                          tick={hideXAxisLabels || hideLabels ? false : {
+                            fill: "var(--neutral-on-background-weak)",
+                            fontSize: 12,
+                          }}
+                          
+                          label={
+                            xAxisTitle && !hideXAxisTitle && !hideAxisTitles
+                              ? { value: xAxisTitle, fontWeight: "500", position: 'bottom', offset: -23, fill: "var(--neutral-on-background-medium)" }
+                              : undefined
+                          }
+                        />
+                        <YAxis
+                          allowDataOverflow
+                          axisLine={{
+                            stroke: "var(--neutral-alpha-medium)",
+                          }}
+                          tickLine={false}
+                          padding={{ top: 40 }}
+                          tick={{
+                            fill: "var(--neutral-on-background-weak)",
+                            fontSize: 12,
+                           }}
+                          width={yAxisTitle ? 54 : 0}
+                          label={
+                            yAxisTitle && !hideYAxisTitle && !hideAxisTitles
+                              ? { 
+                                  value: yAxisTitle,
+                                  position: 'insideTop',
+                                  offset: 10,
+                                  fontSize: 12,
+                                  fill: "var(--neutral-on-background-medium)" 
+                                }
+                              : undefined
+                          }
+                        />
             <Tooltip
               content={
                 <CustomTooltip
diff --git a/src/once-ui/modules/data/MultiBarGraph.tsx b/src/once-ui/modules/data/MultiBarGraph.tsx
index 1f99ef8f..ee1b52db 100644
--- a/src/once-ui/modules/data/MultiBarGraph.tsx
+++ b/src/once-ui/modules/data/MultiBarGraph.tsx
@@ -107,10 +107,10 @@ const CustomTooltip = ({ active, payload, tooltipTitle, barLabels, isTimeSeries,
             {isTimeSeries ? moment(data.endDate || data.name).format(timeFormat) : (data.endDate?.toLocaleString() || data.name)}
             </Text>
         </Flex>
-        <Flex padding="s" direction="column">
+        <Flex padding="8" gap="4" direction="column">
           {payload.map((entry: any, index: number) => (
             <Text
-              variant="label-strong-s"
+              variant="label-default-s"
               key={`value-${index}`}
               onBackground="neutral-strong"
               style={{ color: entry.color }}
@@ -208,7 +208,7 @@ const MultiBarGraph: React.FC<MultiBarGraphProps> = ({
                           fontSize: 12,
                         }}
 
-                        height={hideXAxisLabels || hideLabels ? 0 : 40}
+                        height={hideXAxisLabels || hideLabels ? 0 : 50}
                         label={
                           xAxisTitle && !hideXAxisTitle && !hideAxisTitles
                             ? { value: xAxisTitle, fontWeight: "500", position: 'bottom', offset: -23, fill: "var(--neutral-on-background-medium)" }

From 1b1bd7d1c0c2bb8a3c52090cec1e4e16670a571e Mon Sep 17 00:00:00 2001
From: Adhitya Nadooli <127269031+lightyfr@users.noreply.github.com>
Date: Thu, 3 Apr 2025 19:06:30 +0000
Subject: [PATCH 21/35] Refactor tooltip components in LineBarGraph and
 LineGraph for consistent styling and layout adjustments; add data-viz
 attribute to MultiBarGraph

---
 src/once-ui/modules/data/LineBarGraph.tsx  |  6 +++---
 src/once-ui/modules/data/LineGraph.tsx     | 18 +++++++++---------
 src/once-ui/modules/data/MultiBarGraph.tsx |  1 +
 3 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/once-ui/modules/data/LineBarGraph.tsx b/src/once-ui/modules/data/LineBarGraph.tsx
index ea26ca6c..f60674b2 100644
--- a/src/once-ui/modules/data/LineBarGraph.tsx
+++ b/src/once-ui/modules/data/LineBarGraph.tsx
@@ -112,12 +112,12 @@ const CustomTooltip = ({ active, payload, label, isTimeSeries, timeFormat }: any
           horizontal="center"
           padding="8"
         >
-          <Text>{isTimeSeries ? moment(label).format(timeFormat) : label.toLocaleString()}</Text>
+          <Text variant="label-strong-s">{isTimeSeries ? moment(label).format(timeFormat) : label.toLocaleString()}</Text>
         </Flex>
-        <Flex padding="s" direction="column">
+        <Flex padding="8" direction="column">
           {payload.map((entry: any, index: number) => (
             <Text
-             variant="label-strong-s"
+             variant="label-default-s"
               key={`item-${index}`}
               style={{ color: entry.color }}
             >
diff --git a/src/once-ui/modules/data/LineGraph.tsx b/src/once-ui/modules/data/LineGraph.tsx
index 2b8beae6..6a3bc9db 100644
--- a/src/once-ui/modules/data/LineGraph.tsx
+++ b/src/once-ui/modules/data/LineGraph.tsx
@@ -143,20 +143,20 @@ const CustomTooltip = ({
           horizontal="center"
           padding="4"
         >
-            <p className={styles.label}>
+            <Text variant="label-strong-s">
                 {tooltipTitle ?? xAxisTitle}: {isTimeSeries ? moment(label).format(timeFormat) : label.toLocaleString()}
-            </p>
+            </Text>
         </Flex>
-        <Flex padding="xs" direction="column" horizontal="center" vertical="center">
-            <p className={styles.value} style={{ color: "var(--success-solid-strong)" }}>
+        <Flex padding="8" direction="column" horizontal="center" vertical="center">
+            <Text variant="label-default-s" style={{ color: "var(--success-solid-strong)" }}>
             {`${key1}: ${Number(payload[0].value).toLocaleString()}`}
-            </p>
-            <p className={styles.value} style={{ color: "var(--danger-solid-strong)" }}>
+            </Text>
+            <Text variant="label-default-s" style={{ color: "var(--danger-solid-strong)" }}>
             {`${key2}: ${Number(payload[1].value).toLocaleString()}`}
-            </p>
-            <p className={styles.value} style={{ color: "#6c5ce7" }}>
+            </Text>
+            <Text variant="label-default-s" style={{ color: "#6c5ce7" }}>
             {`${key3}: ${Number(payload[2].value).toLocaleString()}`}
-          </p>
+          </Text>
         </Flex>
       </Flex>
     );
diff --git a/src/once-ui/modules/data/MultiBarGraph.tsx b/src/once-ui/modules/data/MultiBarGraph.tsx
index ee1b52db..6a6667b9 100644
--- a/src/once-ui/modules/data/MultiBarGraph.tsx
+++ b/src/once-ui/modules/data/MultiBarGraph.tsx
@@ -165,6 +165,7 @@ const MultiBarGraph: React.FC<MultiBarGraphProps> = ({
       align="center"
       direction="column"
       vertical="center"
+      data-viz="categorical"
       background={background}
       {...flexProps}
     >

From 3ec937b1f6ebc13e9328b61f826526d40754dfa8 Mon Sep 17 00:00:00 2001
From: Adhitya Nadooli <127269031+lightyfr@users.noreply.github.com>
Date: Thu, 3 Apr 2025 19:30:44 +0000
Subject: [PATCH 22/35] Refactor color tokens in LineBarGraph, LineGraph, and
 MultiBarGraph for improved consistency; update styles and add data-viz
 attributes

---
 src/once-ui/modules/data/LineBarGraph.tsx  |   5 +-
 src/once-ui/modules/data/LineGraph.tsx     |  25 ++---
 src/once-ui/modules/data/MultiBarGraph.tsx |   2 +-
 src/once-ui/tokens/data.scss               | 115 ++++++++++++++++++++-
 4 files changed, 130 insertions(+), 17 deletions(-)

diff --git a/src/once-ui/modules/data/LineBarGraph.tsx b/src/once-ui/modules/data/LineBarGraph.tsx
index f60674b2..6040050f 100644
--- a/src/once-ui/modules/data/LineBarGraph.tsx
+++ b/src/once-ui/modules/data/LineBarGraph.tsx
@@ -145,7 +145,6 @@ const LineBarGraph: React.FC<LineBarGraphProps> = ({
   title,
   description,
   lineColorVariant = "info", // Options: "info", "success", "danger", "purple"
-  barColor = "var(--success-solid-strong)",
   background,
   showArea = true,
   hideXAxisLabels = false,
@@ -226,7 +225,7 @@ const LineBarGraph: React.FC<LineBarGraphProps> = ({
                   <stop
                     key={offset}
                     offset={offset}
-                    stopColor={barColor}
+                    stopColor="var(--data-solid-100)"
                     stopOpacity={opacity}
                   />
                 ))}
@@ -300,7 +299,7 @@ const LineBarGraph: React.FC<LineBarGraphProps> = ({
               dataKey={barDataKey}
               name={barName}
               fill={`url(#${barGradientId})`}
-              stroke={barColor}
+              stroke="var(--data-solid-100)"
               strokeWidth={1}
               radius={[4, 4, 0, 0]}
               barSize={
diff --git a/src/once-ui/modules/data/LineGraph.tsx b/src/once-ui/modules/data/LineGraph.tsx
index 6a3bc9db..fdfb5301 100644
--- a/src/once-ui/modules/data/LineGraph.tsx
+++ b/src/once-ui/modules/data/LineGraph.tsx
@@ -148,13 +148,13 @@ const CustomTooltip = ({
             </Text>
         </Flex>
         <Flex padding="8" direction="column" horizontal="center" vertical="center">
-            <Text variant="label-default-s" style={{ color: "var(--success-solid-strong)" }}>
+            <Text variant="label-default-s" style={{ color: "var(--data-solid-100)" }}>
             {`${key1}: ${Number(payload[0].value).toLocaleString()}`}
             </Text>
-            <Text variant="label-default-s" style={{ color: "var(--danger-solid-strong)" }}>
+            <Text variant="label-default-s" style={{ color: "var(--data-solid-500)" }}>
             {`${key2}: ${Number(payload[1].value).toLocaleString()}`}
             </Text>
-            <Text variant="label-default-s" style={{ color: "#6c5ce7" }}>
+            <Text variant="label-default-s" style={{ color: "var(--data-solid-300)" }}>
             {`${key3}: ${Number(payload[2].value).toLocaleString()}`}
           </Text>
         </Flex>
@@ -209,6 +209,7 @@ const LineGraph: React.FC<LineGraphProps> = ({
       radius="l"
       border={border}
       align="center"
+      data-viz="categorical"
       horizontal="center"
       direction="column"
       vertical="center"
@@ -241,19 +242,19 @@ const LineGraph: React.FC<LineGraphProps> = ({
           >
             <defs>
               <linearGradient id="colorValue1" x1="0" y1="0" x2="0" y2="1">
-                <stop offset="25%" stopColor="var(--success-solid-strong)" stopOpacity={0.5} />
-                <stop offset="40%" stopColor="var(--success-solid-strong)" stopOpacity={0.4} />
-                <stop offset="95%" stopColor="var(--success-solid-strong)" stopOpacity={0.05} />
+                <stop offset="25%" stopColor="var(--data-solid-100)" stopOpacity={0.5} />
+                <stop offset="40%" stopColor="var(--data-solid-100)" stopOpacity={0.4} />
+                <stop offset="95%" stopColor="var(--data-solid-100)" stopOpacity={0.05} />
               </linearGradient>
               <linearGradient id="colorValue2" x1="0" y1="0" x2="0" y2="1">
-                <stop offset="25%" stopColor="var(--danger-solid-strong)" stopOpacity={0.5} />
-                <stop offset="40%" stopColor="var(--danger-solid-strong)" stopOpacity={0.4} />
-                <stop offset="95%" stopColor="var(--danger-solid-strong)" stopOpacity={0.05} />
+                <stop offset="25%" stopColor="var(--data-solid-500)" stopOpacity={0.5} />
+                <stop offset="40%" stopColor="var(--data-solid-500)" stopOpacity={0.4} />
+                <stop offset="95%" stopColor="var(--data-solid-500)" stopOpacity={0.05} />
               </linearGradient>
               <linearGradient id="colorValue3" x1="0" y1="0" x2="0" y2="1">
-                <stop offset="25%" stopColor="#6c5ce7" stopOpacity={0.5} />
-                <stop offset="40%" stopColor="#6c5ce7" stopOpacity={0.4} />
-                <stop offset="95%" stopColor="#6c5ce7" stopOpacity={0.05} />
+                <stop offset="25%" stopColor="var(--data-solid-300)" stopOpacity={0.5} />
+                <stop offset="40%" stopColor="var(--data-solid-300)" stopOpacity={0.4} />
+                <stop offset="95%" stopColor="var(--data-solid-300)" stopOpacity={0.05} />
               </linearGradient>
             </defs>
             <CartesianGrid
diff --git a/src/once-ui/modules/data/MultiBarGraph.tsx b/src/once-ui/modules/data/MultiBarGraph.tsx
index 6a6667b9..d09cab8c 100644
--- a/src/once-ui/modules/data/MultiBarGraph.tsx
+++ b/src/once-ui/modules/data/MultiBarGraph.tsx
@@ -155,7 +155,7 @@ const MultiBarGraph: React.FC<MultiBarGraphProps> = ({
 
 
   // Using the same colors from LineGraph
-  const barColors = ["var(--success-solid-strong)", "var(--danger-solid-strong)", "#6c5ce7"]; // green, red, purple
+  const barColors = ["var(--data-solid-100)", "var(--data-solid-500)", "var(--data-solid-300)"]; // green, red, purple
 
   return (
     <Flex
diff --git a/src/once-ui/tokens/data.scss b/src/once-ui/tokens/data.scss
index 29addc2f..edaea41d 100644
--- a/src/once-ui/tokens/data.scss
+++ b/src/once-ui/tokens/data.scss
@@ -11,7 +11,7 @@
   --data-solid-400: var(--scheme-orange-600);
   --data-alpha-400: var(--scheme-orange-600-30);
 
-  --data-solid-500: var(--scheme-red-600);
+  --data-solid-500: var(--scheme-red-500);
   --data-alpha-500: var(--scheme-red-600-30);
 
   --data-solid-600: var(--scheme-purple-600);
@@ -28,6 +28,119 @@
 }
 
 [data-theme="light"] [data-viz="categorical"] {
+  --data-solid-100: var(--scheme-green-600);
+  --data-alpha-100: var(--scheme-green-600-30);
+
+  --data-solid-200: var(--scheme-green-400);
+  --data-alpha-200: var(--scheme-green-400-30);
+
+  --data-solid-300: var(--scheme-aqua-400);
+  --data-alpha-300: var(--scheme-aqua-400-30);
+
+  --data-solid-400: var(--scheme-violet-400);
+  --data-alpha-400: var(--scheme-violet-400-30);
+
+  --data-solid-500: var(--scheme-orange-400);
+  --data-alpha-500: var(--scheme-orange-400-30);
+
+  --data-solid-600: var(--scheme-red-400);
+  --data-alpha-600: var(--scheme-red-400-30);
+
+  --data-solid-700: var(--scheme-purple-400);
+  --data-alpha-700: var(--scheme-purple-400-30);
+
+  --data-solid-800: var(--scheme-purple-400);
+  --data-alpha-800: var(--scheme-purple-400-30);
+
+  --data-solid-900: var(--scheme-purple-400);
+  --data-alpha-900: var(--scheme-purple-400-30);
+}
+
+[data-theme="dark"] [data-viz="divergent"] {
+  --data-solid-100: var(--scheme-green-700);
+  --data-alpha-100: var(--scheme-green-700-30);
+
+  --data-solid-200: var(--scheme-aqua-600);
+  --data-alpha-200: var(--scheme-aqua-600-30);
+
+  --data-solid-300: var(--scheme-violet-600);
+  --data-alpha-300: var(--scheme-violet-600-30);
+
+  --data-solid-400: var(--scheme-orange-600);
+  --data-alpha-400: var(--scheme-orange-600-30);
+
+  --data-solid-500: var(--scheme-red-700);
+  --data-alpha-500: var(--scheme-red-700-30);
+
+  --data-solid-600: var(--scheme-purple-700);
+  --data-alpha-600: var(--scheme-purple-700-30);
+
+  --data-solid-700: var(--scheme-blue-600);
+  --data-alpha-700: var(--scheme-blue-600-30);
+
+  --data-solid-800: var(--scheme-blue-600);
+  --data-alpha-800: var(--scheme-blue-600-30);
+
+  --data-solid-900: var(--scheme-blue-600);
+  --data-alpha-900: var(--scheme-blue-600-30);
+}
+
+[data-theme="light"] [data-viz="divergent"] {
+  --data-solid-200: var(--scheme-green-400);
+  --data-alpha-200: var(--scheme-green-400-30);
+
+  --data-solid-300: var(--scheme-aqua-400);
+  --data-alpha-300: var(--scheme-aqua-400-30);
+
+  --data-solid-400: var(--scheme-violet-400);
+  --data-alpha-400: var(--scheme-violet-400-30);
+
+  --data-solid-500: var(--scheme-orange-400);
+  --data-alpha-500: var(--scheme-orange-400-30);
+
+  --data-solid-600: var(--scheme-red-400);
+  --data-alpha-600: var(--scheme-red-400-30);
+
+  --data-solid-700: var(--scheme-purple-400);
+  --data-alpha-700: var(--scheme-purple-400-30);
+
+  --data-solid-800: var(--scheme-purple-400);
+  --data-alpha-800: var(--scheme-purple-400-30);
+
+  --data-solid-900: var(--scheme-purple-400);
+  --data-alpha-900: var(--scheme-purple-400-30);
+}
+
+[data-theme="dark"] [data-viz="incremental"] {
+  --data-solid-100: var(--scheme-green-600);
+  --data-alpha-100: var(--scheme-green-600-30);
+
+  --data-solid-200: var(--scheme-aqua-600);
+  --data-alpha-200: var(--scheme-aqua-600-30);
+
+  --data-solid-300: var(--scheme-violet-600);
+  --data-alpha-300: var(--scheme-violet-600-30);
+
+  --data-solid-400: var(--scheme-orange-600);
+  --data-alpha-400: var(--scheme-orange-600-30);
+
+  --data-solid-500: var(--scheme-red-600);
+  --data-alpha-500: var(--scheme-red-600-30);
+
+  --data-solid-600: var(--scheme-purple-600);
+  --data-alpha-600: var(--scheme-purple-600-30);
+
+  --data-solid-700: var(--scheme-blue-600);
+  --data-alpha-700: var(--scheme-blue-600-30);
+
+  --data-solid-800: var(--scheme-blue-600);
+  --data-alpha-800: var(--scheme-blue-600-30);
+
+  --data-solid-900: var(--scheme-blue-600);
+  --data-alpha-900: var(--scheme-blue-600-30);
+}
+
+[data-theme="light"] [data-viz="incremental"] {
   --data-solid-200: var(--scheme-green-400);
   --data-alpha-200: var(--scheme-green-400-30);
 

From 2e623fbe1905e97dcec013dd2fdc722d78d2749f Mon Sep 17 00:00:00 2001
From: Adhitya Nadooli <127269031+lightyfr@users.noreply.github.com>
Date: Thu, 3 Apr 2025 19:45:23 +0000
Subject: [PATCH 23/35] Make LineGraph use data vars for stroke color

---
 src/once-ui/modules/data/LineGraph.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/once-ui/modules/data/LineGraph.tsx b/src/once-ui/modules/data/LineGraph.tsx
index fdfb5301..ef5db7bc 100644
--- a/src/once-ui/modules/data/LineGraph.tsx
+++ b/src/once-ui/modules/data/LineGraph.tsx
@@ -272,6 +272,7 @@ const LineGraph: React.FC<LineGraphProps> = ({
                             fill: "var(--neutral-on-background-weak)",
                             fontSize: 12,
                           }}
+
                           
                           label={
                             xAxisTitle && !hideXAxisTitle && !hideAxisTitles
@@ -328,7 +329,7 @@ const LineGraph: React.FC<LineGraphProps> = ({
             <Area
               type={curveType}
               dataKey={yAxisKey1}
-              stroke="#047857"
+              stroke="var(--data-solid-100)"
               strokeWidth={1.5}
               strokeDasharray={allDashed || firstDashed ? "5 5" : "0"}
               fillOpacity={1}
@@ -338,7 +339,7 @@ const LineGraph: React.FC<LineGraphProps> = ({
               type={curveType}
               dataKey={yAxisKey2}
               strokeDasharray={allDashed || secondDashed ? "5 5" : "0"}
-              stroke="#991b1b"
+              stroke="var(--data-solid-500)"
               strokeWidth={1.5}
               fillOpacity={1}
               fill="url(#colorValue2)"
@@ -347,7 +348,7 @@ const LineGraph: React.FC<LineGraphProps> = ({
               type={curveType}
               dataKey={yAxisKey3}
               strokeDasharray={allDashed || thirdDashed ? "5 5" : "0"}
-              stroke="#6c5ce7"
+              stroke="var(--data-solid-300)"
               strokeWidth={1.5}
               fillOpacity={1}
               fill="url(#colorValue3)"

From 676cefa63ad9f0b4d6e7ab5d3c7c0b39efd5fa75 Mon Sep 17 00:00:00 2001
From: Adhitya Nadooli <127269031+lightyfr@users.noreply.github.com>
Date: Thu, 3 Apr 2025 19:53:41 +0000
Subject: [PATCH 24/35] Make PieChart use data-viz token colors

---
 src/once-ui/modules/data/PieChart.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/once-ui/modules/data/PieChart.tsx b/src/once-ui/modules/data/PieChart.tsx
index b39c2565..91ea07db 100644
--- a/src/once-ui/modules/data/PieChart.tsx
+++ b/src/once-ui/modules/data/PieChart.tsx
@@ -115,9 +115,9 @@ export const PieChart: React.FC<PieChartProps> = ({
 }) => {
   const colorMap = {
     info: "var(--info-solid-strong)",
-    success: "var(--success-solid-strong)",
-    danger: "var(--danger-solid-strong)",
-    purple: "#6c5ce7"
+    success: "var(--data-solid-100)",
+    danger: "var(--data-solid-500)",
+    purple: "var(--data-solid-300)",
   };
 
   // Generate unique IDs for each gradient
@@ -128,6 +128,7 @@ export const PieChart: React.FC<PieChartProps> = ({
   return (
     <Flex
       fill
+      data-viz="categorical"
       radius={radius}
       border={border}
       align="center"

From 4102abc7deed7966759605d30f0d6e53632e62c4 Mon Sep 17 00:00:00 2001
From: Lorant <lorant@once-ui.com>
Date: Thu, 3 Apr 2025 22:24:05 +0200
Subject: [PATCH 25/35] update colors

---
 src/app/page.tsx                       |   2 +
 src/once-ui/modules/data/LineGraph.tsx |  16 ++--
 src/once-ui/tokens/data.scss           | 128 +++++++++++++------------
 3 files changed, 77 insertions(+), 69 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 828e8460..cdcccde5 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -977,6 +977,7 @@ export default function Home() {
               <Column fillWidth>
                 <Column background="neutral-weak" fill direction="column" border="neutral-alpha-weak" radius="xl" gap="24">
                   <LineGraph
+                    data-viz="divergent"
                     title="Page Visits Per Week"
                     description="How many users visited our page"
                     border="neutral-alpha-medium"
@@ -1024,6 +1025,7 @@ export default function Home() {
               <Column fillWidth>
                 <Column background="neutral-weak" fill direction="column" border="neutral-alpha-weak" radius="xl" gap="24">
                   <LineBarGraph
+                  data-viz="divergent"
                   title="Traffic Per Weekday"
                 description="How many users we had per weekday"
                     border="neutral-alpha-medium"
diff --git a/src/once-ui/modules/data/LineGraph.tsx b/src/once-ui/modules/data/LineGraph.tsx
index ef5db7bc..91c8f41a 100644
--- a/src/once-ui/modules/data/LineGraph.tsx
+++ b/src/once-ui/modules/data/LineGraph.tsx
@@ -18,7 +18,7 @@ interface DataPoint {
   value1: number;
   value2: number;
   value3: number;
-  [key: string]: any; // Allow for flexible data structure
+  [key: string]: any;
 }
 
 interface LineGraphProps extends React.ComponentProps<typeof Flex> {
@@ -154,7 +154,7 @@ const CustomTooltip = ({
             <Text variant="label-default-s" style={{ color: "var(--data-solid-500)" }}>
             {`${key2}: ${Number(payload[1].value).toLocaleString()}`}
             </Text>
-            <Text variant="label-default-s" style={{ color: "var(--data-solid-300)" }}>
+            <Text variant="label-default-s" style={{ color: "var(--data-solid-900)" }}>
             {`${key3}: ${Number(payload[2].value).toLocaleString()}`}
           </Text>
         </Flex>
@@ -252,15 +252,15 @@ const LineGraph: React.FC<LineGraphProps> = ({
                 <stop offset="95%" stopColor="var(--data-solid-500)" stopOpacity={0.05} />
               </linearGradient>
               <linearGradient id="colorValue3" x1="0" y1="0" x2="0" y2="1">
-                <stop offset="25%" stopColor="var(--data-solid-300)" stopOpacity={0.5} />
-                <stop offset="40%" stopColor="var(--data-solid-300)" stopOpacity={0.4} />
-                <stop offset="95%" stopColor="var(--data-solid-300)" stopOpacity={0.05} />
+                <stop offset="25%" stopColor="var(--data-solid-900)" stopOpacity={0.5} />
+                <stop offset="40%" stopColor="var(--data-solid-900)" stopOpacity={0.4} />
+                <stop offset="95%" stopColor="var(--data-solid-900)" stopOpacity={0.05} />
               </linearGradient>
             </defs>
             <CartesianGrid
-              strokeDasharray="2 2"
+              strokeDasharray="4 2"
               vertical={true}
-              stroke="var(--neutral-background-strong)"
+              stroke="var(--neutral-alpha-medium)"
               horizontal={true}
             />
             <XAxis
@@ -348,7 +348,7 @@ const LineGraph: React.FC<LineGraphProps> = ({
               type={curveType}
               dataKey={yAxisKey3}
               strokeDasharray={allDashed || thirdDashed ? "5 5" : "0"}
-              stroke="var(--data-solid-300)"
+              stroke="var(--data-solid-900)"
               strokeWidth={1.5}
               fillOpacity={1}
               fill="url(#colorValue3)"
diff --git a/src/once-ui/tokens/data.scss b/src/once-ui/tokens/data.scss
index edaea41d..9062e4fe 100644
--- a/src/once-ui/tokens/data.scss
+++ b/src/once-ui/tokens/data.scss
@@ -57,111 +57,117 @@
 }
 
 [data-theme="dark"] [data-viz="divergent"] {
-  --data-solid-100: var(--scheme-green-700);
+  --data-solid-100: var(--scheme-red-500);
   --data-alpha-100: var(--scheme-green-700-30);
 
-  --data-solid-200: var(--scheme-aqua-600);
+  --data-solid-200: var(--scheme-orange-600);
   --data-alpha-200: var(--scheme-aqua-600-30);
 
-  --data-solid-300: var(--scheme-violet-600);
+  --data-solid-300: var(--scheme-yellow-700);
   --data-alpha-300: var(--scheme-violet-600-30);
 
-  --data-solid-400: var(--scheme-orange-600);
+  --data-solid-400: var(--scheme-yellow-800);
   --data-alpha-400: var(--scheme-orange-600-30);
 
-  --data-solid-500: var(--scheme-red-700);
+  --data-solid-500: var(--scheme-yellow-900);
   --data-alpha-500: var(--scheme-red-700-30);
 
-  --data-solid-600: var(--scheme-purple-700);
+  --data-solid-600: var(--scheme-moss-1000);
   --data-alpha-600: var(--scheme-purple-700-30);
 
-  --data-solid-700: var(--scheme-blue-600);
+  --data-solid-700: var(--scheme-moss-900);
   --data-alpha-700: var(--scheme-blue-600-30);
 
-  --data-solid-800: var(--scheme-blue-600);
+  --data-solid-800: var(--scheme-aqua-800);
   --data-alpha-800: var(--scheme-blue-600-30);
 
-  --data-solid-900: var(--scheme-blue-600);
+  --data-solid-900: var(--scheme-cyan-700);
   --data-alpha-900: var(--scheme-blue-600-30);
 }
 
 [data-theme="light"] [data-viz="divergent"] {
-  --data-solid-200: var(--scheme-green-400);
-  --data-alpha-200: var(--scheme-green-400-30);
+  --data-solid-100: var(--scheme-red-500);
+  --data-alpha-100: var(--scheme-green-700-30);
 
-  --data-solid-300: var(--scheme-aqua-400);
-  --data-alpha-300: var(--scheme-aqua-400-30);
+  --data-solid-200: var(--scheme-orange-600);
+  --data-alpha-200: var(--scheme-aqua-600-30);
 
-  --data-solid-400: var(--scheme-violet-400);
-  --data-alpha-400: var(--scheme-violet-400-30);
+  --data-solid-300: var(--scheme-yellow-700);
+  --data-alpha-300: var(--scheme-violet-600-30);
 
-  --data-solid-500: var(--scheme-orange-400);
-  --data-alpha-500: var(--scheme-orange-400-30);
+  --data-solid-400: var(--scheme-yellow-800);
+  --data-alpha-400: var(--scheme-orange-600-30);
 
-  --data-solid-600: var(--scheme-red-400);
-  --data-alpha-600: var(--scheme-red-400-30);
+  --data-solid-500: var(--scheme-yellow-900);
+  --data-alpha-500: var(--scheme-red-700-30);
 
-  --data-solid-700: var(--scheme-purple-400);
-  --data-alpha-700: var(--scheme-purple-400-30);
+  --data-solid-600: var(--scheme-moss-1000);
+  --data-alpha-600: var(--scheme-purple-700-30);
 
-  --data-solid-800: var(--scheme-purple-400);
-  --data-alpha-800: var(--scheme-purple-400-30);
+  --data-solid-700: var(--scheme-moss-900);
+  --data-alpha-700: var(--scheme-blue-600-30);
 
-  --data-solid-900: var(--scheme-purple-400);
-  --data-alpha-900: var(--scheme-purple-400-30);
+  --data-solid-800: var(--scheme-aqua-800);
+  --data-alpha-800: var(--scheme-blue-600-30);
+
+  --data-solid-900: var(--scheme-cyan-700);
+  --data-alpha-900: var(--scheme-blue-600-30);
 }
 
-[data-theme="dark"] [data-viz="incremental"] {
-  --data-solid-100: var(--scheme-green-600);
-  --data-alpha-100: var(--scheme-green-600-30);
+[data-theme="dark"] [data-viz="sequential"] {
+  --data-solid-100: var(--scheme-blue-100);
+  --data-alpha-100: var(--scheme-blue-100-30);
 
-  --data-solid-200: var(--scheme-aqua-600);
-  --data-alpha-200: var(--scheme-aqua-600-30);
+  --data-solid-200: var(--scheme-blue-200);
+  --data-alpha-200: var(--scheme-blue-200-30);
 
-  --data-solid-300: var(--scheme-violet-600);
-  --data-alpha-300: var(--scheme-violet-600-30);
+  --data-solid-300: var(--scheme-blue-300);
+  --data-alpha-300: var(--scheme-blue-400-30);
 
-  --data-solid-400: var(--scheme-orange-600);
-  --data-alpha-400: var(--scheme-orange-600-30);
+  --data-solid-400: var(--scheme-blue-400);
+  --data-alpha-400: var(--scheme-blue-400-30);
 
-  --data-solid-500: var(--scheme-red-600);
-  --data-alpha-500: var(--scheme-red-600-30);
+  --data-solid-500: var(--scheme-blue-500);
+  --data-alpha-500: var(--scheme-blue-400-30);
 
-  --data-solid-600: var(--scheme-purple-600);
-  --data-alpha-600: var(--scheme-purple-600-30);
+  --data-solid-600: var(--scheme-blue-600);
+  --data-alpha-600: var(--scheme-blue-400-30);
 
-  --data-solid-700: var(--scheme-blue-600);
-  --data-alpha-700: var(--scheme-blue-600-30);
+  --data-solid-700: var(--scheme-blue-700);
+  --data-alpha-700: var(--scheme-blue-400-30);
 
-  --data-solid-800: var(--scheme-blue-600);
-  --data-alpha-800: var(--scheme-blue-600-30);
+  --data-solid-800: var(--scheme-blue-800);
+  --data-alpha-800: var(--scheme-blue-400-30);
 
-  --data-solid-900: var(--scheme-blue-600);
-  --data-alpha-900: var(--scheme-blue-600-30);
+  --data-solid-900: var(--scheme-blue-900);
+  --data-alpha-900: var(--scheme-blue-400-30);
 }
 
-[data-theme="light"] [data-viz="incremental"] {
-  --data-solid-200: var(--scheme-green-400);
-  --data-alpha-200: var(--scheme-green-400-30);
+[data-theme="light"] [data-viz="sequential"] {
+  --data-solid-100: var(--scheme-blue-100);
+  --data-alpha-100: var(--scheme-blue-100-30);
 
-  --data-solid-300: var(--scheme-aqua-400);
-  --data-alpha-300: var(--scheme-aqua-400-30);
+  --data-solid-200: var(--scheme-blue-200);
+  --data-alpha-200: var(--scheme-blue-200-30);
 
-  --data-solid-400: var(--scheme-violet-400);
-  --data-alpha-400: var(--scheme-violet-400-30);
+  --data-solid-300: var(--scheme-blue-300);
+  --data-alpha-300: var(--scheme-blue-400-30);
 
-  --data-solid-500: var(--scheme-orange-400);
-  --data-alpha-500: var(--scheme-orange-400-30);
+  --data-solid-400: var(--scheme-blue-400);
+  --data-alpha-400: var(--scheme-blue-400-30);
 
-  --data-solid-600: var(--scheme-red-400);
-  --data-alpha-600: var(--scheme-red-400-30);
+  --data-solid-500: var(--scheme-blue-500);
+  --data-alpha-500: var(--scheme-blue-400-30);
 
-  --data-solid-700: var(--scheme-purple-400);
-  --data-alpha-700: var(--scheme-purple-400-30);
+  --data-solid-600: var(--scheme-blue-600);
+  --data-alpha-600: var(--scheme-blue-400-30);
 
-  --data-solid-800: var(--scheme-purple-400);
-  --data-alpha-800: var(--scheme-purple-400-30);
+  --data-solid-700: var(--scheme-blue-700);
+  --data-alpha-700: var(--scheme-blue-400-30);
 
-  --data-solid-900: var(--scheme-purple-400);
-  --data-alpha-900: var(--scheme-purple-400-30);
+  --data-solid-800: var(--scheme-blue-800);
+  --data-alpha-800: var(--scheme-blue-400-30);
+
+  --data-solid-900: var(--scheme-blue-900);
+  --data-alpha-900: var(--scheme-blue-400-30);
 }
\ No newline at end of file

From f73a23e941db9091e0e0218c80654f126954eb74 Mon Sep 17 00:00:00 2001
From: Lorant <lorant@once-ui.com>
Date: Thu, 3 Apr 2025 22:48:00 +0200
Subject: [PATCH 26/35] minor adjustments to linechart

---
 .../modules/data/LineGraph.module.scss        | 57 -------------------
 src/once-ui/modules/data/LineGraph.tsx        | 33 ++++++-----
 2 files changed, 19 insertions(+), 71 deletions(-)

diff --git a/src/once-ui/modules/data/LineGraph.module.scss b/src/once-ui/modules/data/LineGraph.module.scss
index b6492999..e69de29b 100644
--- a/src/once-ui/modules/data/LineGraph.module.scss
+++ b/src/once-ui/modules/data/LineGraph.module.scss
@@ -1,57 +0,0 @@
-.graphContainer {
-  border-radius: 12px;
-  padding: 24px;
-  width: 100%;
-  height: 100%;
-  min-height: 300px;
-  border: 1px solid rgba(255, 255, 255, 0.05);
-
-  :global(.recharts-cartesian-grid-horizontal line),
-  :global(.recharts-cartesian-grid-vertical line) {
-    stroke: var(--neutral-background-strong);
-  }
-
-  :global(.recharts-tooltip-cursor) {
-    fill: rgba(255, 255, 255, 0.02);
-  }
-
-  :global(.recharts-default-tooltip) {
-    background-color: #0f0f13 !important;
-    border: 1px solid rgba(255, 255, 255, 0.05) !important;
-    border-radius: 4px;
-    padding: 8px !important;
-    box-shadow:
-      0 4px 6px -1px rgba(0, 0, 0, 0.2),
-      0 2px 4px -1px rgba(0, 0, 0, 0.1);
-  }
-
-  :global(.recharts-surface) {
-    overflow: visible;
-  }
-
-  :global(.recharts-bar-rectangle) {
-    filter: drop-shadow(0 0 8px rgba(4, 78, 120, 0.3));
-  }
-}
-
-.tooltip {
-  border-radius: var(--radius-m);
-  text-align: center;
-  justify-content: center;
-
-  .label {
-    text-align: center;
-    padding: 5px;
-    font-size: 15px;
-    font-weight: 600;
-    color: var(--neutral-on-background-strong);
-  }
-
-  .value {
-    font-weight: 500;
-    text-align: center;
-    margin: 4px 0;
-    display: flex;
-    align-items: center;
-  }
-}
diff --git a/src/once-ui/modules/data/LineGraph.tsx b/src/once-ui/modules/data/LineGraph.tsx
index 91c8f41a..427f1c4b 100644
--- a/src/once-ui/modules/data/LineGraph.tsx
+++ b/src/once-ui/modules/data/LineGraph.tsx
@@ -134,20 +134,19 @@ const CustomTooltip = ({
 
       
     return (
-      <Flex className={styles.tooltip} background="surface" radius="l" border="neutral-alpha-medium" direction="column">
+      <Flex background="surface" radius="l" border="neutral-alpha-medium" direction="column">
         <Flex
           minWidth={8}
           borderBottom="neutral-alpha-medium"
           fillWidth
           vertical="center"
-          horizontal="center"
           padding="4"
         >
             <Text variant="label-strong-s">
                 {tooltipTitle ?? xAxisTitle}: {isTimeSeries ? moment(label).format(timeFormat) : label.toLocaleString()}
             </Text>
         </Flex>
-        <Flex padding="8" direction="column" horizontal="center" vertical="center">
+        <Flex padding="8" direction="column" vertical="center">
             <Text variant="label-default-s" style={{ color: "var(--data-solid-100)" }}>
             {`${key1}: ${Number(payload[0].value).toLocaleString()}`}
             </Text>
@@ -205,7 +204,6 @@ const LineGraph: React.FC<LineGraphProps> = ({
   return (
     <Flex
       fill
-      fillHeight
       radius="l"
       border={border}
       align="center"
@@ -234,7 +232,7 @@ const LineGraph: React.FC<LineGraphProps> = ({
               )}
               </Column>
             )}
-      <Flex fill className={styles.graph}>
+      <Flex fill>
         <ResponsiveContainer width="100%" height="100%">
           <AreaChart
             data={data}
@@ -305,6 +303,10 @@ const LineGraph: React.FC<LineGraphProps> = ({
                           }
                         />
             <Tooltip
+              cursor={{
+                stroke: "var(--neutral-border-strong)",
+                strokeWidth: 1,
+              }}
               content={
                 <CustomTooltip
                   tooltipTitle={tooltipTitle}
@@ -319,39 +321,42 @@ const LineGraph: React.FC<LineGraphProps> = ({
                   isTimeSeries={isTimeSeries}
                 />
               }
-              contentStyle={{
-                backgroundColor: "#0f0f13",
-                border: "1px solid rgba(255,255,255,0.05)",
-                borderRadius: "4px",
-                color: "rgba(255,255,255,0.7)",
-              }}
             />
             <Area
               type={curveType}
               dataKey={yAxisKey1}
               stroke="var(--data-solid-100)"
-              strokeWidth={1.5}
+              strokeWidth={1}
               strokeDasharray={allDashed || firstDashed ? "5 5" : "0"}
               fillOpacity={1}
               fill="url(#colorValue1)"
+              activeDot={{
+                stroke: "var(--static-transparent)"
+              }}
             />
             <Area
               type={curveType}
               dataKey={yAxisKey2}
               strokeDasharray={allDashed || secondDashed ? "5 5" : "0"}
               stroke="var(--data-solid-500)"
-              strokeWidth={1.5}
+              strokeWidth={1}
               fillOpacity={1}
               fill="url(#colorValue2)"
+              activeDot={{
+                stroke: "var(--static-transparent)"
+              }}
             />
             <Area
               type={curveType}
               dataKey={yAxisKey3}
               strokeDasharray={allDashed || thirdDashed ? "5 5" : "0"}
               stroke="var(--data-solid-900)"
-              strokeWidth={1.5}
+              strokeWidth={1}
               fillOpacity={1}
               fill="url(#colorValue3)"
+              activeDot={{
+                stroke: "var(--static-transparent)"
+              }}
             />
           </AreaChart>
         </ResponsiveContainer>

From 161429edd9abfa5183bfacc6c7e39669423c6099 Mon Sep 17 00:00:00 2001
From: Lorant <lorant@once-ui.com>
Date: Thu, 3 Apr 2025 22:53:46 +0200
Subject: [PATCH 27/35] more styling

---
 src/once-ui/modules/data/BarGraph.tsx      | 5 ++---
 src/once-ui/modules/data/LineBarGraph.tsx  | 5 ++---
 src/once-ui/modules/data/LineGraph.tsx     | 5 ++---
 src/once-ui/modules/data/MultiBarGraph.tsx | 5 ++---
 4 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/src/once-ui/modules/data/BarGraph.tsx b/src/once-ui/modules/data/BarGraph.tsx
index 020ab41f..ff0fd1c0 100644
--- a/src/once-ui/modules/data/BarGraph.tsx
+++ b/src/once-ui/modules/data/BarGraph.tsx
@@ -118,7 +118,7 @@ const BarGraph: React.FC<BarGraphProps> = ({
         vertical="center"
       >
         {title && (
-          <Text variant="heading-strong-m">
+          <Text variant="heading-strong-s">
             {title}
           </Text>
         )}
@@ -136,10 +136,9 @@ const BarGraph: React.FC<BarGraphProps> = ({
             barGap={4}
           >
             <CartesianGrid
-              strokeDasharray="2 2"
               horizontal={true}
               vertical={false}
-              stroke="var(--neutral-border-medium)"
+              stroke="var(--neutral-alpha-weak)"
             />
             <XAxis
               dataKey={xAxisKey}
diff --git a/src/once-ui/modules/data/LineBarGraph.tsx b/src/once-ui/modules/data/LineBarGraph.tsx
index 6040050f..ff2c7f12 100644
--- a/src/once-ui/modules/data/LineBarGraph.tsx
+++ b/src/once-ui/modules/data/LineBarGraph.tsx
@@ -194,7 +194,7 @@ const LineBarGraph: React.FC<LineBarGraphProps> = ({
   gap="4"
 >
       {title && (
-                <Text variant="heading-strong-m">
+                <Text variant="heading-strong-s">
                   {title}
                 </Text>
               )}
@@ -239,10 +239,9 @@ const LineBarGraph: React.FC<LineBarGraphProps> = ({
               </linearGradient>
             </defs>
             <CartesianGrid
-              strokeDasharray="2 2"
               horizontal={true}
               vertical={false}
-              stroke="var(--neutral-border-medium)"
+              stroke="var(--neutral-alpha-weak)"
             />
             <XAxis
               dataKey={xAxisKey}
diff --git a/src/once-ui/modules/data/LineGraph.tsx b/src/once-ui/modules/data/LineGraph.tsx
index 427f1c4b..60250318 100644
--- a/src/once-ui/modules/data/LineGraph.tsx
+++ b/src/once-ui/modules/data/LineGraph.tsx
@@ -221,7 +221,7 @@ const LineGraph: React.FC<LineGraphProps> = ({
   gap="4"
 >
       {title && (
-                <Text variant="heading-strong-m">
+                <Text variant="heading-strong-s">
                   {title}
                 </Text>
               )}
@@ -256,9 +256,8 @@ const LineGraph: React.FC<LineGraphProps> = ({
               </linearGradient>
             </defs>
             <CartesianGrid
-              strokeDasharray="4 2"
               vertical={true}
-              stroke="var(--neutral-alpha-medium)"
+              stroke="var(--neutral-alpha-weak)"
               horizontal={true}
             />
             <XAxis
diff --git a/src/once-ui/modules/data/MultiBarGraph.tsx b/src/once-ui/modules/data/MultiBarGraph.tsx
index d09cab8c..d7329830 100644
--- a/src/once-ui/modules/data/MultiBarGraph.tsx
+++ b/src/once-ui/modules/data/MultiBarGraph.tsx
@@ -176,7 +176,7 @@ const MultiBarGraph: React.FC<MultiBarGraphProps> = ({
   gap="4"
 >
       {title && (
-                <Text variant="heading-strong-m">
+                <Text variant="heading-strong-s">
                   {title}
                 </Text>
               )}
@@ -195,10 +195,9 @@ const MultiBarGraph: React.FC<MultiBarGraphProps> = ({
             barGap={4}
             >
             <CartesianGrid
-              strokeDasharray="2 2"
               horizontal={true}
               vertical={false}
-              stroke="var(--neutral-border-medium)"
+              stroke="var(--neutral-alpha-weak)"
             />
                       <XAxis
                         dataKey={xAxisKey}

From 208f68745b601c8504bde9176f0d8bb41508f16e Mon Sep 17 00:00:00 2001
From: Lorant <lorant@once-ui.com>
Date: Sun, 6 Apr 2025 23:25:25 +0200
Subject: [PATCH 28/35] refact bar + line chart style + props

---
 src/app/page.tsx                              |  45 +--
 .../data/{BarGraph.tsx => BarChart.tsx}       | 189 +++++----
 src/once-ui/modules/data/BarGraph.module.scss |   0
 ...{MultiBarGraph.tsx => GroupedBarChart.tsx} |  44 +--
 .../modules/data/LineBarGraph.module.scss     |  53 ---
 src/once-ui/modules/data/LineBarGraph.tsx     |   6 +-
 src/once-ui/modules/data/LineChart.tsx        | 269 +++++++++++++
 .../modules/data/LineGraph.module.scss        |   0
 src/once-ui/modules/data/LineGraph.tsx        | 370 ------------------
 .../modules/data/MultiBarGraph.module.scss    |  43 --
 src/once-ui/modules/data/PieChart.module.scss |  32 --
 src/once-ui/modules/data/PieChart.tsx         |   8 +-
 src/once-ui/tokens/data.scss                  | 109 +++---
 13 files changed, 469 insertions(+), 699 deletions(-)
 rename src/once-ui/modules/data/{BarGraph.tsx => BarChart.tsx} (50%)
 delete mode 100644 src/once-ui/modules/data/BarGraph.module.scss
 rename src/once-ui/modules/data/{MultiBarGraph.tsx => GroupedBarChart.tsx} (88%)
 delete mode 100644 src/once-ui/modules/data/LineBarGraph.module.scss
 create mode 100644 src/once-ui/modules/data/LineChart.tsx
 delete mode 100644 src/once-ui/modules/data/LineGraph.module.scss
 delete mode 100644 src/once-ui/modules/data/LineGraph.tsx
 delete mode 100644 src/once-ui/modules/data/MultiBarGraph.module.scss
 delete mode 100644 src/once-ui/modules/data/PieChart.module.scss

diff --git a/src/app/page.tsx b/src/app/page.tsx
index cdcccde5..f7fff53d 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -43,9 +43,9 @@ import {
 } from "@/once-ui/components";
 import { CodeBlock, MediaUpload } from "@/once-ui/modules";
 
-import { BarGraph } from "@/once-ui/modules/data/BarGraph";
-import { LineGraph } from "@/once-ui/modules/data/LineGraph";
-import { MultiBarGraph } from "@/once-ui/modules/data/MultiBarGraph";
+import { BarGraph } from "@/once-ui/modules/data/BarChart";
+import { LineChart } from "@/once-ui/modules/data/LineChart";
+import { GroupedBarChart } from "@/once-ui/modules/data/GroupedBarChart";
 import { LineBarGraph } from "@/once-ui/modules/data/LineBarGraph";
 import { PieChart } from "@/once-ui/modules/data/PieChart";
 
@@ -957,12 +957,11 @@ export default function Home() {
             <Row fill gap="32" mobileDirection="column">
               {/* Bar Graph */}
               <BarGraph
-                title="Revenue"
+                title="Company revenue in Q2 2025"
+                legend
                 description="How much dough we made"
-                border="neutral-alpha-medium"
-                tooltipTitle="Revenue"
-                xAxisTitle="Month"
-                yAxisTitle="USD"
+                tooltip="Revenue"
+                color="emerald"
                 data={[
                   { name: "Jan", value: 4500, startDate: "Jan", endDate: "January" },
                   { name: "Feb", value: 5200, startDate: "Feb", endDate: "February" },
@@ -976,24 +975,22 @@ export default function Home() {
               {/* Line Graph */}
               <Column fillWidth>
                 <Column background="neutral-weak" fill direction="column" border="neutral-alpha-weak" radius="xl" gap="24">
-                  <LineGraph
-                    data-viz="divergent"
+                  <LineChart
                     title="Page Visits Per Week"
                     description="How many users visited our page"
-                    border="neutral-alpha-medium"
                     xAxisTitle="Week"
                     yAxisTitle="Users"
-                    value1="Desktop"
-                    value2="Mobile"
-                    value3="Tablet"
+                    legend
+                    yAxisKeys={["Revenue", "Profit", "Loss"]}
+                    labels="both"
                     data={[
-                      { name: "W1", value1: 2100, value2: 1400, value3: 5500 },
-                      { name: "W2", value1: 2200, value2: 4398, value3: 3200 },
-                      { name: "W3", value1: 2000, value2: 1200, value3: 6500 },
-                      { name: "W4", value1: 3780, value2: 1108, value3: 1700 },
-                      { name: "W5", value1: 5990, value2: 1800, value3: 2100 },
-                      { name: "W6", value1: 4000, value2: 2400, value3: 3000 },
-                      { name: "W7", value1: 5000, value2: 3000, value3: 4000 },
+                      { name: "W1", Revenue: 2100, Profit: 1400, Loss: 5500 },
+                      { name: "W2", Revenue: 2200, Profit: 4398, Loss: 3200 },
+                      { name: "W3", Revenue: 2000, Profit: 1200, Loss: 6500 },
+                      { name: "W4", Revenue: 3780, Profit: 1108, Loss: 1700 },
+                      { name: "W5", Revenue: 5990, Profit: 1800, Loss: 2100 },
+                      { name: "W6", Revenue: 4000, Profit: 2400, Loss: 3000 },
+                      { name: "W7", Revenue: 5000, Profit: 3000, Loss: 4000 },
                     ]}
                   />
                 </Column>
@@ -1004,7 +1001,7 @@ export default function Home() {
               {/* Multi Bar Graph */}
               <Column fillWidth>
                 <Column background="neutral-weak" fill direction="column" border="neutral-alpha-weak" radius="xl" gap="24">
-                  <MultiBarGraph
+                  <GroupedBarChart
                   border="neutral-alpha-medium"
                   title="Quarterly Revenue"
                 description="How much dough we made per quarter in 2023 and 2024"
@@ -1025,10 +1022,8 @@ export default function Home() {
               <Column fillWidth>
                 <Column background="neutral-weak" fill direction="column" border="neutral-alpha-weak" radius="xl" gap="24">
                   <LineBarGraph
-                  data-viz="divergent"
                   title="Traffic Per Weekday"
-                description="How many users we had per weekday"
-                    border="neutral-alpha-medium"
+                  description="How many users we had per weekday"
                     lineColorVariant="info"
                     showArea={true}
                     xAxisTitle="Day"
diff --git a/src/once-ui/modules/data/BarGraph.tsx b/src/once-ui/modules/data/BarChart.tsx
similarity index 50%
rename from src/once-ui/modules/data/BarGraph.tsx
rename to src/once-ui/modules/data/BarChart.tsx
index ff0fd1c0..99ea941c 100644
--- a/src/once-ui/modules/data/BarGraph.tsx
+++ b/src/once-ui/modules/data/BarChart.tsx
@@ -7,9 +7,10 @@ import {
   ResponsiveContainer,
   CartesianGrid,
   Tooltip,
+  Legend,
 } from "recharts";
 
-import { SpacingToken } from "../../types";
+import { TShirtSizes } from "../../types";
 import { Text, Flex, Column } from "../../components";
 
 interface DataPoint {
@@ -20,27 +21,18 @@ interface DataPoint {
   color?: string;
 }
 
-type BarColor = "success" | "danger" | "purple";
-
-interface BarGraphProps extends React.ComponentProps<typeof Flex> {
+interface BarChartProps extends React.ComponentProps<typeof Flex> {
   data: DataPoint[];
   xAxisKey?: string;
   yAxisKey?: string;
-  barColor?: BarColor;
-  barWidth?: SpacingToken | "fill" | number | string;
-  blur?: boolean;
+  barWidth?: TShirtSizes | "fill";
   title?: string;
   description?: string;
-  tooltipTitle?: string;
-  hideXAxisLabels?: boolean;
-  hideYAxisLabels?: boolean;
-  hideLabels?: boolean;
+  legend?: boolean;
+  tooltip?: string;
   xAxisTitle?: string;
   yAxisTitle?: string;
-  hideXAxisTitle?: boolean;
-  hideYAxisTitle?: boolean;
-  hideAxisTitles?: boolean;
-  xAxisHeight?: number;
+  labels?: "x" | "y" | "both";
 }
 
 const CustomTooltip = ({ active, payload, tooltipTitle, xAxisTitle }: any) => {
@@ -49,27 +41,33 @@ const CustomTooltip = ({ active, payload, tooltipTitle, xAxisTitle }: any) => {
     return (
       <Column
         minWidth={8}
+        gap="4"
         background="surface"
         radius="m"
         border="neutral-alpha-medium">
         <Flex
-          borderBottom="neutral-alpha-medium"
           fillWidth
-          paddingY="8"
+          paddingTop="8"
           paddingX="12"
         >
           <Text
-            variant="label-strong-s"
+            variant="label-default-s"
             onBackground="neutral-strong"
           >
             {xAxisTitle && `${xAxisTitle}: `}{data.endDate}
           </Text>
         </Flex>
         <Flex
-          paddingY="8"
-          paddingX="12">
+          fillWidth
+          horizontal="space-between"
+          paddingBottom="8"
+          paddingX="12"
+          gap="8">
+          <Text onBackground="neutral-weak" variant="label-default-s">
+            {tooltipTitle && `${tooltipTitle} `}
+          </Text>
           <Text onBackground="neutral-strong" variant="label-default-s">
-            {tooltipTitle && `${tooltipTitle}: `}{data.value.toLocaleString()}
+            {data.value.toLocaleString()}
           </Text>
         </Flex>
       </Column>
@@ -78,26 +76,52 @@ const CustomTooltip = ({ active, payload, tooltipTitle, xAxisTitle }: any) => {
   return null;
 };
 
-const BarGraph: React.FC<BarGraphProps> = ({
+const CustomLegend = ({ payload, labels, color }: any) => {
+  if (payload && payload.length) {
+    return (
+      <Flex 
+        horizontal="start" 
+        vertical="center" 
+        position="absolute"
+        left={(labels === "x" || labels === "both") ? "8" : "80"}
+        top="12"
+      >
+        {payload.map((entry: any, index: number) => (
+          <Flex key={index} vertical="center" gap="8">
+            <Flex
+              style={{
+                backgroundClip: "padding-box",
+                border: `1px solid var(--data-${color})`,
+                background: `linear-gradient(to bottom, var(--data-${color}) 0%, transparent 100%)`
+              }}
+              minWidth="16"
+              minHeight="16"
+              border="neutral-alpha-medium"
+              radius="s"
+            />
+            <Text variant="label-default-s">
+              {entry.value}
+            </Text>
+          </Flex>
+        ))}
+      </Flex>
+    );
+  }
+  return null;
+};
+
+const BarGraph: React.FC<BarChartProps> = ({
   data,
   xAxisKey = "name",
   yAxisKey = "value",
-  barColor = "success",
   barWidth = "fill",
-  blur = false,
-  border = "neutral-alpha-weak",
+  border = "neutral-medium",
+  color = "blue",
+  legend = false,
   title,
   description,
-  tooltipTitle,
-  hideXAxisLabels = false,
-  hideYAxisLabels = false,
-  hideLabels = false,
-  xAxisTitle,
-  yAxisTitle,
-  hideXAxisTitle = false,
-  hideYAxisTitle = false,
-  hideAxisTitles = false,
-  xAxisHeight = 10,
+  tooltip,
+  labels = "both",
   ...flex
 }) => {
   return (
@@ -132,68 +156,67 @@ const BarGraph: React.FC<BarGraphProps> = ({
         <ResponsiveContainer width="100%" height="100%">
           <BarChart
             data={data}
-            margin={{ left: 0, bottom: 0 }}
-            barGap={4}
+            margin={{ left: 0, right: 0, bottom: 0 }}
           >
             <CartesianGrid
               horizontal={true}
               vertical={false}
               stroke="var(--neutral-alpha-weak)"
             />
-            <XAxis
-              dataKey={xAxisKey}
-              axisLine={false}
-              tickLine={false}
-              height={hideXAxisLabels || hideLabels ? 0 : 50}
-              tick={hideXAxisLabels || hideLabels ? false : {
-                fill: "var(--neutral-on-background-weak)",
-                fontSize: 12,
-              }}
-              
-              label={
-                xAxisTitle && !hideXAxisTitle && !hideAxisTitles
-                  ? { value: xAxisTitle, fontWeight: "500", position: 'bottom', offset: -23, fill: "var(--neutral-on-background-medium)" }
-                  : undefined
-              }
-            />
-            <YAxis
-              allowDataOverflow
-              axisLine={{
-                stroke: "var(--neutral-alpha-medium)",
-              }}
-              tickLine={false}
-              padding={{ top: 40 }}
-              tick={{
-                fill: "var(--neutral-on-background-weak)",
-                fontSize: 12,
-               }}
-              width={yAxisTitle ? 64 : 0}
-              label={
-                yAxisTitle && !hideYAxisTitle && !hideAxisTitles
-                  ? { 
-                      value: yAxisTitle,
-                      position: 'insideTop',
-                      offset: 10,
-                      fontSize: 12,
-                      fill: "var(--neutral-on-background-medium)" 
-                    }
-                  : undefined
-              }
-            />
+            {legend && (
+              <Legend
+                content={<CustomLegend color={color} />}
+                wrapperStyle={{
+                  position: 'absolute',
+                  top: 0,
+                  right: 0,
+                  margin: 0
+                }}
+              />
+            )}
+            {labels === "x" || labels === "both" && (
+              <XAxis
+                dataKey={xAxisKey}
+                axisLine={{
+                  stroke: "var(--neutral-alpha-weak)",
+                }}
+                tickLine={false}
+                height={32}
+                tick={{
+                  fill: "var(--neutral-on-background-weak)",
+                  fontSize: 12,
+                }}
+              />
+            )}
+            {labels === "y" || labels === "both" && (
+              <YAxis
+                allowDataOverflow
+                axisLine={{
+                  stroke: "var(--neutral-alpha-weak)",
+                }}
+                tickLine={false}
+                padding={{ top: 40 }}
+                tick={{
+                  fill: "var(--neutral-on-background-weak)",
+                  fontSize: 12,
+                }}
+                width={64}
+              />
+            )}
             <Tooltip
-              content={<CustomTooltip tooltipTitle={tooltipTitle} xAxisTitle={xAxisTitle} />}
-              cursor={{ fill: "rgba(255,255,255,0.05)" }}
+              content={<CustomTooltip tooltipTitle={tooltip} />}
+              cursor={{ fill: "var(--neutral-alpha-weak)" }}
             />
             <defs>
               <linearGradient id="barGradient" x1="0" y1="0" x2="0" y2="1">
                 {[
-                  { offset: "0%", opacity: 0.6 },
+                  { offset: "0%", opacity: 0.8 },
                   { offset: "100%", opacity: 0 },
                 ].map(({ offset, opacity }) => (
                   <stop
                     key={offset}
                     offset={offset}
-                    stopColor="var(--data-solid-100)"
+                    stopColor={`var(--data-${color})`}
                     stopOpacity={opacity}
                   />
                 ))}
@@ -202,7 +225,7 @@ const BarGraph: React.FC<BarGraphProps> = ({
             <Bar
               dataKey={yAxisKey}
               fill="url(#barGradient)"
-              stroke="var(--data-solid-100)"
+              stroke={`var(--data-${color})`}
               strokeWidth={1}
               barSize={
               barWidth === "fill"
@@ -231,4 +254,4 @@ const BarGraph: React.FC<BarGraphProps> = ({
 BarGraph.displayName = "BarGraph";
 
 export { BarGraph };
-export type { BarGraphProps };
+export type { BarChartProps };
diff --git a/src/once-ui/modules/data/BarGraph.module.scss b/src/once-ui/modules/data/BarGraph.module.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/once-ui/modules/data/MultiBarGraph.tsx b/src/once-ui/modules/data/GroupedBarChart.tsx
similarity index 88%
rename from src/once-ui/modules/data/MultiBarGraph.tsx
rename to src/once-ui/modules/data/GroupedBarChart.tsx
index d7329830..829346e1 100644
--- a/src/once-ui/modules/data/MultiBarGraph.tsx
+++ b/src/once-ui/modules/data/GroupedBarChart.tsx
@@ -13,8 +13,6 @@ import moment from "moment";
 
 import { SpacingToken } from "../../types";
 
-
-import styles from "./MultiBarGraph.module.scss";
 import { Text, Flex, Heading, Column } from "../../components";
 
 // Data structure supporting multiple values
@@ -27,7 +25,7 @@ interface MultiBarDataPoint {
   endDate?: string;
 }
 
-interface MultiBarGraphProps extends React.ComponentProps<typeof Flex> {
+interface GroupedBarChartProps extends React.ComponentProps<typeof Flex> {
   data: MultiBarDataPoint[];
   xAxisKey?: string;
   yAxisKeys?: string[]; // Keys for multiple bars
@@ -92,7 +90,7 @@ const CustomTooltip = ({ active, payload, tooltipTitle, barLabels, isTimeSeries,
   if (active && payload && payload.length) {
     const data = payload[0].payload;
     return (
-      <Flex className={styles.tooltip} minWidth={8} background="surface" border="neutral-alpha-medium" direction="column">
+      <Flex minWidth={8} background="surface" border="neutral-alpha-medium" direction="column">
         <Flex
           borderBottom="neutral-alpha-medium"
           fillWidth
@@ -128,7 +126,7 @@ const CustomTooltip = ({ active, payload, tooltipTitle, barLabels, isTimeSeries,
   return null;
 };
 
-const MultiBarGraph: React.FC<MultiBarGraphProps> = ({
+const GroupedBarChart: React.FC<GroupedBarChartProps> = ({
   data,
   xAxisKey = "name",
   yAxisKeys = ["value1", "value2", "value3"],
@@ -249,7 +247,6 @@ const MultiBarGraph: React.FC<MultiBarGraphProps> = ({
                 />
               }
               cursor={{ fill: "rgba(255,255,255,0.05)" }}
-              wrapperClassName={styles.tooltipWrapper}
             />
 
             {/* Define gradients for each bar color */}
@@ -264,9 +261,6 @@ const MultiBarGraph: React.FC<MultiBarGraphProps> = ({
                   y2="1"
                 >
                   <stop offset="5%" stopColor={color} stopOpacity={0.8} />
-                  <stop offset="35%" stopColor={color} stopOpacity={0.6} />
-                  <stop offset="70%" stopColor={color} stopOpacity={0.3} />
-                  <stop offset="95%" stopColor={color} stopOpacity={0.1} />
                   <stop offset="100%" stopColor={color} stopOpacity={0} />
                 </linearGradient>
               ))}
@@ -284,19 +278,19 @@ const MultiBarGraph: React.FC<MultiBarGraphProps> = ({
                 radius={[6, 6, 0, 0]}
                 barSize={
                   barWidth === "fill"
-                    ? "98%"
-                    : barWidth === "xs"
-                    ? 6
-                    : barWidth === "s"
-                    ? 12
-                    : barWidth === "m"
-                    ? 20
-                    : barWidth === "l"
-                    ? 40
-                    : barWidth === "xl"
-                    ? 50
-                    : barWidth
-                  }
+                  ? "100%"
+                  : barWidth === "xs"
+                  ? 12
+                  : barWidth === "s"
+                  ? 16
+                  : barWidth === "m"
+                  ? 24
+                  : barWidth === "l"
+                  ? 40
+                  : barWidth === "xl"
+                  ? 64
+                  : barWidth
+                }
                 isAnimationActive={false}
               />
             ))}
@@ -307,7 +301,7 @@ const MultiBarGraph: React.FC<MultiBarGraphProps> = ({
   );
 };
 
-MultiBarGraph.displayName = "MultiBarGraph";
+GroupedBarChart.displayName = "GroupedBarChart";
 
-export { MultiBarGraph };
-export type { MultiBarGraphProps };
\ No newline at end of file
+export { GroupedBarChart };
+export type { GroupedBarChartProps };
\ No newline at end of file
diff --git a/src/once-ui/modules/data/LineBarGraph.module.scss b/src/once-ui/modules/data/LineBarGraph.module.scss
deleted file mode 100644
index 29ff0a3e..00000000
--- a/src/once-ui/modules/data/LineBarGraph.module.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-.graphContainer {
-  width: 100%;
-  height: 100%;
-  min-height: 200px;
-  border-radius: 12px;
-  padding: 24px;
-
-  :global(.recharts-bar-rectangle) {
-    filter: drop-shadow(0 0 8px rgba(4, 78, 120, 0.3));
-  }
-  
-  :global(.recharts-dot) {
-    filter: drop-shadow(0 0 4px rgba(78, 114, 238, 0.6));
-  }
-}
-
-.blur {
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-}
-
-.tooltip {
-  backdrop-filter: blur(12px);
-  border: 1px solid var(--neutral-alpha-medium);
-  border-radius: var(--radius-m);
-  text-align: center;
-  justify-content: center;
-  align-items: center;
-  backdrop-filter: blur(12px);
-
-  .label {
-    text-align: center;
-    font-size: 15px;
-    font-weight: 600;
-    color: var(--neutral-on-background-strong);
-  }
-
-  .value {
-    font-weight: 500;
-    text-align: center;
-    margin: 4px 0;
-    display: flex;
-    align-items: center;
-  }
-}
-
-.tooltipWrapper {
-  background-color: var(--neutral-background-strong);
-  border: 1px solid var(--neutral-border-medium);
-  border-radius: var(--radius-s);
-  color: var(--neutral-on-background-medium);
-  padding: 8px;
-}
\ No newline at end of file
diff --git a/src/once-ui/modules/data/LineBarGraph.tsx b/src/once-ui/modules/data/LineBarGraph.tsx
index ff2c7f12..24c31510 100644
--- a/src/once-ui/modules/data/LineBarGraph.tsx
+++ b/src/once-ui/modules/data/LineBarGraph.tsx
@@ -12,7 +12,6 @@ import {
   Legend,
   Area,
 } from "recharts";
-import styles from "./LineBarGraph.module.scss";
 import { Flex, Column, Text } from "../../components";
 import { SpacingToken } from "../../types";
 
@@ -105,7 +104,7 @@ interface LineBarGraphProps extends React.ComponentProps<typeof Flex> {
 const CustomTooltip = ({ active, payload, label, isTimeSeries, timeFormat }: any) => {
   if (active && payload && payload.length) {
     return (
-      <Flex className={styles.tooltip} minWidth={8} background="surface" border="neutral-alpha-medium" direction="column">
+      <Flex minWidth={8} background="surface" border="neutral-alpha-medium" direction="column">
         <Flex
           borderBottom="neutral-alpha-medium"
           fillWidth
@@ -193,7 +192,7 @@ const LineBarGraph: React.FC<LineBarGraphProps> = ({
   paddingY="12"
   gap="4"
 >
-      {title && (
+      {(title || description) && (
                 <Text variant="heading-strong-s">
                   {title}
                 </Text>
@@ -286,7 +285,6 @@ const LineBarGraph: React.FC<LineBarGraphProps> = ({
             <Tooltip
               content={<CustomTooltip isTimeSeries={isTimeSeries} timeFormat={timeFormat} />}
               cursor={{ fill: "rgba(255,255,255,0.05)" }}
-              wrapperClassName={styles.tooltipWrapper}
             />
             {showLegend && (
               <Legend
diff --git a/src/once-ui/modules/data/LineChart.tsx b/src/once-ui/modules/data/LineChart.tsx
new file mode 100644
index 00000000..4dab3d44
--- /dev/null
+++ b/src/once-ui/modules/data/LineChart.tsx
@@ -0,0 +1,269 @@
+import React from "react";
+import moment from 'moment'
+import {
+  AreaChart,
+  Area,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  Legend,
+} from "recharts";
+import { Flex, Column, Text, Row } from "../../components";
+
+interface DataPoint {
+  name: string | number | Date;
+  [key: string]: any;
+}
+
+interface LineChartProps extends React.ComponentProps<typeof Flex> {
+  data: DataPoint[];
+  xAxisKey?: string;
+  yAxisKeys?: string[];
+  colors?: string[];
+  title?: string;
+  description?: string;
+  legend?: boolean;
+  tooltip?: string;
+  xAxisTitle?: string;
+  yAxisTitle?: string;
+  labels?: "x" | "y" | "both";
+  curveType?: "linear" | "monotone" | "monotoneX" | "step" | "natural";
+  isTimeSeries?: boolean;
+  timeFormat?: string;
+}
+
+const defaultColors = ['blue', 'green', 'aqua', 'violet', 'orange', 'red', 'purple', 'magenta', 'moss', 'emerald'];
+
+const CustomTooltip = ({ active, payload, label, isTimeSeries, timeFormat = "MMM dd, yyyy" }: any) => {
+  if (active && payload && payload.length) {
+    return (
+      <Column
+        minWidth={8}
+        gap="8"
+        background="surface"
+        radius="m"
+        border="neutral-alpha-medium">
+        <Flex
+          fillWidth
+          paddingTop="8"
+          paddingX="12"
+        >
+          <Text
+            variant="label-default-s"
+            onBackground="neutral-strong"
+          >
+            {isTimeSeries ? moment(label).format(timeFormat) : label}
+          </Text>
+        </Flex>
+        <Column
+          fillWidth
+          horizontal="space-between"
+          paddingBottom="8"
+          paddingX="12"
+          gap="4">
+          {payload.map((entry: any, index: number) => (
+            <Row key={index} horizontal="space-between" fillWidth gap="16">
+              <Row vertical="center" gap="8">
+                <Flex
+                  style={{
+                    backgroundClip: "padding-box",
+                    border: `1px solid ${entry.stroke}`,
+                    background: `linear-gradient(to bottom, ${entry.stroke} 0%, transparent 100%)`
+                  }}
+                  minWidth="12"
+                  minHeight="12"
+                  radius="xs"
+                />
+                <Text onBackground="neutral-weak" variant="label-default-s">
+                  {entry.name}
+                </Text>
+              </Row>
+              <Text onBackground="neutral-strong" variant="label-default-s">
+                {entry.value.toLocaleString()}
+              </Text>
+            </Row>
+          ))}
+        </Column>
+      </Column>
+    );
+  }
+  return null;
+};
+
+const CustomLegend = ({ payload, labels, colors = defaultColors }: any) => {
+  if (payload && payload.length) {
+    return (
+      <Flex 
+        horizontal="start" 
+        vertical="center" 
+        position="absolute"
+        gap="16"
+        left={(labels === "x" || labels === "both") ? "80" : "8"}
+        top="12"
+      >
+        {payload.map((entry: any, index: number) => (
+          <Flex key={index} vertical="center" gap="8">
+            <Flex
+              style={{
+                backgroundClip: "padding-box",
+                border: `1px solid var(--data-${colors[index]})`,
+                background: `linear-gradient(to bottom, var(--data-${colors[index]}) 0%, transparent 100%)`
+              }}
+              minWidth="16"
+              minHeight="16"
+              radius="s"
+            />
+            <Text variant="label-default-s">
+              {entry.value}
+            </Text>
+          </Flex>
+        ))}
+      </Flex>
+    );
+  }
+  return null;
+};
+
+const LineChart: React.FC<LineChartProps> = ({
+  data,
+  xAxisKey = "name",
+  xAxisTitle = "",
+  yAxisTitle = "",
+  yAxisKeys = ["value"],
+  colors = defaultColors,
+  border = "neutral-medium",
+  legend = false,
+  title,
+  description,
+  tooltip,
+  labels = "both",
+  curveType = "natural",
+  isTimeSeries = false,
+  timeFormat = "MMM dd, yyyy",
+  ...flex
+}) => {
+  return (
+    <Flex
+      fill
+      radius="l"
+      border={border}
+      align="center"
+      data-viz="categorical"
+      horizontal="center"
+      direction="column"
+      vertical="center"
+      {...flex}
+    >
+      {title && (
+        <Column fillWidth borderBottom={border} horizontal="start" paddingX="20" paddingY="12" gap="4">
+          <Text variant="heading-strong-s">
+            {title}
+          </Text>
+          {description && (
+            <Text variant="label-default-s" onBackground="neutral-weak">
+              {description}
+            </Text>
+          )}
+        </Column>
+      )}
+      <Flex fill>
+        <ResponsiveContainer width="100%" height="100%">
+          <AreaChart
+            data={data}
+            margin={{ left: 0, bottom: 0, top: 0, right: 0 }}
+          >
+            <defs>
+              {yAxisKeys.map((key, index) => (
+                <linearGradient key={key} id={`color${key}`} x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="0%" stopColor={`var(--data-${colors[index]})`} stopOpacity={0.8} />
+                  <stop offset="100%" stopColor={`var(--data-${colors[index]})`} stopOpacity={0} />
+                </linearGradient>
+              ))}
+            </defs>
+            <CartesianGrid
+              vertical={true}
+              stroke="var(--neutral-alpha-weak)"
+              horizontal={true}
+            />
+            {legend && (
+              <Legend
+                content={<CustomLegend colors={colors} labels={labels} />}
+                wrapperStyle={{
+                  position: 'absolute',
+                  top: 0,
+                  right: 0,
+                  margin: 0
+                }}
+              />
+            )}
+            {(labels === "x" || labels === "both") && (
+              <XAxis
+                tickMargin={6}
+                dataKey={xAxisKey}
+                axisLine={{
+                  stroke: "var(--neutral-alpha-weak)",
+                }}
+                tickLine={false}
+                height={32}
+                tick={{
+                  fill: "var(--neutral-on-background-weak)",
+                  fontSize: 11,
+                }}
+              />
+            )}
+            {(labels === "y" || labels === "both") && (
+              <YAxis
+                allowDataOverflow
+                axisLine={{
+                  stroke: "var(--neutral-alpha-weak)",
+                }}
+                tickLine={false}
+                padding={{ top: 40 }}
+                tick={{
+                  fill: "var(--neutral-on-background-weak)",
+                  fontSize: 11,
+                }}
+                width={64}
+              />
+            )}
+            <Tooltip
+              cursor={{
+                stroke: "var(--neutral-border-strong)",
+                strokeWidth: 1,
+              }}
+              content={
+                <CustomTooltip
+                  tooltip={tooltip}
+                  isTimeSeries={isTimeSeries}
+                  timeFormat={timeFormat}
+                />
+              }
+            />
+            {yAxisKeys.map((key, index) => (
+              <Area
+                key={key}
+                type={curveType}
+                dataKey={key}
+                name={key}
+                stroke={`var(--data-${colors[index]})`}
+                strokeWidth={1}
+                fillOpacity={1}
+                fill={`url(#color${key})`}
+                activeDot={{
+                  stroke: "var(--static-transparent)"
+                }}
+              />
+            ))}
+          </AreaChart>
+        </ResponsiveContainer>
+      </Flex>
+    </Flex>
+  );
+};
+
+LineChart.displayName = "LineChart";
+
+export { LineChart };
+export type { LineChartProps };
diff --git a/src/once-ui/modules/data/LineGraph.module.scss b/src/once-ui/modules/data/LineGraph.module.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/once-ui/modules/data/LineGraph.tsx b/src/once-ui/modules/data/LineGraph.tsx
deleted file mode 100644
index 60250318..00000000
--- a/src/once-ui/modules/data/LineGraph.tsx
+++ /dev/null
@@ -1,370 +0,0 @@
-import React from "react";
-import moment from 'moment'
-import {
-  AreaChart,
-  Area,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  ResponsiveContainer,
-  TooltipProps,
-} from "recharts";
-import styles from "./LineGraph.module.scss";
-import { Flex, Column, Text } from "../../components";
-
-interface DataPoint {
-  name: string | number | Date;
-  value1: number;
-  value2: number;
-  value3: number;
-  [key: string]: any;
-}
-
-interface LineGraphProps extends React.ComponentProps<typeof Flex> {
-  data: DataPoint[];
-  xAxisTitle?: string;
-  yAxisTitle?: string;
-  xAxisKey?: string;
-  yAxisKey1?: string;
-  yAxisKey2?: string;
-  yAxisKey3?: string;
-  /**
-   * Size of the line graph.
-   * @default "m"
-   */
-  blur?: boolean;
-  title?: string;
-  description?: string;
-  tooltipTitle?: string;
-  value1?: string;
-  value2?: string;
-  value3?: string;
-  /**
-   * Hide X-axis labels when true
-   * @default false
-   */
-  hideXAxisLabels?: boolean;
-  /**
-   * Hide Y-axis labels when true
-   * @default false
-   */
-  hideYAxisLabels?: boolean;
-  /**
-   * Hide both X and Y axis labels when true
-   * @default false
-   */
-  hideLabels?: boolean;
-
-  /**
-   * Hide Y-axis title when true
-   * @default false
-   */
-  hideYAxisTitle?: boolean;
-  /**
-   * Hide X-axis title when true
-   * @default false
-   */
-  hideXAxisTitle?: boolean;
-  /**
-   * Hide both X and Y axis titles when true
-   * @default false
-   */
-  hideAxisTitles?: boolean;
-  firstDashed?: boolean,
-
-  secondDashed?: boolean,
-
- thirdDashed?: boolean,
-
-  allDashed?: boolean,
-
-  fixedYRange?: [number, number]; // [min, max] for y-axis
-  
-  /**
-   * Whether the X axis contains date/time values
-   * @default false
-   */
-  isTimeAxis?: boolean;
-  
-  /**
-  
-  /**
-   * Format for displaying times in tooltip and axis (when time is present)
-   * @default "HH:mm"
-   */
-  timeFormat?: string;
-   
-  isTimeSeries?: boolean; // Whether the X axis contains date/time values
-
-  curveType?: "linear" | "monotone" | "monotoneX" | "step" | "natural" ; // Type of curve for the line
-}
-
-interface CustomTooltipProps extends TooltipProps<number, string> {
-  tooltipTitle?: string;
-  key1?: string;
-  key2?: string;
-  key3?: string;
-  yAxisKey1?: string;
-  yAxisKey2?: string;
-  yAxisKey3?: string;
-  xAxisTitle?: string;
-  isTimeSeries?: boolean;
-  timeFormat?: string;
-}
-
-
-
-const CustomTooltip = ({
-  active,
-  payload,
-  tooltipTitle,
-  label,
-  key1,
-  key2,
-  key3,
-  yAxisKey1 = "value1",
-  yAxisKey2 = "value2",
-  yAxisKey3 = "value3",
-  xAxisTitle = "",
-  isTimeSeries = false,
-  timeFormat = "MMM dd, yyyy",
-}: CustomTooltipProps) => {
-  if (active && payload && payload.length) {
-
-      
-    return (
-      <Flex background="surface" radius="l" border="neutral-alpha-medium" direction="column">
-        <Flex
-          minWidth={8}
-          borderBottom="neutral-alpha-medium"
-          fillWidth
-          vertical="center"
-          padding="4"
-        >
-            <Text variant="label-strong-s">
-                {tooltipTitle ?? xAxisTitle}: {isTimeSeries ? moment(label).format(timeFormat) : label.toLocaleString()}
-            </Text>
-        </Flex>
-        <Flex padding="8" direction="column" vertical="center">
-            <Text variant="label-default-s" style={{ color: "var(--data-solid-100)" }}>
-            {`${key1}: ${Number(payload[0].value).toLocaleString()}`}
-            </Text>
-            <Text variant="label-default-s" style={{ color: "var(--data-solid-500)" }}>
-            {`${key2}: ${Number(payload[1].value).toLocaleString()}`}
-            </Text>
-            <Text variant="label-default-s" style={{ color: "var(--data-solid-900)" }}>
-            {`${key3}: ${Number(payload[2].value).toLocaleString()}`}
-          </Text>
-        </Flex>
-      </Flex>
-    );
-  }
-  return null;
-};
-
-const LineGraph: React.FC<LineGraphProps> = ({
-  data,
-  xAxisKey = "name",
-  yAxisKey1 = "value1",
-  yAxisKey2 = "value2",
-  yAxisKey3 = "value3",
-  hideYAxisTitle = false,
-  hideAxisTitles = false,
-  yAxisTitle,
-  xAxisTitle,
-  hideXAxisTitle = false,
-  blur = false,
-  border,
-  title,
-  description,
-  value1,
-  value2,
-  value3,
-  tooltipTitle,
-  background,
-  firstDashed = false,
-  secondDashed = false,
-  thirdDashed = false,
-  allDashed = false,
-  hideXAxisLabels = false,
-  hideYAxisLabels = false,
-  hideLabels = false,
-  fixedYRange,
-  isTimeAxis = false,
-  timeFormat = "MMM dd, yyyy",
-  isTimeSeries = false,
-  curveType = "linear",
-  ...flexProps
-}) => {
-  
-
-
-
-  return (
-    <Flex
-      fill
-      radius="l"
-      border={border}
-      align="center"
-      data-viz="categorical"
-      horizontal="center"
-      direction="column"
-      vertical="center"
-      background={background}
-      className={blur ? styles.blur : undefined}
-      {...flexProps}
-    >
-      {title && (
-  <Column fillWidth borderBottom={border} horizontal="start" paddingX="20"
-  paddingY="12"
-  gap="4"
->
-      {title && (
-                <Text variant="heading-strong-s">
-                  {title}
-                </Text>
-              )}
-              {description && (
-                <Text variant="label-default-s" onBackground="neutral-weak">
-                  {description}
-                </Text>
-              )}
-              </Column>
-            )}
-      <Flex fill>
-        <ResponsiveContainer width="100%" height="100%">
-          <AreaChart
-            data={data}
-            margin={{ left: 0, bottom: 0, top: 0, right: 0 }}
-          >
-            <defs>
-              <linearGradient id="colorValue1" x1="0" y1="0" x2="0" y2="1">
-                <stop offset="25%" stopColor="var(--data-solid-100)" stopOpacity={0.5} />
-                <stop offset="40%" stopColor="var(--data-solid-100)" stopOpacity={0.4} />
-                <stop offset="95%" stopColor="var(--data-solid-100)" stopOpacity={0.05} />
-              </linearGradient>
-              <linearGradient id="colorValue2" x1="0" y1="0" x2="0" y2="1">
-                <stop offset="25%" stopColor="var(--data-solid-500)" stopOpacity={0.5} />
-                <stop offset="40%" stopColor="var(--data-solid-500)" stopOpacity={0.4} />
-                <stop offset="95%" stopColor="var(--data-solid-500)" stopOpacity={0.05} />
-              </linearGradient>
-              <linearGradient id="colorValue3" x1="0" y1="0" x2="0" y2="1">
-                <stop offset="25%" stopColor="var(--data-solid-900)" stopOpacity={0.5} />
-                <stop offset="40%" stopColor="var(--data-solid-900)" stopOpacity={0.4} />
-                <stop offset="95%" stopColor="var(--data-solid-900)" stopOpacity={0.05} />
-              </linearGradient>
-            </defs>
-            <CartesianGrid
-              vertical={true}
-              stroke="var(--neutral-alpha-weak)"
-              horizontal={true}
-            />
-            <XAxis
-                          dataKey={xAxisKey}
-                          axisLine={false}
-                          tickLine={false}
-                          height={hideXAxisLabels || hideLabels ? 0 : 50}
-                          tick={hideXAxisLabels || hideLabels ? false : {
-                            fill: "var(--neutral-on-background-weak)",
-                            fontSize: 12,
-                          }}
-
-                          
-                          label={
-                            xAxisTitle && !hideXAxisTitle && !hideAxisTitles
-                              ? { value: xAxisTitle, fontWeight: "500", position: 'bottom', offset: -23, fill: "var(--neutral-on-background-medium)" }
-                              : undefined
-                          }
-                        />
-                        <YAxis
-                          allowDataOverflow
-                          axisLine={{
-                            stroke: "var(--neutral-alpha-medium)",
-                          }}
-                          tickLine={false}
-                          padding={{ top: 40 }}
-                          tick={{
-                            fill: "var(--neutral-on-background-weak)",
-                            fontSize: 12,
-                           }}
-                          width={yAxisTitle ? 54 : 0}
-                          label={
-                            yAxisTitle && !hideYAxisTitle && !hideAxisTitles
-                              ? { 
-                                  value: yAxisTitle,
-                                  position: 'insideTop',
-                                  offset: 10,
-                                  fontSize: 12,
-                                  fill: "var(--neutral-on-background-medium)" 
-                                }
-                              : undefined
-                          }
-                        />
-            <Tooltip
-              cursor={{
-                stroke: "var(--neutral-border-strong)",
-                strokeWidth: 1,
-              }}
-              content={
-                <CustomTooltip
-                  tooltipTitle={tooltipTitle}
-                  key1={value1}
-                  key2={value2}
-                  key3={value3}
-                  yAxisKey1={yAxisKey1}
-                  yAxisKey2={yAxisKey2}
-                  yAxisKey3={yAxisKey3}
-                  xAxisTitle={xAxisTitle}
-                  timeFormat={timeFormat}
-                  isTimeSeries={isTimeSeries}
-                />
-              }
-            />
-            <Area
-              type={curveType}
-              dataKey={yAxisKey1}
-              stroke="var(--data-solid-100)"
-              strokeWidth={1}
-              strokeDasharray={allDashed || firstDashed ? "5 5" : "0"}
-              fillOpacity={1}
-              fill="url(#colorValue1)"
-              activeDot={{
-                stroke: "var(--static-transparent)"
-              }}
-            />
-            <Area
-              type={curveType}
-              dataKey={yAxisKey2}
-              strokeDasharray={allDashed || secondDashed ? "5 5" : "0"}
-              stroke="var(--data-solid-500)"
-              strokeWidth={1}
-              fillOpacity={1}
-              fill="url(#colorValue2)"
-              activeDot={{
-                stroke: "var(--static-transparent)"
-              }}
-            />
-            <Area
-              type={curveType}
-              dataKey={yAxisKey3}
-              strokeDasharray={allDashed || thirdDashed ? "5 5" : "0"}
-              stroke="var(--data-solid-900)"
-              strokeWidth={1}
-              fillOpacity={1}
-              fill="url(#colorValue3)"
-              activeDot={{
-                stroke: "var(--static-transparent)"
-              }}
-            />
-          </AreaChart>
-        </ResponsiveContainer>
-      </Flex>
-    </Flex>
-  );
-};
-
-LineGraph.displayName = "LineGraph";
-
-export { LineGraph };
-export type { LineGraphProps };
diff --git a/src/once-ui/modules/data/MultiBarGraph.module.scss b/src/once-ui/modules/data/MultiBarGraph.module.scss
deleted file mode 100644
index 0bb73fe6..00000000
--- a/src/once-ui/modules/data/MultiBarGraph.module.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-.graphContainer {
-    border-radius: 12px;
-    padding: 24px;
-    width: 100%;
-    height: 100%;
-    min-height: 300px;
-    border: 1px solid rgba(255, 255, 255, 0.05);
-  
-    :global(.recharts-cartesian-grid-horizontal line),
-    :global(.recharts-cartesian-grid-vertical line) {
-      stroke: var(--neutral-background-strong);
-    }
-  
-    :global(.recharts-tooltip-cursor) {
-      fill: rgba(255, 255, 255, 0.02);
-    }
-  
-    :global(.recharts-default-tooltip) {
-      background-color: #0f0f13 !important;
-      border: 1px solid rgba(255, 255, 255, 0.05) !important;
-      border-radius: 4px;
-      padding: 8px !important;
-      box-shadow:
-        0 4px 6px -1px rgba(0, 0, 0, 0.2),
-        0 2px 4px -1px rgba(0, 0, 0, 0.1);
-    }
-  
-    :global(.recharts-surface) {
-      overflow: visible;
-    }
-  
-    :global(.recharts-bar-rectangle) {
-      filter: drop-shadow(0 0 8px rgba(4, 78, 120, 0.3));
-    }
-  }
-  
-  .tooltip {
-    border-radius: var(--radius-m);
-    text-align: center;
-    justify-content: center;
-  
-  }
-  
\ No newline at end of file
diff --git a/src/once-ui/modules/data/PieChart.module.scss b/src/once-ui/modules/data/PieChart.module.scss
deleted file mode 100644
index 7d97d415..00000000
--- a/src/once-ui/modules/data/PieChart.module.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-.tooltip {
-    border-radius: var(--radius-m);
-    text-align: center;
-    justify-content: center;
-    box-shadow:
-      0 4px 6px -1px rgba(0, 0, 0, 0.2),
-      0 2px 4px -1px rgba(0, 0, 0, 0.1);
-  
-    .label {
-      text-align: center;
-      padding: 5px;
-      font-size: 15px;
-      font-weight: 600;
-      color: var(--neutral-on-background-strong);
-    }
-  
-    .value {
-      font-weight: 500;
-      text-align: center;
-      margin: 4px 0;
-      display: flex;
-      align-items: center;
-    }
-  }
-  
-  .tooltipWrapper {
-    outline: none;
-  }
-  
-  .blur {
-    backdrop-filter: blur(8px);
-  }
\ No newline at end of file
diff --git a/src/once-ui/modules/data/PieChart.tsx b/src/once-ui/modules/data/PieChart.tsx
index 91ea07db..cd625335 100644
--- a/src/once-ui/modules/data/PieChart.tsx
+++ b/src/once-ui/modules/data/PieChart.tsx
@@ -7,7 +7,6 @@ import {
   ResponsiveContainer,
   Legend,
 } from "recharts";
-import styles from "./PieChart.module.scss";
 import { Flex, Heading } from "../../components";
 
 interface DataPoint {
@@ -73,18 +72,17 @@ interface PieChartProps extends React.ComponentProps<typeof Flex> {
 const CustomTooltip = ({ active, payload }: any) => {
   if (active && payload && payload.length) {
     return (
-      <Flex className={styles.tooltip} minWidth={8} background="surface" border="neutral-alpha-medium" direction="column">
+      <Flex minWidth={8} background="surface" border="neutral-alpha-medium" direction="column">
         <Flex
           borderBottom="neutral-alpha-medium"
           fillWidth
           horizontal="center"
           padding="8"
         >
-          <p className={styles.label}>{payload[0].name}</p>
+          <p>{payload[0].name}</p>
         </Flex>
         <Flex padding="s" direction="column">
           <p
-            className={styles.value}
             style={{ color: payload[0].fill }}
           >
             {`Value: ${payload[0].value}`}
@@ -135,7 +133,6 @@ export const PieChart: React.FC<PieChartProps> = ({
       direction="column"
       vertical="center"
       background={background}
-      className={blur ? styles.blur : undefined}
       {...flexProps}
     >
       {title && (
@@ -198,7 +195,6 @@ export const PieChart: React.FC<PieChartProps> = ({
             </Pie>
             <Tooltip 
               content={<CustomTooltip />}
-              wrapperClassName={styles.tooltipWrapper}
             />
             {showLegend && (
               <Legend
diff --git a/src/once-ui/tokens/data.scss b/src/once-ui/tokens/data.scss
index 9062e4fe..84362bbe 100644
--- a/src/once-ui/tokens/data.scss
+++ b/src/once-ui/tokens/data.scss
@@ -1,117 +1,110 @@
 [data-theme="dark"] [data-viz="categorical"] {
-  --data-solid-100: var(--scheme-green-600);
-  --data-alpha-100: var(--scheme-green-600-30);
+  --data-blue: var(--scheme-blue-500);
 
-  --data-solid-200: var(--scheme-aqua-600);
-  --data-alpha-200: var(--scheme-aqua-600-30);
+  --data-green: var(--scheme-green-500);
 
-  --data-solid-300: var(--scheme-violet-600);
-  --data-alpha-300: var(--scheme-violet-600-30);
+  --data-aqua: var(--scheme-aqua-500);
 
-  --data-solid-400: var(--scheme-orange-600);
-  --data-alpha-400: var(--scheme-orange-600-30);
+  --data-violet: var(--scheme-violet-500);
 
-  --data-solid-500: var(--scheme-red-500);
-  --data-alpha-500: var(--scheme-red-600-30);
+  --data-orange: var(--scheme-orange-500);
 
-  --data-solid-600: var(--scheme-purple-600);
-  --data-alpha-600: var(--scheme-purple-600-30);
+  --data-red: var(--scheme-red-500);
 
-  --data-solid-700: var(--scheme-blue-600);
-  --data-alpha-700: var(--scheme-blue-600-30);
+  --data-purple: var(--scheme-purple-500);
 
-  --data-solid-800: var(--scheme-blue-600);
-  --data-alpha-800: var(--scheme-blue-600-30);
+  --data-magenta: var(--scheme-magenta-500);
 
-  --data-solid-900: var(--scheme-blue-600);
-  --data-alpha-900: var(--scheme-blue-600-30);
+  --data-moss: var(--scheme-moss-500);
+
+  --data-emerald: var(--scheme-emerald-500);
 }
 
 [data-theme="light"] [data-viz="categorical"] {
-  --data-solid-100: var(--scheme-green-600);
-  --data-alpha-100: var(--scheme-green-600-30);
+  --data-green: var(--scheme-green-400);
+  --data-green-alpha: var(--scheme-green-500-30);
 
-  --data-solid-200: var(--scheme-green-400);
-  --data-alpha-200: var(--scheme-green-400-30);
+  --data-aqua: var(--scheme-aqua-400);
+  --data-aqua-alpha: var(--scheme-aqua-500-30);
 
-  --data-solid-300: var(--scheme-aqua-400);
-  --data-alpha-300: var(--scheme-aqua-400-30);
+  --data-violet: var(--scheme-violet-400);
+  --data-violet-alpha: var(--scheme-violet-500-30);
 
-  --data-solid-400: var(--scheme-violet-400);
-  --data-alpha-400: var(--scheme-violet-400-30);
+  --data-orange: var(--scheme-orange-400);
+  --data-orange-alpha: var(--scheme-orange-500-30);
 
-  --data-solid-500: var(--scheme-orange-400);
-  --data-alpha-500: var(--scheme-orange-400-30);
+  --data-red: var(--scheme-red-400);
+  --data-red-alpha: var(--scheme-red-500-30);
 
-  --data-solid-600: var(--scheme-red-400);
-  --data-alpha-600: var(--scheme-red-400-30);
+  --data-purple: var(--scheme-purple-400);
+  --data-purple-alpha: var(--scheme-purple-500-30);
 
-  --data-solid-700: var(--scheme-purple-400);
-  --data-alpha-700: var(--scheme-purple-400-30);
+  --data-magenta: var(--scheme-magenta-400);
+  --data-magenta-alpha: var(--scheme-magenta-500-30);
 
-  --data-solid-800: var(--scheme-purple-400);
-  --data-alpha-800: var(--scheme-purple-400-30);
+  --data-moss: var(--scheme-moss-400);
+  --data-moss-alpha: var(--scheme-moss-500-30);
 
-  --data-solid-900: var(--scheme-purple-400);
-  --data-alpha-900: var(--scheme-purple-400-30);
+  --data-emerald: var(--scheme-emerald-400);
+  --data-emerald-alpha: var(--scheme-emerald-500-30);
 }
 
 [data-theme="dark"] [data-viz="divergent"] {
   --data-solid-100: var(--scheme-red-500);
   --data-alpha-100: var(--scheme-green-700-30);
 
-  --data-solid-200: var(--scheme-orange-600);
-  --data-alpha-200: var(--scheme-aqua-600-30);
+  --data-solid-200: var(--scheme-orange-500);
+  --data-alpha-200: var(--scheme-aqua-500-30);
 
   --data-solid-300: var(--scheme-yellow-700);
-  --data-alpha-300: var(--scheme-violet-600-30);
+  --data-alpha-300: var(--scheme-violet-500-30);
 
   --data-solid-400: var(--scheme-yellow-800);
-  --data-alpha-400: var(--scheme-orange-600-30);
+  --data-alpha-400: var(--scheme-orange-500-30);
 
   --data-solid-500: var(--scheme-yellow-900);
   --data-alpha-500: var(--scheme-red-700-30);
 
-  --data-solid-600: var(--scheme-moss-1000);
-  --data-alpha-600: var(--scheme-purple-700-30);
+  --data-solid-500: var(--scheme-moss-1000);
+  --data-alpha-500: var(--scheme-purple-700-30);
 
   --data-solid-700: var(--scheme-moss-900);
-  --data-alpha-700: var(--scheme-blue-600-30);
+  --data-alpha-700: var(--scheme-blue-500-30);
 
   --data-solid-800: var(--scheme-aqua-800);
-  --data-alpha-800: var(--scheme-blue-600-30);
+  --data-alpha-800: var(--scheme-blue-500-30);
 
   --data-solid-900: var(--scheme-cyan-700);
-  --data-alpha-900: var(--scheme-blue-600-30);
+  --data-alpha-900: var(--scheme-blue-500-30);
 }
 
 [data-theme="light"] [data-viz="divergent"] {
   --data-solid-100: var(--scheme-red-500);
   --data-alpha-100: var(--scheme-green-700-30);
 
-  --data-solid-200: var(--scheme-orange-600);
-  --data-alpha-200: var(--scheme-aqua-600-30);
+  --data-solid-200: var(--scheme-orange-500);
+  --data-alpha-200: var(--scheme-aqua-500-30);
 
   --data-solid-300: var(--scheme-yellow-700);
-  --data-alpha-300: var(--scheme-violet-600-30);
+  --data-alpha-300: var(--scheme-violet-500-30);
 
   --data-solid-400: var(--scheme-yellow-800);
-  --data-alpha-400: var(--scheme-orange-600-30);
+  --data-alpha-400: var(--scheme-orange-500-30);
 
   --data-solid-500: var(--scheme-yellow-900);
   --data-alpha-500: var(--scheme-red-700-30);
 
-  --data-solid-600: var(--scheme-moss-1000);
-  --data-alpha-600: var(--scheme-purple-700-30);
+  --data-solid-500: var(--scheme-moss-1000);
+  --data-alpha-500: var(--scheme-purple-700-30);
 
   --data-solid-700: var(--scheme-moss-900);
-  --data-alpha-700: var(--scheme-blue-600-30);
+  --data-alpha-700: var(--scheme-blue-500-30);
 
   --data-solid-800: var(--scheme-aqua-800);
-  --data-alpha-800: var(--scheme-blue-600-30);
+  --data-alpha-800: var(--scheme-blue-500-30);
 
   --data-solid-900: var(--scheme-cyan-700);
-  --data-alpha-900: var(--scheme-blue-600-30);
+  --data-alpha-900: var(--scheme-blue-500-30);
 }
 
 [data-theme="dark"] [data-viz="sequential"] {
@@ -130,8 +123,8 @@
   --data-solid-500: var(--scheme-blue-500);
   --data-alpha-500: var(--scheme-blue-400-30);
 
-  --data-solid-600: var(--scheme-blue-600);
-  --data-alpha-600: var(--scheme-blue-400-30);
+  --data-solid-500: var(--scheme-blue-500);
+  --data-alpha-500: var(--scheme-blue-400-30);
 
   --data-solid-700: var(--scheme-blue-700);
   --data-alpha-700: var(--scheme-blue-400-30);
@@ -159,8 +152,8 @@
   --data-solid-500: var(--scheme-blue-500);
   --data-alpha-500: var(--scheme-blue-400-30);
 
-  --data-solid-600: var(--scheme-blue-600);
-  --data-alpha-600: var(--scheme-blue-400-30);
+  --data-solid-500: var(--scheme-blue-500);
+  --data-alpha-500: var(--scheme-blue-400-30);
 
   --data-solid-700: var(--scheme-blue-700);
   --data-alpha-700: var(--scheme-blue-400-30);

From fe8cda820c1a839ced1195be81a240043aa770ec Mon Sep 17 00:00:00 2001
From: Lorant <lorant@once-ui.com>
Date: Mon, 7 Apr 2025 12:54:45 +0200
Subject: [PATCH 29/35] soimplify key handling in LineChart

---
 src/app/page.tsx                       | 24 ++++++------
 src/once-ui/modules/data/LineChart.tsx | 51 ++++++++++++++++----------
 2 files changed, 44 insertions(+), 31 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index f7fff53d..e548caa1 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -978,19 +978,21 @@ export default function Home() {
                   <LineChart
                     title="Page Visits Per Week"
                     description="How many users visited our page"
-                    xAxisTitle="Week"
-                    yAxisTitle="Users"
                     legend
-                    yAxisKeys={["Revenue", "Profit", "Loss"]}
-                    labels="both"
+                    labels="x"
+                    series={[
+                      { key: "Revenue", color: "emerald" },
+                      { key: "Profit", color: "violet" },
+                      { key: "Loss", color: "blue" }
+                    ]}
                     data={[
-                      { name: "W1", Revenue: 2100, Profit: 1400, Loss: 5500 },
-                      { name: "W2", Revenue: 2200, Profit: 4398, Loss: 3200 },
-                      { name: "W3", Revenue: 2000, Profit: 1200, Loss: 6500 },
-                      { name: "W4", Revenue: 3780, Profit: 1108, Loss: 1700 },
-                      { name: "W5", Revenue: 5990, Profit: 1800, Loss: 2100 },
-                      { name: "W6", Revenue: 4000, Profit: 2400, Loss: 3000 },
-                      { name: "W7", Revenue: 5000, Profit: 3000, Loss: 4000 },
+                      { week: "W1", Revenue: 2100, Profit: 1400, Loss: 5500 },
+                      { week: "W2", Revenue: 2200, Profit: 4398, Loss: 3200 },
+                      { week: "W3", Revenue: 2000, Profit: 1200, Loss: 6500 },
+                      { week: "W4", Revenue: 3780, Profit: 1108, Loss: 1700 },
+                      { week: "W5", Revenue: 5990, Profit: 1800, Loss: 2100 },
+                      { week: "W6", Revenue: 4000, Profit: 2400, Loss: 3000 },
+                      { week: "W7", Revenue: 5000, Profit: 3000, Loss: 4000 },
                     ]}
                   />
                 </Column>
diff --git a/src/once-ui/modules/data/LineChart.tsx b/src/once-ui/modules/data/LineChart.tsx
index 4dab3d44..8d55cb08 100644
--- a/src/once-ui/modules/data/LineChart.tsx
+++ b/src/once-ui/modules/data/LineChart.tsx
@@ -13,21 +13,22 @@ import {
 import { Flex, Column, Text, Row } from "../../components";
 
 interface DataPoint {
-  name: string | number | Date;
-  [key: string]: any;
+  [key: string]: string | number | Date;
+}
+
+interface SeriesConfig {
+  key: string;
+  color?: string;
 }
 
 interface LineChartProps extends React.ComponentProps<typeof Flex> {
   data: DataPoint[];
-  xAxisKey?: string;
-  yAxisKeys?: string[];
+  series: SeriesConfig[];
   colors?: string[];
   title?: string;
   description?: string;
   legend?: boolean;
   tooltip?: string;
-  xAxisTitle?: string;
-  yAxisTitle?: string;
   labels?: "x" | "y" | "both";
   curveType?: "linear" | "monotone" | "monotoneX" | "step" | "natural";
   isTimeSeries?: boolean;
@@ -100,7 +101,7 @@ const CustomLegend = ({ payload, labels, colors = defaultColors }: any) => {
         vertical="center" 
         position="absolute"
         gap="16"
-        left={(labels === "x" || labels === "both") ? "80" : "8"}
+        left={(labels === "y" || labels === "both") ? "80" : "12"}
         top="12"
       >
         {payload.map((entry: any, index: number) => (
@@ -128,22 +129,32 @@ const CustomLegend = ({ payload, labels, colors = defaultColors }: any) => {
 
 const LineChart: React.FC<LineChartProps> = ({
   data,
-  xAxisKey = "name",
-  xAxisTitle = "",
-  yAxisTitle = "",
-  yAxisKeys = ["value"],
+  series,
   colors = defaultColors,
   border = "neutral-medium",
-  legend = false,
   title,
   description,
+  legend = false,
   tooltip,
   labels = "both",
   curveType = "natural",
   isTimeSeries = false,
-  timeFormat = "MMM dd, yyyy",
+  timeFormat,
   ...flex
 }) => {
+  // Auto-detect series from first data point if not provided
+  const seriesKeys = series.map(s => s.key);
+  const autoSeries = series || Object.keys(data[0] || {})
+    .filter(key => !seriesKeys.includes(key))
+    .map((key, index) => ({
+      key,
+      color: colors[index]
+    }));
+
+  const xAxisKey = Object.keys(data[0] || {}).find(key => 
+    !seriesKeys.includes(key)
+  ) || 'name';
+  
   return (
     <Flex
       fill
@@ -175,10 +186,10 @@ const LineChart: React.FC<LineChartProps> = ({
             margin={{ left: 0, bottom: 0, top: 0, right: 0 }}
           >
             <defs>
-              {yAxisKeys.map((key, index) => (
-                <linearGradient key={key} id={`color${key}`} x1="0" y1="0" x2="0" y2="1">
-                  <stop offset="0%" stopColor={`var(--data-${colors[index]})`} stopOpacity={0.8} />
-                  <stop offset="100%" stopColor={`var(--data-${colors[index]})`} stopOpacity={0} />
+              {autoSeries.map(({ key, color }) => (
+                <linearGradient key={key} id={`color-${key}`} x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="0%" stopColor={`var(--data-${color})`} stopOpacity={0.8} />
+                  <stop offset="100%" stopColor={`var(--data-${color})`} stopOpacity={0} />
                 </linearGradient>
               ))}
             </defs>
@@ -241,19 +252,19 @@ const LineChart: React.FC<LineChartProps> = ({
                 />
               }
             />
-            {yAxisKeys.map((key, index) => (
+            {autoSeries.map(({ key, color }) => (
               <Area
                 key={key}
                 type={curveType}
                 dataKey={key}
                 name={key}
-                stroke={`var(--data-${colors[index]})`}
+                stroke={`var(--data-${color})`}
                 strokeWidth={1}
                 fillOpacity={1}
-                fill={`url(#color${key})`}
                 activeDot={{
                   stroke: "var(--static-transparent)"
                 }}
+                fill={`url(#color-${key})`}
               />
             ))}
           </AreaChart>

From 1e5af67f478dd05d2837a8628e5566c69d5d2fd7 Mon Sep 17 00:00:00 2001
From: Adhitya Nadooli <127269031+lightyfr@users.noreply.github.com>
Date: Wed, 9 Apr 2025 18:35:48 +0000
Subject: [PATCH 30/35] refactor linebargraph to align to new chart styles

---
 src/app/page.tsx                          |   5 +-
 src/once-ui/modules/data/LineBarGraph.tsx | 385 +++++++++++-----------
 2 files changed, 189 insertions(+), 201 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index e548caa1..6301f767 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1006,7 +1006,7 @@ export default function Home() {
                   <GroupedBarChart
                   border="neutral-alpha-medium"
                   title="Quarterly Revenue"
-                description="How much dough we made per quarter in 2023 and 2024"
+                  description="How much dough we made per quarter in 2023 and 2024"
                     data={[
                       { name: "Q1", value1: 35000, value2: 45000, value3: 30000 },
                       { name: "Q2", value1: 42000, value2: 48000, value3: 36000 },
@@ -1026,8 +1026,9 @@ export default function Home() {
                   <LineBarGraph
                   title="Traffic Per Weekday"
                   description="How many users we had per weekday"
-                    lineColorVariant="info"
                     showArea={true}
+                    legend
+                    labels="both"
                     xAxisTitle="Day"
                     yAxisTitle="Count"
                     lineName="Traffic"
diff --git a/src/once-ui/modules/data/LineBarGraph.tsx b/src/once-ui/modules/data/LineBarGraph.tsx
index 24c31510..59743855 100644
--- a/src/once-ui/modules/data/LineBarGraph.tsx
+++ b/src/once-ui/modules/data/LineBarGraph.tsx
@@ -12,15 +12,11 @@ import {
   Legend,
   Area,
 } from "recharts";
-import { Flex, Column, Text } from "../../components";
+import { Flex, Column, Text, Row } from "../../components";
 import { SpacingToken } from "../../types";
 
-
 interface DataPoint {
-  name: string;
-  lineValue: number;
-  barValue: number;
-  [key: string]: any; // Allow for additional properties
+  [key: string]: string | number | Date;
 }
 
 interface LineBarGraphProps extends React.ComponentProps<typeof Flex> {
@@ -30,100 +26,111 @@ interface LineBarGraphProps extends React.ComponentProps<typeof Flex> {
   barDataKey?: string;
   lineName?: string;
   barName?: string;
-  /**
-   * Size of the graph.
-   * @default "m"
-   */
-  barWidth?: SpacingToken | "fill" | number | string;
-  blur?: boolean;
-  title?: string;
   lineColor?: string;
-  lineColorVariant?: "info" | "success" | "danger" | "purple"; // Add color variant prop
   barColor?: string;
-  /**
-   * Show area under the line
-   * @default true
-   */
+  barWidth?: SpacingToken | "fill" | number;
   showArea?: boolean;
-  /**
-   * Hide X-axis labels when true
-   * @default false
-   */
-  hideXAxisLabels?: boolean;
-
+  labels?: "x" | "y" | "both" | "none";
+  title?: string;
+  description?: string;
+  legend?: boolean;
   dashedLine?: boolean;
-  /**
-   * Hide Y-axis labels when true
-   * @default false
-   */
-  hideYAxisLabels?: boolean;
-  /**
-   * Hide both X and Y axis labels when true
-   * @default false
-   */
-  hideLabels?: boolean;
-  /**
-   * Title for X-axis
-   */
+  curveType?: "linear" | "monotone" | "monotoneX" | "step" | "natural";
+  isTimeSeries?: boolean;
+  timeFormat?: string;
   xAxisTitle?: string;
-  /**
-   * Title for Y-axis
-   */
   yAxisTitle?: string;
-  /**
-   * Hide X-axis title
-   * @default false
-   */
-  hideXAxisTitle?: boolean;
-  /**
-   * Hide Y-axis title
-   * @default false
-   */
-  hideYAxisTitle?: boolean;
-  /**
-   * Hide both X and Y axis titles
-   * @default false
-   */
-  hideAxisTitles?: boolean;
-  /**
-   * Hide legend
-   * @default false
-   */
-  showLegend?: boolean;
-
-  timeFormat?: string; // Format for date display
-
-  isTimeSeries?: boolean; // Whether the X axis contains date/time values
-
-  curveType?: "linear" | "monotone" | "monotoneX" | "step" | "natural" ; // Type of curve for the line
-
-  description?: string;
 }
 
+const defaultColors = {
+  line: "blue",
+  bar: "green"
+};
 
-const CustomTooltip = ({ active, payload, label, isTimeSeries, timeFormat }: any) => {
+const CustomTooltip = ({ active, payload, label, isTimeSeries, timeFormat = "MMM DD, YYYY" }: any) => {
   if (active && payload && payload.length) {
     return (
-      <Flex minWidth={8} background="surface" border="neutral-alpha-medium" direction="column">
+      <Column
+        minWidth={8}
+        gap="8"
+        background="surface"
+        radius="m"
+        border="neutral-alpha-medium">
         <Flex
-          borderBottom="neutral-alpha-medium"
           fillWidth
-          horizontal="center"
-          padding="8"
+          paddingTop="8"
+          paddingX="12"
         >
-          <Text variant="label-strong-s">{isTimeSeries ? moment(label).format(timeFormat) : label.toLocaleString()}</Text>
+          <Text
+            variant="label-default-s"
+            onBackground="neutral-strong"
+          >
+            {isTimeSeries ? moment(label).format(timeFormat) : label}
+          </Text>
         </Flex>
-        <Flex padding="8" direction="column">
+        <Column
+          fillWidth
+          horizontal="space-between"
+          paddingBottom="8"
+          paddingX="12"
+          gap="4">
           {payload.map((entry: any, index: number) => (
-            <Text
-             variant="label-default-s"
-              key={`item-${index}`}
-              style={{ color: entry.color }}
-            >
-              {`${entry.name.toLocaleString()}: ${entry.value.toLocaleString()}`}
-            </Text>
+            <Row key={index} horizontal="space-between" fillWidth gap="16">
+              <Row vertical="center" gap="8">
+                <Flex
+                  style={{
+                    backgroundClip: "padding-box",
+                    border: `1px solid ${entry.stroke || entry.color}`,
+                    background: `linear-gradient(to bottom, ${entry.stroke || entry.color} 0%, transparent 100%)`
+                  }}
+                  minWidth="12"
+                  minHeight="12"
+                  radius="xs"
+                />
+                <Text onBackground="neutral-weak" variant="label-default-s">
+                  {entry.name}
+                </Text>
+              </Row>
+              <Text onBackground="neutral-strong" variant="label-default-s">
+                {typeof entry.value === 'number' ? entry.value.toLocaleString() : entry.value}
+              </Text>
+            </Row>
           ))}
-        </Flex>
+        </Column>
+      </Column>
+    );
+  }
+  return null;
+};
+
+const CustomLegend = ({ payload, labels }: any) => {
+  if (payload && payload.length) {
+    return (
+      <Flex 
+      horizontal="start" 
+      vertical="center" 
+      position="absolute"
+      gap="16"
+      left={(labels === "y" || labels === "both") ? "80" : "12"}
+      top="12"
+      >
+        {payload.map((entry: any, index: number) => (
+          <Flex key={index} vertical="center" gap="8">
+            <Flex
+              style={{
+                backgroundClip: "padding-box",
+                border: `1px solid ${entry.stroke || entry.color}`,
+                background: `linear-gradient(to bottom, ${entry.stroke || entry.color} 0%, transparent 100%)`
+              }}
+              minWidth="16"
+              minHeight="16"
+              radius="s"
+            />
+            <Text variant="label-default-s">
+              {entry.value}
+            </Text>
+          </Flex>
+        ))}
       </Flex>
     );
   }
@@ -137,73 +144,56 @@ const LineBarGraph: React.FC<LineBarGraphProps> = ({
   barDataKey = "barValue",
   lineName = "Line",
   barName = "Bar",
+  lineColor = defaultColors.line,
+  barColor = defaultColors.bar,
   barWidth = "fill",
-  blur = false,
+  showArea = true,
   dashedLine = false,
-  border,
+  labels = "both",
+  border = "neutral-medium",
   title,
   description,
-  lineColorVariant = "info", // Options: "info", "success", "danger", "purple"
-  background,
-  showArea = true,
-  hideXAxisLabels = false,
-  hideYAxisLabels = false,
-  hideLabels = false,
+  legend = false,
+  curveType = "monotone",
+  isTimeSeries = false,
+  timeFormat = "YYYY-MM-DD",
   xAxisTitle,
   yAxisTitle,
-  hideXAxisTitle = false,
-  hideYAxisTitle = false,
-  hideAxisTitles = false,
-  timeFormat = "YYYY-MM-DD",
-  isTimeSeries = false,
-  showLegend = false,
-  curveType = "monotone", // Default curve type
   ...flexProps
 }) => {
- 
-
-  // Generate a unique ID for each gradient
-  const lineGradientId = `colorLine-${Math.random().toString(36).substring(2, 9)}`;
-  const barGradientId = `barGradient-${Math.random().toString(36).substring(2, 9)}`;
-
-  const colorMap = {
-    info: "var(--info-solid-strong)",
-    success: "var(--success-solid-strong)",
-    danger: "var(--danger-solid-strong)",
-    purple: "#6c5ce7"
-  };
+  // Generate unique IDs for gradients
+  const lineGradientId = `colorLine-${React.useId()}`;
+  const barGradientId = `barGradient-${React.useId()}`;
 
-  // Use the variant to determine the color
-  const finalLineColor = lineColorVariant ? colorMap[lineColorVariant] : "var(--info-solid-strong)";
+  // Get the final colors with CSS variables
+  const finalLineColor = `var(--data-${lineColor})`;
+  const finalBarColor = `var(--data-${barColor})`;
 
   return (
     <Flex
-    direction="column"
-    fillHeight
-    fillWidth
-    height={24}
-    border={border}
-    radius="l"
-    data-viz="categorical"
+      direction="column"
+      fillHeight
+      fillWidth
+      height={24}
+      border={border}
+      radius="l"
+      data-viz="categorical"
       {...flexProps}
     >
-      {title && (
-  <Column fillWidth borderBottom={border} horizontal="start" paddingX="20"
-  paddingY="12"
-  gap="4"
->
       {(title || description) && (
-                <Text variant="heading-strong-s">
-                  {title}
-                </Text>
-              )}
-              {description && (
-                <Text variant="label-default-s" onBackground="neutral-weak">
-                  {description}
-                </Text>
-              )}
-              </Column>
-            )}
+        <Column fillWidth borderBottom={border} horizontal="start" paddingX="20" paddingY="12" gap="4">
+          {title && (
+            <Text variant="heading-strong-s">
+              {title}
+            </Text>
+          )}
+          {description && (
+            <Text variant="label-default-s" onBackground="neutral-weak">
+              {description}
+            </Text>
+          )}
+        </Column>
+      )}
       <Flex fill>
         <ResponsiveContainer width="100%" height="100%">
           <ComposedChart
@@ -214,26 +204,14 @@ const LineBarGraph: React.FC<LineBarGraphProps> = ({
             <defs>
               {/* Bar gradient */}
               <linearGradient id={barGradientId} x1="0" y1="0" x2="0" y2="1">
-                {[
-                  { offset: "0%", opacity: 0.8 },
-                  { offset: "35%", opacity: 0.6 },
-                  { offset: "70%", opacity: 0.3 },
-                  { offset: "95%", opacity: 0.1 },
-                  { offset: "100%", opacity: 0 },
-                ].map(({ offset, opacity }) => (
-                  <stop
-                    key={offset}
-                    offset={offset}
-                    stopColor="var(--data-solid-100)"
-                    stopOpacity={opacity}
-                  />
-                ))}
+                <stop offset="0%" stopColor={finalBarColor} stopOpacity={0.8} />
+                <stop offset="70%" stopColor={finalBarColor} stopOpacity={0.3} />
+                <stop offset="100%" stopColor={finalBarColor} stopOpacity={0} />
               </linearGradient>
               
-              {/* Line gradient - similar to LineGraph component */}
+              {/* Line gradient */}
               <linearGradient id={lineGradientId} x1="0" y1="0" x2="0" y2="1">
                 <stop offset="25%" stopColor={finalLineColor} stopOpacity={0.5} />
-                <stop offset="40%" stopColor={finalLineColor} stopOpacity={0.4} />
                 <stop offset="95%" stopColor={finalLineColor} stopOpacity={0.05} />
               </linearGradient>
             </defs>
@@ -242,61 +220,69 @@ const LineBarGraph: React.FC<LineBarGraphProps> = ({
               vertical={false}
               stroke="var(--neutral-alpha-weak)"
             />
-            <XAxis
-              dataKey={xAxisKey}
-              axisLine={false}
-              tickLine={false}
-              height={hideXAxisLabels || hideLabels ? 0 : 50}
-              tick={hideXAxisLabels || hideLabels ? false : {
-                fill: "var(--neutral-on-background-weak)",
-                fontSize: 12,
-              }}
-              
-              label={
-                xAxisTitle && !hideXAxisTitle && !hideAxisTitles
-                  ? { value: xAxisTitle, fontWeight: "500", position: 'bottom', offset: -23, fill: "var(--neutral-on-background-medium)" }
-                  : undefined
-              }
-            />
-            <YAxis
-              allowDataOverflow
-              axisLine={{
-                stroke: "var(--neutral-alpha-medium)",
-              }}
-              tickLine={false}
-              padding={{ top: 40 }}
-              tick={{
-                fill: "var(--neutral-on-background-weak)",
-                fontSize: 12,
-               }}
-              width={yAxisTitle ? 54 : 0}
-              label={
-                yAxisTitle && !hideYAxisTitle && !hideAxisTitles
-                  ? { 
-                      value: yAxisTitle,
-                      position: 'insideTop',
-                      offset: 10,
+            {legend && (
+              <Legend
+                content={<CustomLegend labels={labels} />}
+                wrapperStyle={{
+                  position: 'absolute',
+                  top: 0,
+                  right: 0,
+                  margin: 0
+                }}
+              />
+            )}
+            {(labels === "x" || labels === "both") && (
+              <XAxis
+                dataKey={xAxisKey}
+                axisLine={false}
+                tickLine={false}
+                height={xAxisTitle ? 50 : 0}
+                tick={{
+                  fill: "var(--neutral-on-background-weak)",
+                  fontSize: 11,
+                }}
+                label={
+                  xAxisTitle
+                    ? { value: xAxisTitle, fontWeight: "500", position: 'bottom', offset: -23, fill: "var(--neutral-on-background-medium)" }
+                    : undefined
+                }
+              />
+            )}
+            {(labels === "y" || labels === "both") && (
+              <YAxis
+                allowDataOverflow
+                axisLine={{
+                  stroke: "var(--neutral-alpha-medium)",
+                }}
+                tickLine={false}
+                padding={{ top: 40 }}
+                tick={{
+                  fill: "var(--neutral-on-background-weak)",
+                  fontSize: 11,
+                }}
+                width={yAxisTitle ? 54 : 0}
+                label={
+                  yAxisTitle
+                    ? { 
+value: yAxisTitle,
+position: 'insideTop',
+offset: 10,
                       fontSize: 12,
-                      fill: "var(--neutral-on-background-medium)" 
-                    }
-                  : undefined
-              }
-            />
+fill: "var(--neutral-on-background-medium)" 
+}
+                    : undefined
+                }
+              />
+            )}
             <Tooltip
-              content={<CustomTooltip isTimeSeries={isTimeSeries} timeFormat={timeFormat} />}
+              content={<CustomTooltip isTimeSeries={isTimeSeries} timeFormat={timeFormat}  />}
               cursor={{ fill: "rgba(255,255,255,0.05)" }}
             />
-            {showLegend && (
-              <Legend
-                verticalAlign="top"
-                wrapperStyle={{ paddingBottom: 10 }}
-              />
-            )}
             <Bar
               dataKey={barDataKey}
               name={barName}
               fill={`url(#${barGradientId})`}
-              stroke="var(--data-solid-100)"
+              stroke={finalBarColor}
               strokeWidth={1}
               radius={[4, 4, 0, 0]}
               barSize={
@@ -331,10 +317,11 @@ const LineBarGraph: React.FC<LineBarGraphProps> = ({
               />
             ) : (
               <Line
-                type="monotone"
+                type={curveType}
                 dataKey={lineDataKey}
                 name={lineName}
                 stroke={finalLineColor}
+                strokeDasharray={dashedLine ? "5 5" : "0"}
                 strokeWidth={2}
                 dot={{ r: 4, fill: finalLineColor }}
                 activeDot={{ r: 6, fill: finalLineColor }}

From 0aa6447000bd077b396f22c9818dd37c5e888118 Mon Sep 17 00:00:00 2001
From: Adhitya Nadooli <127269031+lightyfr@users.noreply.github.com>
Date: Thu, 10 Apr 2025 14:06:14 +0000
Subject: [PATCH 31/35] fix: Linebargraph tooltip label on x hide bug

---
 src/app/page.tsx                          | 2 +-
 src/once-ui/modules/data/LineBarGraph.tsx | 9 ++++++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 6301f767..0859c549 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1028,7 +1028,7 @@ export default function Home() {
                   description="How many users we had per weekday"
                     showArea={true}
                     legend
-                    labels="both"
+                    labels="y"
                     xAxisTitle="Day"
                     yAxisTitle="Count"
                     lineName="Traffic"
diff --git a/src/once-ui/modules/data/LineBarGraph.tsx b/src/once-ui/modules/data/LineBarGraph.tsx
index 59743855..d2bac770 100644
--- a/src/once-ui/modules/data/LineBarGraph.tsx
+++ b/src/once-ui/modules/data/LineBarGraph.tsx
@@ -47,8 +47,11 @@ const defaultColors = {
   bar: "green"
 };
 
-const CustomTooltip = ({ active, payload, label, isTimeSeries, timeFormat = "MMM DD, YYYY" }: any) => {
+const CustomTooltip = ({ active, payload, label, isTimeSeries, timeFormat = "MMM DD, YYYY", xAxisKey }: any) => {
   if (active && payload && payload.length) {
+    // Get the proper label from the payload data instead of using the default label
+    const displayLabel = payload[0]?.payload?.[xAxisKey] || label;
+    
     return (
       <Column
         minWidth={8}
@@ -65,7 +68,7 @@ const CustomTooltip = ({ active, payload, label, isTimeSeries, timeFormat = "MMM
             variant="label-default-s"
             onBackground="neutral-strong"
           >
-            {isTimeSeries ? moment(label).format(timeFormat) : label}
+            {isTimeSeries ? moment(displayLabel).format(timeFormat) : displayLabel}
           </Text>
         </Flex>
         <Column
@@ -275,7 +278,7 @@ fill: "var(--neutral-on-background-medium)"
               />
             )}
             <Tooltip
-              content={<CustomTooltip isTimeSeries={isTimeSeries} timeFormat={timeFormat}  />}
+              content={<CustomTooltip isTimeSeries={isTimeSeries} timeFormat={timeFormat} xAxisKey={xAxisKey} />}
               cursor={{ fill: "rgba(255,255,255,0.05)" }}
             />
             <Bar

From af798a4e4b55f2e372019c9c644530e1db1c0157 Mon Sep 17 00:00:00 2001
From: Adhitya Nadooli <127269031+lightyfr@users.noreply.github.com>
Date: Thu, 10 Apr 2025 14:52:16 +0000
Subject: [PATCH 32/35] fix GroupedBarChart Colors and Styles

---
 src/app/page.tsx                             |   3 +-
 src/once-ui/modules/data/GroupedBarChart.tsx | 362 +++++++++----------
 2 files changed, 178 insertions(+), 187 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 0859c549..d9f4a751 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1004,6 +1004,7 @@ export default function Home() {
               <Column fillWidth>
                 <Column background="neutral-weak" fill direction="column" border="neutral-alpha-weak" radius="xl" gap="24">
                   <GroupedBarChart
+                  legend
                   border="neutral-alpha-medium"
                   title="Quarterly Revenue"
                   description="How much dough we made per quarter in 2023 and 2024"
@@ -1013,8 +1014,6 @@ export default function Home() {
                       { name: "Q3", value1: 55000, value2: 51000, value3: 40000 },
                       { name: "Q4", value1: 75000, value2: 52000, value3: 48000 },
                     ]}
-                    xAxisTitle="Quarter"
-                    yAxisTitle="USD"
                     barLabels={["2023", "2024", "Projected"]}
                   />
                 </Column>
diff --git a/src/once-ui/modules/data/GroupedBarChart.tsx b/src/once-ui/modules/data/GroupedBarChart.tsx
index 829346e1..3d6f3022 100644
--- a/src/once-ui/modules/data/GroupedBarChart.tsx
+++ b/src/once-ui/modules/data/GroupedBarChart.tsx
@@ -7,6 +7,7 @@ import {
   ResponsiveContainer,
   CartesianGrid,
   Tooltip,
+  Legend,
 } from "recharts";
 
 import moment from "moment";
@@ -27,229 +28,222 @@ interface MultiBarDataPoint {
 
 interface GroupedBarChartProps extends React.ComponentProps<typeof Flex> {
   data: MultiBarDataPoint[];
-  xAxisKey?: string;
-  yAxisKeys?: string[]; // Keys for multiple bars
-  barLabels?: string[]; // Labels for each bar series
   /**
-   * Size of the bar graph.
-   * @default "m"
+   * Which axis labels to show
+   * @default "both"
    */
+  labels?: "x" | "y" | "both" | "none";
+
+  xAxisKey?: string;
+  yAxisKeys?: string[];
+  barLabels?: string[];
   barWidth?: SpacingToken | "fill" | number | string;
-  blur?: boolean;
+  isTimeSeries?: boolean;
+  timeFormat?: string;
+  legend?: boolean;
   title?: string;
   description?: string;
   tooltipTitle?: string;
-  /**
-   * When true, hides labels on the X axis
-   * @default false
-   */
-  hideXAxisLabels?: boolean;
-  /**
-   * When true, hides labels on the Y axis
-   * @default false
-   */
-  hideYAxisLabels?: boolean;
-  /**
-   * When true, hides all axis labels
-   * @default false
-   */
-  hideLabels?: boolean;
-  /**
-   * When true, hides the X axis title
-   * @default false
-   */
-  hideXAxisTitle?: boolean;
-  /**
-   * When true, hides the Y axis title
-   * @default false
-   */
-  hideYAxisTitle?: boolean;
-  /**
-   * When true, hides all axis titles
-   * @default false
-   */
-  hideAxisTitles?: boolean;
-  /**
-   * Title for X-axis
-   */
-  xAxisTitle?: string;
-  /**
-   * Title for Y-axis
-   */
-  yAxisTitle?: string;
-  /**
-   * When true, hides the Y axis  title
-   * @default false
-   */
-  timeFormat?: string;
-
-   isTimeSeries?: boolean;
 }
 
-const CustomTooltip = ({ active, payload, tooltipTitle, barLabels, isTimeSeries, timeFormat }: any) => {
-  if (active && payload && payload.length) {
-    const data = payload[0].payload;
-    return (
-      <Flex minWidth={8} background="surface" border="neutral-alpha-medium" direction="column">
-        <Flex
-          borderBottom="neutral-alpha-medium"
-          fillWidth
-          horizontal="center"
-          padding="8"
-        >
-            <Text
-            variant="label-strong-s"
-            style={{ fontWeight: "600" }}
-            onBackground="neutral-strong"
-            >
-            {isTimeSeries ? moment(data.endDate || data.name).format(timeFormat) : (data.endDate?.toLocaleString() || data.name)}
-            </Text>
-        </Flex>
-        <Flex padding="8" gap="4" direction="column">
-          {payload.map((entry: any, index: number) => (
-            <Text
-              variant="label-default-s"
-              key={`value-${index}`}
-              onBackground="neutral-strong"
-              style={{ color: entry.color }}
-            >
-              {`${isTimeSeries 
-              ? (barLabels?.[index] || moment(entry.dataKey).format(timeFormat))
-              : (barLabels?.[index] || entry.dataKey)
-              }: ${isTimeSeries ? moment(entry.value).format(timeFormat) : entry.value.toLocaleString()}`}
-            </Text>
-          ))}
+const CustomLegend = ({ payload, labels, colors }: any) => {
+  if (!payload || !payload.length) return null;
+  return (
+    <Flex
+    horizontal="start" 
+    vertical="center" 
+    position="absolute"
+    gap="16"
+    left={(labels === "y" || labels === "both") ? "80" : "12"}
+    top="12"
+    >
+      {payload.map((entry: any, index: number) => {
+        const color = colors[index];
+        return (
+        <Flex key={index} vertical="center" gap="8">
+          <Flex
+            style={{
+              backgroundClip: "padding-box",
+              border: `1px solid ${color}`,
+              background: `linear-gradient(to bottom, ${color} 0%,
+               transparent 100%)`,
+            }}
+            minWidth="16"
+            minHeight="16"
+            radius="s"
+          />
+          <Text variant="label-default-s">{entry.value}</Text>
         </Flex>
+      );
+      })}
+    </Flex>
+  );
+};
+
+const CustomTooltip = ({
+  active,
+  payload,
+  isTimeSeries,
+  barLabels,
+  colors,
+  timeFormat = "YYYY-MM-DD",
+}: any) => {
+  if (!(active && payload && payload.length)) return null;
+  const data = payload[0].payload;
+  return (
+    <Column
+      minWidth={8}
+      gap="8"
+      background="surface"
+      radius="m"
+      border="neutral-alpha-medium"
+    >
+      <Flex fillWidth paddingTop="8" paddingX="12">
+        <Text variant="label-default-s" onBackground="neutral-strong">
+          {isTimeSeries
+            ? moment(data.name).format(timeFormat)
+            : (data.name || "—")}
+        </Text>
       </Flex>
-    );
-  }
-  return null;
+      <Column
+        fillWidth
+        horizontal="space-between"
+        paddingBottom="8"
+        paddingX="12"
+        gap="4"
+      >
+        {payload.map((entry: any, index: number) => {
+          const color = colors[index];
+          return (
+            <Flex key={index} horizontal="space-between" fillWidth gap="16">
+              <Flex vertical="center" gap="8">
+                <Flex
+                  style={{
+                    backgroundClip: "padding-box",
+                    border: `1px solid ${color}`,
+                    background: `linear-gradient(to bottom, ${color} 0%, transparent 100%)`
+                  }}
+                  minWidth="12"
+                  minHeight="12"
+                  radius="xs"
+                />
+                <Text onBackground="neutral-weak" variant="label-default-s">
+                  {barLabels?.[index] || entry.dataKey}
+                </Text>
+              </Flex>
+              <Text onBackground="neutral-strong" variant="label-default-s">
+                {typeof entry.value === "number"
+                  ? entry.value.toLocaleString()
+                  : entry.value}
+              </Text>
+            </Flex>
+          );
+        })}
+      </Column>
+    </Column>
+  );
 };
 
 const GroupedBarChart: React.FC<GroupedBarChartProps> = ({
   data,
+  labels = "both",
   xAxisKey = "name",
   yAxisKeys = ["value1", "value2", "value3"],
+  barLabels,
   barWidth = "fill",
-  blur = false,
-  border,
+  isTimeSeries = false,
+  timeFormat,
   title,
   description,
+  legend = false,
   tooltipTitle,
-  barLabels,
-  background,
-  hideXAxisLabels = false,
-  xAxisTitle,
-  hideXAxisTitle = false,
-  hideYAxisLabels = false,
-  yAxisTitle,
-  hideYAxisTitle = false,
-  hideAxisTitles = false,
-  hideLabels = false,
-  isTimeSeries = false,
-  timeFormat,
   ...flexProps
 }) => {
-
-
-  // Using the same colors from LineGraph
-  const barColors = ["var(--data-solid-100)", "var(--data-solid-500)", "var(--data-solid-300)"]; // green, red, purple
+  const barColors = [
+    "var(--data-blue)",
+    "var(--data-green)",
+    "var(--data-orange)",
+  ];
 
   return (
     <Flex
       fill
       radius="l"
-      border={border}
       align="center"
       direction="column"
       vertical="center"
       data-viz="categorical"
-      background={background}
       {...flexProps}
     >
-
-{title && (
-  <Column fillWidth borderBottom={border} horizontal="start" paddingX="20"
-  paddingY="12"
-  gap="4"
->
-      {title && (
-                <Text variant="heading-strong-s">
-                  {title}
-                </Text>
-              )}
-              {description && (
-                <Text variant="label-default-s" onBackground="neutral-weak">
-                  {description}
-                </Text>
-              )}
-              </Column>
-            )}
+      {(title || description) && (
+        <Column
+          fillWidth
+          borderBottom="neutral-medium"
+          horizontal="start"
+          paddingX="20"
+          paddingY="12"
+          gap="4"
+        >
+          {title && <Text variant="heading-strong-s">{title}</Text>}
+          {description && (
+            <Text variant="label-default-s" onBackground="neutral-weak">
+              {description}
+            </Text>
+          )}
+        </Column>
+      )}
       <Flex fill>
         <ResponsiveContainer width="100%" height="100%">
           <BarChart
             data={data}
             margin={{ left: 0, bottom: 0, top: 0, right: 0 }}
             barGap={4}
-            >
+          >
             <CartesianGrid
-              horizontal={true}
+              horizontal
               vertical={false}
               stroke="var(--neutral-alpha-weak)"
             />
-                      <XAxis
-                        dataKey={xAxisKey}
-                        axisLine={false}
-                        tickLine={false}
-                        tick={hideXAxisLabels || hideLabels ? false : {
-                          fill: "var(--neutral-on-background-weak)",
-                          fontSize: 12,
-                        }}
-
-                        height={hideXAxisLabels || hideLabels ? 0 : 50}
-                        label={
-                          xAxisTitle && !hideXAxisTitle && !hideAxisTitles
-                            ? { value: xAxisTitle, fontWeight: "500", position: 'bottom', offset: -23, fill: "var(--neutral-on-background-medium)" }
-                            : undefined
-                        }
-                      />
-                      <YAxis
-                        allowDataOverflow
-                        axisLine={{
-                          stroke: "var(--neutral-alpha-medium)",
-                        }}
-                        tickLine={false}
-                        padding={{ top: 40 }}
-                        tick={{
-                          fill: "var(--neutral-on-background-weak)",
-                          fontSize: 12,
-                         }}
-                        width={yAxisTitle ? 54 : 0}
-                        label={
-                          yAxisTitle && !hideYAxisTitle && !hideAxisTitles
-                            ? { 
-                                value: yAxisTitle,
-                                position: 'insideTop',
-                                offset: 10,
-                                fontSize: 12,
-                                fill: "var(--neutral-on-background-medium)" 
-                              }
-                            : undefined
-                        }
-                      />
+            {legend && (
+              <Legend
+                content={<CustomLegend labels={labels} colors={barColors} />}
+                wrapperStyle={{ position: "absolute", top: 0, right: 0 }}
+              />
+            )}
+            {(labels === "x" || labels === "both") && (
+              <XAxis
+                dataKey={xAxisKey}
+                axisLine={false}
+                tickLine={false}
+                tick={{
+                  fill: "var(--neutral-on-background-weak)",
+                  fontSize: 12,
+                }}
+              />
+            )}
+            {(labels === "y" || labels === "both") && (
+              <YAxis
+                allowDataOverflow
+                axisLine={{ stroke: "var(--neutral-alpha-medium)" }}
+                tickLine={false}
+                padding={{ top: 40 }}
+                tick={{
+                  fill: "var(--neutral-on-background-weak)",
+                  fontSize: 12,
+                }}
+              />
+            )}
             <Tooltip
               content={
                 <CustomTooltip
-                  tooltipTitle={tooltipTitle}
-                  barLabels={barLabels}
+                  colors={barColors}
                   isTimeSeries={isTimeSeries}
+                  barLabels={barLabels}
                   timeFormat={timeFormat}
                 />
               }
               cursor={{ fill: "rgba(255,255,255,0.05)" }}
             />
-
-            {/* Define gradients for each bar color */}
             <defs>
               {barColors.map((color, index) => (
                 <linearGradient
@@ -265,8 +259,6 @@ const GroupedBarChart: React.FC<GroupedBarChartProps> = ({
                 </linearGradient>
               ))}
             </defs>
-
-            {/* Create a Bar component for each data key */}
             {yAxisKeys.map((key, index) => (
               <Bar
                 key={key}
@@ -278,18 +270,18 @@ const GroupedBarChart: React.FC<GroupedBarChartProps> = ({
                 radius={[6, 6, 0, 0]}
                 barSize={
                   barWidth === "fill"
-                  ? "100%"
-                  : barWidth === "xs"
-                  ? 12
-                  : barWidth === "s"
-                  ? 16
-                  : barWidth === "m"
-                  ? 24
-                  : barWidth === "l"
-                  ? 40
-                  : barWidth === "xl"
-                  ? 64
-                  : barWidth
+                    ? "100%"
+                    : barWidth === "xs"
+                    ? 12
+                    : barWidth === "s"
+                    ? 16
+                    : barWidth === "m"
+                    ? 24
+                    : barWidth === "l"
+                    ? 40
+                    : barWidth === "xl"
+                    ? 64
+                    : barWidth
                 }
                 isAnimationActive={false}
               />

From 3cb6e7b542c18c10c97ccb2571ffcd7a19126229 Mon Sep 17 00:00:00 2001
From: Adhitya Nadooli <127269031+lightyfr@users.noreply.github.com>
Date: Thu, 10 Apr 2025 15:11:54 +0000
Subject: [PATCH 33/35] feat: fix axis labeling and legend rendering on
 BarChart and GroupedBarChart

---
 src/app/page.tsx                             |  4 ++
 src/once-ui/modules/data/BarChart.tsx        | 42 +++++++++++++-------
 src/once-ui/modules/data/GroupedBarChart.tsx | 38 +++++++++++++-----
 3 files changed, 58 insertions(+), 26 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index d9f4a751..4a86a042 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -959,6 +959,9 @@ export default function Home() {
               <BarGraph
                 title="Company revenue in Q2 2025"
                 legend
+                labels="both"
+                yAxisTitle="Count"
+                xAxisTitle="Month"
                 description="How much dough we made"
                 tooltip="Revenue"
                 color="emerald"
@@ -1005,6 +1008,7 @@ export default function Home() {
                 <Column background="neutral-weak" fill direction="column" border="neutral-alpha-weak" radius="xl" gap="24">
                   <GroupedBarChart
                   legend
+                  yAxisTitle="Count"
                   border="neutral-alpha-medium"
                   title="Quarterly Revenue"
                   description="How much dough we made per quarter in 2023 and 2024"
diff --git a/src/once-ui/modules/data/BarChart.tsx b/src/once-ui/modules/data/BarChart.tsx
index 99ea941c..9233f3ab 100644
--- a/src/once-ui/modules/data/BarChart.tsx
+++ b/src/once-ui/modules/data/BarChart.tsx
@@ -114,6 +114,7 @@ const BarGraph: React.FC<BarChartProps> = ({
   data,
   xAxisKey = "name",
   yAxisKey = "value",
+  yAxisTitle,
   barWidth = "fill",
   border = "neutral-medium",
   color = "blue",
@@ -188,21 +189,32 @@ const BarGraph: React.FC<BarChartProps> = ({
                 }}
               />
             )}
-            {labels === "y" || labels === "both" && (
-              <YAxis
-                allowDataOverflow
-                axisLine={{
-                  stroke: "var(--neutral-alpha-weak)",
-                }}
-                tickLine={false}
-                padding={{ top: 40 }}
-                tick={{
-                  fill: "var(--neutral-on-background-weak)",
-                  fontSize: 12,
-                }}
-                width={64}
-              />
-            )}
+            {(labels === "y" || labels === "both") && (
+                                      <YAxis
+                                        allowDataOverflow
+                                        axisLine={{
+                                          stroke: "var(--neutral-alpha-medium)",
+                                        }}
+                                        tickLine={false}
+                                        padding={{ top: 40 }}
+                                        tick={{
+                                          fill: "var(--neutral-on-background-weak)",
+                                          fontSize: 11,
+                                        }}
+                                        width={yAxisTitle ? 54 : 0}
+                                        label={
+                                          yAxisTitle
+                                            ? { 
+                        value: yAxisTitle,
+                        position: 'insideTop',
+                        offset: 10,
+                                              fontSize: 12,
+                        fill: "var(--neutral-on-background-medium)" 
+                        }
+                                            : undefined
+                                        }
+                                      />
+                                    )}
             <Tooltip
               content={<CustomTooltip tooltipTitle={tooltip} />}
               cursor={{ fill: "var(--neutral-alpha-weak)" }}
diff --git a/src/once-ui/modules/data/GroupedBarChart.tsx b/src/once-ui/modules/data/GroupedBarChart.tsx
index 3d6f3022..98a12125 100644
--- a/src/once-ui/modules/data/GroupedBarChart.tsx
+++ b/src/once-ui/modules/data/GroupedBarChart.tsx
@@ -37,6 +37,7 @@ interface GroupedBarChartProps extends React.ComponentProps<typeof Flex> {
   xAxisKey?: string;
   yAxisKeys?: string[];
   barLabels?: string[];
+  yAxisTitle?: string;
   barWidth?: SpacingToken | "fill" | number | string;
   isTimeSeries?: boolean;
   timeFormat?: string;
@@ -154,6 +155,7 @@ const GroupedBarChart: React.FC<GroupedBarChartProps> = ({
   isTimeSeries = false,
   timeFormat,
   title,
+  yAxisTitle,
   description,
   legend = false,
   tooltipTitle,
@@ -222,17 +224,31 @@ const GroupedBarChart: React.FC<GroupedBarChartProps> = ({
               />
             )}
             {(labels === "y" || labels === "both") && (
-              <YAxis
-                allowDataOverflow
-                axisLine={{ stroke: "var(--neutral-alpha-medium)" }}
-                tickLine={false}
-                padding={{ top: 40 }}
-                tick={{
-                  fill: "var(--neutral-on-background-weak)",
-                  fontSize: 12,
-                }}
-              />
-            )}
+                          <YAxis
+                            allowDataOverflow
+                            axisLine={{
+                              stroke: "var(--neutral-alpha-medium)",
+                            }}
+                            tickLine={false}
+                            padding={{ top: 40 }}
+                            tick={{
+                              fill: "var(--neutral-on-background-weak)",
+                              fontSize: 11,
+                            }}
+                            width={yAxisTitle ? 54 : 0}
+                            label={
+                              yAxisTitle
+                                ? { 
+            value: yAxisTitle,
+            position: 'insideTop',
+            offset: 10,
+                                  fontSize: 12,
+            fill: "var(--neutral-on-background-medium)" 
+            }
+                                : undefined
+                            }
+                          />
+                        )}
             <Tooltip
               content={
                 <CustomTooltip

From 2d39dd094a3b4751957e66fe45eaafd4342b1c31 Mon Sep 17 00:00:00 2001
From: Adhitya Nadooli <127269031+lightyfr@users.noreply.github.com>
Date: Thu, 10 Apr 2025 15:33:55 +0000
Subject: [PATCH 34/35] refactor PieChart

---
 src/once-ui/modules/data/PieChart.tsx | 75 ++++++++++++++-------------
 1 file changed, 40 insertions(+), 35 deletions(-)

diff --git a/src/once-ui/modules/data/PieChart.tsx b/src/once-ui/modules/data/PieChart.tsx
index cd625335..af9a1008 100644
--- a/src/once-ui/modules/data/PieChart.tsx
+++ b/src/once-ui/modules/data/PieChart.tsx
@@ -7,7 +7,7 @@ import {
   ResponsiveContainer,
   Legend,
 } from "recharts";
-import { Flex, Heading } from "../../components";
+import { Flex, Heading, Text, Column,Row } from "../../components";
 
 interface DataPoint {
   name: string;
@@ -17,11 +17,6 @@ interface DataPoint {
 
 interface PieChartProps extends React.ComponentProps<typeof Flex> {
   data: DataPoint[];
-  /**
-   * Color variants for pie slices (will cycle through these)
-   * @default ["info", "success", "danger", "purple"]
-   */
-  colorVariants?: ("info" | "success" | "danger" | "purple")[];
   /**
    * Apply blur effect
    * @default false
@@ -67,28 +62,42 @@ interface PieChartProps extends React.ComponentProps<typeof Flex> {
    * @default true
    */
   useGradients?: boolean;
+
+  defaultColors?: string[];
 }
 
 const CustomTooltip = ({ active, payload }: any) => {
   if (active && payload && payload.length) {
     return (
-      <Flex minWidth={8} background="surface" border="neutral-alpha-medium" direction="column">
+      <Column
+        minWidth={8}
+        gap="8"
+         paddingBottom="8"
+        background="surface"
+        radius="m"
+        border="neutral-alpha-medium">
         <Flex
-          borderBottom="neutral-alpha-medium"
           fillWidth
-          horizontal="center"
-          padding="8"
+          paddingTop="8"
+          horizontal="start"
+          paddingX="12"
+          direction="column"
         >
-          <p>{payload[0].name}</p>
-        </Flex>
-        <Flex padding="s" direction="column">
-          <p
+          <Text variant="label-default-s"
+            onBackground="neutral-strong" paddingBottom="8">{payload[0].name}</Text>
+        <Row horizontal="space-between" fillWidth>
+          <Text
+          onBackground="neutral-weak" variant="label-default-s"
             style={{ color: payload[0].fill }}
           >
+            </Text>
+            <Text
+            onBackground="neutral-strong" variant="label-default-s">
             {`Value: ${payload[0].value}`}
-          </p>
-        </Flex>
+          </Text>
+        </Row>
       </Flex>
+      </Column>
     );
   }
   return null;
@@ -96,7 +105,7 @@ const CustomTooltip = ({ active, payload }: any) => {
 
 export const PieChart: React.FC<PieChartProps> = ({
   data,
-  colorVariants = ["info", "success", "danger", "purple"],
+  defaultColors = ['blue', 'green', 'aqua', 'violet', 'orange', 'red', 'purple', 'magenta', 'moss', 'emerald'],
   blur = false,
   border,
   title,
@@ -111,12 +120,8 @@ export const PieChart: React.FC<PieChartProps> = ({
   useGradients = true,
   ...flexProps
 }) => {
-  const colorMap = {
-    info: "var(--info-solid-strong)",
-    success: "var(--data-solid-100)",
-    danger: "var(--data-solid-500)",
-    purple: "var(--data-solid-300)",
-  };
+  // Convert defaults into CSS var() references
+  const colorPalette = defaultColors.map((c) => `var(--data-${c})`);
 
   // Generate unique IDs for each gradient
   const gradientIds = data.map((_, index) => 
@@ -151,20 +156,20 @@ export const PieChart: React.FC<PieChartProps> = ({
           <RechartsPieChart>
             <defs>
               {data.map((entry, index) => {
-                const baseColor = entry.color || colorMap[colorVariants[index % colorVariants.length]];
+                const baseColor = entry.color || colorPalette[index % colorPalette.length];
                 return (
-                  <radialGradient 
-                    key={`gradient-${index}`} 
-                    id={gradientIds[index]} 
-                    cx="50%" 
-                    cy="50%" 
-                    r="100%" 
-                    fx="50%" 
+                  <radialGradient
+                    key={`gradient-${index}`}
+                    id={gradientIds[index]}
+                    cx="50%"
+                    cy="50%"
+                    r="100%"
+                    fx="50%"
                     fy="50%"
                   >
-                     <stop offset="25%" stopColor={baseColor} stopOpacity={0.5} />
-                <stop offset="40%" stopColor={baseColor} stopOpacity={0.4} />
-                <stop offset="95%" stopColor={baseColor} stopOpacity={0.05} />
+                    <stop offset="25%" stopColor={baseColor} stopOpacity={0.5} />
+                    <stop offset="40%" stopColor={baseColor} stopOpacity={0.4} />
+                    <stop offset="95%" stopColor={baseColor} stopOpacity={0.05} />
                   </radialGradient>
                 );
               })}
@@ -182,7 +187,7 @@ export const PieChart: React.FC<PieChartProps> = ({
               stroke="none"
             >
               {data.map((entry, index) => {
-                const baseColor = entry.color || colorMap[colorVariants[index % colorVariants.length]];
+                const baseColor = entry.color || colorPalette[index % colorPalette.length];
                 return (
                   <Cell 
                     key={`cell-${index}`} 

From de6e31093f9fcd3d4516a453b6e5b375b383ba79 Mon Sep 17 00:00:00 2001
From: Justin <justin.eiletz@outlook.com>
Date: Mon, 19 May 2025 20:35:00 +0200
Subject: [PATCH 35/35] refactor: improve ProgressRing and SVG components for
 style, performance, and consistency

- Refactored SVG.tsx for better syntax, consistent code style, named export, and forwardRef support; improved merge of className/style and removed over-abstraction.
- Updated ProgressRing.tsx to use new SVG API, modern classNames usage, explicit displayName, and improved label structure.
- Simplified ProgressRing.module.scss by flattening size and tone selectors, fixing animated stroke transition timing, and correcting .progress fill for proper rendering.
---
 .../components/ProgressRing.module.scss       | 18 ++--
 src/once-ui/components/ProgressRing.tsx       | 48 ++++-------
 src/once-ui/components/SVG.tsx                | 86 +++++++++----------
 3 files changed, 69 insertions(+), 83 deletions(-)

diff --git a/src/once-ui/components/ProgressRing.module.scss b/src/once-ui/components/ProgressRing.module.scss
index 2e782f0b..8521d8b7 100644
--- a/src/once-ui/components/ProgressRing.module.scss
+++ b/src/once-ui/components/ProgressRing.module.scss
@@ -6,16 +6,12 @@
   align-items: center;
   justify-content: center;
 
-  &.size {
-    &-s { width: 6rem; height: 6rem; }
-    &-m { width: 8rem; height: 8rem; }
-    &-l { width: 10rem; height: 10rem; }
-  }
+  &.size-s { width: 6rem; height: 6rem; }
+  &.size-m { width: 8rem; height: 8rem; }
+  &.size-l { width: 10rem; height: 10rem; }
 
-  &.tone {
-    &-warning { --progress-color: var(--warning-alpha-strong); }
-    &-success { --progress-color: var(--success-alpha-strong); }
-  }
+  &.tone-warning { --progress-color: var(--warning-alpha-strong); }
+  &.tone-success { --progress-color: var(--success-alpha-strong); }
 }
 
 .svg {
@@ -31,10 +27,10 @@
 }
 
 .progress {
-  fill: var(--surface-background);
+  fill: none;
   stroke: var(--progress-color);
   stroke-linecap: round;
-  transition: stroke-dashoffset 1.3s cubic-bezier(0.65, 0, 0.35, 1);
+  transition: stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .label {
diff --git a/src/once-ui/components/ProgressRing.tsx b/src/once-ui/components/ProgressRing.tsx
index 0270b316..c5695813 100644
--- a/src/once-ui/components/ProgressRing.tsx
+++ b/src/once-ui/components/ProgressRing.tsx
@@ -2,7 +2,8 @@
 
 import styles from "./ProgressRing.module.scss";
 import { Column, Text } from "@/once-ui/components";
-import {SVG} from "@/once-ui/components/SVG";
+import classNames from "classnames";
+import { SVG } from "./SVG";
 
 interface ProgressRingProps {
     value: number;
@@ -11,35 +12,23 @@ interface ProgressRingProps {
     label?: string;
 }
 
-export const ProgressRing = ({
-                                 value,
-                                 size = "s",
-                                 tone = "primary",
-                                 label
-                             }: ProgressRingProps) => {
+const ProgressRing = ({
+                          value,
+                          size = "s",
+                          tone = "primary",
+                          label
+                      }: ProgressRingProps) => {
     const strokeWidth = 4;
-    const radius = {
-        s: 30,
-        m: 45,
-        l: 60
-    }[size];
+    const radiusMap = { s: 30, m: 45, l: 60 };
+    const radius = radiusMap[size];
 
     const normalizedRadius = radius - strokeWidth;
     const circumference = normalizedRadius * 2 * Math.PI;
-    const strokeDashoffset = circumference - (value / 100) * circumference;
+    const strokeDashoffset = circumference * (1 - value / 100);
 
     return (
-        <Column
-            className={`
-        ${styles.container}
-        ${styles[`size-${size}`]}
-        ${styles[`tone-${tone}`]}
-      `}
-        >
-            <SVG
-                className={styles.svg}
-                viewBox={`0 0 ${radius * 2} ${radius * 2}`}
-            >
+        <Column className={classNames(styles.container, styles[`size-${size}`], styles[`tone-${tone}`])}>
+            <SVG className={styles.svg} viewBox={`0 0 ${radius * 2} ${radius * 2}`}>
                 <circle
                     className={styles.background}
                     cx={radius}
@@ -59,13 +48,14 @@ export const ProgressRing = ({
             </SVG>
 
             {label && (
-                <Text
-                    variant="body-strong-m"
-                    className={styles.label}
-                >
+                <Text variant="body-strong-m" className={styles.label}>
                     {label}
                 </Text>
             )}
         </Column>
     );
-};
\ No newline at end of file
+};
+
+ProgressRing.displayName = "ProgressRing";
+
+export { ProgressRing };
\ No newline at end of file
diff --git a/src/once-ui/components/SVG.tsx b/src/once-ui/components/SVG.tsx
index 0dc7cae4..0fda8174 100644
--- a/src/once-ui/components/SVG.tsx
+++ b/src/once-ui/components/SVG.tsx
@@ -1,9 +1,10 @@
+
 "use client";
 
-import React, { ElementType, ComponentPropsWithoutRef } from "react";
+import React, { ElementType, ComponentPropsWithoutRef, ReactNode, forwardRef } from "react";
 import classNames from "classnames";
-import {CommonProps, SpacingProps} from "@/once-ui/interfaces";
-import {ColorScheme, ColorWeight, SpacingToken} from "@/once-ui/types";
+import { CommonProps, SpacingProps } from "@/once-ui/interfaces";
+import { ColorScheme, ColorWeight, SpacingToken } from "@/once-ui/types";
 
 type SVGProps<T extends ElementType> =
     ComponentPropsWithoutRef<"svg"> &
@@ -16,62 +17,61 @@ type SVGProps<T extends ElementType> =
     strokeWeight?: ColorWeight;
     interactive?: boolean;
     size?: "x" | "s" | "m" | "l" | "xl";
+    children?: ReactNode;
 };
 
-export const SVG = <T extends ElementType = "svg">({
-                                                as,
-                                                colorScheme = "neutral",
-                                                colorWeight = "weak",
-                                                strokeScheme,
-                                                strokeWeight = "weak",
-                                                interactive = false,
-                                                size = "m",
-                                                padding,
-                                                margin,
-                                                className,
-                                                style,
-                                                children,
-                                                ...props
-                                            }: SVGProps<T>) => {
-    const Component = as || "svg";
-
-    const generateColorClass = (
-        type: "fill" | "stroke",
-        scheme?: ColorScheme,
-        weight?: ColorWeight
-    ) => {
-        if (!scheme) return "";
-        return `${type}-${scheme}-${weight}`;
-    };
+function getColorClass(type: "fill" | "stroke", scheme?: ColorScheme, weight?: ColorWeight) {
+    return scheme ? `${type}-${scheme}-${weight}` : "";
+}
 
-    const generateSpacingClass = (prefix: string, token?: SpacingToken) => {
-        return token ? `${prefix}-${token}` : "";
-    };
+function getSpacingClass(prefix: string, token?: SpacingToken) {
+    return token ? `${prefix}-${token}` : "";
+}
 
+const SVG = forwardRef<SVGSVGElement, SVGProps<ElementType>>(function SVG(
+    {
+        as,
+        colorScheme = "neutral",
+        colorWeight = "weak",
+        strokeScheme,
+        strokeWeight = "weak",
+        interactive = false,
+        size = "m",
+        padding,
+        margin,
+        className,
+        style,
+        children,
+        ...rest
+    },
+    ref
+) {
+    const Component = as || "svg";
     const classes = classNames(
         "transition-colors",
-        generateColorClass("fill", colorScheme, colorWeight),
-        generateColorClass("stroke", strokeScheme, strokeWeight),
-        generateSpacingClass("p", padding),
-        generateSpacingClass("m", margin),
+        getColorClass("fill", colorScheme, colorWeight),
+        getColorClass("stroke", strokeScheme, strokeWeight),
+        getSpacingClass("p", padding),
+        getSpacingClass("m", margin),
         {
             "cursor-pointer hover:scale-105": interactive,
-            "opacity-hoverable": interactive
+            "opacity-hoverable": interactive,
         },
         className
     );
 
     return (
         <Component
+            ref={ref}
             className={classes}
-            style={{
-                width: size,
-                height: size,
-                ...style
-            }}
-            {...props}
+            style={{ width: size, height: size, ...style }}
+            {...rest}
         >
             {children}
         </Component>
     );
-};
\ No newline at end of file
+});
+
+SVG.displayName = "SVG";
+
+export { SVG };