Charts

Heatmap

1import { DateTime, Interval } from 'luxon'
2import HeatmapChart from '@components/HeatmapChart'
3
4function HeatmapExample() {
5  const year = 2023
6  const start = DateTime.fromObject({ year, month: 1, day: 1 })
7  const end = DateTime.fromObject({ year, month: 12, day: 31 })
8
9  const data = Interval.fromDateTimes(start, end.endOf('day'))
10    .splitBy({ day: 1 })
11    .map(it => it.start)
12    .map(date => {
13      const value = Math.random() < 0.3 ? 0 : Math.random() * 100
14      return {
15        date: date.toISODate(),
16        value,
17        tooltip: `${Math.ceil(value)} points on ${date.toLocaleString(
18          DateTime.DATE_FULL,
19        )}`,
20      }
21    })
22
23  return <HeatmapChart year={year} data={data} id="demo" />
24}

Reading activity chart

1import { chartColors } from 'ui'
2import {
3  Chart as ChartJS,
4  Tooltip,
5  Legend,
6  LinearScale,
7  CategoryScale,
8  BarElement,
9  PointElement,
10  LineElement,
11  LineController,
12  BarController,
13  TimeScale,
14} from 'chart.js'
15import { Chart } from 'react-chartjs-2'
16import 'chartjs-adapter-luxon'
17import { faker } from '@faker-js/faker'
18
19ChartJS.register(
20  Tooltip,
21  Legend,
22  LinearScale,
23  CategoryScale,
24  BarElement,
25  PointElement,
26  LineElement,
27  LineController,
28  BarController,
29  TimeScale,
30)
31
32function ReadingActivityChart() {
33  const labels = Array.from(Array(14).keys()).map(
34    day => '2022-12-' + (day + 1).toString().padStart(2, '0'),
35  )
36
37  const comicData = labels.map(() =>
38    faker.datatype.number({ min: 0, max: 1000 }),
39  )
40  const bookData = labels.map(() =>
41    faker.datatype.number({ min: 0, max: 1000 }),
42  )
43  const cumulativeScore = comicData
44    .map((comic, i) => comic + bookData[i])
45    .reduce((acc, val) => {
46      if (acc.length > 0) {
47        val += acc[acc.length - 1]
48      }
49      acc.push(val)
50      return acc
51    }, [] as number[])
52
53  return (
54    <Chart
55      type="bar"
56      data={{
57        labels,
58        datasets: [
59          {
60            type: 'line' as const,
61            label: 'Cumulative Score',
62            borderColor: chartColors[chartColors.length - 1],
63            borderWidth: 2,
64            fill: false,
65            data: cumulativeScore,
66            yAxisID: 'yCumulative',
67          },
68          {
69            type: 'bar' as const,
70            label: 'Comic',
71            backgroundColor: chartColors[0],
72            data: comicData,
73            yAxisID: 'yScore',
74          },
75          {
76            type: 'bar' as const,
77            label: 'Book',
78            backgroundColor: chartColors[1],
79            data: bookData,
80            yAxisID: 'yScore',
81          },
82        ],
83      }}
84      options={{
85        scales: {
86          x: {
87            stacked: true,
88            type: 'time',
89            time: {
90              tooltipFormat: 'MMMM d',
91              unit: 'day',
92              displayFormats: {
93                day: 'MMM dd',
94              },
95            },
96          },
97          yScore: {
98            title: {
99              text: 'Score',
100              display: true,
101            },
102            stacked: true,
103            position: 'left',
104          },
105          yCumulative: {
106            title: {
107              text: 'Cumulative score',
108              display: true,
109            },
110            position: 'right',
111            grid: {
112              drawOnChartArea: false,
113            },
114          },
115        },
116      }}
117    />
118  )
119}

Doughnut chart

1import { chartDatasetDefaults } from 'ui'
2import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js'
3import { Doughnut } from 'react-chartjs-2'
4
5ChartJS.register(ArcElement, Tooltip, Legend)
6
7const Example = () => (
8  <Doughnut
9    data={{
10      labels: ['Book', 'Comic', 'Sentence', 'News'],
11      datasets: [
12        {
13          ...chartDatasetDefaults,
14          label: 'Score',
15          data: [200, 300, 400, 500],
16          weight: 20,
17        },
18      ],
19    }}
20  />
21)