feat: add showMean prop to RangeWithValue component (#306)

Author: simbig

src/RangeWithValue/index.stories.tsx

@@ -19,6 +19,9 @@ export default {
     rangeType: {
       control: { type: 'select', options: ['closed', 'open-ended'] },
     },
+    showMean: {
+      control: { type: 'boolean' },
+    },
   },
 };
 
@@ -27,6 +30,7 @@ const Template: Story<{
   expectedMax: number;
   actualValue: number;
   rangeType: 'closed' | 'open-ended';
+  showMean: boolean;
 }> = function Template(args) {
   return (
     <div style={{ width: 300 }}>
@@ -41,4 +45,5 @@ Default.args = {
   expectedMax: 100,
   actualValue: 50,
   rangeType: 'closed',
+  showMean: false,
 };

src/RangeWithValue/index.tsx

@@ -23,6 +23,7 @@ export type RangeWithValueProps = {
   actualValue: number;
   rangeType: RangeWithValueType;
   bufferPercentage?: number;
+  showMean?: boolean;
 };
 
 export function RangeWithValue({
@@ -31,6 +32,7 @@ export function RangeWithValue({
   actualValue,
   rangeType,
   bufferPercentage = 0.1,
+  showMean,
 }: RangeWithValueProps) {
   const theme = useTheme();
 
@@ -69,11 +71,22 @@ export function RangeWithValue({
     theme,
   });
 
+  const meanValue = (expectedMin + expectedMax) / 2;
+  const meanLabelWidth = 28;
+
   return (
     <Container>
       <Scale>
         <RangeLine left={`${percentage(expectedMin)}%`} />
         <RangeLine left={`${percentage(expectedMax)}%`} />
+        {showMean && (
+          <Label
+            left={`calc(${percentage(meanValue)}% - ${meanLabelWidth / 2}px)`}
+          >
+            {meanValue.toFixed(2)}
+          </Label>
+        )}
+
         <Tooltip
           title={(() => {
             if (isOutOfRange) {