feat: unify action colors (#341)

* feat: unfiy action colors

* feat: pre-define actions color map as a constant

* fix: use switch case to get color instead of object

* fix: add initial val for reduce of maxActionsCount

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",

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) => (
-              <Cell key={entry.type} fill={COLORS[index % COLORS.length]} />
+            {formattedActionsByVerbSorted.map((entry) => (
+              <Cell
+                key={entry.type}
+                fill={getColorForActionTriggerType(entry.type)}
+              />
             ))}
           </Pie>
           <Tooltip formatter={(value) => `${value}%`} />

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 => {
           <XAxis interval={0} dataKey="name" tick={{ fontSize: 14 }} />
           <YAxis tick={{ fontSize: 14 }} />
           <Tooltip />
-          {types.map((type, index) => (
+          {types.map((type) => (
             <Bar
               key=""
               dataKey={type}
               stackId="1"
-              fill={COLORS[index % COLORS.length]}
+              fill={getColorForActionTriggerType(type)}
             />
           ))}
         </ComposedChart>

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) => (
-              <Cell key={entry.type} fill={COLORS[index % COLORS.length]} />
+            {formattedAggregateDataSorted.map((entry) => (
+              <Cell
+                key={entry.type}
+                fill={getColorForActionTriggerType(entry.type)}
+              />
             ))}
           </Pie>
           <Tooltip formatter={(value) => `${value}%`} />

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 => {
           <XAxis dataKey="name" tick={{ fontSize: 14 }} />
           <YAxis tick={{ fontSize: 14 }} />
           <Tooltip />
-          {types.map((type, index) => (
+          {types.map((type) => (
             <Bar
               key=""
               dataKey={type}
               stackId="1"
-              fill={COLORS[index % COLORS.length]}
+              fill={getColorForActionTriggerType(type)}
             />
           ))}
         </ComposedChart>

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';

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) {

yarn.lock

@@ -1030,17 +1030,17 @@ __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"
     validator: "npm:13.11.0"
   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"