feat: feedback updates

frontend/src/container/OnboardingQuestionaire/AboutSigNozQuestions/AboutSigNozQuestions.tsx

@@ -33,7 +33,7 @@ const hearAboutSignozOptions: Record<string, string> = {
 const interestedInOptions: Record<string, string> = {
 	savingCosts: 'Saving costs',
 	otelNativeStack: 'Interested in Otel-native stack',
-	allInOne: 'All in one',
+	allInOne: 'All in one (Logs, Metrics & Traces)',
 };
 
 export function AboutSigNozQuestions({
@@ -144,7 +144,7 @@ export function AboutSigNozQuestions({
 								<Input
 									type="text"
 									className="onboarding-questionaire-other-input"
-									placeholder="Tell us how you got to know about us"
+									placeholder="How you got to know about us"
 									value={otherAboutSignoz}
 									autoFocus
 									addonAfter={

frontend/src/container/OnboardingQuestionaire/OnboardingHeader/OnboardingHeader.tsx

@@ -1,26 +1,12 @@
 import './OnboardingHeader.styles.scss';
 
-import { Color } from '@signozhq/design-tokens';
-import { Button } from 'antd';
-import { LifeBuoy } from 'lucide-react';
-
 export function OnboardingHeader(): JSX.Element {
-	const handleGetHelpClick = (): void => {
-		if (window.Intercom) {
-			window.Intercom('showNewMessage', '');
-		}
-	};
-
 	return (
 		<div className="header-container">
 			<div className="logo-container">
 				<img src="/Logos/signoz-brand-logo-new.svg" alt="SigNoz" />
 				<span className="logo-text">SigNoz</span>
 			</div>
-			<Button className="get-help-container" onClick={handleGetHelpClick}>
-				<LifeBuoy size={12} color={Color.BG_VANILLA_400} />
-				<span className="get-help-text ">Get Help</span>
-			</Button>
 		</div>
 	);
 }

frontend/src/container/OnboardingQuestionaire/OptimiseSignozNeeds/OptimiseSignozNeeds.tsx

@@ -1,4 +1,4 @@
-import { Button, Slider, SliderSingleProps, Typography } from 'antd';
+import { Button, Slider, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { ArrowLeft, ArrowRight, Loader2, Minus } from 'lucide-react';
 import { useEffect, useState } from 'react';
@@ -9,6 +9,28 @@ export interface OptimiseSignozDetails {
 	services: number;
 }
 
+// Define exponential range
+const logsMin = 1; // Set to your minimum value in the exponential range
+const logsMax = 10000; // Set to your maximum value in the exponential range
+
+const hostsMin = 1;
+const hostsMax = 10000;
+
+const servicesMin = 1;
+const servicesMax = 5000;
+
+// Function to convert linear slider value to exponential scale
+const linearToExponential = (
+	value: number,
+	min: number,
+	max: number,
+): number => {
+	const expMin = Math.log10(min);
+	const expMax = Math.log10(max);
+	const expValue = 10 ** (expMin + ((expMax - expMin) * value) / 100);
+	return Math.round(expValue);
+};
+
 interface OptimiseSignozNeedsProps {
 	optimiseSignozDetails: OptimiseSignozDetails;
 	setOptimiseSignozDetails: (details: OptimiseSignozDetails) => void;
@@ -19,29 +41,28 @@ interface OptimiseSignozNeedsProps {
 	isNextDisabled: boolean;
 }
 
-const logMarks: SliderSingleProps['marks'] = {
+const marks = {
-	0: '0 GB',
+	0: `${linearToExponential(0, logsMin, logsMax).toLocaleString()} GB`,
-	25: '25 GB',
+	25: `${linearToExponential(25, logsMin, logsMax).toLocaleString()} GB`,
-	50: '50 GB',
+	50: `${linearToExponential(50, logsMin, logsMax).toLocaleString()} GB`,
-	100: '100 GB',
+	75: `${linearToExponential(75, logsMin, logsMax).toLocaleString()} GB`,
+	100: `${linearToExponential(100, logsMin, logsMax).toLocaleString()} GB`,
 };
 
-const hostMarks: SliderSingleProps['marks'] = {
+const hostMarks = {
-	0: '0',
+	0: `${linearToExponential(0, hostsMin, hostsMax).toLocaleString()}`,
-	20: '20',
+	25: `${linearToExponential(25, hostsMin, hostsMax).toLocaleString()}`,
-	40: '40',
+	50: `${linearToExponential(50, hostsMin, hostsMax).toLocaleString()}`,
-	60: '60',
+	75: `${linearToExponential(75, hostsMin, hostsMax).toLocaleString()}`,
-	80: '80',
+	100: `${linearToExponential(100, hostsMin, hostsMax).toLocaleString()}`,
-	100: '100',
 };
 
-const serviceMarks: SliderSingleProps['marks'] = {
+const serviceMarks = {
-	0: '0',
+	0: `${linearToExponential(0, servicesMin, servicesMax).toLocaleString()}`,
-	20: '20',
+	25: `${linearToExponential(25, servicesMin, servicesMax).toLocaleString()}`,
-	40: '40',
+	50: `${linearToExponential(50, servicesMin, servicesMax).toLocaleString()}`,
-	60: '60',
+	75: `${linearToExponential(75, servicesMin, servicesMax).toLocaleString()}`,
-	80: '80',
+	100: `${linearToExponential(100, servicesMin, servicesMax).toLocaleString()}`,
-	100: '100',
 };
 
 function OptimiseSignozNeeds({
@@ -108,6 +129,52 @@ function OptimiseSignozNeeds({
 		});
 	};
 
+	// Internal state for the linear slider
+	const [sliderValues, setSliderValues] = useState({
+		logsPerDay: 0,
+		hostsPerDay: 0,
+		services: 0,
+	});
+
+	const handleSliderChange = (key: string, value: number): void => {
+		console.log('value', value);
+		setSliderValues({
+			...sliderValues,
+			[key]: value,
+		});
+
+		switch (key) {
+			case 'logsPerDay':
+				setLogsPerDay(value);
+				break;
+			case 'hostsPerDay':
+				setHostsPerDay(value);
+				break;
+			case 'services':
+				setServices(value);
+				break;
+			default:
+				break;
+		}
+	};
+
+	// Calculate the exponential value based on the current slider position
+	const logsPerDayValue = linearToExponential(
+		sliderValues.logsPerDay,
+		logsMin,
+		logsMax,
+	);
+	const hostsPerDayValue = linearToExponential(
+		sliderValues.hostsPerDay,
+		hostsMin,
+		hostsMax,
+	);
+	const servicesValue = linearToExponential(
+		sliderValues.services,
+		servicesMin,
+		servicesMax,
+	);
+
 	return (
 		<div className="questions-container">
 			<Typography.Title level={3} className="title">
@@ -128,16 +195,25 @@ function OptimiseSignozNeeds({
 							Logs / Day
 						</label>
 						<div className="slider-container">
-							<Slider
+							<div>
-								marks={logMarks}
+								<Slider
-								defaultValue={logsPerDay}
+									min={0}
-								onAfterChange={(value): void => setLogsPerDay(value)}
+									max={100}
-								styles={{
+									value={sliderValues.logsPerDay}
-									track: {
+									marks={marks}
-										background: '#4E74F8',
+									onChange={(value: number): void =>
-									},
+										handleSliderChange('logsPerDay', value)
-								}}
+									}
-							/>
+									styles={{
+										track: {
+											background: '#4E74F8',
+										},
+									}}
+									tooltip={{
+										formatter: (): string => `${logsPerDayValue.toLocaleString()} GB`, // Show whole number
+									}}
+								/>
+							</div>
 						</div>
 					</div>
 
@@ -146,16 +222,25 @@ function OptimiseSignozNeeds({
 							Metrics <Minus size={14} /> Number of Hosts
 						</label>
 						<div className="slider-container">
-							<Slider
+							<div>
-								marks={hostMarks}
+								<Slider
-								defaultValue={hostsPerDay}
+									min={0}
-								onAfterChange={(value: number): void => setHostsPerDay(value)}
+									max={100}
-								styles={{
+									value={sliderValues.hostsPerDay}
-									track: {
+									marks={hostMarks}
-										background: '#4E74F8',
+									onChange={(value: number): void =>
-									},
+										handleSliderChange('hostsPerDay', value)
-								}}
+									}
-							/>
+									styles={{
+										track: {
+											background: '#4E74F8',
+										},
+									}}
+									tooltip={{
+										formatter: (): string => `${hostsPerDayValue.toLocaleString()}`, // Show whole number
+									}}
+								/>
+							</div>
 						</div>
 					</div>
 
@@ -164,16 +249,25 @@ function OptimiseSignozNeeds({
 							Number of services
 						</label>
 						<div className="slider-container">
-							<Slider
+							<div>
-								marks={serviceMarks}
+								<Slider
-								defaultValue={services}
+									min={0}
-								onAfterChange={(value): void => setServices(value)}
+									max={100}
-								styles={{
+									value={sliderValues.services}
-									track: {
+									marks={serviceMarks}
-										background: '#4E74F8',
+									onChange={(value: number): void =>
-									},
+										handleSliderChange('services', value)
-								}}
+									}
-							/>
+									styles={{
+										track: {
+											background: '#4E74F8',
+										},
+									}}
+									tooltip={{
+										formatter: (): string => `${servicesValue.toLocaleString()}`, // Show whole number
+									}}
+								/>
+							</div>
 						</div>
 					</div>
 				</div>

frontend/src/container/OnboardingQuestionaire/OrgQuestions/OrgQuestions.tsx

@@ -42,9 +42,9 @@ const observabilityTools = {
 };
 
 const o11yFamiliarityOptions: Record<string, string> = {
-	beginner: 'Basic Understanding',
+	beginner: 'Beginner',
-	intermediate: 'Somewhat Familiar',
+	intermediate: 'Intermediate',
-	expert: 'Very Familiar',
+	expert: 'Expert',
 	notFamiliar: "I'm not familiar with it",
 };
 
@@ -254,7 +254,7 @@ function OrgQuestions({
 
 					<div className="form-group">
 						<div className="question">
-							Are you familiar with setting upobservability (o11y)?
+							Are you familiar with setting up observability (o11y)?
 						</div>
 						<div className="two-column-grid">
 							{Object.keys(o11yFamiliarityOptions).map((option: string) => (

frontend/src/container/OnboardingQuestionaire/index.tsx

@@ -28,7 +28,6 @@ import {
 	SignozDetails,
 } from './AboutSigNozQuestions/AboutSigNozQuestions';
 import InviteTeamMembers from './InviteTeamMembers/InviteTeamMembers';
-import { OnboardingFooter } from './OnboardingFooter/OnboardingFooter';
 import { OnboardingHeader } from './OnboardingHeader/OnboardingHeader';
 import OptimiseSignozNeeds, {
 	OptimiseSignozDetails,
@@ -148,8 +147,8 @@ function OnboardingQuestionaire(): JSX.Element {
 	}, [org]);
 
 	const isNextDisabled =
-		optimiseSignozDetails.logsPerDay === 0 ||
+		optimiseSignozDetails.logsPerDay === 0 &&
-		optimiseSignozDetails.hostsPerDay === 0 ||
+		optimiseSignozDetails.hostsPerDay === 0 &&
 		optimiseSignozDetails.services === 0;
 
 	const [isLoading, setIsLoading] = useState<boolean>(false);
@@ -316,10 +315,6 @@ function OnboardingQuestionaire(): JSX.Element {
 					</>
 				)}
 			</div>
-
-			<div className="onboarding-questionaire-footer">
-				<OnboardingFooter />
-			</div>
 		</div>
 	);
 }