hw 8 done (Thank You!)

labs/lab6/src/App.tsx

@@ -2,7 +2,7 @@ import NavBar from './components/Navbar'
 import Gallery from "./components/Gallery";
 import Content from "./components/Content";
 import CustomFooter from "./components/CustomFooter";
-import Task from "./Task"
+
 
 import './styles/App.css'
 
@@ -13,7 +13,6 @@ function App() {
       <Gallery/>
       <Content/>
       <CustomFooter/>
-      <Task/>
     </>
   )
 }

labs/lab6/src/Task.tsx

@@ -1,38 +0,0 @@
-import { useState,useEffect } from "react"
-import type {ReactElement} from "react"
-const lines = [
-    "Ночь, улица, фонарь, аптека,",
-    "Бессмыссленный и тусклый свет.",
-    "Живи ещё хоть четверть века - ",
-    "Всё будет так. Исхода нет.",
-    "Умрёшь -  начнёшь опять сначала",
-    "И повториться всё как встарь:",
-    "Ночь, ледяная рябь канала",
-    "Аптека, Улица, фонарь."
-];
-
-interface ComponentProps {
-    Inputinterval: number
-}
-
-
-const Task = ({Inputinterval}:ComponentProps): ReactElement =>{
-    const [interval, updateInterval] = useState<number>(Inputinterval);
-    const [lineIdx, updateLineIdx] = useState<number>(0);
-    const updateLine = ():void =>{
-        updateLineIdx((lineIdx+1)%lines.length);
-    }
-    useEffect(()=>{
-        const intervalId = setInterval(updateLine,Number(interval));
-        return ()=>{ clearInterval(intervalId)}
-    })
-    return(
-        <>
-        <input type="number" value={interval} onChange={(event)=>{updateInterval(Number(event.target.value))}}></input>
-        <div className="blackDiv">
-            <h2 className="bigWhite">{lines[lineIdx]}</h2>
-        </div>
-        </>
-    )
-}
-export default Task;

labs/lab6/src/components/BuildCard.tsx

