@widergy/mobile-ui 0.35.7 → 0.36.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [0.36.0](https://github.com/widergy/mobile-ui/compare/v0.35.8...v0.36.0) (2022-12-02)
+
+
+### Features
+
+* rate chart ([#232](https://github.com/widergy/mobile-ui/issues/232)) ([7d7f06d](https://github.com/widergy/mobile-ui/commit/7d7f06d6f0d01422af3ec28126aad3836ff5c321))
+
+## [0.35.8](https://github.com/widergy/mobile-ui/compare/v0.35.7...v0.35.8) (2022-11-14)
+
+
+### Bug Fixes
+
+* added disable color for select field ([#231](https://github.com/widergy/mobile-ui/issues/231)) ([116e827](https://github.com/widergy/mobile-ui/commit/116e8275de542d6dbb766f2a9fd7c0d60bd07f37))
+
 ## [0.35.7](https://github.com/widergy/mobile-ui/compare/v0.35.6...v0.35.7) (2022-11-11)
 
 

package/lib/components/RateChart/components/CategoryButton/index.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { any, arrayOf, bool, shape, string } from 'prop-types';
+import { Linking } from 'react-native';
+
+import Label from '../../../Label';
+import Touchable from '../../../Touchable';
+
+import styles from './styles';
+
+const CategoryButton = ({ category, texts, showCategory, categoryButtonUrl = '' }) => {
+  const handleOpenUrl = () => Linking.openURL(categoryButtonUrl);
+
+  return (
+    <Touchable onPress={() => handleOpenUrl(categoryButtonUrl)} style={styles.category}>
+      <Label bold center primary>
+        {texts?.category}
+        {showCategory && ` ${category}`}
+      </Label>
+    </Touchable>
+  );
+};
+CategoryButton.propTypes = {
+  category: string,
+  texts: arrayOf(shape(any)),
+  showCategory: bool,
+  categoryButtonUrl: string
+};
+
+export default CategoryButton;

package/lib/components/RateChart/components/CategoryButton/styles.js

@@ -0,0 +1,16 @@
+import { StyleSheet } from 'react-native';
+
+export const retrieveStyles = theme => ({ ...theme?.RateAndCategory });
+
+export default StyleSheet.create({
+  category: {
+    justifyContent: 'center',
+    alignContent: 'center',
+    alignSelf: 'flex-end',
+    borderRadius: 5,
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    marginTop: 6,
+    backgroundColor: '#EDF4FE'
+  }
+});

package/lib/components/RateChart/components/Magnitude/index.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import { bool, number, string, oneOfType, shape, element, node, func, any } from 'prop-types';
+import { View } from 'react-native';
+import numeral from 'numeral';
+
+import Label from '../../../Label';
+
+import styles from './styles';
+
+const Magnitude = ({
+  primary,
+  gray,
+  bold,
+  semibold,
+  value,
+  unity,
+  Icon,
+  unitProps,
+  valueProps,
+  iconProps,
+  withLeftUnit = false
+}) => (
+  <View style={styles.container}>
+    {Icon && <Icon {...iconProps} />}
+    <View style={[styles.labelContainer, withLeftUnit && styles.leftUnit]}>
+      <Label
+        color={value < 0 && '#D40A28'}
+        primary={primary}
+        gray={gray}
+        bold={bold}
+        semibold={semibold}
+        center
+        {...valueProps}
+      >
+        {numeral(value).format('0,0.[0]')}
+      </Label>
+      <Label
+        color={value < 0 && '#D40A28'}
+        primary={primary}
+        gray={gray}
+        bold={bold}
+        semibold
+        xsmall
+        center
+        {...unitProps}
+        style={styles.unitLabel}
+      >
+        {unity}
+      </Label>
+    </View>
+  </View>
+);
+
+Magnitude.propTypes = {
+  primary: bool,
+  gray: bool,
+  bold: bool,
+  semibold: bool,
+  value: oneOfType([number, string]),
+  Icon: oneOfType([element, node, func, any]),
+  unity: string,
+  unitProps: shape(bool),
+  valueProps: shape(bool),
+  iconProps: shape(bool),
+  withLeftUnit: bool
+};
+
+export default Magnitude;

package/lib/components/RateChart/components/Magnitude/styles.js

@@ -0,0 +1,8 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  container: { flexDirection: 'row', alignItems: 'center' },
+  labelContainer: { flexDirection: 'row', alignItems: 'flex-end' },
+  leftUnit: { flexDirection: 'row-reverse' },
+  unitLabel: { marginLeft: 5 }
+});

package/lib/components/RateChart/components/RateStagesGraph/components/Bars/components/Stage/components/LimitsLine/index.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import styles from './styles';
+
+const LimitsLine = () => (
+  <View style={styles.lateralLines}>
+    <View style={styles.middleLine} />
+  </View>
+);
+
+export default LimitsLine;

package/lib/components/RateChart/components/RateStagesGraph/components/Bars/components/Stage/components/LimitsLine/styles.js

@@ -0,0 +1,17 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  lateralLines: {
+    borderLeftWidth: 1,
+    borderLeftColor: 'red',
+    borderRightWidth: 1,
+    borderRightColor: 'red',
+    height: 10,
+    justifyContent: 'center',
+    marginBottom: 2
+  },
+  middleLine: {
+    borderBottomColor: 'red',
+    borderBottomWidth: 1
+  }
+});

package/lib/components/RateChart/components/RateStagesGraph/components/Bars/components/Stage/components/SubStage/index.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import { bool, string, number, func } from 'prop-types';
+import { View } from 'react-native';
+
+import { subStageType } from '../../../../../../../../propTypes';
+import { SUB_STAGE_MARGIN, LAST_SUB_STAGE_MARGIN } from '../../../../../../constants';
+import Label from '../../../../../../../../../Label';
+import { getSubStageWidth } from '../../../../../../../../../../utils/stagesGraphUtils';
+
+import styles from './styles';
+
+const SubStage = ({
+  subStage,
+  isLast,
+  label,
+  index,
+  getStageColor,
+  totalSubStages,
+  subStages,
+  totalRange,
+  fullWidth
+}) => {
+  const margin = isLast && !fullWidth ? LAST_SUB_STAGE_MARGIN : SUB_STAGE_MARGIN;
+  const subStageWidth = (fullWidth && (getSubStageWidth(subStage, totalRange) * 100) / totalRange) || 0;
+  return (
+    <View
+      style={[
+        {
+          backgroundColor: subStage.color ?? getStageColor(index, totalSubStages),
+          width: fullWidth ? `${subStageWidth - margin}%` : `${100 / subStages - margin}%`,
+          marginRight: `${margin}%`
+        },
+        styles.container
+      ]}
+    >
+      <Label h6 semibold primary>
+        {label}
+      </Label>
+    </View>
+  );
+};
+
+SubStage.propTypes = {
+  subStage: subStageType,
+  isLast: bool,
+  label: string,
+  index: number,
+  getStageColor: func,
+  totalSubStages: number,
+  subStages: number,
+  totalRange: number,
+  fullWidth: bool
+};
+
+export default SubStage;

package/lib/components/RateChart/components/RateStagesGraph/components/Bars/components/Stage/components/SubStage/styles.js

@@ -0,0 +1,11 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  container: {
+    height: 33,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignContent: 'center',
+    alignItems: 'center'
+  }
+});

