<commit_before>import React from 'react';
import { Text, Box, Flex } from 'rebass/styled-components';
import map from 'lodash/map';
import { format } from 'd3-format';
import { translate } from 'react-i18next';

import {
  usePopupState,
  bindHover,
  bindPopover,
} from 'material-ui-popup-state/hooks';

import Popover from '../elements/Popover';
import { space, shadows } from '../../themes/baseTheme';

import { utils as vizUtils } from '@tidepool/viz';
const { reshapeBgClassesToBgBounds, generateBgRangeLabels } = vizUtils.bg;

export const BgRangeSummary = props => {
  const { bgUnits, data, targetRange, t } = props;

  const popupState = usePopupState({
    variant: 'popover',
    popupId: 'summaryPopover',
  });

  const bgPrefs = {
    bgUnits,
    bgBounds: reshapeBgClassesToBgBounds({ bgUnits, bgClasses: {
      low: { boundary: targetRange[0]},
      target: { boundary: targetRange[1]},
    }}),
  };

  const bgLabels = generateBgRangeLabels(bgPrefs, { condensed: true });

  return (
    <Box width="200px">
      <Flex height="20px" width="100%" justifyContent="center" {...bindHover(popupState)}>
        {map(data, (value, key) => (
          <Box key={key} bg={`bg.${key}`} width={`${value * 100}%`} />
        ))}
      </Flex>

      <Popover
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'center',
        }}
        transformOrigin={{
          vertical: 'top',
          horizontal: 'center',
        }}
        width="auto"
        height="auto"
        marginTop={`${space[1]}px`}
        boxShadow={shadows.small}
        {...bindPopover(popupState)}
        useHoverPopover
      >
        <Box px={2} py={1}>
          <Flex mb={1} sx={{ gap: 3 }} justifyContent="space-between" flexWrap="nowrap">
            {map(data, (value, key) => (
              <Flex flexDirection="column" alignItems="center">
                <Flex mb={2} textAlign="center" alignItems="flex-end" key={key} color={`bg.${key}`} flexWrap="nowrap">
                  <Text lineHeight={1} fontSize={1}>
                    {/* TODO: better formatting - precision matching viz stats for veryLow */}
                    {format(`.${0}%`)(value).slice(0, -1)}
                  </Text>
                  <Text lineHeight={1} color="inherit" fontSize=".65em">%</Text>
                </Flex>
                <Text lineHeight={1} color="grays.4" fontSize="9px">{bgLabels[key]}</Text>
              </Flex>
            ))}
          </Flex>

          <Text lineHeight={1} color="grays.4" fontSize="8px">{t(`Units in ${bgUnits}`)}</Text>
        </Box>
      </Popover>
    </Box>
  );
};

export default translate()(BgRangeSummary);<commit_msg>[WEB-1338] Update BgRangeSummary styling<commit_after>import React from 'react';
import { Text, Box, Flex } from 'rebass/styled-components';
import map from 'lodash/map';
import { format } from 'd3-format';
import { translate } from 'react-i18next';

import {
  usePopupState,
  bindHover,
  bindPopover,
} from 'material-ui-popup-state/hooks';

import Popover from '../elements/Popover';
import { space, shadows } from '../../themes/baseTheme';

import { utils as vizUtils } from '@tidepool/viz';
const { reshapeBgClassesToBgBounds, generateBgRangeLabels } = vizUtils.bg;

export const BgRangeSummary = props => {
  const { bgUnits, data, targetRange, t } = props;

  const popupState = usePopupState({
    variant: 'popover',
    popupId: 'summaryPopover',
  });

  const bgPrefs = {
    bgUnits,
    bgBounds: reshapeBgClassesToBgBounds({ bgUnits, bgClasses: {
      low: { boundary: targetRange[0]},
      target: { boundary: targetRange[1]},
    }}),
  };

  const bgLabels = generateBgRangeLabels(bgPrefs, { condensed: true });

  return (
    <>
      <Flex width="200px" height="20px" justifyContent="center" {...bindHover(popupState)}>
        {map(data, (value, key) => (
          <Box key={key} bg={`bg.${key}`} width={`${value * 100}%`} />
        ))}
      </Flex>

      <Popover
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'center',
        }}
        transformOrigin={{
          vertical: 'top',
          horizontal: 'center',
        }}
        width="auto"
        height="auto"
        marginTop={`${space[1]}px`}
        boxShadow={shadows.small}
        {...bindPopover(popupState)}
        useHoverPopover
      >
        <Box px={2} py={1}>
          <Flex mb={1} sx={{ gap: 3 }} justifyContent="space-between" flexWrap="nowrap">
            {map(data, (value, key) => (
              <Flex flexDirection="column" alignItems="center">
                <Flex mb={2} textAlign="center" alignItems="flex-end" key={key} color={`bg.${key}`} flexWrap="nowrap">
                  <Text fontWeight="bold" lineHeight={1} fontSize={1}>
                    {/* TODO: better formatting - precision matching viz stats for veryLow */}
                    {format(`.${0}%`)(value).slice(0, -1)}
                  </Text>
                  <Text lineHeight={1} color="inherit" fontSize=".65em">%</Text>
                </Flex>
                <Text fontWeight="medium" lineHeight={1} color="grays.4" fontSize="9px">{bgLabels[key]}</Text>
              </Flex>
            ))}
          </Flex>

          <Text lineHeight={1} color="grays.4" fontSize="8px">{t(`Units in ${bgUnits}`)}</Text>
        </Box>
      </Popover>
    </>
  );
};

export default translate()(BgRangeSummary);
{'fraction_non_alphanumeric': 0.16901147723065532, 'fraction_numerical': 0.013513513513513514, 'mean_word_length': 2.4948253557567917, 'pattern_counts': {'":': 0, '<': 49, '<?xml version=': 0, '>': 55, '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': '6599007', 'n_tokens_mistral': 1766, 'n_tokens_neox': 1685, 'n_words': 355}