@automattic/charts 4.10.0 → 4.11.1

package/src/charts/heatmap-chart/private/heatmap-scale.ts

@@ -1,9 +1,14 @@
-import { MIN_BACKGROUND_CONTRAST } from '../../../providers/chart-context/private/palette-generator';
 import { contrastRatio } from '../../../providers/chart-context/private/perceptual-color';
 import { mixHexColors, relativeLuminance } from '../../../utils/color-utils';
 
+/** Contrast the lowest step aims for against the background and the empty cell. */
+export const HEATMAP_LOW_CONTRAST = 2.5;
+
+/** Contrast every step keeps against the background, and the lowest against the highest. */
+export const HEATMAP_STEP_CONTRAST = 2;
+
 /** Contrast the highest step aims for against the background, so the steps stay apart. */
-export const HEATMAP_HIGH_CONTRAST = 9;
+export const HEATMAP_HIGH_CONTRAST = 6;
 
 const STEPS = 200;
 
@@ -12,20 +17,13 @@ export type HeatmapScale = {
 	high: string;
 };
 
-// Measured on the rounded hex the browser paints, so an endpoint never lands under its threshold.
-const firstMeeting = ( from: string, to: string, meets: ( color: string ) => boolean ) => {
-	for ( let step = 0; step <= STEPS; step++ ) {
-		const color = mixHexColors( from, to, step / STEPS );
-		if ( meets( color ) ) {
-			return color;
-		}
-	}
-	return null;
-};
+// Mixed to the rounded hex the browser paints, so an endpoint never lands under its threshold.
+const ramp = ( from: string, to: string ) =>
+	Array.from( { length: STEPS + 1 }, ( _, step ) => mixHexColors( from, to, step / STEPS ) );
 
 /**
- * The two ends of the heatmap fill scale: 3:1 against the background and the empty cell at the
- * low end, toward 9:1 against the background at the high end.
+ * The two ends of the heatmap fill scale: toward 2.5:1 against the background and the empty cell at
+ * the low end, never under 2:1 against the background or the high end, and toward 6:1 at the high end.
  *
  * @param primary    - The resolved primary color, as six-digit hex.
  * @param background - The resolved chart background, as six-digit hex.
@@ -37,38 +35,45 @@ export const getHeatmapScale = (
 	background: string,
 	emptyCell?: string | null
 ): HeatmapScale => {
-	const primaryStandsOut = contrastRatio( primary, background ) >= MIN_BACKGROUND_CONTRAST;
-	// The scale deepens to black or white on the primary's own side of the background, so it never
-	// crosses it. A primary too close to the background takes whichever contrasts more.
-	const towardWhite = primaryStandsOut
-		? relativeLuminance( primary ) > relativeLuminance( background )
-		: contrastRatio( '#ffffff', background ) > contrastRatio( '#000000', background );
-	const extreme = towardWhite ? '#ffffff' : '#000000';
+	const backgroundLuminance = relativeLuminance( background );
+	const ownSide = relativeLuminance( primary ) > backgroundLuminance ? '#ffffff' : '#000000';
+	const otherSide = ownSide === '#ffffff' ? '#000000' : '#ffffff';
+	// The scale deepens on the primary's own side of the background, unless only the other side
+	// reaches the high end or contrasts more; it never crosses the background either way.
+	const extreme =
+		contrastRatio( ownSide, background ) >= HEATMAP_HIGH_CONTRAST ||
+		contrastRatio( ownSide, background ) >= contrastRatio( otherSide, background )
+			? ownSide
+			: otherSide;
+	const onExtremeSide = ( color: string ) =>
+		extreme === '#ffffff'
+			? relativeLuminance( color ) > backgroundLuminance
+			: relativeLuminance( color ) < backgroundLuminance;
 
-	const lowAgainst = ( references: string[] ) => {
-		const meets = ( color: string ) =>
-			references.every( reference => contrastRatio( color, reference ) >= MIN_BACKGROUND_CONTRAST );
-		return (
-			( primaryStandsOut ? firstMeeting( background, primary, meets ) : null ) ??
-			firstMeeting( primary, extreme, meets )
-		);
-	};
-	// Only `high` can miss: black or white tops out near 4.58:1 on a mid-tone background.
+	const deepening = ramp( primary, extreme );
+	// Only `high` can miss its target: black or white tops out near 4.58:1 on a mid-tone background.
 	const high =
-		firstMeeting(
-			primary,
-			extreme,
-			color => contrastRatio( color, background ) >= HEATMAP_HIGH_CONTRAST
-		) ?? extreme;
+		deepening.find( color => contrastRatio( color, background ) >= HEATMAP_HIGH_CONTRAST ) ??
+		extreme;
 
-	// The lowest step sits beside empty cells, so it stands apart from them too, unless an
-	// empty-cell color far from the background would push it past the high end.
-	const againstEmptyCell = emptyCell ? lowAgainst( [ background, emptyCell ] ) : null;
+	const path = [ ...ramp( background, primary ), ...deepening ];
+	// Never empty: `high` sits at least 4.58:1 out.
+	const spread = path
+		.slice( 0, path.indexOf( high ) + 1 )
+		.filter(
+			color =>
+				onExtremeSide( color ) &&
+				contrastRatio( color, background ) >= HEATMAP_STEP_CONTRAST &&
+				contrastRatio( color, high ) >= HEATMAP_STEP_CONTRAST
+		);
+	const surroundings = emptyCell ? [ background, emptyCell ] : [ background ];
+	const weakest = ( color: string ) =>
+		Math.min( ...surroundings.map( other => contrastRatio( color, other ) ) );
+	// Short of 2.5:1 the low end settles for 2:1, then for the step farthest from its nearest neighbor.
 	const low =
-		againstEmptyCell &&
-		contrastRatio( againstEmptyCell, background ) <= contrastRatio( high, background )
-			? againstEmptyCell
-			: lowAgainst( [ background ] );
+		spread.find( color => weakest( color ) >= HEATMAP_LOW_CONTRAST ) ??
+		spread.find( color => weakest( color ) >= HEATMAP_STEP_CONTRAST ) ??
+		spread.reduce( ( best, color ) => ( weakest( color ) > weakest( best ) ? color : best ) );
 
-	return { low: low ?? extreme, high };
+	return { low, high };
 };

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

@@ -486,8 +486,8 @@ describe( 'HeatmapChart', () => {
 		);
 		const grid = screen.getByRole( 'grid', { name: /heatmap/i } );
 
-		expect( grid.style.getPropertyValue( '--a8c-charts-color-heatmap-low' ) ).toBe( '#6c83ef' );
-		expect( grid.style.getPropertyValue( '--a8c-charts-color-heatmap-high' ) ).toBe( '#283ea5' );
+		expect( grid.style.getPropertyValue( '--a8c-charts-color-heatmap-low' ) ).toBe( '#7f93f1' );
+		expect( grid.style.getPropertyValue( '--a8c-charts-color-heatmap-high' ) ).toBe( '#3554df' );
 
 		document.body.removeChild( scope );
 	} );
@@ -586,7 +586,7 @@ const mockRects = () =>
 describe( 'HeatmapChart value text contrast', () => {
 	// The low end, a mid-tone, and the high end of the scale.
 	const scale: HeatmapColumn[] = [
-		{ label: 'W1', data: [ { value: 1 }, { value: 30 }, { value: 100 } ] },
+		{ label: 'W1', data: [ { value: 1 }, { value: 60 }, { value: 100 } ] },
 	];
 
 	let injectedStyle: HTMLStyleElement | null = null;
@@ -619,7 +619,7 @@ describe( 'HeatmapChart value text contrast', () => {
 	test( 'falls back to black on a mid-tone cell where neither role reaches AA', () => {
 		renderScale();
 
-		expect( screen.getByText( '30' ) ).toHaveClass( 'heatmap-chart__cell-value--black' );
+		expect( screen.getByText( '60' ) ).toHaveClass( 'heatmap-chart__cell-value--black' );
 	} );
 
 	test( 'reads the label roles once data arrives after an empty first render', () => {
@@ -691,7 +691,7 @@ describe( 'HeatmapChart value text contrast', () => {
 
 		renderScale( 'pinned-heatmap' );
 
-		[ '1', '30', '100' ].forEach( value =>
+		[ '1', '60', '100' ].forEach( value =>
 			expect( screen.getByText( value ) ).toHaveClass( 'heatmap-chart__cell-value', {
 				exact: true,
 			} )

package/src/charts/heatmap-chart/test/heatmap-scale.test.ts

@@ -1,9 +1,13 @@
-import { MIN_BACKGROUND_CONTRAST } from '../../../providers/chart-context/private/palette-generator';
 import { contrastRatio } from '../../../providers/chart-context/private/perceptual-color';
 import { mixHexColors } from '../../../utils/color-utils';
-import { getHeatmapScale, HEATMAP_HIGH_CONTRAST } from '../private/heatmap-scale';
+import {
+	getHeatmapScale,
+	HEATMAP_HIGH_CONTRAST,
+	HEATMAP_LOW_CONTRAST,
+	HEATMAP_STEP_CONTRAST,
+} from '../private/heatmap-scale';
 
-// The wp-admin scheme colors, then the pre-7.0 ones, which include a sunrise below 3:1 on white.
+// The wp-admin scheme colors, then the pre-7.0 ones.
 const PRIMARIES = [
 	'#007cba',
 	'#3858e9',
@@ -22,17 +26,17 @@ describe.each( [
 	[ 'dark', '#242424', '#272727' ],
 ] )( 'getHeatmapScale on a %s background', ( _mode, background, emptyCell ) => {
 	it.each( PRIMARIES )(
-		'keeps the lowest step of %s at 3:1 against the background and empty cell, no further',
+		'keeps the lowest step of %s at 2.5:1 against the background and empty cell, no further',
 		primary => {
 			const { low } = getHeatmapScale( primary, background, emptyCell );
 			const contrasts = [ contrastRatio( low, background ), contrastRatio( low, emptyCell ) ];
 
-			expect( Math.min( ...contrasts ) ).toBeGreaterThanOrEqual( MIN_BACKGROUND_CONTRAST );
-			expect( Math.min( ...contrasts ) ).toBeLessThan( MIN_BACKGROUND_CONTRAST + 0.1 );
+			expect( Math.min( ...contrasts ) ).toBeGreaterThanOrEqual( HEATMAP_LOW_CONTRAST );
+			expect( Math.min( ...contrasts ) ).toBeLessThan( HEATMAP_LOW_CONTRAST + 0.1 );
 		}
 	);
 
-	it.each( PRIMARIES )( 'runs the scale of %s out to 9:1', primary => {
+	it.each( PRIMARIES )( 'runs the scale of %s out to 6:1', primary => {
 		const { high } = getHeatmapScale( primary, background );
 
 		expect( contrastRatio( high, background ) ).toBeGreaterThanOrEqual( HEATMAP_HIGH_CONTRAST );
@@ -40,39 +44,63 @@ describe.each( [
 } );
 
 describe( 'getHeatmapScale', () => {
-	it( 'keeps a primary already past 9:1 as the high end', () => {
+	it( 'keeps a primary already past 6:1 as the high end', () => {
 		expect( getHeatmapScale( '#1d2327', '#ffffff' ).high ).toBe( '#1d2327' );
 	} );
 
 	it.each( [
-		[ '#ffffff', '#808080' ],
-		[ '#ffd000', '#767676' ],
-		[ '#3858e9', '#808080' ],
-		[ '#1e1e1e', '#999999' ],
-	] )( 'keeps every step of %s at 3:1 on a mid-gray %s', ( primary, background ) => {
-		const { low, high } = getHeatmapScale( primary, background );
+		[ '#ffffff', '#808080', null ],
+		[ '#ffd000', '#767676', null ],
+		[ '#3858e9', '#808080', null ],
+		[ '#1e1e1e', '#999999', null ],
+		[ '#ffd000', '#8a8a8a', null ],
+		[ '#ffd000', '#8a8a8a', '#cccccc' ],
+		[ '#1d2327', '#555555', '#272727' ],
+	] )(
+		'keeps every step of %s at 2:1 on a mid-gray %s with a %s empty cell, ends apart',
+		( primary, background, emptyCell ) => {
+			const { low, high } = getHeatmapScale( primary, background, emptyCell );
 
-		for ( let step = 0; step <= 20; step++ ) {
-			expect(
-				contrastRatio( mixHexColors( low, high, step / 20 ), background )
-			).toBeGreaterThanOrEqual( MIN_BACKGROUND_CONTRAST );
+			expect( contrastRatio( low, high ) ).toBeGreaterThanOrEqual( HEATMAP_STEP_CONTRAST );
+			for ( let step = 0; step <= 20; step++ ) {
+				expect(
+					contrastRatio( mixHexColors( low, high, step / 20 ), background )
+				).toBeGreaterThanOrEqual( HEATMAP_STEP_CONTRAST );
+			}
 		}
-	} );
+	);
 
 	it.each( [
-		[ 'no step clears it', '#ffffff', '#555555' ],
-		[ 'clearing it would pass the high end', '#ffffff', '#767676' ],
-		[ 'clearing it would pass the high end', '#1e1e1e', '#6b6b6b' ],
+		[ '#ffffff', '#cccccc' ],
+		[ '#ffffff', '#959595' ],
+		[ '#1e1e1e', '#6b6b6b' ],
 	] )(
-		'measures against the background alone when %s (%s, %s)',
-		( _case, background, emptyCell ) => {
-			expect( getHeatmapScale( '#3858e9', background, emptyCell ) ).toEqual(
-				getHeatmapScale( '#3858e9', background )
+		'moves the low end on %s farther from a %s empty cell than the background alone would',
+		( background, emptyCell ) => {
+			const { low } = getHeatmapScale( '#3858e9', background, emptyCell );
+			const backgroundOnly = getHeatmapScale( '#3858e9', background ).low;
+
+			expect( contrastRatio( low, emptyCell ) ).toBeGreaterThan(
+				contrastRatio( backgroundOnly, emptyCell )
 			);
 		}
 	);
 
-	it( 'ends on black or white when the background leaves no room for 9:1', () => {
+	it.each( [
+		[ '#ffffff', '#959595' ],
+		[ '#ffffff', '#cccccc' ],
+		[ '#1e1e1e', '#555555' ],
+	] )(
+		'keeps the ends apart and in order on %s with a %s empty cell',
+		( background, emptyCell ) => {
+			const { low, high } = getHeatmapScale( '#3858e9', background, emptyCell );
+
+			expect( contrastRatio( low, high ) ).toBeGreaterThanOrEqual( HEATMAP_STEP_CONTRAST );
+			expect( contrastRatio( low, background ) ).toBeLessThan( contrastRatio( high, background ) );
+		}
+	);
+
+	it( 'ends on black or white when the background leaves no room for 6:1', () => {
 		expect( getHeatmapScale( '#3858e9', '#808080' ).high ).toBe( '#000000' );
 	} );
 } );

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

@@ -102,7 +102,7 @@ export interface HeatmapChartProps extends Omit<
 	/** Floor a cell's height (px) in non-compact mode; see `minCellWidth`. */
 	minCellHeight?: number;
 	/**
-	 * Color the cell scale is built from, deepened at the highest value toward 9:1
+	 * Color the cell scale is built from, deepened at the highest value toward 6:1
 	 * against the background. Defaults to the first series palette slot,
 	 * `--a8c-charts-color-series-1`.
 	 */

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

