Gauge

package.json

@@ -118,7 +118,7 @@
     "chalk": "4.1.2",
     "clean-webpack-plugin": "^4.0.0",
     "concurrently": "^8.0.0",
-    "cross-env": "^7.0.3",
+    "cross-env": "^10.1.0",
     "css-loader": "^7.1.2",
     "eslint": "^8.29.0",
     "eslint-config-prettier": "^9.0.0",
@@ -175,5 +175,6 @@
     "React",
     "Spectrum",
     "Charts"
-  ]
+  ],
+  "dependencies": {}
 }

packages/constants/constants.ts

@@ -26,6 +26,7 @@ export const DEFAULT_FONT_SIZE = 14;
 export const DEFAULT_FONT_COLOR = 'gray-800';
 export const DEFAULT_GRANULARITY = 'day';
 export const DEFAULT_HIDDEN_SERIES = [];
+export const DEFAULT_LABEL = false;
 export const DEFAULT_LABEL_ALIGN = 'center';
 export const DEFAULT_LABEL_FONT_WEIGHT = 'normal';
 export const DEFAULT_LABEL_ORIENTATION = 'horizontal';
@@ -35,6 +36,10 @@ export const DEFAULT_LINE_WIDTHS = ['M'];
 export const DEFAULT_LINEAR_DIMENSION = 'x';
 export const DEFAULT_LOCALE = 'en-US';
 export const DEFAULT_METRIC = 'value';
+export const DEFAULT_MAX_ARC_VALUE = 100;
+export const DEFAULT_MIN_ARC_VALUE = 0;
+export const DEFAULT_NEEDLE = false;
+export const DEFAULT_TARGET_LINE = false;
 export const DEFAULT_SCALE_TYPE = 'normal';
 export const DEFAULT_SCALE_VALUE = 100;
 export const DEFAULT_SECONDARY_COLOR = 'subSeries';

packages/docs/docs/api/visualizations/Gauge.md

@@ -0,0 +1,140 @@
+## ALPHA RELEASE 
+
+Gauge is currently in alpha. This means that the component, behavior and API are all subject to change. 
+
+```
+import { Chart, ChartProps } from '@adobe/react-spectrum-charts';
+import { Gauge, GaugeSummary, SegmentLabel } from '@adobe/react-spectrum-charts/rc';
+```
+
+# Gauge
+The `Gauge` component is used to display data in a dashboard gauge style. 
+
+## Needle 
+The gauge can draw a mark needle for progression measurement and data tracking. Disabled by default.
+
+## Target Line
+The target line shows a line representing a goal value for the metric. Disabled by default.
+
+## Performance Ranges
+The gauge can draw `performance ranges` marks for a given series of target ranges, defining color for detailed data tracking. Disabled by default.
+
+## Dynamic Labeling with unit options
+The guage label can be represented as a percentage or numeric value and resizes in relation to the needle being present. 
+
+## Props
+
+<table>
+    <thead>
+        <tr>
+            <th>name</th>
+            <th>type</th>
+            <th>default</th>
+            <th>description</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td>metric</td>
+            <td>number</td>
+            <td>'value'</td>
+            <td>The data that is used for the current value.</td>
+        </tr>
+        <tr>
+            <td>color</td>
+            <td>string</td>
+            <td>'series'</td>
+            <td>The data that is used as the color to current value.</td>
+        </tr>
+        <tr>
+            <td>name</td>
+            <td>string</td>
+            <td>'gauge0'</td>
+            <td>Sets the name of the component.</td>
+        </tr>
+        <tr>
+            <td>graphLabel</td>
+            <td>string</td>
+            <td>'graphLabel'</td>
+            <td>The data that is used as the graph label.</td>
+        </tr>
+        <tr>
+            <td>showLabel</td>
+            <td>boolean</td>
+            <td>false</td>
+            <td>Sets to show the label or not.</td>
+        </tr>
+        <tr>
+            <td>showsAsPercent</td>
+            <td>boolean</td>
+            <td>false</td>
+            <td>Sets to show the current value as a percentage or not.</td>
+        </tr>
+        <tr>
+            <td>minArcValue</td>
+            <td>number</td>
+            <td>0</td>
+            <td>Minimum value for the scale. This value must be greater than zero, and less than maxArcValue.</td>
+        </tr>
+        <tr>
+            <td>maxArcValue</td>
+            <td>number</td>
+            <td>100</td>
+            <td>Maximum value for the scale. This value must be greater than zero, and greater than minArcValue.</td>
+        </tr>
+        <tr>
+            <td>currVal</td>
+            <td>number</td>
+            <td>75</td>
+            <td>The current value tracked and its progress in the gauge. Set to 75 out of 100 by default.</td>
+        </tr>
+        <tr>
+            <td>backgroundFill</td>
+            <td>string</td>
+            <td>-</td>
+            <td>The color of the background arc.</td>
+        </tr>
+        <tr>
+            <td>backgroundStroke</td>
+            <td>string</td>
+            <td>-</td>
+            <td>The color of the background stroke.</td>
+        </tr>
+        <tr>
+            <td>fillerColorSignal</td>
+            <td>string</td>
+            <td>-</td>
+            <td>The color of the filler color arc.</td>
+        </tr>
+        <tr>
+            <td>needle</td>
+            <td>boolean</td>
+            <td>false</td>
+            <td>The needle mark for tracking progress towards a goal.</td>
+        </tr>
+        <tr>
+            <td>target</td>
+            <td>string</td>
+            <td>'target'</td>
+            <td>The data that is used as the target.</td>
+        </tr>
+        <tr>
+            <td>targetLine</td> 
+            <td>boolean</td>
+            <td>false</td>
+            <td>Shows a line for target tracking.</td>
+        </tr>
+        <tr>
+            <td>performanceRanges</td>
+            <td>-</td>
+            <td>false</td>
+            <td>Array of performance ranges to be rendered as filled bands on the gauge.</td>
+        </tr>
+        <tr>
+            <td>showPerformanceRanges</td>
+            <td>number</td>
+            <td>0</td>
+            <td>If true, show banded performance ranges instead of a colored filler arc.</td>
+        </tr>
+   </tbody>
+</table>

