diff --git a/packages/qmongjs/src/components/IndicatorTable/IndicatortablebodyV2/index.tsx b/packages/qmongjs/src/components/IndicatorTable/IndicatortablebodyV2/index.tsx index 2e15d02259..904a5e4135 100644 --- a/packages/qmongjs/src/components/IndicatorTable/IndicatortablebodyV2/index.tsx +++ b/packages/qmongjs/src/components/IndicatorTable/IndicatortablebodyV2/index.tsx @@ -319,6 +319,7 @@ const IndicatorRow = (props: { data={indData} unitNames={unitNames} context={context} + year={year} /> diff --git a/packages/qmongjs/src/components/IndicatorTable/chartrowV2/index.tsx b/packages/qmongjs/src/components/IndicatorTable/chartrowV2/index.tsx index 4f67434251..5770bf6271 100644 --- a/packages/qmongjs/src/components/IndicatorTable/chartrowV2/index.tsx +++ b/packages/qmongjs/src/components/IndicatorTable/chartrowV2/index.tsx @@ -1,4 +1,13 @@ import { DataPoint, IndicatorData } from "types"; +import { BarChart } from "@mui/x-charts"; +import { + Select, + FormControl, + InputLabel, + SelectChangeEvent, + MenuItem, +} from "@mui/material"; +import { useState } from "react"; import { LinePlot } from "@mui/x-charts/LineChart"; import { ChartDataProvider, @@ -20,17 +29,24 @@ type chartRowV2Props = { data: IndicatorData; unitNames: string[]; context: string; + year: number; }; type Point = { x: number; y: number | null }; export const ChartRowV2 = (props: chartRowV2Props) => { - const { data, unitNames, context } = props; + const { data, unitNames, context, year } = props; if (data.data === undefined) { return
No data
; } + const [figureType, setFigureType] = useState("line"); + + const handleChange = (event: SelectChangeEvent) => { + setFigureType(event.target.value as string); + }; + // Format to {x, y} const reshapedData = unitNames.map((unitName: string) => { return data @@ -86,7 +102,7 @@ export const ChartRowV2 = (props: chartRowV2Props) => { }); // Add unit name label - const labelledData = paddedData.map((row, i) => { + const lineData = paddedData.map((row, i) => { return { data: row.map((point) => point.y), label: unitNames[i], @@ -95,6 +111,20 @@ export const ChartRowV2 = (props: chartRowV2Props) => { } as LineSeriesType; }); + const barData = paddedData + .map((row) => { + return row + .filter((point) => { + return point.x === year; + }) + .map((row) => row.y); + }) + .flat(); + + const valueFormatter = (value: number | null) => { + return `${value && Math.round(value * 100)} %`; + }; + type BackgroundProps = { data: IndicatorData; }; @@ -146,36 +176,58 @@ export const ChartRowV2 = (props: chartRowV2Props) => { }; return ( - - + + + Figurtype + + + + - - - - - - - - - - - + {figureType == "line" ? ( + + + + + + + + + + + + + ) : figureType === "bar" ? ( + + + + ) : null} + ); };