Revert "Added chart type descriptions"

This reverts commit d6140d88.

src/components/choose-chart-sample/select-chart.tsx

@@ -5,7 +5,8 @@
 
 // const SelectChart: React.FC = () => {
 //   const router = useRouter();
-//   //get the query parameters -  id here
+//   //get the query parameters -  id here 
+
 
 //   const pathname = usePathname()
 //   const searchParams = useSearchParams()
@@ -30,87 +31,59 @@
 
 // export default SelectChart;
 
-import { useRouter, usePathname, useSearchParams } from "next/navigation";
-import DefaultLayout from "@/components/Layouts/DefaultLayout";
-import { Card, CardContent, Typography } from "@mui/material";
-import Link from "next/link";
+
+import { useRouter, usePathname, useSearchParams}  from 'next/navigation';
+import DefaultLayout from '@/components/Layouts/DefaultLayout';
+import { Card, CardContent, Typography } from '@mui/material';
+import Link from 'next/link';
 import React from "react";
 
 const SelectChart: React.FC = () => {
+
   return (
     <DefaultLayout>
-      <div>
-        <h2>
-          <strong>Choose a chart type</strong>
-        </h2>
-        <p>
-          It is important to choose the type of visualization fits your data
-          best. Choose the chart type that represents your data accurately or
-          pick the recommended type.
-        </p>
-        <br />
-      </div>
-      <div>
-        <div
-          style={{
-            display: "flex",
-            flexWrap: "wrap",
-            justifyContent: "center",
-          }}
-        >
-          <ChartOptionCard chartType="Bar Chart" description="Comparisons" />
-          <ChartOptionCard
-            chartType="Line Chart"
-            description="Trends over time"
-          />
-          <ChartOptionCard chartType="Pie Chart" description="Proportions" />
-          <ChartOptionCard
-            chartType="Scatter Chart"
-            description="Trends over time"
-          />
-          <ChartOptionCard
-            chartType="Area Chart"
-            description="Trends over time"
-          />
-          {/* Add more chart options as needed */}
+        <div>
+            <h2><strong>Choose a chart type</strong></h2>
+            <p>It is important to choose the type of visualization fits your data best. Choose the chart type that represents your data accurately or pick the recommended type.</p>
+            <br />
         </div>
+      <div>
+      <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center' }}>
+      <ChartOptionCard chartType="Bar Chart" description="Comparisons"/>
+      <ChartOptionCard chartType="Line Chart" description="Trends over time"/>
+      <ChartOptionCard chartType="Pie Chart" description="Proportions"/>
+      <ChartOptionCard chartType="Scatter Chart" description="Trends over time"/>
+      <ChartOptionCard chartType="Area Chart" description="Trends over time"/>
+      {/* Add more chart options as needed */}
+    </div>
       </div>
     </DefaultLayout>
   );
 };
 
-const ChartOptionCard: React.FC<{ chartType: string; description: string }> = ({
-  chartType,
-  description,
-}) => {
+const ChartOptionCard: React.FC<{ chartType: string, description: string}> = ({ chartType, description}) => {
   const router = useRouter();
-  const searchParams = useSearchParams();
+  const searchParams = useSearchParams()
   const handleChartSelection = () => {
     // Navigate to another page with selected chart type
-    console.log(chartType.toLowerCase().replace(" ", "-"));
-    router.push(
-      `/chart/chart-workspace/${chartType.toLowerCase().replace(" ", "-")}?${searchParams}`,
-    );
+    console.log(chartType.toLowerCase().replace(' ', '-'));
+    router.push(`/chart/chart-workspace/${chartType.toLowerCase().replace(' ', '-')}?${searchParams}`);
   };
 
   return (
-    <Card
-      key={chartType}
-      style={{ margin: "10px", width: "250px", cursor: "pointer" }}
-      onClick={handleChartSelection}
-    >
-      <CardContent style={{ textAlign: "center" }}>
+    <Card key={chartType} style={{ margin: '10px', width: '250px', cursor: 'pointer' }} onClick={handleChartSelection}>
+      <CardContent style={{ textAlign: 'center' }}>
         <img
-          src={`/images/cards/${chartType.toLowerCase().replace(" ", "-")}.png`}
+          src={`/images/cards/${chartType.toLowerCase().replace(' ', '-')}.png`}
           alt={`${chartType} Image`}
           height={250}
           //width={250}
-          style={{ marginBottom: "10px" }}
+          style={{ marginBottom: '10px' }}
         />
         <Typography variant="h6" component="h2">
           {chartType}
-          <br />
-          {description}
+            <br/>
+            {description}
         </Typography>
       </CardContent>
     </Card>