@widergy/energy-ui 3.158.1 → 3.159.0

package/dist/esm/deprecated/UTBarChart/components/Bars/constants.js

@@ -0,0 +1,3 @@
+export const HIGHLIGHT_KEY = 'HIGHLIGHT';
+export const BAR_KEY = 'BAR';
+export const DEFAULT_TOP_LABEL_PADDING = '8';

package/dist/esm/deprecated/UTBarChart/components/Bars/index.js

@@ -0,0 +1,188 @@
+import React, { useState, useEffect } from 'react';
+import { number, func, bool, objectOf, object } from 'prop-types';
+import { barDataType } from '../../types';
+import { classesType } from '../../../../types/commonTypes';
+import Bar from './components/Bar';
+import { BAR_KEY, DEFAULT_TOP_LABEL_PADDING, HIGHLIGHT_KEY } from './constants';
+const Bars = _ref => {
+  let {
+    barBorderRadius,
+    barData,
+    barRef,
+    barWidth,
+    classes,
+    currentPage,
+    fullSizeBars,
+    graphXStart,
+    graphYEnd,
+    graphYStart,
+    group,
+    groupWidth,
+    groups,
+    highlightWidth,
+    maxBarValue,
+    onBarClick,
+    padding,
+    selectable,
+    setCurrentLabel,
+    spacingOptions,
+    totalData,
+    transitionDuration,
+    valuesOnTop,
+    xAxis,
+    xSubAxis,
+    yAxis
+  } = _ref;
+  const [selectedIndex, setSelectedIndex] = useState(-1);
+  const [selectedPage, setSelectedPage] = useState(-1);
+  const resetSelection = () => {
+    setSelectedIndex(-1);
+    setSelectedPage(-1);
+    setCurrentLabel();
+  };
+  useEffect(() => {
+    resetSelection();
+  }, [totalData]);
+  const highlightSpacing = highlightWidth * (groups === 1 ? groupWidth * padding + barWidth * padding : barWidth * padding);
+  const onClick = (index, data) => {
+    if (selectable) {
+      setSelectedIndex(index);
+      setSelectedPage(currentPage);
+      setCurrentLabel(index);
+    }
+    if (onBarClick) {
+      onBarClick(data);
+      setCurrentLabel(index);
+    }
+  };
+  const barRenderer = function (bar, index, data, stackIndex) {
+    let offset = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
+    let removeBorderRadius = arguments.length > 5 ? arguments[5] : undefined;
+    const {
+      borderSelector,
+      clickable,
+      color,
+      highlightColor,
+      highlighted,
+      stroke,
+      strokeWidth,
+      tooltipContent,
+      value,
+      gradient = null,
+      tooltipProps = {}
+    } = bar;
+    const selected = selectable && selectedIndex === index && selectedPage === currentPage;
+    const xInitialPosition = (fullSizeBars ? graphXStart : xAxis(index)) + xSubAxis(group);
+    const yInitialPosition = yAxis(value);
+    const selectorWidth = fullSizeBars ? groupWidth - graphXStart : barWidth * groups + highlightSpacing * groups;
+    const selectorPosition = fullSizeBars ? graphXStart : xAxis(index) + xSubAxis(0) - highlightSpacing / 2;
+    barRef.current = {
+      width: selectorWidth,
+      position: selectorPosition
+    };
+    return /*#__PURE__*/React.createElement("g", null, (highlighted || selected) && /*#__PURE__*/React.createElement(Bar, {
+      bar: bar,
+      width: barWidth + 2 * highlightSpacing,
+      height: Math.max(0, Math.min(graphYStart - (highlighted ? yAxis(maxBarValue) : yInitialPosition) + highlightSpacing, graphYStart - graphYEnd + highlightSpacing)),
+      color: highlightColor,
+      x: xInitialPosition - highlightSpacing,
+      y: graphYStart - offset,
+      borderRadius: removeBorderRadius ? 0 : barBorderRadius,
+      data: bar,
+      id: "".concat(HIGHLIGHT_KEY, "-").concat(index, "-").concat(group, "-").concat(stackIndex),
+      gradient: gradient
+    }), /*#__PURE__*/React.createElement(Bar, {
+      index: index,
+      data: data,
+      clickable: clickable,
+      bar: bar,
+      onClick: onClick,
+      width: barWidth,
+      height: Math.max(0, Math.min(graphYStart - yInitialPosition, graphYStart - graphYEnd)),
+      color: color,
+      gradient: gradient,
+      x: xInitialPosition,
+      y: graphYStart - offset,
+      borderRadius: removeBorderRadius ? 0 : barBorderRadius,
+      tooltipContent: tooltipContent,
+      tooltipClassName: classes.tooltip,
+      id: "".concat(BAR_KEY, "-").concat(index, "-").concat(group, "-").concat(stackIndex),
+      stroke: stroke,
+      strokeWidth: strokeWidth,
+      transitionDuration: transitionDuration,
+      tooltipProps: tooltipProps
+    }), valuesOnTop && /*#__PURE__*/React.createElement("text", {
+      className: classes.onTopBarLabel,
+      textAnchor: "middle",
+      fill: data.onTopLabelColor,
+      x: xInitialPosition + barWidth / 2,
+      y: yInitialPosition - (spacingOptions.onTopLabelPadding || DEFAULT_TOP_LABEL_PADDING)
+    }, data.onTopLabel || (value > 0 ? value : '')), borderSelector && /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("rect", {
+      fill: "transparent",
+      height: graphYStart + graphYEnd / 2 + ((borderSelector === null || borderSelector === void 0 ? void 0 : borderSelector.heightOffset) || 0),
+      rx: borderSelector === null || borderSelector === void 0 ? void 0 : borderSelector.radius,
+      stroke: borderSelector === null || borderSelector === void 0 ? void 0 : borderSelector.stroke,
+      strokeDasharray: borderSelector === null || borderSelector === void 0 ? void 0 : borderSelector.strokeDasharray,
+      width: selectorWidth,
+      x: selectorPosition,
+      y: graphYEnd,
+      pointerEvents: "none"
+    })));
+  };
+  return /*#__PURE__*/React.createElement("g", null, barData.map((bar, index) => {
+    const {
+      value,
+      values,
+      clickable,
+      highlighted,
+      disableAutoOrder
+    } = bar;
+    let offset = 0;
+    if (value || value === 0 && highlighted) return barRenderer(bar, index, bar);
+    if (values && Array.isArray(values)) {
+      const valuesToRender = disableAutoOrder ? values : values.sort((_ref2, _ref3) => {
+        let {
+          value: a
+        } = _ref2;
+        let {
+          value: b
+        } = _ref3;
+        return a - b;
+      });
+      return valuesToRender.map((stackedBar, stackIndex, stack) => barRenderer({
+        ...stackedBar,
+        clickable
+      }, index, bar, stackIndex, stackIndex ? offset += graphYStart - yAxis(stack[stackIndex - 1].value) : 0, stackIndex !== stack.length - 1));
+    }
+    return [];
+  }));
+};
+Bars.propTypes = {
+  barBorderRadius: number,
+  barData: barDataType,
+  barRef: object,
+  barWidth: number,
+  classes: classesType,
+  currentPage: number,
+  fullSizeBars: bool,
+  graphXStart: number,
+  graphYEnd: number,
+  graphYStart: number,
+  group: number,
+  groupWidth: number,
+  groups: number,
+  highlightWidth: number,
+  maxBarValue: number,
+  onBarClick: func,
+  padding: number,
+  selectable: bool,
+  setCurrentLabel: func,
+  spacingOptions: objectOf(number),
+  totalData: barDataType,
+  transitionDuration: number,
+  valuesOnTop: bool,
+  xAxis: func,
+  xSubAxis: func,
+  yAxis: func
+};
+export default Bars;

