\n \n {(size) => (\n \n \n new Date(v).toUTCString().substr(8, 8)\n }\n tickLabelAngle={30}\n tickPadding={30}\n />\n )}\n {xAxisType === AxisTypes.Number && (\n \n Math.round(val) === val\n ? val.toString()\n : ''\n }\n />\n )}\n {hideXAxis && \n
\n );\n};\n\nexport interface DynamicChartData {\n x: number | string | Date;\n y: number | string | Date;\n label?: string;\n}\n\nexport interface ChartData {\n x: number | string;\n y: number;\n label?: string;\n}\n\nexport interface NumericChartData {\n x: number;\n y: number;\n label?: string;\n}\n\nexport function getChartData\n \n {getActivityEmoji(\n activity.type,\n activity.isBislettInterval\n )}\n \n {activity.date} \n
\n \n \n {getFeelingEmoji(activity.feeling.value)}\n \n
\n \n \n \n \n
\n \n
\n | \n | \n \n | \n )}\n
|---|
\n
\n);\n\nexport default HomePage;\n","import React, { useEffect, useState } from 'react';\nimport { DateRangeInput, START_DATE, END_DATE } from '@datepicker-react/styled';\nimport styled, { ThemeProvider } from 'styled-components';\n\nconst DatePickerWrapper = styled.div`\n label {\n width: 110px;\n }\n`;\n\ninterface DateRangePickerProps {\n startDate: Date | null;\n endDate: Date | null;\n isLoading: boolean | undefined;\n onChange: (startDate: Date, endDate: Date) => void;\n}\n\nconst DateRangePicker: React.FC\n
\n );\n};\n\nexport default ActivitiesPage;\n","import React, { useState, useEffect } from 'react';\nimport '../../../node_modules/react-vis/dist/style.css';\nimport { useParams } from 'react-router';\nimport { TableContainer } from '../../styles/styles';\nimport Loader, { LoadingStatus } from '../utils/Loader';\nimport { EmptyThead, Table } from '../utils/Table';\nimport ActivityTr, { Activity } from '../utils/ActivityTr';\nimport ValueTh from '../utils/ValueTh';\n\ninterface SimilarResponse {\n activities: ActivityGroup[];\n}\n\ninterface ActivityGroup {\n name: string;\n items: Activity[];\n}\n\nconst SimiliarActivitiesPage: React.FC = () => {\n const [loadingStatus, setLoadingStatus] = useState(LoadingStatus.None);\n const [activities, setActivities] = useState\n \n \n {activities?.map((group) => (\n
\n \n
\n )}\n | \n {group.name}\n | \n\n \n | \n )}\n
|---|---|
\n
\n );\n};\n\nexport default SimiliarActivitiesPage;\n","import React, { useState, useMemo } from 'react';\nimport {\n CustomSVGSeries,\n Hint,\n LabelSeries,\n LineSeries,\n VerticalRectSeries,\n} from 'react-vis';\nimport styled from 'styled-components';\nimport { getKmString, getPaceString, getTimeString } from '../utils/Formatters';\nimport Chart, { AxisTypes, DynamicChartData } from '../charts/Chart';\n\nconst IntervalPaceContainer = styled.div`\n margin-top: 20px;\n font-size: 10px;\n margin-bottom: -10px;\n`;\n\nexport interface Lap {\n averageCadence: number;\n averageHeartrate: number;\n averageSpeed: number;\n distance: number;\n elapsedTime: number;\n endIndex: number;\n id: number;\n isInterval: boolean;\n lactate: number;\n lapIndex: number;\n maxHeartrate: number;\n maxSpeed: number;\n movingTime: number;\n name: string;\n originalDistance?: number;\n paceZone: number;\n resourceState: number;\n split: number;\n startDate: Date;\n startDateLocal: Date;\n startIndex: number;\n totalElevationGain: number;\n}\n\nconst isPauseLap = (index: number, laps: Lap[]) => {\n // If we run less than 500m before or after an interval lap we define it as a pause lap.\n if (\n ((index > 0 && laps[index - 1].isInterval) ||\n (index < laps.length - 1 && laps[index + 1].isInterval)) &&\n laps[index].distance < 500\n ) {\n return true;\n }\n\n return false;\n};\n\nfunction NormalizeChartData\n \n \n {activities?.map((group) => (\n
\n \n
\n )}\n | \n {group.name}\n | \n\n \n | \n )}\n
|---|---|
\n {chart.laps?.length > 1 && (\n \n getPaceString(distancePerSecond, activityType)\n }\n margin={{ bottom: 15 }}\n hideYAxis\n >\n \n setHint({ value, owner: 'pace' })\n }\n onValueMouseOut={() => setHint(null)}\n onValueClick={(value) => {\n window.location.hash = value.x.toString();\n }}\n stroke=\"0\"\n colorRange={['#d6d6d6', '#92b7f8']}\n />\n \n \n {hint.value.label}\n
\n \n )}\n \n )}\n {averageIntervalPace && (\n - \n
- \n Type: {activity.type}{' '}\n {activity.workoutType &&\n `(${WorkoutType[activity.workoutType]})`}\n \n
- \n Date:{' '}\n {getDateString(activity.startDate)}\n \n {activity.distance > 0 && (\n
- \n Distance:{' '}\n {getKmString(activity.distance)}\n \n )}\n
- \n Time:{' '}\n {getTimeString(activity.elapsedTime)} (elapsed),{' '}\n {getTimeString(activity.movingTime)} (moving)\n \n {activity.averageSpeed > 0 && (\n
- \n Pace:{' '}\n {getPaceString(\n activity.averageSpeed,\n activity.type\n )}{' '}\n (avg),\n {getPaceString(\n activity.maxSpeed,\n activity.type\n )}{' '}\n (max)\n \n )}\n {activity.hasHeartrate && (\n
- \n Heartrate:{' '}\n {activity.averageHeartrate} (avg),{' '}\n {activity.maxHeartrate} (max)\n \n )}\n {activity.feeling && (\n
- \n Feeling:{' '}\n {getFeelingTitle(activity.feeling)}\n \n )}\n
Random info
\n- \n
- \n Achievement count:{' '}\n {activity.achievementCount}\n \n
- \n Sweated with:{' '}\n {activity.athleteCount - 1} others\n \n
- \n Average cadence:{' '}\n {activity.averageCadence * 2}\n \n
- \n Calories: {activity.calories}\n \n
- \n Commute:{' '}\n {activity.commute.toString()}\n \n
- \n Elevation: {activity.elevLow}{' '}\n (low), {activity.elevHigh} (high),{' '}\n {activity.totalElevationGain} (gained)\n \n {activity.gear && (\n
- \n Gear: {activity.gear.name} (\n {getKmString(activity.gear.distance)})\n \n )}\n
- \n Manual activity:{' '}\n {activity.manual.toString()}\n \n
- \n Device: {activity.deviceName}\n \n {activity.maxWatts > 0 && (\n
- \n Max watts: {activity.maxWatts}\n \n )}\n {activity.perceivedExertion && (\n
- \n Perceived exertion:{' '}\n {activity.perceivedExertion}\n \n )}\n
- \n Prs: {activity.prCount}\n \n
- \n Private:{' '}\n {activity.private.toString()}\n \n
- \n Suffer score:{' '}\n {activity.sufferScore}\n \n
Actions
\n {hasIntervals && (\n <>\n\n \n Pace \n {shortPaces && filters && shortPaces.length > 0 && (\n // y-axis will show min/500m if showing only rowing activities, and min/km\n // otherwise (including if filter is set to “all”, no matter what kinds of\n // activities are actually visible).\n \n getPaceString(\n distancePerSecond,\n (filters.get('type') ??\n 'All') as string\n )\n }\n >\n (d.y < 3 ? 3 : d.y)}\n barWidth={0.6}\n data={shortPaces}\n fill=\"#d4ce73\"\n stroke=\"0\"\n onValueMouseOver={(value) =>\n setHint({ value, owner: 'pace' })\n }\n onValueMouseOut={() => setHint(null)}\n onValueClick={(value) => {\n window.location.hash = value.x.toString();\n }}\n />\n (d.y < 3 ? 3 : d.y)}\n barWidth={0.9}\n data={mediumPaces}\n fill=\"#448944\"\n stroke=\"0\"\n onValueMouseOver={(value) =>\n setHint({ value, owner: 'pace' })\n }\n onValueMouseOut={() => setHint(null)}\n onValueClick={(value) => {\n window.location.hash = value.x.toString();\n }}\n />\n (d.y < 3 ? 3 : d.y)}\n barWidth={0.55}\n data={longPaces}\n fill=\"#afcbfb\"\n stroke=\"0\"\n onValueMouseOver={(value) =>\n setHint({ value, owner: 'pace' })\n }\n onValueMouseOut={() => setHint(null)}\n onValueClick={(value) => {\n window.location.hash = value.x.toString();\n }}\n />\n {hint?.value.label != null &&\n hint?.owner === 'pace' && (\n \n \n {hint.value.label}\n
\n \n )}\n \n )}\n \n {lactate && lactate.length > 0 && (\n \n 0 ? 3 : 2) /\n ((lactate?.length ?? 0) > 12 ? 2 : 1)\n )}\n >\n \n Distance \n {totalDistances && totalDistances.length > 0 && (\n \n \n setHint({\n value,\n owner: 'distance',\n })\n }\n onValueMouseOut={() => setHint(null)}\n onValueClick={(value) => {\n window.location.hash = value.x.toString();\n }}\n />\n \n setHint({\n value,\n owner: 'distance',\n })\n }\n onValueMouseOut={() => setHint(null)}\n onValueClick={(value) => {\n window.location.hash = value.x.toString();\n }}\n />\n {hint?.value.label != null &&\n hint?.owner === 'distance' && (\n \n \n {hint.value.label}\n
\n \n )}\n \n )}\n \n | \n {month.date}\n | \nLaps | \n|
|---|---|---|
| \n {month.date} (0 activities)\n | \n||
| \n {getKmString(\n activity.interval_Laps\n .map(\n (\n lap\n ) =>\n lap.distance\n )\n .reduce(\n (\n sum,\n value\n ) =>\n sum +\n value\n )\n )}\n | \n\n {getPaceString(\n AveragePace(\n activity.interval_Laps,\n (\n item\n ) =>\n item.elapsedTime,\n (\n item\n ) =>\n item.averageSpeed\n ) || 0,\n activity.type\n )}\n | \n\n {Math.round(\n activity.interval_Laps\n .map(\n (\n lap\n ) =>\n lap.averageHeartrate\n )\n .reduce(\n (\n sum,\n value\n ) =>\n sum +\n value\n ) /\n activity\n .interval_Laps\n .length\n )}{' '}\n bpm\n | \n
| Name | \nDistance | \nSpeed | \nTime | \nDate | \n
|---|---|---|---|---|
| \n \n \n | \n
{children}
}\n {user && syncProgress < 1.0 && (\n Loading your activities
\n {syncProgress > 0.0 && (\n\n \n {round(syncProgress * 100, 0)} %\n \n
\n )}\n {syncProgress === 0.0 && (\n \n Progress:{' '}\n \n {round(syncProgress * 100, 0)} %\n {' '}\n (Waiting for available slot)\n
\n )}\n \n \n \n \n \n \n item.activityCount}\n />\n item.distance}\n />\n item.elapsedTime}\n />\n item.pace}\n />\n item.heartrate}\n />\n {showLactate && (\n item.lactate}\n />\n )}\n \n \n \n {progress.map((item) => (\n \n {item.name} \n \n ))}\n \n \n \n )}\n
\n );\n};\n\nexport default ProgressPage;\n","import React, { useState, useEffect } from 'react';\nimport queryString from 'query-string';\nimport '../../../node_modules/react-vis/dist/style.css';\nimport { AutoSizer } from 'react-virtualized';\nimport {\n ChartLabel,\n HexbinSeries,\n HorizontalGridLines,\n VerticalGridLines,\n XAxis,\n XYPlot,\n YAxis,\n} from 'react-vis';\nimport Loader, { LoadingStatus } from '../utils/Loader';\nimport ActivityFilter, {\n getUrlWithFilters,\n Filters,\n} from '../utils/ActivityFilter';\nimport { Box, Dropdown, StackContainer } from '../../styles/styles';\nimport { getPaceString } from '../utils/Formatters';\n\ninterface Item {\n distance: number;\n elapsedTime: number;\n movingTime: number;\n pace: number;\n averageHeartrate: number;\n maxHeartrate: number;\n}\n\ninterface Axis {\n format: ((value: number) => string) | undefined;\n min: number | undefined;\n max: number | undefined;\n}\n\nconst getAxisSettings = (key: string, lockAxisFilter: boolean): Axis => {\n if (key === 'pace') {\n // TODO: If this page is ever made public, apply the same logic with\n // propagating the activity type from the filter as in the other pages.\n return {\n format: (value: number) => getPaceString(value, ''),\n min: lockAxisFilter ? 3.7 : undefined,\n max: lockAxisFilter ? 5.5 : undefined,\n };\n }\n if (key === 'averageHeartrate' || key === 'maxHeartrate') {\n return {\n format: undefined,\n min: 100,\n max: 190,\n };\n }\n\n return {\n format: undefined,\n min: undefined,\n max: undefined,\n };\n};\n\nconst defaultYAxis: keyof Item = 'averageHeartrate';\nconst defaultXAxis: keyof Item = 'pace';\n\nconst ScatterPage: React.FC = () => {\n const { yAxis, xAxis } = queryString.parse(window.location.search) as {\n yAxis: keyof Item;\n xAxis: keyof Item;\n };\n const [loadingStatus, setLoadingStatus] = useState(LoadingStatus.None);\n const [filters, setFilters] = useState\n
\n );\n};\n\nexport default ScatterPage;\n","import { Route } from 'react-router';\nimport HomePage from './components/home/HomePage';\nimport ActivitiesPage from './components/activities/ActivitiesPage';\nimport SimiliarActivitiesPage from './components/activities/SimilarActivitiesPage';\nimport ActivitiesDetailsPage from './components/activityDetails/ActivityDetailsPage';\nimport IntervalsPage from './components/intervals/IntervalsPage';\nimport RacesPage from './components/races/races';\nimport Layout from './components/Layout';\nimport ProgressPage from './components/progress/ProgressPage';\nimport ScatterPage from './components/scatter/ScatterPage';\n\nconst App = () => (\n \n \n {\n setYAxisFilter(\n v.currentTarget.value as keyof Item\n );\n }}\n >\n \n \n \n \n \n \n \n {\n setXAxisFilter(\n v.currentTarget.value as keyof Item\n );\n }}\n >\n \n \n \n \n \n \n \n \n \n \n {(size) => (\n \n \n \n
\n )}\n