import ChartPage, {WithChart} from '~/components/ChartPage'; import {NextI18NextPage, useTranslation} from '~/utils/i18n'; import React, {useCallback, useMemo, useState} from 'react'; import {sortingMethodMap, xAxisMap} from '~/resource/scalars'; import {AsideSection} from '~/components/Aside'; import Checkbox from '~/components/Checkbox'; import Content from '~/components/Content'; import Field from '~/components/Field'; import Preloader from '~/components/Preloader'; import RadioButton from '~/components/RadioButton'; import RadioGroup from '~/components/RadioGroup'; import RunAside from '~/components/RunAside'; import ScalarChart from '~/components/ScalarsPage/ScalarChart'; import Select from '~/components/Select'; import Slider from '~/components/Slider'; import {Tag} from '~/types'; import Title from '~/components/Title'; import {rem} from '~/utils/style'; import styled from 'styled-components'; import useTagFilter from '~/hooks/useTagFilter'; type XAxis = keyof typeof xAxisMap; const xAxisValues = ['step', 'relative', 'wall'] as const; type TooltipSorting = keyof typeof sortingMethodMap; const toolTipSortingValues = ['default', 'descending', 'ascending', 'nearest'] as const; const TooltipSortingDiv = styled.div` margin-top: ${rem(20)}; display: flex; align-items: center; > :last-child { margin-left: ${rem(20)}; flex-shrink: 1; flex-grow: 1; } `; const Scalars: NextI18NextPage = () => { const {t} = useTranslation(['scalars', 'common']); const [running, setRunning] = useState(true); const {runs, tags, selectedRuns, onChangeRuns, loadingRuns, loadingTags} = useTagFilter('scalars', running); const [smoothing, setSmoothing] = useState(0.6); const [xAxis, setXAxis] = useState(xAxisValues[0]); const [tooltipSorting, setTooltipSorting] = useState(toolTipSortingValues[0]); const [ignoreOutliers, setIgnoreOutliers] = useState(false); const aside = useMemo( () => ( {t('scalars:ignore-outliers')} {t('scalars:tooltip-sorting')}