From ba19b5acca713bd337364c8603b6de0d63533322 Mon Sep 17 00:00:00 2001 From: John Walley Date: Mon, 25 Apr 2022 18:34:07 +0100 Subject: [PATCH] Candle/depth chart switcher (#284) --- .../src/support/mocks/generate-candles.ts | 5 ++- .../src/support/mocks/generate-chart.ts | 2 +- .../chart-container/button-radio.tsx | 38 ------------------ .../chart-container/chart-container.tsx | 39 ------------------- .../components/chart-container/index.ts | 1 - apps/trading/pages/markets/trade-grid.tsx | 17 ++++++-- libs/{chart => candles-chart}/.babelrc | 0 libs/{chart => candles-chart}/.eslintrc.json | 0 libs/candles-chart/README.md | 7 ++++ libs/{chart => candles-chart}/jest.config.js | 4 +- libs/candles-chart/package.json | 4 ++ libs/{chart => candles-chart}/project.json | 20 +++++----- libs/{chart => candles-chart}/src/index.ts | 2 +- .../src/lib/__generated__/CandleFields.ts | 0 .../src/lib/__generated__/Candles.ts | 0 .../src/lib/__generated__/CandlesSub.ts | 0 .../src/lib/__generated__/Chart.ts | 0 .../src/lib/candles-chart.spec.tsx} | 4 +- .../src/lib/candles-chart.tsx} | 14 +++---- .../src/lib/data-source.ts | 0 libs/{chart => candles-chart}/tsconfig.json | 0 .../tsconfig.lib.json | 0 .../tsconfig.spec.json | 0 libs/chart/README.md | 7 ---- libs/chart/package.json | 4 -- tsconfig.base.json | 2 +- workspace.json | 2 +- 27 files changed, 51 insertions(+), 121 deletions(-) delete mode 100644 apps/trading/components/chart-container/button-radio.tsx delete mode 100644 apps/trading/components/chart-container/chart-container.tsx delete mode 100644 apps/trading/components/chart-container/index.ts rename libs/{chart => candles-chart}/.babelrc (100%) rename libs/{chart => candles-chart}/.eslintrc.json (100%) create mode 100644 libs/candles-chart/README.md rename libs/{chart => candles-chart}/jest.config.js (68%) create mode 100644 libs/candles-chart/package.json rename libs/{chart => candles-chart}/project.json (56%) rename libs/{chart => candles-chart}/src/index.ts (83%) rename libs/{chart => candles-chart}/src/lib/__generated__/CandleFields.ts (100%) rename libs/{chart => candles-chart}/src/lib/__generated__/Candles.ts (100%) rename libs/{chart => candles-chart}/src/lib/__generated__/CandlesSub.ts (100%) rename libs/{chart => candles-chart}/src/lib/__generated__/Chart.ts (100%) rename libs/{chart/src/lib/trading-chart.spec.tsx => candles-chart/src/lib/candles-chart.spec.tsx} (80%) rename libs/{chart/src/lib/trading-chart.tsx => candles-chart/src/lib/candles-chart.tsx} (67%) rename libs/{chart => candles-chart}/src/lib/data-source.ts (100%) rename libs/{chart => candles-chart}/tsconfig.json (100%) rename libs/{chart => candles-chart}/tsconfig.lib.json (100%) rename libs/{chart => candles-chart}/tsconfig.spec.json (100%) delete mode 100644 libs/chart/README.md delete mode 100644 libs/chart/package.json diff --git a/apps/trading-e2e/src/support/mocks/generate-candles.ts b/apps/trading-e2e/src/support/mocks/generate-candles.ts index 253315b34..32bd97d29 100644 --- a/apps/trading-e2e/src/support/mocks/generate-candles.ts +++ b/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 => { const candles: Candles_market_candles[] = [ diff --git a/apps/trading-e2e/src/support/mocks/generate-chart.ts b/apps/trading-e2e/src/support/mocks/generate-chart.ts index 928437e5a..f80db6353 100644 --- a/apps/trading-e2e/src/support/mocks/generate-chart.ts +++ b/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 => { const priceMonitoringBound: Chart_market_data_priceMonitoringBounds = { diff --git a/apps/trading/components/chart-container/button-radio.tsx b/apps/trading/components/chart-container/button-radio.tsx deleted file mode 100644 index 9e56578fd..000000000 --- a/apps/trading/components/chart-container/button-radio.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import { Button } from '@vegaprotocol/ui-toolkit'; - -interface ButtonRadioProps { - name: string; - options: Array<{ value: T; text: string }>; - currentOption: T | null; - onSelect: (option: T) => void; -} - -export const ButtonRadio = ({ - name, - options, - currentOption, - onSelect, -}: ButtonRadioProps) => { - return ( -
- {options.map((option) => { - const isSelected = option.value === currentOption; - return ( - - ); - })} -
- ); -}; diff --git a/apps/trading/components/chart-container/chart-container.tsx b/apps/trading/components/chart-container/chart-container.tsx deleted file mode 100644 index 196368629..000000000 --- a/apps/trading/components/chart-container/chart-container.tsx +++ /dev/null @@ -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('trading'); - - return ( -
-
- { - setChartType(value); - }} - /> -
-
- {chartType === 'trading' ? ( - - ) : ( - - )} -
-
- ); -}; diff --git a/apps/trading/components/chart-container/index.ts b/apps/trading/components/chart-container/index.ts deleted file mode 100644 index 62a28d63d..000000000 --- a/apps/trading/components/chart-container/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { ChartContainer } from './chart-container'; diff --git a/apps/trading/pages/markets/trade-grid.tsx b/apps/trading/pages/markets/trade-grid.tsx index f1eee09a7..c966c5ecc 100644 --- a/apps/trading/pages/markets/trade-grid.tsx +++ b/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 = () => ( @@ -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) => { - + + + + + + + + @@ -107,7 +116,7 @@ interface TradePanelsProps { } export const TradePanels = ({ market }: TradePanelsProps) => { - const [view, setView] = useState('Chart'); + const [view, setView] = useState('Candles'); const renderView = () => { const Component = TradingViews[view]; diff --git a/libs/chart/.babelrc b/libs/candles-chart/.babelrc similarity index 100% rename from libs/chart/.babelrc rename to libs/candles-chart/.babelrc diff --git a/libs/chart/.eslintrc.json b/libs/candles-chart/.eslintrc.json similarity index 100% rename from libs/chart/.eslintrc.json rename to libs/candles-chart/.eslintrc.json diff --git a/libs/candles-chart/README.md b/libs/candles-chart/README.md new file mode 100644 index 000000000..2bd60ca8f --- /dev/null +++ b/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). diff --git a/libs/chart/jest.config.js b/libs/candles-chart/jest.config.js similarity index 68% rename from libs/chart/jest.config.js rename to libs/candles-chart/jest.config.js index ecbda45e5..4b3e11094 100644 --- a/libs/chart/jest.config.js +++ b/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'], }; diff --git a/libs/candles-chart/package.json b/libs/candles-chart/package.json new file mode 100644 index 000000000..b7419a4a2 --- /dev/null +++ b/libs/candles-chart/package.json @@ -0,0 +1,4 @@ +{ + "name": "@vegaprotocol/candles-chart", + "version": "0.0.1" +} diff --git a/libs/chart/project.json b/libs/candles-chart/project.json similarity index 56% rename from libs/chart/project.json rename to libs/candles-chart/project.json index 8dcf7520e..8194b2948 100644 --- a/libs/chart/project.json +++ b/libs/candles-chart/project.json @@ -1,6 +1,6 @@ { - "root": "libs/chart", - "sourceRoot": "libs/chart/src", + "root": "libs/candles-chart", + "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", - "tsConfig": "libs/chart/tsconfig.lib.json", - "project": "libs/chart/package.json", - "entryFile": "libs/chart/src/index.ts", + "outputPath": "dist/libs/candles-chart", + "tsConfig": "libs/candles-chart/tsconfig.lib.json", + "project": "libs/candles-chart/package.json", + "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 } } diff --git a/libs/chart/src/index.ts b/libs/candles-chart/src/index.ts similarity index 83% rename from libs/chart/src/index.ts rename to libs/candles-chart/src/index.ts index ad81b0c3d..d712d9912 100644 --- a/libs/chart/src/index.ts +++ b/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'; diff --git a/libs/chart/src/lib/__generated__/CandleFields.ts b/libs/candles-chart/src/lib/__generated__/CandleFields.ts similarity index 100% rename from libs/chart/src/lib/__generated__/CandleFields.ts rename to libs/candles-chart/src/lib/__generated__/CandleFields.ts diff --git a/libs/chart/src/lib/__generated__/Candles.ts b/libs/candles-chart/src/lib/__generated__/Candles.ts similarity index 100% rename from libs/chart/src/lib/__generated__/Candles.ts rename to libs/candles-chart/src/lib/__generated__/Candles.ts diff --git a/libs/chart/src/lib/__generated__/CandlesSub.ts b/libs/candles-chart/src/lib/__generated__/CandlesSub.ts similarity index 100% rename from libs/chart/src/lib/__generated__/CandlesSub.ts rename to libs/candles-chart/src/lib/__generated__/CandlesSub.ts diff --git a/libs/chart/src/lib/__generated__/Chart.ts b/libs/candles-chart/src/lib/__generated__/Chart.ts similarity index 100% rename from libs/chart/src/lib/__generated__/Chart.ts rename to libs/candles-chart/src/lib/__generated__/Chart.ts diff --git a/libs/chart/src/lib/trading-chart.spec.tsx b/libs/candles-chart/src/lib/candles-chart.spec.tsx similarity index 80% rename from libs/chart/src/lib/trading-chart.spec.tsx rename to libs/candles-chart/src/lib/candles-chart.spec.tsx index 1df77efa4..b0a5f2d18 100644 --- a/libs/chart/src/lib/trading-chart.spec.tsx +++ b/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( - + ); diff --git a/libs/chart/src/lib/trading-chart.tsx b/libs/candles-chart/src/lib/candles-chart.tsx similarity index 67% rename from libs/chart/src/lib/trading-chart.tsx rename to libs/candles-chart/src/lib/candles-chart.tsx index 302f31f03..a74567ac5 100644 --- a/libs/chart/src/lib/trading-chart.tsx +++ b/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 ( - + ); }; diff --git a/libs/chart/src/lib/data-source.ts b/libs/candles-chart/src/lib/data-source.ts similarity index 100% rename from libs/chart/src/lib/data-source.ts rename to libs/candles-chart/src/lib/data-source.ts diff --git a/libs/chart/tsconfig.json b/libs/candles-chart/tsconfig.json similarity index 100% rename from libs/chart/tsconfig.json rename to libs/candles-chart/tsconfig.json diff --git a/libs/chart/tsconfig.lib.json b/libs/candles-chart/tsconfig.lib.json similarity index 100% rename from libs/chart/tsconfig.lib.json rename to libs/candles-chart/tsconfig.lib.json diff --git a/libs/chart/tsconfig.spec.json b/libs/candles-chart/tsconfig.spec.json similarity index 100% rename from libs/chart/tsconfig.spec.json rename to libs/candles-chart/tsconfig.spec.json diff --git a/libs/chart/README.md b/libs/chart/README.md deleted file mode 100644 index 159ae9943..000000000 --- a/libs/chart/README.md +++ /dev/null @@ -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). diff --git a/libs/chart/package.json b/libs/chart/package.json deleted file mode 100644 index 6831a6ce0..000000000 --- a/libs/chart/package.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "name": "@vegaprotocol/chart", - "version": "0.0.1" -} diff --git a/tsconfig.base.json b/tsconfig.base.json index 114f11cfd..78b18a098 100644 --- a/tsconfig.base.json +++ b/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"], diff --git a/workspace.json b/workspace.json index 873bce562..5669a7c5a 100644 --- a/workspace.json +++ b/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",