Organize LineChart types and exports

Author: adamwoodnz

projects/js-packages/charts/src/components/line-chart/index.tsx

@@ -1,8 +1,9 @@
 export { default as LineChart } from './line-chart';
 export type {
+	AnnotationStyles,
+	LineChartAnnotationProps,
 	RenderLineStartGlyphProps,
 	LineChartProps,
 	TooltipDatum,
 	CurveType,
-} from './line-chart';
-export type { AnnotationStyles } from './types';
+} from './types';

projects/js-packages/charts/src/components/line-chart/line-chart.tsx

@@ -27,21 +27,16 @@ import { withResponsive } from '../private/with-responsive';
 import { AccessibleTooltip, useKeyboardNavigation } from '../tooltip';
 import styles from './line-chart.module.scss';
 import { LineChartAnnotation, LineChartAnnotationsOverlay } from './private';
-import type { BaseChartProps, DataPoint, DataPointDate, SeriesData, Optional } from '../../types';
+import type { CurveType, RenderLineStartGlyphProps, LineChartProps, TooltipDatum } from './types';
+import type { DataPoint, DataPointDate, SeriesData, Optional } from '../../types';
 import type { ResponsiveConfig } from '../private/with-responsive';
 import type { TickFormatter } from '@visx/axis';
 import type { GlyphProps } from '@visx/xychart';
 import type { RenderTooltipParams } from '@visx/xychart/lib/components/Tooltip';
 import type { FC, ReactNode, Ref, SVGProps } from 'react';
 
-export type CurveType = 'smooth' | 'linear' | 'monotone';
-
 const X_TICK_WIDTH = 100;
 
-export type RenderLineStartGlyphProps< Datum extends object > = GlyphProps< Datum > & {
-	glyphStyle?: SVGProps< SVGCircleElement >;
-};
-
 const defaultRenderGlyph = < Datum extends object >(
 	props: RenderLineStartGlyphProps< Datum >
 ) => {
@@ -116,27 +111,6 @@ const getCurveType = ( type?: CurveType, smoothing?: boolean ) => {
 	}
 };
 
-export interface LineChartProps extends BaseChartProps< SeriesData[] > {
-	withGradientFill: boolean;
-	smoothing?: boolean;
-	curveType?: CurveType;
-	renderTooltip?: ( params: RenderTooltipParams< DataPointDate > ) => ReactNode;
-	withStartGlyphs?: boolean;
-	renderGlyph?: < Datum extends object >( props: GlyphProps< Datum > ) => ReactNode;
-	glyphStyle?: SVGProps< SVGCircleElement >;
-	withLegendGlyph?: boolean;
-	withTooltipCrosshairs?: {
-		showVertical?: boolean;
-		showHorizontal?: boolean;
-	};
-	children?: ReactNode;
-}
-
-export type TooltipDatum = {
-	key: string;
-	value: number;
-};
-
 const renderDefaultTooltip = ( params: RenderTooltipParams< DataPointDate > ) => {
 	const { tooltipData } = params;
 	const nearestDatum = tooltipData?.nearestDatum?.datum;

projects/js-packages/charts/src/components/line-chart/private/line-chart-annotation.tsx

@@ -14,8 +14,7 @@ import { isSafari } from '../../../utils';
 import LineChartAnnotationLabelWithPopover, {
 	POPOVER_BUTTON_SIZE,
 } from './line-chart-annotation-label-popover';
-import type { DataPointDate } from '../../../types';
-import type { AnnotationStyles } from '../types';
+import type { LineChartAnnotationProps } from '../types';
 import type { LabelProps } from '@visx/annotation/lib/components/Label';
 import type { TextProps } from '@visx/text';
 import type { FC } from 'react';
@@ -25,17 +24,6 @@ type SubjectType = 'circle' | 'line-vertical' | 'line-horizontal';
 const ANNOTATION_MAX_WIDTH = 125; // visx default
 const ANNOTATION_INIT_HEIGHT = 100;
 
-export type LineChartAnnotationProps = {
-	datum: DataPointDate;
-	title: string;
-	subtitle?: string;
-	subjectType?: SubjectType;
-	styles?: AnnotationStyles;
-	testId?: string;
-	renderLabel?: FC< { title: string; subtitle?: string } >;
-	renderLabelPopover?: FC< { title: string; subtitle?: string } >;
-};
-
 export const getLabelPosition = ( {
 	subjectType,
 	x,

projects/js-packages/charts/src/components/line-chart/types.ts

@@ -1,7 +1,11 @@
-import type { CircleSubjectProps } from '@visx/annotation/lib/components/CircleSubject';
-import type { ConnectorProps } from '@visx/annotation/lib/components/Connector';
-import type { LabelProps } from '@visx/annotation/lib/components/Label';
-import type { LineSubjectProps } from '@visx/annotation/lib/components/LineSubject';
+import { CircleSubjectProps } from '@visx/annotation/lib/components/CircleSubject';
+import { ConnectorProps } from '@visx/annotation/lib/components/Connector';
+import { LabelProps } from '@visx/annotation/lib/components/Label';
+import { LineSubjectProps } from '@visx/annotation/lib/components/LineSubject';
+import type { BaseChartProps, DataPointDate, SeriesData } from '../../types';
+import type { GlyphProps } from '@visx/xychart';
+import type { RenderTooltipParams } from '@visx/xychart/lib/components/Tooltip';
+import type { ReactNode, SVGProps, FC } from 'react';
 
 export type AnnotationStyles = {
 	circleSubject?: Omit< CircleSubjectProps, 'x' | 'y' > & { fill?: string };
@@ -12,3 +16,41 @@ export type AnnotationStyles = {
 		y?: number | 'start' | 'end';
 	};
 };
+
+export type LineChartAnnotationProps = {
+	datum: DataPointDate;
+	title: string;
+	subtitle?: string;
+	subjectType?: 'circle' | 'line-vertical' | 'line-horizontal';
+	styles?: AnnotationStyles;
+	testId?: string;
+	renderLabel?: FC< { title: string; subtitle?: string } >;
+	renderLabelPopover?: FC< { title: string; subtitle?: string } >;
+};
+
+export type CurveType = 'smooth' | 'linear' | 'monotone';
+
+export type RenderLineStartGlyphProps< Datum extends object > = GlyphProps< Datum > & {
+	glyphStyle?: SVGProps< SVGCircleElement >;
+};
+
+export interface LineChartProps extends BaseChartProps< SeriesData[] > {
+	withGradientFill: boolean;
+	smoothing?: boolean;
+	curveType?: CurveType;
+	renderTooltip?: ( params: RenderTooltipParams< DataPointDate > ) => ReactNode;
+	withStartGlyphs?: boolean;
+	renderGlyph?: < Datum extends object >( props: GlyphProps< Datum > ) => ReactNode;
+	glyphStyle?: SVGProps< SVGCircleElement >;
+	withLegendGlyph?: boolean;
+	withTooltipCrosshairs?: {
+		showVertical?: boolean;
+		showHorizontal?: boolean;
+	};
+	children?: ReactNode;
+}
+
+export type TooltipDatum = {
+	key: string;
+	value: number;
+};

projects/js-packages/charts/src/components/private/default-glyph/default-glyph.tsx

@@ -1,6 +1,6 @@
 import { DataContext } from '@visx/xychart';
 import { useContext } from 'react';
-import type { RenderLineStartGlyphProps } from '../../line-chart/line-chart';
+import type { RenderLineStartGlyphProps } from '../../line-chart';
 
 export const DefaultGlyph = < Datum extends object >(
 	props: RenderLineStartGlyphProps< Datum >