sag_components 1.0.26 → 1.0.28

package/dist/stories/Benchmark.stories.js

@@ -0,0 +1,122 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.LessAvarage = exports.GreaterAvarage = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Benchmark = require("./components/Benchmark");
+var _default = {
+  title: "SAG BI/Benchmark",
+  component: _Benchmark.Benchmark,
+  tags: ["autodocs"],
+  argTypes: {
+    currentValue: {
+      name: "currentValue",
+      control: {
+        type: "number",
+        min: 0,
+        max: 100000000000000
+      },
+      description: "curent value (<=100%) "
+    },
+    totalValue: {
+      name: "totalValue",
+      control: {
+        type: "number",
+        min: 0,
+        max: 100000000000000
+      },
+      description: "total value (100%) "
+    },
+    width: {
+      name: "width",
+      control: {
+        type: "number",
+        min: 0,
+        max: 600
+      },
+      description: "width of the control (in px)"
+    },
+    height: {
+      name: "height",
+      control: {
+        type: "number",
+        min: 0,
+        max: 600
+      },
+      description: "height of the control (in px)"
+    },
+    color: {
+      name: "color",
+      description: "Sets the color of current value when it is greater then 50% of total value",
+      control: {
+        type: "color",
+        presetColors: ["#ffffff", "#ff0000", "#00ff00", "#0000ff"]
+      }
+    },
+    linearGradientColor: {
+      name: "linearGradientColor",
+      description: "Sets the linear-Gradient color of current value when it is greater then 50% of total value",
+      control: {
+        type: "color",
+        presetColors: ["#ffffff", "#ff0000", "#00ff00", "#0000ff"]
+      }
+    },
+    underAvarageColor: {
+      name: "underAvarageColor",
+      description: "Sets the color of current value when it is under 50% of total value",
+      control: {
+        type: "color",
+        presetColors: ["#ffffff", "#ff0000", "#00ff00", "#0000ff"]
+      }
+    },
+    linearGradientUnderAvarageColor: {
+      name: "linearGradientUnderAvarageColor",
+      description: "Sets the linear-Gradient color of current value when it is under 50% of total value",
+      control: {
+        type: "color",
+        presetColors: ["#ffffff", "#ff0000", "#00ff00", "#0000ff"]
+      }
+    },
+    backgroundColor: {
+      name: "backgroundColor",
+      description: "Sets the background color of the control",
+      control: {
+        type: "color",
+        presetColors: ["#ffffff", "#ff0000", "#00ff00", "#0000ff"]
+      }
+    }
+  }
+};
+exports.default = _default;
+var Template = function Template(args) {
+  return /*#__PURE__*/_react.default.createElement(_Benchmark.Benchmark, args);
+};
+var GreaterAvarage = Template.bind({});
+exports.GreaterAvarage = GreaterAvarage;
+GreaterAvarage.args = {
+  totalValue: 100000,
+  currentValue: 60000,
+  width: 100,
+  height: 12,
+  color: "#79DB95",
+  linearGradientColor: "#C3EFD0",
+  underAvarageColor: "#FD5959",
+  linearGradientUnderAvarageColor: "#FDB1B1",
+  backgroundColor: "#F2F2F2"
+};
+var LessAvarage = Template.bind({});
+exports.LessAvarage = LessAvarage;
+LessAvarage.args = {
+  totalValue: 1000,
+  currentValue: 400,
+  width: 100,
+  height: 12,
+  color: "#79DB95",
+  linearGradientColor: "#C3EFD0",
+  underAvarageColor: "#FD5959",
+  linearGradientUnderAvarageColor: "#FDB1B1",
+  backgroundColor: "#F2F2F2"
+};

