style fixes to charts

openml · Feb 3, 2024 · a94978b · a94978b
1 parent 35624fe
commit a94978b
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 8 deletions.
diff --git a/app/src/components/charts/BarChart.js b/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>;
 };

diff --git a/app/src/components/charts/HorizontalBoxPlot.js b/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>;
 };

diff --git a/app/src/components/charts/StackedBarChart.js b/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>;
 };

diff --git a/app/src/components/run/EvaluationTable.js b/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,