style fixes to charts

app/src/components/charts/BarChart.js

@@ -5,13 +5,15 @@ import {
 } from "@sgratzl/chartjs-chart-boxplot";
 import { Chart, registerables } from "chart.js";
 import { externalTooltipHandler } from "./helpers";
+import { useTheme } from "@mui/material/styles";
 Chart.register(...registerables, BoxPlotController, BoxAndWiskers);
 
 import { blue, green, orange, purple, red } from "@mui/material/colors";
 import { alpha } from "@mui/material/styles"; // Import alpha utility if you're using MUI v5 or later
 
 const BarChart = (props) => {
  const { data, chartId, showX, showColors, targets } = props;
+ const theme = useTheme();
 
  // Function to get color array
  const muiColors = [blue[500], green[500], orange[500], purple[500], red[500]];
@@ -51,6 +53,7 @@ const BarChart = (props) => {
  stacked: true,
  display: showX || (targets && targets.length < 5),
  ticks: {
+ color: theme.palette.text.primary,
  font: {
  size: 10,
  },
@@ -79,7 +82,7 @@ const BarChart = (props) => {
  return () => {
  myChart.destroy();
  };
- }, [data, chartId, showX, targets]);
+ }, [data, chartId, showX, targets, theme]);
 
  return <canvas id={chartId}></canvas>;
 };

app/src/components/charts/HorizontalBoxPlot.js

@@ -5,10 +5,12 @@ import {
 } from "@sgratzl/chartjs-chart-boxplot";
 import { Chart, registerables } from "chart.js";
 import { externalTooltipHandler } from "../charts/helpers";
+import { useTheme } from "@mui/material/styles";
 Chart.register(...registerables, BoxPlotController, BoxAndWiskers);
 
 const HorizontalBoxPlot = (props) => {
  const { data, chartId } = props;
+ const theme = useTheme();
 
  useEffect(() => {
  if (!data) {
@@ -64,6 +66,7 @@ const HorizontalBoxPlot = (props) => {
  min: data.min,
  max: data.max,
  ticks: {
+ color: theme.palette.text.primary,
  font: {
  size: 10,
  },
@@ -81,7 +84,7 @@ const HorizontalBoxPlot = (props) => {
  return () => {
  myChart.destroy();
  };
- }, [data, chartId]);
+ }, [data, chartId, theme]);
 
  return <canvas id={chartId}></canvas>;
 };

app/src/components/charts/StackedBarChart.js

@@ -5,10 +5,13 @@ import {
 } from "@sgratzl/chartjs-chart-boxplot";
 import { Chart, registerables } from "chart.js";
 import { externalTooltipHandler } from "./helpers";
+import { useTheme } from "@mui/material/styles";
 Chart.register(...registerables, BoxPlotController, BoxAndWiskers);
 
 const StackedBarChart = (props) => {
  const { data, chartId, showX, targets } = props;
+ const theme = useTheme();
+
  useEffect(() => {
  if (!data || data.length === 0) {
  return;
@@ -42,6 +45,7 @@ const StackedBarChart = (props) => {
  stacked: true,
  display: showX || categories.length < 5,
  ticks: {
+ color: theme.palette.text.primary,
  font: {
  size: 10,
  },
@@ -70,7 +74,7 @@ const StackedBarChart = (props) => {
  return () => {
  myChart.destroy();
  };
- }, [data, chartId, showX, targets]);
+ }, [data, chartId, showX, targets, theme]);
 
  return <canvas id={chartId}></canvas>;
 };

app/src/components/run/EvaluationTable.js

@@ -4,15 +4,40 @@ import { DataGrid } from "@mui/x-data-grid";
 import { Card, CardContent, Typography } from "@mui/material";
 import styled from "@emotion/styled";
 import BarChart from "../charts/BarChart";
+import { grey } from "@mui/material/colors";
 
 const ChartBox = styled.div`
  width: 275px;
  height: 50px;
 `;
 
+const ChartBoxSmall = styled.div`
+ width: 135px;
+ height: 50px;
+`;
+
 const columns = [
  { field: "measure", headerName: "Evaluation measure", width: 240 },
- { field: "value", headerName: "Value", width: 200 },
+ {
+ field: "value",
+ headerName: "Value",
+ width: 200,
+ renderCell: (params) => {
+ const parts = params.value.split("±");
+ // Check if the split operation found a "±" and thus split the text into two parts
+ if (parts.length === 2) {
+ return (
+ <div>
+ {parts[0]}
+ <span style={{ color: grey[500] }}>&plusmn;{parts[1]}</span>
+ </div>
+ );
+ } else {
+ // If there's no "±" symbol in the text, just return the original text
+ return <div>{params.value}</div>;
+ }
+ },
+ },
  {
  field: "array_data",
  headerName: "Per class",
@@ -35,20 +60,20 @@ const columns = [
  {
  field: "per_fold",
  headerName: "Per fold",
- width: 280,
+ width: 145,
  renderCell: (params) => {
  const chartId = `foldchart-${params.row.id}`;
  const values = Array.isArray(params.value) ? params.value.flat() : [];
  return (
- <ChartBox>
+ <ChartBoxSmall>
  <BarChart
  data={values}
  chartId={chartId}
  showX={false}
  showColors={false}
  targets={[...Array(values.length).keys()]}
  />
- </ChartBox>
+ </ChartBoxSmall>
  );
  },
  },
@@ -58,7 +83,7 @@ const EvaluationTable = ({ data }) => {
  const rows = data.evaluations.map((item, index) => ({
  id: index,
  measure: item.evaluation_measure,
- value: item.value !== undefined ? `${item.value} +- ${item.stdev}` : "",
+ value: item.value !== undefined ? `${item.value} \u00B1 ${item.stdev}` : "",
  array_data: item.array_data,
  per_fold: item.per_fold,
  targets: data.run_task.target_values,