package/dist/esm/deprecated/UTBarChart/components/Legend/constants.js

@@ -0,0 +1,2 @@
+export const BLOCK_KEY = 'block';
+export const MODAL_KEY = 'modal';

package/dist/esm/deprecated/UTBarChart/components/Legend/index.js

@@ -0,0 +1,130 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useState } from 'react';
+import { object, objectOf, oneOf, string, shape, arrayOf } from 'prop-types';
+import { isEmpty } from '@widergy/web-utils/lib/array';
+import InfoIcon from '@material-ui/icons/InfoOutlined';
+import { UTLabel, UTButton, UTDialog } from '../../../..';
+import { classesType } from '../../../../types/commonTypes';
+import { levelsType, referencesType, barType, linearType, buttonPropsTypes } from '../../types';
+import styles from './styles.module.scss';
+import { BLOCK_KEY, MODAL_KEY } from './constants';
+import { orderLegend } from './utils';
+const Legend = _ref => {
+  let {
+    title,
+    references,
+    flatData,
+    displayAs = 'block',
+    style,
+    labels,
+    classes,
+    buttonProps
+  } = _ref;
+  const [showLegend, setShowLegend] = useState(false);
+  const {
+    referencesModalTitle,
+    referencesModalButton,
+    showReferencesLabel
+  } = labels || {};
+  const {
+    bar: barReferences = [],
+    linear: linearReferences = [],
+    levels: levelsReferences = []
+  } = references || {};
+  const {
+    bar: flatBarData = [],
+    linear: flatLinearData = [],
+    levels = []
+  } = flatData || {};
+  const getReferencesToShow = () => {
+    let referencesToShow = new Set();
+    flatBarData.forEach(item => barReferences.forEach(_ref2 => {
+      let {
+        check,
+        id
+      } = _ref2;
+      return check(item) && referencesToShow.add(id);
+    }));
+    flatLinearData.forEach(item => linearReferences.forEach(_ref3 => {
+      let {
+        check,
+        id
+      } = _ref3;
+      return check(item) && referencesToShow.add(id);
+    }));
+    levels.forEach(_ref4 => {
+      let {
+        id
+      } = _ref4;
+      return referencesToShow.add(id);
+    });
+    referencesToShow = Array.from(referencesToShow);
+    const filterFunction = _ref5 => {
+      let {
+        id
+      } = _ref5;
+      return referencesToShow.includes(id);
+    };
+    const getOrderedLegend = orderLegend(references === null || references === void 0 ? void 0 : references.orderFunction);
+    return getOrderedLegend(levelsReferences.filter(filterFunction), linearReferences.filter(filterFunction), barReferences.filter(filterFunction)).filter(row => !isEmpty(row));
+  };
+  const referenceRenderer = reference => {
+    const {
+      label,
+      className,
+      CustomIcon
+    } = reference;
+    return /*#__PURE__*/React.createElement("div", {
+      className: styles["item".concat(displayAs)],
+      key: label
+    }, /*#__PURE__*/React.createElement("div", {
+      className: className
+    }, CustomIcon && /*#__PURE__*/React.createElement(CustomIcon, null)), /*#__PURE__*/React.createElement(UTLabel, {
+      className: "".concat(styles.itemLabel, " ").concat(classes.legendItemLabel)
+    }, label));
+  };
+  const referencesToShow = getReferencesToShow(flatData);
+  const hasReferences = !isEmpty(referencesToShow);
+  return /*#__PURE__*/React.createElement("div", {
+    style: style
+  }, title && /*#__PURE__*/React.createElement(UTLabel, {
+    className: "".concat(styles.title, " ").concat(classes.title)
+  }, title), displayAs === MODAL_KEY ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(UTButton, _extends({
+    classNames: {
+      icon: classes.showLegendIcon,
+      root: "".concat(styles.button, " ").concat(classes.showLegendButton),
+      text: classes.showLegendLabel
+    },
+    disabled: !hasReferences,
+    Icon: InfoIcon,
+    onClick: () => setShowLegend(true)
+  }, buttonProps), showReferencesLabel), /*#__PURE__*/React.createElement(UTDialog, {
+    acceptButton: {
+      onClick: () => setShowLegend(false),
+      text: referencesModalButton || ''
+    },
+    isOpen: showLegend,
+    onRequestClose: () => setShowLegend(false),
+    title: referencesModalTitle,
+    withCloseButton: true
+  }, referencesToShow.map(row => /*#__PURE__*/React.createElement("div", {
+    className: styles.rowmodal
+  }, row.map(item => referenceRenderer(item)))))) : /*#__PURE__*/React.createElement("div", {
+    className: styles.referencesContainer
+  }, referencesToShow.map(row => row.map(item => referenceRenderer(item)))));
+};
+Legend.propTypes = {
+  buttonProps: buttonPropsTypes,
+  classes: classesType,
+  displayAs: oneOf([BLOCK_KEY, MODAL_KEY]),
+  flatData: shape({
+    bar: arrayOf(barType),
+    linear: arrayOf(linearType),
+    levels: levelsType
+  }),
+  labels: objectOf(string),
+  references: referencesType,
+  style: object,
+  title: string
+};
+export default Legend;

