Skip to content

Commit

Permalink
micro responsiveness added
Browse files Browse the repository at this point in the history
  • Loading branch information
@theDevSoham
theDevSoham committed Apr 28, 2023
1 parent 78cfe6d commit 74a979b
Show file tree
Hide file tree
Showing 6 changed files with 182 additions and 40 deletions.
8 changes: 4 additions & 4 deletions src/components/Body.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,15 +28,15 @@ const Body: React.FC = () => {
// return statement
return (
<section className="w-full h-8/10 flex flex-col justify-center items-center">
<div className="w-full h-8/10 px-4">
<div className="w-full h-8/10 px-4 ip5_h-1/2 ipx_h-6/10 ipD_h-6/10 ipDP_h-7/10">
{<ChartDisplay chartData={currentChartData} currentChart={chartNum} />}
</div>
<div className="w-full h-2/10 flex justify-center items-center">
<div className="w-full h-2/10 flex justify-center items-center ip5_h-1/2 ipx_h-4/10 ipD_h-4/10 ipDP_h-3/10">
<button
className="bg-blue-700 text-white font-bold py-4 px-8 rounded"
className="bg-blue-700 text-white font-bold py-4 px-8 rounded ip5_py-4 ip5_px-8 ipx_py-4 ipx_px-8 ipD_py-4 ipD_px-8 ipDP_py-4 ipDP_px-8"
onClick={updateChart}
>
Show Chart {chartNum === 1 ? 2 : 1}
<span className='text-md ip5_text-md ipx_text-md ipD_text-md ipDP_text-md'>Show Chart {chartNum === 1 ? 2 : 1}</span>
</button>
</div>
</section>
Expand Down
75 changes: 43 additions & 32 deletions src/components/ChartDisplay.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,46 +51,57 @@ const ChartDisplay: React.FC<ChartPropTypes> = (props) => {
...currentOption,
title: {
...currentOption.title,
text: `Chart ${props.currentChart}`
text: `Chart ${props.currentChart}`,
padding: 0
},
legend: {
...currentOption.legend,
data: [
`Chart ${props.currentChart} - Line`,
`Chart ${props.currentChart} - Bar`,
`Chart ${props.currentChart} - Area`
]
show: false
},
xAxis: {
...currentOption.xAxis,
data: props.chartData.horizontal
data: props.chartData.horizontal,
name: props.chartData.nameX,
nameGap: 10,
nameLocation: 'end',
nameTextStyle: {
fontSize: 20,
fontWeight: 'bold',
align: 'center'
}
},
series: [
{
...currentOption.series[0],
name: `Chart ${props.currentChart} - Line`,
type: 'line',
smooth: true,
areaStyle: undefined,
data: props.chartData.vertical
},
{
...currentOption.series[0],
name: `Chart ${props.currentChart} - Bar`,
type: 'bar',
smooth: false,
areaStyle: undefined,
data: props.chartData.vertical
},
{
...currentOption.series[0],
name: `Chart ${props.currentChart} - Area`,
type: 'line',
smooth: true,
areaStyle: { normal: {} },
data: props.chartData.vertical
yAxis: {
...currentOption.yAxis,
name: props.chartData.nameY,
nameGap: 20,
nameLocation: 'end',
nameTextStyle: {
fontSize: 20,
fontWeight: 'bold',
align: 'center'
}
]
},
series: props.currentChart === 1
? [
{
...currentOption.series[0],
name: `${props.chartData.nameY} - Line`,
type: 'line',
smooth: true,
areaStyle: undefined,
data: props.chartData.vertical
}
]
: [
{
...currentOption.series[0],
name: `${props.chartData.nameY} - Bar`,
type: 'bar',
smooth: true,
areaStyle: undefined,
data: props.chartData.vertical
}
]
}
})
}, [props.chartData, props.currentChart])
Expand Down
6 changes: 4 additions & 2 deletions src/components/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,10 @@ import React from 'react'

const Header: React.FC = () => {
return (
<section className='w-full h-2/10 flex justify-center items-center'>
<h1 className="text-4xl text-center text-blue-500">React Data Visualizer</h1>
<section className="w-full h-2/10 flex justify-center items-center">
<h1 className="text-4xl text-center text-blue-500 ip5_text-3xl ipx_text-3xl ipD_text-5xl ipDP_text-5xl">
React Data Visualizer
</h1>
</section>
)
}
Expand Down
109 changes: 109 additions & 0 deletions src/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,11 @@ button:hover {
color: #fff;
}

