feat: add ArcUnits

packages/components/examples/report-card/empowerment-metric/dual-radial-gauge.stories.tsx

@@ -7,6 +7,7 @@ import {
   ArcUnitLabel,
   ArcScale,
   Chart,
+  ArcUnits,
 } from '../../../src';
 
 const Neutral70 = '#EBECF0';
@@ -42,6 +43,8 @@ const ReportCardEmpowermentMetricDualRadialGauge = (props: {
   valueSecondary: number;
   radiusSecondary: number;
   radiusRatioSecondary: number;
+  // extra
+  unitsOffset?: number;
 }) => {
   const {
     valueMin,
@@ -52,6 +55,7 @@ const ReportCardEmpowermentMetricDualRadialGauge = (props: {
     radiusRatioPrimary,
     radiusSecondary,
     radiusRatioSecondary,
+    unitsOffset,
   } = props;
 
   return (
@@ -77,15 +81,17 @@ const ReportCardEmpowermentMetricDualRadialGauge = (props: {
           >
             <ArcSweep style={{ fill: Neutral70 }} />
             <ArcCircle at={valuePrimary} style={{ fill: Purple600 }} />
-            <ArcUnitLabel at={1} style={unitLabelStyle(1, valuePrimary)}>
-              Too easy
-            </ArcUnitLabel>
-            <ArcUnitLabel at={2} style={unitLabelStyle(2, valuePrimary)}>
-              Just right
-            </ArcUnitLabel>
-            <ArcUnitLabel at={3} style={unitLabelStyle(3, valuePrimary)}>
-              Too hard
-            </ArcUnitLabel>
+            <ArcUnits offset={unitsOffset}>
+              <ArcUnitLabel at={1} style={unitLabelStyle(1, valuePrimary)}>
+                Too easy
+              </ArcUnitLabel>
+              <ArcUnitLabel at={2} style={unitLabelStyle(2, valuePrimary)}>
+                Just right
+              </ArcUnitLabel>
+              <ArcUnitLabel at={3} style={unitLabelStyle(3, valuePrimary)}>
+                Too hard
+              </ArcUnitLabel>
+            </ArcUnits>
           </Arc>
           <Arc
             radius={radiusSecondary}
@@ -113,6 +119,7 @@ const meta: Meta<typeof ReportCardEmpowermentMetricDualRadialGauge> = {
     radiusRatioPrimary: 0.77,
     radiusSecondary: 93,
     radiusRatioSecondary: 0.87,
+    unitsOffset: 8,
   },
   argTypes: {
     valuePrimary: {
@@ -131,6 +138,14 @@ const meta: Meta<typeof ReportCardEmpowermentMetricDualRadialGauge> = {
         step: 1,
       },
     },
+    unitsOffset: {
+      control: {
+        type: 'range',
+        min: 0,
+        max: 16,
+        step: 1,
+      },
+    },
   },
 };
 

packages/components/src/ArcUnitLabel/ArcUnitLabelProps.ts

@@ -8,7 +8,7 @@ export interface ArcUnitLabelProps
    */
   at: number;
   /**
-   * The offset of the unit label from the arc's (primary/outer) radius
+   * The offset of the unit label from the arc's (primary/outer) radius.
    */
   offset?: number;
   /**

packages/components/src/ArcUnits/ArcUnits.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ArcUnitsProps } from './ArcUnitsProps';
+
+export const ArcUnits = (props: ArcUnitsProps) => {
+  const { children, offset, ...other } = props;
+
+  return React.Children.map(children, (child) => {
+    if (React.isValidElement<Omit<ArcUnitsProps, 'children'>>(child)) {
+      return React.cloneElement(child, {
+        offset: child.props.offset ?? offset,
+        ...other,
+      });
+    }
+
+    return child;
+  });
+};

packages/components/src/ArcUnits/ArcUnitsProps.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ArcUnitsParams } from '../utils';
+
+export interface ArcUnitsProps extends ArcUnitsParams {
+  children: React.ReactNode;
+}

packages/components/src/ArcUnits/index.ts

@@ -0,0 +1,2 @@
+export * from './ArcUnits';
+export * from './ArcUnitsProps';

packages/components/src/index.ts

@@ -3,6 +3,7 @@ export * from './ArcCircle';
 export * from './ArcSegments';
 export * from './ArcSegmentsSweep';
 export * from './ArcSweep';
+export * from './ArcUnits';
 export * from './ArcUnitLabel';
 export * from './ArcScale';
 export * from './Bar';

packages/components/src/utils/arc-units.ts

@@ -0,0 +1,6 @@
+export type ArcUnitsParams = {
+  /**
+   * The offset of the unit label from the arc's (primary/outer) radius.
+   */
+  offset?: number;
+};

packages/components/src/utils/index.ts

@@ -2,6 +2,7 @@ export * from './arc';
 export * from './arc-circle';
 export * from './arc-scale';
 export * from './arc-segments';
+export * from './arc-units';
 export * from './bar';
 export * from './bar-fill';
 export * from './bar-scale';