@sis-cc/dotstatsuite-visions 12.56.0 → 13.0.0

package/es/DataFooter/DataFooter.js

@@ -1,178 +0,0 @@
-import React, { Fragment } from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import * as R from 'ramda';
-import useSize from '@react-hook/size';
-import Grid from '@mui/material/Grid';
-import Typography from '@mui/material/Typography';
-import Link from '@mui/material/Link';
-import makeStyles from '@mui/styles/makeStyles';
-import { visuallyHidden } from '@mui/utils';
-import { Tooltip } from '../';
-import { T4_BREAKPOINTS } from '../theme';
-import useKeyboardEscapeHandler from '../hooks/useKeybordEscapeHandler';
-
-var HEIGHT = 42;
-
-var useStyles = makeStyles(function (theme) {
-  return {
-    footer: {
-      minHeight: HEIGHT
-    },
-    legend: {
-      flexGrow: 1
-    },
-    copyright: {
-      padding: 0
-    },
-    source: {
-      padding: theme.spacing(0, 1, 0, 1)
-    },
-    logo: {
-      height: HEIGHT / 2,
-      display: 'flex'
-    },
-    sticky: {
-      position: 'sticky',
-      right: 0
-    }
-  };
-});
-
-var DataFooter = function DataFooter(_ref) {
-  var _cx;
-
-  var logo = _ref.logo,
-      source = _ref.source,
-      copyright = _ref.copyright,
-      legend = _ref.legend,
-      _ref$isSticky = _ref.isSticky,
-      isSticky = _ref$isSticky === undefined ? false : _ref$isSticky;
-
-  var target = React.useRef(null);
-
-  var _useSize = useSize(target),
-      width = _useSize[0];
-
-  var isWidthUp = R.gt(width);
-  var isSourced = source && source.label && source.link;
-  var isCopyrighted = copyright && copyright.label && copyright.content;
-  var classes = useStyles();
-
-  var _useKeyboardEscapeHan = useKeyboardEscapeHandler(),
-      open = _useKeyboardEscapeHan.open,
-      setOpen = _useKeyboardEscapeHan.setOpen;
-
-  var typoSize = isWidthUp(T4_BREAKPOINTS.lg) ? 14 : 12;
-  if (!isWidthUp(T4_BREAKPOINTS.xs)) return React.createElement(Grid, { ref: target });
-
-  return React.createElement(
-    Grid,
-    {
-      ref: target,
-      container: true,
-      className: classes.footer,
-      direction: 'row',
-      justifyContent: 'flex-end',
-      alignItems: 'center'
-    },
-    React.createElement(
-      Grid,
-      { item: true, className: classes.legend },
-      isWidthUp(T4_BREAKPOINTS.sm) && legend
-    ),
-    React.createElement(
-      Grid,
-      { item: true, style: { alignSelf: 'flex-end' }, className: cx((_cx = {}, _cx[classes.sticky] = isSticky, _cx)) },
-      React.createElement(
-        Grid,
-        {
-          container: true,
-          justifyContent: 'flex-end',
-          alignItems: 'center',
-          className: classes.footer,
-          spacing: 0
-        },
-        React.createElement(
-          Grid,
-          {
-            item: true,
-            className: isWidthUp(T4_BREAKPOINTS.sm) && isSourced ? classes.copyright : classes.source
-          },
-          isCopyrighted && React.createElement(
-            Fragment,
-            null,
-            React.createElement(
-              Tooltip,
-              {
-                title: React.createElement(
-                  Typography,
-                  { variant: 'body2' },
-                  copyright.content
-                ),
-                'aria-label': copyright.content,
-                variant: 'light',
-                tabIndex: 0,
-                'aria-hidden': false,
-                placement: 'top',
-                enterNextDelay: 100,
-                arrow: true,
-                open: open,
-                onOpen: function onOpen() {
-                  return setOpen(true);
-                },
-                onClose: function onClose() {
-                  return setOpen(false);
-                }
-              },
-              React.createElement(
-                Typography,
-                { variant: 'body2', style: { cursor: 'pointer', fontSize: typoSize } },
-                copyright.label
-              )
-            ),
-            React.createElement(
-              Typography,
-              { sx: visuallyHidden },
-              copyright.content
-            )
-          )
-        ),
-        isWidthUp(T4_BREAKPOINTS.sm) && isSourced && React.createElement(
-          Grid,
-          { item: true, className: classes.source },
-          React.createElement(
-            Typography,
-            { variant: 'body2', style: { fontSize: typoSize } },
-            React.createElement(
-              Link,
-              { href: source.link, rel: 'noopener noreferrer', target: '_blank', variant: 'body2' },
-              source.label
-            )
-          )
-        ),
-        isWidthUp(T4_BREAKPOINTS.xs) && logo && React.createElement(
-          Grid,
-          { item: true },
-          React.createElement('img', { src: logo, alt: 'logo', className: classes.logo })
-        )
-      )
-    )
-  );
-};
-
-DataFooter.propTypes = process.env.NODE_ENV !== "production" ? {
-  logo: PropTypes.string,
-  source: PropTypes.shape({
-    label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-    link: PropTypes.string
-  }),
-  copyright: PropTypes.shape({
-    label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-    content: PropTypes.oneOfType([PropTypes.string, PropTypes.element])
-  }),
-  legend: PropTypes.element,
-  isSticky: PropTypes.bool
-} : {};
-
-export default DataFooter;