package/dist/esm/deprecated/UTBarChart/components/Legend/styles.module.scss

@@ -0,0 +1,43 @@
+.title {
+  margin: 0 auto 15px;
+  width: fit-content;
+}
+
+.referencesContainer {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  grid-gap: 16px;
+}
+
+.itemblock {
+  align-items: center;
+  display: flex;
+}
+
+.itemmodal {
+  align-items: center;
+  display: flex;
+
+  & + div {
+    margin-top: 16px;
+  }
+}
+
+.itemLabel {
+  white-space: nowrap;
+}
+
+.rowmodal {
+  display: flex;
+  flex-direction: column;
+
+  & + div {
+    margin-top: 16px;
+  }
+}
+
+.button {
+  align-items: center;
+  display: flex;
+}

package/dist/esm/deprecated/UTBarChart/components/Legend/utils.js

@@ -0,0 +1 @@
+export const orderLegend = legendOrderFunction => (levels, linear, bar) => legendOrderFunction ? legendOrderFunction(levels, linear, bar) : [levels, linear, bar];

package/dist/esm/deprecated/UTBarChart/components/Levels/index.js

@@ -0,0 +1,38 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { func, number } from 'prop-types';
+import { levelsType } from '../../types';
+import { classesType } from '../../../../types/commonTypes';
+import { getLineConfiguration } from './utils';
+const Levels = _ref => {
+  let {
+    levels,
+    yAxis,
+    graphXStart,
+    graphXEnd,
+    classes = {}
+  } = _ref;
+  return /*#__PURE__*/React.createElement("g", null, levels.map(_ref2 => {
+    let {
+      color,
+      value,
+      type
+    } = _ref2;
+    const yValue = yAxis(value);
+    return /*#__PURE__*/React.createElement("line", _extends({
+      x1: graphXStart,
+      x2: graphXEnd,
+      y1: yValue,
+      y2: yValue,
+      stroke: color
+    }, getLineConfiguration(type, classes)));
+  }));
+};
+Levels.propTypes = {
+  levels: levelsType,
+  yAxis: func,
+  graphXEnd: number,
+  graphXStart: number,
+  classes: classesType
+};
+export default Levels;

