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,6 +13,7 @@ function App() {
       <Gallery/>
       <Content/>
       <CustomFooter/>
+      <Task/>
     </>
   )
 }

labs/lab6/src/Task.tsx

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

site/src/chart/components/GroupChart.tsx

@@ -10,21 +10,43 @@ type GroupProps = {
 };
 
 
+
+
 function GroupChart({ data }: GroupProps) {
     const [isBar, setIsBar] = useState(true);
+    const [doStack, setDoStack] = useState(false);
     const [series, setSeries] = useState({
-        'max': true,
-        'mean': false,
         'min': false,
+        'mean': false,
+        'max': true,
     });
+
+    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 ? ('value' as const) : undefined,
+            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) 
         }
     });
+        console.log(seriesY)
+    console.log(doStack)
     const chartSetting = {
         yAxis: [{ label: 'Price ($)' }],
         height: 400,
@@ -33,7 +55,7 @@ function GroupChart({ data }: GroupProps) {
     return (
         <Container maxWidth="lg">
             {isBar && <BarChart
-                dataset={data}
+                dataset={doStack ? deltas : data}
                 xAxis={[{ scaleType: 'band', dataKey: 'group' }]}
                 series={seriesY}
                 slotProps={{
@@ -43,7 +65,7 @@ function GroupChart({ data }: GroupProps) {
                 }}
                 {...chartSetting}
             />}
-            {!isBar &&<LineChart
+            {!isBar && <LineChart
                 dataset={data}
                 xAxis={[{ scaleType: 'band', dataKey: 'group' }]}
                 series={seriesY}
@@ -54,7 +76,7 @@ function GroupChart({ data }: GroupProps) {
                 }}
                 {...chartSetting}
             />}
-            <SettingChart series={series} setSeries={setSeries} isBar={isBar} setIsBar={setIsBar} />
+            <SettingChart series={series} setSeries={setSeries} isBar={isBar} setIsBar={setIsBar} doStack={doStack} setDoStack={setDoStack} />
         </Container>
     )
 };

site/src/chart/components/SettingChart.tsx

@@ -7,6 +7,8 @@ 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 = {
@@ -19,9 +21,12 @@ 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 }: CheckboxProps) {
+function SettingChart({ series, setSeries, isBar, setIsBar, doStack, setDoStack }: CheckboxProps) {
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setSeries({
       ...series,
@@ -29,6 +34,10 @@ function SettingChart({ series, setSeries, isBar, setIsBar }: CheckboxProps) {
     });
   };
 
+  const changeDoStack =(event:React.ChangeEvent<HTMLInputElement>)=>{
+    setDoStack(event.target.checked)
+  }
+
   const handleRadioButtonChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setIsBar(event.target.value === "bar");
   };
@@ -89,6 +98,17 @@ function SettingChart({ series, setSeries, isBar, setIsBar }: CheckboxProps) {
           }
           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;
-    max:number;
     mean:number;
+    max:number;
 }>;
 
 const gropuedPrices = groupBycolumns.map((col) => {
@@ -184,9 +184,10 @@ const gropuedPrices = groupBycolumns.map((col) => {
         out.push({
             id: out.length + 1,
             group: key,
-            min: d3.min(prices) ?? 0,
-            max: d3.max(prices) ?? 0,
             mean: Math.round((d3.mean(prices) ?? 0)*1000)/1000,
+            max: d3.max(prices) ?? 0,
+            min: d3.min(prices) ?? 0,
+
         });
     });
 

site/src/main/components/Gallery.tsx

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

site/src/quiz/components/SortableItem.tsx

@@ -30,6 +30,7 @@ export function SortableItem({ item ,isDisabled}: SortableItemProps) {
               sx={{
               border: '1px solid gray',
               borderRadius: '5px',
+              height:"4.4em"
             }}>
             <ListItemIcon>
               <DragIndicatorIcon />

site/src/quiz/features/Matching.tsx

@@ -34,6 +34,7 @@ function Matching({ tasks, index }: ComponentProps) {
                   border: '1px solid gray',
                   borderRadius: '5px',
                   textAlign: 'right',
+                  height:"4.4em"
                 }}>
                 <ListItemText primary={item.question} />
               </ListItemButton>

site/src/quiz/features/Quiz.tsx

@@ -32,9 +32,9 @@ function QuizStats() {
 
   const quizPartText = (counter: number, len: number, taskIndex:number) => {
     if (counter == len) {
-      return <Typography key={taskIndex}>Задание {taskIndex+1}: все ответы верные</Typography>
+      return <Typography key={taskIndex}>Task {taskIndex+1}: everethyng is correct</Typography>
     }
-    return  <Typography key={taskIndex}>Задание {taskIndex+1}: верно {counter}/{len}</Typography>
+    return  <Typography key={taskIndex}>Task {taskIndex+1}: correct {counter}/{len}</Typography>
   }
 
 

site/src/quiz/features/SortableList.tsx

@@ -33,7 +33,7 @@ function SortableList({ index}: ComponentProps) {
         strategy={verticalListSortingStrategy}>
         <List>
           {draggedItems.map((item) => (
-            <SortableItem key={String(item)} item={String(item)} id={String(item)} isDisabled={isDisabled}/>
+            <SortableItem key={String(item)} item={String(item)} id={String(item)} isDisabled={isDisabled} />
           ))}
         </List>
       </SortableContext>

site/src/quiz/quizData.tsx

@@ -12,81 +12,141 @@ export type tQuizzes = {
 
 export const quiz: tQuizzes = [
   {
-    "id": 1,
-    "type": "M",
-    "title": "вопросй",
+    "id": 0,
+    "type": "C",
+    "title": "RAM price jump: pick true statements",
     "tasks": [
       {
-        "question": "адын?",
-        "answer": "адын"
+        "question": "AI server demand pushed DRAM contracts up in 2024-2025",
+        "answer": true
       },
       {
-        "question": "2",
-        "answer": "2"
+        "question": "Laptop DDR5 demand was the main global driver",
+        "answer": false
       },
       {
-        "question": "3",
-        "answer": "3"
+        "question": "HBM supply limits affected overall memory pricing",
+        "answer": true
       },
       {
-        "question": "4",
-        "answer": "4"
+        "question": "Memory prices stayed flat through 2025",
+        "answer": false
+      }
+    ]
+  },
+  {
+    "id": 1,
+    "type": "M",
+    "title": "Match RAM market terms",
+    "tasks": [
+      {
+        "question": "HBM",
+        "answer": "High Bandwidth Memory"
       },
+      {
+        "question": "DRAM",
+        "answer": "Dynamic Random Access Memory"
+      },
+      {
+        "question": "NAND",
+        "answer": "Flash storage memory"
+      },
+      {
+        "question": "Contract price",
+        "answer": "Long-term negotiated memory price"
+      }
     ]
   },
   {
     "id": 2,
     "type": "S",
-    "title": "Вопрос 2 СОРТИРУЙ",
+    "title": "Sort AI stack by deployment flow",
     "tasks": [
       {
         "question": "1",
-        "answer": 1
+        "answer": "Collect and clean data"
       },
       {
-        "question": "22",
-        "answer": 2
+        "question": "2",
+        "answer": "Train model"
       },
       {
-        "question": "333",
-        "answer": 3
+        "question": "3",
+        "answer": "Optimize for inference"
       },
       {
-        "question": "4444",
-        "answer": 4
-      },
-      {
-        "question": "5555",
-        "answer": 5
-      },
+        "question": "4",
+        "answer": "Deploy and monitor"
+      }
     ]
-  }
-,
+  },
   {
     "id": 3,
     "type": "C",
-    "title": "Вопрос 3 Выбирай",
+    "title": "AI trends: choose true",
     "tasks": [
       {
-        "question": "да",
+        "question": "Edge AI adoption grew in 2024-2026",
         "answer": true
       },
       {
-        "question": "нет",
+        "question": "LLMs removed the need for GPUs",
         "answer": false
       },
       {
-        "question": "да1",
+        "question": "Smaller task-specific models are still widely used",
         "answer": true
       },
       {
-        "question": "нет1",
+        "question": "AI inference always runs only in cloud",
         "answer": false
+      }
+    ]
+  },
+  {
+    "id": 4,
+    "type": "M",
+    "title": "Match low-energy embedded methods",
+    "tasks": [
+      {
+        "question": "Sleep mode",
+        "answer": "Turns off CPU blocks between events"
       },
       {
-        "question": "да2",
-        "answer": true
+        "question": "DVFS",
+        "answer": "Adjusts voltage and frequency to save power"
       },
+      {
+        "question": "Interrupt wakeup",
+        "answer": "Wakes MCU only on external/internal trigger"
+      },
+      {
+        "question": "Duty cycling",
+        "answer": "Runs sensors and radio in short active bursts"
+      }
+    ]
+  },
+  {
+    "id": 5,
+    "type": "S",
+    "title": "Sort low-energy embedded design steps",
+    "tasks": [
+      {
+        "question": "1",
+        "answer": "Measure baseline current"
+      },
+      {
+        "question": "2",
+        "answer": "Set sleep and wake strategy"
+      },
+      {
+        "question": "3",
+        "answer": "Tune radio and sensor duty cycle"
+      },
+      {
+        "question": "4",
+        "answer": "Validate battery-life target"
+      }
     ]
   }
 ]