@automattic/charts 4.5.0 → 4.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/charts",
-	"version": "4.5.0",
+	"version": "4.6.0",
 	"description": "Display charts within Automattic products.",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/charts/#readme",
 	"bugs": {

package/src/charts/geo-chart/geo-chart.tsx

@@ -130,6 +130,7 @@ function normalizeGeoChartError( eventArgs: unknown ): GeoChartError {
  * @param props.height            - Height of the chart in pixels
  * @param props.region            - Region to display ('world', 'US', or ISO 3166-1 alpha-2 code)
  * @param props.resolution        - Resolution level ('countries', 'provinces', or 'metros')
+ * @param props.displayMode       - Plot rows as shaded areas ('regions') or markers ('markers')
  * @param props.domain            - Country code whose viewpoint sets the disputed borders
  * @param props.onError           - Optional callback for Google Charts errors
  * @param props.className         - Additional CSS class name for the chart container
@@ -143,6 +144,7 @@ const GeoChartInternal: FC< GeoChartProps > = ( {
 	height,
 	region = 'world',
 	resolution = 'countries',
+	displayMode = 'regions',
 	domain,
 	onError,
 	renderPlaceholder,
@@ -264,6 +266,7 @@ const GeoChartInternal: FC< GeoChartProps > = ( {
 		() => ( {
 			...( region !== 'world' && { region } ),
 			...( resolution !== 'countries' && { resolution } ),
+			...( displayMode !== 'regions' && { displayMode } ),
 			...( domain && { domain } ),
 			colorAxis: { colors: [ lightColorHex, fullColorHex ] },
 			backgroundColor: backgroundColorHex,
@@ -276,6 +279,7 @@ const GeoChartInternal: FC< GeoChartProps > = ( {
 		[
 			region,
 			resolution,
+			displayMode,
 			domain,
 			lightColorHex,
 			fullColorHex,

package/src/charts/geo-chart/index.ts

@@ -1,2 +1,8 @@
 export { default as GeoChart, GeoChartUnresponsive } from './geo-chart';
-export type { GeoChartProps, GeoRegion, GeoResolution, GeoChartError } from './types';
+export type {
+	GeoChartProps,
+	GeoRegion,
+	GeoResolution,
+	GeoDisplayMode,
+	GeoChartError,
+} from './types';

package/src/charts/geo-chart/test/geo-chart.test.tsx

@@ -224,6 +224,14 @@ describe( 'GeoChart', () => {
 			expect( options.domain ).toBe( 'IN' );
 		} );
 
+		test( 'passes the markers display mode so rows draw as points, not shaded areas', () => {
+			renderWithTheme( { displayMode: 'markers' } );
+
+			const options = JSON.parse( screen.getByTestId( 'chart-options' ).textContent || '{}' );
+
+			expect( options.displayMode ).toBe( 'markers' );
+		} );
+
 		test( 'does not include resolution in options when set to countries (default)', () => {
 			renderWithTheme();
 

package/src/charts/geo-chart/types.ts

@@ -15,6 +15,13 @@ export type GeoRegion = 'world' | ( string & {} );
  */
 export type GeoResolution = 'countries' | 'provinces' | 'metros';
 
+/**
+ * How the map plots its rows.
+ * - 'regions': Shades each area the rows name
+ * - 'markers': Draws a sized, colored circle per row; a row can name a place or give `[ latitude, longitude ]` as its first two columns
+ */
+export type GeoDisplayMode = 'regions' | 'markers';
+
 export interface GeoChartError {
 	id?: string;
 	message?: string;
@@ -48,6 +55,11 @@ export interface GeoChartProps extends Pick<
 	 * @default 'countries'
 	 */
 	resolution?: GeoResolution;
+	/**
+	 * How the map plots its rows: shaded areas, or one marker per row.
+	 * @default 'regions'
+	 */
+	displayMode?: GeoDisplayMode;
 	/**
 	 * ISO 3166-1 alpha-2 code of the country whose viewpoint sets the disputed borders
 	 * (e.g., 'IN' draws Kashmir as India shows it). Google's default borders apply when omitted.

package/src/index.ts

@@ -82,7 +82,13 @@ export type {
 	PieSemiCircleChartProps,
 	PieSemiCircleChartRenderTooltipParams,
 } from './charts/pie-semi-circle-chart';
-export type { GeoChartProps, GeoRegion, GeoResolution, GeoChartError } from './charts/geo-chart';
+export type {
+	GeoChartProps,
+	GeoRegion,
+	GeoResolution,
+	GeoDisplayMode,
+	GeoChartError,
+} from './charts/geo-chart';
 export type { LegendValueDisplay, BaseLegendItem } from './components/legend';
 export type { TrendIndicatorProps, TrendDirection } from './components/trend-indicator';
 export type { LineStyles, GridStyles, EventHandlerParams } from '@visx/xychart';