Additional Changes for calculations of RPS %.

src/components/atoms/price-diff-pc-formatter/price-diff-pc-formatter.atom.jsx

@@ -0,0 +1,52 @@
+import React, { useMemo } from "react";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../../redux/user/user.selectors";
+import "./price-diff-pc-formatter.styles.scss";
+import { AlertFilled } from "@ant-design/icons";
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+
+export function PriceDiffPcFormatterAtom({
+  bodyshop,
+  price_diff_pc,
+  group,
+  v_age,
+}) {
+  const metTarget = useMemo(() => {
+    const targetsForGroup = bodyshop.targets[group];
+    if (!targetsForGroup) return 0;
+    const targetPc = targetsForGroup.filter(
+      (t) => t.ageGte <= v_age && (t.ageLt ? t.ageLt > v_age : true)
+    );
+    if (targetPc.length === 0) return false;
+    else if (targetPc.length === 1) return price_diff_pc >= targetPc[0].target;
+    else {
+      alert("Multiple targets match.");
+      return false;
+    }
+  }, [bodyshop, group, price_diff_pc, v_age]);
+
+  return (
+    <div
+      style={{
+        color: metTarget ? "green" : "red",
+        display: "flex",
+        alignItems: "center",
+      }}
+    >
+      {(price_diff_pc * 100).toFixed(1)}%
+      {price_diff_pc === 1 ? (
+        <AlertFilled style={{ color: "tomato" }} className="blink_me" />
+      ) : null}
+    </div>
+  );
+}
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(PriceDiffPcFormatterAtom);

src/components/atoms/price-diff-pc-formatter/price-diff-pc-formatter.styles.scss

@@ -0,0 +1,9 @@
+.blink_me {
+  animation: blinker 1s linear infinite;
+}
+
+@keyframes blinker {
+  50% {
+    opacity: 0;
+  }
+}

src/components/atoms/target-price-diff/target-price-diff-pc.atom.jsx

@@ -0,0 +1,39 @@
+import { Statistic } from "antd";
+import React, { useMemo } from "react";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../../redux/user/user.selectors";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+
+export function PriceDiffPcFormatterAtom({ bodyshop, group, v_age }) {
+  const metTarget = useMemo(() => {
+    const targetsForGroup = bodyshop.targets[group];
+    if (!targetsForGroup) return 0;
+    const targetPc = targetsForGroup.filter(
+      (t) => t.ageGte <= v_age && (t.ageLt ? t.ageLt > v_age : true)
+    );
+    if (targetPc.length === 0) return 0;
+    else if (targetPc.length === 1) return targetPc[0].target;
+    else {
+      return 0;
+    }
+  }, [bodyshop, group, v_age]);
+
+  return (
+    <Statistic
+      title="Target RPS %"
+      value={(metTarget * 100).toFixed(1)}
+      suffix="%"
+    />
+  );
+}
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(PriceDiffPcFormatterAtom);