climb-log/progress.js at main · isheglov/climb-log · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
// Function to get climbing data from localStorage
function getClimbingData() {
    const climbs = JSON.parse(localStorage.getItem('climbs')) || [];

    // Group climbs by date and calculate average grade
    const groupedData = climbs.reduce((acc, climb) => {
        const date = climb.date.split('T')[0];
        if (!acc[date]) {
            acc[date] = {
                grades: [],
                count: 0
            };
        }
        acc[date].grades.push(parseFloat(climb.grade));
        acc[date].count++;
        return acc;
    }, {});

    // Calculate maximum grade and format for Chart.js
    const chartData = Object.entries(groupedData).map(([date, data]) => ({
        x: date,
        y: Math.max(...data.grades)
    }));

    return chartData.sort((a, b) => new Date(a.x) - new Date(b.x));
}

// Function to get climb count data from localStorage
function getClimbCountData() {
    const climbs = JSON.parse(localStorage.getItem('climbs')) || [];

    // Group climbs by date and count climbs
    const groupedData = climbs.reduce((acc, climb) => {
        const date = climb.date.split('T')[0];
        if (!acc[date]) {
            acc[date] = {
                count: 0
            };
        }
        acc[date].count++;
        return acc;
    }, {});

    // Format for Chart.js
    const chartData = Object.entries(groupedData).map(([date, data]) => ({
        x: date,
        y: data.count
    }));

    return chartData.sort((a, b) => new Date(a.x) - new Date(b.x));
}

// Create and render the graph
function renderGraph() {
    const ctxGrade = document.getElementById('climbingGraph').getContext('2d');
    const ctxCount = document.getElementById('climbCountGraph').getContext('2d'); // Get context for the new chart
    const gradeData = getClimbingData();
    const countData = getClimbCountData(); // Get data for climb count

    new Chart(ctxGrade, {
        type: 'line',
        data: {
            datasets: [{
                label: 'Highest Climbing Grade',
                data: gradeData,
                borderColor: '#ff6b6b',
                backgroundColor: 'rgba(255, 107, 107, 0.1)',
                tension: 0.3,
                fill: true
            }]
        },
        options: {
            responsive: true,
            scales: {
                x: {
                    type: 'time',
                    time: {
                        unit: 'day'
                    },
                    title: {
                        display: true,
                        text: 'Date'
                    }
                },
                y: {
                    title: {
                        display: true,
                        text: 'Grade'
                    }
                }
            },
            plugins: {
                title: {
                    display: true,
                    text: 'Climbing Progress Over Time'
                }
            }
        }
    });

    new Chart(ctxCount, { // Render the new chart
        type: 'bar', // Changed to bar chart for count
        data: {
            datasets: [{
                label: 'Number of Climbs per Session',
                data: countData,
                backgroundColor: 'rgba(54, 162, 235, 0.7)', // Example color
                borderColor: 'rgba(54, 162, 235, 1)',
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            scales: {
                x: {
                    type: 'time',
                    time: {
                        unit: 'day'
                    },
                    title: {
                        display: true,
                        text: 'Date'
                    }
                },
                y: {
                    title: {
                        display: true,
                        text: 'Climbs Count'
                    },
                    beginAtZero: true, // Start y-axis from 0 for count
                    stepSize: 1 // Ensure integer steps for climb count
                }
            },
            plugins: {
                title: {
                    display: true,
                    text: 'Climbs per Session Over Time' // Updated title
                }
            }
        }
    });
}

// Initialize the graph when the page loads
document.addEventListener('DOMContentLoaded', renderGraph);