@@ -24,10 +24,8 @@ interface ComponentProps {
 
 
 function BuildCard({ building,cardNum} : ComponentProps) {
-    const reverseModifier = cardNum % 2 == 0 ? "-reverse" : "";
-
     return (
-      <Card sx={{  display: 'flex', flexDirection:{xs:"column", sm:"row"+reverseModifier} }} >
+      <Card  style={cardNum%2==0?{'flexDirection':'row-reverse'}:{}}sx={{  display: 'flex' }} >
         <CardMedia
             component="img"
             alt={ building.title }

site/src/chart/components/GroupChart.tsx

@@ -10,43 +10,21 @@ type GroupProps = {
 };
 
 
-
-
 function GroupChart({ data }: GroupProps) {
     const [isBar, setIsBar] = useState(true);
-    const [doStack, setDoStack] = useState(false);
     const [series, setSeries] = useState({
-        'min': false,
-        'mean': false,
         'max': true,
+        'mean': false,
+        'min': false,
     });
-
-    const deltas = data.map((val) => {
-        const out = { ...val };
-        const deltaMinMean = (val["mean"] - (Number(series["min"])?val["min"]:0));
-        const deltaMeanMax = (val["max"] - (Number(series["mean"])?val["mean"]:(series["min"]?val["min"]:0)));
-        out["mean"] = deltaMinMean;
-        out["max"] = deltaMeanMax;
-        return out;
-    })
-    const formatLabel =  (key:string)=>(value:number,didx:{dataIndex:number}):number => {
-        const idx= didx["dataIndex"]
-        return String(data[idx][key]);
-    }
-
     const selectedSeries = Object.entries(series).filter(item => item[1] === true);
-
     let seriesY = selectedSeries.map(item => {
         return {
             dataKey: item[0],
             label: item[0],
-            barLabel: (selectedSeries.length === 1) && (data.length < 20) ? ('value' as const) : undefined,
-            stack: doStack && isBar ? 'prices' : undefined,
-            valueFormatter: (doStack && isBar)? formatLabel(item[0]):(v:number)=>String(v) 
+            barLabel: selectedSeries.length === 1 ? ('value' as const) : undefined,
         }
     });
-        console.log(seriesY)
-    console.log(doStack)
     const chartSetting = {
         yAxis: [{ label: 'Price ($)' }],
         height: 400,
@@ -55,7 +33,7 @@ function GroupChart({ data }: GroupProps) {
     return (
         <Container maxWidth="lg">
             {isBar && <BarChart
-                dataset={doStack ? deltas : data}
+                dataset={data}
                 xAxis={[{ scaleType: 'band', dataKey: 'group' }]}
                 series={seriesY}
                 slotProps={{
@@ -65,7 +43,7 @@ function GroupChart({ data }: GroupProps) {
                 }}
                 {...chartSetting}
             />}
-            {!isBar && <LineChart
+            {!isBar &&<LineChart
                 dataset={data}
                 xAxis={[{ scaleType: 'band', dataKey: 'group' }]}
                 series={seriesY}
@@ -76,7 +54,7 @@ function GroupChart({ data }: GroupProps) {
                 }}
                 {...chartSetting}
             />}
-            <SettingChart series={series} setSeries={setSeries} isBar={isBar} setIsBar={setIsBar} doStack={doStack} setDoStack={setDoStack} />
+            <SettingChart series={series} setSeries={setSeries} isBar={isBar} setIsBar={setIsBar} />
         </Container>
     )
 };

site/src/chart/components/SettingChart.tsx

@@ -7,8 +7,6 @@ import Stack from '@mui/material/Stack';
 import Divider from '@mui/material/Divider';
 import RadioGroup from '@mui/material/RadioGroup';
 import Radio from '@mui/material/Radio';
-import Switch from '@mui/material/Switch';
-
 
 
 type tSeries = {
@@ -21,12 +19,9 @@ type CheckboxProps = {
   setSeries: React.Dispatch<React.SetStateAction<tSeries>>;
   isBar: boolean;
   setIsBar: React.Dispatch<React.SetStateAction<boolean>>
-  doStack: boolean;
-  setDoStack: React.Dispatch<React.SetStateAction<boolean>>
-
 };
 
-function SettingChart({ series, setSeries, isBar, setIsBar, doStack, setDoStack }: CheckboxProps) {
+function SettingChart({ series, setSeries, isBar, setIsBar }: CheckboxProps) {
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setSeries({
       ...series,
@@ -34,10 +29,6 @@ function SettingChart({ series, setSeries, isBar, setIsBar, doStack, setDoStack
     });
   };
 
-  const changeDoStack =(event:React.ChangeEvent<HTMLInputElement>)=>{
-    setDoStack(event.target.checked)
-  }
-
   const handleRadioButtonChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setIsBar(event.target.value === "bar");
   };
@@ -98,17 +89,6 @@ function SettingChart({ series, setSeries, isBar, setIsBar, doStack, setDoStack
           }
           label="Min price"
         />
-        
-       <FormControlLabel
-          control={
-        <Switch 
-          checked={doStack}
-          onChange={changeDoStack} 
-          
-          />
-          }
-           label="Do Stack"
-        />
       </FormControl>
     </Stack>
   )

site/src/data.tsx

@@ -173,8 +173,8 @@ type GroupedRamPrice =Array<{
     id: number;
     group: string | number;
     min:number;
-    mean:number;
     max:number;
+    mean:number;
 }>;
 
 const gropuedPrices = groupBycolumns.map((col) => {
@@ -184,10 +184,9 @@ const gropuedPrices = groupBycolumns.map((col) => {
         out.push({
             id: out.length + 1,
             group: key,
-            mean: Math.round((d3.mean(prices) ?? 0)*1000)/1000,
-            max: d3.max(prices) ?? 0,
             min: d3.min(prices) ?? 0,
-
+            max: d3.max(prices) ?? 0,
+            mean: Math.round((d3.mean(prices) ?? 0)*1000)/1000,
         });
     });
 

site/src/main/components/Gallery.tsx

@@ -15,7 +15,7 @@ function Gallery() {
           sx={{
             columnCount: {
               xs: '1 !important',
-              sm: '1 !important',
+              sm: '3 !important',
               md: '3 !important',
               lg: '3 !important',
             },