From 5a35543d1a3000ff92c876a7f6bfe3e2d44eb9e8 Mon Sep 17 00:00:00 2001 From: Thisyahlen Date: Wed, 1 Jun 2022 16:29:25 +0800 Subject: [PATCH] removed github deployment --- README.md | 388 +++++++++++++++++++++++++----------------------------- 1 file changed, 176 insertions(+), 212 deletions(-) diff --git a/README.md b/README.md index 0e143d8214..8002dae4b2 100644 --- a/README.md +++ b/README.md @@ -58,13 +58,13 @@ In the `app` folder, we provide a working webpack project that uses the smartcha ### Other useful commands: -- use `npm install` to install dependencies -- use `npm start` to launch webpack dev server -- use `npm run build` to build the library -- use `npm run build:app` to build the [charts.binary.com](https://charts.binary.com/) app -- use `npm run analyze` to run webpack-bundle-analyzer -- use `npm run test` to run unit tests -- use `npm run coverage` to see test coverage +- use `npm install` to install dependencies +- use `npm start` to launch webpack dev server +- use `npm run build` to build the library +- use `npm run build:app` to build the [charts.binary.com](https://charts.binary.com/) app +- use `npm run analyze` to run webpack-bundle-analyzer +- use `npm run test` to run unit tests +- use `npm run coverage` to see test coverage > Note: eventhough both `npm run build` and `npm run build:app` outputs `smartcharts.js` and `smartcharts.css`, **they are not the same files**. One outputs a library and the the other outputs an app. @@ -116,74 +116,75 @@ The job of loading the active symbols or trading times or stream data from cache Some important notes on your webpack.config.js (refer to `app/webpack.config.js`): -- smartcharts CSS file will need to be copied from the npm library (remember to include in your `index.html`). -- 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: +- smartcharts CSS file will need to be copied from the npm library (remember to include in your `index.html`). +- 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: ```js -import { setSmartChartsPublicPath } from "@deriv/deriv-chart"; +import { setSmartChartsPublicPath } from '@deriv/deriv-chart'; // SmartCharts chunk are deployed to https://mysite.com/dist/* -setSmartChartsPublicPath("/dist/"); +setSmartChartsPublicPath('/dist/'); ``` We can use the `copy-webpack-plugin` webpack plugin to copy over SmartCharts chunks: ```js new CopyWebpackPlugin([ - { from: "./node_modules/@deriv/deriv-chart/dist/*.smartcharts.*" }, - { from: "./node_modules/@deriv/deriv-chart/dist/smartcharts.css" }, + { from: './node_modules/@deriv/deriv-chart/dist/*.smartcharts.*' }, + { from: './node_modules/@deriv/deriv-chart/dist/smartcharts.css' }, ]); ``` + ### API > Note: Props will take precedence over values set by the library. Props marked with `*` are **mandatory**: -| Props | Description | -| ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| requestAPI\* | SmartCharts will make single API calls by passing the request input directly to this method, and expects a `Promise` to be returned. | -| requestSubscribe\* | SmartCharts will make streaming calls via this method. `requestSubscribe` expects 2 parameters `(request, callback) => {}`: the `request` input and a `callback` in which response will be passed to for each time a response is available. Keep track of this `callback` as SmartCharts will pass this to you to forget the subscription (via `requestForget`). | -| requestForget\* | When SmartCharts no longer needs a subscription (made via `requestSubscribe`), it will call this method (passing in `request` and `callback` passed from `requestSubscribe`) to halt the subscription. | -| 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`. | -| 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` | -| 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` | -| symbol | Sets the main chart symbol. Defaults to `R_100`. Refer [Props vs UI](#props-vs-ui) for usage details. | -| initialData | Set initial data that the library requires for booting up. Refer [initialData](#initial-data) for usage details. | -| feedCall | Enable/Disable the feed call for getting requirement resources. Default is `{activeSymbols: true,tradingTimes: true}` | -| 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. | -| 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. | -| startEpoch | Set the start epoch of the chart | -| endEpoch | Set the end epoch of the chart | -| chartControlsWidgets | Render function for chart control widgets. Set to `null` if you want to hide chart controls. Refer to [Customising Components](#customising-components). | -| topWidgets | Render function for top widgets. Refer to [Customising Components](#customising-components). | -| bottomWidgets | Render function for bottom widgets. Refer to [Customising Components](#customising-components). | -| toolbarWidget | Render function for floating toolbar widgets. Refer to [Customising Components](#customising-components). | -| isMobile | Switch between mobile or desktop view. Defaults to `false`. | -| onSettingsChange | Callback that will be fired each time a setting is changed. | -| 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`. | -| settings | Sets the chart settings. Refer to [Chart Settings](#chart-settings) | -| barriers | Draw chart barriers. Refer to [Barriers API](#barriers-api) for usage details | -| enableRouting | Enable routing for dialogs. Defaults to `false` | -| 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`. | -| onMessage | SmartCharts will send notifications via this callback, should it be provided. Each notification will have the following structure: `{ text, type, category }`. | -| isAnimationEnabled | Determine whether chart animation is enabled or disabled. It may needs to be disabled for better performance. Defaults to `true`. | -| showLastDigitStats | Shows last digits stats. Defaults to `false`. | -| 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`. | - | -| clearChart | Clear the chart. | -| onExportLayout | Export the layout and send it back using this callback. | -| importedLayout | The layout to be imported to chart. It should be the layout that was exported in onExportLayout; | -| shouldFetchTradingTimes | Determine whether an API call for fetching trading times is necessary for the new chart or not. Defaults to `true` | -| shouldFetchTickHistory | Determine whether an API call for fetching tick history is necessary for the new chart or not. Defaults to `true` | -| allTicks | Provides all_ticks contract data for chart rendering when contract with duration = 'ticks' . Defaults to `undefined` | -| 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` | -| crosshair | Set state of Crosshair Component. Allowed values are undefined, 0,1,2. Defaults to `undefined` | -| crosshairTooltipLeftAllow | Set max left position which chart allow to render left side tooltip of crosshair, if mouse position before this size, the crosshair tooltip move to right side of mouse, if set `null` then chart specify `315px` as default value. Defaults to `null` | -| 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. | -| 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. | -| 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` | -| enableZoom | Enable/disable zoom feature in chart. Defaults to `true` | +| Props | Description | +| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| requestAPI\* | SmartCharts will make single API calls by passing the request input directly to this method, and expects a `Promise` to be returned. | +| requestSubscribe\* | SmartCharts will make streaming calls via this method. `requestSubscribe` expects 2 parameters `(request, callback) => {}`: the `request` input and a `callback` in which response will be passed to for each time a response is available. Keep track of this `callback` as SmartCharts will pass this to you to forget the subscription (via `requestForget`). | +| requestForget\* | When SmartCharts no longer needs a subscription (made via `requestSubscribe`), it will call this method (passing in `request` and `callback` passed from `requestSubscribe`) to halt the subscription. | +| 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`. | +| 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` | +| 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` | +| symbol | Sets the main chart symbol. Defaults to `R_100`. Refer [Props vs UI](#props-vs-ui) for usage details. | +| initialData | Set initial data that the library requires for booting up. Refer [initialData](#initial-data) for usage details. | +| feedCall | Enable/Disable the feed call for getting requirement resources. Default is `{activeSymbols: true,tradingTimes: true}` | +| 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. | +| 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. | +| startEpoch | Set the start epoch of the chart | +| endEpoch | Set the end epoch of the chart | +| chartControlsWidgets | Render function for chart control widgets. Set to `null` if you want to hide chart controls. Refer to [Customising Components](#customising-components). | +| topWidgets | Render function for top widgets. Refer to [Customising Components](#customising-components). | +| bottomWidgets | Render function for bottom widgets. Refer to [Customising Components](#customising-components). | +| toolbarWidget | Render function for floating toolbar widgets. Refer to [Customising Components](#customising-components). | +| isMobile | Switch between mobile or desktop view. Defaults to `false`. | +| onSettingsChange | Callback that will be fired each time a setting is changed. | +| 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`. | +| settings | Sets the chart settings. Refer to [Chart Settings](#chart-settings) | +| barriers | Draw chart barriers. Refer to [Barriers API](#barriers-api) for usage details | +| enableRouting | Enable routing for dialogs. Defaults to `false` | +| 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`. | +| onMessage | SmartCharts will send notifications via this callback, should it be provided. Each notification will have the following structure: `{ text, type, category }`. | +| isAnimationEnabled | Determine whether chart animation is enabled or disabled. It may needs to be disabled for better performance. Defaults to `true`. | +| showLastDigitStats | Shows last digits stats. Defaults to `false`. | +| 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`. | +| | +| clearChart | Clear the chart. | +| onExportLayout | Export the layout and send it back using this callback. | +| importedLayout | The layout to be imported to chart. It should be the layout that was exported in onExportLayout; | +| shouldFetchTradingTimes | Determine whether an API call for fetching trading times is necessary for the new chart or not. Defaults to `true` | +| shouldFetchTickHistory | Determine whether an API call for fetching tick history is necessary for the new chart or not. Defaults to `true` | +| allTicks | Provides all_ticks contract data for chart rendering when contract with duration = 'ticks' . Defaults to `undefined` | +| 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` | +| crosshair | Set state of Crosshair Component. Allowed values are undefined, 0,1,2. Defaults to `undefined` | +| crosshairTooltipLeftAllow | Set max left position which chart allow to render left side tooltip of crosshair, if mouse position before this size, the crosshair tooltip move to right side of mouse, if set `null` then chart specify `315px` as default value. Defaults to `null` | +| 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. | +| 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. | +| 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` | +| enableZoom | Enable/disable zoom feature in chart. Defaults to `true` | ### Chart Settings @@ -212,14 +213,14 @@ Initial data property designed to pass prepared chart data in case you don't wan ```jsx ``` @@ -244,21 +245,18 @@ Attributes marked with `*` are **mandatory**: | opacityOnOverlap | Sets the opacity of the barrier when it is overlapping with other barrier. | | high\* | Sets the price of the high barrier. | | low\* | Sets the price of the low barrier. | + #### ~~Marker API~~ (Depricated) Markers provide a way for developers to place DOM elements inside the chart that are positioned based on date, values or tick location. Unlike [CharIQ's Markers](http://documentation.chartiq.com/tutorial-Markers.html#main), we only allow markers to be placed on the main chart. Also note that this Marker 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. ```jsx - - {/* Place marker content here */} -
-
Trade Start
- + + {/* Place marker content here */} +
+
Trade Start
+ ``` @@ -290,22 +288,22 @@ It will keep the marker position on the chart. USAGE: -- `setRef({setPosition, div})` will be called onMount. -- `setRef(null)` will be called when the marker unmounts. -- `div` is the dom element containing the marker with `your-css-class` - - any content update should be done using `div` and vanilla js - - use `div.querySelector('...')` to get a dom reference in order to update your content. - - avoid doning expensive DOM operations on `div` such as style changes. -- `setPosition({epoch, price})` is a function that you will use to update the `div` position. - - epoch is the tick unix epoch from api - - price is the tick price, it could be `null` if you want to draw a vertical line. -- call `setPosition({epoch: null, price: null})` to hide the marker. +- `setRef({setPosition, div})` will be called onMount. +- `setRef(null)` will be called when the marker unmounts. +- `div` is the dom element containing the marker with `your-css-class` + - any content update should be done using `div` and vanilla js + - use `div.querySelector('...')` to get a dom reference in order to update your content. + - avoid doning expensive DOM operations on `div` such as style changes. +- `setPosition({epoch, price})` is a function that you will use to update the `div` position. + - epoch is the tick unix epoch from api + - price is the tick price, it could be `null` if you want to draw a vertical line. +- call `setPosition({epoch: null, price: null})` to hide the marker. PROPS: -- `threshold` (optional): the chart has a zoom level, the marker will be only shown within that threshold. -- `markerRef` (required): pass the `setRef` callback using this property -- `className` (optional): avoid expoensive css transition or keyframe animations on this class. +- `threshold` (optional): the chart has a zoom level, the marker will be only shown within that threshold. +- `markerRef` (required): pass the `setRef` callback using this property +- `className` (optional): avoid expoensive css transition or keyframe animations on this class. ### Raw Marker API @@ -314,10 +312,10 @@ This component is used to render directly into the chart canvas. PROPS: -- `epoch_array`: array of epoch values to get coordinates for. -- `draw_callback`: called on every frame with ({ctx, points}). - - `points` will be an array of [{left, top, epoch}] in pixels. - - `ctx` is the Context2dDrawingContext +- `epoch_array`: array of epoch values to get coordinates for. +- `draw_callback`: called on every frame with ({ctx, points}). + - `points` will be an array of [{left, top, epoch}] in pixels. + - `ctx` is the Context2dDrawingContext ### Customising Components @@ -326,75 +324,75 @@ We offer library users full control on deciding which of the top widgets and cha For example, we want to remove all the chart control buttons, and for top widgets to just show the comparison list (refer `app/index.jsx`): ```jsx -import { ChartMode, ToolbarWidget } from "@deriv/deriv-chart"; +import { ChartMode, ToolbarWidget } from '@deriv/deriv-chart'; const renderTopWidgets = () => ( - -
Hi I just replaced the top widgets!
- - + +
Hi I just replaced the top widgets!
+ + ); const renderBottomWidgets = () => ( - -
Hi, I am a bottom widget!
- + +
Hi, I am a bottom widget!
+ ); const renderToolbarWidgets = () => ( - -
Hi I just replaced the top widgets!
- - + +
Hi I just replaced the top widgets!
+ + ); const App = () => ( - {}} - > + {}} + > ); ``` Here are the following components you can import: -- Top widgets: - - ` {}} open_market={null} />` -- Chart controls: - - `` - - ` {}} />` - - `` - - `` - - `` - - `` - - ` {}} />` - - `` - - `` -- Toolbar Widget - - `` +- Top widgets: + - ` {}} open_market={null} />` +- Chart controls: + - `` + - ` {}} />` + - `` + - `` + - `` + - `` + - ` {}} />` + - `` + - `` +- Toolbar Widget + - `` ### Props vs UI Certain chart parameters can be set either by props or from the chart UI: -- `symbol` - set by `` -- `granularity` - set by `` -- `chartType` - set by `` +- `symbol` - set by `` +- `granularity` - set by `` +- `chartType` - set by `` This 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: ```jsx { - /* ...Pass to symbol prop in */ - }} + open_market={{ + category: 'forex', + subcategory: 'minor-pairs', + market: 'frxAUDCAD', + }} + onChange={symbol => { + /* ...Pass to symbol prop in */ + }} /> ``` @@ -402,12 +400,11 @@ See available components and their props in [Customising Components](#customisin #### ChartTitle -| Attribute | Description | -| ------------ | --------------------------------------------------------------------------------------------------- | -| onChange | When symbol/market changes, this method call. `(symbol) => { }` | -| isNestedList | Change the theme of Dropdown, if set to `true` it shows a dropdown nested style. Default is `false` | -| open_market | Sepecify the visible market on the market selector scroll. it accept `{category: '', subcategory: '', market: ''}` . Default is `null` | - +| Attribute | Description | +| ------------ | -------------------------------------------------------------------------------------------------------------------------------------- | +| onChange | When symbol/market changes, this method call. `(symbol) => { }` | +| isNestedList | Change the theme of Dropdown, if set to `true` it shows a dropdown nested style. Default is `false` | +| open_market | Sepecify the visible market on the market selector scroll. it accept `{category: '', subcategory: '', market: ''}` . Default is `null` | #### ToolbarWidget @@ -415,10 +412,8 @@ See available components and their props in [Customising Components](#customisin | --------- | ------------------------------------------------------------------------------- | | position | determine the position of toolbar, which can be `top, bottom`. Default is `top` | - ## How to contribute - 1. Create branch from the latest `master` branch ```sh @@ -443,14 +438,14 @@ See available components and their props in [Customising Components](#customisin npm run test ``` -- Once your changes have been merged to `master`, it will immediately deployed to [charts.binary.com/beta](https://charts.binary.com/beta/). +- Once your changes have been merged to `master`, it will immediately deployed to [charts.binary.com/beta](https://charts.binary.com/beta/). - Make sure to change the PR base to `master` branch - Click on the autogenerated link from terminal to open the PR - ## Manage releases / deployment process + ### Library deployment / publishing to NPM To publish to production: @@ -464,14 +459,16 @@ To publish to beta: ```sh npm run build && npm publish --tag beta ``` + ### Staging / Production deployment + #### 1) Staging deployment: -- Any pull request merged to `master` branch will be automatically deployed to charts.binary.com/beta. +- Any pull request merged to `master` branch will be automatically deployed to charts.binary.com/beta. #### 2) Production deployment: -- Production deployment is handled with tagging, ideally, we will create the tag with the prefix `production_v{{version_number}}` from `master` branch and push the tag to initiate the production release pipeline. +- Production deployment is handled with tagging, ideally, we will create the tag with the prefix `production_v{{version_number}}` from `master` branch and push the tag to initiate the production release pipeline. NOTE: _Write access is required for this action_ @@ -481,54 +478,23 @@ i) `git tag production_v20180901 -m 'release production'` ii) `git push origin production_v20180901` -### Deploy to Github Pages - -As ChartIQ license is tied to the `binary.com` domain name, we provide developers with a `binary.sx` to test out the library on their Github Pages. - -For each feature/fix you want to add we recommend you deploy an instance of SmartCharts for it (e.g. `brucebinary.binary.sx/featureA`, `brucebinary.binary.sx/featureB`). To deploy SmartCharts to your github pages, you first need to setup your `gh-pages` branch: - -1. Make sure you have a `binary.sx` subdomain pointed to your `github.io` page first (e.g. `brucebinary.binary.sx -> brucebinary.github.io`). -2. In your `gh-pages` branch, add a `CNAME` in your project root folder, and push that file to your branch, for example: - -```bash -git checkout -b gh-pages origin/gh-pages # if you already checkout from remote execute: git checkout gh-pages -echo 'brucebinary.binary.sx' > CNAME # substitute with your domain -git add --all -git commit -m 'add CNAME' -git push origin gh-pages -``` - -Here on, to deploy a folder (e.g. `folder_name`): - - npm run build-travis && npm run gh-pages:folder 'myfoldername' - -Now you should be able to see your SmartCharts app on `brucebinary.binary.sx/myfoldername`. - -Alternatively you can deploy directly to the domain itself (note that this **erases all folders**; could be useful for cleanup). In our example, the following command will deploy to `brucebinary.binary.sx`: - - npm run build-travis && echo 'brucebinary.binary.sx' > CNAME && npm run gh-pages - -> Note: `npm run build-travis` will add hashing inside `index.html`; **do not push those changes to git!** - -There may be occasions where you would want to deploy development versions of the webpack bundles. Quick way to do this is to change the [`--mode` parameter](https://webpack.js.org/concepts/mode/) in `build` npm command in `package.json` to from `production` to `development`. - ## Manage translations All strings that need to be translated must be inside `t.translate()`: ```js -t.translate("[currency] [amount] payout if the last tick.", { - currency: "USD", - amount: 43.12, +t.translate('[currency] [amount] payout if the last tick.', { + currency: 'USD', + amount: 43.12, }); -t.setLanguage("fr", callback_function); // components need to be rerendered for changes to take affect +t.setLanguage('fr', callback_function); // components need to be rerendered for changes to take affect ``` Each time a new translation string is added to the code, you need to update the `messages.pot` via: npm run translations -Once the new `messages.pot` is merged into the `master` branch, it will automatically be updated in [CrowdIn](https://crowdin.com/project/smartcharts/settings#files). You should expect to see a PR with the title +Once the new `messages.pot` is merged into the `master` branch, it will automatically be updated in [CrowdIn](https://crowdin.com/project/smartcharts/settings#files). You should expect to see a PR with the title **New Crowdin translations** in a few minutes; this PR will update the `*.po` files. @@ -544,8 +510,8 @@ We organise the development in Trello. Here is the standard workflow of how a fe 3. Cards are assigned to developers by adding them to the card; manager gets added to every card. 4. If a developer is actively working on a card, he places the card in `In Development`; otherwise it should be placed back into `Bugs/Todo` list. 5. Once the feature/bug fix is implemented, the developer needs put 2 things in the card before placing his card in `Review` list.: - - **PR**: Link to the PR. - - **Test Link**: Link to github pages that has the changes; this is for QA to verify. Refer to [this section](#deploy-to-github-pages) for instructions on how to deploy. + - **PR**: Link to the PR. + - **Test Link**: Link to github pages that has the changes; this is for QA to verify. Refer to [this section](#deploy-to-github-pages) for instructions on how to deploy. 6. If reviewer requests changes, he will place the card back to the `In Development` list. This back and forth continues until the reviewer passes the PR by marking it as `approved` in Github. 7. Reviewer places the reviewed card into `QA` list. 8. If the card fails QA check, QA can comment on the card on what failed, and place the card back to `In Development` list. If QA passes the changes, QA will place the card from `QA` to `Ready`; this card is now ready to be merged to `master`. @@ -580,10 +546,10 @@ The SVG files included in the `js` and `jsx` files are automatically put togethe ```scss .ic-icon.active { - svg { - stroke: #2e8836; - fill: #ff3d38; - } + svg { + stroke: #2e8836; + fill: #ff3d38; + } } ``` @@ -605,9 +571,9 @@ Each component here is mapped to a corresponding store in the main store. **Only ```jsx function mapperFunction(mainStore) { - return { - value: mainStore.subStore.value, - }; + return { + value: mainStore.subStore.value, + }; } export default connect(mapperFunction)(MyComponent); @@ -623,12 +589,12 @@ This is used when multiple copies of a store needs to exist in the same state tr ```js export default class ChartTitleStore { - constructor(mainStore) { - this.menu = new MenuStore(mainStore); - this.ChartTitleMenu = this.menu.connect(Menu); + constructor(mainStore) { + this.menu = new MenuStore(mainStore); + this.ChartTitleMenu = this.menu.connect(Menu); + // ... + } // ... - } - // ... } ``` @@ -636,11 +602,11 @@ The `connect` method for subcomponents are defined in its store (instead of the ```js export default class MenuStore { - // ... - connect = connect(() => ({ - setOpen: this.setOpen, - open: this.open, - })); + // ... + connect = connect(() => ({ + setOpen: this.setOpen, + open: this.open, + })); } ``` @@ -648,7 +614,7 @@ We then pass the connected component in `ChartTitle.jsx`: ```js export default connect(({ chartTitle: c }) => ({ - ChartTitleMenu: c.ChartTitleMenu, + ChartTitleMenu: c.ChartTitleMenu, }))(ChartTitle); ``` @@ -662,9 +628,9 @@ Independent components is able to access the main store, but the main store has ```js class IndependentStore { - constructor(mainStore) {} - updateProps(nextProps) {} // intercept the props from the component - destructor() {} // called on componentWillUnmount + constructor(mainStore) {} + updateProps(nextProps) {} // intercept the props from the component + destructor() {} // called on componentWillUnmount } ``` @@ -672,17 +638,15 @@ This enables library users to use multiple copies of a component without connect ```jsx function mapperFunction(customStore) { - return { - value: customStore.value, - }; + return { + value: customStore.value, + }; } export default connect( - mapperFunction, - MyStoreClass // Required argument for independent components + mapperFunction, + MyStoreClass // Required argument for independent components )(MyIndependentComponent); ``` Note 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. - -