package/dist/esm/deprecated/UTBarChart/components/Levels/utils.js

@@ -0,0 +1,25 @@
+export const getLineConfiguration = (type, classes) => ({
+  solid: {
+    fill: 'none',
+    strokeWidth: '1',
+    className: classes.solidLevel
+  },
+  dashed: {
+    fill: 'none',
+    strokeWidth: '1',
+    strokeDasharray: '2,2',
+    className: classes.dashedLevel
+  },
+  dotted: {
+    fill: 'none',
+    strokeWidth: '2',
+    strokeDasharray: '4',
+    className: classes.dottedLevel
+  },
+  grid: {
+    fill: 'none',
+    strokeWidth: '1',
+    strokeDasharray: '5',
+    className: classes.gridLine
+  }
+})[type];

package/dist/esm/deprecated/UTBarChart/components/LinearPlot/constants.js

@@ -0,0 +1,4 @@
+export const DEFAULT_MARKER_SIZE = 4;
+export const MARKER_TYPES = {
+  DOT: 'dot'
+};

package/dist/esm/deprecated/UTBarChart/components/LinearPlot/index.js

@@ -0,0 +1,53 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import * as d3 from 'd3';
+import { string, number, func, shape, objectOf } from 'prop-types';
+import { linearDataType, linearMarkersType } from '../../types';
+import { getLineConfiguration, getMarkers } from './utils';
+const LinearPlot = _ref => {
+  let {
+    data,
+    barWidth,
+    yAxis,
+    xAxis,
+    type,
+    color,
+    customLineProps,
+    markers,
+    classes
+  } = _ref;
+  const lineGenerator = d3.line().x(_ref2 => {
+    let {
+      xCoordinate
+    } = _ref2;
+    return xAxis(xCoordinate) + barWidth / 2;
+  }).y(_ref3 => {
+    let {
+      value
+    } = _ref3;
+    return yAxis(value);
+  });
+  const {
+    props
+  } = getLineConfiguration(type, lineGenerator);
+  return /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", _extends({
+    d: lineGenerator(data),
+    stroke: color
+  }, props, customLineProps)), markers && getMarkers(data, xAxis, yAxis, barWidth, color, markers, classes));
+};
+LinearPlot.propTypes = {
+  data: linearDataType,
+  barWidth: number,
+  classes: objectOf(string),
+  yAxis: func,
+  xAxis: func,
+  type: string,
+  color: string,
+  markers: linearMarkersType,
+  customLineProps: shape({
+    fill: string,
+    strokeWidth: string,
+    strokeDasharray: string
+  })
+};
+export default LinearPlot;

package/dist/esm/deprecated/UTBarChart/components/LinearPlot/styles.module.scss

@@ -0,0 +1,3 @@
+.tooltip {
+  text-align: center;
+}

package/dist/esm/deprecated/UTBarChart/components/LinearPlot/utils.js