package/lib/components/RateChart/components/RateStagesGraph/components/Bars/components/Stage/index.js

@@ -0,0 +1,94 @@
+import React from 'react';
+import { number, arrayOf, bool, func } from 'prop-types';
+import { View } from 'react-native';
+import _ from 'lodash';
+
+import { stageType } from '../../../../../../propTypes';
+import Label from '../../../../../../../Label';
+
+import SubStage from './components/SubStage';
+import styles, { MIN_STAGE_WIDTH } from './styles';
+
+const Stage = ({ stage, rateStages, totalSubStages, withoutStages, getStageColor, totalRange }) => {
+  const totalStages = rateStages.length;
+
+  const getStageWidth = () => {
+    let totalWidth = 100;
+
+    // if we have only one rate, then return max width.
+    if (rateStages.length === 1) {
+      return totalWidth;
+    }
+    // We sort the stages based in sub stages in cases that former stages are larger than later ones.
+    const sortedRateStages = _.sortBy(rateStages, _stage => _stage.sub_rate_stages.length);
+
+    // Iterate over the sorted array until finished.
+    for (let index = 0; index < sortedRateStages.length; index += 1) {
+      // If we reached our stage then we break, we need to know the space former ones ocuppy and not the laters.
+      if (sortedRateStages[index].group === stage.group) {
+        break;
+      }
+      const currentSubStages = sortedRateStages[index].sub_rate_stages.length;
+
+      // Maximum a stage can ocuppy (since minimum is MIN_STAGE_WIDTH), is MIN_STAGE_WIDTH times the other stages.
+      const width = Math.min(
+        Math.max((100 * currentSubStages) / totalSubStages, MIN_STAGE_WIDTH),
+        MIN_STAGE_WIDTH * rateStages.length
+      );
+
+      totalWidth -= width;
+    }
+
+    // Final width will be the minimum value between the calculated width and the total width left.
+    return Math.min(
+      Math.max((100 * stage.sub_rate_stages.length) / totalSubStages, MIN_STAGE_WIDTH),
+      totalWidth
+    );
+  };
+
+  const subStages = stage.sub_rate_stages.length;
+  const stageWidth = getStageWidth();
+
+  return (
+    <View style={[{ width: `${stageWidth}%` }, styles.container]}>
+      {totalStages !== 1 && !withoutStages && (
+        <View style={styles.label}>
+          <View style={styles.rateLabelContainer}>
+            <Label small white>
+              {stage.group}
+            </Label>
+          </View>
+        </View>
+      )}
+      <View style={styles.bars}>
+        {stage.sub_rate_stages.map((subStage, index) => (
+          <SubStage
+            key={subStage.category}
+            totalSubStages={totalSubStages}
+            getStageColor={getStageColor}
+            stage={stage}
+            subStages={subStages}
+            index={index}
+            subStage={subStage}
+            isLast={index === stage.sub_rate_stages.length - 1}
+            label={subStage.name}
+            totalRange={totalRange}
+          />
+        ))}
+      </View>
+    </View>
+  );
+};
+
+Stage.propTypes = {
+  stage: stageType,
+  totalSubStages: number,
+  rateStages: arrayOf(stageType),
+  withoutStages: bool,
+  getStageColor: func,
+  totalRange: number
+};
+
+export default Stage;
+
+/* */

