Promise}\n // For subscribing to real-time quotes\n subscribeQuotes={({ symbol, granularity }, callback) => unsubscribeFunction}\n // For forgetting subscriptions\n unsubscribeQuotes={(request) => {}}\n // Optional: Pass chart data for updates\n chartData={{\n tradingTimes: {...},\n activeSymbols: [...]\n }}\n // Control whether to fetch data from API\n feedCall={{ activeSymbols: false, tradingTimes: false }}\n />\n );\n }\n};\n```\n\nSmartCharts expects library user to provide `getQuotes`, `subscribeQuotes` and `unsubscribeQuotes`. Refer to [API](#api) for more details.\n\nThe job of loading the active symbols or trading times or stream data from cache or retrieving from websocket is therefore NOT the responsibility of SmartCharts but the host application. SmartCharts simply makes the requests and expect a response in return.\n\nSome important notes on your webpack.config.js (refer to `app/webpack.config.js`):\n\n- smartcharts CSS file will need to be copied from the npm library (remember to include in your `index.html`).\n- smartcharts consist of a few chunks (which has filenames `*.smartcharts.*`), which it downloads asynchronously during runtime. Therefore, it needs to know where the library user places its chunks via the `setSmartChartsPublicPath` function:\n\n```js\nimport { setSmartChartsPublicPath } from \"@deriv-com/smartcharts-champion\";\n\n// SmartCharts chunk are deployed to https://mysite.com/dist/*\nsetSmartChartsPublicPath(\"/dist/\");\n// or \nsetSmartChartsPublicPath(\"node_modules/@deriv-com/smartcharts-champion/dist/\")\n```\n\nYou can use the `copy-webpack-plugin` webpack plugin to copy over SmartCharts chunks:\n\n```js\nnew CopyWebpackPlugin([\n { from: \"./node_modules/@deriv-com/smartcharts-champion/dist/*.smartcharts.*\" },\n { from: \"./node_modules/@deriv-com/smartcharts-champion/dist/smartcharts.css\" },\n]);\n```\n\nYou would also need to copy `node_modules/@deriv-com/smartcharts-champion/dist/chart/assets` to assets folder in the root of the project using CopyWebpackPlugin.\n\n### API\n\n> Note: Props will take precedence over values set by the library.\n\nProps marked with `*` are **mandatory**:\n\n| Props | Description |\n| ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| getQuotes\\* | Function to fetch historical tick data. Expects parameters `{ symbol, granularity, count, start?, end?, style? }` and returns a Promise with candles or history data. |\n| subscribeQuotes\\* | Function to subscribe to real-time quotes. Expects parameters `({ symbol, granularity }, callback)` and returns an unsubscribe function. |\n| unsubscribeQuotes\\* | When SmartCharts no longer needs a subscription, it will call this method (passing in the request object) to halt the subscription. |\n| id | Uniquely identifies a chart's indicators, symbol and layout; saving them to local storage and loading them when page refresh. If not set, SmartCharts renders a fresh chart with default values on each refresh. Defaults to `undefined`. |\n| getMarketsOrder | Callback function to set/order the active symbols category. `active_symbols` is passed to the callback and an array of markets is expected in return. Allowed values are `forex`, `basket_index`, `indices`, `stocks`, `commodities`, `synthetic_index` and `cryptocurrency`. Defaults to `undefined` |\n| getIndicatorHeightRatio | Callback function to set/order the height of the active indicators that attach to the bottom of the chart. The chart pass two parameters, `chart_height` and `indicator_count` and the callback should return an object that contains two parameters, `height` and `percent` which `height` present the height of each indicator in pixel and the `percent` present the percentage of height compare to chart height. Example: `getIndicatorHeightRatio: (chart_height, indicator_count) => ({height, percent})` . Defaults to `undefined` |\n| symbol | Sets the main chart symbol. Defaults to `R_100`. Refer [Props vs UI](#props-vs-ui) for usage details. | |\n| chartData | Pass chart data for updates. Default is `undefined`. |\n| feedCall | Enable/Disable the feed call for getting requirement resources. Default is `{activeSymbols: true,tradingTimes: true}` |\n| granularity | Sets the granularity of the chart. Allowed values are 60, 120, 180, 300, 600, 900, 1800, 3600, 7200, 14400, 28800, 86400. Defaults to 0. Refer [Props vs UI](#props-vs-ui) for usage details. |\n| chartType | Sets the chartType. Choose between `mountain` (Line), `line` (Dot), `colored_line` (Colored Dot), `spline`, `baseline`, `candle`, `colored_bar` (OHLC), `hollow_candle`, `heikinashi`, `kagi`, `linebreak`, `renko`, `rangebars`, and `pandf` (Point & Figure). Defaults to `mountain`. Refer [Props vs UI](#props-vs-ui) for usage details. |\n| contractInfo | An object of `ProposalOpenContract` type. Includes data of a contract for which ticks are currently being drawn. Includes such data as `tick_stream` array, `tick_count` number, `underlying` string, etc. Required for `shouldDrawTicksFromContractInfo` prop to work. Defaults to an `{}` empty object. |\n| startEpoch | Set the start epoch of the chart |\n| endEpoch | Set the end epoch of the chart |\n| chartControlsWidgets | Render function for chart control widgets. Set to `null` if you want to hide chart controls. Refer to [Customising Components](#customising-components). |\n| topWidgets | Render function for top widgets. Refer to [Customising Components](#customising-components). |\n| bottomWidgets | Render function for bottom widgets. Refer to [Customising Components](#customising-components). |\n| toolbarWidget | Render function for floating toolbar widgets. Refer to [Customising Components](#customising-components). |\n| isMobile | Switch between mobile or desktop view. Defaults to `false`. |\n| onSettingsChange | Callback that will be fired each time a setting is changed. |\n| stateChangeListener | Callback that will be fired on chart state change, It will return two parameters `(state, option)`. An state, and an option that is related to desire state. Chart has three states that are: `INITIAL` , `READY` and `SCROLL_TO_LEFT`. |\n| settings | Sets the chart settings. Refer to [Chart Settings](#chart-settings) |\n| barriers | Draw chart barriers. Refer to [Barriers API](#barriers-api) for usage details |\n| enableRouting | Enable routing for dialogs. Defaults to `false` |\n| isConnectionOpened | Sets the connection status. If set, upon reconnection smartcharts will either patch missing tick data or refresh the chart, depending on granularity; if not set, it is assumed that connection is always opened. Defaults to `undefined`. |\n| onMessage | SmartCharts will send notifications via this callback, should it be provided. Each notification will have the following structure: `{ text, type, category }`. |\n| isAnimationEnabled | Determine whether chart animation is enabled or disabled. It may needs to be disabled for better performance. Defaults to `true`. |\n| isVerticalScrollEnabled | Determine whether verticall scroll on the chart outside Y-axis is disabled while it is forced on the nearest scrollable parent instead. It may need to be disabled for mobile app version to scroll the page up or down instead of the chart. In this case, when scroll delta exceeds 10px, the page will be force-scrolled fully in a respective direction. Defaults to `true`. |\n| showLastDigitStats | Shows last digits stats. Defaults to `false`. |\n| scrollToEpoch | Scrolls the chart to the leftmost side and sets the last spot/bar as the first visible spot/bar in the chart. Also, it disables scrolling until the chart reaches the 3/4 of the width of the main pane of the chart. Defaults to `null`. |\n| clearChart | Clear the chart. |\n| onExportLayout | Export the layout and send it back using this callback. |\n| importedLayout | The layout to be imported to chart. It should be the layout that was exported in onExportLayout; |\n| shouldDrawTicksFromContractInfo | Determine whether SmartCharts should draw ticks on the chart based on `contractInfo` object, which contains data from `proposal_open_contract` API response, instead of ticks from `ticks_history` API response. Should be used together with `contractInfo` prop described above, otherwise `ticks_history` API response will be used for drawing ticks as usual. Defaults to `false`. |\n| shouldFetchTradingTimes | Determine whether an API call for fetching trading times is necessary for the new chart or not. Defaults to `true` |\n| should_zoom_out_on_yaxis | Forces y-axis to zoom out. Overrides `top` and `bottom` values of `yAxisMargin` prop. Defaults to `undefined`. |\n| shouldGetQuotes | Determine whether an API call for fetching tick history is necessary for the new chart or not. Defaults to `true` |\n| allTicks | Provides all_ticks contract data for chart rendering when contract with duration = 'ticks' . Defaults to `undefined` |\n| maxTick | Set the max number of first points/candles in the visible chart area. The value should be number greater than zero. Defaults to `undefined` |\n| crosshair | Control crosshair visibility state. Accepts numeric values (`undefined`, `0`, `1`, `2`) where `1` enables crosshair (default). The crosshair provides precise price and time information when hovering over the chart. Modern usage recommends using the `` component for user interaction instead of directly setting this prop. See [Crosshair Implementation Guide](docs/CROSSHAIR_MAINTAINERS_GUIDE.md) for architecture details and modern usage patterns. |\n| zoom | Zoom in and Zoom out the chart. the value should be `1` or `-1`. If the value is `1` the chart will be zoomed in, and if the value is `-1` it zoomed out. |\n| yAxisMargin | Set the margins of chart yAxis. It's an object that takes two parameters, `bottom` for margin bottom of chart, and `top` for the top margin of chart. |\n| enableScroll | Enable/disable scroll feature in chart. Scroll gets disable on chart scale `1:1` and enable whenever user zoom in/out. This property override that feature . Defaults to `true` |\n| enableZoom | Enable/disable zoom feature in chart. Defaults to `true` \n### Chart Settings\n\n| Attribute | Description |\n| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |\n| countdown | Show Countdown. Defaults to `false`. |\n| theme | Sets the chart theme. themes are (`dark\\|light`), and default is `light`. |\n| lang | Sets the language. Defaults to `en`. |\n| minimumLeftBars | The default number of bars to display on the chart. It's used in combination with `whitespace` setting in order to adjust white space width. Please refer to `whitespace` below for more details. Defaults to `undefined`. |\n| position | Sets the position of the chart controls. Choose between `left` and `bottom`. In mobile this is always `bottom`. Defaults to `bottom`. |\n| enabledNavigationWidget | Show or hide navigation widget. Defaults to `false` |\n| isHighestLowestMarkerEnabled | Show or hide the highest and lowest tick on the chart. Defaults to `false`. |\n| whitespace | The default width of whitespace between the right edge of the chart and the y-axis. It should be used in combination with `minimumLeftBars` setting value. For more details, please refer to stxx.preferences.whitespace in CIQ documentation. Defaults to `undefined`. |\n\n| Attribute | Description | Sample Data |\n| --- | --- | --- |\n| activeSymbols | An array of active symbols (available markets) is used to load the market selector. Default is `null`. This value would update in the chart is user toggle property of `refreshActiveSymbols` that cause the chart to request for activeSymbols on the Feed | `[{ allow_forward_starting: 0, display_name: 'AUD Basket', exchange_is_open: 1, is_trading_suspended: 0, market: 'basket_index', market_display_name: 'Basket Indices', pip: 0.001, submarket: 'forex_basket', submarket_display_name: 'Forex Basket', symbol: 'WLDAUD', symbol_type: 'forex_basket' }, ...]`\n|tradingTimes | An array of markets trading time is used to determine close/open markets. Default is `null`. The chart will request new data via Feed in a sequence that is calculated regards markets trading time. | `{trading_times: {markets: [{ name: 'Forex', submarkets: [{ name: 'Major Pairs', symbols: [{name: 'AUD/JPY', symbol: 'frxAUDJPY', times: { close: ['23:59:59'], open: ['00:00:00'], settlement: '23:59:59' }, trading_days: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],events: [{ dates: 'Fridays', descrip: 'Closes early (at 20:55)' },{ dates: '2020-12-25', descrip: 'Christmas Day' },{ dates: '2021-01-01', descrip: \"New Year's Day\" }], ...}, ]},...]...],}}`\n| masterData | An array of ticks that are used to load the graph (candles). Default is `null`. If the Feed is available, the chart will call `fetchInitialData` via Feed to get the initial ticks, for old data it calls `fetchPaginationData` and receives new ticks constantly. If this property is filled, chart user `symbol` property and `setting` property (to extract chart type and interval) and the masterData to load the graph. **Notice:** chart interval in the setting property should be the same as masterData epoch/Date property. If the symbol property does not fill, the chart uses the `symbol` property that exists in the localStorage with the key of `layout-*`, and if that property also does not fill, the chart throws a console error. **(if the desired symbol does not fill in the `symbol` property or `layout-*` localStorage, it caused the chart to just load the given masterData and does not call for the `fetchInitialData` API)**. | `[{\"Date\":\"2020-11-16T04:28:00\", \"Close\":8287.85}, {\"Date\":\"2020-11-16T04:26:00\", \"Open\":8283.25,\"High\":8293.750015,\"Low\":8278.75,\"Close\":8293.75},...]`\n\n#### Barriers API\n\n`barriers` props accepts an array of barrier configurations:\n\n```jsx\n\n```\n\nAttributes marked with `*` are **mandatory**:\n\n| Attribute | Description |\n| -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| shadeColor | Barrier shade color. Defaults to `green`. |\n| color | Price line color. Defaults to `#000`. |\n| shade | Shade type; choose between `NONE_SINGLE`, `NONE_DOUBLE`, `ABOVE`, `BELOW`, `OUTSIDE` or `BETWEEN`. Defaults to `NONE_SINGLE`. |\n| hideBarrierLine | hide/show the barrier line. Can be used to show only the title. Defaults to `false`. |\n| hideOffscreenLine | hide/show the barrier line when it is offscreen. Defaults to `false`. |\n| hideOffscreenBarrier | hide/show the barrier line & title when it is offscreen. Defaults to `false`. |\n| hidePriceLines | hide/show the price lines. Defaults to `false`. |\n| lineStyle | Sets the style of the price lines; choose between `dotted`, `dashed`, or `solid`. Defaults to `dashed`. |\n| onChange | When price of high or low barrier changes (including when switched toggling `relative` or setting `high\\|low`), `onChange` will pass the high and low barriers as `{ high, low }`. |\n| relative | Toggle between relative and absolute barriers. Defaults to `false`. |\n| draggable | Toggles whether users can drag the price lines and change the barrier directly from the chart. Defaults to `true`. |\n| title | Title text of the barrier |\n| isSingleBarrier | Shows only High barrier, stops low barrier & shades from rendering when the flag is true. Defaults to `false`. |\n| showOffscreenArrows | hide/show arrows with direction when the barrier is offscreen. Defaults to `false`. |\n| opacityOnOverlap | Sets the opacity of the barrier when it is overlapping with other barrier. |\n| high\\* | Sets the price of the high barrier. |\n| low\\* | Sets the price of the low barrier. |\n| useInlineLabel | Opt-in to the inline-label barrier variant (for TP / SL / Stop-Out lines). Renders a colored line that stops before an inline label row containing an optional off-screen chevron, the title, and a price pill — all sharing the barrier `color`. The default render path is unchanged when this is `false`. Defaults to `false`. |\n\n### Handling Type Errors in StreamManager.ts\n\nWhen working with the StreamManager.ts file, you might encounter TypeScript errors due to type assertions or complex type relationships. Here are several ways to handle these type errors:\n\n1. **Using `// @ts-ignore` comment**:\n - Place this comment directly above the line with the type error\n - This tells TypeScript to ignore any errors on the next line\n ```typescript\n // @ts-ignore\n this._connection.send((request as unknown) as TBinaryAPIRequest);\n ```\n\n2. **Using `// @ts-nocheck` comment**:\n - Place this at the top of the file to ignore all type errors in the entire file\n - Use this sparingly as it disables type checking for the whole file\n ```typescript\n // @ts-nocheck\n import { ... } from '...';\n ```\n\n3. **Using type assertions**:\n - Already used in the file with `as unknown as Type`\n - This is a two-step assertion that first converts to `unknown` and then to the desired type\n ```typescript\n (data.echo_req as unknown) as TGetQuotes\n ```\n\n4. **Using the `any` type**:\n - The nuclear option that bypasses type checking completely\n - Use with caution as it removes all type safety\n ```typescript\n const response: any = await this._connection.send(request);\n ```\n\nChoose the approach that best fits your specific situation, but try to minimize the use of type bypassing to maintain type safety where possible.\n\n### Example Usage with Dummy Values\n\nHere's an example of how to use the SmartCharts component with dummy values:\n\n```jsx\nimport React from 'react';\nimport { SmartChart } from '@deriv-com/smartcharts-champion';\n\n// Sample active symbols data\nconst dummyActiveSymbols = [\n {\n allow_forward_starting: 0,\n display_name: 'AUD/JPY',\n exchange_is_open: 1,\n is_trading_suspended: 0,\n market: 'forex',\n market_display_name: 'Forex',\n pip: 0.001,\n submarket: 'major_pairs',\n submarket_display_name: 'Major Pairs',\n symbol: 'frxAUDJPY',\n symbol_type: 'forex'\n },\n // Add more symbols as needed\n];\n\n// Sample trading times data\nconst dummyTradingTimes = {\n 'frxAUDJPY': {\n isOpen: true,\n openTime: '2023-01-01T00:00:00Z',\n closeTime: '2023-01-01T23:59:59Z'\n },\n // Add more trading times as needed\n};\n\n// Sample historical data\nconst dummyMasterData = [\n {\n Date: '2023-01-01T00:00:00',\n Open: 95.25,\n High: 95.50,\n Low: 95.00,\n Close: 95.35\n },\n {\n Date: '2023-01-01T01:00:00',\n Open: 95.35,\n High: 95.75,\n Low: 95.20,\n Close: 95.60\n },\n // Add more candles as needed\n];\n\nconst ChartExample = () => {\n // Function to fetch historical tick data\n const getQuotes = ({ symbol, granularity, count, start, end, style }) => {\n console.log('Fetching tick history for:', { symbol, granularity, count, start, end, style });\n \n // Return a promise that resolves with candles or history data\n if (style === 'ticks') {\n // For tick style, return history with times and prices\n return Promise.resolve({\n history: {\n times: dummyMasterData.map(candle => new Date(candle.Date).getTime() / 1000),\n prices: dummyMasterData.map(candle => candle.Close)\n }\n });\n } else {\n // For candle style, return candles\n return Promise.resolve({\n candles: dummyMasterData.map(candle => ({\n open: candle.Open,\n high: candle.High,\n low: candle.Low,\n close: candle.Close,\n epoch: new Date(candle.Date).getTime() / 1000\n }))\n });\n }\n };\n\n // Function to subscribe to real-time quotes\n const subscribeQuotes = ({ symbol, granularity }, callback) => {\n console.log('Subscribing to quotes for:', { symbol, granularity });\n \n // Simulate real-time updates with an interval\n const interval = setInterval(() => {\n const lastPrice = 95 + Math.random();\n const quote = {\n Date: new Date().toISOString(),\n Close: lastPrice,\n DT: new Date(),\n tick: {\n quote: lastPrice,\n epoch: Math.floor(Date.now() / 1000)\n }\n };\n \n callback(quote);\n }, 1000);\n \n // Return an unsubscribe function\n return () => {\n console.log('Unsubscribing from quotes for:', { symbol, granularity });\n clearInterval(interval);\n };\n };\n\n // Function to forget subscriptions\n const unsubscribeQuotes = (request) => {\n console.log('Forgetting subscription for:', request);\n // In a real implementation, you would handle unsubscribing from the WebSocket here\n };\n\n // Function to calculate indicator height ratio\n const getIndicatorHeightRatio = (chart_height, indicator_count) => {\n const isSmallScreen = chart_height < 780;\n const denominator = indicator_count >= 5 ? indicator_count : indicator_count + 1;\n const reservedHeight = 320;\n const indicatorsHeight = Math.round(\n (chart_height - (reservedHeight + (isSmallScreen ? 20 : 0))) / denominator\n );\n \n return {\n height: indicatorsHeight,\n percent: indicatorsHeight / chart_height,\n };\n };\n\n return (\n \n );\n};\n\nexport default ChartExample;\n```\n\nIn this example:\n\n1. We define dummy data for active symbols, trading times, and historical candles.\n2. We implement the required functions:\n - `getQuotes`: Returns historical data for the chart\n - `subscribeQuotes`: Subscribes to real-time quotes and returns an unsubscribe function\n - `unsubscribeQuotes`: Handles unsubscribing from data streams\n - `getIndicatorHeightRatio`: Calculates the height for indicators\n3. We configure the SmartChart component with various props:\n - `id`: A unique identifier for the chart\n - `symbol`: The trading symbol to display\n - `chartType`: Set to \"candle\" for candlestick chart\n - `granularity`: Set to 60 for 1-minute candles\n - Other configuration options for appearance and behavior\n\nThis example demonstrates how to set up a SmartCharts component with dummy data for development or testing purposes.\n\n#### Marker API\n\nUse `FastMarker` to render given components inside the chart.\nMarkers provide a way for developers to place DOM elements that are positioned based on date, values or tick location inside the chart. Also, please note that this `FastMarker` implementation does not factor the width and height of the marker: this is expensive to calculate, so we expect you to offset this in CSS.\n`FastMarker` will keep the marker position on the chart.\nIt can be imported from `@deriv-com/smartcharts-champion` package either as `FastMarker`, or simply as `Marker`.\n\n```jsx\n\n \n \n \n\n\n```\n\nUSAGE:\n\n- `setRef({setPosition, div})` will be called onMount.\n- `setRef(null)` will be called when the marker unmounts.\n- `div` is the dom element containing the marker with `your-css-class`\n - any content update should be done using `div` and vanilla js\n - use `div.querySelector('...')` to get a dom reference in order to update your content.\n - avoid doning expensive DOM operations on `div` such as style changes.\n- `setPosition({epoch, price})` is a function that you will use to update the `div` position.\n - epoch is the tick unix epoch from api\n - price is the tick price, it could be `null` if you want to draw a vertical line.\n- call `setPosition({epoch: null, price: null})` to hide the marker.\n\nPROPS:\n\n- `markerRef` (required): pass the `setRef` callback using this property\n- `className` (optional): avoid expoensive css transition or keyframe animations on this class.\n\n### Raw Marker API\n\nGet a raw callback with underlying canvas2dcontext.\nThis component is used to render directly into the chart canvas.\n\nPROPS:\n\n- `epoch_array`: array of epoch values to get coordinates for.\n- `draw_callback`: called on every frame with ({ctx, points}).\n - `points` will be an array of [{left, top, epoch}] in pixels.\n - `ctx` is the Context2dDrawingContext\n\n### Customising Components\n\nWe offer library users full control on deciding which of the top widgets and chart control buttons to be displayed by overriding the render methods themselves. To do this you pass in a function to `chartControlsWidgets` or `topWidgets`.\n\nFor example, we want to remove all the chart control buttons, and for top widgets to just show the comparison list (refer `app/index.jsx`):\n\n```jsx\nimport { ChartMode, ToolbarWidget } from \"@deriv-com/smartcharts-champion\";\n\nconst renderTopWidgets = () => (\n \n Hi I just replaced the top widgets!
\n \n \n);\n\nconst renderBottomWidgets = () => (\n \n Hi, I am a bottom widget!
\n \n);\n\nconst renderToolbarWidgets = () => (\n \n Hi I just replaced the top widgets!
\n \n \n);\n\nconst App = () => (\n {}}\n >\n);\n```\n\nHere are the following components you can import:\n\n- Top widgets:\n - ` {}} open_market={null} />`\n- Chart controls:\n - `` - Interactive crosshair toggle component with internationalization support. Features reactive state management using MobX, dual-state logic (user preference + temporary disable), mobile-responsive tooltips, and proper UX patterns (icon shows current state, label shows available action). Integrates with global translation system using keys \"Enable Crosshair\" and \"Disable Crosshair\".\n - ` {}} />`\n - ``\n - ``\n - ` {}} onGranularity={(granularity) => {}} />`\n - ``\n - ` {}} />`\n - ``\n - ``\n- Toolbar Widget\n - ` {}} onGranularity={(granularity) => {}} />`\n\n> Note: ChartMode and Views have the same type of props. It includes required `onChartType` and `onGranularity` callbacks and an optional `portalNodeId`.\n\n\n### Props vs UI\n\nCertain chart parameters can be set either by props or from the chart UI:\n\n- `symbol` - set by ``\n- `granularity` - set by ``\n- `chartType` - set by ``\n\nThis creates conflicts in deciding which is the single source of truth. To circumvent this, if these props are set (not `undefined`), selecting options in its corresponding components will not have any affect on the chart; the prop values take precedence. To have control over both the UI and the props, we provide library users the option to _override_ component behaviour via `onChange` prop. For example, to retrieve the symbol a client chooses:\n\n```jsx\n {\n /* ...Pass to symbol prop in */\n }}\n/>\n```\n\nSee available components and their props in [Customising Components](#customising-components).\n\n#### ChartTitle\n\n| Attribute | Description |\n| ------------ | --------------------------------------------------------------------------------------------------- |\n| onChange | When symbol/market changes, this method call. `(symbol) => { }` |\n| isNestedList | Change the theme of Dropdown, if set to `true` it shows a dropdown nested style. Default is `false` |\n| open_market | Sepecify the visible market on the market selector scroll. it accept `{category: '', subcategory: '', market: ''}` . Default is `null` |\n\n\n#### ToolbarWidget\n\n| Attribute | Description |\n| --------- | ------------------------------------------------------------------------------- |\n| position | determine the position of toolbar, which can be `top, bottom`. Default is `top` |\n\n\n## How to contribute\n\n### Developer Documentation\n\nFor component-specific maintenance and development guidelines, see the [`docs/`](docs/) directory:\n\n- [Crosshair Implementation - Maintainer's Guide](docs/CROSSHAIR_MAINTAINERS_GUIDE.md) - Comprehensive guide for maintaining and developing the crosshair functionality\n\nFuture component guides will follow the same pattern and be added to the [`docs/`](docs/) directory.\n\n### Getting Started\n\n1. Create branch from the latest `master` branch\n\n ```sh\n git checkout master\n git pull upstream master\n git checkout -b [_your_branch_name]\n ```\n\n2. Make your changes\n\n3. Make pull request\n\n- Push your changes to your origin\n\n ```sh\n git push -u origin [_your_branch_name]\n ```\n\n- Click on the autogenerated link from terminal to open the PR\n\n\n## Manage releases / deployment process\n### Library deployment / publishing to NPM\n\nTo publish to production:\n\n ```sh\n npm run build && npm publish\n ```\n\n\n## Manage translations\n\nAll strings that need to be translated must be inside `t.translate()`:\n\n```js\nt.translate(\"[currency] [amount] payout if the last tick.\", {\n currency: \"USD\",\n amount: 43.12,\n});\nt.setLanguage(\"fr\", callback_function); // components need to be rerendered for changes to take affect\n```\n\n### Debugging NPM Package\n\nSome issues only show up for library users, so it is helpful to test the NPM package before deploying it to library users. You can do this by building the library directly into the node_modules directory of an app that uses the SmartCharts library. For example to test the library build on binary-static you can execute:\n\n npm run watch '../binary-static/node_modules/@deriv-com/smartcharts-champion/dist'\n\nNow each time you make any change, it will overwrite the SmartCharts library inside the `node_modules` folder.\n\n### Separation of App and Library\n\nThere should be a clear distinction between developing for app and developing for library. Library source code is all inside `src` folder, whereas app source code is inside `app`.\n\nWebpack determines whether to build an app or library depending on whether an environment variable `BUILD_MODE` is set to `app`. Setting this variable switches the entry point of the project (app build mode uses `app/index.jsx` while library uses `src/index.js`). We do it this way to develop the app to have hot reload available when we modify library files.\n\n### Dealing With SVGs\n\nSmartCharts has 2 ways of utilizing SVG files: as CSS background image and as external SVG.\n\n##### CSS Background Image SVG\n\nThese SVG are added inline into the CSS via [postcss-inline-svg](https://github.com/TrySound/postcss-inline-svg). Currently the only place where this is used is the loader, because if the external SVG is not loaded yet we would at least want a loading screen to be present.\n\n##### External SVG\n\nThe SVG files included in the `js` and `jsx` files are automatically put together into a sprite sheet. Manipulating external SVG can be tricky - developers can only control stroke and fill color of the whole SVG file via CSS:\n\n```scss\n.ic-icon.active {\n svg {\n stroke: #2e8836;\n fill: #ff3d38;\n }\n}\n```\n\n**Important Note:** These stroke and fill colors will not be affected by CSS if the corresponding attributes are declared in the SVG file. Therefore, it is not uncommon SmartCharts developers would need to tweak the SVG files by hand to be able to manipulate its color.\n\nThis has much less freedom compared to [inline SVG](https://github.com/MoOx/react-svg-inline) where a developer can control individual parts of the SVG, but having external SVG results in a much smaller library, and allows parts of the code not rendered by React to use them. External SVG is also cached by the browser (using shadow DOM), so though the same SVG may be used multiple times, only one copy exists in the DOM.\n\n### State Management and the `connect` Method\n\nSmartCharts uses a variation of [Mobdux](https://medium.com/@cameronfletcher92/mobdux-combining-the-good-parts-of-mobx-and-redux-61bac90ee448) to assist with state management using Mobx.\n\nEach component consists of 2 parts: a **template** (`*.jsx` file), and a **store** (`*Store.js` file). There are 3 scenarios in which the [`connect`](https://github.com/deriv-com/SmartCharts/blob/dev/src/store/Connect.js) method is used:\n\n##### 1. Main Components: The component is tied directly to the main store.\n\nExamples: ``, ``, ``...\n\nEach component here is mapped to a corresponding store in the main store. **Only one copy of this component may exist per `` instance**, and its state is managed by the main store tree (defined as `mainStore` in SmartCharts). Here you pass a `mapperFunction` that would be applied directly to the main store:\n\n```jsx\nfunction mapperFunction(mainStore) {\n return {\n value: mainStore.subStore.value,\n };\n}\n\nexport default connect(mapperFunction)(MyComponent);\n```\n\nConnections in the scenario #1 should be done in the `jsx` file, to keep consistent with other components. Except for the component tied to the main store (`Chart.jsx`), all components using this method should be SFC (Stateless Functional Components), and have the lifecycle managed by the main store.\n\n##### 2. Subcomponents: Component is connected inside a store\n\nExamples: ``, `
`, ``...\n\nThis is used when multiple copies of a store needs to exist in the same state tree. Here we do the connection inside the constructor of a child of the main store and pass it as a prop to the template. For example `` needs a ``, so in `ChartTitleStore` we create an instance of `MenuStore` and connect it:\n\n```js\nexport default class ChartTitleStore {\n constructor(mainStore) {\n this.menu = new MenuStore(mainStore);\n this.ChartTitleMenu = this.menu.connect(Menu);\n // ...\n }\n // ...\n}\n```\n\nThe `connect` method for subcomponents are defined in its store (instead of the template file) that contains its own `mapperFunction`:\n\n```js\nexport default class MenuStore {\n // ...\n connect = connect(() => ({\n setOpen: this.setOpen,\n open: this.open,\n }));\n}\n```\n\nWe then pass the connected component in `ChartTitle.jsx`:\n\n```js\nexport default connect(({ chartTitle: c }) => ({\n ChartTitleMenu: c.ChartTitleMenu,\n}))(ChartTitle);\n```\n\n> **Note**: Do NOT connect subcomponents in another connect method; `connect` creates a new component each time it is called, and a `mapperFunction` is called every time a mobx reaction or prop update is triggered.\n\n##### 3. Independent Components: components that are not managed by the main store\n\nExamples: ``, ``\n\nIndependent components is able to access the main store, but the main store has no control over independent components. As such, each independent component manages its own life cycle. Here is the interface for its store:\n\n```js\nclass IndependentStore {\n constructor(mainStore) {}\n updateProps(nextProps) {} // intercept the props from the component\n destructor() {} // called on componentWillUnmount\n}\n```\n\nThis enables library users to use multiple copies of a component without connecting it, because mounting an independent component will also create its own store (refer to [`Marker API`](#marker-api) to see usage example of such a component). Therefore, for each independent component you connect you will also need to pass its store class (not an instance but the class itself) as a second parameter to the `connect` function:\n\n```jsx\nfunction mapperFunction(customStore) {\n return {\n value: customStore.value,\n };\n}\n\nexport default connect(\n mapperFunction,\n MyStoreClass // Required argument for independent components\n)(MyIndependentComponent);\n```\n\nNote that **for independent components, the `mapperFunction` is applied to the store instance**, not the main store. Should you need to access any value from the main store, you can do this via the `mainStore` passed to the constructor of each independent store class.\n","readmeFilename":"README.md"}