package/dist/stories/Benchmark.style.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CurrentValueRectangle = exports.ControlsContainer = exports.Controls = exports.BackgroundValueRectangle = exports.AvarageDelimiter = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  position: relative;\n  margin: 0px 0 0px;\n  font-family: \"Lato\", sans-serif;\n  font-style: normal;\n  width: ", ";\n  height: ", ";\n  //box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n  border-radius: 100px;\n  //border: 1px solid red;\n"])), function (props) {
+  return props.width.toString().concat("", "px");
+}, function (props) {
+  return props.height.toString().concat("", "px");
+});
+exports.ControlsContainer = ControlsContainer;
+var Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  border-radius: 100px;\n  width: ", ";\n  height: ", ";\n  //background: #ffffff;\n  //border: 1px solid blue;\n"])), function (props) {
+  return props.width.toString().concat("", "px");
+}, function (props) {
+  return props.height.toString().concat("", "px");
+});
+exports.Controls = Controls;
+var BackgroundValueRectangle = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: ", ";\n  height: ", ";\n  top: 0px;\n  left: 0px;\n  border-radius: 100px;\n  background: ", ";\n  //border: 1px solid orange;\n"])), function (props) {
+  return props.width.toString().concat("", "px");
+}, function (props) {
+  return props.height.toString().concat("", "px");
+}, function (props) {
+  return props.color;
+});
+exports.BackgroundValueRectangle = BackgroundValueRectangle;
+var CurrentValueRectangle = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: ", ";\n  height: ", ";\n  top: 0px;\n  left: 0px;\n  border-radius: 100px;\n  background: linear-gradient(\n    90deg,\n    ", " 0%,\n    ", " 100%\n  );\n  //border: 1px solid green;\n"])), function (props) {
+  return props.width.toString().concat("", "px");
+}, function (props) {
+  return props.height.toString().concat("", "px");
+}, function (props) {
+  return props.linearGradientColor;
+}, function (props) {
+  return props.color;
+});
+exports.CurrentValueRectangle = CurrentValueRectangle;
+var AvarageDelimiter = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  height: ", ";\n  width: ", ";\n  top: ", ";\n  left: ", ";\n  border: 1px solid #212121;\n"])), function (props) {
+  return props.height.toString().concat("", "px");
+}, function (props) {
+  return props.width.toString().concat("", "px");
+}, function (props) {
+  return props.top.toString().concat("", "px");
+}, function (props) {
+  return props.left.toString().concat("", "px");
+});
+exports.AvarageDelimiter = AvarageDelimiter;

package/dist/stories/TotalDoughnutChart.stories.js