package/lib/components/RateChart/components/RateStagesGraph/components/Bars/components/Stage/styles.js

@@ -0,0 +1,26 @@
+import { StyleSheet } from 'react-native';
+
+export const MIN_STAGE_WIDTH = 20;
+
+export default StyleSheet.create({
+  container: {
+    marginRight: 2
+  },
+  bars: {
+    flexDirection: 'row',
+    flex: 1,
+    marginTop: 6
+  },
+  label: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  rateLabelContainer: {
+    backgroundColor: '#3A3A3A',
+    paddingHorizontal: 9,
+    paddingVertical: 8,
+    width: '100%',
+    alignItems: 'center',
+    alignContent: 'center'
+  }
+});

package/lib/components/RateChart/components/RateStagesGraph/components/Bars/index.js

@@ -0,0 +1,58 @@
+import { bool } from 'prop-types';
+import React from 'react';
+import { View } from 'react-native';
+
+import { rateStagesTypes } from '../../../../propTypes';
+import { getTotalRange } from '../Indicator/utils';
+
+import Stage from './components/Stage';
+import SubStage from './components/Stage/components/SubStage';
+import styles from './styles';
+
+const Bars = ({ rateStages, withoutStages }) => {
+  const totalSubStages = rateStages.reduce(
+    (previous, current) => previous + current.sub_rate_stages.length,
+    0
+  );
+
+  const totalRange = getTotalRange(rateStages);
+  // eslint-disable-next-line camelcase
+  const subStages = rateStages.flatMap(rate => rate?.sub_rate_stages);
+
+  return (
+    <View style={[styles.container, withoutStages && styles.withoutStages]}>
+      {withoutStages
+        ? subStages.map((subStage, index) => (
+            <SubStage
+              key={subStage.category}
+              totalSubStages={totalSubStages}
+              subStages={subStages}
+              index={index}
+              subStage={subStage}
+              label={subStage.name}
+              totalRange={totalRange}
+              fullWidth={withoutStages}
+              isLast={index === subStages.length - 1}
+            />
+          ))
+        : rateStages.map((stage, index) => (
+            <Stage
+              key={stage.group}
+              stage={stage}
+              rateStages={rateStages}
+              totalSubStages={totalSubStages}
+              subStageIndex={index}
+              withoutStages={withoutStages}
+              totalRange={totalRange}
+            />
+          ))}
+    </View>
+  );
+};
+
+Bars.propTypes = {
+  rateStages: rateStagesTypes,
+  withoutStages: bool
+};
+
+export default Bars;

