f721a21d0f
* initial commit for adding chartt lib with pennant chart * add pennant package, fix dynamic import of chart * use updated pennant library * Create separate chart and depth-chart libs * Remove leftover generated files * Use more targeted queries and subscriptions * Fix jestConfig value for depth-chart * Add jest-canvas-mock * Refactor updateDepthUpdate function * Add updateDpethUpdate test * Add jest-canvas-mock to chart tests * Avoid using any type in test * Use correct casing for gql queries and subscriptions * Make ButtonRadio generic in option value type * Add padding and margin to chart container * Remove unused subscriptions and methods from data source * Use correct React imports Co-authored-by: Matthew Russell <mattrussell36@gmail.com>
40 lines
1.1 KiB
TypeScript
40 lines
1.1 KiB
TypeScript
import { ButtonRadio } from './button-radio';
|
|
import { DepthChartContainer } from '@vegaprotocol/depth-chart';
|
|
import { TradingChartContainer } from '@vegaprotocol/chart';
|
|
import { useState } from 'react';
|
|
|
|
type ChartType = 'depth' | 'trading';
|
|
|
|
interface ChartContainerProps {
|
|
marketId: string;
|
|
}
|
|
|
|
export const ChartContainer = ({ marketId }: ChartContainerProps) => {
|
|
const [chartType, setChartType] = useState<ChartType>('trading');
|
|
|
|
return (
|
|
<div className="px-4 py-8 flex flex-col h-full">
|
|
<div className="mb-4">
|
|
<ButtonRadio
|
|
name="chart-type"
|
|
options={[
|
|
{ text: 'Trading view', value: 'trading' },
|
|
{ text: 'Depth', value: 'depth' },
|
|
]}
|
|
currentOption={chartType}
|
|
onSelect={(value) => {
|
|
setChartType(value);
|
|
}}
|
|
/>
|
|
</div>
|
|
<div className="flex-1">
|
|
{chartType === 'trading' ? (
|
|
<TradingChartContainer marketId={marketId} />
|
|
) : (
|
|
<DepthChartContainer marketId={marketId} />
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|