packages/react-spectrum-charts/src/alpha/components/Gauge/Gauge.tsx

@@ -0,0 +1,45 @@
+/*
+ * Copyright 2025 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { FC } from 'react';
+
+import {
+  DEFAULT_MAX_ARC_VALUE,
+  DEFAULT_MIN_ARC_VALUE,
+  DEFAULT_LABEL,
+  DEFAULT_NEEDLE,
+  DEFAULT_TARGET_LINE,
+} from '@spectrum-charts/constants';
+
+import { GaugeProps } from '../../../types';
+
+const Gauge: FC<GaugeProps> = ({
+  name = 'gauge0',
+  graphLabel = 'graphLabel',
+  showLabel = DEFAULT_LABEL,
+  showsAsPercent = false,
+  metric = 'currentAmount', 
+  minArcValue = DEFAULT_MIN_ARC_VALUE,
+  maxArcValue = DEFAULT_MAX_ARC_VALUE,
+  needle = DEFAULT_NEEDLE,
+  targetLine = DEFAULT_TARGET_LINE,
+  target = 'target',
+  showPerformanceRanges = false,
+}) => {
+  return null;
+};
+
+// displayName is used to validate the component type in the spec builder
+Gauge.displayName = 'Gauge';
+
+export { Gauge };

packages/react-spectrum-charts/src/alpha/components/Gauge/index.ts

@@ -0,0 +1,13 @@
+/*
+ * Copyright 2025 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+export * from './Gauge';

packages/react-spectrum-charts/src/alpha/components/index.ts

@@ -13,3 +13,4 @@
 export * from './Bullet';
 export * from './Combo';
 export * from './Venn';
+export * from './Gauge/Gauge';

packages/react-spectrum-charts/src/rscToSbAdapter/childrenAdapter.ts

@@ -18,6 +18,7 @@ import {
   ChartPopoverOptions,
   ChartTooltipOptions,
   DonutSummaryOptions,
+  GaugeOptions,
   LegendOptions,
   LineOptions,
   MarkOptions,
@@ -30,7 +31,7 @@ import {
   TrendlineOptions,
 } from '@spectrum-charts/vega-spec-builder';
 
-import { Bullet, Combo, Venn } from '../alpha';
+import { Bullet, Combo, Gauge, Venn } from '../alpha';
 import { Annotation } from '../components/Annotation';
 import { Area } from '../components/Area';
 import { Axis } from '../components/Axis';
@@ -158,6 +159,10 @@ export const childrenToOptions = (
         marks.push({ ...child.props, markType: 'bullet' } as BulletOptions);
         break;
 
+      case Gauge.displayName:
+        marks.push({ ...child.props, markType: 'gauge' } as GaugeOptions);
+        break;
+
       case ChartPopover.displayName:
         chartPopovers.push(getChartPopoverOptions(child.props as ChartPopoverProps));
         break;

packages/react-spectrum-charts/src/stories/components/Bullet/Bullet.story.tsx

@@ -39,7 +39,7 @@ const BulletStory: StoryFn<BulletProps & { width?: number; height?: number }> =
   const { width, height, ...bulletProps } = args;
   const chartProps = useChartProps({ ...defaultChartProps, width: width ?? 350, height: height ?? 350 });
   return (
-    <Chart {...chartProps}>
+    <Chart {...chartProps} debug>
       <Bullet {...bulletProps} />
     </Chart>
   );