@spaced-out/ui-design-system 0.3.8 → 0.3.10

package/lib/utils/score-bar/score-bar.js

@@ -3,21 +3,35 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getColorByScorePercentage = exports.SCORE_BAR_ERRORS = void 0;
+exports.getLabelByScorePercentage = exports.getColorByScorePercentage = exports.SCORE_BAR_ERRORS = void 0;
 
-const getColorByPercentage = (totalBars, score, colorMap) => {
-  if (score <= 0) {
-    return colorMap.inactive;
-  }
+const getValidRange = (score, totalBars, keys) => {
   const scorePercentage = 100 * score / totalBars;
-  const range = Math.min(Math.ceil(scorePercentage / 20) * 20, 100);
-  return colorMap[range.toString()] || colorMap.inactive;
+  for (const key of keys) {
+    if (scorePercentage <= Number(key)) {
+      return key;
+    }
+  }
+  return [...keys].pop() || '';
 };
 const getColorByScorePercentage = (totalBars, score, currentBarNumber, colorMap) => {
-  const validColor = getColorByPercentage(totalBars, score, colorMap);
+  if (score <= 0) {
+    return colorMap.inactive;
+  }
+  const validRange = getValidRange(score, totalBars, Object.keys(colorMap));
+  const validColor = colorMap[validRange];
   return currentBarNumber < score ? validColor : colorMap.inactive;
 };
 exports.getColorByScorePercentage = getColorByScorePercentage;
+const getLabelByScorePercentage = (score, totalBars, labelMap) => {
+  if (!labelMap) {
+    return '';
+  }
+  const validRange = getValidRange(score, totalBars, Object.keys(labelMap));
+  const validLabel = labelMap[validRange];
+  return validLabel || '';
+};
+exports.getLabelByScorePercentage = getLabelByScorePercentage;
 const SCORE_BAR_ERRORS = Object.freeze({
   INVALID_BAR_COUNT: {
     type: 'INVALID_BAR_COUNT',

package/lib/utils/score-bar/score-bar.js.flow

@@ -1,18 +1,24 @@
 // @flow strict
-import type {ScoreBarColorMap} from '../../components/ScoreBar';
 
+import type {
+  ScoreBarColorMap,
+  ScoreBarLabelMap,
+} from '../../components/ScoreBar';
 
-const getColorByPercentage = (
-  totalBars: number,
+
+const getValidRange = (
   score: number,
-  colorMap: ScoreBarColorMap,
+  totalBars: number,
+  keys: Array<string>,
 ): string => {
-  if (score <= 0) {
-    return colorMap.inactive;
-  }
   const scorePercentage = (100 * score) / totalBars;
-  const range = Math.min(Math.ceil(scorePercentage / 20) * 20, 100);
-  return colorMap[range.toString()] || colorMap.inactive;
+  for (const key of keys) {
+    if (scorePercentage <= Number(key)) {
+      return key;
+    }
+  }
+
+  return [...keys].pop() || '';
 };
 
 export const getColorByScorePercentage = (
@@ -21,10 +27,29 @@ export const getColorByScorePercentage = (
   currentBarNumber: number,
   colorMap: ScoreBarColorMap,
 ): string => {
-  const validColor = getColorByPercentage(totalBars, score, colorMap);
+  if (score <= 0) {
+    return colorMap.inactive;
+  }
+  const validRange = getValidRange(score, totalBars, Object.keys(colorMap));
+  const validColor = colorMap[validRange];
+
   return currentBarNumber < score ? validColor : colorMap.inactive;
 };
 
+export const getLabelByScorePercentage = (
+  score: number,
+  totalBars: number,
+  labelMap?: ScoreBarLabelMap,
+): string => {
+  if (!labelMap) {
+    return '';
+  }
+  const validRange = getValidRange(score, totalBars, Object.keys(labelMap));
+  const validLabel = labelMap[validRange];
+
+  return validLabel || '';
+};
+
 export const SCORE_BAR_ERRORS = Object.freeze({
   INVALID_BAR_COUNT: {
     type: 'INVALID_BAR_COUNT',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.3.8",
+  "version": "0.3.10",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {