diff --git a/package.json b/package.json
index 5269780b..86fcc700 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
"@emotion/react": "11.11.3",
"@emotion/styled": "11.11.0",
"@graasp/query-client": "2.8.0",
- "@graasp/sdk": "4.1.0",
+ "@graasp/sdk": "4.5.0",
"@graasp/translations": "1.25.2",
"@graasp/ui": "4.9.1",
"@mui/icons-material": "5.15.11",
diff --git a/src/components/space/charts/ActionsByVerbChart.tsx b/src/components/space/charts/ActionsByVerbChart.tsx
index a54d472f..230c3705 100644
--- a/src/components/space/charts/ActionsByVerbChart.tsx
+++ b/src/components/space/charts/ActionsByVerbChart.tsx
@@ -7,7 +7,10 @@ import { Cell, Pie, PieChart, Tooltip } from 'recharts';
import { useAnalyticsTranslation } from '@/config/i18n';
-import { COLORS, CONTAINER_HEIGHT } from '../../../config/constants';
+import {
+ CONTAINER_HEIGHT,
+ getColorForActionTriggerType,
+} from '../../../config/constants';
import { filterActions } from '../../../utils/array';
import { formatActionsByVerb, getActionsByVerb } from '../../../utils/utils';
import ChartContainer from '../../common/ChartContainer';
@@ -69,11 +72,13 @@ const ActionsByVerbChart = (): JSX.Element => {
data={formattedActionsByVerbSorted}
dataKey="percentage"
nameKey="type"
- fill="#82ca9d"
label={({ value }) => `${value}%`}
>
- {formattedActionsByVerbSorted.map((entry, index) => (
- |
+ {formattedActionsByVerbSorted.map((entry) => (
+ |
))}
`${value}%`} />
diff --git a/src/components/space/charts/ItemsByActionChart.tsx b/src/components/space/charts/ItemsByActionChart.tsx
index 1bf679d4..de299d44 100644
--- a/src/components/space/charts/ItemsByActionChart.tsx
+++ b/src/components/space/charts/ItemsByActionChart.tsx
@@ -13,8 +13,8 @@ import {
import { useAnalyticsTranslation } from '@/config/i18n';
import {
- COLORS,
TOP_NUMBER_OF_ITEMS_TO_DISPLAY,
+ getColorForActionTriggerType,
} from '../../../config/constants';
import {
filterActionsByActionTypes,
@@ -75,12 +75,12 @@ const ItemsByActionChart = (): JSX.Element => {
- {types.map((type, index) => (
+ {types.map((type) => (
))}
diff --git a/src/components/space/charts/TotalActionsByVerbChart.tsx b/src/components/space/charts/TotalActionsByVerbChart.tsx
index 5c48c18e..65ab13ad 100644
--- a/src/components/space/charts/TotalActionsByVerbChart.tsx
+++ b/src/components/space/charts/TotalActionsByVerbChart.tsx
@@ -12,7 +12,10 @@ import { Cell, Pie, PieChart, Tooltip } from 'recharts';
import { useAnalyticsTranslation } from '@/config/i18n';
-import { COLORS, DEFAULT_REQUEST_SAMPLE_SIZE } from '../../../config/constants';
+import {
+ DEFAULT_REQUEST_SAMPLE_SIZE,
+ getColorForActionTriggerType,
+} from '../../../config/constants';
import { hooks } from '../../../config/queryClient';
import ChartContainer from '../../common/ChartContainer';
import ChartTitle from '../../common/ChartTitle';
@@ -85,11 +88,13 @@ const TotalActionsByVerbChart = (): JSX.Element | null => {
data={formattedAggregateDataSorted}
dataKey="actionCount"
nameKey="type"
- fill="#82ca9d"
label={({ value }) => `${value}%`}
>
- {formattedAggregateDataSorted.map((entry, index) => (
- |
+ {formattedAggregateDataSorted.map((entry) => (
+ |
))}
`${value}%`} />
diff --git a/src/components/space/charts/UsersByActionChart.tsx b/src/components/space/charts/UsersByActionChart.tsx
index b20f1a1e..3e4771ad 100644
--- a/src/components/space/charts/UsersByActionChart.tsx
+++ b/src/components/space/charts/UsersByActionChart.tsx
@@ -14,7 +14,7 @@ import { useAnalyticsTranslation } from '@/config/i18n';
import {
ACTIONS_BY_USER_MAX_DISPLAYED_USERS,
- COLORS,
+ getColorForActionTriggerType,
} from '../../../config/constants';
import {
filterActionsByActionTypes,
@@ -76,12 +76,12 @@ const UsersByActionByChart = (): JSX.Element => {
- {types.map((type, index) => (
+ {types.map((type) => (
))}
diff --git a/src/config/constants.ts b/src/config/constants.ts
index e6eea0bc..77731421 100644
--- a/src/config/constants.ts
+++ b/src/config/constants.ts
@@ -1,4 +1,4 @@
-import { Context, UnionOfConst } from '@graasp/sdk';
+import { ActionTriggers, Context, UnionOfConst } from '@graasp/sdk';
import {
GRAASP_BUILDER_HOST,
@@ -52,6 +52,48 @@ export const COLORS = [
'#B54A3F',
'#FFFFAF',
];
+export const DEFAULT_ACTION_CELL_COLOR = '#ADADEA';
+
+export const getColorForActionTriggerType = (type: string): string => {
+ switch (type) {
+ case ActionTriggers.Create:
+ return '#20A39E';
+ case ActionTriggers.CollectionView:
+ return '#3066BE';
+ case ActionTriggers.Copy:
+ return '#96CCE6';
+ case ActionTriggers.Delete:
+ return '#61D095';
+ case ActionTriggers.ItemDownload:
+ return '#FFBA49';
+ case ActionTriggers.ItemEmbed:
+ return '#EF5B5B';
+ case ActionTriggers.ItemLike:
+ return '#FFA8A8';
+ case ActionTriggers.ItemSearch:
+ return '#A4036F';
+ case ActionTriggers.ItemUnlike:
+ return '#B54A3F';
+ case ActionTriggers.ItemView:
+ return '#cc3333';
+ case ActionTriggers.LinkOpen:
+ return '#800080';
+ case ActionTriggers.Move:
+ return '#07bc0c';
+ case ActionTriggers.Update:
+ return '#CCD9E5';
+ case ActionTriggers.ChatClear:
+ return '#C4E5F7';
+ case ActionTriggers.ChatCreate:
+ return '#800040';
+ case ActionTriggers.ChatDelete:
+ return '#004080';
+ case ActionTriggers.ChatUpdate:
+ return '#E5CCE5';
+ default:
+ return DEFAULT_ACTION_CELL_COLOR;
+ }
+};
export const AVERAGE_COLOR = '#F99417';
export const GENERAL_COLOR = '#8884d8';
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index 96c739b8..0d1f73b0 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -1,6 +1,5 @@
import { Action, DiscriminatedItem, Member } from '@graasp/sdk';
-import capitalize from 'lodash.capitalize';
import countBy from 'lodash.countby';
import groupBy from 'lodash.groupby';
import truncate from 'lodash.truncate';
@@ -172,9 +171,9 @@ export const formatActionsByVerb = (actionsByVerbObject: {
percentage: number;
}[] => {
const actionsByVerbArray = Object.entries(actionsByVerbObject);
- // capitalize verbs (entry[0][0]), convert 0.0x notation to x% and round to two decimal places (entry[0][1])
+ // convert 0.0x notation to x% and round to two decimal places (entry[0][1])
let formattedActionsByVerbArray: [string, number][] = actionsByVerbArray.map(
- (entry) => [capitalize(entry[0]), parseFloat((entry[1] * 100).toFixed(2))],
+ (entry) => [entry[0], parseFloat((entry[1] * 100).toFixed(2))],
);
formattedActionsByVerbArray = formattedActionsByVerbArray.filter(
(entry: [string, number]) => entry[1] >= MIN_PERCENTAGE_TO_SHOW_VERB,
@@ -238,7 +237,10 @@ export const findYAxisMax = (actions: {
if (!arrayOfActionsCount.length) {
return null;
}
- const maxActionsCount = arrayOfActionsCount.reduce((a, b) => Math.max(a, b));
+ const maxActionsCount = arrayOfActionsCount.reduce(
+ (a, b) => Math.max(a, b),
+ 0,
+ );
let yAxisMax;
// if maxActionsCount <= 100, round up yAxisMax to the nearest ten; else, to the nearest hundred
if (maxActionsCount <= 100) {
diff --git a/yarn.lock b/yarn.lock
index 61711852..b0953357 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1030,9 +1030,9 @@ __metadata:
languageName: node
linkType: hard
-"@graasp/sdk@npm:4.1.0":
- version: 4.1.0
- resolution: "@graasp/sdk@npm:4.1.0"
+"@graasp/sdk@npm:4.5.0":
+ version: 4.5.0
+ resolution: "@graasp/sdk@npm:4.5.0"
dependencies:
"@faker-js/faker": "npm:8.4.1"
js-cookie: "npm:3.0.5"
@@ -1040,7 +1040,7 @@ __metadata:
peerDependencies:
date-fns: ^3
uuid: ^9
- checksum: 10/80c8b07bd04f90b0ad399a673626a9299faefac381f78fff158110968191453e3cce7b8a77be0ffa19d98f6711b9be43269b993099367c98dc3ae196b28a5d1c
+ checksum: 10/835e7613126e3fb7e0d6175c4df30f75812b578ad7a5299d538c64259ee56aec2be4a0a967ebb88162d5ddd800fd999525db747d677b8b8daa6bd5b09e60d166
languageName: node
linkType: hard
@@ -5979,7 +5979,7 @@ __metadata:
"@emotion/react": "npm:11.11.3"
"@emotion/styled": "npm:11.11.0"
"@graasp/query-client": "npm:2.8.0"
- "@graasp/sdk": "npm:4.1.0"
+ "@graasp/sdk": "npm:4.5.0"
"@graasp/translations": "npm:1.25.2"
"@graasp/ui": "npm:4.9.1"
"@mui/icons-material": "npm:5.15.11"