Sigmastocks React Chart

This package contains 3 responsive charts used for building a frontend to sigmastocks:

• DonutChart
• RadarChart
• HistoryChart

Dependencies:

• chart.js (^2.7.2)
• d3 (^5.4.0)
• react-chartjs-2 (^2.7.2)
• react (^16.3.2)

You probably have react installed so install the rest by running this command:

npm install d3 chart.js react-chartjs-2

How to use the charts:

DonutChart

The DonutChart expects a generated portfolio (either from make_portfolio or invest) as it's dataSet,

Colors and translations are both objects with gics sectors as key.

  import { DonutChart } from 'sigmastocks-react-components';

  Example Usage:

  <DonutChart
  dataSet={make_portfolio_response.data}
  colors={{
      "Energy": "#002776",
      "Materials": "#0071cd",
      "Industrials": "#002776",
      "Consumer Discretionary": "#002776",
      "Consumer Staples": "#0071cd",
      "Health Care": "#002776",
      "Financials": "#0071cd",
      "Information Technology":"#002776",
      "Telecommunication Services": "#0071cd",
      "Utilities": "#002776",
      "Real Estate": "#0071cd"
    }}
    translations={{
      "Energy": "Energy",
      "Materials": "Materials",
      "Industrials": "Industrials",
      "Consumer Discretionary": "Consumer Discretionary",
      "Consumer Staples": "Consumer Staples",
      "Health Care": "Health Care",
      "Financials": "Financials",
      "Information Technology": "Information Technology",
      "Telecommunication Services": "Telecommunication Services",
      "Utilities": "Utilities",
      "Real Estate": "Real Estate"
    }}
  />

RadarChart

The RadarChart can handle multiple RadarCharts on top of eachother.

The dataSet prop expects an array of radar chart responses. The colors prop expect an array of colors in hex code.

The translations prop need an object with all factors and their translations.

  import { RadarChart } from 'sigmastocks-react-components';

  Example Usage:

  <RadarChart
    dataSet={[radar_chart_response.data]}
    colors={["#002776"]}
    translations={{
      "BookToMkt":"BookToMkt",
      "CashFlowToAsset":"CashFlowToAsset",
      "CurMktCap":"CurMktCap",
      "DebtToMktCap":"DebtToMktCap",
      "DividendToPrice":"DividendToPrice",
      "EarningsToPrice":"EarningsToPrice",
      "Momentum24M":"Momentum24M",
      "NetProfitMargin":"NetProfitMargin",
      "ReciprocalPEG":"ReciprocalPEG"
    }}
  />

HistoryChart

The HistoryChart expects a backcast and forcast as dataSet. To show risk-chart set showRisk prop to true.

The backcastColor and indexcastColor props must be hex-code.

  import { HistoryChart } from 'sigmastocks-react-components';

  Example Usage:

  <HistoryChart
    dataSet={backcast_and_forecast_response.data}
    backcastColor={"#002776"}
    indexcastColor={"#0071cd"}
    showRisk={false}
    labels={
      {
        strategy: "Din aktieportfölj",
        index: "OMX SPX",
        xAxisLabel: "Värde (kr)"
      }
    }
  />

How to build, develop and publish

Build:

npm run build

Develop:

npm link

and then link the package to the demo app

cd ../sigmastocks-react-components-demo

npm link sigmastocks-react-components

Publish:

npm publish