Code Monkey home page Code Monkey logo

smartcharts's Introduction

SmartCharts

SmartCharts is both the name of the app (charts.binary.com) and the charting library. You can install the library to your project via:

yarn add @binary-com/smartcharts

Important Note: the license for the library is tied to the binary.com domain name; it will not work in github pages.

Commands:

  • use yarn install to install dependencies
  • use yarn start to launch webpack dev server
  • use yarn build to build the library
  • use yarn build:app to build the charts.binary.com app
  • use yarn analyze to run webpack-bundle-analyzer

Note: eventhough both yarn build and yarn 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.

Quick Start

To see how to configure smartcharts for your webpack project, refer to app/webpack.config.js (this config is not used in the app development; refer to this section for more details).

import { SmartChart } from 'smartcharts';

class App extends React.Component {
    render() {
        return (
            <SmartChart
                onSymbolChange={(symbol) => console.log('Symbol has changed to:', symbol)}
                activeSymbols={/* Pass symbols from https://developers.binary.com/api/#active_symbols */}
            />
        );
    }
};

Translations

All strings that need to be translated must be inside t.translate():

t.translate('[currency] [amount] payout if the last tick.', { 
    currency: 'USD',
    amount: 43.12
});
t.setLanguage('fr'); // 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:

yarn translations

Once the new messages.pot is merged into the dev branch, it will automatically be updated in CrowdIn. You should expect to see a PR with the title New Crowdin translations in a few minutes; this PR will update the *.po files.

Contribute

To contribute to SmartCharts, fork this project and checkout the dev branch. When adding features or performing bug fixes, it is recommended you make a separate branch off dev. Prior to sending pull requests, make sure all unit tests passed:

yarn test

Note: When you send pull requests, remember to set the base branch to dev.

Once your changes have been merged to dev, it will immediately deployed to charts.binary.com/beta.

Developer Notes

Separation of App and Library

There 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.

Webpack 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, but on the same webpack.config.js (the one on the root folder). The webpack.config.js and index.html in the app folder is never actually used in this process; they serve as a guide to how to use the smartcharts library as an npm package. We do it this way to develop the app to have hot reload available when we modify library files.

Manual Deployment

Deploy to NPM

yarn build && yarn publish

Note: This is usually not required, since Travis will automatically deploy to charts.binary.com and charts.binary.com/beta when master and dev is updated.

The following commands will build and deploy to charts.binary.com (Make sure you are in the right branch!); you will need push access to this repository for the commands to work:

yarn deploy:beta        # charts.binary.com/beta
yarn deploy:production  # charts.binary.com

smartcharts's People

Contributors

bruce-binary avatar aminroosta avatar ashkanx avatar shayan-binary avatar 4p00rv avatar shayanypn avatar binarydevteam avatar mahboobeh-binary avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.