@bundle-stats/ui 4.12.0 → 4.13.0-beta.0

package/src/ui/horizontal-bar-chart/horizontal-bar-chart.jsx

@@ -1,156 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import round from 'lodash/round';
-import sum from 'lodash/sum';
-import cx from 'classnames';
-
-import { getColors } from '../../utils';
-import { Tooltip } from '../tooltip';
-import css from './horizontal-bar-chart.module.css';
-
-class HorizontalBarChartItem extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.textRef = React.createRef();
-    this.ref = React.createRef();
-
-    this.state = {
-      isTextOverflowing: true,
-    };
-  }
-
-  componentDidMount() {
-    const wrapperWidth = this.ref?.current?.clientWidth || 0;
-    const textWidth = this.textRef?.current?.scrollWidth || 0;
-
-    if (wrapperWidth >= (textWidth + 2 * 4)) {
-      this.setState({ isTextOverflowing: false });
-    }
-  }
-
-  render() {
-    const {
-      color, label, getItemTooltip, width,
-    } = this.props;
-    const { isTextOverflowing } = this.state;
-    const tooltipContent = getItemTooltip();
-
-    return (
-      <span
-        className={cx(css.item, isTextOverflowing && css.textOverflowed)}
-        style={{
-          width,
-          background: color,
-        }}
-        ref={this.ref}
-      >
-        <Tooltip
-          className={css.itemContent}
-          title={tooltipContent}
-          darkMode={false}
-        >
-          <span className={css.itemLabel} ref={this.textRef}>
-            {label}
-          </span>
-        </Tooltip>
-      </span>
-    );
-  }
-}
-
-HorizontalBarChartItem.propTypes = {
-  width: PropTypes.string.isRequired,
-  color: PropTypes.string.isRequired,
-  label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
-  getItemTooltip: PropTypes.func,
-};
-
-HorizontalBarChartItem.defaultProps = {
-  getItemTooltip: () => null,
-};
-
-const getTotalValues = (values) => sum(values.map((entry) => {
-  if (typeof entry === 'object') {
-    return entry.value;
-  }
-
-  return entry;
-}));
-
-export const HorizontalBarChart = (props) => {
-  const { className, data, maxValue } = props;
-  const { labels, values } = data;
-
-  const defaultColors = getColors(labels.length);
-  const total = maxValue || getTotalValues(values);
-
-  const entries = values.reduce((agg, entry, index) => {
-    const {
-      value,
-      color = defaultColors[index],
-      label = labels[index],
-      getItemTooltip,
-    } = typeof entry === 'object' ? entry : { value: entry };
-
-    const width = `${round((value / total) * 100, 2)}%`;
-
-    return [
-      ...agg,
-      {
-        value,
-        width,
-        color,
-        label,
-        getItemTooltip,
-      },
-    ];
-  }, []);
-
-  return (
-    <div className={cx(css.root, className)}>
-      {entries.map(({
-        color, getItemTooltip, label, width,
-      }, index) => {
-        const key = index;
-
-        return (
-          <HorizontalBarChartItem
-            key={key}
-            width={width}
-            color={color}
-            label={label}
-            getItemTooltip={getItemTooltip}
-            className={css.item}
-          />
-        );
-      })}
-    </div>
-  );
-};
-
-HorizontalBarChart.defaultProps = {
-  className: '',
-  maxValue: null,
-};
-
-HorizontalBarChart.propTypes = {
-  /** Adopted child class name */
-  className: PropTypes.string,
-
-  /** Data */
-  data: PropTypes.shape({
-    labels: PropTypes.arrayOf(PropTypes.string),
-    values: PropTypes.arrayOf(PropTypes.oneOfType([
-      PropTypes.number,
-      PropTypes.shape({
-        value: PropTypes.number,
-        color: PropTypes.string,
-        label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-      }),
-    ])),
-  }).isRequired,
-
-  /** Mac value */
-  maxValue: PropTypes.number,
-};

package/src/ui/horizontal-bar-chart/horizontal-bar-chart.module.css

@@ -1,42 +0,0 @@
-.root {
-  background: var(--color-highlight);
-  display: flex;
-  align-items: stretch;
-  justify-content: flex-start;
-  width: 100%;
-  overflow: hidden;
-}
-
-.item {
-  flex: 0 1 auto;
-  background: var(--color-text);
-  display: inline-flex;
-  min-width: var(--space-xxxsmall);
-  min-height: var(--space-medium);
-}
-
-.itemContent {
-  display: flex;
-  width: 100%;
-  height: 100%;
-  padding: var(--space-xxsmall);
-  align-items: center;
-  justify-content: center;
-
-  color: var(--color-background);
-  font-weight: bold;
-  text-overflow: ellipsis;
-  text-align: center;
-}
-
-.itemLabel {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  visibility: visible;
-}
-
-.textOverflowed .itemLabel {
-  visibility: hidden;
-}

package/src/ui/horizontal-bar-chart/index.js

@@ -1 +0,0 @@
-export * from './horizontal-bar-chart';

package/types/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.d.ts

@@ -1,22 +0,0 @@
-export function BundleAssetsTotalsChartBars({ className, jobs, customComponentLink: CustomComponentLink, }: {
-    className: any;
-    jobs: any;
-    customComponentLink: any;
-}): React.JSX.Element;
-export namespace BundleAssetsTotalsChartBars {
-    namespace defaultProps {
-        export let className: string;
-        export { ComponentLink as customComponentLink };
-    }
-    namespace propTypes {
-        let className_1: PropTypes.Requireable<string>;
-        export { className_1 as className };
-        export let jobs: PropTypes.Validator<(PropTypes.InferProps<{
-            internalBuildNumber: PropTypes.Requireable<number>;
-        }> | null | undefined)[]>;
-        export let customComponentLink: PropTypes.Requireable<PropTypes.ReactComponentLike>;
-    }
-}
-import React from 'react';
-import { ComponentLink } from '../component-link';
-import PropTypes from 'prop-types';

package/types/components/bundle-assets-totals-chart-bars/index.d.ts

@@ -1 +0,0 @@
-export * from "./bundle-assets-totals-chart-bars";

package/types/components/bundle-assets-totals-table/index.d.ts

@@ -1 +0,0 @@
-export * from "./bundle-assets-totals-table";

package/types/ui/horizontal-bar-chart/horizontal-bar-chart.d.ts

@@ -1,23 +0,0 @@
-export function HorizontalBarChart(props: any): React.JSX.Element;
-export namespace HorizontalBarChart {
-    namespace defaultProps {
-        let className: string;
-        let maxValue: null;
-    }
-    namespace propTypes {
-        let className_1: PropTypes.Requireable<string>;
-        export { className_1 as className };
-        export let data: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
-            labels: PropTypes.Requireable<(string | null | undefined)[]>;
-            values: PropTypes.Requireable<(NonNullable<number | PropTypes.InferProps<{
-                value: PropTypes.Requireable<number>;
-                color: PropTypes.Requireable<string>;
-                label: PropTypes.Requireable<NonNullable<string | PropTypes.ReactElementLike | null | undefined>>;
-            }> | null | undefined> | null | undefined)[]>;
-        }>>>;
-        let maxValue_1: PropTypes.Requireable<number>;
-        export { maxValue_1 as maxValue };
-    }
-}
-import React from 'react';
-import PropTypes from 'prop-types';

package/types/ui/horizontal-bar-chart/index.d.ts

@@ -1 +0,0 @@
-export * from "./horizontal-bar-chart";