.text-md {
font-size: 1.125rem;
line-height: 1.75rem;
}

.font-bold {
font-weight: 700;
}
Expand Down Expand Up @@ -142,4 +147,108 @@ button:hover {
100% {
transform: rotate(360deg);
}
}


/* Media queries */


/* iPhone 5 */

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) {
.ip5_h-1\/2 {
height: 50%;
}
.ip5_text-3xl {
font-size: 1.4rem;
}
.ip5_py-4 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.ip5_px-8 {
padding-left: 1rem;
padding-right: 1rem;
}
.ip5_text-md {
font-size: 1rem;
}
}


/* iPhone X */

@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-device-pixel-ratio: 3) {
.ipx_h-6\/10 {
height: 60%;
}
.ipx_h-4\/10 {
height: 40%;
}
.ipx_text-3xl {
font-size: 1.6rem;
}
.ipx_py-4 {
padding-top: 1rem;
padding-bottom: 1rem;
}
.ipx_px-8 {
padding-left: 2rem;
padding-right: 2rem;
}
.ipx_text-md {
font-size: 1.2rem;
}
}


/* iPad */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
.ipD_h-6\/10 {
height: 60%;
}
.ipD_h-4\/10 {
height: 40%;
}
.ipD_text-5xl {
font-size: 3rem;
}
.ipD_py-4 {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
.ipD_px-8 {
padding-left: 3rem;
padding-right: 3rem;
}
.ipD_text-md {
font-size: 2rem;
}
}


/* iPad Pro */

@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) {
.ipDP_h-7\/10 {
height: 70%;
}
.ipDP_h-3\/10 {
height: 30%;
}
.ipDP_text-5xl {
font-size: 5rem;
}
.ipDP_py-4 {
padding-top: 2rem;
padding-bottom: 2rem;
}
.ipDP_px-8 {
padding-left: 4rem;
padding-right: 4rem;
}
.ipDP_text-md {
font-size: 3rem;
}
}
20 changes: 20 additions & 0 deletions src/interfaces/interface.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
interface ChartDataType {
horizontal: number[]
vertical: number[]
nameX: string
nameY: string
}

interface SeriesType {
Expand All @@ -23,6 +25,7 @@ interface OptionType {
legend: {
data: string[]
padding: number | string
show?: boolean
}
toolbox: {
feature: {
Expand All @@ -42,12 +45,29 @@ interface OptionType {
name?: string
nameLocation?: 'start' | 'center' | 'middle' | 'end'
nameGap?: number
nameTextStyle?: {
fontStyle?: 'normal' | 'italic' | 'oblique'
fontWeight?: 'normal' | 'bold' | 'bolder' | 'lighter' | number
fontFamily?: 'sans-serif' | 'serif' | 'monospace'
fontSize?: number
align?: 'left' | 'center' | 'right'
}
data: number[] | string[]
}
]
yAxis: [
{
type: 'value'
name?: string
nameLocation?: 'start' | 'center' | 'middle' | 'end'
nameGap?: number
nameTextStyle?: {
fontStyle?: 'normal' | 'italic' | 'oblique'
fontWeight?: 'normal' | 'bold' | 'bolder' | 'lighter' | number
fontFamily?: 'sans-serif' | 'serif' | 'monospace'
fontSize?: number
align?: 'left' | 'center' | 'right'
}
}
]
series: SeriesType[]
Expand Down
4 changes: 2 additions & 2 deletions src/static/helpers.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const getChart1Data = (): ChartDataType => {

return item.Ash
})
return { horizontal: flavanoids, vertical: ash }
return { horizontal: flavanoids, vertical: ash, nameX: 'Flavanoids', nameY: 'Ash' }
}

const getChart2Data = (): ChartDataType => {
Expand All @@ -35,7 +35,7 @@ const getChart2Data = (): ChartDataType => {

return item.Magnesium
})
return { horizontal: alcohol, vertical: magnesium }
return { horizontal: alcohol, vertical: magnesium, nameX: 'Alcohol', nameY: 'Magnesium' }
}

export { getChart1Data, getChart2Data }

0 comments on commit 74a979b

Please sign in to comment.