hw 7 updates ( Task done)

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)&&(data.length<20)  ? ('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,
+
         });
     });