@@ -0,0 +1,52 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import UTTooltip from '../../../../components/UTTooltip';
+import { DEFAULT_MARKER_SIZE, MARKER_TYPES } from './constants';
+import styles from './styles.module.scss';
+const DEFAULT_LINE_TYPE = 'solid';
+export const getLineConfiguration = type => ({
+  solid: {
+    props: {
+      fill: 'none',
+      strokeWidth: '1'
+    }
+  },
+  dashed: {
+    props: {
+      fill: 'none',
+      strokeWidth: '1',
+      strokeDasharray: '2,2'
+    }
+  },
+  custom: {}
+})[type || DEFAULT_LINE_TYPE];
+export const getMarkers = (data, xAxis, yAxis, barWidth, color, markersConfig, classes) => data.map(_ref => {
+  let {
+    xCoordinate,
+    value,
+    tooltipContent,
+    tooltipProps
+  } = _ref;
+  const x = xAxis(xCoordinate) + barWidth / 2;
+  const y = yAxis(value);
+  const size = (markersConfig.size || DEFAULT_MARKER_SIZE) / 2;
+  if (value === undefined || value === null) {
+    return null;
+  }
+  return markersConfig.type === MARKER_TYPES.DOT && /*#__PURE__*/React.createElement(UTTooltip, _extends({
+    className: classes.tooltip,
+    content: tooltipContent,
+    interactive: false,
+    stringContentClassName: styles.tooltip
+  }, tooltipProps), /*#__PURE__*/React.createElement("svg", {
+    x: x - size,
+    y: y - size,
+    height: 2 * size,
+    width: 2 * size
+  }, /*#__PURE__*/React.createElement("circle", {
+    cx: size,
+    cy: size,
+    r: size,
+    fill: color
+  })));
+});

package/dist/esm/deprecated/UTBarChart/components/Pagination/constants.js

@@ -0,0 +1 @@
+export const BUTTONS_SIZE = 48;

package/dist/esm/deprecated/UTBarChart/components/Pagination/index.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import ChevronLeft from '@material-ui/icons/ChevronLeft';
+import ChevronRight from '@material-ui/icons/ChevronRight';
+import { func, number, shape } from 'prop-types';
+import { classesType } from '../../../../types/commonTypes';
+import UTButton from '../../../../components/UTButton';
+import { BUTTONS_SIZE } from './constants';
+import styles from './styles.module.scss';
+const Pagination = _ref => {
+  var _anchor$current, _anchor$current$getBo;
+  let {
+    anchor,
+    classes,
+    currentPage,
+    graphXEnd,
+    graphXStart,
+    parentYPosition,
+    setCurrentPage,
+    totalPages
+  } = _ref;
+  const {
+    y = 0,
+    height = 0
+  } = ((_anchor$current = anchor.current) === null || _anchor$current === void 0 || (_anchor$current$getBo = _anchor$current.getBoundingClientRect) === null || _anchor$current$getBo === void 0 ? void 0 : _anchor$current$getBo.call(_anchor$current)) || {};
+  const top = y - parentYPosition + height / 2 - BUTTONS_SIZE / 2 || 0;
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      top,
+      left: graphXStart - 30,
+      width: graphXEnd - graphXStart + 60,
+      height: BUTTONS_SIZE
+    },
+    className: styles.container
+  }, /*#__PURE__*/React.createElement(UTButton, {
+    classNames: {
+      icon: currentPage ? classes.paginationButton : classes.paginationButtonDisabled,
+      root: styles.button
+    },
+    disabled: !currentPage,
+    Icon: ChevronLeft,
+    onClick: () => setCurrentPage(currentPage - 1),
+    variant: "text"
+  }), /*#__PURE__*/React.createElement(UTButton, {
+    classNames: {
+      icon: currentPage + 1 === totalPages ? classes.paginationButtonDisabled : classes.paginationButton,
+      root: styles.button
+    },
+    disabled: currentPage + 1 === totalPages,
+    Icon: ChevronRight,
+    onClick: () => setCurrentPage(currentPage + 1),
+    variant: "text"
+  }));
+};
+Pagination.propTypes = {
+  anchor: shape({
+    current: shape({
+      getBoundingClientRect: func
+    })
+  }),
+  classes: classesType,
+  currentPage: number,
+  graphXEnd: number,
+  graphXStart: number,
+  parentYPosition: number,
+  setCurrentPage: func,
+  totalPages: number
+};
+export default Pagination;

package/dist/esm/deprecated/UTBarChart/components/Pagination/styles.module.scss

@@ -0,0 +1,12 @@
+$button-size: 48px;
+
+.container {
+  display: flex;
+  justify-content: space-between;
+  position: absolute;
+}
+
+.button {
+  height: $button-size;
+  width: $button-size;
+}