@@ -21,7 +21,7 @@ var arrLegendDat3rows = [{
   value: 30000,
   color: "#85A1D2"
 }, {
-  name: "Redemption Cost",
+  name: "Existing Redeemers",
   value: 6500,
   color: "#9AE6FF"
 }, {
@@ -32,7 +32,7 @@ var arrLegendDat3rows = [{
 // { name: "My test 2", value: 35000, color: "#79DB95"},
 ];
 var _default = {
-  title: "SAG/TotalDoughnutChart",
+  title: "SAG BI/TotalDoughnutChart",
   component: _TotalDoughnutChart.TotalDoughnutChart,
   tags: ["autodocs"],
   argTypes: {

package/dist/stories/TotalDoughnutChart.style.js

@@ -28,7 +28,7 @@ var CurrencySign = _styledComponents.default.div(_templateObject4 || (_templateO
 exports.CurrencySign = CurrencySign;
 var FormattedValue = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: 200px;\n  height: 48px;\n  left: 57px;\n  top: 115px;\n  font-weight: 500;\n  font-size: 40px;\n  line-height: 48px;\n  //border: 1px solid red;\n"])));
 exports.FormattedValue = FormattedValue;
-var DoughnutChart = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: 95px;\n  height: 95px;\n  left: ", ";\n  top: ", ";     \n  //border: 1px solid red;\n"])), function (props) {
+var DoughnutChart = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: 90px;\n  height: 90px;\n  left: ", ";\n  top: ", ";     \n  //border: 1px solid red;\n"])), function (props) {
   return props.left.toString().concat("", "px"); //10px
 }, function (props) {
   return props.top.toString().concat("", "px"); //top: 221px;
@@ -40,13 +40,13 @@ var LegendControls = _styledComponents.default.div(_templateObject7 || (_templat
   return props.top.toString().concat("", "px"); //top: 221px;
 });
 exports.LegendControls = LegendControls;
-var LegendColorRectangle = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: 16px;\n  height: 16px;\n  left: 14px;\n  top: 14px;\n  background: ", ";\n"])), function (props) {
+var LegendColorRectangle = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: 16px;\n  height: 16px;\n  left: 8px;\n  top: 14px;\n  background: ", ";\n"])), function (props) {
   return props.color;
 });
 exports.LegendColorRectangle = LegendColorRectangle;
-var LegendTitle = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: 110px;\n  height: 18px;\n  left: 40px;\n  top: 1px;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 17px;\n  //border: 1px solid red;\n"])));
+var LegendTitle = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: 150px;\n  height: 18px;\n  left: 30px;\n  top: 1px;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 17px;\n  //border: 1px solid red;\n"])));
 exports.LegendTitle = LegendTitle;
-var LegendCurrencySign = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: 11px;\n  height: 19px;\n  left: 42px;\n  top: 21px;\n  font-weight: 600;\n  font-size: 16px;\n  line-height: 19px;\n  //border: 1px solid red;\n"])));
+var LegendCurrencySign = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: 11px;\n  height: 19px;\n  left: 30px;\n  top: 21px;\n  font-weight: 600;\n  font-size: 16px;\n  line-height: 19px;\n  //border: 1px solid red;\n"])));
 exports.LegendCurrencySign = LegendCurrencySign;
-var LegendFormattedValue = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: 100px;\n  height: 19px;\n  left: 52px;\n  top: 21px;\n  font-weight: 600;\n  font-size: 16px;\n  line-height: 19px;\n  //border: 1px solid red;\n"])));
+var LegendFormattedValue = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: 120px;\n  height: 19px;\n  left: 40px;\n  top: 21px;\n  font-weight: 600;\n  font-size: 16px;\n  line-height: 19px;\n  //border: 1px solid red;\n"])));
 exports.LegendFormattedValue = LegendFormattedValue;

package/dist/stories/components/Benchmark.js

@@ -0,0 +1,80 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Benchmark = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _BenchmarkStyle = require("../Benchmark.style.js");
+var _excluded = ["totalValue", "currentValue", "width", "height", "color", "linearGradientColor", "underAvarageColor", "linearGradientUnderAvarageColor", "backgroundColor"];
+/*Benchmark*/
+var Benchmark = function Benchmark(_ref) {
+  var _ref$totalValue = _ref.totalValue,
+    totalValue = _ref$totalValue === void 0 ? 100 : _ref$totalValue,
+    _ref$currentValue = _ref.currentValue,
+    currentValue = _ref$currentValue === void 0 ? 60 : _ref$currentValue,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? 100 : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 12 : _ref$height,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "#79DB95" : _ref$color,
+    _ref$linearGradientCo = _ref.linearGradientColor,
+    linearGradientColor = _ref$linearGradientCo === void 0 ? "#C3EFD0" : _ref$linearGradientCo,
+    _ref$underAvarageColo = _ref.underAvarageColor,
+    underAvarageColor = _ref$underAvarageColo === void 0 ? "#FD5959" : _ref$underAvarageColo,
+    _ref$linearGradientUn = _ref.linearGradientUnderAvarageColor,
+    linearGradientUnderAvarageColor = _ref$linearGradientUn === void 0 ? "#FDB1B1" : _ref$linearGradientUn,
+    _ref$backgroundColor = _ref.backgroundColor,
+    backgroundColor = _ref$backgroundColor === void 0 ? "#F2F2F2" : _ref$backgroundColor,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var getCurrentValueRectangleWidth = function getCurrentValueRectangleWidth() {
+    if (!totalValue) return 0;
+    if (currentValue > totalValue) return width;
+    return currentValue / totalValue * width;
+  };
+  var getUnderAvarageColor = function getUnderAvarageColor() {
+    if (!totalValue) return backgroundColor;
+    if (currentValue > totalValue) return color;
+    if (currentValue / totalValue <= 0.5) {
+      return underAvarageColor;
+    } else {
+      return color;
+    }
+  };
+  var getUnderAvaragelinearGradientColor = function getUnderAvaragelinearGradientColor() {
+    if (!totalValue) return backgroundColor;
+    if (currentValue > totalValue) return linearGradientColor;
+    if (currentValue / totalValue <= 0.5) {
+      return linearGradientUnderAvarageColor;
+    } else {
+      return linearGradientColor;
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_BenchmarkStyle.ControlsContainer, {
+    height: height,
+    width: width
+  }, /*#__PURE__*/_react.default.createElement(_BenchmarkStyle.Controls, {
+    height: height,
+    width: width
+  }, /*#__PURE__*/_react.default.createElement(_BenchmarkStyle.BackgroundValueRectangle, {
+    height: height,
+    width: width,
+    color: backgroundColor
+  }), /*#__PURE__*/_react.default.createElement(_BenchmarkStyle.CurrentValueRectangle, {
+    height: height,
+    width: getCurrentValueRectangleWidth(),
+    color: getUnderAvarageColor(),
+    linearGradientColor: getUnderAvaragelinearGradientColor()
+  }), /*#__PURE__*/_react.default.createElement(_BenchmarkStyle.AvarageDelimiter, {
+    height: height + 4,
+    width: 0,
+    top: -2,
+    left: width / 2
+  })));
+};
+exports.Benchmark = Benchmark;
+var _default = Benchmark;
+exports.default = _default;

package/dist/stories/components/TotalDoughnutChart.js

@@ -149,13 +149,13 @@ var TotalDoughnutChart = function TotalDoughnutChart(_ref) {
     left: getDoughnutChartLeft(),
     top: getDoughnutChartTop()
   }, /*#__PURE__*/_react.default.createElement(_recharts.PieChart, {
-    width: 93,
-    height: 93,
+    width: 90,
+    height: 90,
     onMouseEnter: onPieEnterHandler
   }, /*#__PURE__*/_react.default.createElement(_recharts.Pie, {
     data: legendData,
-    innerRadius: 32,
-    outerRadius: 47,
+    innerRadius: 30,
+    outerRadius: 45,
     fill: "#8884d8",
     dataKey: "value"
   }, legendData.map(function (row, index) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sag_components",
-  "version": "1.0.26",
+  "version": "1.0.28",
   "description": "",
   "main": "dist/index.js",
   "scripts": {

package/src/stories/Benchmark.stories.jsx

@@ -0,0 +1,111 @@
+import React from "react";
+import { Benchmark } from "./components/Benchmark";
+
+export default {
+  title: "SAG BI/Benchmark",
+  component: Benchmark,
+  tags: ["autodocs"],
+
+  argTypes: {
+    currentValue: {
+      name: "currentValue",
+      control: { type: "number", min: 0, max: 100000000000000 },
+      description: "curent value (<=100%) ",
+    },
+
+    totalValue: {
+      name: "totalValue",
+      control: { type: "number", min: 0, max: 100000000000000 },
+      description: "total value (100%) ",
+    },
+
+    width: {
+      name: "width",
+      control: { type: "number", min: 0, max: 600 },
+      description: "width of the control (in px)",
+    },
+
+    height: {
+      name: "height",
+      control: { type: "number", min: 0, max: 600 },
+      description: "height of the control (in px)",
+    },
+
+    color: {
+      name: "color",
+      description:
+        "Sets the color of current value when it is greater then 50% of total value",
+      control: {
+        type: "color",
+        presetColors: ["#ffffff", "#ff0000", "#00ff00", "#0000ff"],
+      },
+    },
+
+    linearGradientColor: {
+      name: "linearGradientColor",
+      description:
+        "Sets the linear-Gradient color of current value when it is greater then 50% of total value",
+      control: {
+        type: "color",
+        presetColors: ["#ffffff", "#ff0000", "#00ff00", "#0000ff"],
+      },
+    },
+
+    underAvarageColor: {
+      name: "underAvarageColor",
+      description:
+        "Sets the color of current value when it is under 50% of total value",
+      control: {
+        type: "color",
+        presetColors: ["#ffffff", "#ff0000", "#00ff00", "#0000ff"],
+      },
+    },
+
+    linearGradientUnderAvarageColor: {
+      name: "linearGradientUnderAvarageColor",
+      description:
+        "Sets the linear-Gradient color of current value when it is under 50% of total value",
+      control: {
+        type: "color",
+        presetColors: ["#ffffff", "#ff0000", "#00ff00", "#0000ff"],
+      },
+    },
+
+    backgroundColor: {
+      name: "backgroundColor",
+      description: "Sets the background color of the control",
+      control: {
+        type: "color",
+        presetColors: ["#ffffff", "#ff0000", "#00ff00", "#0000ff"],
+      },
+    },
+  },
+};
+
+const Template = (args) => <Benchmark {...args} />;
+
+export const GreaterAvarage = Template.bind({});
+GreaterAvarage.args = {
+  totalValue: 100000,
+  currentValue: 60000,
+  width: 100,
+  height: 12,
+  color: "#79DB95",
+  linearGradientColor: "#C3EFD0",
+  underAvarageColor: "#FD5959",
+  linearGradientUnderAvarageColor: "#FDB1B1",
+  backgroundColor: "#F2F2F2",
+};
+
+export const LessAvarage = Template.bind({});
+LessAvarage.args = {
+  totalValue: 1000,
+  currentValue: 400,
+  width: 100,
+  height: 12,
+  color: "#79DB95",
+  linearGradientColor: "#C3EFD0",
+  underAvarageColor: "#FD5959",
+  linearGradientUnderAvarageColor: "#FDB1B1",
+  backgroundColor: "#F2F2F2",
+};

package/src/stories/Benchmark.style.js

@@ -0,0 +1,82 @@
+import styled from "styled-components";
+
+export const ControlsContainer = styled.div`
+  display: flex;
+  position: relative;
+  margin: 0px 0 0px;
+  font-family: "Lato", sans-serif;
+  font-style: normal;
+  width: ${(props) => {
+    return props.width.toString().concat("", "px");
+  }};
+  height: ${(props) => {
+    return props.height.toString().concat("", "px");
+  }};
+  //box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+  border-radius: 100px;
+  //border: 1px solid red;
+`;
+
+export const Controls = styled.div`
+  position: relative;
+  border-radius: 100px;
+  width: ${(props) => {
+    return props.width.toString().concat("", "px");
+  }};
+  height: ${(props) => {
+    return props.height.toString().concat("", "px");
+  }};
+  //background: #ffffff;
+  //border: 1px solid blue;
+`;
+
+export const BackgroundValueRectangle = styled.div`
+  position: absolute;
+  width: ${(props) => {
+    return props.width.toString().concat("", "px");
+  }};
+  height: ${(props) => {
+    return props.height.toString().concat("", "px");
+  }};
+  top: 0px;
+  left: 0px;
+  border-radius: 100px;
+  background: ${(props) => props.color};
+  //border: 1px solid orange;
+`;
+
+export const CurrentValueRectangle = styled.div`
+  position: absolute;
+  width: ${(props) => {
+    return props.width.toString().concat("", "px");
+  }};
+  height: ${(props) => {
+    return props.height.toString().concat("", "px");
+  }};
+  top: 0px;
+  left: 0px;
+  border-radius: 100px;
+  background: linear-gradient(
+    90deg,
+    ${(props) => props.linearGradientColor} 0%,
+    ${(props) => props.color} 100%
+  );
+  //border: 1px solid green;
+`;
+
+export const AvarageDelimiter = styled.div`
+  position: absolute;
+  height: ${(props) => {
+    return props.height.toString().concat("", "px");
+  }};
+  width: ${(props) => {
+    return props.width.toString().concat("", "px");
+  }};
+  top: ${(props) => {
+    return props.top.toString().concat("", "px");
+  }};
+  left: ${(props) => {
+    return props.left.toString().concat("", "px");
+  }};
+  border: 1px solid #212121;
+`;

package/src/stories/TotalDoughnutChart.stories.js

@@ -8,14 +8,14 @@ const arrLegendData = [
 
 const arrLegendDat3rows = [
   { name: "Package Cost", value: 30000, color: "#85A1D2"},
-  { name: "Redemption Cost", value: 6500,color: "#9AE6FF"},
+  { name: "Existing Redeemers", value: 6500,color: "#9AE6FF"},
   { name: "Others", value: 20000, color: "#FD5959"},
   // { name: "My test 2", value: 35000, color: "#79DB95"},
 ];
 
 
 export default {
-  title: "SAG/TotalDoughnutChart",
+  title: "SAG BI/TotalDoughnutChart",
   component: TotalDoughnutChart,
   tags: ["autodocs"],
 

package/src/stories/TotalDoughnutChart.style.js

@@ -71,8 +71,8 @@ export const FormattedValue = styled.div`
 
 export const DoughnutChart = styled.div`
   position: absolute;
-  width: 95px;
-  height: 95px;
+  width: 90px;
+  height: 90px;
   left: ${(props) => {       
     return props.left.toString().concat("", "px"); //10px
   }};
@@ -101,16 +101,16 @@ export const LegendColorRectangle = styled.div`
   position: absolute;
   width: 16px;
   height: 16px;
-  left: 14px;
+  left: 8px;
   top: 14px;
   background: ${(props) => props.color};
 `;
 
 export const LegendTitle = styled.div`
   position: absolute;
-  width: 110px;
+  width: 150px;
   height: 18px;
-  left: 40px;
+  left: 30px;
   top: 1px;
   font-weight: 400;
   font-size: 14px;
@@ -122,7 +122,7 @@ export const LegendCurrencySign = styled.div`
   position: absolute;
   width: 11px;
   height: 19px;
-  left: 42px;
+  left: 30px;
   top: 21px;
   font-weight: 600;
   font-size: 16px;
@@ -132,9 +132,9 @@ export const LegendCurrencySign = styled.div`
 
 export const LegendFormattedValue = styled.div`
   position: absolute;
-  width: 100px;
+  width: 120px;
   height: 19px;
-  left: 52px;
+  left: 40px;
   top: 21px;
   font-weight: 600;
   font-size: 16px;

package/src/stories/components/Benchmark.jsx

@@ -0,0 +1,75 @@
+import React from "react";
+
+import {
+  ControlsContainer,
+  Controls,
+  BackgroundValueRectangle,
+  CurrentValueRectangle,
+  AvarageDelimiter,
+} from "../Benchmark.style.js";
+
+/*Benchmark*/
+export const Benchmark = ({
+  totalValue = 100,
+  currentValue = 60,
+  width = 100,
+  height = 12,
+  color = "#79DB95",
+  linearGradientColor = "#C3EFD0",
+  underAvarageColor = "#FD5959",
+  linearGradientUnderAvarageColor = "#FDB1B1",
+  backgroundColor = "#F2F2F2",
+  ...props
+}) => {
+  const getCurrentValueRectangleWidth = () => {
+    if (!totalValue) return 0;
+    if (currentValue > totalValue) return width;
+    return (currentValue / totalValue) * width;
+  };
+
+  const getUnderAvarageColor = () => {
+    if (!totalValue) return backgroundColor;
+    if (currentValue > totalValue) return color;
+    if (currentValue / totalValue <= 0.5) {
+      return underAvarageColor;
+    } else {
+      return color;
+    }
+  };
+
+  const getUnderAvaragelinearGradientColor = () => {
+    if (!totalValue) return backgroundColor;
+    if (currentValue > totalValue) return linearGradientColor;
+    if (currentValue / totalValue <= 0.5) {
+      return linearGradientUnderAvarageColor;
+    } else {
+      return linearGradientColor;
+    }
+  };
+
+  return (
+    <ControlsContainer height={height} width={width}>
+      <Controls height={height} width={width}>
+        <BackgroundValueRectangle
+          height={height}
+          width={width}
+          color={backgroundColor}
+        />
+        <CurrentValueRectangle
+          height={height}
+          width={getCurrentValueRectangleWidth()}
+          color={getUnderAvarageColor()}
+          linearGradientColor={getUnderAvaragelinearGradientColor()}
+        />
+        <AvarageDelimiter
+          height={height + 4}
+          width={0}
+          top={-2}
+          left={width / 2}
+        />
+      </Controls>
+    </ControlsContainer>
+  );
+};
+
+export default Benchmark;