package/es/DataFooter/index.js

@@ -1,33 +0,0 @@
-/**
- * DataFooter is the footer of the datavis component (tables, charts, maps).
- *
- * Responsive rules:
- * - no footer below 120px
- * - no legend below 370px
- * - no source below 370px, adaptative fontSize when displayed
- * - copyright, adaptative fontSize when displayed
- * - invariant logo, 21px (half min height of the footer)
- *
- * @memberOf VISIONS
- * @name DataFooter
- * @tag component
- * @api public
- * @props
- * logo: PropTypes.string.isRequired,
- * source: PropTypes.shape({
- *  label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
- *  link: PropTypes.string,
- * }),
- * copyright: PropTypes.shape({
- *  label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
- *  content: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
- * }),
- * legend: PropTypes.element,
- * isSticky: PropTypes.bool,
- * @theme
- * // tooltip (see Tooltip Component)
- * @demoReady
- *
- */
-
-export { default } from './DataFooter';

package/es/DataHeader/DataHeader.js

@@ -1,314 +0,0 @@
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import * as R from 'ramda';
-import useSize from '@react-hook/size';
-import cx from 'classnames';
-import makeStyles from '@mui/styles/makeStyles';
-import { useTheme } from '@mui/material/styles';
-import Info from '@mui/icons-material/Info';
-import Typography from '@mui/material/Typography';
-import { T4_BREAKPOINTS } from '../theme';
-import Title from './Title';
-import Flags from './Flags';
-import TooltipHeader from './TooltipHeader';
-import { getReducedContent } from './utils';
-
-var useStyles = makeStyles(function (theme) {
-  return {
-    header: {
-      alignItems: 'center',
-      display: 'flex'
-    },
-    container: _extends({
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'flex-start',
-      marginBottom: 10,
-      marginTop: 10,
-      alignItems: 'baseline'
-    }, R.pathOr({}, ['mixins', 'dataHeader', 'root'], theme)),
-    title: _extends({
-      display: 'inline-block',
-      width: '100%',
-      lineHeight: 1.5
-    }, R.pathOr({}, ['mixins', 'dataHeader', 'title'], theme)),
-    wrapperSubtitle: {
-      alignItems: 'center',
-      display: 'flex',
-      flexWrap: 'wrap',
-      width: '100%',
-      lineHeight: 1.3
-    },
-    subtitle: _extends({
-      display: 'flex',
-      alignItems: 'center',
-      lineHeight: 1.6,
-      color: theme.palette.grey[600]
-    }, R.pathOr({}, ['mixins', 'dataHeader', 'subtitle'], theme)),
-    disclaimer: _extends({
-      padding: theme.spacing(0.5),
-      lineHeight: 1.5
-    }, R.pathOr({}, ['mixins', 'dataHeader', 'disclaimer'], theme)),
-    pagination: _extends({
-      padding: theme.spacing(0.5),
-      lineHeight: 1.5
-    }, R.pathOr({}, ['mixins', 'dataHeader', 'subtitle'], theme)),
-    infoIcon: {
-      height: '0.8em',
-      color: theme.palette.grey[600]
-    },
-    svgWrapper: _extends({
-      marginLeft: 4
-    }, theme.typography.body1),
-    svg: {
-      fontSize: 'inherit',
-      borderBottom: '1px dotted',
-      borderBottomColor: 'inherit'
-    },
-    content: _extends({
-      boxSizing: 'border-box',
-      color: 'white',
-      listStyleType: 'none',
-      maxWidth: 270,
-      padding: 0,
-      margin: 0,
-      fontSize: 12,
-      fontWeight: 400,
-      lineHeight: 1.43
-    }, theme.typography.body1),
-    subContent: _extends({
-      listStyle: 'none',
-      padding: 0,
-      marginLeft: 20,
-      maxWidth: 270
-    }, theme.typography.body1),
-    sticky: {
-      position: 'sticky',
-      left: 0
-    },
-    sideIconContainer: {
-      marginLeft: '10px'
-    }
-  };
-});
-var BasicHTMLRenderer = function BasicHTMLRenderer(_ref) {
-  var html = _ref.html,
-      rest = _objectWithoutProperties(_ref, ['html']);
-
-  return React.createElement('span', _extends({ dangerouslySetInnerHTML: { __html: html } }, rest));
-};
-
-BasicHTMLRenderer.propTypes = process.env.NODE_ENV !== "production" ? {
-  html: PropTypes.string
-} : {};
-var DataHeader = function DataHeader(_ref2) {
-  var _cx;
-
-  var children = _ref2.children,
-      title = _ref2.title,
-      _ref2$subtitle = _ref2.subtitle,
-      subtitle = _ref2$subtitle === undefined ? [] : _ref2$subtitle,
-      combinations = _ref2.combinations,
-      disclaimer = _ref2.disclaimer,
-      sideProps = _ref2.sideProps,
-      SideIcon = _ref2.SideIcon,
-      _ref2$isSticky = _ref2.isSticky,
-      isSticky = _ref2$isSticky === undefined ? false : _ref2$isSticky,
-      _ref2$HTMLRenderer = _ref2.HTMLRenderer,
-      HTMLRenderer = _ref2$HTMLRenderer === undefined ? BasicHTMLRenderer : _ref2$HTMLRenderer,
-      pagination = _ref2.pagination;
-
-  var target = React.useRef(null);
-
-  var _useSize = useSize(target),
-      width = _useSize[0];
-
-  var isWidthUp = R.gte(width);
-  var isWidthLess = R.lt(width);
-  var classes = useStyles();
-
-  var reducedContent = getReducedContent({
-    isWidthLess: isWidthLess,
-    title: title,
-    subtitle: subtitle,
-    combinations: combinations,
-    disclaimer: disclaimer
-  });
-
-  var theme = useTheme();
-  var iconColor = R.path(['mixins', 'dataHeader', 'icon', 'color'], theme);
-  var fontSizeTitle = R.cond([[R.always(isWidthLess(T4_BREAKPOINTS.xs3)), R.always(12)], [R.always(isWidthLess(T4_BREAKPOINTS.sm)), R.always(14)], [R.always(isWidthLess(T4_BREAKPOINTS.md2)), R.always(16)], [R.T, R.identity]])(18);
-  var fontSizeSubtitle = R.cond([[R.always(isWidthLess(T4_BREAKPOINTS.xs3)), R.always(12)], [R.always(isWidthLess(T4_BREAKPOINTS.sm)), R.always(13)]])(14);
-  var subtitleLength = R.length(subtitle);
-  var combinationsLength = R.length(combinations);
-
-  return React.createElement(
-    'div',
-    {
-      className: classes.header,
-      style: {
-        justifyContent: isWidthLess(T4_BREAKPOINTS.xs2) ? 'flex-end' : 'space-between'
-      },
-      ref: target,
-      'data-testid': 'data-header'
-    },
-    React.createElement(
-      'div',
-      { className: cx(classes.container, (_cx = {}, _cx[classes.sticky] = isSticky, _cx)) },
-      isWidthUp(T4_BREAKPOINTS.xs2) && title && React.createElement(
-        Typography,
-        {
-          variant: 'h1',
-          className: classes.title,
-          style: { fontSize: fontSizeTitle },
-          'data-testid': 'data-header-title',
-          tabIndex: '-1',
-          'aria-label': title.label
-        },
-        title.label,
-        !R.isNil(SideIcon) && React.createElement(
-          'span',
-          { className: classes.sideIconContainer },
-          React.createElement(SideIcon, { sideProps: sideProps })
-        ),
-        React.createElement(Flags, {
-          classes: classes,
-          HTMLRenderer: HTMLRenderer,
-          content: R.propOr([], 'flags', title)
-        })
-      ),
-      isWidthUp(T4_BREAKPOINTS.xs3) && subtitle && R.not(R.isEmpty(subtitle)) && React.createElement(
-        'div',
-        { className: classes.wrapperSubtitle },
-        R.pipe(R.addIndex(R.map)(function (sub, index) {
-          return React.createElement(
-            'div',
-            {
-              key: 'subtitle-' + index,
-              className: classes.subtitle,
-              style: { fontSize: fontSizeSubtitle },
-              'data-testid': 'data-header-subtitle',
-              'aria-label': sub.header
-            },
-            React.createElement(Title, { header: sub.header }),
-            React.createElement(
-              Typography,
-              { variant: 'inherit' },
-              sub.label
-            ),
-            R.not(R.isEmpty(R.propOr([], 'flags', sub))) && React.createElement(Flags, {
-              classes: classes,
-              HTMLRenderer: HTMLRenderer,
-              content: R.prop('flags', sub)
-            }),
-            R.lt(index + 1, subtitleLength) && React.createElement(
-              'svg',
-              { width: '24', height: '8' },
-              React.createElement('circle', { cx: '12', cy: '4', r: '3', stroke: iconColor, fill: iconColor })
-            )
-          );
-        }))(subtitle)
-      ),
-      isWidthUp(T4_BREAKPOINTS.xs3) && combinations && R.not(R.isEmpty(combinations)) && React.createElement(
-        'div',
-        { className: classes.wrapperSubtitle },
-        R.pipe(R.addIndex(R.map)(function (comb, index) {
-          return React.createElement(
-            'div',
-            {
-              key: 'combination-' + index,
-              className: classes.subtitle,
-              'data-testid': 'data-header-combination',
-              'aria-label': comb.header
-            },
-            React.createElement(Title, { header: comb.header }),
-            React.createElement(
-              Typography,
-              { variant: 'inherit' },
-              comb.label
-            ),
-            R.not(R.isEmpty(R.propOr([], 'flags', comb))) && React.createElement(Flags, {
-              classes: classes,
-              HTMLRenderer: HTMLRenderer,
-              content: R.prop('flags', comb)
-            }),
-            R.lt(index + 1, combinationsLength) && React.createElement(
-              'svg',
-              { width: '24', height: '8' },
-              React.createElement('circle', { cx: '12', cy: '4', r: '3', stroke: iconColor, fill: iconColor })
-            )
-          );
-        }))(combinations)
-      ),
-      isWidthUp(T4_BREAKPOINTS.xs3) && disclaimer && React.createElement(
-        Typography,
-        {
-          'data-testid': 'data-header-disclaimer',
-          className: classes.disclaimer,
-          style: { fontSize: fontSizeSubtitle }
-        },
-        disclaimer
-      ),
-      pagination && React.createElement(
-        'div',
-        {
-          'data-testid': 'data-header-pagination',
-          className: classes.pagination,
-          style: { fontSize: fontSizeSubtitle }
-        },
-        pagination
-      )
-    ),
-    React.createElement(
-      'div',
-      { className: classes.children },
-      R.not(R.isEmpty(reducedContent)) && React.createElement(
-        TooltipHeader,
-        { classes: classes, content: reducedContent, HTMLRenderer: HTMLRenderer },
-        React.createElement(Info, { className: classes.infoIcon })
-      ),
-      children
-    )
-  );
-};
-
-DataHeader.propTypes = process.env.NODE_ENV !== "production" ? {
-  title: PropTypes.shape({
-    label: PropTypes.string,
-    flags: PropTypes.arrayOf(PropTypes.shape({
-      header: PropTypes.string,
-      label: PropTypes.string,
-      sub: PropTypes.arrayOf(PropTypes.shape({
-        label: PropTypes.string
-      }))
-    }))
-  }),
-  subtitle: PropTypes.arrayOf(PropTypes.shape({
-    header: PropTypes.string,
-    label: PropTypes.string,
-    flags: PropTypes.arrayOf(PropTypes.shape({
-      header: PropTypes.string,
-      label: PropTypes.string,
-      sub: PropTypes.arrayOf(PropTypes.shape({
-        label: PropTypes.string
-      }))
-    }))
-  })),
-  combinations: PropTypes.arrayOf(PropTypes.shape({
-    header: PropTypes.string,
-    label: PropTypes.string
-  })),
-  sideProps: PropTypes.object,
-  SideIcon: PropTypes.func,
-  disclaimer: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-  children: PropTypes.node,
-  isSticky: PropTypes.bool,
-  HTMLRenderer: PropTypes.func,
-  pagination: PropTypes.element
-} : {};
-
-export default DataHeader;

