Display package's last year activity (#1650)

Signed-off-by: Cintia Sanchez Garcia <cynthiasg@icloud.com>

web/src/layout/package/Details.test.tsx

@@ -33,6 +33,16 @@ const defaultProps = {
 };
 
 describe('Details', () => {
+  let dateNowSpy: any;
+
+  beforeEach(() => {
+    dateNowSpy = jest.spyOn(Date, 'now').mockImplementation(() => 1634969145000);
+  });
+
+  afterAll(() => {
+    dateNowSpy.mockRestore();
+  });
+
   afterEach(() => {
     jest.resetAllMocks();
   });
@@ -73,6 +83,7 @@ describe('Details', () => {
       expect(screen.getByText('Type')).toBeInTheDocument();
       expect(screen.getByText('Kubernetes version')).toBeInTheDocument();
       expect(screen.getByText('Chart versions')).toBeInTheDocument();
+      expect(screen.getByText('Last year activity')).toBeInTheDocument();
       expect(screen.queryByText('Links')).toBeNull();
       expect(screen.getByText('License')).toBeInTheDocument();
       expect(screen.getByText('Maintainers')).toBeInTheDocument();

web/src/layout/package/Details.tsx

@@ -20,6 +20,7 @@ import ContainersImages from './ContainersImages';
 import Dependencies from './Dependencies';
 import styles from './Details.module.css';
 import Keywords from './Keywords';
+import LastYearActivity from './LastYearActivity';
 import License from './License';
 import Links from './Links';
 import Maintainers from './Maintainers';
@@ -170,6 +171,10 @@ const Details = (props: Props) => {
         )}
       </div>
 
+      <div>
+        <LastYearActivity versions={props.sortedVersions} />
+      </div>
+
       {(() => {
         switch (props.package.repository.kind) {
           case RepositoryKind.Helm:

web/src/layout/package/LastYearActivity.module.css

@@ -0,0 +1,87 @@
+.heatMap {
+  max-width: 250px;
+}
+
+.heatMapCell {
+  height: 16px;
+  width: 16px;
+  border-radius: 2px;
+  border: 1px solid var(--color-black-25);
+}
+
+.level0 {
+  background-color: var(--color-activity-0);
+  border: 1px solid var(--color-black-15);
+}
+
+.level1 {
+  background-color: var(--color-activity-1);
+}
+
+.level2 {
+  background-color: var(--color-activity-2);
+}
+
+.level3 {
+  background-color: var(--color-activity-3);
+}
+
+.level4 {
+  background-color: var(--color-activity-4);
+}
+
+.legend {
+  font-size: 0.8rem;
+}
+
+.popover {
+  opacity: 0;
+  right: 0;
+  left: auto;
+  top: 18px;
+  font-size: 0.8rem;
+  z-index: -1;
+}
+
+.marker {
+  width: 12px;
+  height: 12px;
+  top: 0px;
+  margin-right: 10px;
+  border-radius: 50%;
+  border: 1px solid var(--color-black-25);
+}
+
+.popoverHeader {
+  font-size: 0.8rem;
+  padding: 0.5rem;
+  line-height: 1;
+}
+
+@media only screen and (max-width: 767.98px) {
+  .popover {
+    display: none;
+  }
+}
+
+@media only screen and (min-width: 768px) and (max-width: 1920px) {
+  .heatMapCell {
+    height: 13px;
+    width: 13px;
+  }
+
+  .popover {
+    top: 15px;
+  }
+}
+
+@media (hover: hover) and (min-width: 768px) {
+  .heatMapCell {
+    cursor: pointer;
+  }
+
+  .heatMapCell:hover + .popover {
+    opacity: 1;
+    z-index: 1;
+  }
+}

web/src/layout/package/LastYearActivity.test.tsx

@@ -0,0 +1,144 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+
+import { Version } from '../../types';
+import LastYearActivity from './LastYearActivity';
+
+const getMockVersions = (fixtureId: string): Version[] => {
+  return require(`./__fixtures__/LastYearActivity/${fixtureId}.json`) as Version[];
+};
+
+describe('LastYearActivity', () => {
+  let dateNowSpy: any;
+
+  beforeEach(() => {
+    dateNowSpy = jest.spyOn(Date, 'now').mockImplementation(() => 1634969145000);
+  });
+
+  afterAll(() => {
+    dateNowSpy.mockRestore();
+  });
+
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
+  it('creates snapshot', () => {
+    const mockVersions = getMockVersions('1');
+    const { asFragment } = render(<LastYearActivity versions={mockVersions} />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  describe('Render', () => {
+    it('renders component', () => {
+      const mockVersions = getMockVersions('2');
+      render(<LastYearActivity versions={mockVersions} />);
+
+      expect(screen.getByText('Last year activity')).toBeInTheDocument();
+      expect(screen.getAllByText("Oct'21")).toHaveLength(2);
+      expect(screen.getAllByText("Apr'21")).toHaveLength(2);
+      expect(screen.getAllByText("Nov'20")).toHaveLength(2);
+      expect(screen.getByTestId('lastYearActivity')).toBeInTheDocument();
+
+      const cells = screen.getAllByTestId('heatMapCell');
+      expect(cells).toHaveLength(12);
+      expect(cells[0]).toHaveClass('level3');
+      expect(cells[1]).toHaveClass('level1');
+      expect(cells[2]).toHaveClass('level3');
+      expect(cells[3]).toHaveClass('level2');
+      expect(cells[4]).toHaveClass('level3');
+      expect(cells[5]).toHaveClass('level1');
+      expect(cells[6]).toHaveClass('level3');
+      expect(cells[7]).toHaveClass('level1');
+      expect(cells[8]).toHaveClass('level0');
+      expect(cells[9]).toHaveClass('level1');
+      expect(cells[10]).toHaveClass('level1');
+      expect(cells[11]).toHaveClass('level0');
+
+      const popovers = screen.getAllByTestId('heatMapPopover');
+      expect(popovers).toHaveLength(12);
+      expect(popovers[0]).toHaveTextContent("Nov'20Releases: 3");
+      expect(popovers[1]).toHaveTextContent("Dec'20Releases: 1");
+      expect(popovers[2]).toHaveTextContent("Jan'21Releases: 3");
+      expect(popovers[3]).toHaveTextContent("Feb'21Releases: 2");
+      expect(popovers[4]).toHaveTextContent("Mar'21Releases: 3");
+      expect(popovers[5]).toHaveTextContent("Apr'21Releases: 1");
+      expect(popovers[6]).toHaveTextContent("May'21Releases: 4");
+      expect(popovers[7]).toHaveTextContent("Jun'21Releases: 1");
+      expect(popovers[8]).toHaveTextContent("Jul'21Releases: 0");
+      expect(popovers[9]).toHaveTextContent("Aug'21Releases: 1");
+      expect(popovers[10]).toHaveTextContent("Sep'21Releases: 1");
+      expect(popovers[11]).toHaveTextContent("Oct'21Releases: 0");
+    });
+
+    it('renders only level0 cells when versions are elder than 1 year', () => {
+      const mockVersions = getMockVersions('3');
+      render(<LastYearActivity versions={mockVersions} />);
+
+      const cells = screen.getAllByTestId('heatMapCell');
+      expect(cells).toHaveLength(12);
+      expect(cells[0]).toHaveClass('level0');
+      expect(cells[1]).toHaveClass('level0');
+      expect(cells[2]).toHaveClass('level0');
+      expect(cells[3]).toHaveClass('level0');
+      expect(cells[4]).toHaveClass('level0');
+      expect(cells[5]).toHaveClass('level0');
+      expect(cells[6]).toHaveClass('level0');
+      expect(cells[7]).toHaveClass('level0');
+      expect(cells[8]).toHaveClass('level0');
+      expect(cells[9]).toHaveClass('level0');
+      expect(cells[10]).toHaveClass('level0');
+      expect(cells[11]).toHaveClass('level0');
+
+      const popovers = screen.getAllByTestId('heatMapPopover');
+      expect(popovers).toHaveLength(12);
+      expect(popovers[0]).toHaveTextContent("Nov'20Releases: 0");
+      expect(popovers[1]).toHaveTextContent("Dec'20Releases: 0");
+      expect(popovers[2]).toHaveTextContent("Jan'21Releases: 0");
+      expect(popovers[3]).toHaveTextContent("Feb'21Releases: 0");
+      expect(popovers[4]).toHaveTextContent("Mar'21Releases: 0");
+      expect(popovers[5]).toHaveTextContent("Apr'21Releases: 0");
+      expect(popovers[6]).toHaveTextContent("May'21Releases: 0");
+      expect(popovers[7]).toHaveTextContent("Jun'21Releases: 0");
+      expect(popovers[8]).toHaveTextContent("Jul'21Releases: 0");
+      expect(popovers[9]).toHaveTextContent("Aug'21Releases: 0");
+      expect(popovers[10]).toHaveTextContent("Sep'21Releases: 0");
+      expect(popovers[11]).toHaveTextContent("Oct'21Releases: 0");
+    });
+
+    it('renders all level3 cells', () => {
+      const mockVersions = getMockVersions('4');
+      render(<LastYearActivity versions={mockVersions} />);
+
+      const cells = screen.getAllByTestId('heatMapCell');
+      expect(cells).toHaveLength(12);
+      expect(cells[0]).toHaveClass('level4');
+      expect(cells[1]).toHaveClass('level4');
+      expect(cells[2]).toHaveClass('level4');
+      expect(cells[3]).toHaveClass('level4');
+      expect(cells[4]).toHaveClass('level4');
+      expect(cells[5]).toHaveClass('level4');
+      expect(cells[6]).toHaveClass('level4');
+      expect(cells[7]).toHaveClass('level4');
+      expect(cells[8]).toHaveClass('level4');
+      expect(cells[9]).toHaveClass('level4');
+      expect(cells[10]).toHaveClass('level4');
+      expect(cells[11]).toHaveClass('level3');
+
+      const popovers = screen.getAllByTestId('heatMapPopover');
+      expect(popovers).toHaveLength(12);
+      expect(popovers[0]).toHaveTextContent("Nov'20Releases: 28");
+      expect(popovers[1]).toHaveTextContent("Dec'20Releases: 8");
+      expect(popovers[2]).toHaveTextContent("Jan'21Releases: 27");
+      expect(popovers[3]).toHaveTextContent("Feb'21Releases: 13");
+      expect(popovers[4]).toHaveTextContent("Mar'21Releases: 9");
+      expect(popovers[5]).toHaveTextContent("Apr'21Releases: 23");
+      expect(popovers[6]).toHaveTextContent("May'21Releases: 12");
+      expect(popovers[7]).toHaveTextContent("Jun'21Releases: 22");
+      expect(popovers[8]).toHaveTextContent("Jul'21Releases: 10");
+      expect(popovers[9]).toHaveTextContent("Aug'21Releases: 10");
+      expect(popovers[10]).toHaveTextContent("Sep'21Releases: 14");
+      expect(popovers[11]).toHaveTextContent("Oct'21Releases: 5");
+    });
+  });
+});

web/src/layout/package/LastYearActivity.tsx

@@ -0,0 +1,96 @@
+import { groupBy, isUndefined, rangeRight } from 'lodash';
+import moment from 'moment';
+import React, { useEffect, useState } from 'react';
+
+import { Version } from '../../types';
+import SmallTitle from '../common/SmallTitle';
+import styles from './LastYearActivity.module.css';
+
+interface Props {
+  versions: Version[];
+}
+
+interface SortedVersions {
+  [key: string]: Version[];
+}
+
+const LastYearActivity = (props: Props) => {
+  const prepareMonths = (): string[] => {
+    return rangeRight(12).map((n: number) => {
+      return moment().subtract(n, 'months').startOf('month').format('MM/YY');
+    });
+  };
+
+  const [versions, setVersions] = useState<SortedVersions | undefined>();
+  const [months] = useState<string[]>(prepareMonths());
+  useEffect(() => {
+    const prepareVersionsList = () => {
+      const sortedVersions = groupBy(props.versions, (v) => moment.unix(v.ts).startOf('month').format('MM/YY'));
+      setVersions(sortedVersions);
+    };
+
+    prepareVersionsList();
+  }, [props.versions]);
+
+  const getLevel = (releases: Version[] | undefined): number => {
+    if (isUndefined(releases)) {
+      return 0;
+    } else {
+      const releasesNumber = releases.length;
+      if (releasesNumber > 5) {
+        return 4;
+      } else if (releasesNumber >= 3 && releasesNumber <= 5) {
+        return 3;
+      }
+      return releasesNumber;
+    }
+  };
+
+  if (isUndefined(versions)) return null;
+
+  return (
+    <>
+      <SmallTitle text="Last year activity" />
+      <div data-testid="lastYearActivity" className={`d-flex flex-column w-100 mb-3 ${styles.heatMap}`}>
+        <div className="d-flex flex-row justify-content-between w-100">
+          {months.map((month: string) => {
+            const level = getLevel(versions[month]);
+            return (
+              <div key={`activity_${month}`} className="position-relative">
+                <div
+                  data-testid="heatMapCell"
+                  className={`position-relative ${styles.heatMapCell} ${styles[`level${level}`]}`}
+                />
+                <div data-testid="heatMapPopover" className={`popover ${styles.popover}`} role="tooltip">
+                  <div className={`popover-header ${styles.popoverHeader}`}>
+                    {moment(month, 'MM/YY').format("MMM'YY")}
+                  </div>
+                  <div className="popover-body text-nowrap">
+                    <div className="d-flex flex-row align-items-center">
+                      <div className={`mr-2 ${styles.marker} ${styles[`level${level}`]}`} />
+                      Releases:{' '}
+                      <span className="font-weight-bold ml-2">{versions[month] ? versions[month].length : 0}</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+        <div className={`d-flex flex-row justify-content-between w-100 ${styles.legend}`}>
+          <div>
+            <small className="text-muted">{moment(months[0], 'MM/YY').format("MMM'YY")}</small>
+          </div>
+          <div>
+            <small className="text-muted">{moment(months[5], 'MM/YY').format("MMM'YY")}</small>
+          </div>
+          <div>
+            <small className="text-muted">{moment(months[months.length - 1], 'MM/YY').format("MMM'YY")}</small>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default LastYearActivity;

web/src/layout/package/__fixtures__/LastYearActivity/1.json

@@ -0,0 +1,260 @@
+[
+  {
+    "version": "2.3.6",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1629760922
+  },
+  {
+    "version": "1.10.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1613826911
+  },
+  {
+    "version": "1.8.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1611164780
+  },
+  {
+    "version": "0.1.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1601199105
+  },
+  {
+    "version": "0.1.3",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1601199105
+  },
+  {
+    "version": "0.4.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1601199105
+  },
+  {
+    "version": "1.4.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1605701000
+  },
+  {
+    "version": "0.3.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1601199105
+  },
+  {
+    "version": "1.3.4",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1605028294
+  },
+  {
+    "version": "2.3.5",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1624474653
+  },
+  {
+    "version": "1.6.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1608633566
+  },
+  {
+    "version": "0.5.1",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1601199105
+  },
+  {
+    "version": "1.2.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1601199105
+  },
+  {
+    "version": "1.5.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1606746676
+  },
+  {
+    "version": "1.3.2",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1599636560
+  },
+  {
+    "version": "2.3.3",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1621598944
+  },
+  {
+    "version": "0.1.1",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1601199105
+  },
+  {
+    "version": "0.6.2",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1601199105
+  },
+  {
+    "version": "2.3.7",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1632363289
+  },
+  {
+    "version": "1.3.1",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1597923014
+  },
+  {
+    "version": "1.7.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1610801666
+  },
+  {
+    "version": "1.0.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1601199105
+  },
+  {
+    "version": "2.3.2",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1621583115
+  },
+  {
+    "version": "0.6.1",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1601199105
+  },
+  {
+    "version": "2.3.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1618627407
+  },
+  {
+    "version": "0.7.1",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1601199105
+  },
+  {
+    "version": "0.7.2",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1601199105
+  },
+  {
+    "version": "1.1.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1601199105
+  },
+  {
+    "version": "2.2.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1616176461
+  },
+  {
+    "version": "2.3.4",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1622341938
+  },
+  {
+    "version": "1.9.1",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1613162029
+  },
+  {
+    "version": "0.5.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1601199105
+  },
+  {
+    "version": "0.7.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1601199105
+  },
+  {
+    "version": "2.3.1",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1620767898
+  },
+  {
+    "version": "1.1.1",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1601199105
+  },
+  {
+    "version": "1.9.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1611621849
+  },
+  {
+    "version": "0.6.3",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1601199105
+  },
+  {
+    "version": "1.3.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1601199105
+  },
+  {
+    "version": "2.1.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1616049399
+  },
+  {
+    "version": "0.6.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1601199105
+  },
+  {
+    "version": "0.2.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1601199105
+  },
+  {
+    "version": "2.0.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1615120916
+  },
+  {
+    "version": "1.3.3",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1600298432
+  }
+]

web/src/layout/package/__fixtures__/LastYearActivity/2.json

@@ -0,0 +1,260 @@
+[
+  {
+    "version": "2.3.6",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1629760922
+  },
+  {
+    "version": "1.10.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1613826911
+  },
+  {
+    "version": "1.8.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1611164780
+  },
+  {
+    "version": "0.1.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1601199105
+  },
+  {
+    "version": "0.1.3",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1601199105
+  },
+  {
+    "version": "0.4.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1601199105
+  },
+  {
+    "version": "1.4.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1605701000
+  },
+  {
+    "version": "0.3.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1601199105
+  },
+  {
+    "version": "1.3.4",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1605028294
+  },
+  {
+    "version": "2.3.5",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1624474653
+  },
+  {
+    "version": "1.6.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1608633566
+  },
+  {
+    "version": "0.5.1",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1601199105
+  },
+  {
+    "version": "1.2.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1601199105
+  },
+  {
+    "version": "1.5.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1606746676
+  },
+  {
+    "version": "1.3.2",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1599636560
+  },
+  {
+    "version": "2.3.3",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1621598944
+  },
+  {
+    "version": "0.1.1",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1601199105
+  },
+  {
+    "version": "0.6.2",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1601199105
+  },
+  {
+    "version": "2.3.7",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1632363289
+  },
+  {
+    "version": "1.3.1",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1597923014
+  },
+  {
+    "version": "1.7.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1610801666
+  },
+  {
+    "version": "1.0.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1601199105
+  },
+  {
+    "version": "2.3.2",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1621583115
+  },
+  {
+    "version": "0.6.1",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1601199105
+  },
+  {
+    "version": "2.3.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1618627407
+  },
+  {
+    "version": "0.7.1",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1601199105
+  },
+  {
+    "version": "0.7.2",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1601199105
+  },
+  {
+    "version": "1.1.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1601199105
+  },
+  {
+    "version": "2.2.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1616176461
+  },
+  {
+    "version": "2.3.4",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1622341938
+  },
+  {
+    "version": "1.9.1",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1613162029
+  },
+  {
+    "version": "0.5.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1601199105
+  },
+  {
+    "version": "0.7.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1601199105
+  },
+  {
+    "version": "2.3.1",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1620767898
+  },
+  {
+    "version": "1.1.1",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1601199105
+  },
+  {
+    "version": "1.9.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1611621849
+  },
+  {
+    "version": "0.6.3",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1601199105
+  },
+  {
+    "version": "1.3.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1601199105
+  },
+  {
+    "version": "2.1.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1616049399
+  },
+  {
+    "version": "0.6.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1601199105
+  },
+  {
+    "version": "0.2.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1601199105
+  },
+  {
+    "version": "2.0.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1615120916
+  },
+  {
+    "version": "1.3.3",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1600298432
+  }
+]

web/src/layout/package/__fixtures__/LastYearActivity/3.json

@@ -0,0 +1,32 @@
+[
+  {
+    "version": "1.0.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1526545924
+  },
+  {
+    "version": "1.1.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1532307998
+  },
+  {
+    "version": "0.1.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1505208997
+  },
+  {
+    "version": "1.2.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1533705963
+  },
+  {
+    "version": "1.3.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1533703991
+  }
+]

web/src/layout/package/__fixtures__/LastYearActivity/5.json

@@ -0,0 +1,260 @@
+[
+  {
+    "version": "2.3.6",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1629760922
+  },
+  {
+    "version": "1.10.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1613826911
+  },
+  {
+    "version": "1.8.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1611164780
+  },
+  {
+    "version": "0.1.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1601199105
+  },
+  {
+    "version": "0.1.3",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1601199105
+  },
+  {
+    "version": "0.4.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1601199105
+  },
+  {
+    "version": "1.4.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1605701000
+  },
+  {
+    "version": "0.3.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1601199105
+  },
+  {
+    "version": "1.3.4",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1605028294
+  },
+  {
+    "version": "2.3.5",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1624474653
+  },
+  {
+    "version": "1.6.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1608633566
+  },
+  {
+    "version": "0.5.1",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1601199105
+  },
+  {
+    "version": "1.2.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1601199105
+  },
+  {
+    "version": "1.5.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1606746676
+  },
+  {
+    "version": "1.3.2",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1599636560
+  },
+  {
+    "version": "2.3.3",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1621598944
+  },
+  {
+    "version": "0.1.1",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1601199105
+  },
+  {
+    "version": "0.6.2",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1601199105
+  },
+  {
+    "version": "2.3.7",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1632363289
+  },
+  {
+    "version": "1.3.1",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1597923014
+  },
+  {
+    "version": "1.7.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1610801666
+  },
+  {
+    "version": "1.0.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1601199105
+  },
+  {
+    "version": "2.3.2",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1621583115
+  },
+  {
+    "version": "0.6.1",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1601199105
+  },
+  {
+    "version": "2.3.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1618627407
+  },
+  {
+    "version": "0.7.1",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1601199105
+  },
+  {
+    "version": "0.7.2",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1601199105
+  },
+  {
+    "version": "1.1.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1601199105
+  },
+  {
+    "version": "2.2.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1616176461
+  },
+  {
+    "version": "2.3.4",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1622341938
+  },
+  {
+    "version": "1.9.1",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1613162029
+  },
+  {
+    "version": "0.5.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1601199105
+  },
+  {
+    "version": "0.7.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1601199105
+  },
+  {
+    "version": "2.3.1",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1620767898
+  },
+  {
+    "version": "1.1.1",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1601199105
+  },
+  {
+    "version": "1.9.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1611621849
+  },
+  {
+    "version": "0.6.3",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1601199105
+  },
+  {
+    "version": "1.3.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1601199105
+  },
+  {
+    "version": "2.1.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1616049399
+  },
+  {
+    "version": "0.6.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1601199105
+  },
+  {
+    "version": "0.2.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1601199105
+  },
+  {
+    "version": "2.0.0",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1615120916
+  },
+  {
+    "version": "1.3.3",
+    "containsSecurityUpdates": false,
+    "prerelease": false,
+    "ts": 1600298432
+  }
+]

web/src/layout/package/__snapshots__/Details.test.tsx.snap

@@ -101,6 +101,489 @@ exports[`Details renders correctly 1`] = `
       </div>
     </div>
   </div>
+  <div>
+    <div
+      class="mt-2 mb-1 undefined"
+      data-testid="smallTitle"
+    >
+      <small
+        class="card-title text-muted text-uppercase"
+      >
+        <span
+          aria-level="5"
+          role="heading"
+        >
+          Last year activity
+        </span>
+      </small>
+    </div>
+    <div
+      class="d-flex flex-column w-100 mb-3 heatMap"
+      data-testid="lastYearActivity"
+    >
+      <div
+        class="d-flex flex-row justify-content-between w-100"
+      >
+        <div
+          class="position-relative"
+        >
+          <div
+            class="position-relative heatMapCell level0"
+            data-testid="heatMapCell"
+          />
+          <div
+            class="popover popover"
+            data-testid="heatMapPopover"
+            role="tooltip"
+          >
+            <div
+              class="popover-header popoverHeader"
+            >
+              Nov'20
+            </div>
+            <div
+              class="popover-body text-nowrap"
+            >
+              <div
+                class="d-flex flex-row align-items-center"
+              >
+                <div
+                  class="mr-2 marker level0"
+                />
+                Releases: 
+                <span
+                  class="font-weight-bold ml-2"
+                >
+                  0
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="position-relative"
+        >
+          <div
+            class="position-relative heatMapCell level0"
+            data-testid="heatMapCell"
+          />
+          <div
+            class="popover popover"
+            data-testid="heatMapPopover"
+            role="tooltip"
+          >
+            <div
+              class="popover-header popoverHeader"
+            >
+              Dec'20
+            </div>
+            <div
+              class="popover-body text-nowrap"
+            >
+              <div
+                class="d-flex flex-row align-items-center"
+              >
+                <div
+                  class="mr-2 marker level0"
+                />
+                Releases: 
+                <span
+                  class="font-weight-bold ml-2"
+                >
+                  0
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="position-relative"
+        >
+          <div
+            class="position-relative heatMapCell level0"
+            data-testid="heatMapCell"
+          />
+          <div
+            class="popover popover"
+            data-testid="heatMapPopover"
+            role="tooltip"
+          >
+            <div
+              class="popover-header popoverHeader"
+            >
+              Jan'21
+            </div>
+            <div
+              class="popover-body text-nowrap"
+            >
+              <div
+                class="d-flex flex-row align-items-center"
+              >
+                <div
+                  class="mr-2 marker level0"
+                />
+                Releases: 
+                <span
+                  class="font-weight-bold ml-2"
+                >
+                  0
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="position-relative"
+        >
+          <div
+            class="position-relative heatMapCell level0"
+            data-testid="heatMapCell"
+          />
+          <div
+            class="popover popover"
+            data-testid="heatMapPopover"
+            role="tooltip"
+          >
+            <div
+              class="popover-header popoverHeader"
+            >
+              Feb'21
+            </div>
+            <div
+              class="popover-body text-nowrap"
+            >
+              <div
+                class="d-flex flex-row align-items-center"
+              >
+                <div
+                  class="mr-2 marker level0"
+                />
+                Releases: 
+                <span
+                  class="font-weight-bold ml-2"
+                >
+                  0
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="position-relative"
+        >
+          <div
+            class="position-relative heatMapCell level0"
+            data-testid="heatMapCell"
+          />
+          <div
+            class="popover popover"
+            data-testid="heatMapPopover"
+            role="tooltip"
+          >
+            <div
+              class="popover-header popoverHeader"
+            >
+              Mar'21
+            </div>
+            <div
+              class="popover-body text-nowrap"
+            >
+              <div
+                class="d-flex flex-row align-items-center"
+              >
+                <div
+                  class="mr-2 marker level0"
+                />
+                Releases: 
+                <span
+                  class="font-weight-bold ml-2"
+                >
+                  0
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="position-relative"
+        >
+          <div
+            class="position-relative heatMapCell level0"
+            data-testid="heatMapCell"
+          />
+          <div
+            class="popover popover"
+            data-testid="heatMapPopover"
+            role="tooltip"
+          >
+            <div
+              class="popover-header popoverHeader"
+            >
+              Apr'21
+            </div>
+            <div
+              class="popover-body text-nowrap"
+            >
+              <div
+                class="d-flex flex-row align-items-center"
+              >
+                <div
+                  class="mr-2 marker level0"
+                />
+                Releases: 
+                <span
+                  class="font-weight-bold ml-2"
+                >
+                  0
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="position-relative"
+        >
+          <div
+            class="position-relative heatMapCell level0"
+            data-testid="heatMapCell"
+          />
+          <div
+            class="popover popover"
+            data-testid="heatMapPopover"
+            role="tooltip"
+          >
+            <div
+              class="popover-header popoverHeader"
+            >
+              May'21
+            </div>
+            <div
+              class="popover-body text-nowrap"
+            >
+              <div
+                class="d-flex flex-row align-items-center"
+              >
+                <div
+                  class="mr-2 marker level0"
+                />
+                Releases: 
+                <span
+                  class="font-weight-bold ml-2"
+                >
+                  0
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="position-relative"
+        >
+          <div
+            class="position-relative heatMapCell level0"
+            data-testid="heatMapCell"
+          />
+          <div
+            class="popover popover"
+            data-testid="heatMapPopover"
+            role="tooltip"
+          >
+            <div
+              class="popover-header popoverHeader"
+            >
+              Jun'21
+            </div>
+            <div
+              class="popover-body text-nowrap"
+            >
+              <div
+                class="d-flex flex-row align-items-center"
+              >
+                <div
+                  class="mr-2 marker level0"
+                />
+                Releases: 
+                <span
+                  class="font-weight-bold ml-2"
+                >
+                  0
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="position-relative"
+        >
+          <div
+            class="position-relative heatMapCell level0"
+            data-testid="heatMapCell"
+          />
+          <div
+            class="popover popover"
+            data-testid="heatMapPopover"
+            role="tooltip"
+          >
+            <div
+              class="popover-header popoverHeader"
+            >
+              Jul'21
+            </div>
+            <div
+              class="popover-body text-nowrap"
+            >
+              <div
+                class="d-flex flex-row align-items-center"
+              >
+                <div
+                  class="mr-2 marker level0"
+                />
+                Releases: 
+                <span
+                  class="font-weight-bold ml-2"
+                >
+                  0
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="position-relative"
+        >
+          <div
+            class="position-relative heatMapCell level0"
+            data-testid="heatMapCell"
+          />
+          <div
+            class="popover popover"
+            data-testid="heatMapPopover"
+            role="tooltip"
+          >
+            <div
+              class="popover-header popoverHeader"
+            >
+              Aug'21
+            </div>
+            <div
+              class="popover-body text-nowrap"
+            >
+              <div
+                class="d-flex flex-row align-items-center"
+              >
+                <div
+                  class="mr-2 marker level0"
+                />
+                Releases: 
+                <span
+                  class="font-weight-bold ml-2"
+                >
+                  0
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="position-relative"
+        >
+          <div
+            class="position-relative heatMapCell level0"
+            data-testid="heatMapCell"
+          />
+          <div
+            class="popover popover"
+            data-testid="heatMapPopover"
+            role="tooltip"
+          >
+            <div
+              class="popover-header popoverHeader"
+            >
+              Sep'21
+            </div>
+            <div
+              class="popover-body text-nowrap"
+            >
+              <div
+                class="d-flex flex-row align-items-center"
+              >
+                <div
+                  class="mr-2 marker level0"
+                />
+                Releases: 
+                <span
+                  class="font-weight-bold ml-2"
+                >
+                  0
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="position-relative"
+        >
+          <div
+            class="position-relative heatMapCell level0"
+            data-testid="heatMapCell"
+          />
+          <div
+            class="popover popover"
+            data-testid="heatMapPopover"
+            role="tooltip"
+          >
+            <div
+              class="popover-header popoverHeader"
+            >
+              Oct'21
+            </div>
+            <div
+              class="popover-body text-nowrap"
+            >
+              <div
+                class="d-flex flex-row align-items-center"
+              >
+                <div
+                  class="mr-2 marker level0"
+                />
+                Releases: 
+                <span
+                  class="font-weight-bold ml-2"
+                >
+                  0
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="d-flex flex-row justify-content-between w-100 legend"
+      >
+        <div>
+          <small
+            class="text-muted"
+          >
+            Nov'20
+          </small>
+        </div>
+        <div>
+          <small
+            class="text-muted"
+          >
+            Apr'21
+          </small>
+        </div>
+        <div>
+          <small
+            class="text-muted"
+          >
+            Oct'21
+          </small>
+        </div>
+      </div>
+    </div>
+  </div>
   <div
     class="mt-2 mb-1 undefined"
     data-testid="smallTitle"

web/src/layout/package/__snapshots__/LastYearActivity.test.tsx.snap

@@ -0,0 +1,487 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LastYearActivity creates snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="mt-2 mb-1 undefined"
+    data-testid="smallTitle"
+  >
+    <small
+      class="card-title text-muted text-uppercase"
+    >
+      <span
+        aria-level="5"
+        role="heading"
+      >
+        Last year activity
+      </span>
+    </small>
+  </div>
+  <div
+    class="d-flex flex-column w-100 mb-3 heatMap"
+    data-testid="lastYearActivity"
+  >
+    <div
+      class="d-flex flex-row justify-content-between w-100"
+    >
+      <div
+        class="position-relative"
+      >
+        <div
+          class="position-relative heatMapCell level3"
+          data-testid="heatMapCell"
+        />
+        <div
+          class="popover popover"
+          data-testid="heatMapPopover"
+          role="tooltip"
+        >
+          <div
+            class="popover-header popoverHeader"
+          >
+            Nov'20
+          </div>
+          <div
+            class="popover-body text-nowrap"
+          >
+            <div
+              class="d-flex flex-row align-items-center"
+            >
+              <div
+                class="mr-2 marker level3"
+              />
+              Releases: 
+              <span
+                class="font-weight-bold ml-2"
+              >
+                3
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="position-relative"
+      >
+        <div
+          class="position-relative heatMapCell level1"
+          data-testid="heatMapCell"
+        />
+        <div
+          class="popover popover"
+          data-testid="heatMapPopover"
+          role="tooltip"
+        >
+          <div
+            class="popover-header popoverHeader"
+          >
+            Dec'20
+          </div>
+          <div
+            class="popover-body text-nowrap"
+          >
+            <div
+              class="d-flex flex-row align-items-center"
+            >
+              <div
+                class="mr-2 marker level1"
+              />
+              Releases: 
+              <span
+                class="font-weight-bold ml-2"
+              >
+                1
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="position-relative"
+      >
+        <div
+          class="position-relative heatMapCell level3"
+          data-testid="heatMapCell"
+        />
+        <div
+          class="popover popover"
+          data-testid="heatMapPopover"
+          role="tooltip"
+        >
+          <div
+            class="popover-header popoverHeader"
+          >
+            Jan'21
+          </div>
+          <div
+            class="popover-body text-nowrap"
+          >
+            <div
+              class="d-flex flex-row align-items-center"
+            >
+              <div
+                class="mr-2 marker level3"
+              />
+              Releases: 
+              <span
+                class="font-weight-bold ml-2"
+              >
+                3
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="position-relative"
+      >
+        <div
+          class="position-relative heatMapCell level2"
+          data-testid="heatMapCell"
+        />
+        <div
+          class="popover popover"
+          data-testid="heatMapPopover"
+          role="tooltip"
+        >
+          <div
+            class="popover-header popoverHeader"
+          >
+            Feb'21
+          </div>
+          <div
+            class="popover-body text-nowrap"
+          >
+            <div
+              class="d-flex flex-row align-items-center"
+            >
+              <div
+                class="mr-2 marker level2"
+              />
+              Releases: 
+              <span
+                class="font-weight-bold ml-2"
+              >
+                2
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="position-relative"
+      >
+        <div
+          class="position-relative heatMapCell level3"
+          data-testid="heatMapCell"
+        />
+        <div
+          class="popover popover"
+          data-testid="heatMapPopover"
+          role="tooltip"
+        >
+          <div
+            class="popover-header popoverHeader"
+          >
+            Mar'21
+          </div>
+          <div
+            class="popover-body text-nowrap"
+          >
+            <div
+              class="d-flex flex-row align-items-center"
+            >
+              <div
+                class="mr-2 marker level3"
+              />
+              Releases: 
+              <span
+                class="font-weight-bold ml-2"
+              >
+                3
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="position-relative"
+      >
+        <div
+          class="position-relative heatMapCell level1"
+          data-testid="heatMapCell"
+        />
+        <div
+          class="popover popover"
+          data-testid="heatMapPopover"
+          role="tooltip"
+        >
+          <div
+            class="popover-header popoverHeader"
+          >
+            Apr'21
+          </div>
+          <div
+            class="popover-body text-nowrap"
+          >
+            <div
+              class="d-flex flex-row align-items-center"
+            >
+              <div
+                class="mr-2 marker level1"
+              />
+              Releases: 
+              <span
+                class="font-weight-bold ml-2"
+              >
+                1
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="position-relative"
+      >
+        <div
+          class="position-relative heatMapCell level3"
+          data-testid="heatMapCell"
+        />
+        <div
+          class="popover popover"
+          data-testid="heatMapPopover"
+          role="tooltip"
+        >
+          <div
+            class="popover-header popoverHeader"
+          >
+            May'21
+          </div>
+          <div
+            class="popover-body text-nowrap"
+          >
+            <div
+              class="d-flex flex-row align-items-center"
+            >
+              <div
+                class="mr-2 marker level3"
+              />
+              Releases: 
+              <span
+                class="font-weight-bold ml-2"
+              >
+                4
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="position-relative"
+      >
+        <div
+          class="position-relative heatMapCell level1"
+          data-testid="heatMapCell"
+        />
+        <div
+          class="popover popover"
+          data-testid="heatMapPopover"
+          role="tooltip"
+        >
+          <div
+            class="popover-header popoverHeader"
+          >
+            Jun'21
+          </div>
+          <div
+            class="popover-body text-nowrap"
+          >
+            <div
+              class="d-flex flex-row align-items-center"
+            >
+              <div
+                class="mr-2 marker level1"
+              />
+              Releases: 
+              <span
+                class="font-weight-bold ml-2"
+              >
+                1
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="position-relative"
+      >
+        <div
+          class="position-relative heatMapCell level0"
+          data-testid="heatMapCell"
+        />
+        <div
+          class="popover popover"
+          data-testid="heatMapPopover"
+          role="tooltip"
+        >
+          <div
+            class="popover-header popoverHeader"
+          >
+            Jul'21
+          </div>
+          <div
+            class="popover-body text-nowrap"
+          >
+            <div
+              class="d-flex flex-row align-items-center"
+            >
+              <div
+                class="mr-2 marker level0"
+              />
+              Releases: 
+              <span
+                class="font-weight-bold ml-2"
+              >
+                0
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="position-relative"
+      >
+        <div
+          class="position-relative heatMapCell level1"
+          data-testid="heatMapCell"
+        />
+        <div
+          class="popover popover"
+          data-testid="heatMapPopover"
+          role="tooltip"
+        >
+          <div
+            class="popover-header popoverHeader"
+          >
+            Aug'21
+          </div>
+          <div
+            class="popover-body text-nowrap"
+          >
+            <div
+              class="d-flex flex-row align-items-center"
+            >
+              <div
+                class="mr-2 marker level1"
+              />
+              Releases: 
+              <span
+                class="font-weight-bold ml-2"
+              >
+                1
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="position-relative"
+      >
+        <div
+          class="position-relative heatMapCell level1"
+          data-testid="heatMapCell"
+        />
+        <div
+          class="popover popover"
+          data-testid="heatMapPopover"
+          role="tooltip"
+        >
+          <div
+            class="popover-header popoverHeader"
+          >
+            Sep'21
+          </div>
+          <div
+            class="popover-body text-nowrap"
+          >
+            <div
+              class="d-flex flex-row align-items-center"
+            >
+              <div
+                class="mr-2 marker level1"
+              />
+              Releases: 
+              <span
+                class="font-weight-bold ml-2"
+              >
+                1
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="position-relative"
+      >
+        <div
+          class="position-relative heatMapCell level0"
+          data-testid="heatMapCell"
+        />
+        <div
+          class="popover popover"
+          data-testid="heatMapPopover"
+          role="tooltip"
+        >
+          <div
+            class="popover-header popoverHeader"
+          >
+            Oct'21
+          </div>
+          <div
+            class="popover-body text-nowrap"
+          >
+            <div
+              class="d-flex flex-row align-items-center"
+            >
+              <div
+                class="mr-2 marker level0"
+              />
+              Releases: 
+              <span
+                class="font-weight-bold ml-2"
+              >
+                0
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="d-flex flex-row justify-content-between w-100 legend"
+    >
+      <div>
+        <small
+          class="text-muted"
+        >
+          Nov'20
+        </small>
+      </div>
+      <div>
+        <small
+          class="text-muted"
+        >
+          Apr'21
+        </small>
+      </div>
+      <div>
+        <small
+          class="text-muted"
+        >
+          Oct'21
+        </small>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

web/src/layout/package/index.test.tsx

@@ -39,6 +39,16 @@ const defaultProps = {
 };
 
 describe('Package index', () => {
+  let dateNowSpy: any;
+
+  beforeEach(() => {
+    dateNowSpy = jest.spyOn(Date, 'now').mockImplementation(() => 1634969145000);
+  });
+
+  afterAll(() => {
+    dateNowSpy.mockRestore();
+  });
+
   afterEach(() => {
     jest.resetAllMocks();
   });

web/src/themes/dark.scss

@@ -43,6 +43,12 @@
   --mid-gray: #495057;
   --badge-bg: #1a1c1f;
 
+  --color-activity-0: #161b22;
+  --color-activity-1: #0e4429;
+  --color-activity-2: #006d32;
+  --color-activity-3: #26a641;
+  --color-activity-4: #39d353;
+
   $border-solid: #737475;
 
   body {

web/src/themes/default.scss

@@ -204,3 +204,19 @@ button,
   background-color: #686868;
   border: 2px solid var(--white);
 }
+
+/* Popover */
+.popover {
+  background-color: var(--white);
+  color: var(--color-font);
+  border-color: var(--mid-gray);
+}
+
+.popover-header {
+  background-color: var(--light-gray);
+  border-color: var(--mid-gray);
+}
+
+.popover-body {
+  color: var(--color-font);
+}

web/src/themes/light.scss

@@ -26,6 +26,12 @@
   --mid-gray: #6c757d;
   --badge-bg: #f3f6f9;
 
+  --color-activity-0: #ebedf0;
+  --color-activity-1: #9be9a8;
+  --color-activity-2: #40c463;
+  --color-activity-3: #30a14e;
+  --color-activity-4: #216e39;
+
   // $theme-colors for Bootstrap
   $color1: #417598;
   $color2: #2d4857;