Changeset View
Changeset View
Standalone View
Standalone View
swh/web/assets/src/bundles/origin/visits-histogram.js
| Show All 16 Lines | export async function createVisitsHistogram(container, visitsData, currentYear, yearClickCallback) { | ||||
| const d3 = await import(/* webpackChunkName: "d3" */ 'utils/d3'); | const d3 = await import(/* webpackChunkName: "d3" */ 'utils/d3'); | ||||
| // remove previously created histogram and tooltip if any | // remove previously created histogram and tooltip if any | ||||
| d3.select(container).select('svg').remove(); | d3.select(container).select('svg').remove(); | ||||
| d3.select('div.d3-tooltip').remove(); | d3.select('div.d3-tooltip').remove(); | ||||
| // histogram size and margins | // histogram size and margins | ||||
| let width = 1000; | let width = 1000; | ||||
| let height = 300; | let height = 200; | ||||
| let margin = {top: 20, right: 80, bottom: 30, left: 50}; | let margin = {top: 20, right: 80, bottom: 30, left: 50}; | ||||
| // create responsive svg | // create responsive svg | ||||
| let svg = d3.select(container) | let svg = d3.select(container) | ||||
| .attr('style', | .attr('style', | ||||
| 'padding-bottom: ' + Math.ceil(height * 100 / width) + '%') | 'padding-bottom: ' + Math.ceil(height * 100 / width) + '%') | ||||
| .append('svg') | .append('svg') | ||||
| .attr('viewBox', '0 0 ' + width + ' ' + height); | .attr('viewBox', '0 0 ' + width + ' ' + height); | ||||
| ▲ Show 20 Lines • Show All 304 Lines • Show Last 20 Lines | |||||