Candle/depth chart switcher (#284)

apps/trading-e2e/src/support/mocks/generate-candles.ts

@@ -1,6 +1,9 @@
 import merge from 'lodash/merge';
 import type { PartialDeep } from 'type-fest';
-import type { Candles, Candles_market_candles } from '@vegaprotocol/chart';
+import type {
+  Candles,
+  Candles_market_candles,
+} from '@vegaprotocol/candles-chart';
 
 export const generateCandles = (override?: PartialDeep<Candles>): Candles => {
   const candles: Candles_market_candles[] = [

apps/trading-e2e/src/support/mocks/generate-chart.ts

@@ -3,7 +3,7 @@ import type { PartialDeep } from 'type-fest';
 import type {
   Chart,
   Chart_market_data_priceMonitoringBounds,
-} from '@vegaprotocol/chart';
+} from '@vegaprotocol/candles-chart';
 
 export const generateChart = (override?: PartialDeep<Chart>): Chart => {
   const priceMonitoringBound: Chart_market_data_priceMonitoringBounds = {

apps/trading/components/chart-container/button-radio.tsx

@@ -1,38 +0,0 @@
-import { Button } from '@vegaprotocol/ui-toolkit';
-
-interface ButtonRadioProps<T> {
-  name: string;
-  options: Array<{ value: T; text: string }>;
-  currentOption: T | null;
-  onSelect: (option: T) => void;
-}
-
-export const ButtonRadio = <T extends string>({
-  name,
-  options,
-  currentOption,
-  onSelect,
-}: ButtonRadioProps<T>) => {
-  return (
-    <div className="flex gap-8">
-      {options.map((option) => {
-        const isSelected = option.value === currentOption;
-        return (
-          <Button
-            onClick={() => onSelect(option.value)}
-            className="flex-1"
-            variant={isSelected ? 'accent' : undefined}
-            data-testid={
-              isSelected
-                ? `${name}-${option.value}-selected`
-                : `${name}-${option.value}`
-            }
-            key={option.value}
-          >
-            {option.text}
-          </Button>
-        );
-      })}
-    </div>
-  );
-};

apps/trading/components/chart-container/chart-container.tsx

@@ -1,39 +0,0 @@
-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>
-  );
-};

apps/trading/components/chart-container/index.ts

@@ -1 +0,0 @@
-export { ChartContainer } from './chart-container';

apps/trading/pages/markets/trade-grid.tsx

@@ -5,13 +5,14 @@ import { useState } from 'react';
 import { GridTab, GridTabs } from './grid-tabs';
 import { DealTicketContainer } from '@vegaprotocol/deal-ticket';
 import { OrderListContainer } from '@vegaprotocol/order-list';
-import { ChartContainer } from '../../components/chart-container';
 import { TradesContainer } from '@vegaprotocol/trades';
 import { Splash } from '@vegaprotocol/ui-toolkit';
 import { PositionsContainer } from '@vegaprotocol/positions';
 import type { Market_market } from './__generated__/Market';
 import { t } from '@vegaprotocol/react-helpers';
 import { AccountsContainer } from '@vegaprotocol/accounts';
+import { DepthChartContainer } from '@vegaprotocol/depth-chart';
+import { CandlesChartContainer } from '@vegaprotocol/candles-chart';
 
 const Orderbook = () => (
   <Splash>
@@ -20,7 +21,8 @@ const Orderbook = () => (
 );
 
 const TradingViews = {
-  Chart: ChartContainer,
+  Candles: CandlesChartContainer,
+  Depth: DepthChartContainer,
   Ticket: DealTicketContainer,
   Orderbook: Orderbook,
   Orders: OrderListContainer,
@@ -50,7 +52,14 @@ export const TradeGrid = ({ market }: TradeGridProps) => {
         </h1>
       </header>
       <TradeGridChild className="col-start-1 col-end-2">
-        <TradingViews.Chart marketId={market.id} />
+        <GridTabs group="chart">
+          <GridTab id="candles" name={t('Candles')}>
+            <TradingViews.Candles marketId={market.id} />
+          </GridTab>
+          <GridTab id="depth" name={t('Depth')}>
+            <TradingViews.Depth marketId={market.id} />
+          </GridTab>
+        </GridTabs>
       </TradeGridChild>
       <TradeGridChild className="row-start-1 row-end-3">
         <TradingViews.Ticket marketId={market.id} />
@@ -107,7 +116,7 @@ interface TradePanelsProps {
 }
 
 export const TradePanels = ({ market }: TradePanelsProps) => {
-  const [view, setView] = useState<TradingView>('Chart');
+  const [view, setView] = useState<TradingView>('Candles');
 
   const renderView = () => {
     const Component = TradingViews[view];

libs/candles-chart/README.md

@@ -0,0 +1,7 @@
+# candles-chart
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test candles-chart` to execute the unit tests via [Jest](https://jestjs.io).

libs/candles-chart/jest.config.js

@@ -1,10 +1,10 @@
 module.exports = {
-  displayName: 'chart',
+  displayName: 'candles-chart',
   preset: '../../jest.preset.js',
   transform: {
     '^.+\\.[tj]sx?$': 'babel-jest',
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
-  coverageDirectory: '../../coverage/libs/chart',
+  coverageDirectory: '../../coverage/libs/candles-chart',
   setupFiles: ['jest-canvas-mock'],
 };

libs/candles-chart/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "@vegaprotocol/candles-chart",
+  "version": "0.0.1"
+}

libs/candles-chart/project.json

@@ -1,6 +1,6 @@
 {
-  "root": "libs/chart",
+  "root": "libs/candles-chart",
-  "sourceRoot": "libs/chart/src",
+  "sourceRoot": "libs/candles-chart/src",
   "projectType": "library",
   "tags": [],
   "targets": {
@@ -8,16 +8,16 @@
       "executor": "@nrwl/web:rollup",
       "outputs": ["{options.outputPath}"],
       "options": {
-        "outputPath": "dist/libs/chart",
+        "outputPath": "dist/libs/candles-chart",
-        "tsConfig": "libs/chart/tsconfig.lib.json",
+        "tsConfig": "libs/candles-chart/tsconfig.lib.json",
-        "project": "libs/chart/package.json",
+        "project": "libs/candles-chart/package.json",
-        "entryFile": "libs/chart/src/index.ts",
+        "entryFile": "libs/candles-chart/src/index.ts",
         "external": ["react/jsx-runtime"],
         "rollupConfig": "@nrwl/react/plugins/bundle-rollup",
         "compiler": "babel",
         "assets": [
           {
-            "glob": "libs/chart/README.md",
+            "glob": "libs/candles-chart/README.md",
             "input": ".",
             "output": "."
           }
@@ -28,14 +28,14 @@
       "executor": "@nrwl/linter:eslint",
       "outputs": ["{options.outputFile}"],
       "options": {
-        "lintFilePatterns": ["libs/chart/**/*.{ts,tsx,js,jsx}"]
+        "lintFilePatterns": ["libs/candles-chart/**/*.{ts,tsx,js,jsx}"]
       }
     },
     "test": {
       "executor": "@nrwl/jest:jest",
-      "outputs": ["coverage/libs/chart"],
+      "outputs": ["coverage/libs/candles-chart"],
       "options": {
-        "jestConfig": "libs/chart/jest.config.js",
+        "jestConfig": "libs/candles-chart/jest.config.js",
         "passWithNoTests": true
       }
     }

libs/candles-chart/src/index.ts

@@ -1,4 +1,4 @@
-export * from './lib/trading-chart';
+export * from './lib/candles-chart';
 export * from './lib/__generated__/Candles';
 export * from './lib/__generated__/CandleFields';
 export * from './lib/__generated__/CandlesSub';

libs/candles-chart/src/lib/candles-chart.spec.tsx

@@ -1,4 +1,4 @@
-import { TradingChartContainer } from './trading-chart';
+import { CandlesChartContainer } from './candles-chart';
 import { render } from '@testing-library/react';
 import { MockedProvider } from '@apollo/client/testing';
 import { VegaWalletContext } from '@vegaprotocol/wallet';
@@ -8,7 +8,7 @@ describe('TradingChart', () => {
     const { baseElement } = render(
       <MockedProvider>
         <VegaWalletContext.Provider value={{} as never}>
-          <TradingChartContainer marketId={'market-id'} />
+          <CandlesChartContainer marketId={'market-id'} />
         </VegaWalletContext.Provider>
       </MockedProvider>
     );

libs/candles-chart/src/lib/candles-chart.tsx

@@ -1,19 +1,19 @@
 import 'pennant/dist/style.css';
 
-import { Chart as TradingChart, Interval } from 'pennant';
+import { Chart, Interval } from 'pennant';
 import { VegaDataSource } from './data-source';
 import { useApolloClient } from '@apollo/client';
 import { useContext, useMemo } from 'react';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { ThemeContext } from '@vegaprotocol/react-helpers';
 
-export type TradingChartContainerProps = {
+export type CandlesChartContainerProps = {
   marketId: string;
 };
 
-export const TradingChartContainer = ({
+export const CandlesChartContainer = ({
   marketId,
-}: TradingChartContainerProps) => {
+}: CandlesChartContainerProps) => {
   const client = useApolloClient();
   const { keypair } = useVegaWallet();
   const theme = useContext(ThemeContext);
@@ -23,10 +23,6 @@ export const TradingChartContainer = ({
   }, [client, marketId, keypair]);
 
   return (
-    <TradingChart
+    <Chart dataSource={dataSource} interval={Interval.I15M} theme={theme} />
-      dataSource={dataSource}
-      interval={Interval.I15M}
-      theme={theme}
-    />
   );
 };

libs/chart/README.md

@@ -1,7 +0,0 @@
-# chart
-
-This library was generated with [Nx](https://nx.dev).
-
-## Running unit tests
-
-Run `nx test chart` to execute the unit tests via [Jest](https://jestjs.io).

libs/chart/package.json

@@ -1,4 +0,0 @@
-{
-  "name": "@vegaprotocol/chart",
-  "version": "0.0.1"
-}

tsconfig.base.json

@@ -16,7 +16,7 @@
     "baseUrl": ".",
     "paths": {
       "@vegaprotocol/accounts": ["libs/accounts/src/index.ts"],
-      "@vegaprotocol/chart": ["libs/chart/src/index.ts"],
+      "@vegaprotocol/candles-chart": ["libs/candles-chart/src/index.ts"],
       "@vegaprotocol/cypress": ["libs/cypress/src/index.ts"],
       "@vegaprotocol/deal-ticket": ["libs/deal-ticket/src/index.ts"],
       "@vegaprotocol/deposits": ["libs/deposits/src/index.ts"],

workspace.json

@@ -2,7 +2,7 @@
   "version": 2,
   "projects": {
     "accounts": "libs/accounts",
-    "chart": "libs/chart",
+    "candles-chart": "libs/candles-chart",
     "cypress": "libs/cypress",
     "deal-ticket": "libs/deal-ticket",
     "deposits": "libs/deposits",