package/es/DataHeader/Flags.js

@@ -1,42 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import * as R from 'ramda';
-import { Asterisk } from '../';
-import { TooltipHeader } from './TooltipHeader';
-
-var Flags = function Flags(_ref) {
-  var classes = _ref.classes,
-      content = _ref.content,
-      HTMLRenderer = _ref.HTMLRenderer;
-
-  var codes = R.pipe(R.pluck('code'), R.filter(R.identity))(content);
-  var hasCodes = !R.isEmpty(codes);
-  var hasUncoded = R.length(codes) !== R.length(content);
-  var joinedCodes = R.pipe(R.join(','), function (codes) {
-    return hasUncoded ? codes + ',' : codes;
-  })(codes);
-  return React.createElement(
-    TooltipHeader,
-    { classes: classes, content: content, HTMLRenderer: HTMLRenderer },
-    React.createElement(
-      'sup',
-      { className: classes.svgWrapper },
-      hasCodes && joinedCodes,
-      hasUncoded && React.createElement(Asterisk, { className: classes.svg })
-    )
-  );
-};
-
-Flags.propTypes = process.env.NODE_ENV !== "production" ? {
-  classes: PropTypes.object,
-  HTMLRenderer: PropTypes.func,
-  content: PropTypes.arrayOf(PropTypes.shape({
-    header: PropTypes.string,
-    label: PropTypes.string,
-    sub: PropTypes.arrayOf(PropTypes.shape({
-      label: PropTypes.string
-    }))
-  }))
-} : {};
-
-export default Flags;

package/es/DataHeader/Title.js

@@ -1,27 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { isNil } from 'ramda';
-
-var Title = function Title(_ref) {
-  var header = _ref.header;
-
-  if (isNil(header)) {
-    return '';
-  }
-  return React.createElement(
-    'b',
-    null,
-    React.createElement(
-      'i',
-      null,
-      header
-    ),
-    '\xA0'
-  );
-};
-
-Title.propTypes = process.env.NODE_ENV !== "production" ? {
-  header: PropTypes.string
-} : {};
-
-export default Title;

package/es/DataHeader/TooltipHeader.js

@@ -1,78 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import * as R from 'ramda';
-import { Tooltip } from '../';
-import Title from './Title';
-
-export var TooltipHeader = function TooltipHeader(_ref) {
-  var children = _ref.children,
-      classes = _ref.classes,
-      HTMLRenderer = _ref.HTMLRenderer,
-      _ref$content = _ref.content,
-      content = _ref$content === undefined ? [] : _ref$content;
-
-  if (R.isEmpty(content)) return null;
-
-  var listContent = React.createElement(
-    'ul',
-    { className: classes.content },
-    R.addIndex(R.map)(function (_ref2, index) {
-      var header = _ref2.header,
-          label = _ref2.label,
-          _ref2$sub = _ref2.sub,
-          sub = _ref2$sub === undefined ? [] : _ref2$sub;
-      return React.createElement(
-        'li',
-        { key: label + '-' + index },
-        React.createElement(Title, { header: header }),
-        R.is(Function, HTMLRenderer) ? React.createElement(HTMLRenderer, { html: label }) : label,
-        R.not(R.isEmpty(sub)) && React.createElement(
-          'ul',
-          { className: classes.subContent },
-          R.addIndex(R.map)(function (_ref3, index) {
-            var label = _ref3.label;
-            return React.createElement(
-              'li',
-              { key: label + '-' + index },
-              R.is(Function, HTMLRenderer) ? React.createElement(HTMLRenderer, { html: label }) : label
-            );
-          }, sub)
-        )
-      );
-    }, content)
-  );
-
-  return React.createElement(
-    Tooltip,
-    {
-      title: listContent,
-      tabIndex: 0,
-      'aria-label': R.pipe(R.pluck('label'), R.join(', '))(content),
-      'aria-hidden': false,
-      placement: 'top',
-      PopperProps: {
-        modifiers: {
-          flip: {
-            behavior: ['top', 'bottom', 'left', 'right']
-          }
-        }
-      }
-    },
-    children
-  );
-};
-
-TooltipHeader.propTypes = process.env.NODE_ENV !== "production" ? {
-  children: PropTypes.node,
-  classes: PropTypes.object,
-  content: PropTypes.arrayOf(PropTypes.shape({
-    header: PropTypes.string,
-    label: PropTypes.string,
-    sub: PropTypes.arrayOf(PropTypes.shape({
-      label: PropTypes.string
-    }))
-  })),
-  HTMLRenderer: PropTypes.func
-} : {};
-
-export default TooltipHeader;