package/lib/components/RateChart/components/RateStagesGraph/components/Bars/styles.js

@@ -0,0 +1,6 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  container: { flexDirection: 'row' },
+  withoutStages: { flex: 1 }
+});

package/lib/components/RateChart/components/RateStagesGraph/components/Indicator/components/IndicatorIcon/index.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { View } from 'react-native';
+import { bool, number } from 'prop-types';
+
+import styles from './styles';
+
+const IndicatorIcon = ({ position = null, size, inverted }) => (
+  <View
+    style={[
+      styles.triangle,
+      position && { left: position },
+      size && { borderLeftWidth: size, borderRightWidth: size, borderBottomWidth: 2 * size },
+      inverted && styles.inverted
+    ]}
+  />
+);
+
+IndicatorIcon.propTypes = {
+  position: number,
+  size: number,
+  inverted: bool
+};
+
+export default IndicatorIcon;

package/lib/components/RateChart/components/RateStagesGraph/components/Indicator/components/IndicatorIcon/styles.js

@@ -0,0 +1,21 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  triangle: {
+    width: 0,
+    height: 0,
+    backgroundColor: 'transparent',
+    borderStyle: 'solid',
+    borderLeftWidth: 5,
+    borderRightWidth: 5,
+    borderBottomWidth: 10,
+    borderLeftColor: 'transparent',
+    borderRightColor: 'transparent',
+    borderBottomColor: '#A8A8A8'
+  },
+  inverted: {
+    transform: [{ rotate: '180deg' }],
+    top: -30 - 15,
+    position: 'absolute'
+  }
+});

package/lib/components/RateChart/components/RateStagesGraph/components/Indicator/index.js

@@ -0,0 +1,117 @@
+import React, { Fragment, useState } from 'react';
+import { number, string, arrayOf, shape, any } from 'prop-types';
+import { View } from 'react-native';
+
+import Magnitude from '../../../Magnitude';
+import Label from '../../../../../Label';
+
+import IndicatorIcon from './components/IndicatorIcon';
+import styles, { ICON_SIZE } from './styles';
+import { getIndicatorPosition, getTextPosition, getTotalRange } from './utils';
+
+const Indicator = ({
+  consumptionValue,
+  consumptionUnit,
+  amountValue,
+  amountUnit,
+  rateStages,
+  texts,
+  consumptionLimit
+}) => {
+  const { indicatorLabel } = texts || {};
+  const [surfaceWidth, setSurfaceWidth] = useState(0);
+  const [magnitudWidth, setMagnitudWidth] = useState(0);
+  const [limitDimensions, setLimitDimensions] = useState({ width: 0, height: 0 });
+
+  const handleBarWidth = event => {
+    const { width } = event.nativeEvent.layout;
+    setSurfaceWidth(width);
+  };
+
+  const handleMagnitudWidth = event => {
+    const { width } = event.nativeEvent.layout;
+    setMagnitudWidth(width);
+  };
+
+  const handleLimitDimensions = event => {
+    const { width, height } = event.nativeEvent.layout;
+    setLimitDimensions({ width, height });
+  };
+
+  const totalRange = getTotalRange(rateStages);
+
+  const indicatorPosition = Math.max(
+    -2.5,
+    Math.min(surfaceWidth - 10, getIndicatorPosition(consumptionValue, rateStages, surfaceWidth, totalRange))
+  );
+
+  const limitIndicatorPosition = Math.max(
+    -2.5,
+    Math.min(surfaceWidth - 10, getIndicatorPosition(consumptionLimit, rateStages, surfaceWidth, totalRange))
+  );
+  const textPosition = getTextPosition(indicatorPosition, magnitudWidth);
+  const limitTextPosition = getTextPosition(limitIndicatorPosition, limitDimensions.width);
+  return (
+    <View style={styles.container} onLayout={handleBarWidth}>
+      <IndicatorIcon position={indicatorPosition} />
+      <View style={[styles.magnitude, { left: textPosition }]} onLayout={handleMagnitudWidth}>
+        <Magnitude
+          semibold
+          value={consumptionValue}
+          valueProps={{ h4: true }}
+          unitProps={{ xsmall: false, h4: true }}
+          unity={consumptionUnit}
+          iconProps={{ height: ICON_SIZE, width: ICON_SIZE }}
+        />
+        {consumptionValue > 0 && (
+          <Magnitude
+            semibold
+            value={amountValue}
+            valueProps={{ h4: true }}
+            unitProps={{ xsmall: false, h4: true }}
+            unity={amountUnit}
+            iconProps={{ height: ICON_SIZE, width: ICON_SIZE }}
+            withLeftUnit
+          />
+        )}
+        <Label bold h6 primary style={styles.label}>
+          {!!indicatorLabel && indicatorLabel}
+        </Label>
+      </View>
+
+      {consumptionLimit && (
+        <Fragment>
+          <View
+            style={[styles.limitLabel, { left: limitTextPosition, top: -limitDimensions.height - 33 - 15 }]}
+            onLayout={handleLimitDimensions}
+          >
+            <Magnitude
+              semibold
+              value={consumptionLimit}
+              valueProps={{ h4: true }}
+              unitProps={{ xsmall: false, h4: true }}
+              unity={consumptionUnit}
+              iconProps={{ height: ICON_SIZE, width: ICON_SIZE }}
+            />
+            <Label light h6>
+              Limite a subsidiar
+            </Label>
+          </View>
+          <IndicatorIcon position={limitIndicatorPosition} inverted />
+        </Fragment>
+      )}
+    </View>
+  );
+};
+
+Indicator.propTypes = {
+  consumptionValue: number,
+  consumptionUnit: string,
+  amountValue: string,
+  amountUnit: number,
+  rateStages: arrayOf(shape(any)),
+  texts: arrayOf(shape(any)),
+  consumptionLimit: number
+};
+
+export default Indicator;

