diff --git a/projects/ui/src/components/Analytics/Bean/Price.tsx b/projects/ui/src/components/Analytics/Bean/Price.tsx index 336a1714fe..b48f78acb3 100644 --- a/projects/ui/src/components/Analytics/Bean/Price.tsx +++ b/projects/ui/src/components/Analytics/Bean/Price.tsx @@ -19,7 +19,7 @@ const statProps = { gap: 0.25, }; const lineChartProps: Partial = { - isTWAP: true, + pegLine: true, yTickFormat: tickFormatBeanPrice, }; diff --git a/projects/ui/src/components/Common/Charts/ChartPropProvider.tsx b/projects/ui/src/components/Common/Charts/ChartPropProvider.tsx index 774844e7ec..bd06ef5b84 100644 --- a/projects/ui/src/components/Common/Charts/ChartPropProvider.tsx +++ b/projects/ui/src/components/Common/Charts/ChartPropProvider.tsx @@ -105,6 +105,7 @@ type UtilProps = { width: number, keys: string[], stackedArea?: boolean, + pegLine?: boolean, isTWAP?: boolean ) => Scales[]; getPointerValue: ( @@ -136,6 +137,7 @@ export type BaseChartProps = { keys: string[]; curve?: CurveFactory | keyof typeof CURVES; scale?: keyof typeof SCALES; + pegLine?: boolean; isTWAP?: boolean; horizontalLineNumber?: number; stylesConfig?: ChartMultiStyles; @@ -389,6 +391,7 @@ const generateScale = ( width: number, keys: string[], isStackedArea?: boolean, + pegLine?: boolean, isTWAP?: boolean ) => seriesData.map((data) => { diff --git a/projects/ui/src/components/Common/Charts/LineChart.tsx b/projects/ui/src/components/Common/Charts/LineChart.tsx index b9dd4b3bed..3ea676ad8d 100644 --- a/projects/ui/src/components/Common/Charts/LineChart.tsx +++ b/projects/ui/src/components/Common/Charts/LineChart.tsx @@ -50,6 +50,7 @@ export type DataRegion = { export type LineChartProps = { series: BaseDataPoint[][]; onCursor?: (ds?: BaseDataPoint[]) => void; + pegLine?: boolean; // used to display a line at the $1 peg isTWAP?: boolean; // used to indicate if we are displaying TWAP price curve?: CurveFactory | keyof typeof CURVES; children?: ( @@ -103,6 +104,7 @@ const Graph: React.FC = (props) => { // Line Chart Props series: _series, onCursor, + pegLine, isTWAP, curve: _curve = 'linear', children, @@ -234,7 +236,7 @@ const Graph: React.FC = (props) => { width={width - yAxisWidth} height={dataRegion.yBottom - dataRegion.yTop} > - {isTWAP && ( + {(isTWAP || pegLine) && ( = (props) => { // Line Chart Props series, onCursor, + pegLine, isTWAP, curve: _curve, children, @@ -170,7 +171,7 @@ const MultiLineChartInner: React.FC = (props) => { height={dataRegion.yBottom - dataRegion.yTop} > {/** Add TWAP line */} - {isTWAP && ( + {(isTWAP || pegLine) && ( = dateKey?: 'timestamp' | 'createdAt'; queryConfig?: Partial; StatProps: Omit; - LineChartProps?: Pick; + LineChartProps?: Pick; statsRowFullWidth?: boolean; };