Revert "Add stacked bar charts to progress report table (#3224)" (#3236)

This reverts commit 7d9ba42.

CHANGELOG.md

@@ -22,7 +22,6 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.md).
 - Tree groups can now be activated. This allows to rename a tree group analogous to renaming a tree. Also, toggling the visibility of a tree group can now be done by using the shortcuts "1" and "2". [#3066](https://github.com/scalableminds/webknossos/pull/3066)
 - Added the possibility to upload multiple NML files during task creation, even if they are not in a zip archive
 - Added the possibility to supply a dedicated "sorting date" for datasets to change the sorting order in the gallery view, by default the creation date is used [#3124](https://github.com/scalableminds/webknossos/pull/3124)
-- Added bar-chart visualization to project progress report. [#3224](https://github.com/scalableminds/webknossos/pull/3224)
 - Added a button to collapse all comments. [#3215](https://github.com/scalableminds/webknossos/pull/3215)
 - The datasets in the dashboard are now sorted according to their user-specific usage. As a result, relevant datasets should appear at the top of the list. [#3206](https://github.com/scalableminds/webknossos/pull/3206)
 

app/assets/javascripts/admin/statistic/project_progress_report_view.js

@@ -1,14 +1,13 @@
 // @flow
 import * as React from "react";
-import { Tag, Icon, Spin, Table, Card } from "antd";
+import { Icon, Spin, Table, Card } from "antd";
 import * as Utils from "libs/utils";
 import Loop from "components/loop";
 import { getProjectProgressReport } from "admin/admin_rest_api";
 import type { APIProjectProgressReportType, APITeamType } from "admin/api_flow_types";
 import FormattedDate from "components/formatted_date";
 import Toast from "libs/toast";
 import messages from "messages";
-import StackedBarChart, { colors } from "components/stacked_bar_chart";
 import TeamSelectionForm from "./team_selection_form";
 
 const { Column, ColumnGroup } = Table;
@@ -116,47 +115,42 @@ class ProjectProgressReportView extends React.PureComponent<{}, State> {
               title="Tasks"
               dataIndex="totalTasks"
               sorter={Utils.compareBy(typeHint, project => project.totalTasks)}
-              render={number => number.toLocaleString()}
             />
             <ColumnGroup title="Instances">
               <Column
                 title="Total"
                 dataIndex="totalInstances"
                 sorter={Utils.compareBy(typeHint, project => project.totalInstances)}
-                render={number => number.toLocaleString()}
               />
               <Column
-                title={<Tag color={colors.finished}>Finished</Tag>}
-                dataIndex="finishedInstances"
-                sorter={Utils.compareBy(typeHint, project => project.finishedInstances)}
-                render={(text, item) => ({
-                  props: {
-                    colSpan: 3,
-                  },
-                  children: (
-                    <StackedBarChart
-                      a={item.finishedInstances}
-                      b={item.activeInstances}
-                      c={item.openInstances}
-                    />
-                  ),
-                })}
+                title="Open"
+                dataIndex="openInstances"
+                sorter={Utils.compareBy(typeHint, project => project.openInstances)}
+                render={(text, item) =>
+                  `${item.openInstances} (${Math.round(
+                    (item.openInstances / item.totalInstances) * 100,
+                  )} %)`
+                }
               />
               <Column
-                title={<Tag color={colors.active}>Active</Tag>}
+                title="Active"
                 dataIndex="activeInstances"
                 sorter={Utils.compareBy(typeHint, project => project.activeInstances)}
-                render={() => ({ props: { colSpan: 0 }, children: null })}
+                render={(text, item) =>
+                  `${item.activeInstances} (${Math.round(
+                    (item.activeInstances / item.totalInstances) * 100,
+                  )} %)`
+                }
               />
               <Column
-                title={
-                  <Tag color={colors.open} style={{ color: colors.openFG }}>
-                    Open
-                  </Tag>
+                title="Finished"
+                dataIndex="finishedInstances"
+                sorter={Utils.compareBy(typeHint, project => project.finishedInstances)}
+                render={(text, item) =>
+                  `${item.finishedInstances} (${Math.round(
+                    (item.finishedInstances / item.totalInstances) * 100,
+                  )} %)`
                 }
-                dataIndex="openInstances"
-                sorter={Utils.compareBy(typeHint, project => project.openInstances)}
-                render={() => ({ props: { colSpan: 0 }, children: null })}
               />
             </ColumnGroup>
           </Table>