package/lib/components/RateChart/components/RateStagesGraph/components/Indicator/styles.js

@@ -0,0 +1,21 @@
+import { StyleSheet } from 'react-native';
+
+export const ICON_SIZE = 24;
+
+export default StyleSheet.create({
+  container: {
+    marginTop: 35,
+    alignItems: 'flex-start'
+  },
+  label: {
+    left: 4
+  },
+  magnitude: {
+    flexDirection: 'row',
+    marginTop: 5
+  },
+  limitLabel: {
+    alignItems: 'center',
+    position: 'absolute'
+  }
+});

package/lib/components/RateChart/components/RateStagesGraph/components/Indicator/utils.js

@@ -0,0 +1,36 @@
+import { INFINITE, MAX_VALUE, MIN_VALUE, STAGE_MARGIN } from '../../constants';
+
+const stagePosition = (value, rateStages, barWidth, totalRange = 1) => {
+  const exceededStages = rateStages.filter(
+    stage => stage.range[MAX_VALUE] !== INFINITE && stage.range[MAX_VALUE] < value
+  ).length;
+  const marginsCorrection = exceededStages * STAGE_MARGIN;
+
+  const valuePosition = (value * 100) / totalRange;
+  return barWidth * (valuePosition / 100) - marginsCorrection - 2.5;
+};
+
+export const getIndicatorPosition = (value, rateStages, barWidth, totalRange) =>
+  stagePosition(value, rateStages, barWidth, totalRange);
+
+export const getTextPosition = (indicatorPosition, textWidth) => {
+  if (indicatorPosition < textWidth / 2) {
+    return 0 - 2.5;
+  }
+
+  if (indicatorPosition > textWidth * 1.5) {
+    return indicatorPosition - textWidth + 10;
+  }
+
+  return indicatorPosition - textWidth / 2;
+};
+
+export const getTotalRange = rateStages =>
+  rateStages?.reduce(
+    (total, curr) =>
+      total +
+      (curr?.range[MAX_VALUE]
+        ? curr?.range[MAX_VALUE] - curr.range[MIN_VALUE]
+        : curr.range[MIN_VALUE] + 100 - curr.range[MIN_VALUE]),
+    0
+  );

package/lib/components/RateChart/components/RateStagesGraph/constants.js