@@ -747,15 +747,18 @@ describe( 'LeaderboardChart', () => {
 
 	describe( 'grid gaps', () => {
 		// eslint-disable-next-line testing-library/no-node-access -- The grid is rendered by `Grid` from @wordpress/components, which takes no test id.
-		const grid = () => document.querySelector( '[data-leaderboard-grid]' );
+		const grid = () => document.querySelector< HTMLElement >( '[data-leaderboard-grid]' );
 
 		it( 'hands the catalog role to the grid', () => {
 			render( <LeaderboardChart data={ mockData } /> );
 
-			expect( grid() ).toHaveStyle( {
-				gridRowGap: 'var(--a8c-charts-dimension-leaderboard-row-gap, 12px)',
-				gridColumnGap: 'var(--a8c-charts-dimension-leaderboard-column-gap, 4px)',
-			} );
+			// Grid writes its gaps into custom properties and reads them from a stylesheet.
+			expect( grid().style.getPropertyValue( '--wp-components-grid-row-gap' ) ).toBe(
+				'var(--a8c-charts-dimension-leaderboard-row-gap, 12px)'
+			);
+			expect( grid().style.getPropertyValue( '--wp-components-grid-column-gap' ) ).toBe(
+				'var(--a8c-charts-dimension-leaderboard-column-gap, 4px)'
+			);
 		} );
 	} );
 } );

