Changeset View
Changeset View
Standalone View
Standalone View
assets/src/bundles/origin/visits-calendar.js
| /** | /** | ||||
| * 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 | * See the AUTHORS file at the top-level directory of this distribution | ||||
| * License: GNU Affero General Public License version 3, or any later version | * License: GNU Affero General Public License version 3, or any later version | ||||
| * See top-level LICENSE file for more information | * See top-level LICENSE file for more information | ||||
| */ | */ | ||||
| import Calendar from 'js-year-calendar'; | import Calendar from 'js-year-calendar'; | ||||
| import 'js-year-calendar/dist/js-year-calendar.css'; | import 'js-year-calendar/dist/js-year-calendar.css'; | ||||
| import hexRgb from 'hex-rgb'; | |||||
| import {visitStatusColor} from './utils'; | |||||
| const minSize = 15; | const minSize = 15; | ||||
| const maxSize = 28; | const maxSize = 28; | ||||
| let currentPopover = null; | let currentPopover = null; | ||||
| let visitsByDate = {}; | let visitsByDate = {}; | ||||
| function closePopover() { | function closePopover() { | ||||
| if (currentPopover) { | if (currentPopover) { | ||||
| ▲ Show 20 Lines • Show All 50 Lines • ▼ Show 20 Lines | customDataSourceRenderer: (element, date, events) => { | ||||
| const size = minSize + t * (maxSize - minSize); | const size = minSize + t * (maxSize - minSize); | ||||
| const offsetX = (maxSize - size) / 2 - parseInt($(element).css('padding-left')); | const offsetX = (maxSize - size) / 2 - parseInt($(element).css('padding-left')); | ||||
| const offsetY = (maxSize - size) / 2 - parseInt($(element).css('padding-top')) + 1; | const offsetY = (maxSize - size) / 2 - parseInt($(element).css('padding-top')) + 1; | ||||
| const cellWrapper = $('<div></div>'); | const cellWrapper = $('<div></div>'); | ||||
| cellWrapper.css('position', 'relative'); | cellWrapper.css('position', 'relative'); | ||||
| const dayNumber = $('<div></div>'); | const dayNumber = $('<div></div>'); | ||||
| dayNumber.text($(element).text()); | dayNumber.text($(element).text()); | ||||
| const circle = $('<div></div>'); | const circle = $('<div></div>'); | ||||
| let r = 0; | const color = {red: 0, green: 0, blue: 0, alpha: 0.4}; | ||||
| let g = 0; | |||||
| for (let i = 0; i < nbVisits; ++i) { | for (let i = 0; i < nbVisits; ++i) { | ||||
| const visit = visitsByDate[dateStr][i]; | const visit = visitsByDate[dateStr][i]; | ||||
| if (visit.status === 'full') { | const visitColor = hexRgb(visitStatusColor[visit.status]); | ||||
| g += 255; | color.red += visitColor.red; | ||||
| } else if (visit.status === 'partial') { | color.green += visitColor.green; | ||||
| r += 255; | color.blue += visitColor.blue; | ||||
| g += 255; | } | ||||
| } else { | color.red /= nbVisits; | ||||
| r += 255; | color.green /= nbVisits; | ||||
| } | color.blue /= nbVisits; | ||||
| } | console.log(color); | ||||
| r /= nbVisits; | circle.css('background-color', `rgba(${color.red}, ${color.green}, ${color.blue}, ${color.alpha})`); | ||||
| g /= nbVisits; | |||||
| circle.css('background-color', 'rgba(' + r + ', ' + g + ', 0, 0.3)'); | |||||
| circle.css('width', size + 'px'); | circle.css('width', size + 'px'); | ||||
| circle.css('height', size + 'px'); | circle.css('height', size + 'px'); | ||||
| circle.css('border-radius', size + 'px'); | circle.css('border-radius', size + 'px'); | ||||
| circle.css('position', 'absolute'); | circle.css('position', 'absolute'); | ||||
| circle.css('top', offsetY + 'px'); | circle.css('top', offsetY + 'px'); | ||||
| circle.css('left', offsetX + 'px'); | circle.css('left', offsetX + 'px'); | ||||
| cellWrapper.append(dayNumber); | cellWrapper.append(dayNumber); | ||||
| cellWrapper.append(circle); | cellWrapper.append(circle); | ||||
| ▲ Show 20 Lines • Show All 48 Lines • Show Last 20 Lines | |||||