@@ -0,0 +1,12 @@
+export const INFINITE = null;
+export const MAX_VALUE = 1;
+export const MIN_VALUE = 0;
+
+export const DEFAULT_INFINITE_SUB_STAGE_RANGE_WIDTH = 200;
+
+export const INITIAL_INDICATOR_POSITION = -5;
+export const BARS_MARGIN = 0;
+export const LAST_STAGE_MARGIN = 0;
+export const STAGE_MARGIN = 1;
+export const SUB_STAGE_MARGIN = 0.3;
+export const LAST_SUB_STAGE_MARGIN = 0;

package/lib/components/RateChart/components/RateStagesGraph/index.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { any, arrayOf, bool, number, shape, string } from 'prop-types';
+import { View } from 'react-native';
+
+import { rateStagesTypes } from '../../propTypes';
+
+import Bars from './components/Bars';
+import styles from './styles';
+import Indicator from './components/Indicator';
+
+const RateStagesGraph = ({
+  consumptionValue,
+  consumptionUnit,
+  amountValue,
+  amountUnit,
+  rateStages,
+  texts,
+  withoutStages,
+  consumptionLimit
+}) => (
+  <View style={styles.container}>
+    <Bars rateStages={rateStages} withoutStages={withoutStages} />
+    <Indicator
+      consumptionLimit={consumptionLimit}
+      consumptionValue={consumptionValue}
+      consumptionUnit={consumptionUnit}
+      amountValue={amountValue}
+      amountUnit={amountUnit}
+      rateStages={rateStages}
+      texts={texts}
+    />
+  </View>
+);
+
+RateStagesGraph.propTypes = {
+  consumptionValue: number,
+  consumptionLimit: number,
+  consumptionUnit: string,
+  amountValue: number,
+  amountUnit: string,
+  rateStages: rateStagesTypes,
+  texts: arrayOf(shape(any)),
+  withoutStages: bool
+};
+
+export default RateStagesGraph;

package/lib/components/RateChart/components/RateStagesGraph/styles.js

@@ -0,0 +1,8 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  container: {
+    marginVertical: 10,
+    width: '100%'
+  }
+});

package/lib/components/RateChart/index.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import { any, arrayOf, bool, number, shape, string } from 'prop-types';
+import { View } from 'react-native';
+
+import CategoryButton from './components/CategoryButton';
+import RateStagesGraph from './components/RateStagesGraph';
+import styles from './styles';
+
+const RateChart = ({
+  consumptionValue,
+  consumptionUnit,
+  amountValue,
+  amountUnit,
+  category,
+  rate,
+  rateStages,
+  texts,
+  withoutStages,
+  showCategory,
+  showCategoryButton,
+  categoryButtonUrl,
+  consumptionLimit
+}) => {
+  const consumptionValueCorrected = consumptionValue && Math.round(consumptionValue);
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.graphContainer}>
+        {showCategoryButton && (
+          <CategoryButton
+            rate={rate}
+            category={category}
+            texts={texts}
+            showCategory={showCategory}
+            categoryButtonUrl={categoryButtonUrl}
+          />
+        )}
+        {(consumptionValueCorrected === 0 || consumptionValueCorrected) && (
+          <RateStagesGraph
+            consumptionValue={consumptionValueCorrected}
+            consumptionUnit={consumptionUnit}
+            amountValue={amountValue}
+            amountUnit={amountUnit}
+            consumptionLimit={consumptionLimit}
+            rateStages={rateStages}
+            texts={texts}
+            withoutStages={withoutStages}
+          />
+        )}
+      </View>
+    </View>
+  );
+};
+
+RateChart.propTypes = {
+  consumptionValue: number,
+  consumptionUnit: string,
+  amountValue: number,
+  amountUnit: string,
+  category: string,
+  rate: string,
+  consumptionLimit: number,
+  rateStages: arrayOf(shape(any)),
+  texts: arrayOf(shape(any)),
+  withoutStages: bool,
+  showCategory: bool,
+  showCategoryButton: bool,
+  categoryButtonUrl: string
+};
+
+export default RateChart;

package/lib/components/RateChart/propTypes.js