package/src/components/legend/private/base-legend.module.scss

@@ -1,5 +1,10 @@
 .legend {
 	align-self: stretch;
+
+	&--horizontal {
+		column-gap: var(--a8c-charts-dimension-legend-column-gap);
+		row-gap: var(--a8c-charts-dimension-legend-row-gap);
+	}
 }
 
 .legend-item {

package/src/components/legend/private/base-legend.tsx

@@ -257,13 +257,19 @@ export const BaseLegend: ForwardRefExoticComponent<
 					<Stack
 						ref={ ref }
 						direction={ orientation === 'vertical' ? 'column' : 'row' }
-						gap={ orientation === 'vertical' ? 'sm' : 'lg' }
+						// Stack's gap is inline; horizontal gaps live in CSS so consumers can override them.
+						gap={ orientation === 'vertical' ? 'sm' : undefined }
 						align={ orientation === 'vertical' ? flexAlignment : undefined }
 						justify={ orientation === 'horizontal' ? flexAlignment : undefined }
 						wrap={ orientation === 'horizontal' ? 'wrap' : undefined }
 						role={ interactive ? undefined : 'list' }
 						data-testid={ `legend-${ orientation }` }
-						className={ clsx( standaloneScopeClass, styles.legend, className ) }
+						className={ clsx(
+							standaloneScopeClass,
+							styles.legend,
+							orientation === 'horizontal' && styles[ 'legend--horizontal' ],
+							className
+						) }
 						style={ theme.legend?.containerStyles }
 					>
 						{ labels.map( ( label, i ) => {

package/src/components/tooltip/_surface.scss

@@ -0,0 +1,19 @@
+// The chart tooltip box: the look every chart tooltip shares.
+@mixin surface {
+	padding: var(--wpds-dimension-padding-xs) var(--wpds-dimension-padding-sm);
+	background-color: var(--a8c-charts-color-surface);
+	color: var(--a8c-charts-color-label);
+	border-radius: var(--wpds-border-radius-md);
+	font-family: var(--wpds-typography-font-family-body);
+	font-size: var(--wpds-typography-font-size-sm);
+	line-height: 1.4;
+	box-shadow: var(--a8c-charts-elevation-sm, 0 1px 2px 0 #0000000d, 0 2px 3px 0 #0000000a, 0 6px 6px 0 #00000008, 0 8px 8px 0 #00000005);
+	pointer-events: none;
+	// Beats a host `max-width` on `.visx-tooltip`, even an `!important`
+	// one: WordPress.com's Help Center caps it at 150px.
+	min-width: fit-content;
+
+	@media (forced-colors: active) {
+		border: var(--wpds-border-width-xs) solid CanvasText;
+	}
+}

package/src/components/tooltip/private/bounded-tooltip.tsx

@@ -17,7 +17,7 @@ export type BoundedTooltipProps = Omit< TooltipBoxProps, 'children' > & {
 	placement?: TooltipPlacement;
 };
 
-const DEFAULT_OFFSET = 10;
+export const DEFAULT_OFFSET = 10;
 // Above anything else layered inside a chart, such as the zoom reset button (2).
 // Chart wrappers isolate their stacking context, so it never reaches page chrome.
 export const TOOLTIP_Z_INDEX = 3;
@@ -43,7 +43,7 @@ const findLayoutParent = ( node: Element ): Element | null => {
 // The first ancestor that cuts its overflow off. The box may leave the chart
 // wrapper but never this element, which is what a body-level portal used to
 // guarantee by never being inside one.
-const findClippingAncestor = ( wrapper: Element ): Element | null => {
+export const findClippingAncestor = ( wrapper: Element ): Element | null => {
 	let element = wrapper.parentElement;
 	while ( element && element !== document.body ) {
 		if ( isClipping( element ) ) {

package/src/components/tooltip/tooltip-box.module.scss

@@ -1,21 +1,7 @@
 // `.surface` is the look alone, for a chart that positions the box itself.
-// The box carries the tooltip scope class inside TooltipTheme, so these roles
-// resolve for the dark tooltip theme, as in @wordpress/ui's Tooltip popup.
+@use "surface";
+
 .surface {
-	padding: var(--wpds-dimension-padding-xs) var(--wpds-dimension-padding-sm);
-	background-color: var(--a8c-charts-color-surface);
-	color: var(--a8c-charts-color-label);
-	border-radius: var(--wpds-border-radius-md);
-	font-family: var(--wpds-typography-font-family-body);
-	font-size: var(--wpds-typography-font-size-sm);
-	line-height: 1.4;
-	box-shadow: var(--a8c-charts-elevation-sm, 0 1px 2px 0 #0000000d, 0 2px 3px 0 #0000000a, 0 6px 6px 0 #00000008, 0 8px 8px 0 #00000005);
-	pointer-events: none;
-	// Beats a host `max-width` on `.visx-tooltip`, even an `!important`
-	// one: WordPress.com's Help Center caps it at 150px.
-	min-width: fit-content;
 
-	@media (forced-colors: active) {
-		border: var(--wpds-border-width-xs) solid CanvasText;
-	}
+	@include surface.surface;
 }

package/src/styles/chart-scope.scss

@@ -10,9 +10,9 @@
 // the same element wins. Chart roots deliberately do NOT re-declare these: an
 // element's own declaration beats an inherited one, so re-declaring lower down
 // would shadow a consumer override set inside the provider tree.
-// The tooltip box re-declares the catalog under its own class, so a rule on
-// .a8c-charts-scope does not land on the dark box.
-:where(.a8c-charts-scope, .a8c-charts-tooltip-scope) {
+// The tooltip boxes (ours and Google's GeoChart one) re-declare the catalog on
+// themselves, so a rule on .a8c-charts-scope does not land on the dark box.
+:where(.a8c-charts-scope, .a8c-charts-tooltip-scope, .geo-chart .google-visualization-tooltip) {
 	// The series palette. GlobalChartsProvider resolves these five slots at its
 	// wrapper and seeds ColorCache with whatever resolves; a slot that resolves
 	// to nothing is skipped, so setting only slots 1 and 3 gives a two-color
@@ -87,11 +87,13 @@
 
 	--a8c-charts-dimension-leaderboard-row-gap: var(--wpds-dimension-gap-md);
 	--a8c-charts-dimension-leaderboard-column-gap: var(--wpds-dimension-gap-xs);
+	--a8c-charts-dimension-legend-column-gap: var(--wpds-dimension-gap-lg);
+	--a8c-charts-dimension-legend-row-gap: var(--wpds-dimension-gap-sm);
 }
 
 @media (forced-colors: active) {
 
-	:where(.a8c-charts-scope, .a8c-charts-tooltip-scope) {
+	:where(.a8c-charts-scope, .a8c-charts-tooltip-scope, .geo-chart .google-visualization-tooltip) {
 		--a8c-charts-color-label-axis: CanvasText;
 		--a8c-charts-color-grid: GrayText;
 		--a8c-charts-color-axis-x: GrayText;

package/src/styles/test/chart-scope.test.ts

@@ -127,7 +127,9 @@ describe( 'chart scope catalog', () => {
 			expect( mediaRules[ 0 ].cssRules ).toHaveLength( 1 );
 
 			const rule = mediaRules[ 0 ].cssRules[ 0 ] as CSSStyleRule;
-			expect( rule.selectorText ).toBe( ':where(.a8c-charts-scope, .a8c-charts-tooltip-scope)' );
+			expect( rule.selectorText ).toBe(
+				':where(.a8c-charts-scope, .a8c-charts-tooltip-scope, .geo-chart .google-visualization-tooltip)'
+			);
 			expect(
 				Object.fromEntries(
 					Array.from( rule.style ).map( property => [
@@ -172,7 +174,9 @@ describe( 'chart scope catalog', () => {
 	} );
 
 	it( 'scopes the catalog to the chart and tooltip scope classes rather than :root', () => {
-		expect( stylesheet ).toMatch( /:where\(\.a8c-charts-scope, \.a8c-charts-tooltip-scope\)\s*{/ );
+		expect( stylesheet ).toMatch(
+			/:where\(\.a8c-charts-scope, \.a8c-charts-tooltip-scope, \.geo-chart \.google-visualization-tooltip\)\s*{/
+		);
 		expect( stylesheet ).not.toMatch( /(^|\s):root\s*{/ );
 	} );