Skip to content
Snippets Groups Projects
Commit 514c2987 authored by mjpsoohoo's avatar mjpsoohoo
Browse files

Revert "Added chart type descriptions"

This reverts commit d6140d88.
parent d6140d88
Branches Matthew
No related tags found
No related merge requests found
......@@ -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>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment