feat(circle-packing): legend (#240)

SocialGouv · Oct 11, 2022 · 8f42efe · 8f42efe
1 parent efb8c32
commit 8f42efe
Show file tree

Hide file tree

Showing 7 changed files with 242 additions and 14 deletions.
diff --git a/package.json b/package.json
@@ -213,7 +213,7 @@
     "electron-util": "^0.17.2",
     "fs-extra": "^10.1.0",
     "i18next": "^21.8.10",
-    "jotai": "^1.7.2",
+    "jotai": "^1.8.5",
     "json2csv": "^5.0.6",
     "level": "^8.0.0",
     "lodash": "^4.17.21",

diff --git a/src/renderer/components/viewer/CirclePacking.module.scss b/src/renderer/components/viewer/CirclePacking.module.scss
@@ -1,3 +1,4 @@
+/* stylelint-disable selector-max-id */
 .node {
   cursor: pointer;
 }
@@ -45,6 +46,89 @@
   }
 }
 
+.circle-packing-legend {
+  align-items: center;
+  align-self: center;
+  border: solid 3px #4991f7;
+  border-radius: 50%;
+  cursor: pointer;
+  display: flex;
+  font-weight: 600;
+  height: 30px;
+  justify-content: center;
+  position: absolute;
+  right: 0;
+  width: 30px;
+}
+
+.circle-packing-legend-open {
+  align-items: center;
+  bottom: 10px;
+  display: flex;
+  height: auto;
+  justify-content: center;
+  left: 10px;
+  pointer-events: none;
+  position: fixed;
+  width: calc(50% - 0.5rem);
+  z-index: 10;
+
+  ul {
+    display: flex;
+    gap: 3vw;
+    height: 80%;
+    margin: 0 !important;
+    width: 90%;
+
+    div {
+      margin: 0 !important;
+    }
+  }
+
+  li {
+    align-items: center;
+    display: flex;
+    margin: 0 0 1rem !important;
+  }
+
+  small {
+    border-radius: 50%;
+    display: inline-block;
+    height: 1rem;
+    margin: 0 1rem 0 0 !important;
+    width: 1rem;
+  }
+
+  [data-name='global'] {
+    background: rgb(234 240 253);
+  }
+
+  [data-name='inside'] {
+    background: rgb(31 120 180);
+  }
+
+  [data-name='keep'] {
+    background: rgb(98 188 111);
+  }
+
+  [data-name='delete'] {
+    background: rgb(247 94 66);
+  }
+
+  [data-name='focus'] {
+    border: solid 3px;
+  }
+
+  [data-name='sent'] {
+    border: solid 3px rgb(250 221 161);
+  }
+
+  [data-name='months'] {
+    background: linear-gradient(90deg, rgb(31 120 180 / 45%) 43%, rgb(31 120 180 / 100%) 100%);
+    border-radius: 50%;
+  }
+}
+
 .circle-packing {
   height: 45vh;
   width: 100%;
@@ -58,7 +142,9 @@
 
   .circle-packing-actions-button {
     display: flex;
+    justify-content: center;
     margin: 0 !important;
+    position: relative;
 
     button {
       align-items: center;
@@ -106,3 +192,57 @@
     transform: rotate(360deg);
   }
 }
+
+.circle-packing-legend-switcher {
+  align-items: center;
+  bottom: 2rem;
+  display: flex;
+  left: calc(50vw - 4.5rem);
+  position: fixed;
+
+  span {
+    margin: 0 !important;
+    position: absolute;
+    right: 100%;
+    width: 180px;
+  }
+
+  #switch-label {
+    background: rgb(128 128 128);
+    border-radius: 100px;
+    cursor: pointer;
+    display: block;
+    height: 20px;
+    position: relative;
+    text-indent: -9999px;
+    width: 35px;
+
+    &::after {
+      background: #fff;
+      border-radius: 90px;
+      content: '';
+      height: 10px;
+      left: 5px;
+      position: absolute;
+      top: 5px;
+      width: 10px;
+    }
+  }
+
+  #switch-input[type='checkbox'] {
+    height: 0;
+    visibility: hidden;
+    width: 0;
+
+    &:checked {
+      + #switch-label {
+        background: rgb(160 178 105);
+
+        &::after {
+          left: calc(100% - 5px);
+          transform: translateX(-100%);
+        }
+      }
+    }
+  }
+}
diff --git a/src/renderer/components/viewer/CirclePacking.tsx b/src/renderer/components/viewer/CirclePacking.tsx
@@ -28,6 +28,7 @@ import { TagManagerMenu } from "../menu/TagManagerMenu";
 import style from "./CirclePacking.module.scss";
 import type { OnBlur } from "./CirclePackingCancellableFocusZone";
 import { CirclePackingCancellableFocusZone } from "./CirclePackingCancellableFocusZone";
+import { CirclePackingLegend } from "./CirclePackingLegend";
 import { CirclePackingTooltip } from "./CirclePackingTooltip";
 
 const { BASE_COLOR, BASE_COLOR_LIGHT, DELETE_COLOR, KEEP_COLOR } = COLORS;
@@ -179,6 +180,7 @@ export const CirclePacking: React.FC = () => {
                     <button onClick={goToInitialView}>
                         {t("dashboard.viewer.restart")}
                     </button>
+                    <CirclePackingLegend />
                 </div>
             </div>
             <CirclePackingCancellableFocusZone onBlur={handleLostFocus} />

diff --git a/src/renderer/components/viewer/CirclePackingLegend.tsx b/src/renderer/components/viewer/CirclePackingLegend.tsx
@@ -0,0 +1,70 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import style from "./CirclePacking.module.scss";
+
+export const CirclePackingLegend: React.FC = () => {
+    const [isOpen, setIsopen] = useState(false);
+    const { t } = useTranslation();
+    const toggle = () => {
+        setIsopen(!isOpen);
+    };
+
+    return (
+        <>
+            {isOpen && (
+                <div className={style.circlePackingLegendOpen} onClick={toggle}>
+                    <ul>
+                        <div>
+                            <li>
+                                <small data-name="inside" />
+                                {t("dashboard.viewer.legend.untag")}
+                            </li>
+                            <li>
+                                <small data-name="delete" />
+                                {t("dashboard.viewer.legend.delete")}
+                            </li>
+                            <li>
+                                <small data-name="keep" />
+                                {t("dashboard.viewer.legend.keep")}
+                            </li>
+                            <li>
+                                <small data-name="focus" />
+                                {t("dashboard.viewer.legend.selected")}
+                            </li>
+                        </div>
+                        <div>
+                            <li>
+                                <small data-name="global" />
+                                {t("dashboard.viewer.legend.rootElement")}
+                            </li>
+
+                            <li>
+                                <small data-name="months" />
+                                {t("dashboard.viewer.legend.date")}
+                            </li>
+                            <li>
+                                <small data-name="sent" />{" "}
+                                {t("dashboard.viewer.legend.sent")}
+                            </li>
+                        </div>
+                    </ul>
+                </div>
+            )}
+
+            <div className={style.circlePackingLegendSwitcher}>
+                <span>{t("dashboard.viewer.legend.switcher")}</span>
+                <input
+                    id={style.switchInput}
+                    type="checkbox"
+                    onChange={toggle}
+                />
+                <label id={style.switchLabel} htmlFor={style.switchInput}>
+                    Toggle
+                </label>
+            </div>
+        </>
+    );
+};
diff --git a/static/locales/en-GB/translation.json b/static/locales/en-GB/translation.json
@@ -27,9 +27,9 @@
   "dashboard.informations.emptyInfos": "Hover over the viewer to see information",
   "dashboard.informations.folder": "folders",
   "dashboard.informations.from": "Sender",
-  "dashboard.informations.id.recipient": "correspondent",
   "dashboard.informations.id.domain": "domain",
   "dashboard.informations.id.mail": "mail",
+  "dashboard.informations.id.recipient": "correspondent",
   "dashboard.informations.id.year": "year",
   "dashboard.informations.infosOf": "Information from",
   "dashboard.informations.mail": "Mail",
@@ -61,13 +61,13 @@
   "dashboard.recap.contact_zero": "No contact",
   "dashboard.recap.contactsTitle": "Contacts",
   "dashboard.recap.deletedMessages": "Deleted message(s)",
+  "dashboard.recap.extremum": "Extreme dates",
   "dashboard.recap.extremum.maxDate": "Max: {{ maxDate, datetime }}",
   "dashboard.recap.extremum.minDate": "Min: {{ minDate, datetime }}",
-  "dashboard.recap.extremum": "Extreme dates",
+  "dashboard.recap.folderLabel": "File(s)",
   "dashboard.recap.folder_one": "{{ count }} file",
   "dashboard.recap.folder_other": "{{ count }} files",
   "dashboard.recap.folder_zero": "No file",
-  "dashboard.recap.folderLabel": "File(s)",
   "dashboard.recap.mail_one": "{{ count }} mail",
   "dashboard.recap.mail_other": "{{ count }} mails",
   "dashboard.recap.mail_zero": "No mail",
@@ -77,18 +77,26 @@
   "dashboard.recap.selectFolder.validate": "Validate selection",
   "dashboard.recap.sentMessages": "Sent message",
   "dashboard.viewer.breadcrumb.domain": "Domain",
-  "dashboard.viewer.breadcrumb.id.recipient": "{{history.domain}} > Correspondent",
   "dashboard.viewer.breadcrumb.id.domain": "Domain",
-  "dashboard.viewer.breadcrumb.id.mail": "{{history.domain}} > {{history.recipient}} > {{history.year}} > Mails",
-  "dashboard.viewer.breadcrumb.id.year": "{{history.domain}} > {{history.recipient}} > Year",
-  "dashboard.viewer.breadcrumb.id.label.recipient": "Recipient",
   "dashboard.viewer.breadcrumb.id.label.domain": "Domain",
   "dashboard.viewer.breadcrumb.id.label.mail": "Mails",
+  "dashboard.viewer.breadcrumb.id.label.recipient": "Recipient",
   "dashboard.viewer.breadcrumb.id.label.year": "Year",
+  "dashboard.viewer.breadcrumb.id.mail": "{{history.domain}} > {{history.recipient}} > {{history.year}} > Mails",
+  "dashboard.viewer.breadcrumb.id.recipient": "{{history.domain}} > Correspondent",
+  "dashboard.viewer.breadcrumb.id.year": "{{history.domain}} > {{history.recipient}} > Year",
   "dashboard.viewer.breadcrumb.level": "Level",
   "dashboard.viewer.cardTitle": "Visualization",
   "dashboard.viewer.contextMenu.deleteAction": "To delete",
   "dashboard.viewer.contextMenu.keepAction": "To keep",
+  "dashboard.viewer.legend.date": "Date: from lightest (January) to darkest (December)",
+  "dashboard.viewer.legend.delete": "Tagged item to delete",
+  "dashboard.viewer.legend.keep": "Tagged item to keep",
+  "dashboard.viewer.legend.rootElement": "Parent of displayed element",
+  "dashboard.viewer.legend.selected": "Mail selected",
+  "dashboard.viewer.legend.sent": "E-mail sent",
+  "dashboard.viewer.legend.switcher": "Show/hide legend",
+  "dashboard.viewer.legend.untag": "Untagged item",
   "dashboard.viewer.previous": "Previous",
   "dashboard.viewer.restart": "Reset",
   "dropzone.click-or-drag": "Click or drag'n'drop your files here",
@@ -114,9 +122,9 @@
   "exporter.table.received-date": "Date and time of reception",
   "exporter.table.send-time": "Date and time of sending",
   "exporter.table.subject": "Subject of the mail",
+  "exporter.table.tag": "Element tag",
   "exporter.table.tag.delete": "to delete",
   "exporter.table.tag.untag": "unmarked",
-  "exporter.table.tag": "Element tag",
   "exporter.table.to.email": "Email addresses of recipient(s) A",
   "exporter.table.to.name": "Name of recipient(s) A",
   "startscreen.importInfo.attachedCount": "Attached count:",
@@ -137,4 +145,4 @@
   "user-config.version.current": "Current version: {{version}}",
   "user-config.version.noUpdateAvailable": "No update available",
   "user-config.version.updateAvailable": ">The new version {{version}} is available!<"
-}
+}
diff --git a/static/locales/fr-FR/translation.json b/static/locales/fr-FR/translation.json
@@ -89,6 +89,14 @@
   "dashboard.viewer.cardTitle": "Visualisation",
   "dashboard.viewer.contextMenu.deleteAction": "À supprimer",
   "dashboard.viewer.contextMenu.keepAction": "À Conserver",
+  "dashboard.viewer.legend.untag": "Élément non taggué",
+  "dashboard.viewer.legend.keep": "Élément taggué à conserver",
+  "dashboard.viewer.legend.delete": "Élément taggué à supprimer",
+  "dashboard.viewer.legend.selected": "Mail selectionné",
+  "dashboard.viewer.legend.rootElement": "Parent de l'élément affiché",
+  "dashboard.viewer.legend.date": "Date : du plus clair (janvier) au plus foncé (décembre)",
+  "dashboard.viewer.legend.sent": "Mail envoyé",
+  "dashboard.viewer.legend.switcher": "Afficher/masquer la légende",
   "dashboard.viewer.previous": "Précédent",
   "dashboard.viewer.restart": "Réinitialiser",
   "dropzone.click-or-drag": "Cliquez ou glissez-déposez vos fichiers ici",

diff --git a/yarn.lock b/yarn.lock
@@ -9911,10 +9911,10 @@ join-component@^1.1.0:
   resolved "https://registry.yarnpkg.com/join-component/-/join-component-1.1.0.tgz#b8417b750661a392bee2c2537c68b2a9d4977cd5"
   integrity sha1-uEF7dQZho5K+4sJTfGiyqdSXfNU=
 
-jotai@^1.7.2:
-  version "1.8.3"
-  resolved "https://registry.yarnpkg.com/jotai/-/jotai-1.8.3.tgz#06595dd66bcf64dd370386eee9c7b386c2ccb2e7"
-  integrity sha512-bNAs/DMD6BEB4xxVku33CI+ZIFyCWG82Ms6JnvYunEvGCnviTTDBl+m0HKgijoHmcNM3fxQ5MARdG+wwokNxog==
+jotai@^1.8.5:
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/jotai/-/jotai-1.8.5.tgz#a1d64682cc7b12697782488d5b6c6cfb54051520"
+  integrity sha512-c6MGQ3S0X8VctRUEmRLEL3FMib3F7Ppsx3x86c5XL+Gm6JjH6qIt0lb0F4yE2V5/9Tg+KhGiagfsdA5lg0D7cQ==
 
 jpeg-js@^0.4.2:
   version "0.4.3"