<commit_before>import classNames from 'classnames';
import PercentageCircle from '../../../../common/PercentageCircle/PercentageCircle';
import { useStyles } from './FeatureEnvironmentMetrics.styles';
import PieChartIcon from '@material-ui/icons/PieChart';
import { useMediaQuery } from '@material-ui/core';
import { IFeatureEnvironmentMetrics } from '../../../../../interfaces/featureToggle';
import { parseISO } from 'date-fns';

interface IFeatureEnvironmentProps {
    className?: string;
    primaryMetric?: boolean;
    metric: IFeatureEnvironmentMetrics;
}

const FeatureEnvironmentMetrics = ({
    className,
    primaryMetric,
    metric,
}: IFeatureEnvironmentProps) => {
    const styles = useStyles();
    const smallScreen = useMediaQuery(`(max-width:1000px)`);

    const containerClasses = classNames(styles.container, className, {
        [styles.primaryMetric]: primaryMetric,
    });
    let hour = '';
    if (metric?.timestamp) {
        const metricTime = parseISO(metric.timestamp);
        hour = `since ${metricTime.getHours()}:${metricTime.getMinutes()}`;
    }

    const calculatePercentage = () => {
        const total = metric.yes + metric.no;
        if (total === 0) {
            return 0;
        }

        return Math.round((metric.yes / total) * 100);<commit_msg>We know that it's since the full hour<commit_after>import classNames from 'classnames';
import PercentageCircle from '../../../../common/PercentageCircle/PercentageCircle';
import { useStyles } from './FeatureEnvironmentMetrics.styles';
import PieChartIcon from '@material-ui/icons/PieChart';
import { useMediaQuery } from '@material-ui/core';
import { IFeatureEnvironmentMetrics } from '../../../../../interfaces/featureToggle';
import { parseISO } from 'date-fns';

interface IFeatureEnvironmentProps {
    className?: string;
    primaryMetric?: boolean;
    metric: IFeatureEnvironmentMetrics;
}

const FeatureEnvironmentMetrics = ({
    className,
    primaryMetric,
    metric,
}: IFeatureEnvironmentProps) => {
    const styles = useStyles();
    const smallScreen = useMediaQuery(`(max-width:1000px)`);

    const containerClasses = classNames(styles.container, className, {
        [styles.primaryMetric]: primaryMetric,
    });
    let hour = '';
    if (metric?.timestamp) {
        const metricTime = parseISO(metric.timestamp);
        hour = `since ${metricTime.getHours()}:00`;
    }

    const calculatePercentage = () => {
        const total = metric.yes + metric.no;
        if (total === 0) {
            return 0;
        }

        return Math.round((metric.yes / total) * 100);
{'fraction_non_alphanumeric': 0.13884615384615384, 'fraction_numerical': 0.007692307692307693, 'mean_word_length': 3.35678391959799, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 7, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1925237', 'n_tokens_mistral': 720, 'n_tokens_neox': 700, 'n_words': 164}