diff --git a/assets/src/bundles/origin/utils.js b/assets/src/bundles/origin/utils.js
new file mode 100644
--- /dev/null
+++ b/assets/src/bundles/origin/utils.js
@@ -0,0 +1,15 @@
+/**
+ * Copyright (C) 2018-2021 The Software Heritage developers
+ * See the AUTHORS file at the top-level directory of this distribution
+ * License: GNU Affero General Public License version 3, or any later version
+ * See top-level LICENSE file for more information
+ */
+
+export const visitStatusColor = {
+ full: '#008000',
+ partial: '#edc344',
+ failed: '#ff0000',
+ ongoing: '#0000ff',
+ not_found: '#000',
+ created: '#7d8080'
+};
diff --git a/assets/src/bundles/origin/visits-calendar.js b/assets/src/bundles/origin/visits-calendar.js
--- a/assets/src/bundles/origin/visits-calendar.js
+++ b/assets/src/bundles/origin/visits-calendar.js
@@ -1,5 +1,5 @@
/**
- * Copyright (C) 2018-2019 The Software Heritage developers
+ * Copyright (C) 2018-2021 The Software Heritage developers
* See the AUTHORS file at the top-level directory of this distribution
* License: GNU Affero General Public License version 3, or any later version
* See top-level LICENSE file for more information
@@ -7,6 +7,9 @@
import Calendar from 'js-year-calendar';
import 'js-year-calendar/dist/js-year-calendar.css';
+import hexRgb from 'hex-rgb';
+
+import {visitStatusColor} from './utils';
const minSize = 15;
const maxSize = 28;
@@ -73,22 +76,19 @@
const dayNumber = $('');
dayNumber.text($(element).text());
const circle = $('');
- let r = 0;
- let g = 0;
+ const color = {red: 0, green: 0, blue: 0, alpha: 0.4};
for (let i = 0; i < nbVisits; ++i) {
const visit = visitsByDate[dateStr][i];
- if (visit.status === 'full') {
- g += 255;
- } else if (visit.status === 'partial') {
- r += 255;
- g += 255;
- } else {
- r += 255;
- }
+ const visitColor = hexRgb(visitStatusColor[visit.status]);
+ color.red += visitColor.red;
+ color.green += visitColor.green;
+ color.blue += visitColor.blue;
}
- r /= nbVisits;
- g /= nbVisits;
- circle.css('background-color', 'rgba(' + r + ', ' + g + ', 0, 0.3)');
+ color.red /= nbVisits;
+ color.green /= nbVisits;
+ color.blue /= nbVisits;
+ console.log(color);
+ circle.css('background-color', `rgba(${color.red}, ${color.green}, ${color.blue}, ${color.alpha})`);
circle.css('width', size + 'px');
circle.css('height', size + 'px');
circle.css('border-radius', size + 'px');
diff --git a/assets/src/bundles/origin/visits-histogram.js b/assets/src/bundles/origin/visits-histogram.js
--- a/assets/src/bundles/origin/visits-histogram.js
+++ b/assets/src/bundles/origin/visits-histogram.js
@@ -1,5 +1,5 @@
/**
- * Copyright (C) 2018-2019 The Software Heritage developers
+ * Copyright (C) 2018-2021 The Software Heritage developers
* See the AUTHORS file at the top-level directory of this distribution
* License: GNU Affero General Public License version 3, or any later version
* See top-level LICENSE file for more information
@@ -12,6 +12,8 @@
// - currentYear: the visits year to display by default
// - yearClickCallback: callback when the user selects a year through the histogram
+import {visitStatusColor} from './utils';
+
export async function createVisitsHistogram(container, visitsData, currentYear, yearClickCallback) {
const d3 = await import(/* webpackChunkName: "d3" */ 'utils/d3');
@@ -53,8 +55,8 @@
// create ordinal colorscale mapping visit status
const colors = d3.scaleOrdinal()
- .domain(['full', 'partial', 'failed', 'ongoing'])
- .range(['#008000', '#edc344', '#ff0000', '#0000ff']);
+ .domain(Object.keys(visitStatusColor))
+ .range(Object.values(visitStatusColor));
// first swh crawls were made in 2015
const startYear = 2015;
diff --git a/assets/src/bundles/origin/visits-reporting.css b/assets/src/bundles/origin/visits-reporting.css
--- a/assets/src/bundles/origin/visits-reporting.css
+++ b/assets/src/bundles/origin/visits-reporting.css
@@ -1,5 +1,5 @@
/**
- * Copyright (C) 2018 The Software Heritage developers
+ * Copyright (C) 2018-2021 The Software Heritage developers
* See the AUTHORS file at the top-level directory of this distribution
* License: GNU Affero General Public License version 3, or any later version
* See top-level LICENSE file for more information
@@ -22,6 +22,7 @@
}
.swh-visit-full::before {
+ /* mdi-check-bold */
content: '\f0e1e';
}
@@ -30,6 +31,7 @@
}
.swh-visit-partial::before {
+ /* mdi-alter */
content: '\f0026';
}
@@ -38,6 +40,7 @@
}
.swh-visit-failed::before {
+ /* mdi-close-thick */
content: '\f1398';
}
@@ -46,9 +49,28 @@
}
.swh-visit-ongoing::before {
+ /* mdi-sync */
content: '\f04e6';
}
+.swh-visit-created {
+ color: #7d8080;
+}
+
+.swh-visit-created::before {
+ /* mdi-camera-plus */
+ content: '\f0edb';
+}
+
+.swh-visit-not_found {
+ color: #000;
+}
+
+.swh-visit-not_found::before {
+ /* mdi-web-off */
+ content: '\f0a8e';
+}
+
#swh-visits-calendar.calendar {
min-height: 700px;
overflow: visible;
diff --git a/package.json b/package.json
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
"datatables.net-responsive-bs4": "^2.2.9",
"dompurify": "^2.3.3",
"email-validator": "^2.0.4",
+ "hex-rgb": "^5.0.0",
"highlight.js": "^11.2.0",
"highlightjs-line-numbers.js": "^2.8.0",
"html-encoder-decoder": "^1.3.9",
diff --git a/yarn.lock b/yarn.lock
--- a/yarn.lock
+++ b/yarn.lock
@@ -7469,6 +7469,11 @@
resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
+hex-rgb@^5.0.0:
+ version "5.0.0"
+ resolved "https://registry.yarnpkg.com/hex-rgb/-/hex-rgb-5.0.0.tgz#e2c9eb6a37498d66c5a350a221ed4c2c7d1a92d6"
+ integrity sha512-NQO+lgVUCtHxZ792FodgW0zflK+ozS9X9dwGp9XvvmPlH7pyxd588cn24TD3rmPm/N0AIRXF10Otah8yKqGw4w==
+
highlight.js@^11.2.0:
version "11.2.0"
resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.2.0.tgz#a7e3b8c1fdc4f0538b93b2dc2ddd53a40c6ab0f0"