@@ -0,0 +1,17 @@
+import { number, string, arrayOf, shape } from 'prop-types';
+
+export const subStageType = shape({
+  category: number,
+  name: string,
+  color: string,
+  range: arrayOf(number)
+});
+
+export const stageType = shape({
+  group: number,
+  range: arrayOf(number),
+  unit: string,
+  sub_rate_stages: arrayOf(subStageType)
+});
+
+export const rateStagesTypes = arrayOf(stageType);

package/lib/components/RateChart/styles.js

@@ -0,0 +1,12 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    flexDirection: 'row'
+  },
+  graphContainer: {
+    justifyContent: 'center',
+    alignItems: 'center'
+  }
+});

package/lib/components/UTTextInput/components/BaseInput/index.js

@@ -90,7 +90,7 @@ const BaseInput = forwardRef(
           editable={!select && !disabled}
           {...props}
           secureTextEntry={!showInput}
-          style={[...variantStyle.text, select && { color: theme.fonts.fontColor }]}
+          style={[...variantStyle.text, select && { color: theme.fonts?.fontColor }, select && disabled && { color: theme.fonts?.fontDisabledColor}]}
         />
         {(RightIcon || hiddenInput) && (
           <Touchable

package/lib/index.js

@@ -74,3 +74,6 @@ export { default as useTogglableState } from './hooks/useTogglableState';
 // Photo
 export { default as PhotoAlbum } from './components/PhotoAlbum';
 export { default as Capture } from './components/Capture';
+
+// Charts
+export { default as RateChart } from './components/RateChart';

package/lib/utils/stagesGraphUtils/constants.js

@@ -0,0 +1,6 @@
+export const INFINITE = null;
+export const MAX_VALUE = 1;
+export const MIN_VALUE = 0;
+
+export const DEFAULT_INFINITE_SUB_STAGE_RANGE_WIDTH = 200;
+export const MAX_CONSUMPTION = 950;

package/lib/utils/stagesGraphUtils/index.js

@@ -0,0 +1,37 @@
+import { DEFAULT_INFINITE_SUB_STAGE_RANGE_WIDTH, INFINITE, MAX_VALUE, MIN_VALUE } from './constants';
+
+export const getCurrentStage = (value, rateStages) =>
+  rateStages.find(
+    stage =>
+      stage.range[MIN_VALUE] <= value &&
+      (value <= stage.range[MAX_VALUE] || stage.range[MAX_VALUE] === INFINITE)
+  );
+
+export const getSubStageWidth = (subStage, totalRange) => {
+  const { range } = subStage;
+  return range[MAX_VALUE] === INFINITE || !range[MAX_VALUE]
+    ? totalRange
+      ? totalRange - range[MIN_VALUE]
+      : DEFAULT_INFINITE_SUB_STAGE_RANGE_WIDTH
+    : range[MAX_VALUE] - range[MIN_VALUE];
+};
+
+export const getSubStageRangeWidth = (subStage, stage) => {
+  const { range } = subStage;
+  return range[MAX_VALUE] === INFINITE || !range[MAX_VALUE]
+    ? stage.range[MAX_VALUE]
+      ? stage.range[MAX_VALUE] - range[MIN_VALUE]
+      : DEFAULT_INFINITE_SUB_STAGE_RANGE_WIDTH
+    : range[MAX_VALUE] - range[MIN_VALUE];
+};
+
+export const getStageRangeWidth = stage => {
+  const { range } = stage;
+  if (range[MAX_VALUE] === INFINITE || !range[MAX_VALUE]) {
+    return stage.sub_rate_stages.reduce(
+      (totalWidth, subStage) => totalWidth + getSubStageRangeWidth(subStage, stage),
+      0
+    );
+  }
+  return range[MAX_VALUE] - range[MIN_VALUE];
+};

package/package.json

@@ -2,7 +2,7 @@
   "name": "@widergy/mobile-ui",
   "description": "Widergy Mobile Components",
   "author": "widergy",
-  "version": "0.35.7",
+  "version": "0.36.0",
   "repository": "https://github.com/widergy/mobile-ui.git",
   "main": "lib/index.js",
   "files": [
@@ -35,6 +35,7 @@
     "@widergy/web-utils": "^1.22.0",
     "deprecated-react-native-prop-types": "^2.3.0",
     "lodash": "^4.17.15",
+    "numeral": "^2.0.6",
     "pdf-lib": "^1.14.1",
     "react-native-markdown-display": ">=6.1.6",
     "react-native-modal": "^11.5.6"